/* ==========================================================================
   v7-jogo.css: a PELE DE JOGO do Professor Ulysses ("Odisseia do estudo"). Dona: Frente 1 (Fundação).
   Fonte: C:\AI\projects\ensino-ulysses\themes\ensino-tema\css\v7-jogo.css
   Camada nova, carregada depois do style.css e das camadas v6. Não muda estrutura nem dado.
   As páginas têm camadas próprias: v7-controles, v7-inicio, v7-materia, v7-briefing, v7-turma, v7-paginas.

   Regras desta camada
   1. Prefixo j- para tudo que é novo. Classes e- e ensino- só recebem pele, nunca mudança de fluxo.
   2. FRONTEIRA DA ATIVIDADE: nenhum seletor daqui atinge o que está dentro de .ensino-atv (nem a própria seção).
   3. Movimento só em transform e opacity. Exceções: traço de SVG pequeno e o reflexo único do aviso.
   4. Modo calmo (html[data-calmo]) desliga partícula, brilho, abertura e entrada animada, sem mudar o leiaute.
   5. <button> do site tem regra genérica no style.css (cor, altura, hover): todo botão j- redeclara o que precisa.
   ========================================================================== */

/* ---------- 0. Fonte do HUD: Chakra Petch 600 (SIL OFL 1.1, Fontsource 5.3.0, 9,9 KB) ---------- */
@font-face{font-family:'Chakra Petch';src:url('../fontes/chakra-petch-latin-600-normal.woff2') format('woff2');font-weight:500 800;font-style:normal;font-display:swap}

/* ---------- 1. Tokens: dia (carta náutica ao amanhecer) ---------- */
:root{
  --j-fundo-0:#EAE3D4; --j-fundo-1:#F4F1EA; --j-fundo-2:#EFE9DD;
  --j-painel:#FBF9F4; --j-painel-topo:#FDFBF7; --j-painel-2:#F5EFE3;
  --j-sel:#15314B; --j-sel-tinta:#F4F1EA; --j-sel-tinta-2:#C9D6E3;
  --j-tinta:#1B2733; --j-tinta-2:#4B5563; --j-tinta-3:#5E6B78;
  --j-linha:rgba(21,49,75,.13); --j-linha-2:rgba(21,49,75,.24); --j-linha-ouro:rgba(125,98,36,.5);
  --j-ouro:#C9A961; --j-ouro-texto:#7D6224; --j-ouro-vivo:#B8923F; --j-marinho:#15314B;
  --j-foco:#7D6224;
  --j-m-ingles:#0D6E67; --j-m-pca:#3949A3; --j-m-uc8:#7C2D3E; --j-m-leitura:#556B12; --j-m-eng:#9A4A12;
  --j-ok:#166534; --j-ok-fundo:#E3F3E8; --j-erro:#991B1B; --j-erro-fundo:#FBE9E7;
  --j-btn:#15314B; --j-btn-hover:#1B3A5C; --j-btn-tinta:#F4E3B0; --j-btn-borda:#0A1E31;
  --j-btn2-borda:rgba(21,49,75,.38);
  --j-brilho:0 0 0 1px rgba(125,98,36,.5),0 12px 28px -14px rgba(125,98,36,.55);
  --j-sombra-painel:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(21,49,75,.06),0 18px 40px -26px rgba(21,49,75,.38);
  --j-sombra-alta:0 2px 6px rgba(21,49,75,.08),0 30px 60px -30px rgba(21,49,75,.55);
  --j-ceu-1:#F4F1EA; --j-ceu-2:#EEE3CB; --j-sol:rgba(222,176,96,.38);
  --j-grade-cor:rgba(21,49,75,.10); --j-estrela:rgba(125,98,36,.55);
  --j-aurora-a:rgba(15,118,110,.13); --j-aurora-b:rgba(201,169,97,.24);
  --j-hud-fundo:rgba(244,241,234,.9);
  --j-boot-fundo:#F4F1EA; --j-boot-tinta:#15314B; --j-energia:#9C7A2E;
  --j-veu:rgba(21,49,75,.42);

  /* forma */
  --j-chanfro:14px; --j-chanfro-p:4px; --j-raio:6px; --j-hud-h:64px;

  /* tipografia (só fontes OFL que o tema já hospeda; números em monoespaçada local) */
  --j-fonte-logo:'Fraunces',Georgia,'Times New Roman',serif;
  --j-fonte-ui:'Source Sans 3',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  --j-fonte-hud:'Chakra Petch','Source Sans 3',system-ui,sans-serif;   /* rótulos em caixa alta, números do HUD, selos de fase */
  --j-fonte-num:'JetBrains Mono','Cascadia Mono',ui-monospace,Consolas,'Liberation Mono',monospace;   /* só o código da turma (casas alinhadas) e teclas */

  /* movimento: durações */
  --j-d-0:90ms;   /* pressão de botão */
  --j-d-1:140ms;  /* hover, foco */
  --j-d-2:220ms;  /* troca de estado de UI, saída de cena */
  --j-d-3:320ms;  /* painel, diálogo, cursor */
  --j-d-4:480ms;  /* entrada de cena */
  --j-d-5:720ms;  /* tipografia do título */
  --j-passo:45ms; /* escalonamento entre itens irmãos */
  /* movimento: curvas nomeadas */
  --j-ease-chegada:cubic-bezier(.16,1,.3,1);   /* expo para fora: tudo que ENTRA */
  --j-ease-partida:cubic-bezier(.7,0,.84,0);   /* expo para dentro: tudo que SAI */
  --j-ease-troca:cubic-bezier(.65,0,.35,1);    /* entra e sai ao mesmo tempo (cortina, troca de aba) */
  --j-ease-ui:cubic-bezier(.22,.7,.2,1);       /* hover e estados pequenos */
  --j-ease-respira:cubic-bezier(.45,0,.55,1);  /* laços lentos (flutuar, pulsar) */
  /* molas (oscilador amortecido aproximado por linear(); pico entre parênteses) */
  --j-mola-suave:linear(0, 0.071, 0.226, 0.405, 0.574, 0.716, 0.826, 0.906, 0.959, 0.992, 1.01, 1.018, 1.02, 1.018, 1.015, 1.012, 1.008, 1.006, 1.003, 1.002, 1); /* 2%: cursor, painel */
  --j-mola-viva:linear(0, 0.089, 0.292, 0.531, 0.751, 0.925, 1.041, 1.105, 1.126, 1.118, 1.094, 1.064, 1.035, 1.012, 0.997, 0.988, 0.984, 0.985, 0.988, 0.991, 0.995, 0.998, 1, 1.001, 1.002, 1.002, 1); /* 13%: aviso, selo */
  --j-mola-pulo:linear(0, 0.145, 0.462, 0.798, 1.057, 1.2, 1.233, 1.191, 1.114, 1.037, 0.98, 0.951, 0.946, 0.958, 0.976, 0.994, 1.006, 1.012, 1.012, 1.009, 1.005, 1.001, 1); /* 23%: só ícone pequeno */

  /* camadas */
  --j-z-mundo:0; --j-z-palco:1; --j-z-hud:50; --j-z-cursor:5; --j-z-toast:900; --j-z-dialogo:1000; --j-z-boot:2147483600;
}

