:root {
  --md-sys-color-primary: #0061A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #D1E4FF;
  --md-sys-color-on-primary-container: #001D36;
  --md-sys-color-secondary: #535F70;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #D7E3F7;
  --md-sys-color-on-secondary-container: #101C2B;
  --md-sys-color-tertiary: #6B5778;
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;
  --md-sys-color-background: #FDFCFF;
  --md-sys-color-on-background: #1A1C1E;
  --md-sys-color-surface: #FDFCFF;
  --md-sys-color-on-surface: #1A1C1E;
  --md-sys-color-surface-variant: #DFE2EB;
  --md-sys-color-on-surface-variant: #42474E;
  --md-sys-color-outline: #74777F;
  --md-sys-color-outline-variant: #C3C6CF;
  --md-sys-color-surface-container-high: #EDEDF1;
  
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
  --md-sys-motion-duration-medium4: 400ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto', system-ui, sans-serif;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  min-height: 100vh;
  overflow-x: hidden;
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.md-headline-medium { font-family: 'Google Sans', sans-serif; font-size: 1.75rem; font-weight: 500; }
.md-title-large { font-family: 'Google Sans', sans-serif; font-size: 1.375rem; font-weight: 500; }
.md-title-medium { font-family: 'Google Sans', sans-serif; font-size: 1rem; font-weight: 500; }
.md-display-large { font-family: 'Google Sans', sans-serif; font-size: 3.5625rem; font-weight: 400; line-height: 4rem; }
.md-body-large { font-size: 1rem; font-weight: 400; }
.md-body-small { font-size: 0.75rem; font-weight: 400; }
.md-label-large { font-size: 0.875rem; font-weight: 500; display: block; margin-bottom: 8px; }
.on-surface-variant { color: var(--md-sys-color-on-surface-variant); }

.splash-screen { position: fixed; inset: 0; background-color: var(--md-sys-color-surface); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 300ms ease-out; }
.splash-hidden { opacity: 0; pointer-events: none; }

fundo-organico { position: fixed; bottom: 0; right: 0; z-index: 0; pointer-events: none; transform: translate(30%, 30%); color: var(--md-sys-color-primary); opacity: 0.1; }

.container-app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 24px; }

.view { display: none; width: 100%; max-width: 480px; flex-direction: column; align-items: center; gap: 24px; animation: viewFadeIn 400ms cubic-bezier(0.2, 0.0, 0, 1.0); }
.view.ativo { display: flex; }
@keyframes viewFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.card-auth, .card-jogo, .card-ranking {
  background-color: var(--md-sys-color-surface-container-high);
  border-radius: 28px; padding: 32px; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-group { width: 100%; display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.m3-text-field { position: relative; width: 100%; }
.m3-text-field input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--md-sys-color-outline); border-radius: 8px; background: transparent; color: var(--md-sys-color-on-surface); font-size: 1rem; outline: none; transition: border-color 150ms; }
.m3-text-field input:focus { border-color: var(--md-sys-color-primary); border-width: 2px; padding: 0 15px; }
.m3-text-field label { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-on-surface-variant); font-size: 1rem; pointer-events: none; transition: all 150ms ease; background: var(--md-sys-color-surface-container-high); padding: 0 4px; }
.m3-text-field input:focus + label, .m3-text-field input:not(:placeholder-shown) + label { top: 0; transform: translateY(-50%) scale(0.85); color: var(--md-sys-color-primary); }

.actions-group { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.botao-filled, .botao-tonal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; width: 100%; border: none; border-radius: 9999px; font-family: 'Google Sans', sans-serif; font-size: 1rem; font-weight: 500; cursor: pointer; transition: transform 150ms, background-color 200ms; }
.botao-filled { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.botao-tonal { background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.botao-filled:active, .botao-tonal:active { transform: scale(0.97); }
.botao-filled:disabled { background-color: var(--md-sys-color-surface-variant); color: var(--md-sys-color-on-surface-variant); cursor: not-allowed; }

.botao-icon { background: transparent; border: none; color: var(--md-sys-color-on-surface-variant); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms; flex-shrink: 0; }
.botao-icon:hover { background-color: var(--md-sys-color-surface-variant); }

.header-jogo { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; gap: 12px; }
.perfil-usuario { display: flex; align-items: center; gap: 12px; }
.avatar-jogo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background-color: var(--md-sys-color-surface-variant); }

.card-jogo .icone-principal { font-size: 64px; color: var(--md-sys-color-primary); margin-bottom: 8px; }
.botao-crescer { max-width: 280px; }

.lista-ranking { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.item-ranking { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background-color: var(--md-sys-color-surface); border-radius: 16px; }
.posicao { font-family: 'Google Sans', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--md-sys-color-primary); width: 32px; }
.nome-player { flex: 1; text-align: left; font-weight: 500; }
.tamanho-player { font-weight: 700; color: var(--md-sys-color-tertiary); }

.m3-snackbar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: var(--md-sys-color-on-surface); color: var(--md-sys-color-surface); border-radius: 4px; padding: 14px 16px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 4000; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.m3-snackbar.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.dialog-config { 
  border: none; 
  border-radius: 28px; 
  padding: 0; 
  background-color: var(--md-sys-color-surface-container-high); 
  color: var(--md-sys-color-on-surface); 
  width: 100%; 
  max-width: 450px; 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%) scale(0.9); 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1), transform 300ms cubic-bezier(0.2, 0, 0, 1); 
}

.dialog-config::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: backdrop-filter 300ms ease, background-color 300ms ease;
}
.dialog-config:not(.aberto)::backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

.dialog-config.aberto { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }

.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 24px; }
.dialog-conteudo { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 24px; }

.config-avatar { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avatar-grande { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background-color: var(--md-sys-color-surface-variant); }

.config-item { display: flex; flex-direction: column; }
.theme-toggle { display: flex; gap: 12px; }
.theme-toggle .botao-tonal { width: auto; flex: 1; }
.theme-toggle .botao-tonal.ativo { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }

.color-palette { display: flex; gap: 12px; }
.cor-btn { width: 48px; height: 48px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 150ms; }
.cor-btn.ativo { border-color: var(--md-sys-color-on-surface); transform: scale(1.1); }

.botao-sair-config { background-color: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }

@media (max-width: 480px) {
  .dialog-config { max-width: 100%; width: 100vw; height: 80vh; border-radius: 28px 28px 0 0; top: auto; bottom: 0; left: 0; transform: translateY(100%); }
  .dialog-config.aberto { transform: translateY(0); }
}