/* Base: cores (tema claro e escuro), textos, botões, menu lateral e o
   esqueleto das telas. Carrega primeiro: os outros arquivos usam as cores daqui.
   (A ordem dos arquivos no index.html importa: veja o comentário lá.) */

:root {
  color-scheme: light;
  /* Paleta da identidade visual: azul, turquesa e branco (coral e amarelo só em detalhes). */
  --bg: #f1f6fb;
  --surface: #ffffff;
  --surface-soft: #e6f0fa;
  --surface-alt: #f6f9fc;
  --text: #1d2f45;
  --muted: #566b81;
  --line: #dde7f0;
  --primary: #1f6fb8;
  --primary-strong: #14548e;
  --primary-soft: #d6e7f7;
  --coral: #ee7967;
  --coral-soft: #f8dfd8;
  --yellow: #edc653;
  --yellow-soft: #f8edc9;
  --accent: #19a7a1;
  --accent-soft: #d3f0ee;
  --banner: #dcebf8;
  --hero-from: #1f6fb8;  /* destaque colorido da Home (degradê azul → turquesa) */
  --hero-to: #19a7a1;
  --hero-shadow: #14548e; /* "sombra 3D" embaixo dos botões e bolinhas */
  --done-shadow: #127a75;
  --warm: #f1e8da;
  --shadow: 0 18px 50px rgba(24, 52, 86, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

button:disabled {
  cursor: not-allowed;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 5px;
  background: var(--text);
  color: var(--surface);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: calc(248px * var(--escala)) minmax(0, 1fr); /* o menu cresce junto (ver "Escala da tela") */
  background: var(--bg);
  color: var(--text);
}

/* ----- Menu lateral (computador) -----
   Item ativo: "pílula" com o degradê azul → turquesa do EduSinal. */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  border-right: 2px solid var(--line);
  background: var(--surface);
}

.brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  padding: 2px 8px;
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
}
.brand img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.brand-accent { color: var(--primary); }

.sidebar-label {
  margin: 34px 10px 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.side-nav { display: grid; gap: 6px; }

.nav-item {
  position: relative;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  border: 2px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav-item:hover { background: var(--surface-soft); color: var(--text); }
.nav-item:active { transform: translateY(2px); }
.nav-item.is-active {
  background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
  box-shadow: 0 4px 0 var(--hero-shadow);
  color: #ffffff;
}

.nav-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  font-size: 17px;
  line-height: 1;
}

/* ----- Ícones do EduSinal -----
   1. Ícone de COISA (área, item, conquista) é cheio ("-fill"); ícone de AÇÃO
      (setas, lupa, fechar, conferir) é de traço.
   2. Cada área tem uma cor, a mesma em todo lugar: Home azul, Dicionário
      turquesa, Ligas e Lojinha amarelo, Missões coral, Configurações cinza.
      As classes .tone-... só escolhem a cor; quem usa decide onde ela entra.
   3. O ícone fica num "chip" com o fundo clarinho da cor e uma sombrinha
      embaixo, em 3D, como os botões. */
.tone-blue { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.tone-teal { --tone: var(--accent); --tone-soft: var(--accent-soft); }
.tone-yellow { --tone: #a07c14; --tone-soft: var(--yellow-soft); }
.tone-coral { --tone: var(--coral); --tone-soft: var(--coral-soft); }
.tone-gray { --tone: var(--muted); --tone-soft: var(--surface-soft); }
:root[data-theme="dark"] .tone-yellow { --tone: var(--yellow); } /* no escuro, amarelo vivo para ler bem */

.nav-icon,
.settings-row-icon,
.profile-tile-icon,
.welcome-point-icon,
.mission-mark,
.home-quest-icon {
  background: var(--tone-soft, var(--primary-soft));
  color: var(--tone, var(--primary));
}
.nav-icon,
.settings-row-icon,
.profile-tile-icon,
.welcome-point-icon,
.mission-mark,
.home-quest-icon,
.shop-card-icon { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.08); }
:root[data-theme="dark"] :is(.nav-icon, .settings-row-icon, .profile-tile-icon, .welcome-point-icon, .mission-mark, .home-quest-icon, .shop-card-icon) { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.28); }

.nav-item.is-active .nav-icon { background: rgba(255, 255, 255, 0.2); color: #ffffff; }
/* Perfil: o rosto do mascote do aluno no lugar do ícone */
.nav-icon.is-avatar .mascot-svg { width: 100%; height: 100%; }
.nav-item.is-active .nav-icon.is-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.nav-badge {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--coral);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.sidebar-bottom { display: grid; gap: 12px; margin-top: auto; }
.sidebar-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}
.sidebar-note .sidebar-note-mark { /* mais específico que a regra geral .bi, que desfazia o centro */
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--coral);
  font-size: 16px;
  line-height: 1;
}