/* ---------- 1b. Tokens: noite (céu estrelado). Mesmo padrão do tema: sistema ou escolha do aparelho ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-tema="claro"]){
    --j-fundo-0:#08131D; --j-fundo-1:#0E1B29; --j-fundo-2:#112236;
    --j-painel:#132739; --j-painel-topo:#183049; --j-painel-2:#1A3550;
    --j-sel:#1D3A57; --j-sel-tinta:#F2F5F8; --j-sel-tinta-2:#C3D1DE;
    --j-tinta:#E8EEF4; --j-tinta-2:#AFC0D0; --j-tinta-3:#8FA3B8;
    --j-linha:rgba(156,199,242,.13); --j-linha-2:rgba(156,199,242,.24); --j-linha-ouro:rgba(226,194,122,.5);
    --j-ouro:#E2C27A; --j-ouro-texto:#E2C27A; --j-ouro-vivo:#F0D79A; --j-foco:#E2C27A;
    --j-m-ingles:#5BD1C9; --j-m-pca:#9DB0FF; --j-m-uc8:#E6A3B0; --j-m-leitura:#C5D86D; --j-m-eng:#F0A35E;
    --j-ok:#86EFAC; --j-ok-fundo:#14361F; --j-erro:#FCA5A5; --j-erro-fundo:#3B1616;
    --j-btn:#E2C27A; --j-btn-hover:#EBCD8A; --j-btn-tinta:#0E1B29; --j-btn-borda:#8C6F32;
    --j-btn2-borda:rgba(226,194,122,.45);
    --j-brilho:0 0 0 1px rgba(226,194,122,.6),0 0 30px -6px rgba(226,194,122,.42);
    --j-sombra-painel:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 24px 48px -28px rgba(0,0,0,.9);
    --j-sombra-alta:0 2px 6px rgba(0,0,0,.4),0 34px 70px -30px rgba(0,0,0,.95);
    --j-ceu-1:#0E1B29; --j-ceu-2:#14304A; --j-sol:rgba(226,194,122,.14);
    --j-grade-cor:rgba(91,209,201,.12); --j-estrela:rgba(244,227,176,.85);
    --j-aurora-a:rgba(91,209,201,.15); --j-aurora-b:rgba(226,194,122,.11);
    --j-hud-fundo:rgba(14,27,41,.88);
    --j-boot-fundo:#0A1520; --j-boot-tinta:#E8EEF4; --j-veu:rgba(4,10,16,.66); --j-energia:#F0D79A;
  }
}
:root[data-tema="escuro"]{
  --j-fundo-0:#08131D; --j-fundo-1:#0E1B29; --j-fundo-2:#112236;
  --j-painel:#132739; --j-painel-topo:#183049; --j-painel-2:#1A3550;
  --j-sel:#1D3A57; --j-sel-tinta:#F2F5F8; --j-sel-tinta-2:#C3D1DE;
  --j-tinta:#E8EEF4; --j-tinta-2:#AFC0D0; --j-tinta-3:#8FA3B8;
  --j-linha:rgba(156,199,242,.13); --j-linha-2:rgba(156,199,242,.24); --j-linha-ouro:rgba(226,194,122,.5);
  --j-ouro:#E2C27A; --j-ouro-texto:#E2C27A; --j-ouro-vivo:#F0D79A; --j-foco:#E2C27A;
  --j-m-ingles:#5BD1C9; --j-m-pca:#9DB0FF; --j-m-uc8:#E6A3B0; --j-m-leitura:#C5D86D; --j-m-eng:#F0A35E;
  --j-ok:#86EFAC; --j-ok-fundo:#14361F; --j-erro:#FCA5A5; --j-erro-fundo:#3B1616;
  --j-btn:#E2C27A; --j-btn-hover:#EBCD8A; --j-btn-tinta:#0E1B29; --j-btn-borda:#8C6F32;
  --j-btn2-borda:rgba(226,194,122,.45);
  --j-brilho:0 0 0 1px rgba(226,194,122,.6),0 0 30px -6px rgba(226,194,122,.42);
  --j-sombra-painel:inset 0 1px 0 rgba(255,255,255,.05),0 1px 2px rgba(0,0,0,.4),0 24px 48px -28px rgba(0,0,0,.9);
  --j-sombra-alta:0 2px 6px rgba(0,0,0,.4),0 34px 70px -30px rgba(0,0,0,.95);
  --j-ceu-1:#0E1B29; --j-ceu-2:#14304A; --j-sol:rgba(226,194,122,.14);
  --j-grade-cor:rgba(91,209,201,.12); --j-estrela:rgba(244,227,176,.85);
  --j-aurora-a:rgba(91,209,201,.15); --j-aurora-b:rgba(226,194,122,.11);
  --j-hud-fundo:rgba(14,27,41,.88);
  --j-boot-fundo:#0A1520; --j-boot-tinta:#E8EEF4; --j-veu:rgba(4,10,16,.66); --j-energia:#F0D79A;
}

/* ---------- 2. Mundo: fundo do corpo e camadas decorativas (sempre aria-hidden) ---------- */
html[data-v7] body{background:var(--j-fundo-1)}
.j-mundo{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:var(--j-z-mundo);contain:strict}
.j-ceu{position:absolute;inset:0;background:
  radial-gradient(ellipse 70% 55% at 50% 72%,var(--j-sol),transparent 70%),
  linear-gradient(180deg,var(--j-ceu-1) 0%,var(--j-ceu-2) 78%,var(--j-ceu-1) 100%)}
/* estrelas fixas em três camadas de gradiente (custo zero de quadro) */
.j-ceu::before,.j-ceu::after{content:"";position:absolute;inset:0;background-repeat:repeat}
.j-ceu::before{background-image:
  radial-gradient(1.2px 1.2px at 20px 30px,var(--j-estrela),transparent 60%),
  radial-gradient(1px 1px at 140px 90px,var(--j-estrela),transparent 60%),
  radial-gradient(1.4px 1.4px at 230px 170px,var(--j-estrela),transparent 60%),
  radial-gradient(1px 1px at 80px 220px,var(--j-estrela),transparent 60%);
  background-size:280px 260px;opacity:.55;mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 80%)}
