/* =====================================================================
   ACABAMENTO DE JOGO — carregado depois de app.css, sobrescreve o que
   estava com cara de documento.
   ===================================================================== */

/* ---------- 1 · CAPA: foto real + tipografia de jogo ---------- */
/* A capa ilustrada estava competindo com o título. Voltamos para a foto
   (a tempestade, que é a mais forte do acervo) e deixamos a tipografia
   fazer o trabalho de cartaz. */
.capa-arte{
  background:url('assets/foto-tempestade.webp') center 38%/cover no-repeat !important;
  position:relative}
.capa-arte::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 0%,rgba(219,30,47,.22),transparent 60%),
    linear-gradient(180deg,rgba(6,10,20,.30) 0%,rgba(6,10,20,.10) 38%,
      rgba(6,10,20,.72) 78%,rgba(6,10,20,.94) 100%)}
.capa-topo{position:relative;z-index:2}

/* título com bisel, contorno e sombra dura — o truque de cartaz de jogo:
   várias sombras empilhadas fazem a letra "sair" da imagem */
/* Gradiente e contorno TÊM que ficar no mesmo elemento: com o stroke no pai
   e o fill transparente no filho, o contorno escuro vaza por dentro da letra
   e o título fica marrom e sujo. Aqui a span carrega tudo, e a profundidade
   vem de camadas de sombra, não de stroke grosso. */
.tit-jogo{
  font-weight:900;
  letter-spacing:-.045em;
  line-height:.88;
  text-transform:uppercase;
  color:#fff;
}
.tit-jogo span{
  display:inline-block;
  background:linear-gradient(176deg,#FFFFFF 0%,#FFEFD6 55%,#FFC53D 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 2px 0 #9E1220)
    drop-shadow(0 4px 0 rgba(6,10,20,.85))
    drop-shadow(0 10px 20px rgba(0,0,0,.65));
}
#t-intro .tit-jogo{font-size:clamp(44px,14vw,70px);margin:2px 0 0}
#mt.tit-jogo{font-size:clamp(28px,8vw,40px)}
#mt.tit-jogo span,#mt.tit-jogo{color:#fff}

/* ---------- 2 · PALPITE: cartão de jogo, não linha de Notion ---------- */
.palps{gap:11px}
.palp{
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 12px;
  border:2px solid rgba(22,35,58,.14);
  border-radius:20px;
  background:linear-gradient(168deg,#FFFFFF 0%,#F7F4EE 100%);
  box-shadow:0 4px 0 rgba(22,35,58,.13), 0 10px 22px rgba(22,35,58,.09);
  position:relative;
  overflow:hidden;
}
.palp::before{ /* brilho diagonal de vidro */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,
    rgba(255,255,255,0) 38%);}
.palp:active{transform:translateY(4px);box-shadow:0 0 0 rgba(22,35,58,.13)}
.palp.on{
  border-color:#DB1E2F;
  background:linear-gradient(168deg,#FFF8F7 0%,#FFEDEA 100%);
  box-shadow:0 5px 0 #9E1220, 0 14px 30px rgba(219,30,47,.30);
  transform:translateY(-3px)}

/* a arte do arquétipo dentro de uma moldura de item */
.palp-arte{
  flex:0 0 auto;width:64px;height:64px;border-radius:16px;overflow:hidden;
  background:radial-gradient(circle at 50% 35%,#1E2C48,#0C1526);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),
             inset 0 -8px 16px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;position:relative}
.palp-arte img{width:100%;height:100%;object-fit:cover;display:block}
.palp-arte.semArte::after{
  content:'?';font:900 26px/1 Inter,system-ui,sans-serif;color:rgba(255,255,255,.40)}
.palp.on .palp-arte{box-shadow:inset 0 0 0 2px rgba(255,201,61,.75),
  inset 0 -8px 16px rgba(0,0,0,.45), 0 0 18px rgba(255,201,61,.45)}

.palp-txt{flex:1;min-width:0}
.palp-txt b{font-size:16.5px;letter-spacing:-.02em}
.palp-txt span{font-size:13px}

/* marca de seleção, estilo troféu */
.palp-check{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(22,35,58,.18);background:#fff;position:relative;
  transition:.18s cubic-bezier(.2,1.5,.4,1)}
.palp.on .palp-check{
  background:#DB1E2F;border-color:#9E1220;transform:scale(1.12);
  box-shadow:0 0 0 5px rgba(219,30,47,.16)}
.palp.on .palp-check::after{
  content:'';position:absolute;left:8px;top:4px;width:6px;height:12px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg)}

/* ---------- 3 · BOTÃO QUE AVISA EM VEZ DE MORRER ----------
   O laranja pulsante ficou horroroso e ainda brigava com o vermelho da
   marca. O botão volta a ser o vermelho normal do jogo; quem avisa é uma
   tarja discreta acima dele. Aviso é informação, não alarme. */
#bok.avisa{
  background:linear-gradient(180deg,#E8384A,#C21226) !important;
  color:#fff !important;
  box-shadow:0 5px 0 #8A0F1C, 0 10px 24px rgba(219,30,47,.30) !important;
  animation:none}
#bok.avisa::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:#FFC53D;border-radius:2px 2px 0 0}
.rodape{position:relative}
.avisoRodape{
  display:flex;align-items:center;gap:7px;
  font:800 13px Inter,system-ui,sans-serif;color:#FFC53D;
  margin:0 0 9px;padding:0 2px}
.avisoRodape svg{width:14px;height:14px;flex:0 0 auto}

/* ---------- tela final precisa rolar ---------- */
#t-fim{overflow-y:auto;-webkit-overflow-scrolling:touch;
  justify-content:flex-start !important;padding-bottom:36px}
#t-fim::-webkit-scrollbar{display:none}

/* ---------- topo: abre espaço para o botão voltar ----------
   Com mais um elemento na barra, a marca e a trilha ficaram espremidas.
   A marca sai (ela já está na capa e no rodapé mental do jogo) e a trilha
   recupera a largura, que é a informação que importa aqui. */
.topo{gap:10px !important}
.topo .marca{display:none}
.trilha{flex:1 1 auto;min-width:0}
.topo .placar{margin-left:auto}

/* legenda numa linha só, rolável se não couber */
/* ⚠ A RÉGUA PAROU DE ROLAR (26/08/2026). Achado pelo axe na varredura:
   `scrollable-region-focusable` — ela rolava na horizontal e não recebia
   foco, então quem usa só teclado não alcançava o fim dela (WCAG 2.1.1).

   Mas o conserto certo não é torná-la focável: é ela PARAR DE ROLAR.
   Régua de legenda que rola esconde o próprio fim, e o fim dela é
   "domino" — o degrau mais alto da escala. Quem não descobre que rola
   nunca vê que existe. Com seis degraus em 390px, ela não cabe numa
   linha; então quebra em duas, que é o que uma legenda deve fazer.

   Some junto o problema de teclado: o que não rola não precisa de foco. */
.leg.escala{flex-wrap:wrap !important;overflow:visible;
  padding-bottom:2px;gap:3px 11px !important;font-size:13px !important}

/* ---------- botão voltar ---------- */
.voltar{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);color:#C7D0E0;
  border:1px solid rgba(255,255,255,.12);
  transition:transform .12s cubic-bezier(.2,.9,.25,1),background .16s}
.voltar svg{width:19px;height:19px}
.voltar:active{transform:translateY(2px) scale(.94);background:rgba(255,255,255,.14)}
.voltar.off{opacity:.25;pointer-events:none}