.workspace {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.screen-title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.settings-button {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
}

.screen-root {
  width: min(1400px, 100%); /* em telas largas cresce até 1400px e só depois centraliza */
  flex: 1;
  margin: 0 auto;
  padding: 34px clamp(18px, 2.4vw, 36px) 30px; /* dos lados: perto do menu, sem grudar */
  /* "backwards" e não "both": depois de entrar, a tela não fica com transform.
     Um transform que sobra prende as faixas fixas (como o botão da atividade)
     ao tamanho da tela, e no tablet a faixa ficava no meio, e não embaixo. */
  animation: screen-in 260ms ease-out backwards;
}

.screen-root:focus {
  outline: none;
}

.app-shell[data-current-screen="intro"],
.app-shell[data-current-screen="login"],
.app-shell[data-current-screen="signup"],
.app-shell[data-current-screen="terms"] {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell[data-current-screen="intro"] .sidebar,
.app-shell[data-current-screen="login"] .sidebar,
.app-shell[data-current-screen="signup"] .sidebar,
.app-shell[data-current-screen="terms"] .sidebar {
  display: none;
}

.app-shell[data-current-screen="intro"] .settings-button,
.app-shell[data-current-screen="login"] .settings-button,
.app-shell[data-current-screen="signup"] .settings-button,
.app-shell[data-current-screen="terms"] .settings-button {
  display: none;
}

.lives-hearts {
  display: flex;
  gap: 3px;
}

.life-heart {
  color: var(--line);
  font-size: 14px;
  line-height: 1;
}

.life-heart.is-full {
  color: var(--coral);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--primary-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.page-intro h2 {
  margin: 0 0 10px;
  font-family: "Manrope", sans-serif;
  font-size: 33px;
  line-height: 1.16;
  font-weight: 800;
}

.page-intro p:not(.eyebrow) {
  max-width: 495px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button-outline {
  border-color: var(--line);
  background: var(--surface);
  color: var(--primary-strong);
}

.button-outline:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.section-heading {
  min-height: 48px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.section-heading .eyebrow {
  margin-bottom: 5px;
}

.section-heading h2 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: 21px;
  font-weight: 800;
}

.progress-track {
  height: 7px;
  margin: 17px 0 7px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-alt);
}

.progress-track span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--primary);
}

.text-button,
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-strong);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.text-button:hover,
.back-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-button span {
  font-size: 15px;
}