.j-ceu::after{background-image:
  radial-gradient(1.8px 1.8px at 60px 60px,var(--j-estrela),transparent 60%),
  radial-gradient(1.5px 1.5px at 320px 140px,var(--j-estrela),transparent 60%);
  background-size:420px 300px;opacity:.7;mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 75%);
  animation:j-cintila 7s var(--j-ease-respira) infinite alternate}
@keyframes j-cintila{from{opacity:.35}to{opacity:.8}}
/* aurora: dois borrões pré-desfocados (gradiente radial), só translate */
.j-aurora{position:absolute;inset:-20%}
.j-aurora i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;will-change:transform}
.j-aurora i:first-child{left:-8%;top:-18%;background:radial-gradient(closest-side,var(--j-aurora-a),transparent);animation:j-deriva-a 26s var(--j-ease-respira) infinite alternate}
.j-aurora i:last-child{right:-12%;top:-6%;background:radial-gradient(closest-side,var(--j-aurora-b),transparent);animation:j-deriva-b 34s var(--j-ease-respira) infinite alternate}
@media (pointer:coarse),(max-width:899px){.j-aurora i{animation:none!important;will-change:auto}}
@keyframes j-deriva-a{to{transform:translate3d(9vmax,6vmax,0)}}
@keyframes j-deriva-b{to{transform:translate3d(-8vmax,7vmax,0)}}
/* grade em perspectiva (o mar da carta náutica): o plano inclina, o filho anda uma célula e repete */
.j-grade{position:absolute;left:-40%;right:-40%;bottom:-2px;height:46%;perspective:520px;perspective-origin:50% 0;
  mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%)}
.j-grade i{position:absolute;inset:-64px 0 0;transform-origin:50% 0;transform:rotateX(66deg);
  background-image:linear-gradient(var(--j-grade-cor) 1px,transparent 1px),linear-gradient(90deg,var(--j-grade-cor) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top}
.j-grade i::after{content:"";position:absolute;inset:0;background:inherit;opacity:0}
.j-grade i{animation:j-grade-anda 6s linear infinite}
@keyframes j-grade-anda{from{transform:rotateX(66deg) translate3d(0,0,0)}to{transform:rotateX(66deg) translate3d(0,64px,0)}}
.j-horizonte{position:absolute;left:0;right:0;top:54%;height:1px;background:linear-gradient(90deg,var(--j-linha-ouro),transparent 30%,transparent 70%,var(--j-linha-ouro));opacity:.6}
canvas.j-particulas{position:absolute;inset:0;width:100%;height:100%}

/* ---------- 3. Painel (placa de instrumento): chanfro onde o navegador sabe, raio pequeno onde não ---------- */
.j-painel{position:relative;color:var(--j-tinta);
  background:linear-gradient(180deg,var(--j-painel-topo),var(--j-painel));
  border:1px solid var(--j-linha-2);border-radius:var(--j-raio);
  box-shadow:var(--j-sombra-painel),inset 0 0 0 3px var(--j-painel),inset 0 0 0 4px var(--j-linha)}
@supports (corner-shape:bevel){
  .j-painel,.j-btn,.j-chip,.j-hud-btn,.j-tecla{corner-shape:bevel}
  .j-painel{border-radius:var(--j-chanfro) var(--j-chanfro-p)}
}
/* marcas de canto (rebites dourados) nos dois cantos retos */
.j-marcas{background-image:
  linear-gradient(var(--j-ouro),var(--j-ouro)),linear-gradient(var(--j-ouro),var(--j-ouro)),
  linear-gradient(var(--j-ouro),var(--j-ouro)),linear-gradient(var(--j-ouro),var(--j-ouro)),
  linear-gradient(180deg,var(--j-painel-topo),var(--j-painel));
  background-size:12px 1.5px,1.5px 12px,12px 1.5px,1.5px 12px,auto;
  background-position:right 9px top 9px,right 9px top 9px,left 9px bottom 9px,left 9px bottom 9px,0 0;
  background-repeat:no-repeat}
/* mira: quatro colchetes que fecham sobre o alvo em foco ou hover (::after livre no elemento) */
.j-mira{position:relative}
.j-mira::after{content:"";position:absolute;inset:-7px;pointer-events:none;opacity:0;transform:scale(1.035);
  --c:var(--j-ouro);--t:14px;--e:2px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--t) var(--e),linear-gradient(var(--c),var(--c)) left top/var(--e) var(--t),
    linear-gradient(var(--c),var(--c)) right top/var(--t) var(--e),linear-gradient(var(--c),var(--c)) right top/var(--e) var(--t),
    linear-gradient(var(--c),var(--c)) left bottom/var(--t) var(--e),linear-gradient(var(--c),var(--c)) left bottom/var(--e) var(--t),
    linear-gradient(var(--c),var(--c)) right bottom/var(--t) var(--e),linear-gradient(var(--c),var(--c)) right bottom/var(--e) var(--t);
  background-repeat:no-repeat;
  transition:opacity var(--j-d-1) var(--j-ease-ui),transform var(--j-d-3) var(--j-mola-suave)}
.j-mira:hover::after,.j-mira:focus-visible::after,.j-mira:focus-within::after,.j-mira.j-alvo::after{opacity:1;transform:scale(1)}

/* ---------- 4. Botões com profundidade: o elemento sobe 3 px; ::before é a borda de baixo (desce 3 px), ::after é a face.
   Os dois pseudo ficam ATRÁS do texto e na ordem certa (borda, depois face). Só transform anima. ---------- */
.j-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.6em;white-space:nowrap;
  min-height:48px;padding:0 1.4em;border:0;border-radius:var(--j-raio);cursor:pointer;text-decoration:none;background:transparent;
  font:700 1.0625rem/1 var(--j-fonte-ui);letter-spacing:.01em;color:var(--j-btn-tinta);
  transform:translate3d(0,-3px,0);transition:transform var(--j-d-1) var(--j-ease-ui)}