/* ---------- retomar sessão ---------- */
.retomar{
  background:linear-gradient(168deg,#12253C,#0D1A2C);
  border:1px solid rgba(23,196,196,.40);border-radius:16px;
  padding:14px 15px;margin:0 0 12px;
  box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 26px rgba(23,196,196,.10)}
.rt-tx b{display:block;font-size:14.5px;font-weight:900;color:#8FE9E9;margin-bottom:3px}
.rt-tx span{display:block;font-size:13px;color:#8FA0B8;line-height:1.4}
.rt-bt{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.rt-bt .btn{padding:13px 18px !important;font-size:14px !important}
.rt-novo{background:none;border:0;color:#7E8AA2;font:700 13px Inter,sans-serif;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:2px}

/* =====================================================================
   TEMA ESCURO — o que separa "formulário bonito" de "jogo"

   Quatro princípios que todo casual game premium segue e que o fundo
   branco impedia:

   1. FUNDO ESCURO. Cor saturada sobre branco fica pastel e sem força;
      sobre azul-noite, canta. É por isso que Monument Valley, Alto's e
      Sky são todos escuros.
   2. PROFUNDIDADE EM CAMADAS. Nada é chapado: cada superfície tem
      gradiente próprio, luz na aresta de cima e sombra de contato embaixo.
   3. CONTROLE TÁTIL. Botão com 4-5px de "corpo" que afunda ao toque.
      O dedo precisa sentir que empurrou um objeto, não clicou num retângulo.
   4. UM ACENTO SÓ. O vermelho manda; o resto é neutro escuro. Cor demais
      compete com a arte e vira ruído.
   ===================================================================== */

/* ---------- superfície ---------- */
#app{background:#0B1220 !important}

/* ---------- tablet e desktop: o app vira um console centrado ---------- */
body.telaGrande{
  overflow:hidden;
  background:#05080F;
  /* a arte da capa desfocada atrás preenche a moldura sem competir */
  background-image:
    radial-gradient(60% 50% at 50% 0%,rgba(219,30,47,.16),transparent 70%),
    url('assets/foto-tempestade.webp');
  background-size:cover;background-position:center}
body.telaGrande::before{
  content:'';position:fixed;inset:0;z-index:0;
  backdrop-filter:blur(46px) saturate(.65) brightness(.32);
  -webkit-backdrop-filter:blur(46px) saturate(.65) brightness(.32);
  background:rgba(5,8,15,.55)}
body.telaGrande #app{
  position:fixed;left:50%;top:50%;
  transform-origin:center center;
  max-width:none !important;margin:0 !important;
  border-radius:34px;
  z-index:1;
  box-shadow:0 40px 100px rgba(0,0,0,.75),
             0 0 0 1px rgba(255,255,255,.10),
             0 0 0 11px rgba(10,15,26,.85),
             0 0 0 12px rgba(255,255,255,.05)}
.tela{
  background:
    radial-gradient(120% 60% at 50% -8%,rgba(219,30,47,.13),transparent 62%),
    linear-gradient(180deg,#111A2C 0%,#0B1220 52%,#080D18 100%) !important;
  color:#E9ECF2 !important}
.tela.dark,.tela.red{background:
    radial-gradient(120% 60% at 50% -8%,rgba(219,30,47,.16),transparent 62%),
    linear-gradient(180deg,#111A2C 0%,#0B1220 52%,#080D18 100%) !important}

/* ---------- cena da categoria: faixa, não fundo esticado ----------
   As cenas são panorâmicas 3:2. Jogadas como fundo de um container retrato
   com "cover", a imagem era ampliada até estourar e só sobrava um pedaço do
   meio — o corte que aparecia feio no tablet. Agora ela ocupa uma FAIXA no
   topo, com a proporção respeitada, e desmancha para baixo no tema escuro. */
/* ⚠ MEDIDO EM 24/08, porque o Giordano disse "a capa de cada secao parece
   q ta errando a parte de cima, tem um espaco vazio no alto q ta estranho".

   Amostrei a luminância média em faixas de 40px nas quatro categorias:
   ficava entre 22 e 70 em TODAS elas, e praticamente igual entre uma
   categoria e outra. Ou seja: a arte estava lá, custava o download, e não
   se via. O topo lia como faixa preta vazia — que é exatamente o que ele
   descreveu.

   Duas causas somadas: opacity .75 na imagem E uma cortina que já começava
   a 30% de escuro no ponto mais claro. Agora a cortina abre no topo, onde
   só existe cromo de alto contraste (botão branco, barra vermelha), e
   fecha depressa a partir da altura em que o texto começa. */
/* a arte antiga, quando uma categoria nao tem ilha, continua precisando do
   ganho porque e quase preta */
#cenafundo:not(.ilha){filter:brightness(2.45) contrast(1.18) saturate(1.15) !important}
#cenafundo{
  inset:0 0 auto 0 !important;
  height:42% !important;
  min-height:210px;
  opacity:.96 !important;
  /* ⚠ A CAUSA REAL, medida: as próprias imagens são quase pretas.
     Luminância média das seis artes de categoria, sobre a imagem CRUA, sem
     cortina nenhuma: 23, 27, 27, 27, 47 — com 1% a 6% dos pixels acima de
     110. Abrir a cortina não adiantou nada (mediu 25 antes, 25 depois),
     porque não havia o que revelar.

     Levantar por filtro é o conserto que não pede arte nova: brightness
     puxa o corpo da imagem para a faixa visível e contrast devolve a
     separação que o brightness achata. Fica no CSS, e no dia em que
     entrarem artes mais claras é uma linha para remover. */
  /* O FILTRO SAIU DAS ILHAS EM 25/08, e a razao e que ele parou de ser
     conserto e virou defeito. Ele nasceu para salvar as artes genericas
     antigas, quase pretas (media 23 a 47). Quando as ilhas proprias
     entraram, o mesmo fator levou o fundo ATRAS DO TEXTO a 213 de
     luminancia: contraste de 1,5:1, ilegivel.
     Filtro de CSS e anestesico: corrige a aparencia e esconde a causa. As
     ilhas agora sao normalizadas NO ARQUIVO e chegam prontas. */
  filter:none;
  /* ⚠ A EMENDA, e as duas tentativas erradas antes desta.
     A faixa acabava em #0B1220 opaco enquanto o fundo da tela naquela
     altura ainda é mais claro: salto medido de 7,6 de luminância. Fechar
     em transparente piorou (17,1), porque aí a arte — já com brilho 2,45 —
     aparecia inteira no último pixel e sumia de uma vez: virou uma linha
     CLARA em vez de uma escura.
     A cortina não tem como acertar uma cor que muda com a altura da tela.
     Quem tem de desaparecer é a ARTE. Com máscara, ela dissolve no que
     estiver atrás, seja lá o que for, e não há cor para combinar.
     A máscara vale também para o ::after, que é filho — os dois somem
     juntos, que é exatamente o que se quer. */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,
    rgba(0,0,0,.55) 76%,transparent 100%) !important;
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,
    rgba(0,0,0,.55) 76%,transparent 100%) !important;
  background-size:cover !important;
  background-position:center 42% !important}
/* A cortina abre no topo (só cromo de alto contraste ali) e fecha depressa
   a partir da altura em que o título começa. Calibrada por medida, não por
   olho: amostrando o fundo ATRÁS do título com o texto escondido, o
   contraste do branco no percentil 95 dá 7 a 10:1 em três das quatro artes.
   A quarta (cat-2, a mais clara) dava 3,0:1 e foi o que definiu o ponto de
   fechamento em 40%. Percentil 95 e não o pixel mais claro: um brilho
   isolado de 1px não decide a legibilidade de um título. */
#cenafundo::after{
  background:linear-gradient(180deg,
    rgba(11,18,32,.06) 0%,
    rgba(11,18,32,.13) 16%,
    rgba(11,18,32,.72) 40%,
    rgba(11,18,32,.96) 88%,
    rgba(11,18,32,.98) 100%) !important}
/* o texto que cai sobre a arte precisa da própria sombra, senão a leitura
   passa a depender de qual imagem é — e são quatro imagens diferentes. */
#corpo .title,#corpo .body,#corpo .catcab{
  text-shadow:0 1px 12px rgba(6,10,20,.85), 0 1px 3px rgba(6,10,20,.9)}

/* ---------- tipografia ---------- */
.title{color:#FFFFFF}
.body{color:#9BA6BC}
.rot{color:#C7D0E0 !important;font-weight:800 !important}
.topo{border-bottom-color:rgba(255,255,255,.10) !important}
.placar{color:#FFFFFF !important}
.marca svg path[fill="#231F20"],.marca svg rect[fill="#231F20"]{fill:#FFFFFF}
.leg{color:#7E8AA2 !important}
.leg b{color:#FFFFFF}
.medidor{border-color:rgba(255,255,255,.12) !important}
.medidor .d{color:#9BA6BC !important}
.trilha i{background:rgba(255,255,255,.16) !important}
.trilha i.feito{background:var(--red) !important}
.trilha i.atual{background:#FFFFFF !important}

/* ---------- inventário: disco com volume ---------- */
.it .disco{
  width:52px;height:52px;
  background:linear-gradient(168deg,#1E2941,#151E31) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             inset 0 -6px 12px rgba(0,0,0,.40),
             0 3px 0 rgba(0,0,0,.35);
  transition:transform .14s cubic-bezier(.2,.9,.25,1),box-shadow .18s,background .25s}
.it:active .disco{transform:translateY(3px) scale(.94);box-shadow:none}
.it .nm{color:#8E99B0 !important;font-size:13px !important}
.it .pips i{background:rgba(255,255,255,.16) !important}
.it svg{fill:#6D7A93}
.it .disco svg.marca-real{color:#C7D0E0}

/* ---------------------------------------------------------------------
   Aqui existia um bloco INTEIRO de [data-n] que nunca chegou à tela: azul,
   teal, laranja e VERDE no nível 4 — sobrescrito pelo bloco de baixo, que
   termina em vermelho. Dois sistemas de cor no mesmo arquivo, um morto.
   É a lição §2.3 (regra CSS posterior vence) tendo custado a vez.
   Removido em 23/08/2026. A rampa única está logo abaixo.
   --------------------------------------------------------------------- */
/* No branco, 40% de opacidade ainda deixava o ícone legível. No escuro ele
   simplesmente some. Aqui o "apagado" é dessaturação e um leve escurecer,
   nunca transparência — o item precisa continuar reconhecível para a pessoa
   decidir se sabe ou não sabe aquilo. */
.it[data-n="0"] .disco svg.marca-real{filter:grayscale(.85) brightness(.85);opacity:.85}
.it[data-n="0"] .disco img.ico-conceito{filter:grayscale(.7) brightness(.9);opacity:.88}
.it[data-n="0"] .ico-falta{opacity:.85 !important}
.it[data-n="1"] .disco svg.marca-real,
.it[data-n="2"] .disco svg.marca-real{filter:none;opacity:1}
.it .disco svg.marca-real{width:30px;height:30px}
.it .disco img.ico-conceito{width:38px;height:38px}

/* O preenchimento parcial do disco é um ::before absoluto com z-index:0.
   O ícone era estático, e conteúdo estático pinta ABAIXO de qualquer
   elemento posicionado com z-index >= 0 — ou seja, no nível 4 o
   preenchimento cobria o ícone inteiro. Basta posicionar o ícone acima. */
.it .disco > *{position:relative;z-index:2}
.it .disco::before{z-index:1 !important;mix-blend-mode:soft-light;opacity:.85}

/* =====================================================================
   ESCALA DE CALOR — 5 níveis que se leem como intensidade crescente

   Antes eram azul, turquesa, laranja e verde: quatro cores sem ordem
   entre si. Verde depois de laranja não lê como "mais", lê como "outro".
   Agora é uma rampa térmica — frio, morno, quente, incandescente — e
   quatro canais redundantes crescem juntos: altura do preenchimento,
   brilho da cor, tamanho do halo e escala do disco. Mesmo quem não
   distingue bem cor percebe a progressão.
   ===================================================================== */
/* Um disco, uma cor, e o NÍVEL é o quanto ele está cheio.

   A rampa anterior era azul → ciano → âmbar → vermelho. Três problemas:
   azul e ciano são vizinhos e se confundem num disco de 46px; o salto do
   frio para o quente não tem degrau intermediário; e o topo era o vermelho
   da marca, que no resto do jogo significa "acerto" e no mundo significa
   "erro". Nada disso é monotônico — a pessoa não lê ordem, lê variedade.

   Agora o canal principal é ALTURA DE PREENCHIMENTO, que é posição e
   comprimento (níveis 1 e 3 da hierarquia de Cleveland & McGill 1984), em
   vez de matiz (nível 7, o pior). Monotônico por construção, seguro para
   quem não distingue cor, e o vermelho volta a significar UMA coisa: cheio.

   Quatro canais redundantes continuam crescendo juntos — altura, calor da
   cor, halo e escala do disco — porque WCAG 2.2 §1.4.1 proíbe cor como
   único portador de informação. */
.it .disco{background:linear-gradient(168deg,#1E2941,#151E31) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 0 #0D1424 !important;
  overflow:hidden}

/* o ::before é a coluna que sobe: 0 → 25% → 50% → 75% → 100% */
.it .disco::before{content:'';position:absolute;left:0;right:0;bottom:0;
  height:0;z-index:1 !important;mix-blend-mode:normal;opacity:1;
  /* Vermelho saiu do topo da escala em 23/08/2026, a pedido do Giordano:
     "ele em geral está associado a perigo, a algo ruim". Está certo, e é
     pior aqui do que em geral — o vermelho é a cor da MARCA, então usá-lo
     como "domino" fazia a mesma cor significar acerto, marca e erro ao
     mesmo tempo. Agora a rampa é verde (o verde escuro do topo é o
     "cheio"), e o vermelho fica livre para significar só uma coisa: aviso.
     A altura continua sendo o canal principal, então daltonismo
     vermelho-verde não é problema — a informação está na posição. */
  background:linear-gradient(0deg,#0E6B3A,#22C55E 60%,#5BE58A);
  transition:height .22s cubic-bezier(.2,.9,.25,1)}
.it[data-n="1"] .disco::before{height:25%}
.it[data-n="2"] .disco::before{height:50%}
.it[data-n="3"] .disco::before{height:75%}
.it[data-n="4"] .disco::before{height:100%}

/* o halo e o relevo crescem com o nível, nunca sozinhos */
.it[data-n="2"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
  0 3px 0 #0D1424, 0 0 10px rgba(34,197,94,.22) !important}
.it[data-n="3"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),
  0 4px 0 #0D1424, 0 0 18px rgba(34,197,94,.40) !important;
  transform:translateY(-1px)}
.it[data-n="4"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
  0 5px 0 #0B5A31, 0 0 26px rgba(34,197,94,.62) !important;
  transform:translateY(-3px) scale(1.06)}

/* pips: quantos acesos = o nível. Contagem, não cor. */
.it[data-n="1"] .pips i:nth-child(-n+1),
.it[data-n="2"] .pips i:nth-child(-n+2),
.it[data-n="3"] .pips i:nth-child(-n+3),
.it[data-n="4"] .pips i{background:#22C55E !important;
  box-shadow:0 0 5px rgba(34,197,94,.7)}

.it .nm{transition:color .2s}
.it[data-n="3"] .nm{color:#E6C68A !important;font-weight:800 !important}
.it[data-n="4"] .nm{color:#FFD9C2 !important;font-weight:900 !important}

/* legenda vira amostra de cor, não texto solto */
.leg.escala{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
  font-size:13px;color:#8E99B0;margin-bottom:14px}
.leg.escala .lg{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.leg.escala .lg i{width:11px;height:11px;border-radius:4px;display:block}
/* A amostra da legenda repete o MESMO código visual do disco: uma coluna
   que sobe. Se a legenda usar matiz e o item usar altura, a legenda deixa
   de ser legenda. */
.leg.escala .lg i{background:#253048;position:relative;overflow:hidden}
.leg.escala .lg i::after{content:'';position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,#0E6B3A,#22C55E 60%,#5BE58A)}
.leg.escala .lg[data-l="0"] i::after{height:0}
.leg.escala .lg[data-l="1"] i::after{height:25%}
.leg.escala .lg[data-l="2"] i::after{height:50%}
.leg.escala .lg[data-l="3"] i::after{height:75%}
.leg.escala .lg[data-l="4"] i::after{height:100%}

/* ---------- caminho entre as ilhas ---------- */
#rota{position:absolute;inset:0;width:100%;height:100%;z-index:2;
  pointer-events:none;overflow:visible}
#rota .trecho{fill:none;stroke:rgba(255,255,255,.26);stroke-width:.7;
  stroke-dasharray:2.4 2.6;stroke-linecap:round;
  vector-effect:non-scaling-stroke;transition:stroke .6s}
#rota .trecho.feito{stroke:rgba(255,197,61,.85);
  filter:drop-shadow(0 0 3px rgba(255,197,61,.65))}
#rota .seta{fill:#FFC53D;filter:drop-shadow(0 0 4px rgba(255,197,61,.8));
  animation:setaPula 1.8s ease-in-out infinite}
@keyframes setaPula{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- dica do arrasto, ancorada no item ---------- */
/* O CSS do `.coach` (a dica de arrasto) saiu em 23/08/2026 junto com o
   gesto que ele ensinava. A régua é a própria affordance — não precisa de
   um cartaz explicando um gesto invisível. */


/* ---------- pips viram régua de nível, não bolinhas mudas ---------- */
.it .pips{gap:2px !important;height:6px !important;margin-top:1px}
.it .pips i{width:11px !important;height:4px !important;border-radius:2px !important;
  background:rgba(255,255,255,.14) !important}

/* ---------- feedback do gesto de arrastar ---------- */
.it{touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none}
.it.pressionado .disco{transform:scale(.93)}
.it.arrastando{z-index:5}
.it.arrastando .disco{transform:scale(1.16);
  box-shadow:0 0 0 3px rgba(255,255,255,.22),0 8px 20px rgba(0,0,0,.55) !important}
.it.arrastando .nm{color:#fff !important}

/* ---------- 7 · ícones maiores, grade mais apertada ---------- */
/* ⚠ Este bloco vale para a grade BINÁRIA (q4, q5), que continua sendo um
   chip grande sem estrela. A grade de inventário (.grade.inv, escala 5)
   tem célula própria mais abaixo e NÃO pode ser atingida por estes
   !important — foi o que aconteceu em 23/08: o `.it .disco` de 60px daqui
   venceu o de 44px da célula, o disco estourou e o preenchimento sumiu.
   Lição §2.3 cobrando pela terceira vez: regra posterior com !important
   vence tudo. Por isso os seletores abaixo são :not(.cel). */
.grade:not(.inv){grid-template-columns:repeat(auto-fill,minmax(80px,1fr)) !important;
  gap:12px 0 !important}
.it:not(.cel){padding:0 2px !important}
.it:not(.cel) .disco{width:60px !important;height:60px !important}
.it:not(.cel) .disco svg.marca-real{width:34px !important;height:34px !important}
.it:not(.cel) .disco img.ico-conceito{width:44px !important;height:44px !important}
/* o rótulo usa a coluna inteira e quebra em no máximo 2 linhas, com
   reticências na terceira — antes vazava para fora da grade */
.it:not(.cel) .nm{font-size:13px !important;line-height:1.16 !important;
  max-width:100% !important;width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;hyphens:auto;overflow-wrap:anywhere}
.ico-falta{width:34px !important;height:34px !important;font-size:17px !important}

/* ---------- 2 · degraus no mapa: onde a pessoa está ---------- */
.degraus{display:flex;align-items:flex-start;justify-content:center;
  gap:0;margin:2px 0 18px;flex-wrap:nowrap}
/* A CONTA DA LARGURA, porque foi tentativa e erro até virar conta.
   Largura útil no celular de 390: 354px. Cinco caixas e quatro conectores.
   Com conector de 10px sobram 314 para as cinco → 62px cada, e o conector
   vira `flex:1` para absorver a diferença em tela maior.
   A 10,5px, "Ferramentas" (a palavra mais longa) mede ~58px e cabe em uma
   linha; "Calibração" cabe folgado. Com duas linhas RESERVADAS, nenhuma
   delas muda a altura da linha da grade. */
.dg-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;
  flex:0 0 auto;position:relative;width:62px}
.dg-bola{width:30px;height:30px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font:900 13px Inter,system-ui,sans-serif;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.45);
  border:2px solid transparent;transition:.3s}
/* ⚠ MEDIDO EM 24/08. As caixas dos passos mediam 45, 45, 45, 90 e 79px de
   altura: "O mergulho" quebrava em duas linhas e esticava a linha inteira
   da grade, e "Calibração" ficava num terceiro tamanho. Em `flex` a linha
   estica até o item mais alto — o mesmo defeito dos cartões do inventário,
   e a mesma cura: RESERVAR a altura de duas linhas para todo rótulo, para
   que quebrar ou não deixe de mudar a caixa.
   O corpo também subiu: 9,5px é pequeno demais para ler em pé, no ônibus. */
.dg-nome{font-size:13px;line-height:1.15;text-align:center;
  /* ALTURA FIXA, não mínima: com min-height o texto de 4 linhas ainda
     estica a caixa, que foi o que aconteceu na primeira tentativa —
     as caixas foram de 45/90/79 para 61/122/135, ou seja, pioraram. */
  height:2.3em;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:center;
  overflow-wrap:anywhere;hyphens:none;
  color:rgba(255,255,255,.40);font-weight:700}
.dg-item.feito .dg-bola{background:#1FA85A;color:#fff}
.dg-item.feito .dg-nome{color:rgba(255,255,255,.62)}
.dg-item.agora .dg-bola{background:linear-gradient(168deg,#FF7A45,#DB1E2F);
  color:#fff;border-color:#fff;transform:scale(1.22);
  box-shadow:0 0 0 5px rgba(219,30,47,.22),0 0 20px rgba(255,90,70,.65);
  animation:dgPulsa 2s ease-in-out infinite}
.dg-item.agora .dg-nome{color:#fff;font-weight:900}
@keyframes dgPulsa{0%,100%{box-shadow:0 0 0 5px rgba(219,30,47,.22),
  0 0 20px rgba(255,90,70,.65)}
  50%{box-shadow:0 0 0 10px rgba(219,30,47,.06),0 0 26px rgba(255,90,70,.85)}}
.dg-aqui{position:absolute;top:-19px;white-space:nowrap;font:900 13px Inter,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:#FF8A7A}
.dg-lig{flex:1 1 10px;min-width:6px;height:2px;background:rgba(255,255,255,.14);
  margin-top:14px;min-width:4px}
@media(prefers-reduced-motion:reduce){.dg-item.agora .dg-bola{animation:none}}

/* ---------- medidor no escuro ---------- */
.medidor{background:linear-gradient(168deg,#1A2338,#121A2A) !important;
  border:1px solid rgba(255,255,255,.10) !important;border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.medidor .n{color:#FF5B6B !important}

/* ---------- caixa de dica ---------- */
.dica{background:linear-gradient(168deg,#1A2338,#121A2A) !important;
  border:1px solid rgba(255,255,255,.10);border-radius:14px}

/* ---------- chips de resposta com corpo ---------- */
.ch{
  background:linear-gradient(168deg,#1C2740,#141C2E) !important;
  color:#C7D0E0 !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 3px 0 rgba(0,0,0,.38);
  font-weight:700 !important;
  transition:transform .12s cubic-bezier(.2,.9,.25,1),box-shadow .16s}
.ch:active{transform:translateY(3px);box-shadow:none}
.ch.on{
  background:linear-gradient(168deg,#E8384A,#C21226) !important;
  color:#FFFFFF !important;border-color:#9E1220 !important;
  box-shadow:0 4px 0 #8A0F1C, 0 0 20px rgba(219,30,47,.42) !important;
  transform:translateY(-2px)}

/* ---------- botão principal, tátil ---------- */
.btn{
  border-radius:16px !important;
  font-size:15px !important;
  letter-spacing:.02em !important;
  padding:16px 20px !important;
  background:linear-gradient(180deg,#E8384A,#C21226) !important;
  color:#fff !important;
  box-shadow:0 5px 0 #8A0F1C, 0 10px 24px rgba(219,30,47,.30) !important;
  transition:transform .11s cubic-bezier(.2,.9,.25,1),box-shadow .14s,filter .14s}
.btn:active:not(:disabled){transform:translateY(5px);
  box-shadow:0 0 0 #8A0F1C, 0 4px 12px rgba(219,30,47,.22) !important}
.btn:disabled{background:linear-gradient(180deg,#2A3348,#1E2536) !important;
  color:#5C6780 !important;box-shadow:0 4px 0 #141A28 !important}
.btn.ghost{background:transparent !important;box-shadow:none !important;
  border:1.5px solid rgba(255,255,255,.22) !important;color:rgba(255,255,255,.75) !important}
.rodape{padding-top:14px !important;
  background:linear-gradient(180deg,transparent,#080D18 42%)}

/* ---------- palpite no escuro ---------- */
.palp{
  background:linear-gradient(168deg,#1B2540,#131B2C) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.42), 0 10px 24px rgba(0,0,0,.30) !important}
.palp::before{background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,
  rgba(255,255,255,0) 42%) !important}
.palp-txt b{color:#FFFFFF}
.palp-txt span{color:#939FB6}
.palp-check{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.20)}
.palp.on{
  background:linear-gradient(168deg,#3A1520,#24101A) !important;
  border-color:#DB1E2F !important;
  box-shadow:0 5px 0 #8A0F1C, 0 14px 32px rgba(219,30,47,.34) !important}

/* ---------- identificação: âmbar sobre escuro ---------- */
.ident{
  background:linear-gradient(168deg,#2A2410,#1C1809) !important;
  border-color:rgba(255,197,61,.55) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.40), 0 0 30px rgba(255,197,61,.10) !important}
.ident-tit{color:#FFE9A8 !important}
.ident-sub{color:#C3B37A !important}
.ident-r{color:#FFE9A8 !important}
.ident-r .opc{background:rgba(255,255,255,.10);color:#C3B37A}
.ident-i{background:#0F1626 !important;color:#F2F5FA !important;
  border-color:rgba(255,197,61,.30) !important}
.ident-i::placeholder{color:#6B7488 !important}
.ident-i.ok{background:#0D1F16 !important;border-color:#22C55E !important}
.ident-i.ruim{background:#221014 !important}
.ident-n{color:#A2925F !important}

/* ---------- selo de conceito ainda sem arte ---------- */
.ico-falta{background:rgba(255,255,255,.09) !important;color:#8E99B0 !important}

/* ---------- bloco de aprofundamento ---------- */
.mais{border-color:rgba(255,255,255,.12) !important;
  background:linear-gradient(168deg,#161F33,#101725) !important}
.aberta{background:#0F1626 !important;color:#F2F5FA !important;
  border-color:rgba(255,255,255,.14) !important}

/* ---------- 4 · MAPA: menor, mais claro e com o caminho todo visível ----------
   Antes o mapa ocupava a tela inteira com uma única estação acesa no meio de
   um vazio enorme, sem dizer que ia preencher. Agora ele é um painel contido,
   e as estações apagadas aparecem desde o começo: a pessoa vê o caminho
   inteiro à frente, que é o que faz a barra de progresso funcionar. */
/* ⚠ havia aqui um segundo `#t-mapa .mw` com justify-content:center, de
   quando o mapa era centralizado. Ele brigava com a regra nova mais
   abaixo — que vence por vir depois, mas duplicata de seletor é a
   armadilha §2.3, e foi o teste que a encontrou. A regra viva é uma só,
   e está na seção "O MAPA NO CELULAR". */
#board{border-radius:20px;overflow:hidden;margin:0 auto;
  max-height:46vh;aspect-ratio:4/3;width:100%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08)}
#board .bg{background-size:cover !important;background-position:center 45% !important;
  opacity:1 !important;filter:saturate(1.15) brightness(1.28)}
#board::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(8,13,24,.60) 100%)}
.mtxt{padding-top:18px}

/* ---------- estações viraram ILHAS ----------
   O container tinha a proporção do mapa vertical antigo (941/1672), então
   com o board agora em 4:3 as paradas caíam fora do lugar. Agora ele
   simplesmente acompanha o board. */
.estacoes{height:100% !important;width:100% !important;aspect-ratio:auto !important;
  left:0 !important;top:0 !important;transform:none !important;
  pointer-events:none}
/* A entrada é só por ESCALA. Antes havia também um fade de opacidade que
   ficava reiniciando e travava perto de zero — as ilhas simplesmente não
   apareciam. Animar uma propriedade só é mais previsível e mais barato. */
.est{
  width:19% !important;aspect-ratio:1 !important;background:none !important;
  border-radius:0 !important;
  opacity:1 !important;
  transform:translate(-50%,-50%) scale(.62) !important;
  transition:transform .55s cubic-bezier(.2,1.5,.4,1)}
.est.on{transform:translate(-50%,-50%) scale(1) !important}
.est::after{display:none !important}
.est .ilha{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;display:block;transition:opacity .7s ease}
.est .ilha.off{opacity:1;filter:saturate(.55) brightness(.72)}
.est .ilha.lit{opacity:0;filter:drop-shadow(0 0 10px rgba(255,197,61,.55))}
.est.on .ilha.off{opacity:0}
.est.on .ilha.lit{opacity:1}
/* sem a arte acesa ainda: mantém a apagada e acende por filtro, para o
   lugar nunca ficar vazio no meio do mapa */
.est.semAcesa.on .ilha.off{opacity:1;
  filter:saturate(1.35) brightness(1.55)
         drop-shadow(0 0 12px rgba(255,197,61,.75))}

/* ponto de reserva enquanto a arte da ilha não chegou */
.est .ponto{display:none;position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.est.semArte .ilha{display:none}
.est.semArte .ponto{display:block}
.est.semArte.on .ponto{background:linear-gradient(160deg,#FFC53D,#FF7A2F);
  box-shadow:0 0 0 4px rgba(255,197,61,.20),0 0 18px rgba(255,160,40,.75)}

@media(prefers-reduced-motion:reduce){
  #bok.avisa{animation:none}
}

/* ================= TELA FINAL: retrato, comparacao, card ================= */
#t-fim .mast.on-dark{margin-top:4px}
.radarBox{background:linear-gradient(168deg,#16203A,#0E1626);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:16px 14px 14px;margin-bottom:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.40)}
.rb-cab,.cx-cab,.cv2-cab{font:800 13px 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.16em;color:rgba(255,255,255,.50);margin-bottom:10px}
.rb-nota{font-size:13px;line-height:1.45;color:rgba(255,255,255,.52);
  margin:8px 2px 0;text-align:left}
.rb-nota b{color:rgba(255,255,255,.80)}

.cx{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:16px 15px;margin-bottom:14px;text-align:left}
.cx-l{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.09);
  display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline}
.cx-l:last-of-type{border-bottom:0}
.cx-t{font-size:13px;font-weight:700;color:rgba(255,255,255,.86)}
.cx-n{font:900 30px Inter,system-ui,sans-serif;color:#FFC53D;
  font-variant-numeric:tabular-nums;line-height:1}
.cx-r{grid-column:1/-1;font-size:13px;color:rgba(255,255,255,.48)}
.cx-nota{font-size:13px;line-height:1.5;color:rgba(255,255,255,.48);margin:12px 0 0}

.cv2{background:linear-gradient(168deg,#12253C,#0D1A2C);
  border:1px solid rgba(23,196,196,.35);border-radius:18px;
  padding:16px 15px;margin-bottom:14px;text-align:left}
.cv2-l{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:9px}
.cv2-l li{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72)}
.cv2-l li b{color:#8FE9E9}
.btn-conv{margin-top:14px;width:100%}

.cardaviso{font-size:13px;font-weight:700;color:#8FE9E9;text-align:center;
  opacity:0;max-height:0;transition:opacity .3s,max-height .3s}
.cardaviso.on{opacity:1;max-height:44px;padding:2px 0}

#cardmodal{position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(4,7,13,.90);backdrop-filter:blur(10px)}
#cardmodal.on{display:flex}
.cm-in{display:flex;flex-direction:column;gap:12px;align-items:center;
  max-height:100%;width:min(340px,100%)}
#cardcv{width:100%;height:auto;border-radius:16px;display:block;
  box-shadow:0 24px 60px rgba(0,0,0,.7);max-height:74vh;object-fit:contain}
.cm-bt{display:flex;gap:9px;width:100%}
.cm-bt .btn{flex:1}

/* ============================================================
   10 · CONSENTIMENTO LGPD (Fase 0, item 0.7)
   O bloco fica DEPOIS do botão Começar de propósito: quem já
   decidiu não é barrado, e quem quer ler tem o texto a um toque.
   Sem checkbox — o consentimento é o ato de começar, e a
   informação está visível antes dele.
   ============================================================ */
.consent{margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.14)}
.consent p{margin:0;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.62)}
.consent p b{color:rgba(255,255,255,.88);font-weight:700}
.consent-link{display:inline-block;margin-top:7px;padding:0;
  background:none;border:0;font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--red-2);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;text-align:left}
.consent-link:hover{color:#fff}

/* --- painel do termo --- */
#termo{position:fixed;inset:0;z-index:10000;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(4,7,13,.92);backdrop-filter:blur(10px)}
#termo.on{display:flex}
.tm-in{width:min(520px,100%);max-height:92dvh;
  display:flex;flex-direction:column;
  background:var(--noite);border-top:3px solid var(--red);
  animation:tmSobe .3s cubic-bezier(.2,.9,.25,1)}
@keyframes tmSobe{from{transform:translateY(22px);opacity:.4}}
.tm-cab{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  padding:16px 18px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.tm-cab .mono{font-family:'IBM Plex Mono',monospace;font-size:13px;
  letter-spacing:.14em;color:rgba(255,255,255,.55)}
.tm-x{background:none;border:0;color:rgba(255,255,255,.55);
  font-size:16px;line-height:1;cursor:pointer;padding:4px 6px}
.tm-x:hover{color:#fff}
/* rolagem própria: o termo é longo e não pode empurrar o botão fora da tela */
.tm-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:16px 18px 4px}
.tm-corpo h3{margin:16px 0 5px;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-2);font-weight:800}
.tm-corpo h3:first-child{margin-top:0}
.tm-corpo p{margin:0 0 9px;font-size:13px;line-height:1.55;
  color:rgba(255,255,255,.74)}
.tm-corpo p b{color:#fff;font-weight:700}
.tm-corpo a{color:var(--red-2)}
.tm-sair{display:block;margin:12px 0 10px;text-align:center;
  text-decoration:none;color:#fff;border-color:rgba(255,255,255,.3)}
.tm-id{font-family:'IBM Plex Mono',monospace;font-size:13px !important;
  letter-spacing:.03em;color:rgba(255,255,255,.42) !important;
  word-break:break-all}
.tm-pe{flex:0 0 auto;padding:12px 18px calc(14px + var(--sb));
  border-top:1px solid rgba(255,255,255,.12)}

/* ============================================================
   11 · CAIXA DE OBSERVAÇÃO ABERTA (Fase 0, item 0.6)
   Tom neutro de propósito. "Aconteceu alguma coisa?" convida
   relato; "houve algum problema?" convida desculpa.
   ============================================================ */
.obs-rot{display:block;font-size:13px;line-height:1.45;font-weight:700;
  color:rgba(255,255,255,.9);text-align:left;margin-bottom:5px}
.obs-sub{margin:0 0 9px;font-size:13px;line-height:1.45;text-align:left;
  color:rgba(255,255,255,.5)}
#obsTxt{width:100%;font-family:inherit;font-size:13px;line-height:1.5;
  color:#fff;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);border-radius:2px;
  padding:11px 12px;resize:vertical;min-height:74px}
#obsTxt::placeholder{color:rgba(255,255,255,.32)}
#obsTxt:focus{outline:0;border-color:var(--red-2);
  background:rgba(255,255,255,.09)}
.obs-pe{display:flex;align-items:center;gap:10px;margin-top:9px}
.obs-bt{flex:0 0 auto;width:auto;padding:11px 16px;font-size:13px;
  color:#fff;border-color:rgba(255,255,255,.3)}
.obs-bt:disabled{opacity:.45;cursor:default}
.obs-ok{font-family:'IBM Plex Mono',monospace;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--turq)}

/* ============================================================
   12 · ESCALA NUMÉRICA NUMA LINHA SÓ
   Onze chips de 0 a 10 quebravam em duas linhas. Quebrada, a
   escala para de ser lida como régua: a pessoa ancora no fim da
   primeira linha e o 10 vira "um botão qualquer da linha de
   baixo". Numa linha, a distância entre 0 e 10 é visível — que é
   a informação que a escala existe para dar.
   ============================================================ */
.chips.linha{
  display:flex;flex-wrap:nowrap;gap:4px;
  margin-bottom:6px;
  /* se ainda assim não couber (tela estreitíssima), rola na horizontal
     em vez de quebrar — a régua continua sendo uma régua */
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.chips.linha::-webkit-scrollbar{display:none}
.chips.linha .ch{
  flex:1 1 0;min-width:0;
  padding:12px 0 !important;
  text-align:center;
  font-size:13px !important;
  font-variant-numeric:tabular-nums;
  border-radius:9px !important}
/* âncoras: um número sozinho não diz para que lado é "mais" */
.linha-pes{display:flex;justify-content:space-between;margin:0 2px 20px;
  font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}

/* ------------------------------------------------------------
   13 · MÚLTIPLA ESCOLHA no aprofundamento
   Precisa PARECER diferente de escolha única, senão a pessoa
   marca uma e segue, sem descobrir que podia marcar mais.
   ------------------------------------------------------------ */
.rot-nota{margin:-4px 0 9px;font-family:'IBM Plex Mono',monospace;
  font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--turq)}
.chips.multi .ch{border-radius:9px !important;padding-left:34px !important;
  position:relative;text-align:left}
/* caixa quadrada = marca várias; o redondo do rádio ficou para a única */
.chips.multi .ch::before{content:'';position:absolute;left:12px;top:50%;
  width:14px;height:14px;margin-top:-7px;border-radius:3px;
  border:1.5px solid rgba(255,255,255,.32);background:rgba(0,0,0,.18)}
.chips.multi .ch.on::before{background:#fff;border-color:#fff}
.chips.multi .ch.on::after{content:'';position:absolute;left:16px;top:50%;
  width:4px;height:8px;margin-top:-6px;
  border-right:2px solid #C21226;border-bottom:2px solid #C21226;
  transform:rotate(40deg)}


/* =====================================================================
   A GRADE DE INVENTÁRIO, COM AS ESTRELAS DENTRO DA CÉLULA

   A versão em lista fez o inventário virar formulário — e o BRIEF é
   explícito: "é um JOGO, não um formulário e não um relatório". A grade de
   ícones É o que dá a cara de coleção.

   O nível aparece por DOIS canais ao mesmo tempo: o disco que enche e as
   estrelas que acendem. Redundância é requisito (WCAG 2.2 §1.4.1), e na
   prática é o preenchimento que dá o aspecto de inventário — a estrela é
   o controle, o disco é o troféu.

   Três colunas, não quatro: com quatro, a estrela cairia para 18px e
   deixaria de ser alvo. Em três, cada estrela tem 24px — a mesma medida
   que o laboratório visual do FAROL usa no celular.
   ===================================================================== */
.grade.inv{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:5px !important}
.it.cel{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:5px;min-height:0;padding:9px 3px 6px;border-radius:15px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);
  transition:background .2s,border-color .2s,transform .14s}
.it.cel[data-n="3"],.it.cel[data-n="4"]{background:rgba(34,197,94,.13);
  border-color:rgba(91,229,138,.32)}
.it.cel[data-n="4"]{transform:translateY(-2px)}

.it.cel .cel-ico{position:relative;padding:0;border:0;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;line-height:0}
.it.cel .cel-ico:active{transform:scale(.92)}
.it.cel .disco{width:44px !important;height:44px !important;
  position:relative;overflow:hidden}
.it.cel .disco svg.marca-real,.it.cel .disco img.ico-conceito{
  width:27px !important;height:27px !important}
/* o ícone tem de pintar ACIMA do preenchimento — conteúdo estático fica
   abaixo de um ::before posicionado (05-LICOES.md §1.3) */
.it.cel .disco > *{position:relative;z-index:2}
/* o "?" existia e ninguém achava: era 17px sem instrução. Agora é maior,
   fica na borda do ícone e a dica no topo da tela diz para tocá-lo. */
.it.cel .cel-q{position:absolute;right:-3px;top:-3px;width:19px;height:19px;
  border-radius:50%;display:grid;place-items:center;z-index:3;
  font:900 13px/1 Inter,sans-serif;background:#2B5CE6;color:#fff;
  box-shadow:0 2px 0 #16308A}
.it.cel .cel-ico:active .cel-q{background:#FF5B4A;box-shadow:0 2px 0 #8A0F1C}

.it.cel .nm{font-size:13px !important;line-height:1.15 !important;
  font-weight:700;color:#C7D0E0 !important;text-align:center;
  min-height:24px;display:flex;align-items:center;justify-content:center}
.it.cel[data-n="3"] .nm,.it.cel[data-n="4"] .nm{color:#C8F5D8 !important}

/* 24px por estrela: o alvo que cabe quatro numa célula de 3 colunas, e a
   mesma medida do laboratório visual do FAROL no celular */
/* A11Y-06 (auditoria externa): alvos de 24px colados, sem intervalo, e
   ainda encolhidos pelo scale de desktop (~22,9px medidos). 2px de vão é o
   mínimo que separa toques vizinhos sem estourar a célula de 320px. */
.estrelas{display:flex;gap:2px;flex:0 0 auto}
.estrelas .st{width:24px;height:26px;padding:0;border:0;background:transparent;
  color:rgba(255,255,255,.42);font:15px/1 Georgia,'Times New Roman',serif;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:color .14s,transform .12s}
.estrelas .st.on{color:#8FD9A8}
.estrelas .st.on.alta{color:#22C55E;text-shadow:0 0 8px rgba(34,197,94,.7)}
.estrelas .st:active{transform:scale(1.3)}

/* a pergunta da categoria, curta, em toda página */
.pgperg{margin:0 0 12px;font:800 13px/1.3 Inter,sans-serif;color:#E8ECF4}

/* =====================================================================
   A FICHA DO ITEM — o que é, por que importa, e as estrelas
   Navegação para os lados dentro da MESMA página: sair dela mudaria a
   tela por baixo do diálogo.
   ===================================================================== */
#ficha{position:absolute;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(6,9,16,.78);backdrop-filter:blur(3px)}
#ficha.on{display:flex}
.fi-in{position:relative;width:100%;max-width:330px;max-height:100%;
  overflow-y:auto;padding:22px 20px 18px;border-radius:20px;
  background:linear-gradient(168deg,#1B2740,#111A2C);
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:fiEntra .18s cubic-bezier(.2,.9,.25,1)}
/* estado final é o padrão: se a animação não rodar, a ficha aparece
   igual — 05-LICOES.md §1.1 */
@keyframes fiEntra{from{opacity:0;transform:translateY(10px) scale(.97)}}
.fi-x{position:absolute;top:9px;right:9px;width:32px;height:32px;padding:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.09);
  color:rgba(255,255,255,.7);font-size:14px;cursor:pointer}
.fi-ico{width:54px;height:54px;border-radius:16px;display:grid;
  place-items:center;background:rgba(255,255,255,.07);margin-bottom:12px}
.fi-ico svg.marca-real,.fi-ico img.ico-conceito{width:32px;height:32px}
.fi-tit{margin:0 0 10px;font:900 21px/1.1 Inter,sans-serif;color:#fff}
.fi-e{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:#D6DCE8}
.fi-p{margin:0 0 16px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.62)}
.fi-p b{display:block;margin-bottom:3px;color:#FF8A7A;
  font:800 13px/1 'IBM Plex Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase}
.fi-est{justify-content:center;margin:4px 0 8px}
.fi-est .st{width:48px;height:48px;font-size:27px}
.fi-sentido{min-height:32px;margin:0 0 14px;text-align:center;
  font-size:13px;line-height:1.35;color:rgba(255,255,255,.55)}
.fi-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.10)}
.fi-bt{padding:9px 11px;border-radius:10px;
  border:1px solid rgba(255,255,255,.20);background:transparent;
  color:#D6DCE8;font:700 13px Inter,sans-serif;cursor:pointer}
.fi-bt:disabled{opacity:.3;cursor:default}
.fi-pos{font:13px 'IBM Plex Mono',monospace;
  color:rgba(255,255,255,.42);letter-spacing:.06em}

/* =====================================================================
   CABEÇALHO DE PÁGINA — cada família com identidade própria

   "As telas tão iguais demais, o que muda de uma pra outra?" Mudava só um
   rótulo de 13px. Agora o nome da família é grande, tem cor de acento
   própria e uma barra que muda de tela para tela.

   ⚠ A cor identifica a FAMÍLIA e nunca entra na escala. A escala segue
   monotônica numa cor só — foi justamente a rampa de matizes sem ordem
   entre si que teve de ser desfeita.
   ===================================================================== */
.pgcab{position:relative;display:flex;align-items:flex-end;gap:10px;
  margin:0 0 14px;padding:11px 13px 11px 15px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  overflow:hidden}
.pgcab::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--fam,#FF5B4A)}
.pgcab-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.pgcab-rot{font:900 16px/1.05 Inter,sans-serif;color:#fff;letter-spacing:-.01em}
.pgcab-n{font-family:'IBM Plex Mono',monospace;font-size:13px;
  color:var(--fam,#FF5B4A);letter-spacing:.11em;font-weight:700}
.pgcab-pips{display:flex;gap:3px;margin-left:auto;flex:0 0 auto}
.pgcab-pips i{width:13px;height:4px;border-radius:2px;display:block;
  background:rgba(255,255,255,.16)}
.pgcab-pips i.feito{background:rgba(255,255,255,.42)}
.pgcab-pips i.atual{width:20px;background:var(--fam,#FF5B4A);
  box-shadow:0 0 8px var(--fam,#FF5B4A)}
/* uma cor por família — turquesa, azul, roxo, âmbar, verde */
.pgcab[data-fam="0"]{--fam:#17C4C4}
.pgcab[data-fam="1"]{--fam:#2B5CE6}
.pgcab[data-fam="2"]{--fam:#7C4DFF}
.pgcab[data-fam="3"]{--fam:#FFC53D}
.pgcab[data-fam="4"]{--fam:#22C55E}

/* =====================================================================
   GLOSSÁRIO DA TELA FINAL — os 22 conceitos, depois do selo
   Ordenado pelo que a pessoa NÃO marcou: é ali que a leitura rende.
   ===================================================================== */
.glos{border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:16px;margin-bottom:14px;text-align:left;
  background:rgba(255,255,255,.03)}
.glos-cab .mono{color:rgba(255,255,255,.5);font-size:13px;
  letter-spacing:.09em;margin-bottom:8px}
.glos-cab p{margin:0 0 12px;font-size:13px;line-height:1.4;
  color:rgba(255,255,255,.66)}
.glos-l{display:flex;flex-direction:column;gap:1px}
.glos-i{border-top:1px solid rgba(255,255,255,.08)}
.glos-i summary{display:flex;align-items:center;gap:8px;padding:10px 2px;
  cursor:pointer;list-style:none}
.glos-i summary::-webkit-details-marker{display:none}
.glos-i summary::after{content:'+';margin-left:auto;
  color:rgba(255,255,255,.4);font:800 13px Inter,sans-serif}
.glos-i[open] summary::after{content:'−'}
.glos-nm{font:800 13px Inter,sans-serif;color:#E8ECF4}
.glos-est{display:flex;gap:1px}
.glos-est i{font:13px/1 Georgia,serif;color:rgba(255,255,255,.16);
  font-style:normal}
.glos-est i.on{color:#FFC53D}
.glos-i[data-n="0"] .glos-nm,.glos-i[data-n="1"] .glos-nm{color:#FFB3A0}
.glos-e{margin:0 0 7px;padding-left:2px;font-size:13px;line-height:1.45;
  color:#D6DCE8}
.glos-p{margin:0 0 12px;padding-left:2px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.58)}

/* =====================================================================
   O EXPANDIR e o PULAR
   ===================================================================== */
.expandir{display:flex;align-items:center;gap:9px;width:100%;margin-top:8px;
  padding:11px 13px;border-radius:14px;cursor:pointer;
  background:rgba(255,255,255,.05);
  border:1px dashed rgba(255,255,255,.24);color:#C7D0E0;
  font:inherit;-webkit-tap-highlight-color:transparent}
.expandir:active{background:rgba(255,255,255,.10)}
.exp-mais{flex:0 0 auto;min-width:34px;padding:3px 7px;border-radius:9px;
  background:#FF5B4A;color:#fff;font:900 13px Inter,sans-serif;text-align:center}
.exp-tx{font:700 13px Inter,sans-serif;color:rgba(255,255,255,.72);
  text-align:left}

.pular{display:block;margin:7px 0 0;padding:6px 0;border:0;background:none;
  color:rgba(255,255,255,.40);font:600 13px Inter,sans-serif;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.pular:active{color:rgba(255,255,255,.7)}
/* quando ativo, o pular deixa de ser link e vira estado marcado — senão
   a pessoa não sabe se a recusa foi registrada */
.pular.on{color:#FFC53D;text-decoration:none;font-weight:800}
.pular.on::before{content:'✓ ';font-weight:900}

/* =====================================================================
   O RETORNO DO INTERSTÍCIO — fato, dica ou informação acionável
   O centro do quadro é protegido pelo shader (fx.js mantém a zona do
   meio escura), então texto branco aqui é legível por construção.
   ===================================================================== */
.mfato{display:none;text-align:left;margin:0 0 16px;padding:14px 16px;
  border-radius:15px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);border-left:4px solid #FFC53D}
.mfato.on{display:block;animation:mfEntra .3s cubic-bezier(.16,1,.3,1)}
/* estado final é o padrão — se a animação não rodar, o fato aparece igual
   (05-LICOES.md §1.1) */
@keyframes mfEntra{from{opacity:0;transform:translateY(8px)}}
.mf-selo{display:block;margin-bottom:6px;
  font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.13em;
  color:#FFC53D}
.mf-t{display:block;font:600 13px/1.44 Inter,system-ui,sans-serif;color:#fff}
.mf-f{display:block;margin-top:8px;
  font:13px/1.3 'IBM Plex Mono',monospace;letter-spacing:.07em;
  color:rgba(255,255,255,.5);text-transform:uppercase}

/* =====================================================================
   "O QUE PASSOU LONGE DE VOCÊ" — só na tela final, depois do selo
   Nomear o que a pessoa não marcou é comparação: durante a coleta
   dispararia o boomerang; aqui é devolutiva.
   ===================================================================== */
/* ⚠ COLISÃO DE NOME DE CLASSE, achada em 24/08.

   Esta caixa é a de "O QUE PASSOU LONGE DE VOCÊ", da tela final. Mas os
   chips da barra de progresso também marcam os passos futuros com a classe
   `falta` — e herdavam daqui borda, raio e 16px de padding em volta.

   O efeito media 34px: os passos já feitos tinham 59px de altura e os que
   faltavam, 93. Era exatamente a irregularidade que o Giordano viu na
   captura, e ela não estava em nenhuma regra sobre a barra de progresso —
   estava numa regra sobre outro componente, a mil linhas de distância.

   Escopado pelo bloco onde ele vive. Duas coisas sem relação nenhuma não
   podem responder pelo mesmo seletor. */
.bl .falta,#resumo .falta{border:1px solid rgba(255,197,61,.32);border-radius:14px;
  padding:16px;margin-bottom:14px;text-align:left;
  background:rgba(255,197,61,.07)}
.falta-cab{font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.11em;
  color:#FFC53D;margin-bottom:9px}
.falta-p{margin:0 0 10px;font-size:13px;line-height:1.4;
  color:rgba(255,255,255,.78)}
.falta-l{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.falta-i{padding:5px 10px;border-radius:9px;background:rgba(255,197,61,.16);
  border:1px solid rgba(255,197,61,.3);
  font:800 13px Inter,system-ui,sans-serif;color:#FFE3A0}
.falta-n{margin:0;font-size:13px;line-height:1.42;
  color:rgba(255,255,255,.55)}


/* =====================================================================
   O BOTÃO DE VOLTAR — estava apagado demais
   "O botão de voltar tá muito apagado." Estava: contorno e ícone em
   rgba baixo sobre fundo escuro. Voltar é uma das duas ações permanentes
   da barra superior; se ela não se lê, a pessoa acha que não pode voltar.
   ===================================================================== */
.voltar{background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#FFFFFF !important;opacity:1 !important}
.voltar svg{stroke:#FFFFFF !important;opacity:1 !important}
.voltar:active{background:rgba(255,255,255,.24) !important;transform:scale(.92)}

/* =====================================================================
   O MENU DE APROFUNDAMENTO
   ===================================================================== */
.menuop{display:flex;flex-direction:column;gap:7px}
.mo{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;
  border-radius:14px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;
  transition:background .16s,border-color .16s}
.mo:active{background:rgba(255,255,255,.13)}
.mo.visto{border-color:rgba(34,197,94,.42);background:rgba(34,197,94,.09)}
.mo-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.mo-rot{font:800 13px/1.2 Inter,system-ui,sans-serif;color:#fff}
.mo-n{font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.03em;
  color:rgba(255,255,255,.5)}
.mo.visto .mo-n{color:#8FD9A8}
.mo-seta{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font:800 13px Inter,sans-serif;
  background:rgba(255,255,255,.10);color:rgba(255,255,255,.7)}
.mo.visto .mo-seta{background:rgba(34,197,94,.22);color:#5BE58A}
.menuop-pe{margin:14px 0 0;text-align:center;
  font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.05em;
  color:rgba(255,255,255,.42)}
.menuop-pe:empty{display:none}

/* o pular, também no rodapé das telas de inventário */
.pular-tela{display:block;width:100%;margin:14px 0 0;padding:10px;
  border:0;background:none;color:rgba(255,255,255,.45);
  font:600 13px Inter,system-ui,sans-serif;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.pular-tela:active{color:rgba(255,255,255,.8)}

/* =====================================================================
   O MERGULHO — três telas

   A régua ausente→vanguarda aparece em todas: é o que a pessoa está
   descobrindo sobre si, e tem de estar sempre visível.
   ===================================================================== */

/* ---- a régua dos degraus ---- */
.mg-degrauzinho{display:flex;align-items:center;gap:3px;flex-wrap:wrap;
  margin:0 0 18px;padding:9px 11px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.mg-degrauzinho i{color:rgba(255,255,255,.22);font-style:normal;font-size:13px}
.mgd{font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.28);white-space:nowrap}
.mgd.on{color:var(--c)}

/* ---- tela 1 · as quatro famílias ---- */
.mg-fams{display:flex;flex-direction:column;gap:9px}
.mgf{display:flex;flex-direction:column;gap:5px;width:100%;
  padding:14px 15px 12px;border-radius:16px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-left:4px solid var(--c);color:inherit;font:inherit;
  -webkit-tap-highlight-color:transparent;transition:background .16s}
.mgf:active{background:rgba(255,255,255,.12)}
.mgf-cab{display:flex;align-items:baseline;gap:9px;justify-content:space-between}
.mgf-nome{font:900 15px/1.15 Inter,system-ui,sans-serif;color:#fff}
.mgf-deg{flex:0 0 auto;padding:3px 8px;border-radius:8px;
  font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c);background:rgba(255,255,255,.07)}
.mgf-perg{font:600 13px/1.35 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.66)}
.mgf-pe{font:600 13px 'IBM Plex Mono',monospace;letter-spacing:.04em;
  color:rgba(255,255,255,.4)}
.mg-nota{margin:16px 0 0;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.45)}

/* ---- tela 2 · uma família ---- */
.mg-voltar{display:block;width:fit-content;padding:7px 0;border:0;background:none;
  color:rgba(255,255,255,.6);font:700 13px Inter,system-ui,sans-serif;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.mg-voltar:active{color:#fff}
.mg-gs{display:flex;flex-direction:column;gap:7px}
.mgg{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;
  border-radius:14px;cursor:pointer;text-align:left;color:inherit;font:inherit;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  -webkit-tap-highlight-color:transparent}
.mgg:active{background:rgba(255,255,255,.12)}
.mgg-l{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.mgg-nome{font:800 13px/1.25 Inter,system-ui,sans-serif;color:#fff}
.mgg-deg{font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c)}
.mgg-prox{margin-top:2px;font:600 13px/1.35 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.5)}
.mgg-seta{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font:800 13px Inter,sans-serif;
  background:rgba(255,255,255,.10);color:var(--c)}

/* ---- tela 3 · uma camada ---- */
.mg-cel .disco{background:rgba(255,255,255,.07) !important;box-shadow:none !important}
/* a célula de PRÁTICA não tem ícone de conceito — o nome é a pergunta, e
   ela é longa. Vira linha, não quadradinho. */
.mg-cel .nm{min-height:34px !important}

.mg-arts{display:flex;flex-direction:column;gap:14px}
.mg-art{padding:14px;border-radius:15px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.mg-art[data-n="3"],.mg-art[data-n="4"]{background:rgba(34,197,94,.09);
  border-color:rgba(91,229,138,.28)}
.mg-art-p{margin:0 0 11px;font:700 13px/1.42 Inter,system-ui,sans-serif;
  color:#E8ECF4}
.mg-art-est{justify-content:flex-start;margin-bottom:4px}
.mg-art-est .st{width:38px;height:38px;font-size:22px}
.mg-art-rot{display:block;min-height:15px;margin-bottom:8px;
  font:600 13px 'IBM Plex Mono',monospace;color:rgba(255,255,255,.5)}
.mg-art-tx{min-height:64px}

/* ---- o convite de descida ---- */
.mg-desce{display:flex;align-items:center;gap:11px;width:100%;margin-top:16px;
  padding:14px 15px;border-radius:15px;cursor:pointer;text-align:left;
  color:inherit;font:inherit;background:rgba(34,197,94,.11);
  border:1px solid rgba(34,197,94,.36);
  -webkit-tap-highlight-color:transparent;
  animation:desceEntra .28s cubic-bezier(.16,1,.3,1)}
/* estado final é o padrão — 05-LICOES.md §1.1 */
@keyframes desceEntra{from{opacity:0;transform:translateY(8px)}}
.mg-desce:active{background:rgba(34,197,94,.2)}
.mgd-selo{flex:0 0 auto;padding:4px 9px;border-radius:9px;background:#22C55E;
  color:#062012;font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.09em}
.mgd-t{font:700 13px/1.38 Inter,system-ui,sans-serif;color:#C8F5D8}
.mg-trava{margin:16px 0 0;padding:12px 14px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18);
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.55)}

/* ---- a exteriorização: o degrau de vanguarda ---- */
.mg-ext{margin-top:16px;padding:14px 15px;border-radius:15px;
  background:rgba(255,197,61,.09);border:1px solid rgba(255,197,61,.34)}
.mg-ext-p{margin:0 0 11px;font:600 13px/1.42 Inter,system-ui,sans-serif;
  color:#FFE3A0}
.mg-ext-bt{padding:10px 14px;border-radius:11px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,197,61,.5);color:#FFC53D;
  font:800 13px Inter,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent}
.mg-ext-bt.on{background:#FFC53D;color:#2A1D00;border-color:#FFC53D}

/* =====================================================================
   O RETRATO DOS DEGRAUS — na tela final
   ===================================================================== */
.deg{border:1px solid rgba(255,255,255,.16);border-radius:14px;
  padding:16px;margin-bottom:14px;text-align:left;
  background:rgba(255,255,255,.03)}
.deg-cab .mono{color:rgba(255,255,255,.5);font-size:13px;
  letter-spacing:.09em;margin-bottom:9px}
.deg-cab p{margin:0 0 8px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.8)}
.deg-diz{font-style:italic;color:rgba(255,255,255,.6) !important}
.deg-f{margin-top:14px}
.deg-f-cab{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding-bottom:6px;margin-bottom:5px;
  border-bottom:2px solid var(--c)}
.deg-f-nome{font:900 13px Inter,system-ui,sans-serif;color:#fff}
.deg-f-d{font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.07em;
  text-transform:uppercase;color:var(--c)}
.deg-g{display:flex;align-items:baseline;justify-content:space-between;
  gap:9px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.deg-g[data-d="0"]{opacity:.5}
.deg-g-n{font-size:13px;line-height:1.3;color:rgba(255,255,255,.75)}
.deg-g-d{flex:0 0 auto;font:800 13px 'IBM Plex Mono',monospace;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.deg-pe{margin:16px 0 0;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.45)}

/* ---- 1.2 · minutos declarados ---- */
.catcab{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:14px}
.catmin{flex:0 0 auto;padding:3px 8px;border-radius:8px;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);
  font:700 13px 'IBM Plex Mono',monospace;letter-spacing:.06em}
.mmin{margin:4px 0 0;font:700 13px 'IBM Plex Mono',monospace;
  letter-spacing:.05em;color:rgba(255,255,255,.45)}

/* ---- 1.6 · contador de n ao vivo, na capa ---- */
.contador{display:none;margin:0 0 14px;font-size:13px;
  color:rgba(255,255,255,.72)}
.contador.on{display:block}
.contador b{font-weight:900;color:#fff}

/* =====================================================================
   FASE B — depois do selo
   ===================================================================== */
.fb-passo{margin:0 0 10px;font:800 13px 'IBM Plex Mono',monospace;
  letter-spacing:.11em;text-transform:uppercase;color:#FF8A7A}
.fb-tit{margin:0 0 8px;font:900 19px/1.22 Inter,system-ui,sans-serif;color:#fff}
.fb-tit b{color:#FFC53D}
.fb-sub{margin:0 0 16px;font-size:13px;line-height:1.48;
  color:rgba(255,255,255,.7)}
.fb-nota-p{margin:16px 0 0;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.45)}

/* a fila de 0 a 10 — toque único, sem arrastar (Funke 2016: slider dá
   OR 6,9 para abandono) */
.fb-fila{display:flex;gap:2px;flex-wrap:nowrap;margin-bottom:5px}
.fb-f{flex:1 1 0;min-width:0;height:44px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.72);font:800 13px Inter,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent}
.fb-f.on{background:#FFC53D;border-color:#FFC53D;color:#2A1D00}
.fb-fila-pes{display:flex;justify-content:space-between;margin:0 0 18px;
  font:13px 'IBM Plex Mono',monospace;color:rgba(255,255,255,.4)}

.fb-porque{margin-top:18px}
.fb-porque label{display:block;margin-bottom:5px;
  font:800 13px Inter,system-ui,sans-serif;color:#E8ECF4}
.fb-porque-n{margin:0 0 8px;font-size:13px;line-height:1.42;
  color:rgba(255,255,255,.5)}

/* os itens objetivos */
.fb-cod{margin:0 0 14px;padding:13px;border-radius:12px;overflow-x:auto;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.12);
  font:13px/1.5 'IBM Plex Mono',ui-monospace,monospace;color:#D6DCE8;
  white-space:pre}
.fb-ops{display:flex;flex-direction:column;gap:7px}
.fb-op{padding:13px 14px;border-radius:13px;cursor:pointer;text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  color:#D6DCE8;font:600 13px/1.4 Inter,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent}
.fb-op:disabled{cursor:default;opacity:.55}
.fb-op.on{border-color:#FFC53D;background:rgba(255,197,61,.12);color:#fff;
  opacity:1}
.fb-op.certa{border-color:#22C55E;background:rgba(34,197,94,.14);color:#fff;
  opacity:1}
.fb-op.certa::after{content:' ✓';color:#5BE58A;font-weight:900}
.fb-porq{margin-top:14px;padding:14px;border-radius:13px;
  background:rgba(255,255,255,.05);border-left:4px solid #FF8A7A}
.fb-porq.acertou{border-left-color:#22C55E}
.fb-porq-s{display:block;margin-bottom:7px;
  font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.1em;
  text-transform:uppercase;color:#FF8A7A}
.fb-porq.acertou .fb-porq-s{color:#5BE58A}
.fb-porq p{margin:0;font-size:13px;line-height:1.5;color:#D6DCE8}

/* o gap */
.fb-gap{display:flex;align-items:center;gap:12px;margin:0 0 16px;
  padding:16px;border-radius:15px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.13)}
.fb-gap-l{flex:1 1 0;text-align:center}
.fb-gap-l span{display:block;font:13px 'IBM Plex Mono',monospace;
  letter-spacing:.07em;color:rgba(255,255,255,.5);margin-bottom:4px}
.fb-gap-l b{font:900 24px Inter,system-ui,sans-serif;color:#C7D0E0}
.fb-gap-l.destaque b{color:#FFC53D;font-size:28px}
.fb-gap-seta{flex:0 0 auto;font:900 20px Inter,sans-serif;
  color:rgba(255,255,255,.35)}

/* a trilha e o método */
.fb-trilha{margin:0;padding-left:20px}
.fb-trilha li{margin-bottom:12px;font-size:13px;line-height:1.48;
  color:#D6DCE8}
.fb-trilha li::marker{color:#FFC53D;font-weight:900}
.fb-metodo p{margin:0 0 12px;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.72)}
.fb-metodo b{color:#fff}

/* e depois */
.fb-caixa{margin-bottom:14px;padding:15px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.fb-caixa h4{margin:0 0 7px;font:900 13.5px/1.3 Inter,system-ui,sans-serif;
  color:#fff}
.fb-caixa-n{margin:0 0 11px;font-size:13px;line-height:1.45;
  color:rgba(255,255,255,.6)}
.fb-caixa textarea{width:100%}
.fb-sn{display:flex;gap:7px}
.fb-sn .fb-op{flex:1 1 0;text-align:center}
.fb-caixa-ped{background:rgba(23,196,196,.08);
  border-color:rgba(23,196,196,.32)}
.fb-caixa-ped h4{color:#7FE6E6}

/* ---- a ficha do mergulho (regra do inventário) ---- */
.fi-de{margin:0 0 5px;font:800 13px 'IBM Plex Mono',monospace;
  letter-spacing:.1em;text-transform:uppercase;color:#FF8A7A;text-align:center}
.fi-erra{margin:11px 0 0;padding:11px 13px;border-radius:11px;
  background:rgba(255,197,61,.09);border-left:3px solid rgba(255,197,61,.5);
  font-size:13px;line-height:1.48;color:rgba(255,255,255,.76)}
.fi-erra b{display:block;margin-bottom:3px;color:#FFC53D;
  font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.09em;
  text-transform:uppercase}
/* o convite a abrir a ficha, onde não há ícone para clicar */
.mg-saber{display:inline-block;margin:0 0 9px;padding:6px 11px;border-radius:999px;
  cursor:pointer;background:rgba(23,196,196,.11);
  border:1px solid rgba(23,196,196,.34);color:#7FE6E6;
  font:700 13px Inter,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent}
.mg-saber::before{content:'? ';font-weight:900}
/* o ícone da prática não tem símbolo próprio, mas tem de parecer clicável */
.mg-cel .cel-ico{cursor:pointer}
.ico-falta{display:grid;place-items:center;width:100%;height:100%;
  font:900 20px Inter,system-ui,sans-serif;color:rgba(255,255,255,.30)}
/* pergunta longa como título da ficha: corpo de texto, não de cartaz */
.fi-tit.fi-tit-q{font-size:15.5px;font-weight:800;line-height:1.34;
  letter-spacing:-.005em;margin-bottom:13px}

/* =====================================================================
   A DEVOLUTIVA — leitura do que a pessoa marcou + o saber
   ===================================================================== */
.dv{margin:0 0 9px;padding:13px 15px;border-radius:14px;text-align:left;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12)}
.dv:last-child{margin-bottom:0}
.dv-selo{display:block;margin-bottom:6px;
  font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#FFC53D}
.dv-t{margin:0;font-size:13px;line-height:1.46;color:#EDF1F8;font-weight:600}
.dv-s{margin:10px 0 0;padding-top:10px;font-size:13px;line-height:1.48;
  color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.10)}
.dv-f{margin:7px 0 0;font-size:13px;line-height:1.42;
  color:rgba(255,255,255,.45);font-style:italic}
/* a leitura é sobre a pessoa: fica destacada. o saber é sobre o mundo. */
.dv-le{border-left:4px solid #17C4C4;background:rgba(23,196,196,.09)}
.dv-le .dv-selo{color:#7FE6E6}
.dv-fa{border-left:4px solid rgba(255,197,61,.55)}

/* =====================================================================
   O ARQUÉTIPO POR DENTRO
   ===================================================================== */
.arq-nome{margin:0 0 5px;font:900 26px/1.1 Inter,system-ui,sans-serif;
  color:#fff;text-align:center}
.arq-d{margin:0 0 16px;font-size:13px;line-height:1.45;text-align:center;
  color:rgba(255,255,255,.68)}
.arq-sec{margin-bottom:11px;padding:13px 15px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)}
.arq-sec:last-child{margin-bottom:0}
.arq-r{display:block;margin-bottom:7px;
  font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase}
.arq-sec p{margin:0;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.82)}
.arq-sec ul{margin:0;padding-left:18px}
.arq-sec li{margin-bottom:7px;font-size:13px;line-height:1.48;
  color:rgba(255,255,255,.82)}
.arq-sec li:last-child{margin-bottom:0}
/* a força vem primeiro e em verde; o ponto cego não é vermelho — vermelho
   fica reservado para aviso, e ponto cego não é perigo, é informação */
.arq-forte{border-left:4px solid #22C55E;background:rgba(34,197,94,.08)}
.arq-forte .arq-r{color:#5BE58A}
.arq-forte li::marker{color:#22C55E}
.arq-risco{border-left:4px solid #FFC53D;background:rgba(255,197,61,.08)}
.arq-risco .arq-r{color:#FFC53D}
.arq-aprende{border-left:4px solid #17C4C4;background:rgba(23,196,196,.08)}
.arq-aprende .arq-r{color:#7FE6E6}
.arq-viz{border-left:4px solid #7C4DFF;background:rgba(124,77,255,.08)}
.arq-viz .arq-r{color:#B79BFF}
.arq-viz-n{font:900 16px Inter,system-ui,sans-serif!important;
  color:#fff!important;margin-bottom:6px!important}
.arq-nota{margin-top:9px!important;font-size:13px!important;
  color:rgba(255,255,255,.5)!important;line-height:1.42!important}
.arq-fato{border-left:4px solid rgba(255,255,255,.3)}
.arq-fato .arq-r{color:rgba(255,255,255,.62)}

/* =====================================================================
   O RESTO DO QUE A GENTE ACHOU
   ===================================================================== */
.sb-int{margin:0 0 14px;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.62)}
.sb-g{margin-bottom:8px;border-radius:13px;overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11)}
.sb-g summary{padding:13px 15px;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:9px;
  font:800 13px Inter,system-ui,sans-serif;color:#EDF1F8;
  -webkit-tap-highlight-color:transparent}
.sb-g summary::-webkit-details-marker{display:none}
.sb-g summary::after{content:'+';margin-left:auto;flex:0 0 auto;
  font:900 17px Inter,sans-serif;color:rgba(255,255,255,.45)}
.sb-g[open] summary::after{content:'−'}
.sb-g summary i{flex:0 0 auto;padding:2px 7px;border-radius:999px;
  background:rgba(255,197,61,.16);color:#FFC53D;font-style:normal;
  font:900 13px 'IBM Plex Mono',monospace}
.sb-i{padding:0 15px 13px;border-top:1px solid rgba(255,255,255,.07)}
.sb-i:first-of-type{border-top:none}
.sb-t{margin:12px 0 0;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.85)}
/* o corpo do arquétipo herdava text-align:center do .bl. Centralizar
   parágrafo de quatro linhas obriga o olho a procurar o início de cada
   linha — o nome fica centrado, o texto não. */
.arq-sec{text-align:left}
.arq-sec p,.arq-sec li{text-align:left}
.arq-viz-n{text-align:left}
.sb-int,.sb-t,.sb-i .dv-f{text-align:left}

/* O título da capa mudou de "Censo da Fluência" (8+8 letras) para
   "Mapa de Autoconhecimento em IA" — e "Autoconhecimento" tem 16. No corpo
   do título antigo ela estourava a largura. Corpo próprio, e a palavra
   longa numa linha só. Medido no navegador. */
/* ⚠ #t-intro .tit-jogo (id+classe) vence .tit-jogo.tit-longo (classe+classe)
   por especificidade. Sem o #t-intro aqui a regra não pega — é a lição
   §2.3, que já custou três sessões. */
/* Primeira tentativa: 9.2vw com a palavra longa a .72em. O Giordano:
   "Nome autoconheicmento muito pequeno" — e ele estava certo, porque a
   palavra que CARREGA o nome ficava menor que as duas que a cercam, o que
   inverte a hierarquia. Medido no navegador: a 9.2vw ela ocupava 286px de
   390, sobrando 100px sem uso. Agora a palavra longa manda no tamanho, e
   as curtas é que sobem junto. */
/* O nome passou a ser "Meu Mapa de IA" em 24/08 e a regra `tit-longo` saiu
   junto com o nome longo que a exigia.

   Fica o achado, porque ele vale para o próximo nome que alguém propuser:
   uma palavra de 16 letras não passa de ~32px de corpo numa tela de 390,
   enquanto uma de 7 cabe em 45. Se as palavras do título têm comprimentos
   muito diferentes, ou todas descem ao tamanho da maior, ou a maior fica
   menor que as outras — e aí a palavra que carrega o nome vira a menor da
   frase. Nome de produto para tela pequena se escolhe com essa régua. */

/* o terceiro nível: qual plano, dentro da ficha e opcional */
.fi-plano{margin-top:15px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.12)}
.fi-plano-r{margin:0 0 9px;font:800 13px Inter,system-ui,sans-serif;
  color:#E8ECF4;text-align:left}
.fi-plano-r i{font-style:normal;font-weight:600;color:rgba(255,255,255,.42);
  font-size:13px}
.fi-plano-ops{display:flex;flex-wrap:wrap;gap:6px}
.fi-pl{padding:8px 12px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.75);font:700 13px Inter,system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent}
.fi-pl.on{background:#17C4C4;border-color:#17C4C4;color:#04262A}

/* ---------------------------------------------------------------------
   MENOS INTERFACE, MAIS FIGURA (24/08/2026)

   O Giordano: "Interface ocupando tanto espaco q nem se veem mais as
   figuras". Medido antes de mexer: em q2_ferram, o primeiro ícone
   começava a 550px de uma tela de 844 — 65% de interface. A causa não era
   uma coisa grande, eram cinco pequenas repetidas em toda página.

   Da segunda página em diante o título encolhe e o medidor vira linha. A
   pessoa já sabe onde está; o que ela precisa ver é o inventário.
   --------------------------------------------------------------------- */
.title.title-pg{font-size:15px;line-height:1.24;opacity:.86}
.medidor.medidor-fino{padding:5px 12px;min-height:0;gap:8px;
  border-radius:999px;align-items:baseline}
.medidor.medidor-fino .n{font-size:19px;line-height:1}
.medidor.medidor-fino .d{font-size:13px}
/* A dica gastava 102px e o cabeçalho de família 79. Somados, 181px de uma
   tela de 844 — mais que o dobro do que o inventário mostrava de figura na
   primeira dobra. Texto mais curto e respiro menor; o que ela diz continua
   inteiro. */
.dica{padding:10px 13px;font-size:13px;line-height:1.42}
.pgcab{padding:9px 13px;margin-bottom:12px}
.pgcab-rot{font-size:15px;line-height:1.16}
.pgcab-n{font-size:13px}

/* ---------------------------------------------------------------------
   CARTÕES DA MESMA ALTURA (24/08/2026)

   O Giordano: "botoes quebrados nas telas de inicio de secao (texto muito
   grande deixando uns maiores q outros)". Medido: 92px nas duas primeiras
   linhas da grade e 96px na terceira.

   A causa não era o cartão — era o NOME. Em grid, a linha inteira estica
   até o item mais alto dela, e "Hugging Face" e "Crédito de API" quebram
   em duas linhas na largura de 89px enquanto "ChatGPT" cabe em uma. Uma
   linha da grade ficava 4px mais alta que as outras, e o degrau aparece.

   Reservar a altura de duas linhas para TODO nome resolve na origem: o
   texto quebrando ou não deixa de mudar a caixa. Custa 14px por cartão e
   entrega uma grade que não tem degrau — que é o que faz a coisa parecer
   inventário e não formulário. */
.it:not(.cel) .nm{
  min-height:2.3em;          /* duas linhas reservadas, quebre ou não */
  display:flex; align-items:flex-start; justify-content:center;
  text-align:center; line-height:1.15;
  overflow-wrap:anywhere;    /* nunca hifenizar: "GitHub Stu-dent" era feio
                                e ilegível — a palavra quebra inteira */
  hyphens:none;
}
/* a linha que separa uma família da vizinha. Sem ela o rótulo não
   classifica: "construir app conversando" descreve o que o Claude Code faz
   também, e quem responde não sabe onde marcar. */
.pgcab-dif{display:block;margin-top:4px;font-size:13px;line-height:1.38;
  color:rgba(255,255,255,.58);font-weight:500}
/* pips embaixo, não ao lado: a linha que separa a família da vizinha
   estava espremida em meia largura — três linhas de duas palavras. */
.pgcab{flex-direction:column;align-items:stretch;gap:8px}
.pgcab-l{width:100%}
.pgcab-pips{width:100%;justify-content:flex-start}

/* ---------------------------------------------------------------------
   O MAPA NO CELULAR (24/08/2026)

   O Giordano: "Capa de cada secao, com o 'onde voce esta' continua sem
   mostrar a imagem qdo esta no celular".

   Medido em 390x844: o tabuleiro ficava em y=229..615 e o texto, absoluto
   e colado embaixo, começava em 551 — cobria os últimos 64px do mapa e
   deixava 229px de VAZIO PRETO no topo. Em 360x640 o mesmo, proporcional.

   A causa: `#board` é centralizado na .mw, que é a tela inteira, enquanto
   `.mtxt` é `position:absolute;bottom:0` e não participa dessa conta. Os
   dois se ignoram. E piorou quando a devolutiva entrou, porque ela fez o
   .mtxt crescer — quanto mais coisa boa embaixo, mais do mapa sumia.

   Conserto: o mapa deixa de ser absoluto e a coluna FLUI. Tabuleiro em
   cima, texto embaixo, um empurrando o outro. Assim o texto pode crescer à
   vontade sem nunca comer a imagem.
   --------------------------------------------------------------------- */
/* ⚠ SEGUNDA CORREÇÃO, 24/08 · o botão saía da tela no celular.

   A primeira versão disto consertou o vazio no topo fazendo a coluna
   inteira ROLAR. Medido depois, numa altura real de celular com barra de
   endereço (390x664, e não os 844 do simulador): o texto ia de 263 a 853 e
   o botao SEGUIR ficava em y=796, ou seja 132px ABAIXO da tela. A pessoa
   tinha de rolar para achar o botão — e ao rolar, o mapa subia e sumia.
   "Como se houvesse dado um scroll na tela", que foi exatamente o relato.

   Piorou porque a devolutiva, que entrou depois, engordou o texto: 590px
   só ela. Quanto mais coisa boa embaixo, mais longe o botão.

   A estrutura certa para celular tem três zonas, e não uma coluna só:
     mapa    encolhe quando falta altura, mas nunca some
     texto   rola, e é o único que rola
     botão   GRUDADO no fim, sempre visível, sem depender de rolagem
   `position:sticky` resolve o terceiro sem mexer no DOM. */
#t-mapa .mw{
  display:flex; flex-direction:column; justify-content:flex-start;
  gap:0; overflow:hidden;
  padding:calc(10px + var(--st)) 14px 0}
#t-mapa #board{
  position:relative !important; left:auto !important; top:auto !important;
  transform:none !important;
  flex:0 1 auto; width:100%; margin:0 auto 4px;
  aspect-ratio:4/3; height:auto;
  /* teto em vh: numa tela baixa o mapa cede altura ANTES do texto, porque
     entre ver o mapa inteiro e alcançar o botão, o botão ganha */
  max-height:min(46vh, 340px)}
#t-mapa .estacoes{position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important}
#t-mapa .mtxt{
  position:relative !important; left:auto; right:auto; bottom:auto;
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  padding:14px 4px 0; background:none !important}
/* o botão gruda no fim da área que rola: some do caminho do texto e nunca
   sai do alcance do polegar */
#t-mapa .mtxt .btn{
  position:sticky; bottom:0; z-index:5; flex:0 0 auto;
  margin-top:auto; margin-bottom:calc(10px + var(--sb))}
/* O texto passa por baixo do botão e era cortado a seco no meio de uma
   palavra. A sombra para CIMA dissolve as últimas linhas em vez de
   guilhotiná-las, e diz sem palavra nenhuma que há mais coisa ali. */
#t-mapa .mtxt .btn{box-shadow:0 -20px 20px -8px #0B1220,
  0 -40px 26px -22px #0B1220, 0 8px 20px rgba(0,0,0,.5)}
#t-mapa .mtxt::after{content:'';display:block;flex:0 0 auto;
  height:calc(4px + var(--sb))}
@media (max-height:700px){
  #t-mapa #board{max-height:34vh}
  #t-mapa .mtxt{padding-top:10px}
}
/* 1.5 · a raridade do arquétipo, quando há amostra para ela */
.arq-raro{margin:0 0 14px;padding:10px 13px;border-radius:12px;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.78)}
.arq-raro b{color:#FFC53D;font-weight:900}
.arq-raro-n{display:block;margin-top:4px;font:13px 'IBM Plex Mono',monospace;
  color:rgba(255,255,255,.42)}

/* ---------------------------------------------------------------------
   OS TRÊS ESTADOS DO ACESSO (24/08/2026)

   0 · não uso   ·   1 · uso o gratuito   ·   2 · tenho pago

   Dois canais para o mesmo valor, porque WCAG 2.2 §1.4.1 proíbe cor como
   único portador: o gratuito ganha contorno e a marca ✓; o pago ganha
   preenchimento e a marca ★. Quem não distingue as cores lê os símbolos.
   --------------------------------------------------------------------- */
.it.tog[data-n="1"]{border-color:rgba(23,196,196,.55);
  background:rgba(23,196,196,.10)}
.it.tog[data-n="1"] .nm{color:#7FE6E6 !important}
.it.tog[data-n="2"]{border-color:#FFC53D;background:rgba(255,197,61,.15)}
.it.tog[data-n="2"] .nm{color:#FFD873 !important;font-weight:800 !important}
.it.tog[data-n="2"] .disco{box-shadow:0 0 0 2px rgba(255,197,61,.5)}
/* o selo, que é o segundo canal */
.it.tog{position:relative}
.it.tog[data-n="1"]::after,.it.tog[data-n="2"]::after{
  position:absolute;top:6px;right:8px;font:900 13px Inter,system-ui,sans-serif;
  line-height:1}
.it.tog[data-n="1"]::after{content:'✓';color:#7FE6E6}
.it.tog[data-n="2"]::after{content:'★';color:#FFC53D}
/* ---------------------------------------------------------------------
   A LEGENDA DO CICLO, e o estado por extenso na célula (25/08/2026)

   O Giordano leu "1 toque · uso o gratuito / 2 toques · tenho pago /
   3 toques · não uso" e perguntou: "O maximo eh ficar pela metade? A
   ultima opcao eh voltar pro zero?"

   Contar toques fazia o ciclo parecer escala — e nessa escala o degrau
   mais alto era "não uso", o mínimo vendido como máximo. Agora a legenda
   mostra o ciclo na ordem real, partindo do repouso, e diz em voz alta
   que ele volta ao começo. O estado de cada célula virou PALAVRA: o
   canal que ninguém precisa aprender a ler.
   --------------------------------------------------------------------- */
.leg.tres{display:flex;flex-direction:column;gap:3px;margin-bottom:11px;
  font:13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.58)}
.leg.tres .ci{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  justify-content:flex-start;text-align:left;line-height:1.3}
.leg.tres b{color:rgba(255,255,255,.8);font-weight:700}
.leg.tres i{font-style:normal;font-weight:900;margin-right:2px}
.leg.tres .z{color:rgba(255,255,255,.5)}
.leg.tres .g{color:#7FE6E6}
.leg.tres .g i{color:#7FE6E6}
.leg.tres .p{color:#FFC53D}
.leg.tres .p i{color:#FFC53D}
.leg.tres .ex{font-size:13px;color:rgba(255,255,255,.56);line-height:1.35;
  text-align:left}
/* o estado por extenso, dentro da célula */
.tg-est{display:block;margin-top:-1px;
  font:800 13px/1 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.58);transition:color .2s}
.it.tog[data-n="1"] .tg-est{color:#7FE6E6}
.it.tog[data-n="2"] .tg-est{color:#FFD873}

/* ---------------------------------------------------------------------
   O TEXTO PEQUENO DEMAIS (24/08/2026)

   O Giordano: "E que o texto embaixo ta com fonte muito pequena?"

   Medido na tela do mapa: CINCO corpos distintos abaixo de 12px — 8,5 /
   9,5 / 10 / 10,5 / 11. O menor era o selo da devolutiva, a 8,5px. Cada um
   deles nasceu "só um pouquinho menor" que o vizinho, e somados viraram
   uma tela que não se lê em pé, segurando o celular com uma mão.

   Piso de 11,5px para rótulo e 12px para qualquer coisa que seja frase.
   --------------------------------------------------------------------- */
.mmin{font-size:13px !important;color:rgba(255,255,255,.6) !important}
#msub,.mtxt .mast{font-size:13px !important;letter-spacing:.08em}
.dv-selo{font-size:13px}
.dv-t{font-size:14px;line-height:1.45}
.dv-s{font-size:13.5px}
.dv-f{font-size:13px;color:rgba(255,255,255,.52)}

/* ---------------------------------------------------------------------
   AS PEÇAS NA TELA DE EXPANSÃO (24/08/2026)

   "Seria como o mapa da ilha, onde a pessoa percebe nitidamente que ainda
   nao explorou tudo se nao responde tudo."

   Cada família mostra as peças que tem dentro. As não marcadas ficam
   apagadas, como as ilhas apagadas do mapa — e pelo mesmo motivo: o que
   falta explorar tem de ser visível, não uma contagem em texto.
   --------------------------------------------------------------------- */
.mo{align-items:flex-start !important;padding:13px 14px !important}
.mo-tx{flex:1 1 auto;min-width:0}
.mo-dif{display:block;margin:3px 0 0;font-size:13px;line-height:1.35;
  color:rgba(255,255,255,.52)}
.mo-pecas{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 7px}
.mo-peca{width:26px;height:26px;border-radius:8px;display:grid;
  place-items:center;flex:0 0 auto;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  opacity:.42;filter:saturate(.35) brightness(.85);transition:.25s}
.mo-peca svg,.mo-peca img{width:15px;height:15px;display:block}
.mo-peca .ico-falta{font-size:13px}
/* peça conquistada: acende, como a ilha acesa */
.mo-peca.on{opacity:1;filter:none;border-color:rgba(255,197,61,.5);
  background:rgba(255,197,61,.13);
  box-shadow:0 0 0 1px rgba(255,197,61,.22),0 2px 8px rgba(255,197,61,.14)}
.mo-n{display:block;margin-top:2px;font-size:13px !important}

/* O PLACAR ÚNICO. Era pequeno (15px) ao lado dos pontos (30px), e o
   Giordano perguntou "cade as moedinhas". Agora ele é O número do topo,
   no corpo que o outro tinha. */
.placar.pecas{display:inline-flex;align-items:baseline;gap:4px;
  margin-left:auto;font:900 26px Inter,system-ui,sans-serif;color:#fff;
  letter-spacing:-.02em}
.placar.pecas .pc-ico{font-size:19px;color:#FFC53D;transform:translateY(-2px);
  text-shadow:0 0 12px rgba(255,197,61,.55)}
.placar.pecas .pc-de{font-size:13px;font-weight:800;
  color:rgba(255,255,255,.66);letter-spacing:0;margin-left:2px}
/* ⚠ `hidden` vem do estilo do navegador e perde para qualquer regra do
   flex acima. O contador de pontos continuava visível ao lado do placar.
   Aqui a regra é explícita e ganha. */
.placar.pecas #pontos,.placar.pecas [hidden]{display:none !important}
/* a moeda entrando: um pulso curto, para o número não mudar em silêncio */
.placar.pecas.ganhou{animation:pcGanha .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pcGanha{0%{transform:scale(1)}38%{transform:scale(1.22)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.placar.pecas.ganhou{animation:none}}

/* a dica do gesto: some depois do primeiro uso, e nunca compete com o
   conteúdo — quem já sabe não precisa dela */
.fi-dica-gesto{margin:9px 0 0;text-align:center;
  font:600 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.38)}
.fi-dica-gesto::before{content:'↔ ';font-weight:900;color:rgba(255,255,255,.3)}
/* a caixa da ficha acompanha o dedo: sem isto o transform não anima */
.fi-in{will-change:transform;touch-action:pan-y}

/* ---------------------------------------------------------------------
   O MAPA DA ILHA DENTRO DA CATEGORIA (25/08/2026)

   As famílias deixam de ser uma lista de quadradinhos e viram REGIÕES
   sobre a ilha da categoria, na posição do prédio que representa cada uma
   na arte. Região visitada acende; fechada fica apagada — a mesma leitura
   do mapa das ilhas, um nível abaixo.
   --------------------------------------------------------------------- */
.ilhamapa{position:relative;width:100%;aspect-ratio:4/3;margin:0 0 16px;
  border-radius:16px;overflow:hidden;background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07)}
/* véu que escurece o que não foi visitado, para o aceso saltar */
/* ⚠ o véu tinha .62 de escuro nas bordas, somado a uma arte já escura —
   a ilha sumia e sobravam bolinhas no vazio, que é o contrário do que a
   peça quer dizer. Aqui o terreno TEM de ser visível: é ele que mostra
   que há mais mundo do que a pessoa visitou. Véu leve e só nas bordas. */
.ilhamapa{filter:brightness(1.45) saturate(1.1)}
.ilhamapa::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%,transparent 45%,rgba(6,10,20,.42) 100%)}
.im-reg{position:absolute;transform:translate(-50%,-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:0;padding:4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.im-p{width:15px;height:15px;border-radius:50%;display:block;
  background:rgba(10,16,28,.72);border:2px solid rgba(255,255,255,.30);
  box-shadow:0 2px 6px rgba(0,0,0,.5);transition:.28s}
.im-r{font:800 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.62);
  text-shadow:0 1px 6px rgba(4,8,16,.95),0 1px 2px rgba(4,8,16,.9);
  max-width:96px;line-height:1.12;text-align:center;
  opacity:0;transform:translateY(-2px);transition:.28s}
/* região visitada: acende, e o nome aparece */
.im-reg.on .im-p{background:#FFC53D;border-color:#fff;
  box-shadow:0 0 0 4px rgba(255,197,61,.22),0 0 14px rgba(255,197,61,.55)}
.im-reg.on .im-r{opacity:1;transform:none;color:#fff}
.im-reg:not(.on) .im-p{animation:imPulsa 2.8s ease-in-out infinite}
@keyframes imPulsa{0%,100%{box-shadow:0 2px 6px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 5px rgba(255,255,255,.10),0 2px 6px rgba(0,0,0,.5)}}
@media(prefers-reduced-motion:reduce){.im-reg:not(.on) .im-p{animation:none}}
.im-leg{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:8px 12px;
  font:700 13px 'IBM Plex Mono',monospace;color:rgba(255,255,255,.82);
  background:linear-gradient(180deg,transparent,rgba(6,10,20,.85) 60%)}


/* O aviso de peça nova cobria a legenda de escala inteira, de ponta a
   ponta. Ele é confirmação, não anúncio: encolhe e sobe perto do placar,
   que é para onde a pessoa vai olhar de qualquer jeito. */
.ganho{font-size:15px !important;padding:7px 15px !important;
  border-radius:999px !important;
  /* ancorado LOGO ABAIXO do cabeçalho: a animação sobe ~40px, e sem
     âncora o aviso saía pela borda de cima da tela */
  top:calc(70px + var(--st)) !important;bottom:auto !important;
  left:50% !important;
  background:linear-gradient(160deg,#FFC53D,#FF9A2F) !important;
  color:#2A1D00 !important;font-weight:900 !important;
  box-shadow:0 6px 18px rgba(255,154,47,.35) !important;
  white-space:nowrap}

/* ---------------------------------------------------------------------
   O FEEDBACK DE AVANÇO (25/08/2026)

   O Giordano, depois que eu tirei os pontos abstratos: "sem ponto, sem
   feedback de avanco, fica MUITO RUIM (...) voce tem que colocar muitas
   animacoes de feedback".

   Ele está certo. O defeito dos pontos era serem abstratos, não
   existirem — e tirar sem repor deixou a travessia muda. Aqui a camada
   volta, amarrada a EXPLORAR e não a responder:

     ◈ peça   verbete aberto  → premia LER
     ⬢ região página visitada → premia ENTRAR

   E o ganho tem de ser SENTIDO, não só contabilizado: a moeda voa do
   ponto onde o dedo estava até o placar. Sem isso o número muda num canto
   da tela enquanto a mão está no outro, e ninguém conecta as duas coisas.
   --------------------------------------------------------------------- */
.moeda-voo{position:fixed;z-index:400;pointer-events:none;
  font:900 26px Inter,system-ui,sans-serif;
  text-shadow:0 0 14px currentColor,0 2px 6px rgba(0,0,0,.5);
  will-change:transform,opacity}

/* dois placares, um ao lado do outro */
.placar.regs{display:inline-flex;align-items:baseline;gap:4px;
  margin-left:auto;font:900 22px Inter,system-ui,sans-serif;color:#fff;
  letter-spacing:-.02em}
.placar.regs .pc-ico{font-size:16px;color:#17C4C4;transform:translateY(-2px);
  text-shadow:0 0 12px rgba(23,196,196,.6)}
.placar.regs .pc-de{font-size:13px;font-weight:800;
  color:rgba(255,255,255,.45);letter-spacing:0;margin-left:2px}
.placar.pecas{margin-left:12px !important}
.placar.regs.ganhou{animation:pcGanha .5s cubic-bezier(.2,1.5,.4,1)}

/* o aviso herda a cor de quem o disparou */
.ganho{--gc:#FFC53D;
  background:linear-gradient(160deg,var(--gc),color-mix(in srgb,var(--gc) 70%,#FF6B2F)) !important;
  color:#20160A !important}

/* ---- e o item RESPONDE ao toque, que é o feedback mais barato e o mais
   sentido: sem isto, marcar uma estrela parece que não aconteceu ---- */
.it.cel{transition:transform .18s cubic-bezier(.2,1.4,.4,1), box-shadow .2s}
.it.cel:active{transform:scale(.96)}
.it.cel[data-n="4"]{box-shadow:0 0 0 1px rgba(255,197,61,.45),
  0 4px 18px rgba(255,197,61,.18)}
/* a estrela recém-acesa dá um salto curto */
.estrelas .st{transition:transform .16s cubic-bezier(.2,1.6,.4,1),color .18s}
.estrelas .st.on{animation:stPula .34s cubic-bezier(.2,1.6,.4,1)}
@keyframes stPula{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
/* a página inteira entra deslizando: diz "mudou de lugar" sem palavra */
#corpo>.grade{animation:gradeEntra .34s cubic-bezier(.2,.9,.3,1)}
@keyframes gradeEntra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* a barra de progresso da categoria pulsa quando avança */
.trilha i.feito{animation:trPulsa .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes trPulsa{0%{transform:scale(1)}40%{transform:scaleX(1.18) scaleY(1.6)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .it.cel,.estrelas .st,#corpo>.grade,.trilha i.feito,.placar.regs.ganhou{
    animation:none !important;transition:none !important}
}

/* ---------------------------------------------------------------------
   A CHEGADA À ILHA (25/08/2026)

   O interstício entre categorias mostrava uma foto genérica em rodízio: a
   pessoa mudava de mundo sem nenhum momento que dissesse isso. Agora ele
   mostra a ilha da PRÓXIMA categoria e a câmera se aproxima — de longe e
   desfocada até a escala real, enquanto o nome entra.
   --------------------------------------------------------------------- */
/* ⚠ A ILHA PRECISA VIR NA FRENTE DO SHADER.
   `#flfoto` tem z-index 0 e o canvas do efeito, z-index 1: a foto entrava
   ATRÁS e a chegada não se via — media-se o padrão vermelho do shader, e
   não a ilha. Na chegada a ordem se inverte, e o shader passa a ser véu
   por cima em vez de parede na frente. */
#flfoto.chegada{background-size:cover;background-position:center 45%;
  transform-origin:center 55%;will-change:transform,filter,opacity;
  z-index:2 !important}
/* ⚠ era `#flash:has(...)`. `:has()` não vale em todo navegador, e onde
   não valia o TEXTO ficava atrás da foto — o interstício mostrava a ilha
   linda e nenhuma palavra. A classe vem do JS, que funciona em todos. */
#flash.chegando #flcv{opacity:.28;mix-blend-mode:screen}
/* ⚠ ARMADILHA DE ESPECIFICIDADE, e ela custou três tentativas.

   Existe em app.css: `#flash>*:not(#flfoto){position:relative;z-index:1}`.
   `:not()` não pesa por si, mas o ARGUMENTO dele pesa — e ali dentro há um
   ID. Então aquela regra vale (2,0,0), enquanto `#flash.chegando
   .fl-conteudo` vale (1,2,0) e PERDE, por mais específica que pareça.

   O sintoma: o conteúdo herdava `position:relative`, saía do
   posicionamento absoluto e ia parar em y=700 numa tela de 664 — o
   interstício mostrava a ilha e nenhuma palavra. Eu ainda piorei ao
   escrever `position:relative` explícito, achando que o z-index precisava.

   `!important` aqui não é preguiça: é a única saída sem reescrever uma
   regra antiga que outras telas usam. */
#flash.chegando .fl-conteudo{
  z-index:3 !important; position:absolute !important; inset:0 !important}
#flash.chegando .fl-num,#flash.chegando .fl-txt,
#flash.chegando .fl-sub,#flash.chegando .fl-cheg{
  text-shadow:0 2px 20px rgba(4,8,16,.95),0 1px 4px rgba(4,8,16,.9)}
/* e uma cortina sob o texto, porque a ilha é clara demais para ler em cima */
#flfoto.chegada::after{background:linear-gradient(180deg,
  rgba(6,10,20,.28) 0%, rgba(6,10,20,.55) 45%, rgba(6,10,20,.86) 100%) !important}
.fl-cheg{font:800 13px 'IBM Plex Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:10px;
  text-shadow:0 2px 12px rgba(4,8,16,.9)}
@media(prefers-reduced-motion:reduce){
  #flfoto.chegada{animation:none !important}
}

/* ---------------------------------------------------------------------
   O MAPA DO MERGULHO (25/08/2026)

   A arte da ilha foi gerada com quatro boias na superfície, uma de cada
   cor — e são exatamente quatro famílias. Cada boia é uma família, na
   posição em que ela está na imagem.

   Aqui o marcador usa a cor DA FAMÍLIA (--c), não o âmbar padrão: as
   quatro cores já existem no jogo inteiro e na própria arte.
   --------------------------------------------------------------------- */
.ilhamapa.mg-mapa{aspect-ratio:4/3;margin-bottom:18px}
.mg-mapa .im-reg.on .im-p{background:var(--c,#FFC53D);border-color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c,#FFC53D) 26%,transparent),
             0 0 16px color-mix(in srgb,var(--c,#FFC53D) 65%,transparent)}
.mg-mapa .im-d{display:block;margin-top:2px;
  font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c,#FFC53D);
  text-shadow:0 1px 6px rgba(4,8,16,.95)}
/* as boias ficam na faixa de cima da arte: o rótulo desce, para não
   cobrir a própria boia */
.mg-mapa .im-r{max-width:78px}

/* ---------------------------------------------------------------------
   O RÓTULO NO MAPA NÃO PODE COMPETIR COM A ARTE

   Com o piso de fonte em 13px, o nome da região virou um bloco branco
   grande em cima da ilha — legível, e brigando com a imagem que ele
   deveria explicar. A saída não é encolher de volta (o piso existe por
   um motivo): é dar CHÃO ao texto, numa pílula escura, para ele parar de
   depender do que estiver por baixo.
   --------------------------------------------------------------------- */
.ilhamapa .im-r{
  background:rgba(6,10,20,.78);
  padding:3px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  text-shadow:none;max-width:112px}
.ilhamapa .im-reg.on .im-r{background:rgba(6,10,20,.88);
  border-color:rgba(255,255,255,.26)}
.mg-mapa .im-d{background:rgba(6,10,20,.82);padding:2px 7px;
  border-radius:999px;margin-top:3px;font-size:13px;
  border:1px solid color-mix(in srgb,var(--c,#FFC53D) 40%,transparent)}
/* e as quatro boias ficam lado a lado: o rótulo não pode encostar no
   vizinho */
.mg-mapa .im-r{max-width:84px;font-size:13px;line-height:1.1}


/* ---------------------------------------------------------------------
   O DEGRAU É A ILHA (25/08/2026)

   Progresso é o assunto desta tela, e até agora ele era dito por cinco
   bolinhas numeradas — abstratas, iguais entre si. Agora cada degrau
   mostra a ILHA daquela categoria: a visitada a cores, a atual com anel
   dourado, a que falta dessaturada. A pessoa reconhece para onde vai,
   porque já viu aquela imagem na tela de chegada.
   --------------------------------------------------------------------- */
.degraus{gap:6px}
.dg-ilha{position:relative;display:block;width:100%;aspect-ratio:1/.82;
  border-radius:10px;background-size:cover;background-position:center;
  background-color:#12161f;border:1px solid rgba(255,255,255,.12);
  transition:.35s}
/* o número/✓ desce da linha e vira selo no canto da ilha */
.dg-bola{position:absolute;right:-4px;bottom:-5px;
  width:24px;height:24px;border-radius:50%;font-size:13px;
  box-shadow:0 2px 7px rgba(0,0,0,.55)}
.dg-nome{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto;
  margin-top:3px}
/* já visitada: a cores, com o verde de concluído */
.dg-item.feito .dg-ilha{border-color:rgba(34,197,94,.5);
  box-shadow:0 0 0 1px rgba(34,197,94,.2)}
/* onde você está: anel dourado — o mesmo amarelo da seta do tabuleiro */
.dg-item.agora .dg-ilha{border-color:#FFC53D;transform:scale(1.06);
  box-shadow:0 0 0 2px rgba(255,197,61,.3),0 5px 18px rgba(255,197,61,.26)}
/* o que falta: apagado, mas visível — é ele que diz que há mais mundo */
.dg-item.falta .dg-ilha{filter:saturate(.16) brightness(.42);opacity:.8}
.dg-item.falta .dg-bola{background:rgba(255,255,255,.1)}

/* ---------------------------------------------------------------------
   O MAPA DA DESCIDA — dentro de uma família do mergulho (25/08/2026)

   O Giordano: "todas as [telas] da categoria 3 (...) deveriam por
   definicao serem mapas. Responder as perguntas deveria ser navegar pelo
   mapa."

   Dentro de uma família não cabia repetir o arquipélago: a pessoa já está
   nela. O que muda aqui é PROFUNDIDADE. Então o mapa é vertical — boia na
   superfície, grandes perguntas penduradas na corda, cada uma mais funda.
   O gradiente escurece para baixo: é o que a água faz, e é o que mantém
   legível o rótulo do fundo.
   --------------------------------------------------------------------- */
.mg-descida{position:relative;width:100%;aspect-ratio:1/.86;margin:0 0 16px;
  border-radius:14px;overflow:hidden;
  /* a variável é posta pelo JS conforme o ?skin=; o url() literal é o
     fallback para quando a folha carrega antes do script */
  background:#0a0f18 var(--ilha-mergulho, url('assets/ilha-profundidade.webp'))
    center/cover;
  border:1px solid rgba(255,255,255,.1)}
/* a coluna d'água: some com a arte conforme desce e devolve contraste */
.md-agua{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,12,22,.30) 0%, rgba(6,12,22,.62) 34%,
    rgba(4,9,18,.86) 68%, rgba(3,7,14,.95) 100%)}
.md-corda{position:absolute;left:15%;top:14%;bottom:6%;width:2px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,
    rgba(255,255,255,.5) 0 6px, transparent 6px 12px)}
/* a boia: a família, na superfície */
.md-boia{position:absolute;left:15%;top:12%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none}
.md-boia b{width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
  font:900 14px Inter,system-ui,sans-serif;color:#04202a;
  background:var(--c);box-shadow:0 0 0 3px rgba(0,0,0,.4),0 0 14px var(--c)}
.md-boia i{position:absolute;left:calc(100% + 8px);top:50%;
  transform:translateY(-50%);white-space:nowrap;font-style:normal;
  font:800 13px Inter,system-ui,sans-serif;color:var(--c);
  background:rgba(4,9,16,.72);padding:3px 8px;border-radius:6px}
/* cada grande pergunta é uma estação na corda */
.md-est{position:absolute;left:15%;transform:translateY(-50%);
  display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  width:calc(85% - 14px)}
.md-pt{flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  margin-left:-9.5px;display:flex;align-items:center;justify-content:center;
  font:900 13px Inter,system-ui,sans-serif;color:#04202a;
  background:rgba(255,255,255,.26);
  box-shadow:0 0 0 2px rgba(4,9,16,.7);transition:.3s}
.md-rot{font:800 13px/1.18 Inter,system-ui,sans-serif;color:rgba(255,255,255,.8);
  background:rgba(4,9,16,.66);padding:4px 8px;border-radius:7px;
  max-width:calc(100% - 34px)}
.md-dg{font:900 13px Inter,system-ui,sans-serif;color:var(--d);
  background:rgba(4,9,16,.72);padding:3px 7px;border-radius:6px;
  white-space:nowrap}
.md-est.on .md-pt{background:var(--d);box-shadow:0 0 0 2px rgba(4,9,16,.7),0 0 12px var(--d)}
.md-est.on .md-rot{color:#fff}
.md-est:active .md-rot{transform:scale(.97)}
.md-leg{position:absolute;right:9px;bottom:8px;
  font:800 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.62);
  background:rgba(4,9,16,.7);padding:3px 8px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.md-pt{transition:none}}

/* =====================================================================
   O PREENCHIMENTO DO DISCO — a rampa verde, que nunca chegou a aparecer
   (25/08/2026)

   O Giordano: "clica uma vez é gratuito, clica a segunda vez é pago, não
   fica claro o que você precisa fazer. Talvez se você colocar o gratuito
   enchendo até a metade e o pago enchendo tudo fica claro. Além disso
   aquele azul bem clarinho está horroroso."

   Ele apontou o sintoma e o sintoma tinha uma causa que eu não tinha
   visto. Em app.css a COR do preenchimento mora num seletor mais
   específico do que aqui:

     app.css        .it[data-n="2"] .disco::before{background:#CFF3F3}  (0,2,1)
     estilo-jogo    .it .disco::before{background:<rampa verde>}        (0,1,1)

   A ALTURA vinha daqui (o arquivo carrega depois, mesma especificidade),
   mas a COR vinha de lá. Resultado: toda a rampa verde descrita lá em
   cima nunca renderizou — o que se via era a paleta pastel antiga, azul
   #DCE7FF / ciano #CFF3F3 / pêssego #FFE7C2. É o "azul bem clarinho".
   O inventário inteiro estava assim, não só esta pergunta.

   Lição §2.3 outra vez, com uma variante nova: não basta a regra nova vir
   depois. Se a antiga é mais específica NA PROPRIEDADE que importa, ela
   ganha — e o defeito se disfarça, porque metade da regra nova funciona.
   ===================================================================== */
.it[data-n="1"] .disco::before,
.it[data-n="2"] .disco::before,
.it[data-n="3"] .disco::before,
.it[data-n="4"] .disco::before{
  background:linear-gradient(0deg,#0E6B3A,#22C55E 60%,#5BE58A) !important}
/* e o disco vazio nunca é pastel: é o azul-noite do resto do jogo */
.it[data-n="1"] .disco,.it[data-n="2"] .disco,
.it[data-n="3"] .disco,.it[data-n="4"] .disco{
  background:linear-gradient(168deg,#1E2941,#151E31) !important}

/* ---------------------------------------------------------------------
   q5_acesso · TRÊS ESTADOS, e a ALTURA é o que os separa

   A sugestão do Giordano, ao pé da letra: gratuito enche metade, pago
   enche tudo. É o melhor canal possível — posição e comprimento são os
   níveis 1 e 3 de Cleveland & McGill 1984; matiz é o 7.

   O problema anterior era que o "gratuito" não enchia NADA (app.css
   zerava a altura) e o "pago" lavava o disco inteiro de ciano claro. Um
   estado invisível e um estado ilegível.
   --------------------------------------------------------------------- */
.it.tog[data-n="1"] .disco{
  background:linear-gradient(168deg,#1E2941,#151E31) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 0 #0D1424,
    0 0 10px rgba(34,197,94,.24) !important;transform:none !important}
.it.tog[data-n="1"] .disco::before{height:50% !important}
.it.tog[data-n="2"] .disco{
  background:linear-gradient(168deg,#1E2941,#151E31) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 0 #0B5A31,
    0 0 20px rgba(34,197,94,.5) !important;transform:translateY(-2px) !important}
.it.tog[data-n="2"] .disco::before{height:100% !important}
/* o ✓ que o app.css grudava no disco sai: o selo do canto já diz isso, e
   dois ✓ na mesma célula é ruído */
.it.tog[data-n="1"] .disco::after{content:none !important}
/* a marca sobre o preenchimento cheio: escura, senão some no verde */
.it.tog[data-n="2"] .disco svg.marca-real{color:#05301A !important;opacity:1}
/* a meia altura deixa o ícone em cima do limite: contorno escuro para ele
   ler tanto no azul-noite quanto no verde */
.it.tog[data-n="1"] .disco svg.marca-real{color:#EAF2FF !important;opacity:1;
  filter:drop-shadow(0 0 1.5px rgba(3,16,8,.95))
         drop-shadow(0 0 3px rgba(3,16,8,.7)) !important}

/* =====================================================================
   A ESCALA PASSOU A TER CINCO ESTRELAS (25/08/2026)

   O Giordano: "naquela marcação de cinco estrelas deveria ter uma quinta
   estrela (...) e vai até a ferramenta que você é mestre."

   Era 0–4 com quatro estrelas; virou 0–5 com cinco. A coluna que sobe no
   disco tinha degraus de 25% para quatro níveis; com cinco, são de 20%.
   Sem esta correção o nível 5 não existiria e o 4 pararia em 100% —
   dois níveis diferentes com o mesmo disco cheio.
   ===================================================================== */
.it[data-n="1"] .disco::before{height:20% !important}
.it[data-n="2"] .disco::before{height:40% !important}
.it[data-n="3"] .disco::before{height:60% !important}
.it[data-n="4"] .disco::before{height:80% !important}
.it[data-n="5"] .disco::before{height:100% !important;
  background:linear-gradient(0deg,#0E6B3A,#22C55E 60%,#5BE58A) !important}
.it[data-n="5"] .disco{
  background:linear-gradient(168deg,#1E2941,#151E31) !important}
/* o halo e o relevo continuam crescendo com o nível — agora até o 5 */
.it[data-n="3"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
  0 3px 0 #0D1424, 0 0 10px rgba(34,197,94,.22) !important;transform:none}
.it[data-n="4"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
  0 4px 0 #0D1424, 0 0 18px rgba(34,197,94,.40) !important;
  transform:translateY(-1px)}
.it[data-n="5"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
  0 5px 0 #0B5A31, 0 0 26px rgba(34,197,94,.62) !important;
  transform:translateY(-3px) scale(1.06)}
/* a marca precisa ler sobre o disco cheio */
.it[data-n="5"] .disco svg.marca-real{color:#05301A !important;opacity:1}
/* ⚠ CINCO ESTRELAS NUMA CÉLULA DE 116px. Cinco alvos de 24px são 120px, e
   a célula tem 116. A saída NÃO é encolher o alvo: 24px é o mínimo do
   WCAG 2.2 §2.5.8 e é a medida do laboratório visual do FAROL no celular.
   A saída é deixar a fileira sangrar 2px de cada lado para dentro do gap
   de 5px da grade — sobra 1px de folga e o alvo continua inteiro. */
.it.cel .estrelas{margin-left:-2px;margin-right:-2px}
/* ⚠ "estrelinhas podem ficar mais juntas" (Giordano, 25/08). Elas JÁ
   estavam com gap 0 — o que afastava era o glifo pequeno dentro de uma
   caixa de 24px. Aumentar o glifo aproxima as estrelas sem encostar no
   alvo de toque, que continua 24px. Encolher a caixa seria a saída
   errada: derruba o alvo abaixo do mínimo do WCAG 2.2 §2.5.8. */
.it.cel .estrelas .st{font-size:18px}
.es-est i{font-size:16px}

/* =====================================================================
   A TELA DA ESCALA — apresenta os seis degraus antes do inventário
   (25/08/2026)

   O Giordano: "as pessoas vão dar estrelinha de forma genérica" se
   ninguém apresentar o que cada estrela quer dizer. A régua do topo cabe
   em uma linha e por isso não explica; esta tela explica uma vez.
   ===================================================================== */
#escala{position:absolute;inset:0;z-index:70;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(6,9,16,.86);backdrop-filter:blur(4px)}
#escala.on{display:flex}
.es-in{width:100%;max-width:340px;max-height:100%;overflow:auto;
  background:linear-gradient(168deg,#182036,#111827);
  border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:esSobe .34s cubic-bezier(.2,.9,.25,1)}
@keyframes esSobe{from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}}
.es-mast{margin:0 0 4px;font:900 13px 'IBM Plex Mono',monospace;
  letter-spacing:.1em;color:#FF5B4A}
.es-tit{margin:0 0 6px;font:900 20px/1.15 Inter,system-ui,sans-serif;color:#fff}
.es-sub{margin:0 0 14px;font:13px/1.4 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.6)}
.es-l{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.es-i{display:flex;gap:10px;align-items:flex-start}
.es-est{flex:0 0 auto;display:flex;gap:0;padding-top:1px}
.es-est i{width:16px;font:14px/1 Georgia,'Times New Roman',serif;
  font-style:normal;color:rgba(255,255,255,.15)}
.es-est i.on{color:#8FD9A8}
.es-i:last-child .es-est i.on{color:#22C55E;text-shadow:0 0 8px rgba(34,197,94,.6)}
.es-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.es-tx b{font:900 13px/1.2 Inter,system-ui,sans-serif;color:#E8ECF4}
.es-tx span{font:13px/1.3 Inter,system-ui,sans-serif;color:rgba(255,255,255,.56)}
/* o zero é o degrau que o instrumento mais precisa: destacado, não apagado */
.es-i.zero{padding:7px 8px;margin:-2px -8px 2px;border-radius:10px;
  background:rgba(255,197,61,.09);border:1px solid rgba(255,197,61,.22)}
.es-i.zero .es-tx b{color:#FFD873}
.es-ok{width:100%;margin:0}
/* o link que traz a tela de volta, junto da dica */
.dica-mais{display:block;margin-top:7px;padding:0;border:0;background:none;
  font:800 13px Inter,system-ui,sans-serif;color:#7FE6E6;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.es-in{animation:none}}

/* =====================================================================
   O TABULEIRO É FEITO DAS CINCO ILHAS REAIS (25/08/2026)

   O Giordano: "tela de fundo com as várias ilhas ficou ruim. E tem hora
   que ainda mostra a antiga."

   Eram duas coisas ao mesmo tempo. (1) O tabuleiro trazia sete ilhotas
   genéricas de `assets/ilha/N-*.webp` — arte de antes de cada categoria
   ter a sua ilha; é a "antiga". (2) Logo abaixo dele havia a fileira das
   cinco ilhas reais, então a tela tinha DOIS mapas e o nome de cada
   categoria aparecia duas vezes.

   Agora há um mapa só, e ele é feito da arte de verdade. O mar deixou de
   ser a foto do arquipélago velho e virou gradiente: qualquer resto da
   arte antiga por baixo voltaria a ser exatamente o que ele reclamou.
   ===================================================================== */
#board .bg{
  background-image:
    radial-gradient(120% 80% at 50% 12%, rgba(52,102,158,.34), transparent 62%),
    linear-gradient(180deg,#0E2038 0%,#0B1A2E 46%,#07121F 100%) !important;
  background-size:cover !important}
/* a parada: a ilha, o selo do número e o nome */
.est.ilhareal{width:18% !important;aspect-ratio:1/1.28 !important;
  display:flex;flex-direction:column;align-items:center;
  transform:translate(-50%,-50%) scale(.86) !important;opacity:0;
  transition:opacity .45s, transform .45s cubic-bezier(.2,.9,.25,1)}
.est.ilhareal.posta{opacity:1;transform:translate(-50%,-50%) scale(1) !important}
.er-a{position:relative;display:block;width:100%;aspect-ratio:4/3;
  border-radius:9px;background-size:cover;background-position:center;
  background-color:#0d1626;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 12px rgba(0,0,0,.5);transition:.4s}
.er-b{position:absolute;right:-5px;top:-6px;
  width:21px;height:21px;border-radius:50%;display:grid;place-items:center;
  font:900 13px/1 Inter,system-ui,sans-serif;color:#fff;
  background:rgba(255,255,255,.16);box-shadow:0 2px 6px rgba(0,0,0,.6)}
.er-n{margin-top:5px;max-width:112%;text-align:center;
  font:800 13px/1.05 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.55);overflow-wrap:normal;
  hyphens:auto;-webkit-hyphens:auto;
  /* pílula escura: mesmo com a geometria certa, o rótulo cai sobre o mar
     e às vezes sobre a sombra da peça vizinha */
  padding:2px 5px;border-radius:6px;background:rgba(5,11,20,.72)}
/* já visitada: a cores, com o ✓ verde */
.est.ilhareal.feita .er-a{border-color:rgba(34,197,94,.5)}
.est.ilhareal.feita .er-b{background:#1FA85A}
.est.ilhareal.feita .er-n{color:rgba(255,255,255,.78)}
/* onde você está: anel dourado — o mesmo amarelo da seta da rota */
.est.ilhareal.agora .er-a{border-color:#FFC53D;
  box-shadow:0 0 0 2px rgba(255,197,61,.32),0 6px 20px rgba(255,197,61,.3)}
.est.ilhareal.agora .er-b{background:linear-gradient(168deg,#FF7A45,#DB1E2F)}
.est.ilhareal.agora .er-n{color:#fff;font-weight:900}
/* o que falta: apagada, mas visível — é ela que diz que há mais mundo */
.est.ilhareal.falta .er-a{filter:saturate(.14) brightness(.4);opacity:.85}
/* as regras da arte antiga não podem alcançar a parada nova */
.est.ilhareal .ilha,.est.ilhareal .ponto{display:none !important}
.est.ilhareal::after{display:none !important}

/* ---------------------------------------------------------------------
   A TAREFA, dita em linha própria (25/08/2026)

   O Giordano, com print: "está parecendo que são 3 opções de resposta à
   pergunta". Era hierarquia — a grande pergunta terminava em "?" logo
   acima de três cartões, e três cartões sob uma pergunta são alternativas
   até que se diga o contrário. Esta caixa diz o contrário.
   --------------------------------------------------------------------- */
.mg-tarefa{margin:0 0 14px;padding:9px 11px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-left:3px solid #FFC53D}
.mg-tarefa b{display:block;font:900 13px/1.25 Inter,system-ui,sans-serif;
  color:#FFD873;margin-bottom:2px}
.mg-tarefa span{display:block;font:13px/1.35 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.66)}

/* ---------------------------------------------------------------------
   O TERMO TÉCNICO VIRA ETIQUETA (25/08/2026)

   O Giordano: "o termo técnico nem sempre é conhecido desse jeito".
   O cartão passou a mostrar o conceito em linguagem simples; o termo
   continua na tela, menor, porque aprender o nome é parte do valor —
   só deixou de ser a condição para responder.
   --------------------------------------------------------------------- */
.mg-termo{display:block;margin-top:2px;
  font:700 13px/1.15 'IBM Plex Mono',monospace;
  color:rgba(255,255,255,.42);text-align:center;
  overflow-wrap:anywhere}
.it.cel[data-n="4"] .mg-termo,.it.cel[data-n="5"] .mg-termo{
  color:rgba(200,245,216,.62)}
.fi-termo{margin:2px 0 10px;font:13px 'IBM Plex Mono',monospace;
  color:rgba(255,255,255,.5)}
.fi-termo b{color:#7FE6E6;font-weight:700}

/* ---------------------------------------------------------------------
   A TURMA DO LINK, na entrada (25/08/2026)

   O professor distribui `?t=TOKEN`; o servidor resolve e a pessoa
   CONFIRMA aqui. Ela pode recusar, e isso importa: resposta atribuída à
   turma errada é pior que resposta sem turma nenhuma — suja o recorte de
   dois grupos de uma vez.
   --------------------------------------------------------------------- */
/* ⚠ `display:flex` numa CLASSE VENCE o atributo `hidden` (26/08/2026).
   O seletor de classe tem especificidade maior que o `[hidden]{display:none}`
   da folha do navegador — então `el.hidden = true` no JS não escondia nada.

   Resultado, em PRODUÇÃO, para todo mundo que abriu o jogo sem link de
   turma — que é o caminho mais comum de todos: uma pílula vazia de 24px
   com borda, entre o contador e o botão "Começar". Ninguém tinha visto
   porque a caixa vazia não parece defeito, parece espaço.

   Achado ao esconder a turma do professor: eu chamei `el.hidden = true`,
   fotografei, e a caixa continuou lá. */
.turma[hidden]{display:none !important}
.turma{display:flex;flex-direction:column;gap:3px;margin:0 0 14px;
  padding:11px 13px;border-radius:13px;
  background:rgba(23,196,196,.09);border:1px solid rgba(23,196,196,.28);
  border-left:4px solid #17C4C4}
.tu-selo{font:900 13px 'IBM Plex Mono',monospace;letter-spacing:.12em;
  color:#7FE6E6}
.tu-t{font:800 13px/1.3 Inter,system-ui,sans-serif;color:#fff}
.tu-c{font:13px/1.3 Inter,system-ui,sans-serif;color:rgba(255,255,255,.6)}
.tu-bt{align-self:flex-start;margin-top:5px;padding:0;border:0;
  background:none;cursor:pointer;
  font:700 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.55);
  text-decoration:underline;text-underline-offset:3px}
.tu-bt:active{color:#fff}
/* recusada: o aviso continua visível, porque a escolha tem consequência */
.turma.recusada{background:rgba(255,197,61,.08);
  border-color:rgba(255,197,61,.3);border-left-color:#FFC53D}
.turma.recusada .tu-t{color:#FFD873}

/* ---------------------------------------------------------------------
   O REGIME DE DADOS na tela de identificação (25/08/2026)

   O Giordano: "se for abaixo de universidade, não pede e-mail nem nada
   que o identifique (...) não quero confusão". A etapa e a idade mudam o
   formulário, e o aviso abaixo diz o que se perde — sem e-mail não há
   relatório individual, e isso é escolha, não falha.
   --------------------------------------------------------------------- */
.ident-sel{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
    linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:34px}
.ident-lgpd{margin:10px 0 0;padding:9px 11px;border-radius:10px;
  background:rgba(23,196,196,.08);border-left:3px solid rgba(23,196,196,.45);
  font:13px/1.4 Inter,system-ui,sans-serif;color:rgba(255,255,255,.66)}

/* =====================================================================
   A COR DO NÍVEL É AZUL, NÃO VERDE (25/08/2026)

   O Giordano: "na skin A coloque os botões em azul, não verde. Algo que
   combine com o fundo azul das imagens do céu, mar e etc."

   ⚠ VERDE FAZIA DOIS TRABALHOS neste arquivo, e só um deles muda:
     · NÍVEL — o disco que enche, as estrelas, o nome da célula acesa, o
       selo do degrau. É o que o Giordano vê como "os botões", e é o que
       briga com a arte de céu e mar. Vira azul.
     · CONCLUÍDO / CERTO — o ✓ da ilha visitada, a alternativa certa da
       Fase B, o bloco de força do arquétipo. Verde para "feito" é
       convenção forte e não disputa com fundo nenhum. FICA.

   Trocar os dois de uma vez teria apagado a distinção entre "quanto você
   sabe" e "isto está certo", que são coisas diferentes na mesma tela.

   Os tokens abaixo são por SKIN: mudar a cor de uma coleção é uma linha.
   A azul serve às três (a A é mar noturno, a B tem turquesa, e azul
   mineral é token do próprio design system do FAROL, que rege a C).
   ===================================================================== */
:root{
  --niv-fundo:#0B3E73;    /* base da rampa, sobre o azul-noite do disco */
  --niv-meio:#2B8FE6;     /* o azul que carrega a leitura */
  --niv-alto:#7FD4FF;     /* topo, o mais claro */
  --niv-suave:#8FC9F0;    /* estrela acesa, tom calmo */
  --niv-nome:#CFE9FF;     /* nome da célula em nível alto */
  --niv-tinta:#06243F;    /* a marca sobre o disco cheio */
  --niv-halo:43,143,230;  /* rgb do halo, para usar em rgba() */
}
/* a rampa do disco */
.it .disco::before,
.it[data-n="1"] .disco::before,.it[data-n="2"] .disco::before,
.it[data-n="3"] .disco::before,.it[data-n="4"] .disco::before,
.it[data-n="5"] .disco::before{
  background:linear-gradient(0deg,var(--niv-fundo),var(--niv-meio) 60%,var(--niv-alto)) !important}
/* o halo e o relevo crescem com o nível */
.it[data-n="3"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),
  0 3px 0 #0D1424, 0 0 10px rgba(var(--niv-halo),.24) !important}
.it[data-n="4"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
  0 4px 0 #0D1424, 0 0 18px rgba(var(--niv-halo),.42) !important}
.it[data-n="5"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
  0 5px 0 #0A3358, 0 0 26px rgba(var(--niv-halo),.62) !important}
.it[data-n="5"] .disco svg.marca-real{color:var(--niv-tinta) !important}
/* q5_acesso: metade e cheio */
.it.tog[data-n="1"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),
  0 3px 0 #0D1424, 0 0 10px rgba(var(--niv-halo),.26) !important}
.it.tog[data-n="2"] .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),
  0 4px 0 #0A3358, 0 0 20px rgba(var(--niv-halo),.52) !important}
.it.tog[data-n="2"] .disco svg.marca-real{color:var(--niv-tinta) !important}
/* estrelas */
.estrelas .st.on{color:var(--niv-suave)}
.estrelas .st.on.alta{color:var(--niv-meio);
  text-shadow:0 0 8px rgba(var(--niv-halo),.75)}
.es-est i.on{color:var(--niv-suave)}
.es-i:last-child .es-est i.on{color:var(--niv-meio);
  text-shadow:0 0 8px rgba(var(--niv-halo),.6)}
/* a célula em nível alto */
.it.cel[data-n="3"],.it.cel[data-n="4"],.it.cel[data-n="5"]{
  background:rgba(var(--niv-halo),.14);
  border-color:rgba(127,212,255,.34)}
.it.cel[data-n="3"] .nm,.it.cel[data-n="4"] .nm,.it.cel[data-n="5"] .nm{
  color:var(--niv-nome) !important}
.it.cel[data-n="4"] .mg-termo,.it.cel[data-n="5"] .mg-termo{
  color:rgba(207,233,255,.62)}
/* o selo do degrau no mergulho */
.mgd-selo{background:var(--niv-meio) !important;color:#04121F !important}
.mgd-t{color:var(--niv-nome)}
/* os pips, quando existirem */
.it[data-n="4"] .pips i{background:var(--niv-meio) !important;
  box-shadow:0 0 5px rgba(var(--niv-halo),.7)}

/* ---------------------------------------------------------------------
   O ÍCONE EM DESTAQUE, e a barrinha desfeita (25/08/2026)

   Eu tinha medido a estrela em repouso em 1,4:1 e concluído que era ela a
   causa de um aluno não ter percebido que dava para tocar. O Giordano
   corrigiu: "ela não era invisível, não, dava pra ver bem". Ele está no
   aparelho, com a arte da ilha por trás do cartão — o meu cálculo supunha
   fundo chapado. Desfiz as duas coisas que tinha feito: a caixa em volta
   das estrelas ("essa barrinha não ficou legal") e o realce delas.

   O que ele pediu no lugar: o disco do ícone MAIOR, com destaque. Faz
   sentido pela hierarquia — o ícone é a identidade da coisa, e é por ele
   que a pessoa reconhece a ferramenta antes de julgar o próprio nível.

   44 → 58px, e a marca dentro de 27 → 34px. A célula cresce junto; o que
   NÃO cresce é o alvo da estrela, que continua em 24px porque é o mínimo
   do WCAG 2.2 §2.5.8 e cinco delas já ocupam a largura inteira.
   --------------------------------------------------------------------- */
.it.cel .disco{width:58px !important;height:58px !important}
.it.cel .disco svg.marca-real,.it.cel .disco img.ico-conceito{
  width:34px !important;height:34px !important}
/* o "?" acompanha o disco maior, senão vira um ponto perdido na borda */
.it.cel .cel-q{width:21px;height:21px;right:-4px;top:-4px;font-size:13px}
/* e o disco ganha presença: aro sutil que o separa do cartão */
.it.cel .disco{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
  0 3px 0 #0D1424, 0 0 0 1px rgba(255,255,255,.07) !important}

/* ---------------------------------------------------------------------
   O LINK QUE AINDA NÃO TEM INSTRUMENTO (25/08/2026)

   Cobre a tela inteira e não deixa passar. Não é um aviso: é uma parada.
   Deixar o professor responder o instrumento do aluno gravaria dado com
   papel='professor' e conteúdo de aluno — erro que só apareceria na
   análise, quando já não dá para separar.
   --------------------------------------------------------------------- */
#naotem{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(6,9,16,.94);backdrop-filter:blur(6px)}
#naotem.on{display:flex}
.nt-in{max-width:360px;text-align:left}
.nt-mast{margin:0 0 6px;font:900 13px 'IBM Plex Mono',monospace;
  letter-spacing:.1em;color:#7FE6E6}
.nt-tit{margin:0 0 14px;font:900 22px/1.2 Inter,system-ui,sans-serif;color:#fff}
.nt-p{margin:0 0 12px;font:14px/1.5 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.75)}
.nt-cod{margin:14px 0 0;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font:13px 'IBM Plex Mono',monospace;color:#fff;word-break:break-all}

/* o #corpo virou focável (WCAG 2.1.1): o anel de foco só aparece para
   quem navega por teclado, não em toque */
#corpo:focus{outline:none}
#corpo:focus-visible{outline:2px solid rgba(127,230,230,.7);outline-offset:-3px}

/* =====================================================================
   O INSTRUMENTO DO PROFESSOR (26/08/2026)
   spec em specs/instrumento-professor.md · motor-professor.js

   Duas peças: o selo da capa, que diz de quem é o link antes de a pessoa
   clicar, e a tela final dele — que NÃO é a do aluno. Sem arquétipo, sem
   card, sem placar: princípio 2 do FAROL, o dado orienta e não pontua
   pessoas.
   ===================================================================== */

/* ---- o selo da capa -------------------------------------------------
   Sem ele, o professor abre o link e lê a chamada do aluno ("descubra o
   seu perfil"). É a mesma confusão que o link errado causava, com outra
   roupa. */
.selo-papel{display:block;margin:0 0 16px;padding:13px 14px;
  border-radius:13px;text-align:left;
  background:rgba(23,196,196,.09);
  border:1px solid rgba(127,230,230,.30)}
.selo-papel b{display:block;font:900 13px 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.11em;color:#7FE6E6;margin-bottom:3px}
.selo-papel span{display:block;font:14px/1.4 Inter,system-ui,sans-serif;
  color:#fff;font-weight:700}
.selo-papel .sp-p{margin-top:6px;font-weight:400;font-size:13px;
  line-height:1.45;color:rgba(255,255,255,.66)}

/* ---- a tela final --------------------------------------------------- */
.pf-top{margin-bottom:16px;text-align:left}
.pf-selo{font:900 13px 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.11em;color:#7FE6E6;margin-bottom:6px}
.pf-obg{margin:0;font:15px/1.45 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.82)}

.pf-bl{margin:0 0 16px;padding:16px;border-radius:14px;text-align:left;
  background:linear-gradient(168deg,#16203A,#0E1626);
  border:1px solid rgba(255,255,255,.10)}
.pf-cab{font:800 13px 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.08em;color:rgba(127,230,230,.85);margin-bottom:10px}
.pf-p{margin:0 0 10px;font:13px/1.5 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.60)}
.pf-p:last-child{margin-bottom:0}
.pf-p b{color:rgba(255,255,255,.86)}
/* a referência de outra população fica visivelmente à parte: ela NÃO é
   gabarito da resposta dele, e a tipografia tem de dizer isso */
.pf-ref{padding-top:10px;border-top:1px dashed rgba(255,255,255,.14);
  color:rgba(255,255,255,.48)}

.pf-g{margin:0 0 10px;display:flex;align-items:baseline;gap:9px}
.pf-g b{font:900 40px/1 Inter,system-ui,sans-serif;color:#17C4C4;
  font-variant-numeric:tabular-nums}
.pf-g span{font:13px/1.35 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.66)}

.pf-comp{margin:0 0 14px}
.pf-comp:last-child{margin-bottom:0}
.pf-comp-t{font:900 13px 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.06em;color:rgba(255,255,255,.42);
  padding-bottom:5px;margin-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.10)}
.pf-li{display:flex;flex-direction:column;gap:2px;padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.06)}
.pf-li:last-child{border-bottom:0}
.pf-q{font:13px/1.4 Inter,system-ui,sans-serif;color:rgba(255,255,255,.52)}
.pf-r{font:700 13px/1.4 Inter,system-ui,sans-serif;color:#fff}

/* o bloco de privacidade é o único que a pessoa PRECISA ler: ele explica
   por que a regra dela é mais dura que a do aluno (spec §4) */
.pf-priv{background:rgba(255,255,255,.04);
  border-color:rgba(127,230,230,.22)}
.pf-ul{margin:0 0 10px;padding-left:18px}
.pf-ul li{margin-bottom:7px;font:13px/1.5 Inter,system-ui,sans-serif;
  color:rgba(255,255,255,.66)}
.pf-ul li b{color:#fff}
.pf-cod{margin:4px 0 0;padding:11px 13px;border-radius:10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  font:13px 'IBM Plex Mono',ui-monospace,monospace;color:#fff;
  word-break:break-all}


/* ---- glossário: "não avaliado" no lugar das estrelas (auditoria DAT-03) ----
   Herdava a estrela apagada (Georgia, alfa .16): ficava em serifa e quase
   invisível. É informação — a pessoa não avaliou, e isso não é zero. */
.glos-est i.glos-na{font:13px 'IBM Plex Mono',ui-monospace,monospace;
  color:rgba(255,255,255,.48);letter-spacing:.04em;font-style:normal}
/* a linha da fila na Fase B ganhou rótulo mais longo (DAT-02) */
.fb-gap-l span{line-height:1.35}


/* =====================================================================
   A CONTA POR CÓDIGO DE E-MAIL, E A COMUNIDADE (08/09/2026 · migração 022)
   ===================================================================== */
.capa-conta{display:block;margin:10px auto 0;padding:6px 10px;border:0;background:transparent;
  color:rgba(255,255,255,.72);font:600 13px Inter,system-ui,sans-serif;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.capa-conta:hover,.capa-conta:focus-visible{color:#fff}

/* a régua de escolha da ARTE, na capa (09/09/2026). Uma fila que rola de
   lado no celular; cada opção é miniatura + nome; a atual tem a borda
   vermelha do FAROL. Discreta: é acabamento, não a primeira coisa a ler. */
.skins:empty{display:none}
.skins{margin:14px -6px 0;text-align:left}
.skins-rot{font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.55);margin:0 0 6px 6px}
.skins-lista{display:flex;gap:8px;overflow-x:auto;padding:2px 6px 8px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.skins-lista::-webkit-scrollbar{display:none}
.skin-op{flex:0 0 auto;width:96px;padding:0;border:0;background:transparent;
  color:rgba(255,255,255,.8);font:600 13px Inter,system-ui,sans-serif;
  cursor:pointer;scroll-snap-align:start;text-align:center}
.skin-op img{display:block;width:96px;height:72px;object-fit:cover;border-radius:10px;
  border:2px solid rgba(255,255,255,.18);background:#0a0f18;
  transition:transform .15s,border-color .15s}
.skin-op span{display:block;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skin-op:hover img,.skin-op:focus-visible img{border-color:rgba(255,255,255,.6)}
.skin-op.atual img{border-color:#DB1E2F;box-shadow:0 0 0 2px rgba(219,30,47,.35)}
.skin-op.atual{color:#fff}
.skin-op:focus-visible{outline:2px solid #17C4C4;outline-offset:2px;border-radius:12px}
#conta-capa:not(:empty){margin:12px 0 4px}

.conta{margin:14px 0 0;padding:12px 13px;border-radius:12px;text-align:left;
  background:rgba(23,196,196,.08);border:1px solid rgba(127,230,230,.28)}
.ct-cab b{display:block;font:800 13px Inter,system-ui,sans-serif;color:#fff;margin-bottom:3px}
.ct-cab span{display:block;font:13px/1.45 Inter,system-ui,sans-serif;color:rgba(255,255,255,.66)}
.ct-email,.ct-cod{width:100%;margin-top:9px;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.25);color:#fff;
  font:16px Inter,system-ui,sans-serif}
.ct-cod{letter-spacing:.18em;font-variant-numeric:tabular-nums}
.ct-l1,.ct-l2{display:flex;gap:9px;align-items:center;margin-top:9px;flex-wrap:wrap}
/* ⚠ a MESMA armadilha do #turma, de manhã: `display:flex` numa classe vence o
   `[hidden]` do navegador. A linha do código aparecia antes de o código ser
   pedido — visto na foto da tela no ar, com a suíte verde. */
.ct-l2[hidden]{display:none !important}
.ct-l2 .ct-cod{margin-top:0;flex:1 1 140px}
.ct-bt{padding:9px 13px;border-radius:10px;border:1px solid rgba(127,230,230,.5);
  background:rgba(23,196,196,.18);color:#fff;font:700 13px Inter,system-ui,sans-serif;cursor:pointer}
.ct-bt:disabled{opacity:.5;cursor:default}
.ct-msg{font:13px/1.4 Inter,system-ui,sans-serif;color:rgba(255,255,255,.7);flex:1 1 160px}
.ct-msg.ruim{color:#FFB4A8}
.ct-ok b{display:block;font:800 13px Inter,system-ui,sans-serif;color:#7FE6E6}
.ct-ok span{display:block;font:13px/1.4 Inter,system-ui,sans-serif;color:rgba(255,255,255,.66);margin-top:2px}

/* ---- e-mail que veio da conta, e a caixa que convida a entrar ----
   11/09/2026. Quem entrou com Google não digita o e-mail de novo: vê a
   linha de conferência. Quem não entrou vê o convite ANTES do campo. */
.ident-conta-antes{margin:0 0 12px}
.ident-daconta .ident-r .ok-selo{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:rgba(34,197,94,.18);color:#7BE8A4;font:800 13px Inter,system-ui,sans-serif;font-style:normal;letter-spacing:.01em}
.ident-fixo{display:flex;align-items:center;min-height:44px;padding:10px 12px;box-sizing:border-box;
  font:600 15px Inter,system-ui,sans-serif;word-break:break-all}
.ident-outro{border:0;background:transparent;padding:0;margin-left:4px;cursor:pointer;color:inherit;
  font:600 13px Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px}

/* ✓ Conectado no meio do instrumento: flutua, não empurra a pergunta */
.ct-flutua{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(104px + var(--sb,0px));z-index:400;
  max-width:min(92vw,420px);padding:10px 16px;border-radius:999px;
  background:rgba(13,31,22,.96);border:1px solid rgba(34,197,94,.5);box-shadow:0 8px 26px rgba(0,0,0,.38);
  font:13px/1.4 Inter,system-ui,sans-serif;color:rgba(255,255,255,.82);text-align:center;
  transition:opacity .5s ease, transform .5s ease}
.ct-flutua b{color:#7BE8A4;font-weight:800}
.ct-flutua.sai{opacity:0;transform:translateX(-50%) translateY(8px)}

.comu{width:100%;max-width:340px;margin:0 0 18px;padding:16px;border-radius:14px;text-align:left;
  background:linear-gradient(168deg,#16203A,#0E1626);border:1px solid rgba(255,255,255,.10)}
.comu-cab{font:800 13px 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;
  color:rgba(127,230,230,.85);margin-bottom:8px}
.comu-p,.comu-n{margin:0 0 10px;font:13px/1.5 Inter,system-ui,sans-serif;color:rgba(255,255,255,.62)}
.comu-n b{color:rgba(255,255,255,.86)}
.comu-c{display:flex;gap:9px;align-items:center;padding:6px 0;
  font:14px Inter,system-ui,sans-serif;color:#fff;cursor:pointer}
.comu-c input{width:18px;height:18px;accent-color:#17C4C4}
.comu-campos{display:flex;flex-direction:column;gap:8px;margin:8px 0 10px}
.comu-campos input{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.25);color:#fff;font:16px Inter,system-ui,sans-serif}
.comu-pe{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.comu-ok{font:13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.7)}
.comu-ok.ruim{color:#FFB4A8}

.ct-recusa{display:block;margin:10px 0 0;padding:0;border:0;background:transparent;
  color:rgba(255,255,255,.5);font:13px Inter,system-ui,sans-serif;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.ct-recusa:hover{color:rgba(255,255,255,.8)}
.pouso{margin:0 0 12px;padding:10px 13px;border-radius:12px;text-align:left;
  background:rgba(23,196,196,.09);border:1px solid rgba(127,230,230,.30)}

/* a pendência de gravação na tela final (fila de gravação, 08/09) */
.pendencias{width:100%;max-width:340px;margin:0 0 14px;padding:10px 13px;border-radius:10px;text-align:left;
  background:rgba(255,197,61,.10);border:1px solid rgba(255,197,61,.40);
  font:13px/1.45 Inter,system-ui,sans-serif;color:#FFD873}

/* =====================================================================
   FEEDBACK DE 10/09/2026 — dezesseis pontos do teste do Giordano
   ===================================================================== */

/* 4 · a legenda tinha SEIS degraus e regras de preenchimento para cinco:
   "domino" (data-l=5) ficava com o quadradinho VAZIO — o degrau mais alto
   parecia o mais baixo. Agora seis alturas, e o topo é um quadrado cheio. */
.leg.escala .lg[data-l="1"] i::after{height:20%}
.leg.escala .lg[data-l="2"] i::after{height:40%}
.leg.escala .lg[data-l="3"] i::after{height:60%}
.leg.escala .lg[data-l="4"] i::after{height:80%}
.leg.escala .lg[data-l="5"] i::after{height:100%}
.leg.escala .lg[data-l="5"] i{background:var(--niv-alto,#7FD4FF)}
.leg.escala .lg i::after{background:linear-gradient(0deg,var(--niv-fundo,#0B3E73),var(--niv-meio,#2B8FE6) 60%,var(--niv-alto,#7FD4FF)) !important}

/* 12 · o mapa denso: pino numerado, sem rótulo; o nome está na lista */
.ilhamapa--denso .im-r{display:none}
.ilhamapa--denso .im-p{width:26px;height:26px;display:grid;place-items:center;
  background:rgba(10,16,28,.82);border:2px solid rgba(255,255,255,.45)}
.ilhamapa--denso .im-p b{font:800 13px/1 'IBM Plex Mono',monospace;color:#fff}
.ilhamapa--denso .im-reg.on .im-p{background:var(--acento,#FFC53D);border-color:#fff}
.ilhamapa--denso .im-reg.on .im-p b{color:#0B1220}
.mo-num{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:800 13px/1 'IBM Plex Mono',monospace;color:#fff;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25)}
.mo.visto .mo-num{background:var(--acento,#FFC53D);color:#0B1220;border-color:transparent}
.menuop-rev{margin:0 0 12px;font:13px/1.45 Inter,system-ui,sans-serif;color:rgba(255,255,255,.62)}

/* 10 · o bônus: visível, com a promessa honesta — retrato mais preciso */
.mais{border:1px solid rgba(255,197,61,.45) !important;
  background:linear-gradient(168deg,rgba(255,197,61,.10),rgba(255,197,61,.03)) !important;
  border-radius:var(--r,14px)}
.mais-ico{background:var(--acento,#FFC53D) !important;color:#1A1400 !important;font-size:16px !important}
.mais-ico::before{content:'★'}
.mais-txt b{color:#FFE9A8}
.mais-pts{background:var(--acento,#FFC53D) !important;color:#1A1400 !important}

/* 11 · o retorno da categoria no mapa: manchete, não parágrafo */
.dv{padding:16px 18px;border-radius:var(--r,14px)}
.dv-selo{font-size:13px;letter-spacing:.14em;color:var(--acento,#FFC53D)}
.dv-t{font-size:16px !important;line-height:1.35 !important;font-weight:800 !important;color:#fff !important}
.dv-fa{border-left-width:6px;border-left-color:var(--acento,#FFC53D);background:rgba(255,197,61,.10)}
.dv-le .dv-selo{color:#7FE6E6}
.dv-f{font-size:13px}
/* 14 · o que o percurso revela */
.mrev{margin:8px 0 0;font:13px/1.45 Inter,system-ui,sans-serif;color:rgba(255,255,255,.62)}
.mrev b{color:#fff}

/* 9 · a conta no meio do fluxo é um aviso calmo, não um pedido */
.conta-proteger{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.conta-proteger .ct-cab b{font-size:14px}
.ct-abre{margin-top:10px}
.ct-google{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:9px 14px;
  border-radius:10px;border:1px solid rgba(255,255,255,.35);background:#fff;color:#1F1F1F;
  font:700 13px Inter,system-ui,sans-serif;cursor:pointer}
.ct-google:hover{background:#f2f2f2}
.ident-zap{margin-top:6px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.14)}

/* 2 · tamanho do texto: o botão e o efeito. `zoom` escala o layout
   inteiro, como um celular menor — é o que a lupa do sistema faz. */
.aa{flex:0 0 auto;height:34px;min-width:38px;padding:0 8px;border-radius:11px;cursor:pointer;
  background:rgba(255,255,255,.07);color:#C7D0E0;border:1px solid rgba(255,255,255,.12);
  font:800 13px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.aa[data-t="2"]{font-size:15px}.aa[data-t="3"]{font-size:17px;color:#fff}
.aa:active{transform:translateY(1px)}
html[data-texto="2"] #app{zoom:1.15}
html[data-texto="3"] #app{zoom:1.32}
.capa-ajustes{display:flex;align-items:center;gap:10px;margin:10px 0 4px}
.capa-layout{border:0;background:transparent;padding:6px 0;cursor:pointer;
  color:rgba(255,255,255,.62);font:600 13px Inter,system-ui,sans-serif;
  text-decoration:underline;text-underline-offset:3px}
.capa-layout:hover{color:#fff}
/* a régua de arte agora fica no alto: rótulo mais forte */
.skins{margin:14px -6px 4px}
.skins-rot{color:rgba(255,255,255,.75);font-weight:700}

/* 3 · VERSÃO PARA COMPUTADOR: por padrão segue a largura (≥900px);
   `data-layout` força uma das duas. Em computador o app ocupa 920px, a
   capa vira duas colunas (arte à esquerda, texto à direita) e as grades
   ganham colunas sozinhas. */
html[data-layout="computador"] #app{max-width:920px;height:min(1040px,100dvh);border-radius:0}
html[data-layout="computador"] .tela{padding-left:40px;padding-right:40px}
html[data-layout="computador"] #t-intro{flex-direction:row;padding:0}
html[data-layout="computador"] .capa-arte{flex:1 1 52%;min-height:100%;height:auto}
html[data-layout="computador"] .capa-txt{flex:0 0 48%;height:100%;overflow:auto;padding:34px 36px}
html[data-layout="computador"] .capa-txt::after{display:none}
html[data-layout="computador"] #t-intro .tit-jogo{font-size:64px}
html[data-layout="computador"] .grade:not(.inv){grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important}
html[data-layout="computador"] .grade.inv{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
html[data-layout="computador"] #board{max-height:54vh}
html[data-layout="computador"] .mw{max-width:760px;margin:0 auto}
html[data-layout="computador"] .body{font-size:15px}
/* celular forçado numa tela larga: a moldura de celular do app.css já cuida */

/* 1 · A SKIN É UM DESIGN SYSTEM, NÃO SÓ UMA IMAGEM. Cada letra define os
   tokens: fundo das telas, botão, cor da marca, acento, raio dos cantos,
   rampa do nível. A skin A é o que era; as outras derivam da paleta que
   gerou a arte (arte/skins/<letra>.txt). */
:root{--f1:#111A2C;--f2:#0B1220;--f3:#080D18;--halo:219,30,47;
  --btn:#DB1E2F;--btn-dark:#AF0421;--marca:#DB1E2F;--acento:#FFC53D;--r:14px;--r-btn:2px}
html[data-skin="b"]{--f1:#10254A;--f2:#0B1A36;--f3:#081226;--halo:43,92,230;
  --btn:#2B5CE6;--btn-dark:#1E44B3;--marca:#17C4C4;--acento:#FFC53D;--r:18px;--r-btn:12px}
html[data-skin="c"]{--f1:#1B2130;--f2:#161B24;--f3:#0F131A;--halo:219,30,47;
  --btn:#DB1E2F;--btn-dark:#AF0421;--marca:#DB1E2F;--acento:#E0E1E0;--r:2px;--r-btn:0px}
html[data-skin="d"]{--f1:#245A6E;--f2:#1F4A5C;--f3:#163846;--halo:201,85,61;
  --btn:#C9553D;--btn-dark:#A8412C;--marca:#DB1E2F;--acento:#E8D9C0;--r:16px;--r-btn:10px;
  --niv-fundo:#0E5A5A;--niv-meio:#17C4C4;--niv-alto:#9DEDED;--niv-halo:23,196,196}
html[data-skin="e"]{--f1:#16396B;--f2:#0B1E3A;--f3:#071426;--halo:255,197,61;
  --btn:#FF7A2F;--btn-dark:#D95F1A;--marca:#FFC53D;--acento:#22C55E;--r:0px;--r-btn:0px;
  --niv-fundo:#0E6B3A;--niv-meio:#22C55E;--niv-alto:#5BE58A;--niv-halo:34,197,94}
html[data-skin="f"]{--f1:#1C2B47;--f2:#16233A;--f3:#10192B;--halo:43,92,230;
  --btn:#2B5CE6;--btn-dark:#1E44B3;--marca:#F2A65A;--acento:#17C4C4;--r:8px;--r-btn:6px}
.tela,.tela.dark,.tela.red{background:
    radial-gradient(120% 60% at 50% -8%,rgba(var(--halo),.14),transparent 62%),
    linear-gradient(180deg,var(--f1) 0%,var(--f2) 52%,var(--f3) 100%) !important}
.capa-txt{background:var(--f2) !important}
.capa-txt::before{background:var(--marca) !important}
.btn{background:var(--btn);border-radius:var(--r-btn)}
.btn:hover{background:var(--btn-dark)}
.btn.on-red{background:var(--btn);color:#fff}
.btn.on-red:hover{background:var(--btn-dark)}
.mast{color:var(--marca)} .mast::after{background:var(--marca)}
.trilha i.feito{background:var(--marca)}
.skin-op.atual img{border-color:var(--btn);box-shadow:0 0 0 2px rgba(var(--halo),.35)}
.mo,.dv,.ilhamapa,.mgf,.conta,.mais,.it .disco~*{border-radius:var(--r)}
.im-reg.on .im-p{background:var(--acento);border-color:#fff}
.im-leg{color:rgba(255,255,255,.85)}
/* pixel art: tipo mono nos títulos e imagens sem suavização */
html[data-skin="e"] .title,html[data-skin="e"] .headline,html[data-skin="e"] .tit-jogo,
html[data-skin="e"] .mo-rot,html[data-skin="e"] .mgf-nome{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:0}
html[data-skin="e"] #cenafundo,html[data-skin="e"] .ilhamapa,html[data-skin="e"] #board .bg,
html[data-skin="e"] .skin-op img{image-rendering:pixelated}
/* isométrico chapado: sem sombra */
html[data-skin="f"] .mo,html[data-skin="f"] .dv,html[data-skin="f"] .mais,html[data-skin="f"] .ilhamapa{box-shadow:none}
/* cartografia: a gramática FAROL, retangular */
html[data-skin="c"] .mo,html[data-skin="c"] .dv,html[data-skin="c"] .mais{border-radius:2px}
/* o destaque dentro do aviso da conta é inline — `.ct-cab b` é bloco só no título */
.ct-cab span b{display:inline;font:inherit;font-weight:800;color:#fff;margin:0}

/* =====================================================================
   O MERGULHO EM LINHA RETA E O PORTÃO DAS FAMÍLIAS (10/09/2026)
   ===================================================================== */
.mg-bloco{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 14px;
  padding:10px 13px;border-radius:var(--r,14px);border-left:4px solid var(--c,#17C4C4);
  background:rgba(255,255,255,.05)}
.mg-bloco-n{font:700 13px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--c,#17C4C4)}
.mg-bloco-nome{font:800 14px Inter,system-ui,sans-serif;color:#fff}
.mg-pips{flex:1 1 100%;display:flex;gap:3px;margin-top:6px}
.mg-pips i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.mg-pips i.feito{background:var(--c,#17C4C4)}
.mg-pips i.atual{background:#fff}
.mg-porque{color:rgba(255,255,255,.62) !important}
.escada{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.esc-op{display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 14px;
  border-radius:var(--r,14px);cursor:pointer;text-align:left;color:#EDF1F8;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  font:600 14.5px/1.35 Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent;
  transition:background .14s,border-color .14s,transform .07s}
.esc-op:active{transform:translateY(1px)}
.esc-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font:800 13px/1 'IBM Plex Mono',monospace;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22)}
.esc-t{flex:1 1 auto;padding-top:3px}
.esc-op.on{background:rgba(var(--halo,23,196,196),.16);border-color:var(--btn,#DB1E2F);color:#fff}
.esc-op.on .esc-n{background:var(--btn,#DB1E2F);color:#fff;border-color:transparent}
.esc-op:focus-visible{outline:2px solid #17C4C4;outline-offset:2px}
.mg-vocab .ch{font-size:14px !important}
.portao{margin:6px 0 0}
.portao-sim{display:flex;flex-direction:column;gap:3px;width:100%;padding:15px 16px;text-align:left;
  border-radius:var(--r,14px);cursor:pointer;color:#fff;
  background:rgba(var(--halo,23,196,196),.14);border:1px solid var(--btn,#DB1E2F);
  font:600 13px Inter,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
.portao-sim b{font-size:15px}
.portao-sim span{color:rgba(255,255,255,.65)}
.portao-sim:active{transform:translateY(1px)}

/* ---- devolutiva em quatro telas (11/09/2026, JOGO-0014) ---- */
.fb-bate{margin-top:22px;padding-top:16px;border-top:1px solid var(--linha, rgba(0,0,0,.12))}
.fb-bate .fb-tit{font-size:18px;margin:0 0 4px}
.fb-metodo-det{margin-top:18px}
.fb-metodo-det summary{cursor:pointer;font-size:14px;font-weight:600;padding:8px 0;list-style:none}
.fb-metodo-det summary::before{content:'+ ';opacity:.7}
.fb-metodo-det[open] summary::before{content:'– '}
.fb-metodo-det .fb-metodo{margin-top:6px}

#fbcorpo{padding-bottom:120px}

/* =====================================================================
   FLUXO SIMPLES E DIRETO (11/09/2026, JOGO-0015)
   ===================================================================== */
/* um número só no topo: o das peças. O de regiões saiu da vista. */
.topo .placar.regs{display:none !important}
/* "tela x de y" no lugar de "≈ n min" */
.catpg{flex:0 0 auto;padding:3px 8px;border-radius:8px;font:700 13px 'IBM Plex Mono',monospace;
  color:rgba(255,255,255,.62);background:rgba(255,255,255,.07);letter-spacing:.02em}
/* a dica virou uma linha */
.dica.dica-linha{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;padding:8px 12px;
  font-size:13px;line-height:1.4;background:transparent !important;border:0;box-shadow:none}
.dica.dica-linha .dica-mais{flex:0 0 auto}
/* um bloco por tela: chips maiores, respiro */
.bloco-so{margin-top:6px}
.bloco-so .chips{gap:10px}
.bloco-so .chips .ch{font-size:15px;padding:13px 16px}
.bloco-so .pular{margin-top:14px}
.medidor.medidor-oculto{display:none !important}
/* a tela final curta: o retrato inteiro já foi visto na devolutiva; aqui
   fica só o primeiro bloco (palpite × retrato, com o card) e os botões.
   O DOM continua inteiro — é o CSS que dobra. */
#t-fim.curto #obs{display:none}
#t-fim.curto #resumo > *:not(:first-child){display:none}
#t-fim.curto #resumo{margin-bottom:14px}

/* ---- tela de arte, entrar/sair, textos enxutos (11/09/2026, JOGO-0017) ---- */
/* A ARTE EM DESTAQUE (11/09/2026). Era uma grade de dois cartõezinhos de
   150px com o nome truncado ("Papel recort…"): a escolha que mais muda a
   cara do instrumento era a coisa menos visível da tela. Agora é um cartão
   por linha, largura cheia, com o nome inteiro, uma frase sobre a
   linguagem visual e um selo de escolhida. A tela toda troca ao vivo no
   toque (trocaSkin → aplicaSkin), e é esse o efeito que se quer mostrar. */
.arte-sub{font:500 14px/1.4 Inter,system-ui,sans-serif;color:var(--tx,#fff);opacity:.85;margin:0 0 9px}
/* ⚠ AS SEIS NUMA TELA SÓ (11/09/2026). O Giordano: "a escolha dos 6 skins
   deveria ser mais compacta, as 6 cabendo numa unica tela sem rolar".
   O cartão de largura cheia (JOGO-0021) dava destaque e custava rolagem:
   quem via a primeira arte não via as outras cinco sem rolar, e escolher
   exige COMPARAR. Duas colunas × três linhas resolvem as duas coisas — a
   miniatura continua grande (16/9, largura da coluna), o nome inteiro
   continua lá, e a frase encurtou para caber em duas linhas. */
.skins.skins-tela{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.skins.skins-tela .skin-op{display:grid;grid-template-columns:1fr;gap:0;padding:0;background:transparent;border:0;cursor:pointer;
  width:100%;flex:1 1 auto;text-align:left;align-content:start;
  position:relative;border-radius:var(--r,14px);overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.16)}
/* a moldura da escolhida é do CARTÃO, não da imagem: cada skin dá à
   miniatura uma borda própria em skins.css, e as duas juntas viravam dois
   retângulos vermelhos sobrepostos */
/* ⚠ 2/1 E NÃO 16/9 (11/09/2026, com a sétima arte): sete cartões em duas
   colunas são quatro linhas, e a miniatura mais baixa é o que devolve a
   tela inteira sem cortar nem o nome nem a frase. */
.skins.skins-tela .skin-op img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:0;border:0 !important;display:block;box-shadow:none !important}
.skins.skins-tela .skin-op span{white-space:normal;overflow:visible;text-overflow:clip;margin-top:0;display:block}
.skins.skins-tela .skin-op .skin-nome{font:800 14.5px/1.2 Inter,system-ui,sans-serif;color:var(--tx,#fff);text-align:left;
  padding:4px 9px 0;white-space:normal;overflow:visible;text-overflow:clip}
.skins.skins-tela .skin-op .skin-desc{font:500 13px/1.25 Inter,system-ui,sans-serif;color:var(--tx,#fff);opacity:.72;text-align:left;padding:1px 9px 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ⚠ 13px é o PISO de texto declarado neste projeto (a fumaça reprova
   abaixo disso, e com razão: o instrumento é lido no celular, em pé, por
   quem tem 18 anos e por quem tem 50). Quando a tela é baixa demais para
   as três linhas de cartões, o que sai é a FRASE — não o tamanho da letra.
   A miniatura e o nome, que são o que decide a escolha, ficam. */
@media (max-height:750px){
  .skins.skins-tela .skin-op .skin-desc{display:none}
  .skins.skins-tela{gap:7px}
  .arte-sub{display:none}
  #t-q .corpo > .mast{margin-bottom:8px !important}}
/* ⚠ O SELO USA --sel, NÃO --btn (11/09/2026). O Giordano: "nao da nem p ver
   a cor no botao quando se escolhe pq fica branco contra branco" — na
   Cartografia o --btn era papel creme, e o selo saía branco sobre creme.
   --sel/--sel-tx é justamente o par "fundo do escolhido / texto sobre ele",
   e toda skin o define com contraste. */
.skins.skins-tela .skin-op .skin-marca{position:absolute;top:7px;right:7px;display:none;
  font:800 13px Inter,system-ui,sans-serif;letter-spacing:.02em;color:var(--sel-tx,#fff);background:var(--sel,#DB1E2F);
  padding:3px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
/* a moldura da escolhida por cima de tudo: outline some sob as regras de
   borda que cada skin impõe, e box-shadow inset fica ATRÁS da imagem */
.skins.skins-tela .skin-op.atual::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  border:3px solid var(--sel,#DB1E2F);border-radius:inherit}
.skins.skins-tela .skin-op.atual .skin-marca{display:block}
.skins.skins-tela .skin-op.atual img{border:0}
/* ⚠ A SÉTIMA É DEITADA E OCUPA A LINHA (11/09/2026). "Só texto" não tem
   arte para mostrar — mostrar um retângulo do tamanho dos outros seria
   prometer imagem que não vem. Deitada, ela ocupa metade da altura, fecha
   a grade sem deixar buraco ao lado, e se lê como o que é: a saída para
   quem está com a rede ruim. */
.skins.skins-tela .skin-op[data-skin="g"]{grid-column:1 / -1;
  grid-template-columns:96px 1fr;align-items:center;column-gap:12px}
.skins.skins-tela .skin-op[data-skin="g"] .skin-mini-txt{grid-row:1 / span 2;aspect-ratio:16/10;border-bottom:0;gap:4px;padding:9px 10px}
.skins.skins-tela .skin-op[data-skin="g"] .skin-nome{padding:0 12px 0 0;align-self:end}
.skins.skins-tela .skin-op[data-skin="g"] .skin-desc{padding:1px 12px 0 0;align-self:start;-webkit-line-clamp:1}
/* ⚠ no cartão deitado o selo "✓ escolhida" cai EM CIMA da frase e a corta
   no meio ("Abre em rede…") — e ali a moldura vermelha de 3px já diz, sem
   ambiguidade, qual está escolhida. O selo sai; a moldura fica. */
.skins.skins-tela .skin-op[data-skin="g"].atual .skin-marca{display:none}
html[data-layout="computador"] .skins.skins-tela{grid-template-columns:repeat(3,minmax(0,1fr))}
.capa-arte-bt{border:0;background:transparent;color:rgba(255,255,255,.8);font:600 13px Inter,system-ui,sans-serif;padding:6px 8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.capa-arte-bt b{color:#fff}
.capa-acesso{display:flex;flex-direction:column;gap:8px;align-items:center;margin:10px 0 0;font:500 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.75);text-align:center}
.capa-acesso .ca-bts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.capa-acesso .ca-bt,.capa-acesso .ca-sair{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font:700 13px Inter,system-ui,sans-serif;padding:8px 14px;border-radius:var(--r-btn,10px);cursor:pointer}
.capa-acesso .ca-quem b{color:#fff}
.ident .obr{font-size:13px;padding:1px 6px;letter-spacing:.02em;text-transform:none}
#mrev:empty{display:none}

/* ---- entrada com conta, chip e tela final (11/09/2026, JOGO-0017) ---- */
.capa-acesso{display:flex;flex-direction:column;gap:9px;align-items:stretch;text-align:center}
.capa-acesso .btn{width:100%}
.capa-acesso .ca-linha{display:flex;gap:6px 10px;flex-wrap:wrap;justify-content:center;align-items:baseline;
  font:500 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.7);margin-top:2px}
.capa-acesso .ca-chip{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:baseline;
  font:500 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.75);margin-bottom:2px}
.ca-lk{border:0;background:transparent;color:#fff;font:700 13px Inter,system-ui,sans-serif;padding:4px 6px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.conta-chip{flex:0 0 auto;min-width:34px;height:34px;padding:0 10px;border-radius:17px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);color:#fff;font:800 13px Inter,system-ui,sans-serif;cursor:pointer;letter-spacing:.02em}
.conta-chip.on{background:var(--btn,#DB1E2F);border-color:transparent;width:34px;padding:0;font-size:15px}
.conta-pop{position:absolute;right:16px;top:calc(56px + var(--st,0px));z-index:200;min-width:220px;max-width:calc(100% - 32px);
  padding:12px;border-radius:var(--r,14px);background:#141B2B;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:8px}
.conta-pop .cp-quem{font:600 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.8);word-break:break-all}
.conta-pop .cp-n{font:500 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.55)}
.conta-pop button{width:100%;padding:10px 12px;border-radius:var(--r-btn,10px);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff;font:700 14px Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.fim-conta{width:100%;max-width:340px;margin:0 0 18px;display:flex;flex-direction:column;gap:8px;align-items:center;
  font:500 13px Inter,system-ui,sans-serif;color:rgba(255,255,255,.75)}
.fim-conta b{color:#fff}
.fb-resto summary{font-size:14px}

/* a capa cresceu (entrada com conta): a arte não pode colapsar. Ela guarda um
   terço da tela e o texto rola por baixo (11/09/2026) */
#t-intro .capa-arte{flex:0 0 auto;min-height:32vh;height:32vh}
#t-intro .capa-txt{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
html[data-layout="computador"] #t-intro .capa-arte{flex:1 1 52%;height:auto;min-height:100%}
html[data-layout="computador"] #t-intro .capa-txt{flex:0 0 48%}

/* =====================================================================
   FEITOS, PERGUNTA ABERTA EM TELA, DESTAQUE DA PERGUNTA, ESCOLHA VISÍVEL
   (11/09/2026, JOGO-0019)
   ===================================================================== */
/* a PERGUNTA é o que importa na tela: maior, mais pesada; o resto recua */
#corpo .title{font-size:clamp(23px,6.4vw,28px);font-weight:900;letter-spacing:-.02em;line-height:1.12}
#corpo .title.title-pg{font-size:clamp(20px,5.6vw,24px)}
#corpo .catcab .mast{font-size:13px;opacity:.85}
#corpo > .body{opacity:.82}
.feitos{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.feito{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border-radius:var(--r,14px);
  background:rgba(127,127,127,.08);border:1px solid rgba(127,127,127,.22);color:inherit}
.feito-cab{display:flex;align-items:flex-start;gap:10px}
.feito-ico{display:flex;gap:4px;flex:0 0 auto;padding-top:1px}
.feito-i{width:28px;height:28px;border-radius:7px;border:1px solid rgba(127,127,127,.28);background:rgba(127,127,127,.10);
  display:grid;place-items:center;padding:0;cursor:pointer;color:inherit}
.feito-i svg{width:17px;height:17px}
.feito-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.feito-txt b{font:800 14.5px/1.25 Inter,system-ui,sans-serif;color:inherit}
.feito-txt span{font:500 13px/1.3 Inter,system-ui,sans-serif;opacity:.68}
.feito-ops{display:flex;gap:6px;flex-wrap:wrap}
.feito-ops .ch{font-size:13px;padding:7px 10px}
.longo-so{display:flex;flex-direction:column;gap:10px}
.longo-so .longo-tx{width:100%;box-sizing:border-box;min-height:180px;font-size:15px;line-height:1.5;padding:12px 14px}
/* caixas de texto na largura inteira, em toda parte */
textarea.aberta,.fb-porque textarea,.fb-caixa textarea,#fbnc,#fbcap,#obsTxt{width:100%;box-sizing:border-box;min-height:88px}
/* a resposta escolhida na escada não pode passar despercebida */
.esc-op.on{border-width:2px;box-shadow:0 0 0 3px rgba(var(--halo,23,196,196),.28);font-weight:800;
  animation:escEscolha .32s cubic-bezier(.2,1.4,.4,1)}
.esc-op.on::after{content:'✓';margin-left:auto;font:900 16px/1 Inter,system-ui,sans-serif;color:var(--btn,#DB1E2F);align-self:center}
@keyframes escEscolha{0%{transform:scale(.98)}60%{transform:scale(1.015)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.esc-op.on{animation:none}}
/* parabéns no mapa e "enviadas" no fim */
.mparab{margin:6px 0 0;font:600 13.5px/1.4 Inter,system-ui,sans-serif;color:inherit;opacity:.9}
.fim-ok{margin:-6px 0 14px;font:500 14px/1.4 Inter,system-ui,sans-serif;color:inherit;opacity:.8}
/* sugerir outra arte */
/* ⚠ FECHADA POR PADRÃO (11/09/2026): com as seis artes em duas colunas, a
   caixa de sugestão aberta era o único motivo de a tela ainda rolar. Ela é
   secundária — quem quer sugerir, toca e ela abre. */
.arte-sug{display:block;margin-top:8px;font:600 13px Inter,system-ui,sans-serif;color:inherit;opacity:.85}
.arte-sug summary{cursor:pointer;list-style:none;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.arte-sug summary::-webkit-details-marker{display:none}
.arte-sug[open] summary{margin-bottom:6px}
.arte-sug input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:var(--r-btn,10px);border:1px solid rgba(255,255,255,.2);
  background:rgba(127,127,127,.10);color:inherit;font:500 14px Inter,system-ui,sans-serif}
/* menu de compartilhar e separador do menu da conta */
.share-pop{position:absolute;left:16px;right:16px;bottom:calc(20px + var(--sb,0px));z-index:220;padding:12px;border-radius:var(--r,14px);
  background:#141B2B;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:8px}
.share-pop button{width:100%;padding:12px 14px;border-radius:var(--r-btn,10px);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff;font:700 14px Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.conta-pop .cp-sep{height:1px;background:rgba(255,255,255,.12);margin:2px 0}


/* =====================================================================
   LEGIBILIDADE DA SKIN A (11/09/2026) — o que a auditoria de contraste
   achou e que não cabia em `skins.css`: a A é a arte original e não tem
   bloco lá. Medido como nas outras: contraste WCAG contra o pixel
   realmente pintado, a 390×844, na travessia inteira.

   Os quatro valores acima (estrela vazia .17→.42, borda da célula
   .07→.14, `.tg-est` .42→.58, `.leg.tres .ex` .44→.56, `.pc-de` .5→.66)
   são da base e valem para todas — as outras skins já os remapeiam.
   O que segue é só da A.
   ===================================================================== */

/* a barra de cima e a linha de capítulo flutuavam sobre a ILUSTRAÇÃO da
   categoria, que muda a cada categoria: "de 119" media 3,01:1 e o rótulo
   "CATEGORIA n" em vermelho, 2,79:1. Mesmo remédio das outras skins — véu
   só atrás das duas faixas que já não são arte, e a ilustração inteira
   continua aparecendo logo abaixo. */
html[data-skin="a"] .topo:is(*,.x.x.x){
  background:linear-gradient(180deg,
    #0B1220 0%,#0B1220 58%,rgba(11,18,32,0) 100%)}
html[data-skin="a"] #corpo .catcab:is(*,.x.x.x){
  background:linear-gradient(180deg,
    rgba(11,18,32,0) 0%,rgba(11,18,32,.92) 13%,
    rgba(11,18,32,.92) 87%,rgba(11,18,32,0) 100%)}

/* "BLOCO 1 DE 4" saía no roxo da família (#7C4DFF vindo dos dados): 2,43:1
   sobre o fundo do cartão. A cor da família continua dita pelo fio do
   cartão e pelos pips — no rótulo ela era só enfeite ilegível. */
html[data-skin="a"] .mg-bloco-n{color:rgba(255,255,255,.74)}

/* na capa, o título branco cai sobre a faixa de areia clara da arte
   (1,24:1). O véu da capa ganha um degrau a mais na altura em que o
   título começa — a ilha continua à vista em cima. */
html[data-skin="a"] .capa-arte::after{
  background:linear-gradient(180deg,
    rgba(11,18,32,.05) 0%,rgba(11,18,32,0) 34%,
    rgba(11,18,32,.62) 62%,rgba(11,18,32,.92) 82%,#0B1220 100%)}

/* a miniatura da skin "Só texto" é desenhada, não baixada — ver miniTexto()
   em app.js. Ela mostra o que a skin é: fio vermelho, manchete e linhas. */
.skin-mini-txt{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:100%;aspect-ratio:16/9;box-sizing:border-box;padding:12px 13px;
  background:#FCFBF8;border-bottom:1px solid rgba(22,24,29,.10)}
.skin-mini-txt .smt-r{display:block;width:26px;height:3px;background:#DB1E2F;border-radius:2px}
.skin-mini-txt b{font:800 13px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  letter-spacing:-.02em;color:#16181D}
.skin-mini-txt u{display:block;height:3px;border-radius:2px;background:rgba(22,24,29,.16);text-decoration:none}
.skin-mini-txt u.curta{width:52%}