.demo-disclaimer {
  margin: 17px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.app-footer {
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 0 clamp(22px, 4vw, 58px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
}

.footer-dot {
  padding: 0 5px;
  color: var(--coral);
}

.page-intro {
  min-height: 125px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 19px;
}

.page-intro h2 {
  font-size: 29px;
}

.demo-pill {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

textarea::placeholder,
.field-label input::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

input[type="radio"] {
  accent-color: var(--primary);
}

.field-label {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
}

.field-label > span {
  color: var(--muted);
  font-weight: 400;
}

.field-label input,
textarea {
  width: 100%;
  min-height: 41px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
}

textarea {
  min-height: 83px;
  padding: 10px 11px;
  resize: vertical;
}

/* Depois de conferir: certa em verde-turquesa, errada em coral (sem o contorno de "escolhida") */

.form-error {
  min-height: 17px;
  margin: 4px 0 7px;
  color: #ad3d33;
  font-size: 10px;
}

:root[data-theme="dark"],
.app-shell[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1d2b;
  --surface: #172a3d;
  --surface-soft: #1d3a56;
  --surface-alt: #14283a;
  --text: #e8f1fa;
  --muted: #9fb3c6;
  --line: #2b4259;
  --primary: #6fb4ee;
  --primary-strong: #a6d3f7;
  --primary-soft: #1e3d5c;
  --coral: #ff9782;
  --coral-soft: #513a36;
  --yellow: #e5bd52;
  --yellow-soft: #4d442b;
  --accent: #4cc9c3;
  --accent-soft: #1b4a4c;
  --banner: #1a3550;
  --hero-from: #1b4f86;
  --hero-to: #127772;
  --hero-shadow: #0f3157;
  --done-shadow: #0b4d4a;
  --warm: #3a352c;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

/* Botão principal: fundo claro no tema escuro, então o texto fica escuro. */

@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 218px minmax(0, 1fr);
  }
}

@media (max-width: 1000px) {
  .app-shell {
    display: block;
  }

  .settings-button {
    flex: 0 0 auto;
    display: inline-flex;
  }

  .screen-root {
    padding: 22px 17px 25px;
  }

  .page-intro {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 13px;
  }

  .page-intro h2 {
    font-size: 25px;
  }

  .app-footer {
    margin: 0 17px;
  }
}

@media (max-width: 480px) {

  .settings-button {
    width: 34px;
    height: 34px;
  }

  .screen-root {
    padding-right: 13px;
    padding-left: 13px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .section-heading h2 {
    font-size: 19px;
  }

  .app-footer {
    min-height: 45px;
    margin: 0 13px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Modo foco: ao abrir uma matéria, as áreas laterais recuam e as lições viram uma árvore. */

@media (min-width: 1001px) {
  .app-shell {
    transition: grid-template-columns 380ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .app-shell[data-focus="on"],
  .app-shell[data-current-screen="lesson"] {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .app-shell[data-focus="on"] .sidebar,
  .app-shell[data-current-screen="lesson"] .sidebar {
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
    border-right-color: transparent;
    opacity: 0;
    pointer-events: none;
  }

  .sidebar {
    transition: opacity 220ms ease, padding 380ms ease;
  }

  /* Modo foco no computador: sem rodapé e com margens menores, para a árvore crescer */
  .app-shell[data-focus="on"] .app-footer,
  .app-shell[data-current-screen="lesson"] .app-footer { display: none; }
  .app-shell[data-current-screen="lesson"] .screen-root { padding-top: 20px; padding-bottom: 0; }
  .app-shell[data-focus="on"] .screen-root { padding-top: 20px; padding-bottom: 20px; }
}

.app-shell[data-focus="on"] .demo-disclaimer {
  display: none;
}

/* Preferências de acessibilidade escolhidas nas Configurações */
/* Texto grande: aumenta só o conteúdo da tela. As barras de cima e de baixo do
   celular ficam do tamanho normal, senão não cabem na largura e a tela vaza
   para o lado. */
/* Escala da tela: em monitor grande, o app inteiro fica proporcionalmente maior
   (textos, cartões, botões e o menu), para preencher a tela em vez de sobrar
   espaço vazio. O zoom final = escala da tela × texto grande. */
.app-shell { --escala: 1; --texto: 1; --zoom: calc(var(--escala) * var(--texto)); }
.app-shell[data-text-size="large"] { --texto: 1.15; }
@media (min-width: 1500px) and (min-height: 820px) { .app-shell { --escala: 1.12; } }  /* ex.: 1536x864, 1600x900 */
@media (min-width: 1800px) and (min-height: 900px) { .app-shell { --escala: 1.25; } }  /* Full HD (1920x1080) */
@media (min-width: 2300px) and (min-height: 1200px) { .app-shell { --escala: 1.6; } }  /* 2K (2560x1440) */
@media (min-width: 3400px) and (min-height: 1900px) { .app-shell { --escala: 2.2; } }  /* 4K (3840x2160) */
.screen-root { zoom: var(--zoom); }
.sidebar { zoom: var(--escala); height: calc(100vh / var(--escala)); } /* com zoom, 100vh "vale" mais: divide de volta */
/* Alturas que dependem do tamanho da tela (árvore, vídeo da atividade) usam
   "100vh / var(--zoom)": com o zoom, a tela "cabe" menos pixels de conteúdo. */

.app-shell[data-motion="reduced"] *,
.app-shell[data-motion="reduced"] *::before,
.app-shell[data-motion="reduced"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Carregando: enquanto o app espera a API, uma barrinha corre no topo da tela. */
body.is-loading::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 40%;
  height: 3px;
  background: var(--accent, #2bbbb3);
  animation: loading-bar 900ms ease-in-out infinite;
}

@keyframes loading-bar {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}

/* Tela de abertura (index.html), enquanto o app pergunta à API quem está logado */
.app-splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 70vh; padding: 24px; text-align: center; }
.app-splash img { width: 96px; height: 96px; border-radius: 24px; object-fit: contain; animation: splash-pulse 1.4s ease-in-out infinite; }
.app-splash-title { margin: 6px 0 0; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 800; color: var(--text); }
.app-splash-hint { max-width: 320px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; opacity: 0; transition: opacity 0.4s; }
.app-splash.is-slow .app-splash-hint { opacity: 1; }
.app-shell:has(#app-splash) :is(.mobile-topbar, .bottom-nav, .app-footer) { display: none; }
.app-shell:has(#app-splash) .sidebar { visibility: hidden; }
@keyframes splash-pulse { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .app-splash img { animation: none; } }

/* ----- Termos de uso: o topo fica parado e só o texto rola (cabe na tela) ----- */
/* 115px = respiro de cima e de baixo da tela (64) + rodapé (51) */
.terms { width: min(760px, 100%); height: calc(100dvh / var(--zoom) - 115px); display: flex; flex-direction: column; gap: 16px; margin: 0 auto; }
.terms-header { display: flex; align-items: center; gap: 14px; }
.terms-header h2 { margin: 0; font-size: 24px; }
.terms-header p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.terms-text { flex: 1; min-height: 0; overflow-y: auto; scrollbar-color: var(--line) transparent; padding: 4px 18px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.terms-section h3 { margin: 18px 0 6px; font-size: 17px; }
.terms-section p { margin: 0 0 8px; color: var(--text); font-size: 15px; line-height: 1.6; }
.signup-terms { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0; color: var(--text); font-size: 14px; line-height: 1.45; cursor: pointer; }
.signup-terms input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--hero-from); cursor: pointer; }
.signup-terms .text-button { display: inline; min-height: 0; padding: 0; font-size: inherit; line-height: inherit; vertical-align: baseline; }

/* ----- Duas colunas no computador (Ligas, Perfil e Configurações) -----
   O cartão de cima fica igual e o resto vira duas colunas que ocupam a altura
   da tela: a página não rola. Se uma coluna tiver mais coisa do que cabe, ela
   rola sozinha, por dentro (no ranking, só a lista rola).
   No celular e em telas estreitas, as caixas "somem" (display: contents) e
   tudo fica numa coluna, na mesma ordem de antes. */
.desk-columns,
.desk-col { display: contents; }

@media (min-width: 1001px) {
  .app-shell:is([data-current-screen="leagues"], [data-current-screen="profile"], [data-current-screen="more"]) .screen-root {
    flex: none; /* sem isso, a área cresce junto com o conteúdo e a altura não vale */
    height: calc((100vh - 51px) / var(--zoom)); /* a tela menos o rodapé */
    display: flex;
    flex-direction: column;
    padding-bottom: 18px;
  }
  .desk-columns {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 24px;
  }
  .desk-col {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: -8px -6px 0; /* espaço para a sombra 3D e o contorno dos cartões não serem cortados */
    padding: 8px 6px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .desk-columns > .desk-col > * { flex: none; margin-top: 0; margin-bottom: 0; } /* mais forte que o margin-top das seções */

  /* Ligas: a coluna do ranking não rola inteira, só a lista */
  .desk-col-fill { overflow: hidden; }
  .desk-col-fill > .ranking-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .ranking-section .ranking-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; margin: 0 -6px; padding: 2px 6px 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }

  /* Ligas (estilo Duolingo): o ranking é a coluna principal, larga; a escada
     das ligas, a sua posição e os avisos ficam numa coluna estreita do lado.
     As caixas das colunas "somem" e cada parte é posicionada na grade. */
  .app-shell[data-current-screen="leagues"] .desk-columns {
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 26px;
    row-gap: 16px;
    align-items: start;
  }
  .app-shell[data-current-screen="leagues"] .desk-col { display: contents; }
  .app-shell[data-current-screen="leagues"] .ranking-section { grid-column: 1; grid-row: 1 / -1; align-self: stretch; min-height: 0; display: flex; flex-direction: column; }
  .app-shell[data-current-screen="leagues"] .ranking-section .section-heading { margin: 0 0 10px; }
  .app-shell[data-current-screen="leagues"] .league-ladder { grid-column: 2; grid-row: 1; margin: 0; padding-top: 8px; } /* espaço pro contorno do troféu */
  .app-shell[data-current-screen="leagues"] .league-status { grid-column: 2; grid-row: 2; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; margin: 0; }
  .app-shell[data-current-screen="leagues"] .league-status .button-3d { grid-column: 1 / -1; }
  .app-shell[data-current-screen="leagues"] .league-status-place { width: 64px; height: 64px; }
  .app-shell[data-current-screen="leagues"] .safety-note { grid-column: 2; grid-row: 3; margin: 0; }
  .app-shell[data-current-screen="leagues"] .desk-columns .demo-disclaimer { grid-column: 2; grid-row: 4; margin: 0; }
  .app-shell[data-current-screen="leagues"] .league-step .league-badge { width: 46px; height: 46px; font-size: 20px; }
  .app-shell[data-current-screen="leagues"] .league-step.is-current .league-badge { width: 52px; height: 52px; font-size: 24px; }
  .app-shell[data-current-screen="leagues"] .league-step:not(:last-child)::after { top: 20px; }
  /* Linhas do ranking mais baixas: cabem mais alunos (e você aparece sem rolar) */
  .app-shell[data-current-screen="leagues"] .ranking-list { position: relative; gap: 6px; }
  .app-shell[data-current-screen="leagues"] .ranking-row { grid-template-columns: 32px 36px minmax(0, 1fr) auto; padding: 6px 14px; border-radius: 14px; }
  .app-shell[data-current-screen="leagues"] .ranking-avatar { width: 36px; height: 36px; }
  .app-shell[data-current-screen="leagues"] .ranking-medal { width: 28px; height: 28px; font-size: 13px; }
  .app-shell[data-current-screen="leagues"] .ranking-divider { margin: 2px 0; }

  /* Configurações: a coluna das preferências é um pouco mais larga (os botões de escolha ocupam espaço) */
  .app-shell[data-current-screen="more"] .desk-columns { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  /* Perfil: estatísticas em duas por linha, para os números e nomes não ficarem apertados */
  .desk-col .profile-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Telas entre 1000 e 1200px (tablet deitado, notebook pequeno): Ligas e Perfil
   já ficam em duas colunas, mas Configurações fica numa coluna só (os botões de
   escolha não cabem lado a lado) e a página rola, como antes. */
@media (min-width: 1001px) and (max-width: 1199px) {
  .app-shell[data-current-screen="more"] .screen-root { height: auto; display: block; }
  .app-shell[data-current-screen="more"] .desk-columns,
  .app-shell[data-current-screen="more"] .desk-col { display: contents; }
  .app-shell[data-current-screen="more"] .settings-group { margin-top: 26px; }
}

/* Celular: o aviso de segurança e a nota das ligas continuam embaixo do ranking,
   como antes (no computador eles ficam na coluna da esquerda). */
@media (max-width: 1000px) {
  .app-shell[data-current-screen="leagues"] .screen-root { display: flex; flex-direction: column; }
  .app-shell[data-current-screen="leagues"] .screen-root > * { flex: none; }
  .app-shell[data-current-screen="leagues"] .desk-col .safety-note,
  .app-shell[data-current-screen="leagues"] .desk-col .demo-disclaimer { order: 1; }
}

/* ----- Centralizado, como no Duolingo -----
   No computador, as abas não esticam até a borda: o conteúdo fica numa
   largura confortável, no meio. As laterais ficam livres (e vão receber o
   fundo com sinais). A Home e a atividade continuam largas: a trilha e os
   vídeos precisam de espaço. */
@media (min-width: 1001px) {
  .app-shell:not([data-current-screen="trail"]):not([data-current-screen="lesson"]) .screen-root { width: min(1040px, 100%); }
  .app-shell.app-shell[data-current-screen="missions"] .screen-root { width: min(780px, 100%); } /* uma coluna só: mais estreita ("app-shell" duas vezes = regra mais forte que a de cima) */
}

/* ----- No PC, a página não rola (Dicionário, Missões e Lojinha) -----
   O cartão de cima fica parado e o resto rola dentro de um quadro
   (.screen-scroll). No celular a caixa "some" e a página rola com o dedo,
   como antes: lá rolar é natural. */
.screen-scroll { display: contents; }

@media (min-width: 1001px) {
  .app-shell:is([data-current-screen="signs"], [data-current-screen="missions"], [data-current-screen="shop"]) .screen-root {
    flex: none;
    height: calc((100vh - 51px) / var(--zoom)); /* a tela menos o rodapé */
    display: flex;
    flex-direction: column;
    padding-bottom: 18px;
  }
  .app-shell:is([data-current-screen="signs"], [data-current-screen="missions"], [data-current-screen="shop"]) .screen-root > :not(.screen-scroll) { flex: none; } /* o cartão de cima não encolhe; o quadro sim */
  .screen-root > .screen-scroll {
    flex: 1;
    min-height: 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 -8px; /* espaço para a sombra 3D dos cartões */
    padding: 0 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
}

/* ----- Guarda-roupa no PC: a página não rola -----
   O mascote fica parado do lado e só a grade de itens rola, por dentro. */
@media (min-width: 1001px) {
  .app-shell[data-current-screen="mascot"] .screen-root {
    flex: none;
    height: calc((100vh - 51px) / var(--zoom)); /* a tela menos o rodapé */
    display: flex;
    flex-direction: column;
    padding-bottom: 18px;
  }
  .app-shell[data-current-screen="mascot"] .screen-root > * { flex: none; }
  .app-shell[data-current-screen="mascot"] .screen-root > .mascot-editor { flex: 1; min-height: 0; align-items: stretch; }
  .app-shell[data-current-screen="mascot"] .wardrobe-stage { align-self: start; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .app-shell[data-current-screen="mascot"] .mascot-wardrobe { min-height: 0; display: flex; flex-direction: column; }
  .app-shell[data-current-screen="mascot"] .mascot-wardrobe > * { flex: none; }
  .app-shell[data-current-screen="mascot"] .mascot-options {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    margin: -6px;
    padding: 6px; /* espaço para o contorno e a sombra dos cartões */
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
}