@supports (corner-shape:bevel){.j-btn{border-radius:12px 4px}}
.j-btn::before,.j-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;corner-shape:inherit;pointer-events:none}
.j-btn::before{background:var(--j-btn-borda);transform:translate3d(0,3px,0);box-shadow:0 14px 26px -14px rgba(0,0,0,.55);transition:transform var(--j-d-1) var(--j-ease-ui)}
.j-btn::after{background:var(--j-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
.j-btn svg{width:1.15em;height:1.15em;flex:none}
.j-btn:hover{transform:translate3d(0,-4px,0)}
.j-btn:hover::before{transform:translate3d(0,4px,0)}
.j-btn:hover::after{background:var(--j-btn-hover)}
.j-btn:active,.j-btn.j-apertado{transform:translate3d(0,0,0);transition-duration:var(--j-d-0)}
.j-btn:active::before,.j-btn.j-apertado::before{transform:translate3d(0,0,0);transition-duration:var(--j-d-0)}
.j-btn--grande{min-height:56px;padding:0 1.8em;font-size:1.125rem}
.j-btn--contorno{color:var(--j-tinta)}
.j-btn--contorno::before{background:var(--j-btn2-borda)}
.j-btn--contorno::after{background:var(--j-painel-topo);box-shadow:inset 0 0 0 1px var(--j-btn2-borda)}
.j-btn--contorno:hover::after{background:var(--j-painel-2)}
.j-btn--pequeno{min-height:40px;padding:0 1em;font-size:.9375rem}
/* ---------- 5. Rótulo, chip, selo, barra segmentada ---------- */
.j-rotulo{display:inline-flex;align-items:center;gap:.6em;font:700 .75rem/1.2 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-ouro-texto)}
.j-rotulo::before{content:"";width:18px;height:1.5px;background:currentColor;opacity:.8}
.j-rotulo--sem-traco::before{display:none}
:where(.j-rotulo,.j-chip,.j-passo__tipo,.j-passo__meta,.j-ficha,.j-voltar,.j-atalhos,.j-turma__privado) svg{width:1.1em;height:1.1em;flex:none}
button.j-chip{cursor:pointer;min-height:40px;padding:0 .9em}
button.j-chip:hover{background:var(--j-painel-2);color:var(--j-tinta);transform:none;box-shadow:none}
.j-chip{display:inline-flex;align-items:center;gap:.45em;min-height:30px;padding:0 .7em;font:700 .8125rem/1 var(--j-fonte-ui);
  color:var(--j-tinta);background:var(--j-painel);border:1px solid var(--j-linha-2);border-radius:5px;white-space:nowrap}
.j-chip svg{width:15px;height:15px}
.j-chip--ouro{color:var(--j-ouro-texto);border-color:var(--j-linha-ouro)}
.j-chip--ok{color:var(--j-ok);background:var(--j-ok-fundo);border-color:transparent}
.j-num{font-family:var(--j-fonte-hud);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
/* barra segmentada: o preenchimento é UM elemento que escala em X; os vãos vêm de uma máscara repetida */
.j-barra{--seg:10;position:relative;display:block;width:100%;height:8px;border-radius:2px;overflow:hidden;
  background:var(--j-linha-2);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100%/var(--seg) - 2px),transparent calc(100%/var(--seg) - 2px) calc(100%/var(--seg)));
          mask:repeating-linear-gradient(90deg,#000 0 calc(100%/var(--seg) - 2px),transparent calc(100%/var(--seg) - 2px) calc(100%/var(--seg)))}
.j-barra>i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--j-ouro-vivo),var(--j-ouro));transition:transform var(--j-d-5) var(--j-mola-suave)}


/* ---------- 5b. Navegação comum: migalhas, cabeçalho de seção, versões adaptadas (chips) ---------- */
.j-migalhas ol{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font:600 .875rem/1.3 var(--j-fonte-ui);color:var(--j-tinta-2)}
.j-migalhas li{display:inline-flex;align-items:center;gap:.35rem}
.j-migalhas li+li::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.6;margin-right:.2rem}
.j-migalhas a{color:var(--j-tinta);text-decoration:none;display:inline-flex;align-items:center;min-height:36px}
.j-migalhas a:hover{text-decoration:underline;text-underline-offset:3px}
.j-migalhas [aria-current]{color:var(--j-ouro-texto)}
.j-secao-cabeca{display:grid;gap:.5rem;margin-bottom:1.25rem}
.j-secao-cabeca h2{font:700 clamp(1.75rem,1.4rem + 1.3vw,2.375rem)/1.08 var(--j-fonte-logo);letter-spacing:-.02em}
.j-secao-cabeca p{color:var(--j-tinta-2);max-width:62ch}

/* versões adaptadas: chips; dentro do passo da trilha ficam acima do link esticado */
.j-versoes{position:relative;z-index:1;grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.45rem;padding-top:.6rem;border-top:1px dashed var(--j-linha-2)}
.j-versoes__rotulo{font:700 .75rem/1 var(--j-fonte-ui);letter-spacing:.06em;color:var(--j-tinta-3);margin-right:.2rem}
.j-versoes a{display:inline-flex;align-items:center;min-height:32px;padding:0 .65rem;font:600 .8125rem/1 var(--j-fonte-ui);color:var(--j-tinta);text-decoration:none;
  background:var(--j-fundo-1);border:1px solid var(--j-linha-2);border-radius:999px}
.j-versoes a:hover{border-color:var(--m)}
.j-versoes a[aria-current]{color:var(--j-fundo-1);background:var(--j-tinta);border-color:var(--j-tinta)}

/* voltar: sempre à vista, com a tecla Esc e o botão B como dica */
.j-voltar{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 .8rem 0 .55rem;font:700 .9375rem/1 var(--j-fonte-ui);color:var(--j-tinta);text-decoration:none;
  background:var(--j-painel);border:1px solid var(--j-linha-2);border-radius:5px;transition:transform var(--j-d-2) var(--j-ease-chegada),border-color var(--j-d-1)}
@supports (corner-shape:bevel){.j-voltar{border-radius:9px 3px;corner-shape:bevel}}
.j-voltar svg{width:18px;height:18px;color:var(--j-ouro-texto)}
.j-voltar:hover{transform:translate3d(-3px,0,0);border-color:var(--j-linha-ouro)}
.j-voltar .j-tecla{margin-left:.2rem}
.j-voltar.j-alvo{border-color:var(--j-ouro);box-shadow:var(--j-brilho)}


/* ---------- 3b. Cor da matéria: data-j-mundo="<chave>" define --m (as frentes só marcam o elemento) ---------- */
[data-j-mundo]{--m:var(--j-ouro-texto)}
[data-j-mundo="ingles"]{--m:var(--j-m-ingles)}
[data-j-mundo="pca"]{--m:var(--j-m-pca)}
[data-j-mundo="uc8"]{--m:var(--j-m-uc8)}
[data-j-mundo="leitura"]{--m:var(--j-m-leitura)}
[data-j-mundo="eng"]{--m:var(--j-m-eng)}
.j-emblema{display:block;width:100%;height:100%;color:var(--m,var(--j-ouro-texto))}

/* ---------- 3c. Botões j- sobre o <button> genérico do style.css (cor, hover, transform, sombra, altura) ---------- */
.j-btn,.j-hud-btn,.j-alavanca,.j-link,.j-chip{-webkit-appearance:none;appearance:none;margin:0;text-shadow:none;letter-spacing:normal;font-family:var(--j-fonte-ui)}
.j-btn:hover,.j-btn:active{background:transparent;box-shadow:none}
.j-hud-btn:hover,.j-hud-btn:active,.j-alavanca:hover,.j-alavanca:active,.j-link:hover,.j-link:active{transform:none;box-shadow:none}

/* ---------- 6. HUD: o cabeçalho real da v6 (.e-cabecalho) vestido de painel de jogo. O leiaute, o menu em gaveta (75rem) e o
   tema.js são da v6; aqui entram só pele, placa de status e botões. O vidro fica no ::before (backdrop-filter no próprio
   cabeçalho prenderia a gaveta fixa). ---------- */
html[data-v7] .e-cabecalho.j-hud{border-bottom-color:var(--j-linha-2);view-transition-name:j-hud}
html[data-v7] .e-cabecalho.j-hud::before{background:var(--j-hud-fundo)}
.j-hud::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--j-linha-ouro) 30%,var(--j-linha-ouro) 70%,transparent);opacity:.8}
.j-hud>.e-container{width:min(100% - 2*var(--e-gutter),92rem)}
.j-hud .e-marca__legenda{font:700 .625rem/1.4 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-ouro-texto);white-space:nowrap}
.j-hud .e-marca__nome{font-family:var(--j-fonte-logo)}
.j-hud .e-nav a[aria-current="page"],.j-hud .e-nav .current-menu-item>a{color:var(--j-tinta)}
/* menu suspenso (Mais, Atividades, Administrador) como placa */
@media (min-width:75rem){
  .j-hud .e-nav__sub{background:var(--j-painel);border:1px solid var(--j-linha-2);box-shadow:var(--j-sombra-alta)}
}
.j-hud .e-nav-veu,html[data-v7] .e-nav-veu{background:var(--j-veu)}
/* o botão "Entrar na turma" (item e-nav__cta) com a construção de botão de jogo: face, borda de baixo, afunda ao clicar */
html[data-v7] .e-nav .e-nav__cta a{position:relative;isolation:isolate;background:transparent;box-shadow:none;border:0;border-radius:var(--j-raio);color:var(--j-btn-tinta);
  min-height:44px;transform:translate3d(0,-3px,0);transition:transform var(--j-d-1) var(--j-ease-ui)}
@supports (corner-shape:bevel){html[data-v7] .e-nav .e-nav__cta a{border-radius:12px 4px;corner-shape:bevel}}
html[data-v7] .e-nav .e-nav__cta a::before,html[data-v7] .e-nav .e-nav__cta a::after{content:"";position:absolute;inset:0;z-index:-1;width:auto;height:auto;margin:0;
  border-radius:inherit;corner-shape:inherit;pointer-events:none;-webkit-mask:none;mask:none;transform:none}
html[data-v7] .e-nav .e-nav__cta a::before{background:var(--j-btn-borda);transform:translate3d(0,3px,0);box-shadow:0 14px 26px -14px rgba(0,0,0,.55);transition:transform var(--j-d-1) var(--j-ease-ui)}
html[data-v7] .e-nav .e-nav__cta a::after{background:var(--j-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
html[data-v7] .e-nav .e-nav__cta a:hover{background:transparent;box-shadow:none;color:var(--j-btn-tinta);transform:translate3d(0,-4px,0)}
html[data-v7] .e-nav .e-nav__cta a:hover::before{transform:translate3d(0,4px,0)}
html[data-v7] .e-nav .e-nav__cta a:hover::after{background:var(--j-btn-hover);transform:none}
html[data-v7] .e-nav .e-nav__cta a:active{transform:translate3d(0,0,0);transition-duration:var(--j-d-0)}
html[data-v7] .e-nav .e-nav__cta a:active::before{transform:translate3d(0,0,0)}
/* placa de status: nível, XP e sequência. Só aparece com XP neste aparelho; é um link para Praticar */
.j-status{display:none;align-items:center;gap:.7rem;padding:0 .75rem 0 .35rem;min-height:44px;text-decoration:none;color:var(--j-tinta);white-space:nowrap;
  border:1px solid var(--j-linha-2);border-radius:5px;background:var(--j-painel)}
.j-status.j-ativo{display:inline-flex}
@supports (corner-shape:bevel){.j-status{border-radius:10px 3px;corner-shape:bevel}}
.j-status__nivel{display:grid;place-items:center;width:34px;height:34px;flex:none;font:700 1rem/1 var(--j-fonte-hud);color:var(--j-btn-tinta);
  background:var(--j-btn);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.j-status__xp{display:grid;gap:5px;width:112px}
.j-status__xp small{display:flex;justify-content:space-between;gap:.5rem;font:600 .75rem/1 var(--j-fonte-ui);color:var(--j-tinta-2)}
.j-status__xp small b{font-weight:700;color:var(--j-tinta)}
.j-status__seq{display:inline-flex;align-items:center;gap:.3rem;font:700 .8125rem/1 var(--j-fonte-ui);color:var(--j-tinta-2)}
.j-status__seq[hidden]{display:none}
.j-status__seq svg{width:16px;height:16px;color:var(--j-ouro-texto)}
.j-status:hover{border-color:var(--j-linha-ouro);color:var(--j-tinta)}
.j-status.j-pulo .j-status__nivel{animation:j-pulo var(--j-d-4) var(--j-mola-pulo)}
@keyframes j-pulo{from{transform:scale(.6)}to{transform:scale(1)}}
/* na barra a placa é só o hexágono do nível (o cabeçalho da v6 já está cheio e não pode quebrar em duas linhas); XP e sequência vão na dica e no aria-label */
.j-status__xp,.j-status__seq{display:none}.j-status{padding-right:.35rem}
@media (min-width:75rem) and (max-width:93.74rem){html[data-v7] .j-hud .j-status{display:none}}
@media (max-width:74.99rem){html[data-v7] .j-hud .j-status{display:none}}
/* botões de ícone do HUD (som, calmo, tema, opções, menu) */
.j-hud-acoes{display:flex;align-items:center;gap:.35rem;flex:none}
html[data-v7] .j-hud-btn{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;min-height:42px;min-width:42px;padding:0;cursor:pointer;color:var(--j-tinta-2);
  background:transparent;border:1px solid var(--j-linha-2);border-radius:5px;box-shadow:none;transition:color var(--j-d-1),background-color var(--j-d-1)}
@supports (corner-shape:bevel){html[data-v7] .j-hud-btn{border-radius:9px 3px;corner-shape:bevel}}
.j-hud-btn svg{width:20px;height:20px}
html[data-v7] .j-hud-btn:hover{color:var(--j-tinta);background:var(--j-painel);transform:none;box-shadow:none}
html[data-v7] .j-hud-btn[aria-pressed="true"]{color:var(--j-ouro-texto);border-color:var(--j-linha-ouro);background:var(--j-painel)}
.j-hud-btn .j-so-on{display:none}
.j-hud-btn[aria-pressed="true"] .j-so-on{display:block}
.j-hud-btn[aria-pressed="true"] .j-so-off{display:none}
/* o botão de tema é o e-tema-btn do tema.js (aria-pressed = escuro): os ícones lua e sol já trocam pelo style.css; aqui o par não inverte */
html[data-v7] .e-tema-btn.j-hud-btn[aria-pressed="true"]{color:var(--j-tinta-2);border-color:var(--j-linha-2);background:transparent}
html[data-v7] .e-tema-btn.j-hud-btn svg{display:block}
html[data-v7] .e-tema-btn.j-hud-btn .e-icone-sol{display:none}
:root[data-tema="escuro"] .e-tema-btn.j-hud-btn .e-icone-sol{display:block}
:root[data-tema="escuro"] .e-tema-btn.j-hud-btn .e-icone-lua{display:none}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .e-tema-btn.j-hud-btn .e-icone-sol{display:block}:root:not([data-tema="claro"]) .e-tema-btn.j-hud-btn .e-icone-lua{display:none}}
/* botão de menu: a v6 o mostra só abaixo de 75rem */
html[data-v7] .e-menu-btn.j-hud-btn{display:none}
@media (max-width:74.99rem){
  html[data-v7] .e-menu-btn.j-hud-btn{display:inline-grid}
  .j-hud .j-hud-acoes [data-j-som],.j-hud .j-hud-acoes [data-j-calmo]{display:none}
  .j-hud .e-nav{background:var(--j-fundo-1);border-left-color:var(--j-linha-2)}
  .j-nav-opcoes{display:grid!important;gap:.5rem;margin-top:var(--e-s-5,1.5rem);padding-top:var(--e-s-5,1.5rem);border-top:1px solid var(--j-linha-2)}
}
/* Cabeçalho em UMA linha em qualquer largura e com qualquer conteúdo (administrador, nome da turma, placa de nível). O v7-nucleo.js mede e
   põe data-j-hud="0|1|2|3" no <html>: 0 completo, 1 sem Som e Modo calmo (ficam em Opções), 2 sem placa de nível e sem o nome da turma no
   botão, 3 sem a legenda da marca e com respiro menor (o modo compacto da v6), 4 sem o botão Opções (o link do rodapé continua), 5 itens do menu mais juntos. Sem JS, o padrão é o nível 1 (nada depende desses botões). */
@media (min-width:75rem){
  html:not([data-j-hud="0"]) .j-hud .j-hud-acoes [data-j-som],html:not([data-j-hud="0"]) .j-hud .j-hud-acoes [data-j-calmo]{display:none}
  html[data-j-hud="2"] .j-hud .j-status,html[data-j-hud="3"] .j-hud .j-status,
  html[data-j-hud="2"] .j-hud .e-nav__cta-nome,html[data-j-hud="3"] .j-hud .e-nav__cta-nome{display:none}
  html[data-j-hud="3"] .j-hud .e-marca__legenda{display:none}
  html[data-j-hud="3"] .j-hud .e-nav a,html[data-j-hud="3"] .j-hud .e-nav__areas summary{padding-inline:.55rem;font-size:.9rem}
  html[data-j-hud="3"] .j-hud .e-nav .e-nav__cta{margin-left:.3rem}
  html[data-j-hud="3"] .j-hud .e-nav .e-nav__cta a{padding-inline:.85rem}
  html[data-j-hud="3"] .j-hud .e-cabecalho__linha,html[data-j-hud="4"] .j-hud .e-cabecalho__linha{gap:var(--e-s-3,.75rem)}
  html[data-j-hud="4"] .j-hud .j-status,html[data-j-hud="4"] .j-hud .e-nav__cta-nome,html[data-j-hud="4"] .j-hud .e-marca__legenda,html[data-j-hud="4"] .j-hud .j-hud-acoes [data-j-opcoes]{display:none}
  html[data-j-hud="4"] .j-hud .e-nav a,html[data-j-hud="4"] .j-hud .e-nav__areas summary{padding-inline:.55rem;font-size:.9rem}
  html[data-j-hud="5"] .j-hud .j-status,html[data-j-hud="5"] .j-hud .e-nav__cta-nome,html[data-j-hud="5"] .j-hud .e-marca__legenda,html[data-j-hud="5"] .j-hud .j-hud-acoes [data-j-opcoes]{display:none}
  html[data-j-hud="5"] .j-hud .e-cabecalho__linha{gap:.5rem}
  html[data-j-hud="5"] .j-hud .e-nav a,html[data-j-hud="5"] .j-hud .e-nav__areas summary{padding-inline:.4rem;font-size:.875rem}
  html[data-j-hud="5"] .j-hud .e-nav .e-nav__cta{margin-left:.2rem}
  html[data-j-hud="5"] .j-hud .e-nav .e-nav__cta a{padding-inline:.7rem}
  html[data-j-hud="4"] .j-hud .e-nav .e-nav__cta{margin-left:.3rem}
  html[data-j-hud="4"] .j-hud .e-nav .e-nav__cta a{padding-inline:.85rem}
}
.j-nav-opcoes{display:none}
@media (max-width:520px){
  .j-hud .e-marca__legenda{display:none}
  .j-hud .e-cabecalho__linha{gap:.5rem}
  .j-hud .e-marca{flex:0 1 auto;min-width:0;gap:.5rem}
  .j-hud .e-marca__nome{font-size:1.0625rem}
  .j-hud-acoes{gap:.25rem}
}

/* ---------- 7. Alavanca (interruptor) e linha de opção ---------- */
.j-alavanca{box-shadow:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:56px;padding:.6rem .9rem;cursor:pointer;
  text-align:left;color:var(--j-tinta);background:var(--j-painel);border:1px solid var(--j-linha-2);border-radius:5px;font:600 1rem/1.3 var(--j-fonte-ui)}
.j-alavanca small{display:block;font-weight:400;font-size:.875rem;color:var(--j-tinta-2);margin-top:.15rem}
.j-alavanca__trilho{position:relative;flex:none;width:46px;height:26px;border-radius:13px;background:var(--j-linha-2);transition:background-color var(--j-d-2)}
.j-alavanca__trilho::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--j-painel-topo);
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform var(--j-d-3) var(--j-mola-viva)}
.j-alavanca[aria-checked="true"] .j-alavanca__trilho{background:var(--j-ouro-vivo)}
.j-alavanca[aria-checked="true"] .j-alavanca__trilho::after{transform:translate3d(20px,0,0)}
.j-alavanca--grupo{cursor:default}
.j-alavanca__opcoes{display:flex;gap:.35rem;margin-left:auto}
.j-alavanca__estado{font:700 .75rem/1 var(--j-fonte-hud);letter-spacing:.08em;text-transform:uppercase;color:var(--j-tinta-2);margin-left:auto}

.j-alavanca:hover{background:var(--j-painel);color:var(--j-tinta)}
.j-alavanca--grupo:hover{background:var(--j-painel)}

/* ---------- 8. Dica em caixa de diálogo (tooltip) ---------- */
.j-tem-dica{position:relative}
.j-dica{position:absolute;z-index:70;top:calc(100% + 12px);right:-6px;width:max-content;max-width:260px;padding:.6rem .75rem;pointer-events:none;
  font:500 .875rem/1.35 var(--j-fonte-ui);color:var(--j-tinta);background:var(--j-painel-topo);border:1px solid var(--j-linha-ouro);border-radius:5px;
  box-shadow:var(--j-sombra-alta);opacity:0;transform:translate3d(0,-4px,0);transition:opacity var(--j-d-1) var(--j-ease-ui),transform var(--j-d-2) var(--j-ease-chegada)}
.j-dica::before{content:"";position:absolute;top:-6px;right:18px;width:10px;height:10px;background:inherit;border-left:1px solid var(--j-linha-ouro);border-top:1px solid var(--j-linha-ouro);transform:rotate(45deg)}
.j-dica b{display:block;font:800 .6875rem/1 var(--j-fonte-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--j-ouro-texto);margin-bottom:.3rem}
.j-tem-dica:hover>.j-dica,.j-tem-dica:focus-visible>.j-dica{opacity:1;transform:none;transition-delay:280ms,280ms}

/* ---------- 9. Avisos (toasts): conquista, nível, confirmação. Região aria-live criada pelo núcleo ---------- */
.j-toasts{position:fixed;z-index:var(--j-z-toast);top:calc(var(--e-cabecalho-real,var(--j-hud-h)) + 14px);right:16px;display:grid;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.j-toast{pointer-events:auto;display:grid;grid-template-columns:48px 1fr;gap:.85rem;align-items:center;padding:.85rem 1rem .85rem .85rem;overflow:hidden}
.j-toast__icone{display:grid;place-items:center;width:48px;height:48px;color:var(--j-btn-tinta);background:var(--j-btn);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.j-toast__icone svg{width:24px;height:24px}
.j-toast__rotulo{font:800 .6875rem/1 var(--j-fonte-hud);letter-spacing:.16em;text-transform:uppercase;color:var(--j-ouro-texto)}
.j-toast__titulo{font:650 1.125rem/1.2 var(--j-fonte-logo);margin:.25rem 0 .1rem}
.j-toast__texto{font:400 .9375rem/1.4 var(--j-fonte-ui);color:var(--j-tinta-2)}
.j-toast::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,236,190,.28) 50%,transparent 65%);transform:translate3d(-110%,0,0)}
.j-toast.j-entra{animation:j-toast-entra 560ms var(--j-mola-viva) backwards}
.j-toast.j-entra .j-toast__icone{animation:j-pulo 520ms var(--j-mola-pulo) 120ms backwards}
.j-toast.j-entra::after{animation:j-reflexo 900ms var(--j-ease-troca) 260ms both}
.j-toast.j-sai{animation:j-toast-sai var(--j-d-2) var(--j-ease-partida) both}
@keyframes j-toast-entra{from{opacity:0;transform:translate3d(28px,0,0)}to{opacity:1;transform:none}}
@keyframes j-toast-sai{to{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes j-reflexo{to{transform:translate3d(110%,0,0)}}
@media (max-width:640px){.j-toasts{left:16px;right:16px;width:auto}}

/* ---------- 10. Diálogo de Opções (pausa) com <dialog> nativo: foco preso e Esc de graça ---------- */
.j-dialogo{width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:0;color:var(--j-tinta);border:0;background:transparent;overflow:visible}
.j-dialogo__caixa{padding:1.5rem;display:grid;gap:1rem}
.j-dialogo__cabeca{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.j-dialogo h2{font:650 1.75rem/1.1 var(--j-fonte-logo)}
.j-dialogo__nota{font-size:.9375rem;color:var(--j-tinta-2)}
.j-dialogo::backdrop{background:var(--j-veu)}
.j-dialogo[open]{animation:j-dialogo-entra var(--j-d-3) var(--j-mola-suave) backwards}
@keyframes j-dialogo-entra{from{opacity:0;transform:translate3d(0,10px,0) scale(.97)}}
.j-dialogo .j-controles{display:grid;grid-template-columns:auto 1fr;gap:.45rem .8rem;font-size:.9375rem;color:var(--j-tinta-2);padding:.8rem;border:1px dashed var(--j-linha-2);border-radius:5px}
.j-dialogo .j-controles dt{display:flex;gap:.25rem}

/* ---------- 12. Entrada de cena (CSS puro; sem JS também funciona; nunca deixa nada invisível) ---------- */
[data-j-entra]{animation:j-entra var(--j-d-4) var(--j-ease-chegada) backwards;animation-delay:calc(var(--i,0) * var(--j-passo) + var(--j-atraso,0ms))}
@keyframes j-entra{from{opacity:0;transform:translate3d(0,14px,0)}}
/* abaixo da primeira tela: [data-j-revela] ganha .j-revelado um pouco ANTES de aparecer (nada some e volta) */
[data-j-revela].j-revelado>*{animation:j-entra var(--j-d-4) var(--j-ease-chegada) backwards;animation-delay:calc(min(var(--i,0),7) * 70ms)}

/* ---------- 13. Carregando (só aparece se a espera passar de 400 ms; nunca é espera inventada) ---------- */
.j-carregando{display:grid;justify-items:center;gap:.8rem;padding:2rem;color:var(--j-tinta-2);font:600 .9375rem/1.3 var(--j-fonte-ui);
  opacity:0;animation:j-aparece var(--j-d-2) var(--j-ease-ui) 400ms forwards}
.j-carregando__anel{width:44px;height:44px;border-radius:50%;border:3px solid var(--j-linha-2);border-top-color:var(--j-ouro);animation:j-gira .9s linear infinite}
@keyframes j-gira{to{transform:rotate(360deg)}}
@keyframes j-aparece{to{opacity:1}}

/* ---------- 14. Transição entre páginas (View Transitions entre documentos; sem suporte, só a entrada de cena) ---------- */
@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.j-hud{view-transition-name:j-hud}
::view-transition-group(j-hud){animation:none}
::view-transition-old(root){animation:j-vt-sai var(--j-d-2) var(--j-ease-partida) both}
::view-transition-new(root){animation:j-vt-entra var(--j-d-4) var(--j-ease-chegada) 40ms both}
html:active-view-transition-type(avanca)::view-transition-old(root){animation-name:j-vt-sai-esq}
html:active-view-transition-type(avanca)::view-transition-new(root){animation-name:j-vt-entra-dir}
html:active-view-transition-type(volta)::view-transition-old(root){animation-name:j-vt-sai-dir}
html:active-view-transition-type(volta)::view-transition-new(root){animation-name:j-vt-entra-esq}
::view-transition-group(j-titulo){animation-duration:var(--j-d-4);animation-timing-function:var(--j-ease-chegada)}
::view-transition-old(j-titulo),::view-transition-new(j-titulo){height:100%;width:auto;object-fit:contain;object-position:left top}
@keyframes j-vt-sai{to{opacity:0;transform:scale(.985)}}
@keyframes j-vt-entra{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes j-vt-sai-esq{to{opacity:0;transform:translate3d(-48px,0,0)}}
@keyframes j-vt-entra-dir{from{opacity:0;transform:translate3d(64px,0,0)}}
@keyframes j-vt-sai-dir{to{opacity:0;transform:translate3d(48px,0,0)}}
@keyframes j-vt-entra-esq{from{opacity:0;transform:translate3d(-64px,0,0)}}

/* ---------- 15. Foco sempre visível ---------- */
html[data-v7] :is(a,button,[tabindex],input,select,textarea,summary):not(.ensino-atv *):focus-visible{outline:3px solid var(--j-foco);outline-offset:3px}

/* ---------- 16. Modo calmo e versões adaptadas ---------- */
html[data-calmo] :is(.j-particulas,.j-estrela-cadente,.j-reflexo){display:none!important}
html[data-calmo] *:not(.ensino-atv):not(.ensino-atv *),html[data-calmo] *:not(.ensino-atv):not(.ensino-atv *)::before,html[data-calmo] *:not(.ensino-atv):not(.ensino-atv *)::after{
  animation-duration:0s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:0s!important;transition-delay:0s!important}
html[data-calmo]{scroll-behavior:auto!important;--j-brilho:0 0 0 1px var(--j-linha-ouro)}
html[data-calmo] .e-cabecalho.j-hud::before{-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-calmo] ::view-transition-group(*),html[data-calmo] ::view-transition-old(*),html[data-calmo] ::view-transition-new(*){animation:none!important}
/* versão adaptada preferida no aparelho: zona de leitura sem ruído (sem partícula, sem aurora, sem grade andando) */
html[data-ensino-versao] :is(.j-particulas,.j-aurora){display:none!important}
html[data-ensino-versao] .j-grade i,html[data-ensino-versao] .j-ceu::after{animation:none!important}

/* ---------- 16b. Teclas (base mínima para o diálogo Opções; a F3 refina em v7-controles.css) ---------- */
.j-tecla{display:inline-flex;align-items:center;justify-content:center;min-width:1.9em;height:1.7em;padding:0 .45em;
  font:600 .75rem/1 var(--j-fonte-num);color:var(--j-tinta);background:var(--j-painel);border:1px solid var(--j-linha-2);
  border-bottom-width:2px;border-radius:5px;vertical-align:middle}

/* ---------- 16c. Rodapé: a v6 manda no leiaute; aqui só o botão "Opções e controles" com cara de link da coluna ---------- */
html:not([data-j-js]) .e-rodape .j-link{display:none}
.j-link{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;font:inherit;color:var(--e-tinta)}
.e-rodape__col .j-link{display:inline-flex;align-items:center;min-height:44px;padding:.25rem 0;text-decoration:none;color:var(--e-tinta);
  background-color:transparent;background-image:linear-gradient(var(--e-ouro),var(--e-ouro));background-repeat:no-repeat;background-size:0 1px;background-position:0 calc(50% + .72em);
  transition:background-size var(--e-dur-2,220ms) var(--e-ease,ease)}
.e-rodape__col .j-link:hover{background-color:transparent;background-image:linear-gradient(var(--e-ouro),var(--e-ouro));background-size:100% 1px;color:var(--e-tinta)}

/* ---------- 16d. Botões do site (.e-btn) com a construção de botão de jogo. Fora da atividade; ::before/::after estavam livres (conferido) ---------- */
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *){position:relative;isolation:isolate;background:transparent;border:0;box-shadow:none;color:var(--j-btn-tinta);
  transform:translate3d(0,-3px,0);transition:transform var(--j-d-1) var(--j-ease-ui)}
@supports (corner-shape:bevel){html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *){border-radius:12px 4px;corner-shape:bevel}}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *)::before,html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;corner-shape:inherit;pointer-events:none}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *)::before{background:var(--j-btn-borda);transform:translate3d(0,3px,0);transition:transform var(--j-d-1) var(--j-ease-ui)}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *)::after{background:var(--j-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.24)}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *):hover{background:transparent;box-shadow:none;filter:none;transform:translate3d(0,-4px,0);color:var(--j-btn-tinta)}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *):hover::before{transform:translate3d(0,4px,0)}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *):hover::after{background:var(--j-btn-hover)}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *):active{transform:translate3d(0,0,0);transition-duration:var(--j-d-0)}
html[data-v7] .e-btn:not(.ensino-atv *):not(.ensino-atv__btn):not(.ensino-praticar *):active::before{transform:translate3d(0,0,0)}
html[data-v7] .e-btn--contorno:not(.ensino-atv *),html[data-v7] .e-btn--contorno:not(.ensino-atv *):hover{color:var(--j-tinta)}
html[data-v7] .e-btn--contorno:not(.ensino-atv *)::before{background:var(--j-btn2-borda)}
html[data-v7] .e-btn--contorno:not(.ensino-atv *)::after{background:var(--j-painel-topo);box-shadow:inset 0 0 0 1px var(--j-btn2-borda)}
html[data-v7] .e-btn--contorno:not(.ensino-atv *):hover::after{background:var(--j-painel-2)}
html[data-v7] .e-btn--ouro:not(.ensino-atv *),html[data-v7] .e-btn--ouro:not(.ensino-atv *):hover{color:#1B2733}
html[data-v7] .e-btn--ouro:not(.ensino-atv *)::after{background:var(--e-ouro)}
html[data-v7] .e-btn--acento:not(.ensino-atv *),html[data-v7] .e-btn--acento:not(.ensino-atv *):hover{color:#fff}
html[data-v7] .e-btn--acento:not(.ensino-atv *)::after{background:var(--e-acento,var(--j-btn))}
:root[data-tema="escuro"] .e-btn--acento:not(.ensino-atv *),:root[data-tema="escuro"] .e-btn--acento:not(.ensino-atv *):hover{color:#101E2C}
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]) .e-btn--acento:not(.ensino-atv *),:root:not([data-tema="claro"]) .e-btn--acento:not(.ensino-atv *):hover{color:#101E2C}}

/* ---------- 17. Impressão: nada de decoração de jogo ---------- */
@media print{
  .j-mundo,.j-status,.j-hud-acoes,.j-cursor,.j-toasts,.j-boot,.j-dicas-controle{display:none!important}
  .j-painel{box-shadow:none!important;background:none!important;border-color:#999!important}
}