/* fontes servidas do próprio domínio: sem Google Fonts */
@font-face{font-family:'Fraunces';src:url('fonts/fraunces.woff2') format('woff2-variations');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Instrument Sans';src:url('fonts/instrument-sans.woff2') format('woff2-variations');
  font-weight:100 800;font-display:swap;font-style:normal}

/* ==========================================================================
   Chankeo · Design System v30 — "premium arcade" · paleta Espanha (Brisca)
   Papel quente, contorno de tinta, sombra dura, botões que afundam ao tocar,
   ilustrações do Cervantes em toda parte. Carregar DEPOIS de style.css.
   Para mudar a marca inteira, mexa só nos tokens do bloco :root.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  color-scheme: light;

  /* Marca · paleta Espanha, tirada do projeto Brisca */
  --brand:#B73928;        /* vermelho tijolo */
  --brand-deep:#932C1E;
  --brand-ink:#8E2718;
  --brand-soft:#F3D8D1;
  --red:#B73928;          /* bermellón, também para alertas */
  --red-ink:#8E2718;
  --red-soft:#F3D8D1;
  --gold:#DDA731;         /* amarelo mostarda */
  --gold-ink:#7A5D12;
  --gold-soft:#F7E7C4;
  --olive:#6F7740;        /* verde oliva (o escuro: aguenta texto creme) */
  --olive-ink:#4E5629;
  --olive-soft:#E6EACF;
  --teal:#1B7595;         /* azul petróleo */
  --teal-ink:#125A74;
  --teal-soft:#D5E6EE;

  /* Papel e tinta */
  --bg:#EFDFBE;
  --bg-2:#E5D2AC;
  --surface:#FFFCF4;
  --surface-2:#F8EFDA;
  --surface-3:#EDDEBC;
  --ink:#2E2B24;
  --ink-2:#5C4F3C;
  --ink-3:#7D6E52;
  --ink-line:#2E2B24;      /* contorno das ilustrações e cartões */
  --line:var(--ink-line);
  --on-brand:#FFF8EC;
  --on-gold:#1E1711;       /* tinta obrigatória sobre mostarda */

  /* Forma: contorno + sombra dura (sem blur) */
  --bw:3px;              /* espessura do contorno */
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:11px; --r-pill:999px;
  --radius:var(--r-lg);
  --pop:4px 5px 0 var(--ink-line);
  --pop-sm:3px 3px 0 var(--ink-line);
  --pop-lg:6px 7px 0 var(--ink-line);
  --lift:0 10px 24px -14px rgba(30,23,17,.5);

  /* Tipografia */
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-ui:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* a Fraunces tem eixos próprios: SOFT arredonda, WONK dá o ar de rótulo */
  --wonk:'SOFT' 0,'WONK' 1,'opsz' 144;
  --wonk-reto:'SOFT' 0,'WONK' 0,'opsz' 144;

  /* Legado do style.css */
  --white:var(--surface); --muted:var(--ink-2); --coral:var(--brand);
  --yellow:var(--gold); --green:var(--olive-soft); --purple:var(--teal-soft);

  --topbar-h:62px; --dock-h:76px;

  /* textura de impressão analógica */
  --grao:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.13'/></svg>");
}

/* o grão fica por cima de tudo, sem atrapalhar o toque.
   No escuro ele inverte: clareia em vez de escurecer. */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background-image:var(--grao);mix-blend-mode:multiply;opacity:.85;
}
:root[data-theme="dark"] body::after{mix-blend-mode:screen;opacity:.42}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body::after{mix-blend-mode:screen;opacity:.42}
}
@media print{body::after{display:none}}

:root[data-theme="dark"]{
  color-scheme: dark;
  --brand:#C9452F; --brand-deep:#E05B45; --brand-ink:#F2917E; --brand-soft:#4A241C;
  --red:#C9452F; --red-ink:#F2917E; --red-soft:#4A241C;
  --gold:#DDA731; --gold-ink:#F7D383; --gold-soft:#463619;
  --olive:#6F7740; --olive-ink:#C2CD92; --olive-soft:#2C3320;
  --teal:#1B7595; --teal-ink:#8CC8DC; --teal-soft:#173845;
  --bg:#221F1A;
  --bg-2:#1A1713;
  --surface:#2E2B24;
  --surface-2:#37332A;
  --surface-3:#433E33;
  --ink:#EFDFBE;
  --ink-2:#C4B394;
  --ink-3:#A09079;
  --ink-line:#100E0B;
  --line:var(--ink-line);
  --on-brand:#FFF8EC;
  --on-gold:#1E1711;
  --pop:4px 5px 0 #100E0B;
  --pop-sm:3px 3px 0 #100E0B;
  --pop-lg:6px 7px 0 #100E0B;
  --lift:0 14px 30px -18px #000;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --brand:#C9452F; --brand-deep:#E05B45; --brand-ink:#F2917E; --brand-soft:#4A241C;
    --red:#C9452F; --red-ink:#F2917E; --red-soft:#4A241C;
    --gold:#DDA731; --gold-ink:#F7D383; --gold-soft:#463619;
    --olive:#6F7740; --olive-ink:#C2CD92; --olive-soft:#2C3320;
    --teal:#1B7595; --teal-ink:#8CC8DC; --teal-soft:#173845;
    --bg:#221F1A; --bg-2:#1A1713; --surface:#2E2B24; --surface-2:#37332A; --surface-3:#433E33;
    --ink:#EFDFBE; --ink-2:#C4B394; --ink-3:#A09079;
    --ink-line:#100E0B; --line:var(--ink-line); --on-brand:#FFF8EC; --on-gold:#1E1711;
    --pop:4px 5px 0 #100E0B; --pop-sm:3px 3px 0 #100E0B; --pop-lg:6px 7px 0 #100E0B;
    --lift:0 14px 30px -18px #000;
  }
}

/* ---------- 2. Base ---------- */
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 11%, transparent) 1px, transparent 0) 0 0/22px 22px,
    var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.hero h2,.page-heading h1{font-family:var(--font-display);font-variation-settings:var(--wonk-reto);font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.1}
p,li,small,label,td,th{color:inherit}
.muted,.details-meta,footer,.auth-note,.audio-message,.keyboard-note{color:var(--ink-2);font-weight:600}
.eyebrow{
  font-family:var(--font-ui);font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  font-size:10.5px;color:var(--brand-ink);
}
a{color:var(--brand-ink);font-weight:700}
::selection{background:var(--gold);color:#1E1711}
:focus-visible{outline:3px solid var(--brand)!important;outline-offset:3px}
button,input,textarea,select{font-family:inherit}
b,strong{font-weight:800}

/* ---------- 3. Casca do app ---------- */
.workspace{background:transparent}
.topbar{
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:var(--bw) solid var(--ink-line);color:var(--ink);
}
.topbar #breadcrumb{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:17px}
.sidebar{background:var(--surface);border-right:var(--bw) solid var(--ink-line)}
.sidebar nav a{
  color:var(--ink);border-radius:var(--r-md);font-weight:800;border:var(--bw) solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sidebar nav a:hover{background:var(--surface-2);border-color:var(--ink-line);transform:translate(-1px,-1px);box-shadow:var(--pop-sm)}
.sidebar nav a.active{background:var(--brand);color:var(--on-brand);border-color:var(--ink-line);box-shadow:var(--pop-sm)}
.sidebar nav a b{background:var(--gold);color:#1E1711;border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:0 8px;font-size:12px}
.nav-caption{color:var(--ink-3)}
.course,.date-chip{background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);color:var(--ink);box-shadow:var(--pop-sm)}
.course small{color:var(--ink-2)}
.region{background:var(--olive-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);color:var(--ink);box-shadow:var(--pop-sm)}
.region p{color:var(--ink-2)}
.region-label{border-color:var(--ink-line);color:var(--olive-ink)}
.profile strong{color:var(--ink)}
.profile small{color:var(--ink-2)}
footer{color:var(--ink-3)}

/* Marca */
.brand{display:inline-flex!important;align-items:center;gap:9px;text-decoration:none}
/* O arquivo do ícone JÁ é um quadrado arredondado, com fundo tijolo e cantos
   próprios. Recortá-lo em círculo cortava os ombros do Cervantes e ainda
   desenhava um contorno redondo em volta de uma arte quadrada. Aqui ele aparece
   como foi desenhado — o mesmo desenho que vai para a tela inicial do celular. */
.brand .chankeo-brand-icon,
.console-topo .chankeo-brand-icon,
.admin-header .chankeo-brand-icon,
.mobile-brand .chankeo-brand-icon,
.auth-brand .chankeo-brand-icon{
  border-radius:0;background:transparent;border:0;box-shadow:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.22));
}
.brand .chankeo-brand-logo{display:none!important}
.brand .brand-word{
  display:inline-flex!important;font-family:var(--font-display);
  font-variation-settings:var(--wonk);font-weight:700;font-size:25px;letter-spacing:-.02em;
  letter-spacing:-.8px;color:var(--ink);line-height:1;align-items:baseline;
}
.brand .brand-word i{font-style:normal;color:var(--brand)}
.mobile-brand .brand-word{font-size:21px}
.auth-brand .brand-word{font-size:34px}

/* Chips do topo */
.top-stats{gap:7px;align-items:center}
.top-stats>span,.theme-toggle{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);
  padding:5px 11px;font-weight:800;color:var(--ink);font-size:13px;display:inline-flex;gap:5px;align-items:center;
  box-shadow:var(--pop-sm);
}
.top-stats>span svg,.theme-toggle svg{width:15px;height:15px;display:block}
.points{
  background:var(--gold)!important;color:#1E1711!important;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-pill);font-weight:800;padding:5px 12px;box-shadow:var(--pop-sm);
}
.points b{font-family:var(--font-display);font-variant-numeric:tabular-nums;color:#1E1711}
.points:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.account-menu summary{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);box-shadow:var(--pop-sm)}
.account-menu>div{background:var(--surface);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop);border-radius:var(--r-md);color:var(--ink)}
.account-menu a,.account-menu button{color:var(--ink);font-weight:700}
.account-menu a:hover,.account-menu button:hover{background:var(--surface-3)}
.theme-toggle{cursor:pointer}

/* Dock */
.mobile-dock{
  background:var(--surface);border-top:var(--bw) solid var(--ink-line);
}
.mobile-dock a{color:var(--ink-3);font-weight:800;font-size:10px;gap:3px}
.mobile-dock a svg{width:24px;height:24px}
.mobile-dock a.active{color:var(--brand-ink)}
.mobile-dock a.active svg{transform:translateY(-2px) scale(1.06)}
.mobile-dock a svg{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
.mobile-dock .dock-talk{color:var(--ink)}
.mobile-dock .dock-talk span{
  background:var(--red);color:#FFF8EC;border:var(--bw) solid var(--ink-line);
  box-shadow:var(--pop);
}
.mobile-dock .dock-talk.is-speaking span{background:var(--olive)}

/* ---------- 4. Botões que afundam ---------- */
.button{
  border-radius:var(--r-pill);border:var(--bw) solid var(--ink-line);font-family:var(--font-display);
  font-weight:800;letter-spacing:.2px;box-shadow:var(--pop);
  transition:transform .09s ease, box-shadow .09s ease, background .14s ease;
}
.button:hover{transform:translate(-1px,-1px);box-shadow:var(--pop-lg)}
.button:active{transform:translate(4px,5px);box-shadow:0 0 0 var(--ink-line)}
.button.dark{background:var(--brand);color:#FFF8EC}
.button.dark:hover{background:var(--brand-deep)}
.hero .button.dark,.conversation-card .button.dark{background:var(--ink);color:var(--bg)}
.button.light{background:var(--surface);color:var(--ink)}
.button.light:hover{background:var(--surface-2)}
.button.coral{background:var(--gold);color:#1E1711}
.button:disabled{opacity:.55;box-shadow:var(--pop-sm);transform:none}
.text-button{color:var(--brand-ink);border:0;font-weight:800}
.icon-button{
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:50%;box-shadow:var(--pop-sm);font-weight:800;
}
.icon-button:hover{background:var(--surface-3);transform:translate(-1px,-1px);box-shadow:var(--pop)}
.icon-button:active{transform:translate(3px,3px);box-shadow:none}
.skip{background:var(--gold);color:#1E1711;border:var(--bw) solid var(--ink-line)}

/* ---------- 5. Superfícies de adesivo ---------- */
.panel,.stat,.review-row,.empty,.ai-panel,.auth-card,dialog,.preference-card,.points-rules,
.security-settings,.spanish-quest,.level-plan,.article-ready,.practice-strip,.deck,.chunk-card{
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop);
}
.empty{border-style:dashed;background:var(--surface-2);color:var(--ink-2)}
dialog{box-shadow:var(--pop-lg)}
dialog::backdrop{background:color-mix(in srgb, #1E1711 66%, transparent);backdrop-filter:blur(2px)}
.pill{
  background:var(--surface-3);border:2px solid var(--ink-line);color:var(--ink);
  border-radius:var(--r-pill);font-weight:800;font-size:11.5px;padding:3px 10px;
}
.progress-track{background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill);overflow:hidden;height:14px}
.progress-track i{background:repeating-linear-gradient(135deg,var(--gold) 0 10px,#FFD275 10px 20px);display:block;height:100%;transition:width .6s cubic-bezier(.2,.8,.2,1)}
input,textarea,select,.goal-select{
  background:var(--surface);border:var(--bw) solid var(--ink-line);color:var(--ink);
  border-radius:var(--r-md);font-weight:700;box-shadow:var(--pop-sm);
}
input::placeholder,textarea::placeholder{color:var(--ink-3);font-weight:600}
input:focus,textarea:focus,select:focus{box-shadow:var(--pop)}
.form-error,.import-error{color:var(--red-ink);font-weight:800}
.import-ready{color:var(--olive-ink)}
.import-duplicate{color:var(--gold-ink)}
.import-table{background:var(--surface);color:var(--ink);border-radius:var(--r-md)}
.import-table th{background:var(--surface-3);color:var(--ink)}
#toast{
  background:var(--ink);color:var(--bg);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-pill);font-weight:800;box-shadow:var(--pop);
}

/* Cards de conteúdo com faixa colorida e leve rotação de adesivo */
.deck,.chunk-card{position:relative;overflow:hidden;transition:transform .16s cubic-bezier(.34,1.4,.64,1), box-shadow .16s ease}
.deck:hover,.chunk-card:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:var(--pop-lg)}
.deck:before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--brand);border-bottom:var(--bw) solid var(--ink-line)}
.deck:nth-child(4n+2):before{background:var(--gold)}
.deck:nth-child(4n+3):before{background:var(--teal)}
.deck:nth-child(4n+4):before{background:var(--olive)}
.deck p,.deck-bottom,.chunk-card>p,.chunk-card .details-meta,.chunk-card .muted{color:var(--ink-2)}
.deck h2,.deck h3,.chunk-card h3,.chunk-card h2{color:var(--ink);font-family:var(--font-display)}
.deck .pill,.chunk-card .pill,.conversation-card .pill{background:var(--surface-3);color:var(--ink)}
.deck .progress-track i{background:var(--brand)}
.deck-icon,.deck:nth-child(n) .deck-icon{background:var(--brand-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md)}
.deck:nth-child(4n+2) .deck-icon{background:var(--gold-soft)}
.deck:nth-child(4n+3) .deck-icon{background:var(--teal-soft)}
.deck:nth-child(4n+4) .deck-icon{background:var(--olive-soft)}
.status-new{color:var(--teal-ink)}
.status-due{color:var(--brand-ink)}
.tip{background:var(--gold-soft);color:var(--ink);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--pop-sm)}
.tip .muted{color:var(--gold-ink)}
.mini-stats>span{color:var(--ink)}

/* ---------- 6. Início ---------- */
.hero{
  background:var(--brand);color:#FFF8EC;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop-lg);position:relative;overflow:hidden;
}
.hero:after{
  content:"";position:absolute;inset:auto -50px -70px auto;width:230px;height:230px;border-radius:50%;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 12px,transparent 12px 24px);
}
.hero h2,.hero p{color:#FFF8EC}
.hero .eyebrow{color:#FFE2CF}
.hero-stack{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop)}
.mission-banner{
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop);position:relative;overflow:hidden;
}
.mission-banner:before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--gold);border-bottom:var(--bw) solid var(--ink-line)}
.mission-banner .eyebrow{color:var(--brand-ink)}
.mission-meter{background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill);overflow:hidden}
.mission-meter i{background:var(--gold)}
.level-strip{color:var(--ink-2)}
.level-strip>span:first-child{color:var(--gold-ink);font-weight:800}
.journey .eyebrow{color:var(--brand-ink)}
.journey-steps a{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  color:var(--ink);box-shadow:var(--pop-sm);transition:transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .14s ease;
}
.journey-steps a:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.journey-steps b{background:var(--brand-soft);color:var(--brand-ink);border:2px solid var(--ink-line);border-radius:10px}
.journey-steps small{color:var(--ink-2)}
.goal-ring{background:conic-gradient(var(--gold) var(--percent), var(--surface-3) 0);border:var(--bw) solid var(--ink-line);border-radius:50%}
.goal-ring>div{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line)}
.brand-illustration{background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg)}
.practice-strip p{color:var(--ink-2)}
.level-plan p{color:var(--ink-2)}
.level-plan .eyebrow{color:var(--brand-ink)}
.plan-level{background:var(--brand);color:#FFF8EC;border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);font-family:var(--font-display);font-weight:800;box-shadow:var(--pop-sm)}
.spanish-quest p,.call-heading p,.article-ready p{color:var(--ink-2)}

/* ---------- 7. Conversa e chat ---------- */
.conversation-card{background:var(--teal-soft);color:var(--ink);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop)}
.conversation-card .muted{color:var(--teal-ink)}
.conversation-card textarea{background:var(--surface)}
.ai-heading p{color:var(--ink-2)}
.ai-badge{background:var(--olive-soft);color:var(--olive-ink);border:2px solid var(--ink-line);border-radius:var(--r-pill);font-weight:800}
.ai-model{background:var(--surface-3);color:var(--ink-2);border:2px solid var(--ink-line);border-radius:var(--r-pill)}
.ai-notice,.ai-persona{background:var(--surface-2);color:var(--ink-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md)}
.ai-persona span:not(.ai-avatar){color:var(--ink-2)}
.ai-avatar{background:var(--gold);color:var(--on-gold);border:var(--bw) solid var(--ink-line)}
.ai-user{background:var(--brand);color:#FFF8EC;border:var(--bw) solid var(--ink-line);border-radius:20px 20px 6px 20px;box-shadow:var(--pop-sm)}
.ai-assistant{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);border-radius:20px 20px 20px 6px;box-shadow:var(--pop-sm)}
.ai-error{background:var(--red-soft);color:var(--red-ink);border:2px solid var(--ink-line)}
.ai-typing{color:var(--ink-3)}
.ai-form textarea{background:var(--surface);color:var(--ink)}
.ai-form-bottom,.ai-footnote{color:var(--ink-3)}
.ai-voice-actions{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg)}
.ai-voice-actions .button.continuous-active,.ai-voice-actions .button.recording,
.ai-voice-actions .recording,.ai-voice-actions .continuous-active{background:var(--olive);color:#FFF8EC}
.voice-room .ai-avatar{box-shadow:var(--pop)}
.ai-correction-card{
  background:var(--gold-soft);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-left:8px solid var(--gold);border-radius:var(--r-md);box-shadow:var(--pop-sm);
}
.ai-correction-card .ai-correction-label{color:var(--gold-ink);font-weight:800}
.ai-correction-card p{color:var(--ink)}

/* ---------- 8. Progresso ---------- */
.chart-column i{background:var(--brand);border:2px solid var(--ink-line);border-radius:8px 8px 3px 3px}
.chart-column span{color:var(--ink-3)}
.chart-column b{font-family:var(--font-display);color:var(--ink)}
.stat b,.stat strong{font-family:var(--font-display);font-size:30px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-2)}
.stat:nth-child(2){background:var(--surface);color:var(--ink)}
.points-pass{background:var(--gold);color:#1E1711;border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop)}
.points-pass h2{color:#1E1711;font-family:var(--font-display)}
.points-rules>div span{background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-md)}
.points-rules b{color:var(--brand-ink)}
.points-rules p{color:var(--ink-2)}
.account-hero{background:var(--brand);color:#FFF8EC;border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop)}
.account-hero .pill{background:#FFF8EC;border-color:var(--ink-line);color:#1E1711}
.settings-section-title>span{background:var(--gold-soft);color:var(--gold-ink);border:2px solid var(--ink-line)}
.settings-section-title p{color:var(--ink-2)}
.security-settings small{color:var(--ink-2)}
.account-settings hr{border-top:var(--bw) solid var(--ink-line)}
.avatar-choice{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md)}
.avatar-choice:has(input:checked){border-color:var(--ink-line);background:var(--gold-soft);box-shadow:var(--pop-sm)}
.avatar-choice small{color:var(--ink-2)}
.preference-card{background:var(--surface-2)}

/* ---------- 9. Entrar e administração ---------- */
.auth-body{
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 0) 0 0/22px 22px,
    var(--bg);
}
.auth-card,.admin-card{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-lg)}
.auth-lead{color:var(--ink-2)}
.auth-tabs{background:var(--surface-3);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);padding:4px}
.auth-tab{background:transparent;color:var(--ink-2);border-radius:var(--r-pill);font-weight:800;border:var(--bw) solid transparent}
.auth-tab.active{background:var(--brand);color:#FFF8EC;border-color:var(--ink-line);box-shadow:var(--pop-sm)}
.auth-form small,.admin-card small,.auth-note{color:var(--ink-2)}
.auth-card label,.admin-card label{font-weight:800;color:var(--ink);font-size:13.5px}
.admin-body{background:var(--bg)}
.admin-header,.admin-header .auth-lead{color:var(--ink)}
.admin-card>section{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg)}
.admin-card input[readonly]{background:var(--surface-3);color:var(--ink-2)}
.admin-card .eyebrow{color:var(--brand-ink)}
.admin-card input::placeholder,.admin-card textarea::placeholder{color:var(--ink-3)}

/* ---------- 10. Movimento ---------- */
@keyframes ck-pop{0%{transform:scale(.8);opacity:0}65%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes ck-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ck-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1.5deg)}}
@keyframes ck-shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-8px) rotate(-1deg)}38%{transform:translateX(8px) rotate(1deg)}58%{transform:translateX(-5px)}78%{transform:translateX(5px)}}
@keyframes ck-tada{0%{transform:scale(1)}30%{transform:scale(1.12) rotate(-3deg)}60%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1)}}
@keyframes ck-sheen{from{background-position:0 0}to{background-position:40px 0}}
#view>*{animation:ck-rise .3s cubic-bezier(.2,.8,.2,1) both}
#view>*:nth-child(2){animation-delay:.04s}
#view>*:nth-child(3){animation-delay:.08s}
#view>*:nth-child(4){animation-delay:.12s}
.ck-figure{display:block;width:100%;height:auto}
.ck-bob{animation:ck-bob 3.4s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* ==========================================================================
   11. Componentes de jogo — HUD, herói com o Cervantes, missão, tiles
   ========================================================================== */
.ck-figure{display:block;width:100%;height:auto}
.button i,.ck-tile-ico,.hud-ico{display:inline-flex;align-items:center;justify-content:center}
.button i svg{width:18px;height:18px}

/* HUD */
.ck-hud{display:flex;gap:8px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.hud-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);
  padding:5px 12px 5px 8px;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;
  box-shadow:var(--pop-sm);
}
.hud-chip small{font-weight:700;font-size:11px;color:var(--ink-2);text-transform:lowercase}
.hud-ico svg{width:17px;height:17px}
.hud-fire{background:var(--red-soft)} .hud-fire .hud-ico{color:var(--red)}
.hud-xp{background:var(--gold-soft)} .hud-xp .hud-ico{color:var(--gold-ink)}
.hud-lvl{background:var(--teal-soft)} .hud-lvl .hud-ico{color:var(--teal-ink)}
.hud-chip.is-bumping{animation:ck-tada .5s ease-out}

/* Herói com o personagem */
.ck-hero{
  position:relative;display:grid;grid-template-columns:38% 1fr;gap:12px;align-items:end;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  box-shadow:var(--pop);padding:14px 16px 0;margin-bottom:14px;overflow:hidden;
}
.ck-hero:before{
  content:"";position:absolute;inset:auto -30% -55% 25%;height:150px;border-radius:50%;
  background:var(--gold-soft);
}
.ck-hero-art{position:relative;align-self:end;margin-bottom:-4px}
.ck-hero-art svg{filter:drop-shadow(0 6px 0 rgba(30,23,17,.12))}
.ck-hero-copy{position:relative;padding:8px 0 16px}
.ck-bubble{
  display:inline-block;background:var(--ink);color:var(--bg);font-weight:800;font-size:12.5px;
  padding:6px 12px;border-radius:14px;position:relative;margin-bottom:8px;
}
.ck-bubble:after{
  content:"";position:absolute;left:14px;bottom:-7px;width:0;height:0;
  border:8px solid transparent;border-top-color:var(--ink);border-bottom:0;
}
.ck-hero-copy h1{font-size:clamp(21px,5.6vw,27px);margin:0 0 4px;line-height:1.08}
.ck-hero-copy p{margin:0;color:var(--ink-2);font-size:13.5px}
.ck-hero-copy p b{color:var(--brand-ink)}

/* Missão */
.ck-quest{
  background:var(--brand);color:#FFF8EC;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop);padding:16px;margin-bottom:14px;
}
.ck-quest.is-done{background:var(--olive)}
.ck-quest .eyebrow{color:var(--on-brand)}
.ck-quest-head{display:flex;align-items:center;justify-content:space-between}
.ck-quest-count{font-family:var(--font-display);font-weight:800;font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.ck-quest-count small{font-size:15px;opacity:.75}
.ck-quest h2{color:#FFF8EC;font-size:21px;margin:2px 0 12px}
.ck-segments{display:flex;gap:4px;margin-bottom:14px}
.ck-segments i{
  flex:1;height:12px;border-radius:5px;background:rgba(255,255,255,.28);
  border:2px solid var(--ink-line);
}
.ck-segments i.on{background:var(--gold);animation:ck-pop .3s backwards}
.ck-quest-cta{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);color:var(--ink)}
.ck-quest-cta:hover{background:var(--surface-2)}

/* Tiles de ação */
.ck-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ck-tile{
  display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink);
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:13px;box-shadow:var(--pop-sm);transition:transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .14s ease;
}
.ck-tile:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.ck-tile:active{transform:translate(3px,3px);box-shadow:none}
.ck-tile-ico{
  width:42px;height:42px;border-radius:13px;border:var(--bw) solid var(--ink-line);
  display:grid;place-items:center;margin-bottom:8px;
}
.ck-tile-ico svg{width:23px;height:23px}
.ck-tile b{font-family:var(--font-display);font-size:16px;font-weight:800}
.ck-tile small{color:var(--ink-2);font-size:11.5px;font-weight:700}
.ck-tile[data-tone="brand"] .ck-tile-ico{background:var(--brand-soft);color:var(--brand-ink)}
.ck-tile[data-tone="gold"] .ck-tile-ico{background:var(--gold-soft);color:var(--gold-ink)}
.ck-tile[data-tone="red"] .ck-tile-ico{background:var(--red-soft);color:var(--red-ink)}
.ck-tile[data-tone="teal"] .ck-tile-ico{background:var(--teal-soft);color:var(--teal-ink)}

/* XP */
.ck-xp{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);padding:13px 15px;box-shadow:var(--pop-sm);margin-bottom:14px}
.ck-xp-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--ink-2);font-weight:700}
.ck-xp-top b{font-family:var(--font-display);font-size:17px;color:var(--ink)}
.ck-xp-bar{height:14px;border-radius:var(--r-pill);background:var(--surface-3);border:2px solid var(--ink-line);overflow:hidden;margin-top:8px}
.ck-xp-bar i{display:block;height:100%;background:repeating-linear-gradient(135deg,var(--gold) 0 9px,#FFD98A 9px 18px);transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* Faixa do plano */
.ck-strip{
  display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center;
  background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  padding:12px 15px;box-shadow:var(--pop-sm);margin-bottom:16px;
}
.ck-strip h3{font-size:17px;margin:2px 0}
.ck-strip p{font-size:12.5px;margin:0 0 4px}
.ck-strip-art svg{width:100%;height:auto}

/* Confete e reações */
.ck-confetti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.ck-confetti i{position:absolute;top:-20px;border-radius:3px;border:2px solid var(--ink-line);animation:ck-fall 1.7s cubic-bezier(.3,.5,.6,1) forwards}
@keyframes ck-fall{to{transform:translateY(105vh) rotate(540deg);opacity:.85}}
.ck-reaction{
  position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:120;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;animation:ck-pop .35s ease-out, ck-fade .35s ease-in 1s forwards;
}
.ck-reaction-art{width:150px}
.ck-reaction span{
  background:var(--ink);color:var(--bg);font-family:var(--font-display);font-weight:800;
  padding:6px 16px;border-radius:var(--r-pill);font-size:17px;
}
@keyframes ck-fade{to{opacity:0;transform:translate(-50%,-64%) scale(.94)}}

@media (min-width:760px){
  .ck-hero{grid-template-columns:230px 1fr;align-items:center;padding:18px 24px 0}
  .ck-tiles{grid-template-columns:repeat(4,1fr)}
  .ck-hero-copy h1{font-size:30px}
}

/* ==========================================================================
   12. Casca no telefone e no tablet
   ========================================================================== */
@media (max-width:1099px){
  .sidebar{display:none!important}
  .workspace{margin-left:0;display:flex;flex-direction:column;height:100dvh}
  html:has(.workspace),body:has(.workspace){height:100%;overflow:hidden;overscroll-behavior:none}
  .topbar{position:sticky;top:0;flex:0 0 auto;height:var(--topbar-h);padding:0 16px;z-index:20}
  main{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px calc(var(--dock-h) + 22px)}
  footer{display:none}
  .mobile-dock{position:fixed;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;z-index:20;height:var(--dock-h);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-brand{display:flex!important}
}
@media (max-width:900px){
  .page-heading{margin:0 0 14px!important}
  .page-heading h1{font-size:clamp(22px,6vw,28px)!important;line-height:1.1;margin:0}
  .page-heading p{font-size:13.5px;margin:4px 0 0;max-width:36ch}
  main h2{font-size:19px}
  main section{margin-bottom:12px}
  .panel,.points-rules,.planner-card,.spanish-quest,.level-plan,.security-settings{padding:15px}
  .study-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .study-grid .deck{padding:14px}
  .study-grid .deck h2{font-size:15.5px;line-height:1.18}
  .study-grid .deck p{font-size:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:13px}
  .top-stats>span,.points,.theme-toggle{font-size:12px;padding:4px 9px}
  .decks{grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:360px){.ck-tiles,.study-grid,.decks{grid-template-columns:1fr!important}}

/* ==========================================================================
   13. Card de revisão
   ========================================================================== */
#review-dialog{
  width:min(980px,calc(100vw - 20px));height:min(88dvh,700px);max-height:88dvh;
  padding:0;border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);background:var(--surface);overflow:hidden;
}
@media (max-width:900px){#review-dialog{height:min(94dvh,860px);max-height:94dvh;width:calc(100vw - 16px)}}
#review-content{display:flex;flex-direction:column;height:100%;padding:14px 15px 13px;gap:10px;overflow:hidden}
#review-content .dialog-top{flex:0 0 auto;margin:0;display:flex;align-items:center;justify-content:space-between;gap:10px}
#review-content>.pill{flex:0 0 auto;align-self:flex-start}
#review-content .keyboard-note{margin:0;font-size:11px;text-align:center}
.review-flip{flex:1 1 auto;min-height:0;margin:0;perspective:1600px}
.review-flip-inner{height:100%}
.review-face{
  height:100%;min-height:0;border-radius:var(--r-lg);padding:20px;overflow:auto;
  border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);
  display:flex;flex-direction:column;justify-content:center;gap:8px;
}
.review-flip-front{background:var(--surface-2);color:var(--ink)}
.review-flip-front .eyebrow{color:var(--brand-ink)}
.review-flip-front h2{font-family:var(--font-display);font-size:clamp(21px,4.8vw,30px);line-height:1.2;margin:6px 0;color:var(--ink)}
.review-card-hint{color:var(--ink-2);font-size:13px;margin:0}
.review-flip-back{background:var(--gold-soft);color:var(--ink);justify-content:flex-start}
.review-flip-back>.eyebrow{color:var(--gold-ink)}
.review-flip-back .review-answer{background:transparent!important;border:0!important;padding:0!important;margin:0!important;color:var(--ink)!important;box-shadow:none!important}
.review-flip-back .review-answer h2{font-family:var(--font-display);font-size:clamp(22px,5vw,30px);margin:6px 0;color:var(--ink);line-height:1.2}
.review-flip-back .review-answer .muted,.review-flip-back .review-answer .details-meta{color:var(--ink-2)}
.review-answer .example,.review-flip-back .review-answer .example{
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-left:8px solid var(--brand);border-radius:var(--r-sm);padding:11px 13px;margin:10px 0 0;font-size:15px;box-shadow:var(--pop-sm);
}
.review-answer .answer-note,.review-flip-back .review-answer .answer-note{
  background:var(--surface);color:var(--ink-2);border:2px solid var(--ink-line);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin:10px 0 0;
}
.review-flip-back .review-answer .pill{background:var(--surface);color:var(--ink)}
.review-art{display:block;width:74px;height:74px;margin:0 auto -4px}
.review-art svg{width:100%;height:auto}
.review-reveal-button{flex:0 0 auto;width:100%;min-height:54px;margin:0}
.review-listen{margin:0 0 10px}
.review-listen-button{width:100%;min-height:48px;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);font-weight:800;border-radius:var(--r-pill)}
.review-listen-button:hover{background:var(--surface-2);transform:translate(-1px,-1px);box-shadow:var(--pop)}
.review-listen .audio-message{font-size:12px;margin:6px 0 0;text-align:center}
.review-grade-panel>.muted{margin:0 0 8px;font-weight:800;font-size:13px;text-align:center}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grade{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:62px;padding:8px 4px;border-radius:var(--r-md);border:var(--bw) solid var(--ink-line);
  font-family:var(--font-display);font-weight:800;font-size:14px;line-height:1.1;text-align:center;cursor:pointer;
  box-shadow:var(--pop-sm);transition:transform .1s ease, box-shadow .1s ease;
}
.grade small{font-family:var(--font-ui);font-size:10.5px;font-weight:700;opacity:.9}
.grade:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.grade:active{transform:translate(3px,3px);box-shadow:none}
.grade:nth-child(1){background:var(--red-soft);color:var(--red-ink)}
.grade:nth-child(2){background:var(--gold-soft);color:var(--gold-ink)}
.grade:nth-child(3){background:var(--olive-soft);color:var(--olive-ink)}
.grade:nth-child(4){background:var(--teal-soft);color:var(--teal-ink)}
.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.result-badge{display:none}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:8px 0}
.summary-grid>div{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);padding:12px;box-shadow:var(--pop-sm)}
.summary-grid strong{font-family:var(--font-display);font-size:26px;display:block}

/* ==========================================================================
   14. Jogos
   ========================================================================== */
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:14px 0}
@media (min-width:760px){.games-grid{grid-template-columns:repeat(4,1fr)}}
.game-card{
  position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  padding:14px;box-shadow:var(--pop);color:var(--ink);overflow:hidden;
  transition:transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .14s ease;
}
.game-card:hover{transform:translate(-2px,-3px);box-shadow:var(--pop-lg)}
.game-card:active{transform:translate(3px,4px);box-shadow:none}
.game-art{width:48px;height:48px;border-radius:14px;border:var(--bw) solid var(--ink-line);display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink)}
.game-art svg{width:26px;height:26px}
.game-card[data-game="story"] .game-art{background:var(--gold-soft);color:var(--gold-ink)}
.game-card[data-game="build"] .game-art{background:var(--olive-soft);color:var(--olive-ink)}
.game-card[data-game="listen"] .game-art{background:var(--teal-soft);color:var(--teal-ink)}
.game-card h3{font-family:var(--font-display);font-size:16.5px;margin:4px 0 0;line-height:1.15}
.game-card p{color:var(--ink-2);font-size:12px;margin:0;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.game-card .game-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.game-card .game-meta span{background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:2px 8px;font-size:10.5px;font-weight:800;color:var(--ink)}
.game-best{background:var(--gold)!important;color:#1E1711!important}
#game-dialog{
  width:min(760px,calc(100vw - 18px));max-height:94dvh;padding:0;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);background:var(--surface);color:var(--ink);overflow:hidden;box-shadow:var(--pop-lg);
}
.game-shell{display:flex;flex-direction:column;height:auto;max-height:min(94dvh,860px);padding:14px 15px 15px;gap:11px}
.game-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
.game-hud{display:flex;align-items:center;gap:7px}
.game-hud .hud-chip{padding:4px 10px;font-size:13px}
.hud-score{background:var(--gold-soft);color:var(--gold-ink)}
.hud-combo{background:var(--red-soft);color:var(--red-ink)}
.game-clock{background:var(--surface-2)}
.game-timer{flex:0 0 auto;height:12px;border-radius:var(--r-pill);background:var(--surface-3);border:2px solid var(--ink-line);overflow:hidden}
.game-timer i{display:block;height:100%;background:var(--olive);transition:width .25s linear}
.game-timer.is-low i{background:var(--red)}
.game-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:11px}
.game-question{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);padding:18px 16px;text-align:center;box-shadow:var(--pop-sm)}
.game-question h2{font-family:var(--font-display);font-size:clamp(20px,5.2vw,28px);line-height:1.2;margin:8px 0 0}
.game-question p{color:var(--ink-2);margin:6px 0 0;font-size:13.5px}
.game-options{display:grid;gap:9px}
.game-option{
  width:100%;text-align:left;background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:14px 15px;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer;box-shadow:var(--pop-sm);
  transition:transform .1s ease, box-shadow .1s ease, background .14s ease;
}
.game-option:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.game-option:active{transform:translate(3px,3px);box-shadow:none}
.game-option.is-right{background:var(--olive);color:#FFF8EC;animation:ck-pop .3s ease-out}
.game-option.is-wrong{background:var(--red);color:#FFF8EC;animation:ck-shake .34s ease-out}
.game-yesno{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.game-yesno button{min-height:64px;font-family:var(--font-display);font-size:20px;border-radius:var(--r-lg);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);cursor:pointer}
.game-yes{background:var(--olive-soft);color:var(--olive-ink)}
.game-no{background:var(--red-soft);color:var(--red-ink)}
.game-yesno button.is-right{background:var(--olive);color:#FFF8EC}
.game-yesno button.is-wrong{background:var(--red);color:#FFF8EC;animation:ck-shake .34s}
.game-pieces{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:52px}
.piece{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);padding:9px 14px;font-weight:800;font-size:15px;color:var(--ink);cursor:pointer;box-shadow:var(--pop-sm)}
.piece:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.piece.used{opacity:.3;pointer-events:none;box-shadow:none}
.game-slot{min-height:62px;background:var(--surface-2);border:var(--bw) dashed var(--ink-line);border-radius:var(--r-md);display:flex;flex-wrap:wrap;gap:8px;padding:9px;align-items:center}
.game-slot.is-right{border-style:solid;background:var(--olive-soft)}
.game-slot.is-wrong{border-style:solid;background:var(--red-soft);animation:ck-shake .34s}
.game-slot .piece{background:var(--brand);color:#FFF8EC}
.game-feedback{min-height:24px;text-align:center;font-weight:800;font-size:14px;font-family:var(--font-display)}
.game-feedback.ok{color:var(--olive-ink)}
.game-feedback.no{color:var(--red-ink)}
.game-actions{flex:0 0 auto;display:flex;gap:10px}
.game-actions .button{flex:1;min-height:52px}
.game-listen-button{
  width:100%;min-height:86px;border-radius:var(--r-lg);background:var(--teal-soft);color:var(--teal-ink);
  border:var(--bw) solid var(--ink-line);box-shadow:var(--pop);font-weight:800;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-display);
}
.game-listen-button svg{width:26px;height:26px}
.game-listen-button.is-playing{animation:ck-bob 1.2s ease-in-out infinite}
.game-result{text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center}
.game-result .score-big{font-family:var(--font-display);font-size:clamp(46px,14vw,70px);line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.game-result h2{font-family:var(--font-display);font-size:25px;margin:0}
.game-result p{color:var(--ink-2);margin:0}
.game-result .result-rows{display:grid;gap:8px;width:100%;margin-top:10px}
.game-result .result-rows>div{display:flex;justify-content:space-between;background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-md);padding:10px 13px;font-weight:800}
.game-intro{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.game-intro .game-mascot{width:150px}
.game-intro h2{font-family:var(--font-display);font-size:25px;margin:0}
.game-intro p{color:var(--ink-2);margin:0;max-width:40ch;font-size:14px}
.game-rules{display:grid;gap:6px;width:100%;margin-top:4px}
.game-rules div{background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-md);padding:9px 12px;font-size:13px;color:var(--ink-2);text-align:left;font-weight:700}
.game-mascot svg{width:100%;height:auto}

/* ==========================================================================
   15. Planner, tema e paisagem
   ========================================================================== */
.planner{display:grid;gap:12px;margin:14px 0}
.planner-card{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);padding:16px;box-shadow:var(--pop)}
.planner-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.planner-head h2{font-size:20px;margin:0}
.planner-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:13px}
.planner-day{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-sm);padding:8px 2px;font-size:11px;font-weight:800;color:var(--ink-2)}
.planner-day b{font-family:var(--font-display);font-size:16px;color:var(--ink)}
.planner-day.is-done{background:var(--olive);color:#FFF8EC}
.planner-day.is-done b{color:#FFF8EC}
.planner-day.is-today{box-shadow:var(--pop-sm)}
.goal-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.goal-option{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);padding:12px 8px;cursor:pointer;font-family:var(--font-display);font-weight:800;color:var(--ink);display:flex;flex-direction:column;gap:2px;align-items:center;font-size:15px;box-shadow:var(--pop-sm)}
.goal-option small{font-family:var(--font-ui);font-weight:700;color:var(--ink-2);font-size:11px}
.goal-option[aria-pressed="true"]{background:var(--brand);color:#FFF8EC}
.goal-option[aria-pressed="true"] small{color:var(--on-brand)}
.xp-bar{height:14px;border-radius:var(--r-pill);background:var(--surface-3);border:2px solid var(--ink-line);overflow:hidden;margin:10px 0 6px}
.xp-bar i{display:block;height:100%;background:var(--gold)}
.xp-line{display:flex;justify-content:space-between;font-size:12.5px;font-weight:800;color:var(--ink-2)}
.streak-flame{display:inline-flex;align-items:center;gap:6px;background:var(--red-soft);color:var(--red-ink);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:5px 12px;font-weight:800;font-size:13px}
.theme-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
.theme-choice button{background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);padding:12px 8px;font-weight:800;color:var(--ink);cursor:pointer;font-size:13px;display:flex;flex-direction:column;gap:6px;align-items:center;box-shadow:var(--pop-sm)}
.theme-choice button[aria-pressed="true"]{background:var(--brand);color:#FFF8EC}
.points.is-bumping{animation:ck-tada .5s ease-out}
.score-float{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:110;pointer-events:none;font-family:var(--font-display);font-weight:800;font-size:34px;color:var(--olive);animation:score-rise 1s ease-out forwards}
@keyframes score-rise{0%{opacity:0;transform:translate(-50%,10px) scale(.8)}25%{opacity:1;transform:translate(-50%,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}

@media (max-height:520px) and (orientation:landscape){
  :root{--dock-h:58px;--topbar-h:50px}
  #review-dialog,#game-dialog{width:calc(100vw - 18px);height:96dvh;max-height:96dvh}
  #review-content{padding:10px 12px 9px;gap:7px}
  .review-art,.review-card-hint,#review-content .keyboard-note{display:none}
  .review-face{padding:9px 14px}
  .review-flip-front h2{font-size:19px}
  .review-flip-back .review-answer h2{font-size:19px}
  .review-flip-back .review-answer{display:grid;grid-template-columns:1.05fr .95fr;gap:4px 14px;align-items:start}
  .review-flip-back .review-answer .flex{grid-column:1/-1;margin:0 0 2px}
  .review-flip-back .review-answer .example{grid-column:2;grid-row:2/4;margin:0;font-size:13.5px}
  .review-flip-back .review-answer .answer-note{grid-column:2;margin:0;font-size:12px}
  .review-listen-button{min-height:38px}
  .grade{min-height:46px;font-size:12.5px}
  .game-shell{max-height:96dvh;padding:10px 12px 12px;gap:8px}
  .game-options{grid-template-columns:1fr 1fr}
  .game-question{padding:11px 14px}
  .game-question h2{font-size:20px}
  .ck-hero{grid-template-columns:150px 1fr}
}

/* 16. Ajustes finos v29 */
@media (max-width:1099px){
  .top-stats>span[title],.top-stats>.points{display:none}
  .topbar{gap:10px}
  .mobile-brand .brand-word{font-size:20px}
}
.ck-hero{grid-template-columns:40% 1fr;padding:14px 16px 0;align-items:stretch}
.ck-hero:before{inset:auto -40% -70% 30%;height:170px;opacity:.7}
.ck-hero-art{display:flex;align-items:flex-end;margin:0 0 -2px}
.ck-hero-art svg{width:100%;max-width:190px;margin:0 auto}
.ck-hero-copy{padding:10px 0 18px;align-self:center}
.ck-strip-art{align-self:end}
.review-top-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto}
.review-dots{display:inline-flex;gap:5px;align-items:center}
.review-dots i{width:9px;height:9px;border-radius:50%;border:2px solid var(--ink-line);background:var(--surface-3)}
.review-dots i.done{background:var(--olive)}
.review-dots i.now{background:var(--gold);transform:scale(1.25)}
.review-flip-front{position:relative}
.review-mascot{position:absolute;right:-6px;bottom:-6px;width:96px;opacity:.95;pointer-events:none}
.review-mascot svg{width:100%;height:auto}
@media (max-width:420px){.review-mascot{width:76px}}
.ck-strip-games{margin-bottom:6px}
.ck-quest .button.dark.ck-quest-cta{background:var(--surface);color:var(--ink)}
.ck-quest .button.dark.ck-quest-cta:hover{background:var(--surface-2)}
.ck-hero{padding-bottom:0}
.ck-hero-art{margin-bottom:-6px}
.ck-hero-art svg{max-height:184px}
:root[data-theme="dark"] .review-flip-back{background:var(--surface-2);border-color:var(--ink-line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .review-flip-back{background:var(--surface-2)}}
.review-listen-button svg{width:20px;height:20px;margin-right:6px}
.review-listen-button{display:flex;align-items:center;justify-content:center}
.grade small{opacity:1;color:inherit}
.auth-shell{position:relative}
.auth-mascot{width:150px;margin:0 auto -34px;position:relative;z-index:2}
.auth-mascot svg{width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(30,23,17,.14))}
.auth-card{padding-top:44px!important}
.quest-mascot{display:block;width:120px}
.quest-mascot svg{width:100%;height:auto}
.points-art{width:120px}
.points-art svg{width:100%;height:auto}
.streak-flame svg{width:16px;height:16px}
progress{-webkit-appearance:none;appearance:none;width:100%;height:14px;border:2px solid var(--ink-line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface-3)}
progress::-webkit-progress-bar{background:var(--surface-3)}
progress::-webkit-progress-value{background:var(--brand)}
progress::-moz-progress-bar{background:var(--brand)}
.points-pass progress{background:rgba(255,255,255,.55)}
.points-pass progress::-webkit-progress-bar{background:rgba(255,255,255,.55)}
.points-pass progress::-webkit-progress-value{background:var(--ink)}

/* 17. Telas muito baixas: nada de conteúdo preso sem rolagem */
@media (max-height:480px){
  html:has(.workspace),body:has(.workspace){height:auto;overflow:auto}
  .workspace{height:auto;min-height:100dvh}
  main{overflow:visible}
  .mobile-dock{position:sticky}
}
.auth-body,.admin-body{overflow:auto!important;height:auto!important}

/* ==========================================================================
   18. Telas v31 — trilha, sessão, fila e biblioteca
   ========================================================================== */
.study-back{display:inline-block;margin-bottom:10px}

/* Trilha de missões */
.trilha{display:grid;gap:10px;position:relative}
.trilha:before{content:"";position:absolute;left:29px;top:18px;bottom:18px;width:3px;border-left:3px dashed color-mix(in srgb, var(--ink) 22%, transparent)}
.missao{
  position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:12px 14px;box-shadow:var(--pop-sm);text-decoration:none;color:var(--ink);
  transition:transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .14s ease;
}
.missao:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.missao:active{transform:translate(3px,3px);box-shadow:none}
.missao-selo{
  width:30px;height:30px;border-radius:50%;background:var(--surface-3);border:var(--bw) solid var(--ink-line);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:14px;z-index:1;
}
.missao-ico{width:40px;height:40px;border-radius:12px;border:var(--bw) solid var(--ink-line);display:grid;place-items:center}
.missao-ico svg{width:21px;height:21px}
.missao[data-tone="brand"] .missao-ico{background:var(--brand-soft);color:var(--brand-ink)}
.missao[data-tone="gold"] .missao-ico{background:var(--gold-soft);color:var(--gold-ink)}
.missao[data-tone="red"] .missao-ico{background:var(--red-soft);color:var(--red-ink)}
.missao[data-tone="teal"] .missao-ico{background:var(--teal-soft);color:var(--teal-ink)}
.missao[data-tone="olive"] .missao-ico{background:var(--olive-soft);color:var(--olive-ink)}
.missao-txt{display:flex;flex-direction:column;min-width:0}
.missao-txt b{font-family:var(--font-display);font-size:17px;line-height:1.1}
.missao-txt small{color:var(--ink-2);font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.missao-badge{
  background:var(--gold);color:#1E1711;border:2px solid var(--ink-line);border-radius:var(--r-pill);
  min-width:26px;height:26px;display:grid;place-items:center;padding:0 8px;font-weight:800;font-size:13px;
}
.missao-seta{color:var(--ink-3)} .missao-seta svg{width:20px;height:20px}

/* Sessão de revisão */
.sessao-card{
  display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:end;
  background:var(--brand);color:#FFFBF0;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop);padding:14px 16px 0;overflow:hidden;margin-bottom:12px;
}
.sessao-card.is-zen{background:var(--olive)}
.sessao-card .eyebrow{color:rgba(255,251,240,.8)}
.sessao-art{align-self:end;margin-bottom:-4px}
.sessao-art svg{width:100%;height:auto}
.sessao-info{padding:14px 0}
.sessao-info h1{color:#FFFBF0;font-size:clamp(21px,5.6vw,27px);margin:2px 0 8px;line-height:1.1}
.sessao-chips{display:flex;gap:6px;flex-wrap:wrap}
.sessao-chips .pill{background:rgba(255,251,240,.92);border-color:var(--ink-line);color:#1E1711}
.sessao-cta{grid-column:1/-1;margin:0 0 14px;min-height:56px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--surface);color:var(--ink)}
.sessao-cta:hover{background:var(--surface-2)}
.dica-linha{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:12px 14px;box-shadow:var(--pop-sm);
}
.dica-linha span{color:var(--gold-ink)} .dica-linha span svg{width:22px;height:22px}
.dica-linha p{margin:0;font-size:13px;color:var(--ink);font-weight:600}

/* Fila */
.fila{display:grid;gap:8px}
.fila-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:11px 13px;box-shadow:var(--pop-sm);cursor:pointer;color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.fila-item:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.fila-item:active{transform:translate(3px,3px);box-shadow:none}
.fila-item.is-off{opacity:.65;cursor:default;box-shadow:none}
.fila-pill{background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:2px 9px;font-size:11.5px;font-weight:800}
.fila-txt{display:flex;flex-direction:column;min-width:0}
.fila-txt b{font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila-txt small{color:var(--ink-2);font-size:11.5px;font-weight:700}
.fila-seta{color:var(--ink-3)} .fila-seta svg{width:18px;height:18px}

/* Biblioteca */
.biblio-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.biblio-topo h1{font-size:clamp(22px,6vw,28px);margin:0}
.biblio-topo p{margin:2px 0 0;font-size:13px}
.biblio-novo{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 15px;white-space:nowrap}
.biblio-novo svg{width:18px;height:18px}
.busca{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin-bottom:10px;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);
  padding:4px 14px;box-shadow:var(--pop-sm);
}
.busca span{color:var(--ink-3);display:flex} .busca span svg{width:19px;height:19px}
.busca input{border:0;box-shadow:none;background:transparent;padding:11px 0;font-size:15px;width:100%}
.busca input:focus{box-shadow:none;outline:0}
/* Filtro que rola de lado esconde opção: o chip que ficou fora da tela não
   existe para quem não sabe que ele está ali. Quebrando linha, todos aparecem. */
.chips-linha{display:flex;flex-wrap:wrap;gap:7px;padding:2px 2px 8px}
.chip{
  flex:0 0 auto;background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);
  padding:8px 14px;font-weight:800;font-size:13px;color:var(--ink);cursor:pointer;box-shadow:var(--pop-sm);
  transition:transform .1s ease, box-shadow .1s ease;
}
.chip:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.chip.on{background:var(--brand);color:#FFFBF0}
.biblio-acoes{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 14px}
.biblio-acoes .button{flex:1;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13.5px}
.biblio-acoes svg{width:17px;height:17px}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.chunk-card{padding:14px;display:flex;flex-direction:column;gap:6px}
.chunk-top{display:flex;gap:5px;flex-wrap:wrap}
.pill-video{background:var(--red-soft);color:var(--red-ink);display:inline-flex;align-items:center;gap:4px}
.pill-video svg{width:11px;height:11px}
.chunk-card h3{font-family:var(--font-display);font-size:18px;line-height:1.18;margin:2px 0 0}
.chunk-card p{margin:0;color:var(--ink-2);font-size:13.5px}
.chunk-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.chunk-estado{font-size:11.5px;font-weight:800}
.chunk-botoes{display:flex;gap:8px;align-items:center}
.chunk-abrir{min-height:38px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.chunk-abrir svg{width:15px;height:15px}
.vazio-biblio{grid-column:1/-1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px}
.vazio-art{width:130px}
.vazio-art svg{width:100%;height:auto}
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0;font-weight:800}
.pagination .button{min-height:42px;padding:0 14px}
@media (max-width:600px){
  .sessao-card{grid-template-columns:96px 1fr}
  .biblio-topo h1{font-size:23px}
  .library-grid{grid-template-columns:1fr}
}

/* 19. Correções de largura e especificidade das telas v31 */
/* clip recorta sem criar caixa de rolagem — hidden criaria, e com ela vinham
   uma barra horizontal fantasma e o position:sticky dos filhos quebrado. */
main,#view{max-width:100%;overflow-x:clip}
#view>*{min-width:0}
.busca input{min-width:0;width:100%}
.chips-linha{max-width:100%}
.library-grid,.fila,.trilha{min-width:0}
.chunk-card:nth-child(n){background:var(--surface);color:var(--ink)}
.chunk-card:nth-child(n) p,.chunk-card:nth-child(n) .muted{color:var(--ink-2)}
.sessao-card .button.dark.sessao-cta{background:var(--surface);color:var(--ink)}
.sessao-card .button.dark.sessao-cta:hover{background:var(--surface-2)}
.biblio-acoes{flex-wrap:nowrap}
.biblio-acoes .button{flex:1 1 0;min-width:0;padding:0 10px}
@media (max-width:420px){
  .biblio-acoes{flex-wrap:wrap}
  .biblio-acoes .button{flex:1 1 100%}
  .chip{padding:7px 12px;font-size:12.5px}
}

/* 20. Sala de conversa e conquistas */
.chunk-rodape{margin-top:6px}
.sala-nova .call-heading{
  display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:center;
  background:var(--teal-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  padding:12px 14px;box-shadow:var(--pop-sm);margin-bottom:12px;
}
.sala-nova .call-avatar{width:86px;display:block}
.sala-nova .call-avatar svg{width:100%;height:auto}
.sala-nova .call-heading h1{font-size:21px;margin:0}
.sala-nova .call-heading p{margin:2px 0 0;font-size:13px;color:var(--teal-ink);font-weight:700}
.sala-nova .ai-messages{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);padding:12px;box-shadow:var(--pop-sm);min-height:180px}
.sala-nova .ai-form{margin-top:10px}
.sala-nova .ai-form textarea{border-radius:var(--r-lg);min-height:56px}
.conquistas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.conquista{
  display:flex;flex-direction:column;gap:3px;background:var(--surface-2);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:13px;box-shadow:var(--pop-sm);opacity:.65;
}
.conquista.is-on{opacity:1;background:var(--gold-soft)}
.conquista-ico{
  width:38px;height:38px;border-radius:12px;border:var(--bw) solid var(--ink-line);display:grid;place-items:center;
  background:var(--surface);color:var(--ink-3);margin-bottom:5px;
}
.conquista.is-on .conquista-ico{background:var(--gold);color:#1E1711}
.conquista b{font-family:var(--font-display);font-size:15px;line-height:1.15}
.conquista small{color:var(--ink-2);font-size:11.5px;font-weight:700}
.recordes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.recorde{
  display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);padding:11px 14px;box-shadow:var(--pop-sm);font-weight:800;
}
.recorde b{font-family:var(--font-display);font-size:20px;color:var(--brand-ink)}

/* ==========================================================================
   21. Duelo, ranking e insígnias
   ========================================================================== */
.duelo-hero{
  display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:end;
  background:var(--red);color:#FFFBF0;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop);padding:14px 16px 0;overflow:hidden;margin-bottom:14px;
}
.duelo-hero .eyebrow{color:rgba(255,251,240,.82)}
.duelo-hero h1{color:#FFFBF0;font-size:clamp(21px,5.6vw,26px);margin:2px 0 6px}
.duelo-hero p{margin:0 0 14px;font-size:13.5px;color:rgba(255,251,240,.92)}
.duelo-hero-art{align-self:end;margin-bottom:-4px}
.duelo-hero-art svg{width:100%;height:auto}
.duelo-acoes{display:grid;gap:10px;margin-bottom:6px}
.duelo-criar{min-height:54px;display:flex;align-items:center;justify-content:center;gap:8px}
.duelo-entrar{display:flex;gap:8px}
.duelo-entrar input{
  flex:1;min-width:0;text-transform:uppercase;letter-spacing:.22em;font-family:var(--font-display);
  font-size:20px;text-align:center;padding:12px;
}
.duelo-entrar .button{min-height:50px;padding:0 18px}
.duelo-erro{color:var(--red-ink);font-weight:800;min-height:18px;margin:6px 0 0;font-size:13px}
.duelo-regras{margin-top:14px}
.duelo-codigo-bloco{
  text-align:center;background:var(--gold-soft);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:14px;box-shadow:var(--pop-sm);
}
.duelo-codigo-bloco>b{
  display:block;font-family:var(--font-display);font-size:44px;letter-spacing:.14em;line-height:1.1;
  color:var(--ink);margin:4px 0;
}
.duelo-codigo-bloco p{margin:0;font-size:12.5px}
.duelo-placas{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:14px}
.duelo-placa{
  text-align:center;background:var(--surface-2);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:12px 8px;box-shadow:var(--pop-sm);
}
.duelo-placa.is-pronto{background:var(--olive-soft)}
.duelo-placa.is-vazio{opacity:.7;border-style:dashed}
.duelo-placa b{display:block;font-family:var(--font-display);font-size:15px;margin-top:4px}
.duelo-placa small{color:var(--ink-2);font-size:11.5px;font-weight:700}
.duelo-avatar{width:76px;margin:0 auto}
.duelo-avatar svg{width:100%;height:auto}
.duelo-interrogacao{font-family:var(--font-display);font-size:42px;color:var(--ink-3)}
.duelo-versus{font-family:var(--font-display);font-weight:800;color:var(--brand-ink);font-size:16px}
.duelo-barra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:2px}
.duelo-lado small{font-size:11.5px;font-weight:800;color:var(--ink-2);display:block;margin-bottom:3px}
.duelo-lado i{display:block;height:9px;border-radius:var(--r-pill);background:var(--brand);border:2px solid var(--ink-line);transition:width .3s ease}
.duelo-lado.is-rival{text-align:right}
.duelo-lado.is-rival i{background:var(--teal)}
.duelo-final{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;width:100%;margin:10px 0}
.duelo-final-lado{
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:12px 8px;text-align:center;box-shadow:var(--pop-sm);
}
.duelo-final-lado.is-vencedor{background:var(--gold-soft)}
.duelo-final-lado b{display:block;font-family:var(--font-display);font-size:30px;line-height:1}
.duelo-final-lado span{display:block;font-weight:800;font-size:13px;margin-top:2px}
.duelo-final-lado small{color:var(--ink-2);font-size:11.5px;font-weight:700}
.game-card-duelo{text-decoration:none;grid-column:1/-1}
.game-card-duelo .game-art{background:var(--red-soft);color:var(--red-ink)}

/* Ranking */
.ranking-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ranking-topo h1{font-size:clamp(22px,6vw,28px);margin:2px 0 0}
.ranking-abas{display:flex;gap:6px;background:var(--surface-3);border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);padding:4px}
.ranking-abas button{border:0;background:transparent;color:var(--ink-2);font-weight:800;font-size:12.5px;padding:7px 14px;border-radius:var(--r-pill);cursor:pointer;font-family:var(--font-ui)}
.ranking-abas button[aria-pressed="true"]{background:var(--brand);color:#FFFBF0}
.podio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;align-items:end;margin-bottom:14px}
.podio-lugar{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:12px 6px;text-align:center;box-shadow:var(--pop-sm);position:relative;
}
.podio-lugar.p1{background:var(--gold-soft);padding-top:18px}
.podio-lugar.p2{background:var(--surface-2)}
.podio-lugar.p3{background:var(--brand-soft)}
.podio-lugar.is-eu{outline:3px solid var(--brand);outline-offset:2px}
.podio-medalha{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:13px;
  border:var(--bw) solid var(--ink-line);background:var(--surface);
}
.podio-medalha.ouro{background:var(--gold);color:#1E1711}
.podio-medalha.prata{background:#D8D2C6;color:#1E1711}
.podio-medalha.bronze{background:#D9A066;color:#1E1711}
.podio-avatar{width:44px;height:44px;display:block;margin:2px auto 4px;border-radius:50%;border:2px solid var(--ink-line);background:var(--surface)}
.podio-lugar b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podio-pontos{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--brand-ink)}
.ranking-lista .is-eu{outline:3px solid var(--brand);outline-offset:1px;opacity:1}
.ranking-pontos{font-family:var(--font-display);font-size:18px;color:var(--ink)}
.ranking-minha{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;
  background:var(--ink);color:var(--bg);border-radius:var(--r-pill);padding:11px 16px;font-weight:800;
}
.ranking-minha b{font-family:var(--font-display);font-size:20px}
.ranking-minha small{opacity:.8;font-weight:700}
.ranking-carregando{padding:40px 0}

/* Insígnias */
.insignias{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.insignia{
  display:flex;flex-direction:column;gap:3px;background:var(--surface-2);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:13px;box-shadow:var(--pop-sm);opacity:.72;
}
.insignia.n1,.insignia.n2,.insignia.n3{opacity:1}
.insignia.n1{background:color-mix(in srgb, #D9A066 26%, var(--surface))}
.insignia.n2{background:color-mix(in srgb, #D8D2C6 40%, var(--surface))}
.insignia.n3{background:var(--gold-soft)}
.insignia-ico{
  width:40px;height:40px;border-radius:12px;border:var(--bw) solid var(--ink-line);display:grid;place-items:center;
  background:var(--surface);color:var(--ink-3);margin-bottom:5px;
}
.insignia.n1 .insignia-ico{background:#D9A066;color:#1E1711}
.insignia.n2 .insignia-ico{background:#D8D2C6;color:#1E1711}
.insignia.n3 .insignia-ico{background:var(--gold);color:#1E1711}
.insignia b{font-family:var(--font-display);font-size:15.5px;line-height:1.15}
.insignia small{color:var(--ink);font-size:11.5px;font-weight:700}
.insignia.n1 small,.insignia.n2 small,.insignia.n3 small{text-transform:capitalize}
.insignia-barra{display:block;height:8px;border-radius:var(--r-pill);background:var(--surface-3);border:2px solid var(--ink-line);overflow:hidden;margin-top:6px}
.insignia-barra i{display:block;height:100%;background:var(--brand)}
.insignia-meta{font-size:11px;font-weight:800;color:var(--ink);margin-top:3px}
.insignia.is-grande b{font-size:17px}
@media (max-width:600px){
  .duelo-hero{grid-template-columns:92px 1fr}
  .duelo-codigo-bloco>b{font-size:36px}
  .podio-lugar b{font-size:12px}
}
.button>svg,.button i>svg{width:18px;height:18px;flex:0 0 auto}
.duelo-criar>svg{width:20px;height:20px}
.biblio-acoes .button>svg,.sessao-cta>svg,.ck-quest-cta>svg{width:18px;height:18px}
.duelo-hero-art{min-width:0}

/* ==========================================================================
   22. Toque e espaçamento padronizados (regra do app inteiro)
   ========================================================================== */
.hud-chip>svg,.hud-chip i>svg{width:16px;height:16px;flex:0 0 auto}
.podio:has(.podio-lugar:nth-child(2):last-child){grid-template-columns:1fr 1fr}
.podio:has(.podio-lugar:only-child){grid-template-columns:1fr}

/* alvo mínimo de 44px em tudo que se toca */
.button,.chip,.grade,.game-option,.ck-tile,.missao,.fila-item,.goal-option,.theme-choice button,
.mobile-dock a,.icon-button,.piece,.game-yesno button,.ranking-abas button,.auth-tab{min-height:44px}
.icon-button{min-width:44px}
.text-button{min-height:36px;display:inline-flex;align-items:center}
.mobile-dock a{padding:6px 2px}

/* escala de espaçamento: 6 / 10 / 14 / 18 */
main section,main .ck-tiles,main .games-grid,main .trilha,main .insignias,main .fila,main .decks{margin-bottom:14px}
main .section-heading{margin:18px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
main .section-heading h2{margin:0}
.panel,.planner-card,.conta-card{padding:16px}
@media (max-width:420px){
  .panel,.planner-card{padding:14px}
  main{padding-left:14px;padding-right:14px}
}

/* rolagem mais macia e sem “pulo” ao trocar de tela */
main{scroll-behavior:smooth;scrollbar-width:thin}
#view{padding-bottom:6px}

/* paisagem: duelo e ranking também cabem */
@media (max-height:520px) and (orientation:landscape){
  .duelo-hero{grid-template-columns:110px 1fr;padding:10px 14px 0}
  .duelo-codigo-bloco>b{font-size:30px}
  .duelo-placas{margin-top:10px}
  .duelo-avatar{width:54px}
  .podio-avatar{width:36px;height:36px}
  .game-options{grid-template-columns:1fr 1fr}
}

/* 23. Paisagem: o card manda no espaço (vem depois das regras de toque) */
@media (max-height:520px) and (orientation:landscape){
  #review-content{padding:8px 12px 8px;gap:6px}
  #review-content .dialog-top{margin:0}
  .review-listen-button{min-height:36px!important;font-size:13px}
  .review-listen{margin:0 0 6px}
  .grade{min-height:42px!important;font-size:12.5px;padding:4px}
  .grade small{font-size:10px}
  .review-grade-panel>.muted{margin:0 0 4px;font-size:11.5px}
  .review-face{padding:8px 12px;gap:2px}
  .review-flip-back .review-answer h2{font-size:18px;margin:2px 0}
  .review-flip-back .review-answer .example{padding:7px 10px;font-size:12.5px;margin:6px 0 0}
  .review-flip-back .review-answer .answer-note{padding:6px 9px;font-size:11.5px;margin:6px 0 0}
  .review-flip-back .review-answer .pill{font-size:10.5px;padding:1px 7px}
  .review-flip-front h2{font-size:17px}
  .icon-button{min-height:36px;min-width:36px}
  main section{margin-bottom:10px}
}
.duelo-convite{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.duelo-convite .button{min-height:44px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px}
.duelo-convite small{font-weight:800;color:var(--olive-ink);font-size:12px;min-height:14px;word-break:break-all;text-align:center}
.duelo-convidado-fim{display:grid;gap:8px;padding:0 0 4px;text-align:center}
.duelo-convidado-fim p{margin:0;color:var(--ink-2);font-weight:700;font-size:13px}
.duelo-convidado-fim .button{min-height:52px}

/* =============================================================================
   24 · v34 — modos de jogo, pódio de verdade, perfil e boas-vindas
   ============================================================================= */

/* ---- 24.1 escolha de modo (duelo / corrida / relâmpago) ---- */
.modo-lista{display:grid;gap:10px;margin-bottom:16px}
.modo-card{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;text-align:left;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:12px 14px;box-shadow:var(--pop-sm);cursor:pointer;font-family:var(--font-ui);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;min-height:64px;
}
.modo-card:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink-line)}
.modo-card .modo-ico{
  width:42px;height:42px;display:grid;place-items:center;border-radius:14px;
  border:var(--bw) solid var(--ink-line);background:var(--surface-3);color:var(--ink);flex:none;
}
.modo-card .modo-ico svg{width:22px;height:22px}
.modo-card .modo-txt{display:grid;gap:2px;min-width:0}
.modo-card .modo-txt b{font-family:var(--font-display);font-size:16px;color:var(--ink)}
.modo-card .modo-txt small{color:var(--ink-2);font-weight:700;font-size:12.5px;line-height:1.35}
.modo-card .modo-tag{
  font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill);
  padding:4px 9px;color:var(--ink-2);white-space:nowrap;flex:none;
}
.modo-card.is-on{background:var(--gold-soft)}
.modo-card.is-on .modo-ico{background:var(--gold);color:var(--on-gold)}
.modo-card.is-on .modo-tag{background:var(--ink);color:var(--bg);border-color:var(--ink-line)}
.modo-card.is-on::after{
  content:"✓";position:absolute;
}
.modo-card{position:relative}
.modo-card.is-on::after{top:-9px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#FFFBF0;
  display:grid;place-items:center;font-weight:900;font-size:13px;border:var(--bw) solid var(--ink-line)}
@media (max-width:420px){
  .modo-card{grid-template-columns:auto 1fr;gap:10px;padding:11px 12px}
  .modo-card .modo-tag{grid-column:2;justify-self:start;margin-top:2px}
}

/* cronômetro geral e dica de corrida */
.hud-chip.hud-tempo b{font-variant-numeric:tabular-nums}
.hud-chip.hud-tempo.is-low{background:var(--brand);color:#FFFBF0;animation:ck-pulse .7s infinite}
@keyframes ck-pulse{50%{transform:scale(1.06)}}
.duelo-dica{
  margin:8px 0 0;text-align:center;font-weight:800;font-size:12.5px;color:var(--olive-ink);
  background:var(--olive-soft);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:6px 12px;
}

/* ---- 24.2 pódio ---- */
.podio{
  display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;
  margin:4px auto 20px;padding:16px 8px 0;max-width:460px;
  border-bottom:var(--bw) solid var(--ink-line);
}
.podio-lugar{
  background:transparent;border:0;box-shadow:none;padding:0;text-align:center;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.podio-lugar.p1,.podio-lugar.p2,.podio-lugar.p3{background:transparent;padding-top:0}
.podio-lugar.is-eu{outline:0}
.podio-coroa{width:26px;height:26px;color:var(--gold-ink);display:block}
.podio-coroa svg{width:26px;height:26px}
.podio-face{
  position:relative;border:0;background:transparent;padding:0;cursor:pointer;line-height:0;
  transition:transform .12s ease;
}
.podio-face:active{transform:scale(.94)}
.podio-face img{
  width:58px;height:58px;border-radius:50%;background:var(--surface);
  border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);display:block;
}
.podio-lugar.p1 .podio-face img{width:76px;height:76px}
.podio-lugar.is-eu .podio-face img{outline:3px solid var(--brand);outline-offset:2px}
.podio-medalha{
  position:absolute;top:auto;bottom:-8px;left:50%;transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:13px;
  border:2.5px solid var(--ink-line);background:var(--surface);
}
.podio-nome{
  display:block;font-family:var(--font-display);font-size:13.5px;color:var(--ink);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px;
}
.podio-nome i{font-style:normal;color:var(--brand-ink);font-size:11px}
.podio-pts{
  font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--brand-ink);line-height:1;
}
.podio-pts small{font-size:10.5px;font-weight:800;color:var(--ink-2);margin-left:2px}
.podio-base{
  width:100%;margin-top:6px;border:var(--bw) solid var(--ink-line);border-bottom:0;
  border-radius:12px 12px 0 0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;color:var(--ink);
}
.podio-lugar.p1 .podio-base{height:86px;background:var(--gold);font-size:30px}
.podio-lugar.p2 .podio-base{height:62px;background:var(--surface-3);font-size:24px}
.podio-lugar.p3 .podio-base{height:46px;background:var(--brand-soft);font-size:22px}
.podio-lugar.is-vazio .podio-base{opacity:.45}
.podio-lugar.is-vazio .podio-base i{opacity:.5}
.podio-base i{font-style:normal}
@media (max-width:380px){
  .podio-face img{width:48px;height:48px}
  .podio-lugar.p1 .podio-face img{width:62px;height:62px}
  .podio-nome{font-size:12px}
}

/* ---- 24.3 lista do ranking ---- */
.ranking-strip{margin-bottom:12px}
.ranking-abas{margin:0 0 12px;width:max-content}
.ranking-lista{gap:8px}
.ranking-linha{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;width:100%;
  text-align:left;cursor:pointer;
}
.ranking-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--surface);
  border:2px solid var(--ink-line);display:block;flex:none;
}
.ranking-linha .fila-txt{min-width:0;display:grid;gap:3px}
.ranking-trilho{display:block;height:6px;border-radius:99px;background:var(--surface-3);border:1.5px solid var(--ink-line);overflow:hidden}
.ranking-trilho i{display:block;height:100%;background:var(--brand);border-radius:99px}
.ranking-lista .is-eu{outline:3px solid var(--brand);outline-offset:1px;opacity:1;background:var(--gold-soft)}
.ranking-minha{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;
  margin-top:14px;background:var(--ink);color:var(--bg);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:12px 14px;font-weight:800;cursor:pointer;text-align:left;
  box-shadow:var(--pop-sm);transition:transform .12s ease,box-shadow .12s ease;
}
.ranking-minha:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink-line)}
.ranking-minha img{width:40px;height:40px;border-radius:50%;background:var(--surface);border:2px solid var(--bg)}
.ranking-minha span{display:grid;gap:1px}
.ranking-minha small{opacity:.75;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.ranking-minha b{font-family:var(--font-display);font-size:22px}
.ranking-minha-cta{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;opacity:.85;white-space:nowrap;
}
.ranking-minha-cta svg{width:14px;height:14px}

/* ---- 24.4 perfil ---- */
.perfil-capa{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  box-shadow:var(--pop);padding:20px 16px 18px;text-align:center;margin-bottom:14px;position:relative;overflow:hidden;
}
.perfil-capa::before{
  content:"";position:absolute;inset:0 0 auto;height:96px;background:var(--gold-soft);
  border-bottom:var(--bw) solid var(--ink-line);
}
.perfil-avatar{position:relative;width:92px;height:92px;margin:14px auto 8px}
.perfil-avatar img{
  width:100%;height:100%;border-radius:50%;background:var(--surface);
  border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);display:block;
}
.perfil-capa h1{position:relative;font-size:clamp(21px,5.5vw,27px);margin:0}
.perfil-sub{position:relative;color:var(--ink-3);font-weight:700;font-size:12.5px;margin:2px 0 12px}
.perfil-pills{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.perfil-pill{
  display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;
  background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:5px 11px;color:var(--ink-2);
}
.perfil-pill svg{width:15px;height:15px}
.perfil-numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.perfil-num{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop-sm);padding:11px 8px;text-align:center;display:grid;gap:1px;
}
.perfil-num{align-content:start}
.perfil-num span{font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-3);line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.perfil-num b{font-family:var(--font-display);font-size:21px;color:var(--ink);line-height:1.1}
.perfil-num small{font-size:10.5px;color:var(--ink-3);font-weight:700;line-height:1.25}
@media (max-width:360px){.perfil-numeros{grid-template-columns:repeat(2,1fr)}}

/* ---- 24.5 boas-vindas ---- */
/* tela cheia: no primeiro acesso o app some e fica só o Cervantes */
body.modo-boasvindas .topbar,
body.modo-boasvindas .mobile-dock,
body.modo-boasvindas .sidebar,
body.modo-boasvindas .breadcrumb{display:none!important}
body.modo-boasvindas main,
body.modo-boasvindas .workspace{padding:0!important;margin:0!important;height:100dvh;max-height:100dvh}
body.modo-boasvindas #view{height:100dvh;overflow:auto;-webkit-overflow-scrolling:touch}
.onb{
  max-width:520px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;
  gap:14px;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.onb-topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.onb-pontos{display:flex;gap:6px}
.onb-pontos i{
  width:26px;height:7px;border-radius:99px;background:var(--surface-3);
  border:2px solid var(--ink-line);transition:width .2s ease,background .2s ease;
}
.onb-pontos i.is-feito{background:var(--olive)}
.onb-pontos i.is-on{width:40px;background:var(--brand)}
.onb-pular{color:var(--ink-3)}
.onb-card{
  flex:0 1 auto;background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  box-shadow:var(--pop);padding:20px 18px 22px;text-align:center;
  animation:onb-in .32s cubic-bezier(.2,.8,.3,1.2) both;
}
@keyframes onb-in{from{opacity:0;transform:translateY(12px) scale(.98)}}
.onb-art{width:min(180px,46vw);margin:0 auto 6px}
.onb-art svg{width:100%;height:auto}
.onb-card h1{font-size:clamp(23px,6.2vw,30px);margin:6px 0 8px}
.onb-card>p{color:var(--ink-2);font-weight:700;font-size:14.5px;line-height:1.5;margin:0}
.onb-exemplo{
  margin-top:16px;background:var(--gold-soft);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:14px;display:grid;gap:4px;
}
.onb-chunk{font-family:var(--font-display);font-size:19px;color:var(--brand-ink)}
.onb-trad{font-weight:800;font-size:13px;color:var(--ink-2)}
.onb-exemplo p{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--ink-2)}
.onb-passos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.onb-passos>div{
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:11px 6px;display:grid;gap:2px;justify-items:center;align-content:start;
}
.onb-passos span{
  width:36px;height:36px;display:grid;place-items:center;border-radius:12px;
  background:var(--teal-soft);border:2px solid var(--ink-line);color:var(--teal-ink);
}
.onb-passos span svg{width:19px;height:19px}
.onb-passos b{font-family:var(--font-display);font-size:13.5px}
.onb-passos small{font-size:11px;color:var(--ink-3);font-weight:700;line-height:1.25;text-align:center}
.onb-selos{display:flex;justify-content:center;gap:10px;margin-top:16px}
.onb-selos span{
  width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);background:var(--gold-soft);color:var(--gold-ink);
}
.onb-selos span:nth-child(2){background:var(--brand-soft);color:var(--brand-ink)}
.onb-selos span:nth-child(3){background:var(--teal-soft);color:var(--teal-ink)}
.onb-selos span:nth-child(4){background:var(--olive-soft);color:var(--olive-ink)}
.onb-selos span svg{width:24px;height:24px}
.onb-acoes{display:flex;gap:10px}
.onb-acoes .button{flex:1;min-height:54px;justify-content:center}
/* telas baixas (celular deitado): o Cervantes vai para o lado */
@media (max-height:620px){
  .onb{gap:10px;padding-top:12px;padding-bottom:12px;max-width:760px}
  .onb-card{
    padding:14px 16px 16px;text-align:left;
    display:grid;grid-template-columns:118px 1fr;gap:2px 16px;align-content:center;
  }
  .onb-art{width:118px;margin:0;grid-row:1/-1;align-self:center}
  .onb-card>*:not(.onb-art){grid-column:2}
  .onb-card h1{font-size:21px;margin:2px 0 5px}
  .onb-card>p{font-size:13px;line-height:1.45}
  .onb-exemplo{margin-top:10px;padding:10px}
  .onb-chunk{font-size:16px}
  .onb-exemplo p{margin-top:5px;font-size:12px}
  .onb-passos{margin-top:10px;gap:6px}
  .onb-passos>div{padding:8px 5px}
  .onb-passos span{width:30px;height:30px}
  .onb-passos span svg{width:16px;height:16px}
  .onb-selos{margin-top:10px;justify-content:flex-start}
  .onb-selos span{width:40px;height:40px}
  .onb-selos span svg{width:20px;height:20px}
  .onb-acoes{max-width:420px;margin-left:auto;margin-right:auto;width:100%}
  .onb-acoes .button{min-height:44px}
}

/* dark mode: ajustes finos */
[data-theme="dark"] .podio{background:linear-gradient(180deg,transparent 0 30%,rgba(255,255,255,.04) 30% 100%)}
[data-theme="dark"] .podio-lugar.p2 .podio-base{background:#2E241A}
[data-theme="dark"] .ranking-minha{background:var(--surface-3);color:var(--ink)}
[data-theme="dark"] .ranking-minha img{border-color:var(--ink-line)}
[data-theme="dark"] .perfil-capa::before{background:rgba(255,201,60,.16)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .podio{background:linear-gradient(180deg,transparent 0 30%,rgba(255,255,255,.04) 30% 100%)}
  :root:not([data-theme="light"]) .podio-lugar.p2 .podio-base{background:#2E241A}
  :root:not([data-theme="light"]) .ranking-minha{background:var(--surface-3);color:var(--ink)}
  :root:not([data-theme="light"]) .ranking-minha img{border-color:var(--ink-line)}
  :root:not([data-theme="light"]) .perfil-capa::before{background:rgba(255,201,60,.16)}
}

/* =============================================================================
   25 · Baralho de pares — jogo de carta para dois
   ============================================================================= */
.baralho-shell{display:flex;flex-direction:column;gap:8px;min-height:0}

.baralho-placar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:8px 10px;
}
.baralho-lado{display:grid;gap:1px;min-width:0;padding:4px 8px;border-radius:var(--r-m);border:2px solid transparent}
.baralho-lado b{font-family:var(--font-display);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.baralho-lado span{font-size:11.5px;font-weight:800;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.baralho-lado.is-rival{text-align:right}
.baralho-lado.is-vez{background:var(--gold-soft);border-color:var(--ink-line)}
.baralho-meio{
  font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--brand-ink);
  background:var(--surface);border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:3px 11px;white-space:nowrap;
}
.baralho-aviso{
  margin:0;text-align:center;font-weight:800;font-size:13px;color:var(--olive-ink);
  background:var(--olive-soft);border:2px solid var(--ink-line);border-radius:var(--r-pill);
  padding:6px 12px;min-height:30px;
}

.baralho-grade{
  display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
  flex:1;min-height:0;align-content:start;overflow:auto;padding:2px;
}
.baralho-grade.is-travado .carta-face{filter:saturate(.72)}

.carta{
  position:relative;aspect-ratio:3/4;border:0;background:none;padding:0;cursor:pointer;
  perspective:700px;-webkit-tap-highlight-color:transparent;min-height:0;
}
.carta[disabled]{cursor:default}
.carta-face,.carta-frente{
  position:absolute;inset:0;border-radius:var(--r-m);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .28s cubic-bezier(.3,.9,.4,1.1);
  display:grid;place-items:center;overflow:hidden;
}
.carta-face{transform:rotateY(0deg)}
.carta-face svg{width:100%;height:100%;display:block}
.carta-frente{
  transform:rotateY(180deg);background:var(--surface);
  border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);
  font-family:var(--font-ui);font-weight:800;font-size:11.5px;line-height:1.18;
  color:var(--ink);text-align:center;padding:5px 3px;
  overflow-wrap:break-word;word-break:normal;
}
.carta-frente.t-medio{font-size:10.5px;line-height:1.14}
.carta-frente.t-longo{font-size:9.5px;line-height:1.12;letter-spacing:-.01em}
.carta-frente.is-es{font-family:var(--font-display);font-size:12.5px;color:var(--brand-ink);background:var(--gold-soft)}
.carta-frente.is-es.t-medio{font-size:11.5px}
.carta-frente.is-es.t-longo{font-size:10.5px}
.carta.is-aberta .carta-face{transform:rotateY(-180deg)}
.carta.is-aberta .carta-frente{transform:rotateY(0deg)}
.carta.is-casada .carta-frente{background:var(--olive-soft);color:var(--olive-ink);border-color:var(--ink-line)}
.carta.is-casada.is-minha .carta-frente{background:var(--gold);color:var(--ink)}
.carta.is-casada{animation:carta-casou .34s ease}
@keyframes carta-casou{40%{transform:scale(1.07)}}
.carta:not([disabled]):active{transform:scale(.95)}

@media (max-width:360px){
  .baralho-grade{gap:5px}
  .carta-frente{font-size:10.5px;padding:3px}
  .carta-frente.t-medio{font-size:9.5px}
  .carta-frente.t-longo{font-size:8.8px}
  .carta-frente.is-es{font-size:11.5px}
  .carta-frente.is-es.t-medio{font-size:10.5px}
  .carta-frente.is-es.t-longo{font-size:9.5px}
}
/* telefone deitado: o baralho vira 8 colunas para caber sem rolar */
@media (max-height:520px) and (orientation:landscape){
  .baralho-grade{grid-template-columns:repeat(8,1fr);gap:5px}
  .baralho-placar{padding:5px 8px}
  .baralho-lado b{font-size:12.5px}
  .baralho-aviso{font-size:12px;padding:4px 10px;min-height:0}
  .carta-frente{font-size:10px}
  .carta-frente.is-es{font-size:11px}
}

/* ilustração do Cervantes: PNG recortado no lugar do SVG antigo */
.ck-ilustracao{width:100%;height:auto;display:block;object-fit:contain}
.ck-strip-art .ck-ilustracao,.duelo-hero-art .ck-ilustracao,.game-mascot .ck-ilustracao{width:100%}
.ck-bob .ck-ilustracao{will-change:transform}

/* =============================================================================
   26 · Avatares ilustrados e insígnias com ícone
   ============================================================================= */
.avatar-picker>div{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}
.avatar-choice{margin:0;align-items:center;gap:5px;cursor:pointer}
.avatar-choice input{position:absolute;opacity:0;pointer-events:none}
.avatar-choice span{
  display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  border:var(--bw) solid var(--ink-line);background:var(--surface);
  transition:transform .12s ease,box-shadow .12s ease;
}
.avatar-choice span img{width:100%;height:100%;display:block;object-fit:cover}
.avatar-choice small{font-size:11.5px;font-weight:800;color:var(--ink-2);text-align:center}
.avatar-choice input:checked+span{box-shadow:var(--pop-sm);transform:translateY(-2px);outline:3px solid var(--brand);outline-offset:2px}
.avatar-choice input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.account-portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
img.avatar,[data-user-avatar]{object-fit:cover}

/* ícone da insígnia por cima do selo */
.insignia-ico img,.insignia-arte{width:100%;height:100%;object-fit:contain;display:block}
.insignia .insignia-ico{overflow:visible;padding:4px}
.insignia.n0 .insignia-ico img{filter:grayscale(1) opacity(.42)}
.perfil-quem{position:relative;color:var(--brand);margin-bottom:2px}
.perfil-acoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.perfil-acoes .button{min-height:44px;font-size:13.5px;gap:7px}
.perfil-acoes .button svg{width:17px;height:17px}
.perfil-acoes small{font-weight:800;color:var(--olive-ink);font-size:12px;word-break:break-all}
.duelo-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

/* =============================================================================
   27 · Correções — avatar redondo e o cartão de explorar chunkie legível
   ============================================================================= */

/* o avatar estava saindo quadrado: o summary é redondo mas não recortava a imagem */
.account-menu summary{
  overflow:hidden;border-radius:50%!important;width:40px;height:40px;padding:0;
  display:grid;place-items:center;
}
.account-menu summary img{
  width:100%;height:100%;object-fit:cover!important;border-radius:50%;display:block;
}
.profile img.avatar{border-radius:50%!important;object-fit:cover}
img.avatar,[data-user-avatar],.podio-avatar,.ranking-avatar{border-radius:50%;object-fit:cover}

/* ---- explorar chunkie: era painel escuro com texto apagado ---- */
.review-prompt{
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:16px 18px;margin:16px 0;
}
.review-prompt .eyebrow{color:var(--ink-3)}
.review-prompt h2{font-size:clamp(19px,4.6vw,25px);line-height:1.35;color:var(--ink);margin:8px 0 0}

.review-answer{
  background:var(--surface);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop-sm);
  padding:18px;margin-top:16px;border-top:var(--bw) solid var(--ink-line);
}
.review-answer h2{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(23px,6vw,32px);color:var(--brand-ink);margin:4px 0 2px;line-height:1.15;
}
.review-answer>p{color:var(--ink-2);font-weight:600;font-size:15px;margin:0 0 4px}
.review-answer .pill{background:var(--surface-3);color:var(--ink-2);border:2px solid var(--ink-line)}
.review-answer .example{
  border:0;border-left:5px solid var(--brand);background:var(--gold-soft);
  border-radius:var(--r-m);padding:12px 14px;margin:14px 0 0;
  font-size:16px;line-height:1.45;color:var(--ink);font-weight:600;
}
.review-answer .answer-note{
  background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-m);
  padding:11px 13px;margin:10px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5;
}
.review-answer .details-meta{
  display:block;margin-top:10px;font-size:12.5px;color:var(--ink-3);font-weight:700;
}
/* o diálogo em si */
dialog{background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop-lg)}
dialog::backdrop{background:#1E171199;backdrop-filter:blur(3px)}

/* verso da carta: o medalhão folk numa moldura creme, senão as cartas
   se fundem umas nas outras e o tabuleiro vira papel de parede */
.carta-face{
  background:var(--surface);border:var(--bw) solid var(--ink-line);
  padding:4px;box-shadow:var(--pop-sm);
}
.carta-verso{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:7px;border:1.5px solid var(--ink-line);
}
.baralho-grade.is-travado .carta-face{filter:saturate(.72) brightness(.96)}
@media (max-width:360px){.carta-face{padding:3px}.carta-verso{border-radius:5px}}
.som-toggle svg{width:18px;height:18px}
.som-toggle.is-mudo{opacity:.55}
.som-toggle.is-mudo svg{color:var(--ink-3)}

/* =============================================================================
   28 · Jogos novos — Completa, Dilo Rápido e Cultura
   ============================================================================= */

/* ---- Completa: a frase com o buraco ---- */
.game-question .lacuna{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(19px,5vw,27px);line-height:1.45;color:var(--ink);
}
.lacuna-vazio{
  display:inline-block;min-width:76px;margin:0 4px;padding:0 10px;
  background:var(--gold-soft);border:2.5px dashed var(--ink-line);border-radius:var(--r-m);
  color:var(--gold-ink);font-family:var(--font-ui);font-weight:900;text-align:center;
  transform:translateY(2px);
}

/* ---- Dilo Rápido: a contagem e a resposta ---- */
.game-question.rapido{text-align:center}
.rapido-conta{
  width:92px;height:92px;margin:14px auto 8px;border-radius:50%;
  border:var(--bw) solid var(--ink-line);background:var(--gold-soft);
  display:grid;place-items:center;box-shadow:var(--pop-sm);
}
.rapido-conta b{
  font-family:var(--font-display);font-size:42px;line-height:1;color:var(--gold-ink);
  font-variant-numeric:tabular-nums;
}
.rapido-conta.is-low{background:var(--brand);border-color:var(--ink-line);animation:ck-pulse .5s infinite}
.rapido-conta.is-low b{color:#FFFBF0}
.game-question.rapido.is-feito .rapido-conta{opacity:.35;transform:scale(.8)}
.game-question.rapido.is-feito #rapido-dica{display:none}
.rapido-resposta{
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:16px;text-align:center;margin-top:10px;
  animation:onb-in .3s cubic-bezier(.2,.8,.3,1.2) both;
}
.rapido-chunk{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(21px,5.6vw,30px);color:var(--brand-ink);margin:4px 0 12px;line-height:1.2;
}
[data-theme="dark"] .rapido-chunk{color:var(--brand-clr,var(--brand))}
.rapido-resposta .game-actions{display:flex;gap:9px}
.rapido-resposta .button{flex:1;min-height:50px}

/* ---- Cultura: o chunkie citado sob a pergunta ---- */
.cultura-chunk{
  display:inline-block;margin-top:10px;padding:6px 13px;
  background:var(--teal-soft);border:2px solid var(--ink-line);border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:15px;color:var(--teal-ink);font-weight:700;
}

/* =============================================================================
   29 · Adivina — telefone na testa
   ============================================================================= */
.adivina-shell{display:flex;flex-direction:column;height:100%;min-height:0;gap:0}
.adivina-prepara{flex:1;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:10px}
.adivina-prepara h2{font-size:clamp(24px,7vw,34px)}
.adivina-prepara p{color:var(--ink-2);font-weight:600;max-width:34ch;margin:0}
.adivina-como{display:grid;gap:8px;margin-top:12px;width:100%;max-width:400px}
.adivina-como>div{
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:10px 13px;text-align:left;
}
.adivina-como b{font-family:var(--font-display);font-size:15px;display:block}
.adivina-como small{color:var(--ink-2);font-size:12.5px;font-weight:600;line-height:1.35}

.adivina-conta{flex:1;display:grid;place-items:center}
.adivina-conta b{
  font-family:var(--font-display);font-size:clamp(90px,34vw,190px);color:var(--brand);line-height:1;
  animation:ck-pulse .8s infinite;
}

.adivina-hud{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0 8px}
.adivina-hud .hud-chip.is-low{background:var(--brand);color:#FFFBF0;animation:ck-pulse .6s infinite}

.adivina-zona{
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  font:900 14px/1 var(--font-ui);letter-spacing:.12em;
  min-height:74px;flex:none;cursor:pointer;display:grid;place-items:center;
  transition:transform .08s ease,filter .08s ease;
}
.adivina-zona:active{transform:scale(.98);filter:brightness(.94)}
.adivina-zona.is-acerto{background:var(--olive);color:#FFFBF0}
.adivina-zona.is-passa{background:var(--surface-3);color:var(--ink-2)}

.adivina-palco{
  flex:1;min-height:0;display:grid;place-items:center;padding:12px;margin:8px 0;
  background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);
  text-align:center;overflow:hidden;
}
.adivina-palco b{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(26px,9vw,58px);line-height:1.12;color:var(--ink);word-break:break-word;
}
.adivina-palco.is-troca b{animation:adivina-entra .22s ease both}
@keyframes adivina-entra{from{opacity:0;transform:translateY(10px) scale(.97)}}
.adivina-palco.fez-acerto{background:var(--olive-soft)}
.adivina-palco.fez-passe{background:var(--surface-3)}

.adivina-lista{display:grid;gap:5px;margin-top:14px;text-align:left;max-height:34vh;overflow:auto}
.adivina-lista>div{
  display:flex;align-items:baseline;gap:8px;padding:7px 11px;border-radius:var(--r-m);
  border:2px solid var(--ink-line);background:var(--surface-2);
}
.adivina-lista>div.ok{background:var(--olive-soft)}
.adivina-lista b{font-family:var(--font-display);font-size:14.5px}
.adivina-lista small{color:var(--ink-2);font-size:12px;font-weight:600}

/* em jogo o diálogo ocupa a tela toda: a leitura é de longe */
html.modo-adivina #game-dialog{
  width:100dvw;max-width:100dvw;height:100dvh;max-height:100dvh;border-radius:0;padding:12px;
}
html.modo-adivina #game-content,html.modo-adivina .adivina-shell{height:100%}
/* deitado é o jeito natural de segurar na testa */
@media (orientation:landscape) and (max-height:520px){
  .adivina-palco b{font-size:clamp(28px,7.5vw,56px)}
  .adivina-zona{min-height:56px;font-size:13px}
  .adivina-como{grid-template-columns:1fr 1fr}
}

/* =============================================================================
   30 · DELE B1 e Conversación Jefe
   ============================================================================= */
.dele-dica{
  margin:12px 0 0;padding:11px 13px;font-size:13.5px;line-height:1.5;color:var(--ink-2);
  background:var(--teal-soft);border:2px solid var(--ink-line);border-radius:var(--r-m);font-weight:600;
}
.dele-resumo{margin-top:16px;text-align:left;display:grid;gap:6px}
.dele-resumo>div{display:grid;grid-template-columns:1fr 84px auto;align-items:center;gap:9px;font-size:13px}
.dele-resumo b{font-family:var(--font-display);font-size:13.5px;font-weight:700}
.dele-resumo small{color:var(--ink-3);font-weight:800;font-variant-numeric:tabular-nums}
.dele-barra{display:block;height:9px;border-radius:99px;background:var(--surface-3);border:1.5px solid var(--ink-line);overflow:hidden}
.dele-barra i{display:block;height:100%;background:var(--brand)}
.dele-resumo .ok .dele-barra i{background:var(--olive)}
.dele-resumo .meio .dele-barra i{background:var(--gold)}

/* ---- Conversación Jefe ---- */
.jefe-shell{display:flex;flex-direction:column;height:100%;min-height:0;gap:8px}
.jefe-titulo{
  margin:0;font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(17px,4.4vw,22px);color:var(--ink);line-height:1.25;
}
.jefe-missao{display:flex;flex-wrap:wrap;gap:5px;flex:none;max-height:26vh;overflow:auto}
.jefe-chip{
  font-size:11.5px;font-weight:800;padding:4px 9px;white-space:nowrap;border-radius:var(--r-pill);
  border:2px solid var(--ink-line);background:var(--surface-3);color:var(--ink-3);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.jefe-chip.is-usado{background:var(--olive);color:#FFFBF0;transform:scale(1.02)}
.jefe-conversa{
  flex:1;min-height:90px;overflow:auto;display:flex;flex-direction:column;gap:7px;
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);padding:11px;
}
.jefe-fala{
  max-width:86%;padding:9px 12px;border-radius:var(--r-lg);font-size:14px;line-height:1.4;
  border:2px solid var(--ink-line);font-weight:600;
}
.jefe-fala.ia{background:var(--surface);color:var(--ink);align-self:flex-start;border-bottom-left-radius:6px}
.jefe-fala.eu{background:var(--brand);color:#FFFBF0;align-self:flex-end;border-bottom-right-radius:6px}
.jefe-escrever{display:flex;gap:8px;flex:none}
.jefe-escrever input{
  flex:1;min-width:0;font-size:16px;padding:12px 14px;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-pill);background:var(--surface);color:var(--ink);
}
.jefe-escrever .button{min-height:48px;min-width:56px;padding:0 16px;font-size:18px}
.jefe-faltou{margin-top:14px;text-align:left;display:grid;gap:5px}
.jefe-faltou>div{
  padding:8px 11px;border-radius:var(--r-m);border:2px solid var(--ink-line);background:var(--surface-2);
}
.jefe-faltou b{font-family:var(--font-display);font-size:14.5px;display:block}
.jefe-faltou small{color:var(--ink-2);font-size:12px;font-weight:600}
@media (max-height:520px) and (orientation:landscape){
  .jefe-conversa{min-height:60px}
  .jefe-chip{font-size:11px;padding:4px 8px}
}

/* =============================================================================
   31 · Legibilidade — os componentes antigos do style.css passam a usar tokens
   Sem isto, o modo escuro herdava fundo pastel com texto claro por cima.
   ============================================================================= */
.deck,.chunk-card,.panel,.stat,.empty,.review-row,.conversation-card,
.practice-strip,.hero,.tip,.review-prompt,.article-ready,.study-card,.spanish-quest{
  background:var(--surface);color:var(--ink);border-color:var(--ink-line);
}
.deck p,.chunk-card>p,.panel p,.stat span,.empty p,.review-row p,
.conversation-card p,.study-card p,.spanish-quest p,.details-meta,.library-count{color:var(--ink-2)}
.muted,.nav-caption,.keyboard-note{color:var(--ink-2)}

/* as pastilhas de deck herdavam pastel fixo: passam para a paleta */
.deck-icon{background:var(--gold-soft);color:var(--ink)}
.deck:nth-child(2) .deck-icon{background:var(--teal-soft)}
.deck:nth-child(3) .deck-icon{background:var(--olive-soft)}
.deck:nth-child(4) .deck-icon{background:var(--brand-soft)}

.hero{background:var(--brand);color:var(--on-brand)}
.hero p,.hero .eyebrow{color:var(--on-brand);opacity:.94}
.tip{background:var(--gold-soft)}
.tip blockquote,.tip p{color:var(--ink)}
.practice-strip{background:var(--ink);color:var(--bg)}
.practice-strip p{color:var(--bg);opacity:.86}
.conversation-card{background:var(--teal-soft)}

/* rótulo sobre fundo mostarda precisa de tinta escura, não da cor da marca */
.points-pass .eyebrow,.ck-card[data-tom="mostarda"] .eyebrow,
[class*="gold"] .eyebrow{color:#42330A}
.points-pass h2,.points-pass p,.points-pass h2 small{color:var(--on-gold)}

/* navegação: rótulo inativo legível */
.mobile-dock a{color:var(--ink-2)}
.mobile-dock a.active{color:var(--brand)}
.sidebar nav a{color:var(--ink)}

/* a marca no topo herda a tinta, não o cinza do style.css */
.brand,.brand .brand-word{color:var(--ink)}
/* o ponto da marca é texto sobre papel: vai na versão tinta, que clareia no
   tema escuro. Com o cheio ele ficava em 2,9 de contraste. */
.brand .brand-word i{color:var(--brand-ink)}

/* grades e formulários antigos */
.grade{background:var(--surface-2);color:var(--ink);border-color:var(--ink-line)}
.grade:nth-child(1){background:var(--brand-soft)}
.grade:nth-child(2){background:var(--gold-soft)}
.grade:nth-child(3){background:var(--olive-soft)}
.grade:nth-child(4){background:var(--teal-soft)}
input,textarea,select{background:var(--surface);color:var(--ink);border-color:var(--ink-line)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
.pill{background:var(--surface-2);color:var(--ink-2);border-color:var(--ink-line)}

/* =============================================================================
   32 · Contraste v41 — auditoria WCAG nas duas peles
   Regra da casa: sobre mostarda vai tinta escura (--on-gold); sobre tijolo,
   oliva ou petróleo vai creme (--on-brand); a marca só vira TEXTO sobre papel
   na versão --brand-ink, que é escura no claro e clara no escuro.
   ============================================================================= */

/* mostarda nunca aceita texto claro */
.podio-lugar.p1 .podio-base,
.points-pass,.points-pass h2,.points-pass p,.points-pass small,
.mission-meter+small,
.game-best,.conquista.is-on .conquista-ico,.insignia.n3 .insignia-ico{color:var(--on-gold)}
.points-pass .eyebrow{color:#42330A}
/* .tip é mostarda clara (--gold-soft), que escurece no tema escuro: a tinta
   dela acompanha o tema em vez de ser fixa como a de superfície cheia. */
.tip,.tip p,.tip blockquote,.tip b{color:var(--ink)}
.tip .eyebrow{color:var(--gold-ink)}

/* tijolo/oliva/petróleo cheios pedem creme, inclusive nos títulos herdados */
.account-hero,.account-hero h2,.account-hero p,.account-hero .eyebrow,
.hero h2,.hero p,.sessao-info h1,.duelo-hero h1,.ck-quest h2{color:var(--on-brand)}
.account-hero .eyebrow,.sessao-info .eyebrow,.duelo-hero .eyebrow{opacity:.92}
.account-hero .pill{background:var(--on-brand);color:#1E1711;border-color:var(--ink-line)}

/* a marca como texto sobre papel: usar a versão tinta, não o cheio */
.mobile-dock a.active,.perfil-capa .eyebrow,.perfil-quem .eyebrow,
.journey .eyebrow,.journey-steps b,.admin-card .eyebrow,.level-plan .eyebrow{color:var(--brand-ink)}

/* =============================================================================
   33 · Brújula — centro de análise, trilhas e recomendações · v42

   Regra de tinta desta seção, igual à do resto: superfície cheia de tijolo ou
   oliva leva creme (--on-brand); mostarda leva tinta escura (--on-gold); a
   marca como texto sobre papel usa --brand-ink.

   O radar e as barras têm um estado "medindo": cinza apagado, sem cor de marca.
   É deliberado — a cor cheia significa "isto foi medido", e um eixo com três
   respostas não ganha o mesmo destaque visual de um com cinquenta.
   ============================================================================= */

.brujula-carregando{padding:38px 0}
.brujula-voltar{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;color:var(--ink-2);font-weight:700}
.brujula-subtitulo{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(20px,4.6vw,25px);margin:34px 0 4px}
.brujula-rodape{font-size:12px;color:var(--ink-2);margin:28px 0 8px;max-width:62ch;line-height:1.6}
.brujula-vazio{font-size:13px;margin:6px 0 0}
.brujula-legenda{font-size:13px;color:var(--ink-2);margin:12px 0 0}

/* ---- capa do hub ---- */
.brujula-capa{display:flex;gap:22px;align-items:center;background:var(--brand);color:var(--on-brand);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop);
  padding:24px;margin-bottom:22px}
.brujula-capa h2{color:var(--on-brand);font-size:clamp(21px,5vw,26px);margin:2px 0 8px}
.brujula-capa .eyebrow{color:var(--on-brand);opacity:.9}
.brujula-capa-arte{width:122px;flex:0 0 auto}
.brujula-capa-arte img,.brujula-capa-arte svg{width:100%;height:auto;display:block}
.brujula-capa-texto{color:var(--on-brand);margin:0;line-height:1.55;max-width:52ch}
.brujula-capa-texto b{font-weight:800}
.brujula-capa-numeros{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.brujula-capa-numeros span{background:var(--on-brand);color:#1E1711;border:2px solid var(--ink-line);
  border-radius:var(--r-pill);padding:5px 12px;font-size:12px;font-weight:700}
.brujula-capa-numeros b{font-family:var(--font-display);font-size:15px}

/* ---- cards de seção ---- */
.brujula-secoes{display:grid;gap:14px}
.brujula-secao{display:flex;align-items:center;gap:16px;background:var(--surface);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--pop-sm);
  padding:18px;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.brujula-secao:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.brujula-secao:active{transform:translate(1px,1px);box-shadow:var(--pop-sm)}
.brujula-secao-ico{display:grid;place-items:center;width:54px;height:54px;flex:0 0 auto;
  background:var(--gold);color:var(--on-gold);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md)}
.brujula-secao-ico svg{width:30px;height:30px}
.brujula-secao h3{font-size:19px;margin:1px 0 4px}
.brujula-secao p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.5}
.brujula-secao .eyebrow{color:var(--brand-ink);font-size:10px}
.brujula-secao-seta{font-size:27px;color:var(--ink-3);margin-left:auto;flex:0 0 auto}
.brujula-secao:nth-child(2) .brujula-secao-ico{background:var(--teal);color:var(--on-brand)}
.brujula-secao:nth-child(3) .brujula-secao-ico{background:var(--olive);color:var(--on-brand)}
.brujula-secao:nth-child(4) .brujula-secao-ico{background:var(--brand);color:var(--on-brand)}

/* ---- blocos ---- */
.brujula-bloco{margin-bottom:18px}
.brujula-bloco h3{font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:20px;margin:0 0 6px}
.brujula-bloco>.muted{font-size:13px;line-height:1.55;margin:0 0 14px;max-width:64ch}
.brujula-aviso{border-radius:var(--r-lg)}
.brujula-aviso p{margin:6px 0 0;line-height:1.6;max-width:66ch}

/* ---- radar ---- */
.brujula-radar-bloco{text-align:center}
.brujula-radar-bloco h3,.brujula-radar-bloco>.muted,.brujula-radar-bloco .brujula-lista{text-align:left}
.brujula-radar{width:min(340px,100%);height:auto;display:block;margin:6px auto 18px;overflow:visible}
.brujula-anel{fill:none;stroke:var(--ink-line);stroke-width:1.4;opacity:.2}
.brujula-anel:last-of-type{opacity:.45;stroke-width:2.4}
.brujula-raio{stroke:var(--ink-line);stroke-width:1.2;opacity:.18}
.brujula-area{fill:var(--brand);fill-opacity:.24;stroke:var(--brand);stroke-width:3;
  stroke-linejoin:round;stroke-linecap:round}
.brujula-ponto{fill:var(--brand);stroke:var(--surface);stroke-width:2}
.brujula-ponto.is-medindo{fill:var(--ink-3)}
.brujula-rotulo{fill:var(--ink);font-family:var(--font-ui);font-size:12.5px;font-weight:700}
.brujula-rotulo.is-medindo{fill:var(--ink-3);font-weight:600}

/* ---- listas de nota ---- */
.brujula-lista{display:grid;gap:9px}
.brujula-item{display:grid;grid-template-columns:minmax(96px,1.1fr) minmax(60px,2fr) 34px auto;
  align-items:center;gap:10px;font-size:13.5px}
.brujula-item>b{font-weight:700;min-width:0;overflow-wrap:anywhere}
.brujula-barra{height:10px;background:var(--surface-3);border:2px solid var(--ink-line);
  border-radius:var(--r-pill);overflow:hidden}
.brujula-barra>i{display:block;height:100%;background:var(--brand);transition:width .7s cubic-bezier(.2,.8,.2,1)}
.brujula-barra.is-medindo>i{background:var(--ink-3)}
.brujula-nota{font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:17px;
  font-weight:800;text-align:right}
.brujula-item.is-medindo .brujula-nota{color:var(--ink-3)}
.brujula-selo{font-size:10.5px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.brujula-selo.is-medindo{color:var(--ink-3);font-style:italic}

/* ---- veredito ---- */
.brujula-vereditos{display:grid;gap:14px;margin-bottom:18px}
.brujula-veredito{border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop-sm);padding:20px}
.brujula-veredito.is-forca{background:var(--olive-soft)}
.brujula-veredito.is-fraqueza{background:var(--gold-soft)}
.brujula-veredito .eyebrow{color:var(--ink-2);display:block;margin-bottom:12px}
.brujula-veredito>div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;
  padding:10px 0;border-top:2px solid var(--ink-line)}
.brujula-veredito>div:first-of-type{border-top:0;padding-top:0}
.brujula-veredito b{font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:18px}
.brujula-veredito>div>span{font-family:var(--font-display);font-size:24px;font-weight:800;
  grid-row:span 2;align-self:center;color:var(--ink)}
.brujula-veredito p{grid-column:1;font-size:13px;color:var(--ink-2);margin:0;line-height:1.5}

/* ---- curva de acerto ---- */
.brujula-linha{width:100%;height:auto;display:block;overflow:visible}
.brujula-linha-base{stroke:var(--ink-line);stroke-width:1.6;stroke-dasharray:4 5;opacity:.4}
.brujula-linha-curva{fill:none;stroke:var(--teal);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.brujula-linha circle{fill:var(--teal)}

/* ---- maturidade do baralho ---- */
.brujula-maturidade{display:flex;height:22px;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-pill);overflow:hidden;margin:4px 0 12px}
.brujula-maturidade>span{display:block}
.brujula-maturidade .is-nova{background:var(--surface-3)}
.brujula-maturidade .is-meio{background:var(--gold)}
.brujula-maturidade .is-madura{background:var(--olive)}
.brujula-chaves{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:var(--ink-2)}
.brujula-chaves>span{display:inline-flex;align-items:center;gap:6px}
.brujula-chaves>span:before{content:"";width:12px;height:12px;border:2px solid var(--ink-line);border-radius:4px}
.brujula-chaves .is-nova:before{background:var(--surface-3)}
.brujula-chaves .is-meio:before{background:var(--gold)}
.brujula-chaves .is-madura:before{background:var(--olive)}
.brujula-chaves b{color:var(--ink);font-family:var(--font-display);font-size:15px}
.brujula-vencidas{margin:14px 0 0;font-size:14px;color:var(--ink)}
.brujula-vencidas.is-ok{color:var(--olive-ink);font-weight:700}

/* ---- previsão de 14 dias ---- */
.brujula-previsao{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;
  height:150px;margin-top:6px}
.brujula-dia{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  gap:4px;height:100%;min-width:0}
.brujula-dia>i{display:block;width:100%;min-height:3px;background:var(--teal);
  border:2px solid var(--ink-line);border-radius:5px 5px 0 0}
.brujula-dia.is-hoje>i{background:var(--brand)}
.brujula-dia-valor{font-size:10px;font-weight:800;color:var(--ink-2);min-height:13px}
.brujula-dia small{font-size:9.5px;color:var(--ink-3);text-transform:lowercase}
.brujula-dia.is-hoje small{color:var(--brand-ink);font-weight:800}

/* ---- trilhas ---- */
.trilha-grade{display:grid;gap:14px}
.trilha-cartao{display:flex;align-items:center;gap:16px;background:var(--surface);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--pop-sm);
  padding:16px;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.trilha-cartao:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.trilha-cartao.is-medida{background:var(--gold-soft)}
.trilha-cartao.is-feita .trilha-medidor>i{background:var(--olive)}
.trilha-arte{width:74px;flex:0 0 auto}
.trilha-arte img,.trilha-arte svg{width:100%;height:auto;display:block}
.trilha-corpo{min-width:0;flex:1}
.trilha-corpo h3{font-size:18px;margin:1px 0 4px}
.trilha-corpo p{font-size:13px;color:var(--ink-2);margin:0 0 10px;line-height:1.5}
.trilha-corpo .eyebrow{color:var(--brand-ink);font-size:10px}
.trilha-corpo small{font-size:11.5px;color:var(--ink-2);font-weight:700}
.trilha-medidor{height:8px;background:var(--surface-3);border:2px solid var(--ink-line);
  border-radius:var(--r-pill);overflow:hidden;margin-bottom:5px}
.trilha-medidor>i{display:block;height:100%;background:var(--brand);transition:width .6s ease}
.trilha-seta{font-size:26px;color:var(--ink-3);flex:0 0 auto}

.trilha-capa{display:flex;gap:18px;align-items:center;background:var(--teal);color:var(--on-brand);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop);
  padding:22px;margin-bottom:18px}
.trilha-capa.is-medida{background:var(--brand)}
.trilha-capa h1{color:var(--on-brand);font-size:clamp(21px,5.4vw,28px);margin:2px 0 8px}
.trilha-capa p{color:var(--on-brand);margin:0;line-height:1.55;max-width:50ch;opacity:.95}
.trilha-capa .eyebrow{color:var(--on-brand);opacity:.9}
.trilha-capa-arte{width:96px;flex:0 0 auto}
.trilha-capa-arte img,.trilha-capa-arte svg{width:100%;height:auto;display:block}
.trilha-porque p{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:66ch}

.trilha-etapas{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:12px;counter-reset:etapa}
.trilha-etapa{display:flex;gap:14px;align-items:flex-start;background:var(--surface);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);padding:16px;position:relative}
.trilha-etapa.is-agora{background:var(--gold-soft);box-shadow:var(--pop-sm)}
.trilha-etapa.is-depois{opacity:.62}
.trilha-etapa.is-feita{background:var(--olive-soft)}
.trilha-etapa-ico{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto;
  border:var(--bw) solid var(--ink-line);border-radius:50%;background:var(--surface-2);color:var(--ink)}
.trilha-etapa.is-feita .trilha-etapa-ico{background:var(--olive);color:var(--on-brand)}
.trilha-etapa.is-agora .trilha-etapa-ico{background:var(--brand);color:var(--on-brand)}
.trilha-etapa-ico svg{width:22px;height:22px}
.trilha-etapa>div{min-width:0;flex:1}
.trilha-etapa b{display:block;font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:17px;margin-bottom:3px}
.trilha-etapa p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.55}
.trilha-etapa-n{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--ink-3);
  opacity:.45;flex:0 0 auto;line-height:1}
.trilha-acoes{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.trilha-acoes .button{font-size:13px;padding:10px 16px}

.trilha-fim{display:flex;gap:18px;align-items:center;background:var(--olive-soft);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop-sm);padding:22px}
.trilha-fim h2{font-size:22px;margin:0 0 6px}
.trilha-fim p{font-size:14px;color:var(--ink-2);margin:0 0 13px}
.trilha-fim-arte{width:88px;flex:0 0 auto}
.trilha-fim-arte img,.trilha-fim-arte svg{width:100%;height:auto;display:block}

/* ---- recomendações culturais ---- */
.obra-grade{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));margin-bottom:8px}
.obra{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop-sm);padding:17px;display:flex;flex-direction:column;gap:8px}
.obra.is-destaque{background:var(--surface-2)}
.obra-tipo{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand-ink)}
.obra-tipo svg{width:17px;height:17px}
.obra h3{font-size:18px;margin:0;line-height:1.25}
.obra h3 small{font-size:13px;font-weight:400;color:var(--ink-2)}
.obra-marcas{display:flex;flex-wrap:wrap;gap:5px}
.obra-marcas .pill{font-size:10.5px;padding:3px 9px}
.obra-nota{font-size:13px;color:var(--ink-2);margin:0;line-height:1.55}
.obra-porque{font-size:12.5px;color:var(--ink);margin:0;line-height:1.5;padding-top:9px;
  border-top:2px solid var(--ink-line)}
.obra-grupo{border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);background:var(--surface);
  padding:14px 16px;margin-bottom:11px}
.obra-grupo>summary{cursor:pointer;font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:18px;display:flex;align-items:center;gap:9px;list-style:none}
.obra-grupo>summary::-webkit-details-marker{display:none}
.obra-grupo>summary svg{width:22px;height:22px;color:var(--brand-ink)}
.obra-grupo>summary small{margin-left:auto;font-family:var(--font-ui);font-size:12px;
  color:var(--ink-2);font-weight:700}
.obra-grupo[open]>summary{margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--ink-line)}

/* ---- telas maiores ---- */
@media(min-width:760px){
  .brujula-secoes{grid-template-columns:1fr 1fr}
  .brujula-vereditos{grid-template-columns:1fr 1fr}
  .trilha-grade{grid-template-columns:1fr 1fr}
  .brujula-radar{width:min(400px,100%)}
}

/* ---- celular ---- */
@media(max-width:600px){
  .brujula-capa,.trilha-capa,.trilha-fim{flex-direction:column;text-align:center;gap:14px}
  .brujula-capa-texto,.trilha-capa p{max-width:none}
  .brujula-capa-numeros{justify-content:center}
  .brujula-capa-arte{width:104px}
  .brujula-secao-seta,.trilha-seta{display:none}
  /* no celular: nome e nota na primeira linha, a barra embaixo, a amostra por
     último — ler o número antes da barra é o que a pessoa faz de qualquer jeito */
  .brujula-item{grid-template-columns:1fr auto;gap:5px 10px}
  .brujula-item .brujula-barra{grid-column:1/-1;order:2}
  .brujula-selo{grid-column:1/-1;order:3;text-align:left}
  .brujula-previsao{height:124px;gap:3px}
  .brujula-dia small{font-size:8.5px}
  .brujula-dia-valor{font-size:9px}
  .trilha-etapa-n{display:none}
  .obra-grade{grid-template-columns:1fr}
}

/* ---- selos de insígnia no tema escuro ----------------------------------- */
/* A mistura de 40% do prata sobre o papel claro dá um cinza suave; sobre o
   papel escuro dá um cinza médio que não sustenta nem tinta clara nem escura.
   No escuro a mistura cai para 16%: o tom do nível continua legível e o texto
   creme volta a ter contraste. */
:root[data-theme="dark"] .insignia.n1{background:color-mix(in srgb, #D9A066 16%, var(--surface))}
:root[data-theme="dark"] .insignia.n2{background:color-mix(in srgb, #D8D2C6 16%, var(--surface))}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .insignia.n1{background:color-mix(in srgb, #D9A066 16%, var(--surface))}
  :root:not([data-theme="light"]) .insignia.n2{background:color-mix(in srgb, #D8D2C6 16%, var(--surface))}
}

/* =============================================================================
   34 · Painel da Brújula — cérebro, trilhos e cards grandes · v43

   A Brújula deixou de ser uma lista de atalhos e virou painel: a capa com o
   retrato de hoje, trilhos que deslizam com o dedo e cards de seção que já
   trazem o próprio número na capa.

   O trilho rola com `scroll-snap` nativo. Nenhum script entra no caminho do
   gesto no celular — é isso que separa um carrossel que responde de um que
   parece travado. O JS cuida só do que o navegador não dá: arrastar com o
   mouse, as setas e os pontinhos.
   ============================================================================= */

/* ---- capa: o cérebro ---- */
.ck-cerebro{
  position:relative;display:grid;gap:16px;
  grid-template-areas:"arte texto" "numeros numeros" "curva curva";
  grid-template-columns:auto 1fr;align-items:center;
  background:var(--brand);color:var(--on-brand);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-xl);box-shadow:var(--pop);
  padding:22px;margin-bottom:26px;overflow:hidden;
}
.ck-cerebro-arte{grid-area:arte;width:96px}
.ck-cerebro-arte img,.ck-cerebro-arte svg{width:100%;height:auto;display:block}
.ck-cerebro-texto{grid-area:texto;min-width:0}
.ck-cerebro .eyebrow{color:var(--on-brand);opacity:.9;font-size:10px}
.ck-cerebro h1{color:var(--on-brand);font-size:clamp(22px,5.6vw,30px);margin:3px 0 7px;line-height:1.08}
.ck-cerebro p{color:var(--on-brand);margin:0;line-height:1.5;font-size:14px;max-width:46ch}
.ck-cerebro p b{font-weight:800}
.ck-cerebro-numeros{
  grid-area:numeros;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;
}
.ck-cerebro-numeros>span{
  display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;
  background:var(--on-brand);color:#1E1711;border:2px solid var(--ink-line);
  border-radius:var(--r-md);padding:9px 5px;min-width:0;
}
.ck-cerebro-numeros b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(17px,4.6vw,22px);line-height:1}
.ck-cerebro-numeros small{font-size:9.5px;font-weight:700;line-height:1.15;overflow-wrap:anywhere}
.ck-cerebro-curva{grid-area:curva;display:flex;align-items:center;gap:12px;
  background:var(--on-brand);border:2px solid var(--ink-line);border-radius:var(--r-md);padding:9px 12px}
.ck-curva{flex:1;min-width:0;height:44px}
.ck-curva-area{fill:var(--brand);fill-opacity:.16}
.ck-curva-linha{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.ck-curva-nota{font-size:11px;font-weight:800;color:#1E1711;white-space:nowrap}

/* ---- trilho ---- */
.ck-trilho{margin:0 0 28px}
.ck-trilho-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.ck-trilho-topo .eyebrow{color:var(--brand-ink);font-size:10px;display:block}
.ck-trilho-topo h2{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(19px,4.6vw,24px);margin:2px 0 0}
.ck-trilho-tudo{font-size:12.5px;font-weight:800;color:var(--brand-ink);white-space:nowrap;flex:0 0 auto}
.ck-trilho-palco{position:relative}
.ck-trilho-pista{
  display:flex;gap:13px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:2px;
  padding:5px 2px 9px;margin:-5px -2px -9px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ck-trilho-pista::-webkit-scrollbar{display:none}
.ck-trilho-pista>*{scroll-snap-align:start;flex:0 0 auto}
.ck-trilho-pista.is-pegando{cursor:grabbing;scroll-snap-type:none}
.ck-trilho-pista.is-pegando *{pointer-events:none}
/* Nada de véu degradê sobre o último card: ele apaga justamente a parte que
   avisa que há mais coisa de lado. Quem dá o recado é o card espiando na borda,
   mais os pontinhos embaixo. */
.ck-trilho-seta{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;border-radius:50%;display:none;place-items:center;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  box-shadow:var(--pop-sm);font-size:22px;line-height:0;padding-bottom:3px;
}
.ck-trilho-seta.is-antes{left:-8px}
.ck-trilho-seta.is-depois{right:-8px}
.ck-trilho.no-inicio .ck-trilho-seta.is-antes,
.ck-trilho.no-fim .ck-trilho-seta.is-depois,
.ck-trilho.sem-rolagem .ck-trilho-seta{opacity:0;pointer-events:none}
.ck-trilho-pontos{display:flex;justify-content:center;gap:6px;margin-top:11px}
.ck-trilho-pontos i{width:7px;height:7px;border-radius:50%;background:var(--ink-line);opacity:.24;
  transition:opacity .2s,width .2s}
.ck-trilho-pontos i.is-aqui{opacity:1;width:20px;border-radius:4px;background:var(--brand)}
.ck-trilho.sem-rolagem .ck-trilho-pontos{display:none}

/* ---- card de ação ---- */
.ck-acao{
  width:min(82vw,310px);min-height:214px;display:flex;flex-direction:column;gap:7px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);box-shadow:var(--pop-sm);
  padding:17px;background:var(--surface);color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease;
}
.ck-acao:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.ck-acao .eyebrow{font-size:9.5px;letter-spacing:.1em}
.ck-acao h3{font-size:19px;margin:0;line-height:1.2}
.ck-acao p{font-size:13px;margin:0;line-height:1.5;flex:1}
.ck-acao-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);
  border:2px solid var(--ink-line);margin-bottom:3px}
.ck-acao-ico svg{width:25px;height:25px}
.ck-acao-botao{font-size:12.5px;font-weight:800;margin-top:2px}
.ck-acao[data-tom="brand"]{background:var(--brand);color:var(--on-brand);border-color:var(--ink-line)}
.ck-acao[data-tom="brand"] h3,.ck-acao[data-tom="brand"] p,
.ck-acao[data-tom="brand"] .eyebrow,.ck-acao[data-tom="brand"] .ck-acao-botao{color:var(--on-brand)}
.ck-acao[data-tom="brand"] .ck-acao-ico{background:var(--on-brand);color:var(--brand)}
.ck-acao[data-tom="teal"]{background:var(--teal);color:var(--on-brand)}
.ck-acao[data-tom="teal"] h3,.ck-acao[data-tom="teal"] p,
.ck-acao[data-tom="teal"] .eyebrow,.ck-acao[data-tom="teal"] .ck-acao-botao{color:var(--on-brand)}
.ck-acao[data-tom="teal"] .ck-acao-ico{background:var(--on-brand);color:var(--teal)}
.ck-acao[data-tom="olive"]{background:var(--olive);color:var(--on-brand)}
.ck-acao[data-tom="olive"] h3,.ck-acao[data-tom="olive"] p,
.ck-acao[data-tom="olive"] .eyebrow,.ck-acao[data-tom="olive"] .ck-acao-botao{color:var(--on-brand)}
.ck-acao[data-tom="olive"] .ck-acao-ico{background:var(--on-brand);color:var(--olive-ink)}
.ck-acao[data-tom="gold"]{background:var(--gold);color:var(--on-gold)}
.ck-acao[data-tom="gold"] h3,.ck-acao[data-tom="gold"] p,
.ck-acao[data-tom="gold"] .ck-acao-botao{color:var(--on-gold)}
.ck-acao[data-tom="gold"] .eyebrow{color:#42330A}
.ck-acao[data-tom="gold"] .ck-acao-ico{background:var(--on-gold);color:var(--gold)}

/* ---- card de competência ---- */
.ck-comp{
  width:min(58vw,196px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop-sm);padding:16px 13px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.ck-comp:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.ck-comp b{font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:17px}
.ck-comp p{font-size:11.5px;color:var(--ink-2);margin:0;line-height:1.45;flex:1}
.ck-comp .brujula-selo{font-size:10px}
.ck-arco{width:88px;height:88px;flex:0 0 auto}
.ck-arco-base{fill:none;stroke:var(--surface-3);stroke-width:9}
.ck-arco-tinta{fill:none;stroke:var(--brand);stroke-width:9;stroke-linecap:round;
  transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1)}
.ck-arco.is-medindo .ck-arco-tinta{stroke:var(--ink-3)}
.ck-arco-n{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:27px;font-weight:800;fill:var(--ink)}
.ck-arco.is-medindo .ck-arco-n{fill:var(--ink-3)}

/* ---- trilha e obra em miniatura ---- */
.ck-trilha-mini{
  width:min(72vw,244px);display:flex;flex-direction:column;gap:5px;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop-sm);padding:15px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.ck-trilha-mini:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.ck-trilha-mini.is-medida{background:var(--gold-soft)}
.ck-trilha-mini-arte{width:62px;margin-bottom:2px}
.ck-trilha-mini-arte img,.ck-trilha-mini-arte svg{width:100%;height:auto;display:block}
.ck-trilha-mini .eyebrow{font-size:9.5px;color:var(--brand-ink)}
.ck-trilha-mini b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:17px;line-height:1.2}
.ck-trilha-mini p{font-size:12px;color:var(--ink-2);margin:0 0 5px;line-height:1.45;flex:1}
.ck-trilha-mini small{font-size:11px;font-weight:700;color:var(--ink-2)}

.ck-obra-mini{
  width:min(72vw,244px);display:flex;flex-direction:column;gap:7px;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);box-shadow:var(--pop-sm);padding:15px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.ck-obra-mini:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.ck-obra-mini b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:18px;line-height:1.2}
.ck-obra-mini p{font-size:12px;color:var(--ink-2);margin:0;line-height:1.45;flex:1}

/* ---- cards grandes de seção ---- */
.ck-secoes{display:grid;gap:14px;margin-bottom:8px}
.ck-secao{
  display:flex;flex-direction:column;gap:6px;position:relative;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop-sm);padding:20px;
  transition:transform .16s ease,box-shadow .16s ease;
}
.ck-secao:hover{transform:translate(-3px,-3px);box-shadow:var(--pop-lg)}
.ck-secao:active{transform:translate(1px,1px);box-shadow:var(--pop-sm)}
.ck-secao-ico{display:grid;place-items:center;width:54px;height:54px;margin-bottom:4px;
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md)}
.ck-secao-ico svg{width:30px;height:30px}
.ck-secao .eyebrow{font-size:9.5px;color:var(--brand-ink)}
.ck-secao h3{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:23px;margin:0}
.ck-secao>p{font-size:13px;color:var(--ink-2);margin:0;line-height:1.5;flex:1}
.ck-secao-previa{display:flex;gap:9px;margin-top:11px;padding-top:12px;border-top:2px solid var(--ink-line)}
.ck-secao-previa>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ck-secao-previa b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:24px;line-height:1}
.ck-secao-previa small{font-size:10.5px;color:var(--ink-2);font-weight:700;overflow-wrap:anywhere}
.ck-secao-previa>span+span{padding-left:9px;border-left:2px solid var(--ink-line)}
.ck-secao[data-tom="gold"] .ck-secao-ico{background:var(--gold);color:var(--on-gold)}
.ck-secao[data-tom="teal"] .ck-secao-ico{background:var(--teal);color:var(--on-brand)}
.ck-secao[data-tom="olive"] .ck-secao-ico{background:var(--olive);color:var(--on-brand)}
.ck-secao[data-tom="brand"] .ck-secao-ico{background:var(--brand);color:var(--on-brand)}

/* ---- telas maiores ---- */
@media(min-width:760px){
  .ck-cerebro{grid-template-areas:"arte texto numeros" "arte curva curva";
    grid-template-columns:126px 1fr auto;gap:12px 22px;padding:26px}
  .ck-cerebro-arte{width:126px}
  .ck-cerebro-numeros{grid-template-columns:repeat(4,minmax(78px,1fr));align-self:center}
  .ck-trilho-seta{display:grid}
  .ck-trilho-pista{cursor:grab}
  .ck-secoes{grid-template-columns:1fr 1fr}
}
@media(min-width:1100px){
  .ck-secoes{grid-template-columns:repeat(4,1fr)}
  .ck-secao>p{font-size:12.5px}
}
@media(max-width:400px){
  .ck-cerebro-numeros{grid-template-columns:1fr 1fr}
  .ck-cerebro{grid-template-areas:"arte texto" "numeros numeros" "curva curva"}
}
@media(prefers-reduced-motion:reduce){
  .ck-trilho-pista{scroll-behavior:auto}
  .ck-arco-tinta{transition:none}
}

/* =============================================================================
   35 · Capa com avatar e radar, e a biblioteca de mídia · v43

   A capa passou a ser retrato: o avatar do aluno com o anel de nível, o nome, e
   o radar ao lado. O radar estar aqui é decisão de conteúdo, não de enfeite —
   é o desenho que resume o aluno, e sumir dele dentro de uma subtela tirava do
   painel justamente a parte que faz pensar.

   A biblioteca não usa capa de obra: imagem de terceiro traria problema de
   direito e ficaria desalinhada da marca. A capa é tipográfica, colorida pelo
   tipo de mídia, com o nível na lombada. Parece prateleira, que é o objetivo.
   ============================================================================= */

.ck-cerebro{
  grid-template-areas:"quem quem" "retrato retrato" "numeros numeros" "curva curva";
  grid-template-columns:1fr;gap:15px;
}

/* ---- quem é o aluno ---- */
.ck-cerebro-quem{grid-area:quem;display:flex;align-items:center;gap:15px;min-width:0}
.ck-avatar-anel{
  position:relative;flex:0 0 auto;width:88px;height:88px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--gold) var(--volta,0deg), color-mix(in srgb,var(--on-brand) 34%, transparent) 0);
  padding:5px;box-shadow:0 0 0 3px var(--ink-line);
}
.ck-avatar-anel img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;
  background:var(--on-brand)}
.ck-avatar-nivel{
  position:absolute;right:-7px;bottom:-1px;min-width:28px;height:28px;padding:0 6px;
  display:grid;place-items:center;border-radius:14px;
  background:var(--gold);color:var(--on-gold);border:3px solid var(--ink-line);
  font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:14px;font-weight:800;
}
.ck-cerebro-nome{min-width:0}
.ck-cerebro-nome h1{color:var(--on-brand);font-size:clamp(23px,6vw,31px);margin:2px 0 8px;
  line-height:1.05;overflow-wrap:anywhere}
.ck-cerebro-fichas{display:flex;flex-wrap:wrap;gap:6px}
.ck-cerebro-fichas>span{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--on-brand);color:#1E1711;border:2px solid var(--ink-line);
  border-radius:var(--r-pill);padding:4px 10px;font-size:11px;font-weight:800;
}
.ck-cerebro-fichas svg{width:13px;height:13px}

/* ---- o retrato: radar + leitura ---- */
.ck-cerebro-retrato{
  grid-area:retrato;display:flex;align-items:center;gap:15px;
  background:var(--on-brand);border:2px solid var(--ink-line);border-radius:var(--r-lg);padding:14px;
}
.ck-radar-mini{width:126px;height:126px;flex:0 0 auto;overflow:visible}
.ck-radar-mini-anel{fill:none;stroke:#1E1711;stroke-width:1.2;opacity:.16}
.ck-radar-mini-anel:last-of-type{opacity:.38;stroke-width:2}
.ck-radar-mini-raio{stroke:#1E1711;stroke-width:1;opacity:.14}
.ck-radar-mini-area{fill:var(--brand);fill-opacity:.26;stroke:var(--brand);stroke-width:2.6;
  stroke-linejoin:round}
.ck-radar-mini-ponto{fill:var(--brand)}
.ck-cerebro-retrato-texto{min-width:0}
.ck-cerebro-retrato-texto .eyebrow{color:#7A5D12;font-size:9.5px;display:block;margin-bottom:4px}
.ck-cerebro-retrato-texto p{color:#1E1711;font-size:13px;line-height:1.5;margin:0 0 7px}
.ck-cerebro-retrato-texto p b{font-weight:800}
.ck-cerebro-link{font-size:12px;font-weight:800;color:#8E2718}

/* ---- biblioteca de mídia ---- */
.ck-biblioteca{margin:0 0 30px}
.ck-biblioteca-lead{font-size:13px;color:var(--ink-2);line-height:1.55;margin:0 0 13px;max-width:70ch}
.ck-biblioteca-lead b{color:var(--ink)}
/* Mesma regra das abas: aba escondida é aba que ninguém clica. */
.ck-abas{display:flex;flex-wrap:wrap;gap:7px;padding:3px 2px 9px;margin:0 -2px 3px}
.ck-aba{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-pill);padding:8px 15px;font-size:13px;font-weight:800;
  box-shadow:var(--pop-sm);transition:transform .14s ease,box-shadow .14s ease;
}
.ck-aba small{font-size:10.5px;font-weight:700;color:var(--ink-2)}
.ck-aba.is-on{background:var(--brand);color:var(--on-brand);transform:translate(1px,1px);box-shadow:none}
.ck-aba.is-on small{color:var(--on-brand);opacity:.85}
.ck-prateleira{display:none}
.ck-prateleira.is-on{display:block}
.ck-prateleira .ck-trilho-pista{gap:12px;padding:6px 2px 10px;margin:-6px -2px -10px}

/* ---- capa tipográfica ---- */
.ck-poster{
  width:min(52vw,168px);display:flex;flex-direction:column;gap:7px;flex:0 0 auto;
  scroll-snap-align:start;color:var(--ink);
}
.ck-poster-capa{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;
  aspect-ratio:2/3;padding:13px;border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  box-shadow:var(--pop-sm);overflow:hidden;
  background:var(--teal);color:var(--on-brand);
  transition:transform .16s ease,box-shadow .16s ease;
}
.ck-poster:hover .ck-poster-capa{transform:translate(-2px,-2px);box-shadow:var(--pop)}
.ck-poster-capa b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:17px;line-height:1.12;color:var(--on-brand);overflow-wrap:anywhere}
.ck-poster-capa small{font-size:10px;font-weight:700;color:var(--on-brand);opacity:.86}
.ck-poster-ico{position:absolute;top:11px;left:11px;opacity:.9}
.ck-poster-ico svg{width:24px;height:24px}
.ck-poster-nivel{
  position:absolute;top:10px;right:10px;font-style:normal;
  background:var(--on-brand);color:#1E1711;border:2px solid var(--ink-line);
  border-radius:var(--r-pill);padding:2px 8px;font-size:10px;font-weight:800;
}
.ck-poster-sotaque{font-size:10.5px;font-weight:800;color:var(--brand-ink);
  text-transform:uppercase;letter-spacing:.05em;line-height:1.2}
.ck-poster-nota{font-size:11.5px;color:var(--ink-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* cada tipo tem sua cor de lombada */
.ck-poster[data-tipo="filme"]   .ck-poster-capa{background:var(--brand)}
.ck-poster[data-tipo="serie"]   .ck-poster-capa{background:var(--teal)}
.ck-poster[data-tipo="musica"]  .ck-poster-capa{background:var(--olive)}
.ck-poster[data-tipo="podcast"] .ck-poster-capa{background:var(--gold)}
.ck-poster[data-tipo="podcast"] .ck-poster-capa b,
.ck-poster[data-tipo="podcast"] .ck-poster-capa small,
.ck-poster[data-tipo="podcast"] .ck-poster-ico{color:var(--on-gold)}
.ck-poster[data-tipo="podcast"] .ck-poster-nivel{background:var(--on-gold);color:var(--gold)}
.ck-poster[data-tipo="video"]   .ck-poster-capa{background:var(--ink)}
.ck-poster[data-tipo="video"]   .ck-poster-capa b,
.ck-poster[data-tipo="video"]   .ck-poster-capa small,
.ck-poster[data-tipo="video"]   .ck-poster-ico{color:var(--bg)}
.ck-poster[data-tipo="video"]   .ck-poster-nivel{background:var(--bg);color:var(--ink)}

@media(min-width:760px){
  .ck-cerebro{grid-template-areas:"quem retrato" "numeros retrato" "curva curva";
    grid-template-columns:minmax(0,1fr) minmax(320px,1.05fr);gap:16px 22px}
  .ck-cerebro-quem{align-self:end}
  .ck-cerebro-numeros{align-self:start}
  .ck-avatar-anel{width:104px;height:104px}
  .ck-radar-mini{width:150px;height:150px}
  .ck-poster{width:178px}
}
@media(max-width:420px){
  .ck-cerebro-retrato{flex-direction:column;text-align:center}
  .ck-cerebro-retrato-texto p{font-size:12.5px}
  .ck-poster{width:min(60vw,158px)}
}

/* =============================================================================
   36 · Capas cadastradas e o admin da biblioteca · v43

   A capa tipográfica continua sendo o padrão; quando o admin cadastra a imagem,
   ela cobre o card e o texto ganha um véu escuro embaixo para continuar legível
   sobre qualquer foto. Um título branco jogado direto sobre a imagem funciona
   com um pôster escuro e some com um claro — o véu resolve os dois.
   ============================================================================= */

.ck-poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ck-poster.tem-capa .ck-poster-capa{background:var(--ink-line)}
.ck-poster.tem-capa .ck-poster-capa:after{
  content:"";position:absolute;inset:40% 0 0 0;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(16,14,11,.9));
}
.ck-poster.tem-capa .ck-poster-capa b,
.ck-poster.tem-capa .ck-poster-capa small{position:relative;z-index:1;color:#FFF8EC}
.ck-poster.tem-capa .ck-poster-ico{display:none}
.ck-poster-onde{
  position:absolute;left:10px;bottom:auto;top:10px;font-style:normal;z-index:1;
  background:var(--ink);color:var(--bg);border:2px solid var(--ink-line);
  border-radius:var(--r-pill);padding:2px 9px;font-size:10px;font-weight:800;
}
.ck-poster.tem-capa .ck-poster-onde{background:#FFF8EC;color:#1E1711}

.obra.tem-capa{padding:0;overflow:hidden}
.obra.tem-capa>*:not(.obra-capa){padding-left:17px;padding-right:17px}
.obra.tem-capa>*:last-child{margin-bottom:17px}
.obra-capa{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-bottom:var(--bw) solid var(--ink-line)}
.obra.tem-capa .obra-tipo{padding-top:14px}
.obra-onde{align-self:flex-start;font-size:12.5px;padding:9px 15px;margin-top:2px}

/* ---- admin da biblioteca ---- */
/* Contêiner próprio: a .admin-card do formulário de configurações é uma grade
   de duas colunas, e a biblioteca precisa da largura inteira. */
.midia-card{background:var(--surface);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop);padding:26px;display:block}
.midia-topo{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;
  margin-bottom:14px}
.midia-topo h2{font-size:20px;margin:3px 0 0}
.midia-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.midia-filtros>*{margin:0}
.midia-filtros input,.midia-filtros select{min-width:170px;width:auto}
.midia-busca{display:block}
.midia-status{font-size:13px;margin:0 0 14px;min-height:19px}
.midia-status.is-ok{color:var(--olive-ink);font-weight:700}
.midia-status.is-ruim{color:var(--brand-ink);font-weight:700}

.midia-lista{display:grid;gap:14px}
.midia-item{display:flex;gap:16px;align-items:flex-start;
  background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-lg);padding:15px}
.midia-capa{position:relative;flex:0 0 auto;width:104px;aspect-ratio:2/3;overflow:hidden;
  border:2px solid var(--ink-line);border-radius:var(--r-sm);background:var(--teal);display:grid}
.midia-capa img{width:100%;height:100%;object-fit:cover;display:block}
.midia-capa[data-tipo="filme"]{background:var(--brand)}
.midia-capa[data-tipo="serie"]{background:var(--teal)}
.midia-capa[data-tipo="musica"]{background:var(--olive)}
.midia-capa[data-tipo="podcast"]{background:var(--gold)}
.midia-capa[data-tipo="video"]{background:var(--ink)}
.midia-capa-vazia{align-self:end;padding:9px;display:grid;gap:2px}
.midia-capa-vazia b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:13px;line-height:1.15;color:var(--on-brand);overflow-wrap:anywhere}
.midia-capa[data-tipo="podcast"] .midia-capa-vazia b{color:var(--on-gold)}
.midia-capa[data-tipo="video"] .midia-capa-vazia b{color:var(--bg)}
.midia-capa-vazia small{font-size:9.5px;font-weight:700;color:var(--on-brand);opacity:.8}
.midia-capa[data-tipo="podcast"] .midia-capa-vazia small{color:var(--on-gold)}
.midia-capa[data-tipo="video"] .midia-capa-vazia small{color:var(--bg)}

.midia-corpo{min-width:0;flex:1}
.midia-corpo .eyebrow{color:var(--brand-ink);font-size:10px}
.midia-corpo h3{font-size:19px;margin:3px 0 5px}
.midia-corpo h3 small{font-size:13px;font-weight:400;color:var(--ink-2)}
.midia-corpo>.muted{font-size:12.5px;line-height:1.5;margin:0 0 12px}
.midia-campos{display:grid;gap:10px;margin-bottom:12px}
.midia-campos label{font-size:12px;font-weight:700;display:grid;gap:4px;margin:0}
.midia-campos input{width:100%;min-width:0}
.midia-acoes{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.midia-acoes .button{font-size:12.5px;padding:9px 15px}
.midia-enviar{cursor:pointer;margin:0}
.midia-item-status{font-size:12px;font-weight:700;color:var(--ink-2)}
.midia-item-status.is-ok{color:var(--olive-ink)}
.midia-item-status.is-ruim{color:var(--brand-ink)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* os dois campos ficam empilhados sempre: lado a lado, dentro de um card de
   três colunas, "Onde assistir" virava uma caixa onde não cabe "Netflix" */
@media(min-width:760px){
  .midia-lista{grid-template-columns:1fr 1fr}
}
@media(min-width:1180px){.midia-lista{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){
  .midia-item{flex-direction:column}
  .midia-capa{width:100%;aspect-ratio:16/9}
  .midia-capa-vazia{align-self:center;justify-items:center;text-align:center}
}

/* =============================================================================
   37 · Ilustração nos cards, faixa de atalhos e Métodos · v44
   ============================================================================= */

/* ---- competência ---- */
/* Sem desenho atrás: com sete cards lado a lado, a ilustração repetida virava
   ruído e disputava com o número, que é o que se lê de longe. A cor do arco já
   diferencia os eixos. */
.ck-comp{padding-top:19px}
.ck-comp[data-eixo="escutar"] .ck-arco-tinta{stroke:var(--teal)}
.ck-comp[data-eixo="gramatica"] .ck-arco-tinta{stroke:var(--olive)}
.ck-comp[data-eixo="cultura"] .ck-arco-tinta{stroke:var(--gold)}
.ck-comp.is-medindo .ck-arco-tinta{stroke:var(--ink-3)}

/* ---- ação com ilustração ---- */
.ck-acao{position:relative;overflow:hidden}
.ck-acao-arte{position:absolute;right:-26px;bottom:-14px;width:118px;opacity:.22;pointer-events:none}
.ck-acao-arte img,.ck-acao-arte svg{width:100%;height:auto;display:block}
.ck-acao>*:not(.ck-acao-arte){position:relative;z-index:1}
.ck-acao p{max-width:20ch}

/* ---- faixa de atalhos ---- */
.ck-faixa{margin:0 0 28px}
.ck-faixa-pista{
  display:flex;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;
  padding:5px 2px 9px;margin:-5px -2px -9px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ck-faixa-pista::-webkit-scrollbar{display:none}
.ck-atalho{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:72px;
  color:var(--ink);text-align:center;
}
.ck-atalho-ico{
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--surface);border:var(--bw) solid var(--ink-line);box-shadow:var(--pop-sm);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.ck-atalho-ico svg{width:26px;height:26px}
.ck-atalho:hover .ck-atalho-ico{transform:translate(-2px,-2px);box-shadow:var(--pop);
  background:var(--gold);color:var(--on-gold)}
.ck-atalho:active .ck-atalho-ico{transform:translate(1px,1px);box-shadow:none}
.ck-atalho small{font-size:11px;font-weight:800;line-height:1.15;overflow-wrap:anywhere}
/* alterna o tom dos ícones para a faixa não virar uma fileira cinza */
.ck-atalho:nth-child(4n+1) .ck-atalho-ico{color:var(--brand-ink)}
.ck-atalho:nth-child(4n+2) .ck-atalho-ico{color:var(--teal-ink)}
.ck-atalho:nth-child(4n+3) .ck-atalho-ico{color:var(--olive-ink)}
.ck-atalho:nth-child(4n+4) .ck-atalho-ico{color:var(--gold-ink)}

/* ---- métodos ---- */
.metodo-grade{display:grid;gap:16px;margin-bottom:10px}
.metodo{
  position:relative;overflow:hidden;
  background:var(--surface);color:var(--ink);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-xl);box-shadow:var(--pop-sm);padding:22px;
}
.metodo-topo{display:flex;align-items:center;gap:15px;margin-bottom:14px}
.metodo-arte{width:74px;flex:0 0 auto}
.metodo-arte img,.metodo-arte svg{width:100%;height:auto;display:block}
.metodo-n{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:13px;font-weight:800;color:var(--ink-3);display:block;line-height:1}
.metodo-topo h2{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(21px,5vw,26px);margin:2px 0 5px;line-height:1.08}
.metodo-base{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink)}
.metodo-base svg{width:16px;height:16px}
.metodo-oque{font-size:14.5px;line-height:1.6;margin:0 0 12px;max-width:62ch}
.metodo-porque{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 15px;max-width:62ch;
  padding-left:14px;border-left:var(--bw) solid var(--ink-line)}
.metodo-porque b{color:var(--ink)}
.metodo-onde{background:var(--surface-2);border:2px solid var(--ink-line);
  border-radius:var(--r-md);padding:14px 16px;margin-bottom:12px}
.metodo-onde .eyebrow{color:var(--ink-2);font-size:9.5px;display:block;margin-bottom:8px}
.metodo-onde ul{margin:0;padding-left:18px;display:grid;gap:5px}
.metodo-onde li{font-size:13px;line-height:1.45}
.metodo-onde li::marker{color:var(--brand)}
.metodo-fonte{font-size:11.5px;color:var(--ink-3);margin:0;font-style:italic}
.metodo[data-tom="brand"]{border-top:9px solid var(--brand)}
.metodo[data-tom="teal"]{border-top:9px solid var(--teal)}
.metodo[data-tom="gold"]{border-top:9px solid var(--gold)}
.metodo[data-tom="olive"]{border-top:9px solid var(--olive)}

@media(min-width:900px){
  .metodo-grade{grid-template-columns:1fr 1fr}
  .ck-atalho{width:82px}
}

/* ---- link da sala visível, e o olho da senha ---------------------------- */
/* O aviso de "link copiado" vira o próprio link quando copiar falha: é o único
   caso em que o endereço escrito ajuda, e aí ele precisa quebrar linha. */
#duelo-copiado{overflow-wrap:anywhere;display:block}
.duelo-link-dica{font-size:12.5px;color:var(--ink-2);margin:10px 0 0;line-height:1.55;text-align:center}
/* O código citado dentro da frase é destaque de texto, não o cartaz: sem isto
   ele herdava o tamanho gigante do código da sala e quebrava a frase em duas. */
.duelo-link-dica b{color:var(--ink);font-weight:800;letter-spacing:.06em}

/* O botão fica dentro do campo; o padding da direita abre o espaço dele para o
   texto da senha não passar por baixo do ícone. */
.campo-senha{position:relative;display:block}
.campo-senha>input{width:100%;padding-right:48px}
.ver-senha{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:50%;color:var(--ink-2);cursor:pointer;padding:0;
}
.ver-senha svg{width:22px;height:22px}
.ver-senha:hover{color:var(--ink);background:var(--surface-2)}
.ver-senha[aria-pressed="true"]{color:var(--brand-ink)}
.ver-senha:focus-visible{outline:3px solid var(--brand);outline-offset:2px}

/* =============================================================================
   38 · A trilha como fio · v45

   A linha vertical liga os nós; cada nó é uma etapa. Só o nó da vez é clicável —
   adiantar não ajuda, porque a contagem é sequencial e a etapa seguinte só
   começa a contar depois que a anterior fecha.
   ============================================================================= */

.trilha-capa-medidor{height:9px;background:color-mix(in srgb,var(--ink-line) 45%, transparent);
  border:2px solid var(--ink-line);border-radius:var(--r-pill);overflow:hidden;margin:13px 0 5px;max-width:320px}
.trilha-capa-medidor>i{display:block;height:100%;background:var(--on-brand);transition:width .6s ease}
.trilha-capa-passo{color:var(--on-brand);font-size:12px;font-weight:800;opacity:.92}

.fio{list-style:none;margin:0 0 20px;padding:0;position:relative}
/* a linha corre por trás dos nós, alinhada ao centro deles */
.fio:before{content:"";position:absolute;left:25px;top:22px;bottom:22px;width:3px;
  background:var(--ink-line);opacity:.28;border-radius:2px}
.fio-etapa{position:relative;margin-bottom:11px}
.fio-link{display:flex;gap:15px;align-items:flex-start;padding:15px;
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  color:var(--ink);transition:transform .16s ease,box-shadow .16s ease}
.fio-no{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  border:var(--bw) solid var(--ink-line);background:var(--surface-2);color:var(--ink);
  position:relative;z-index:1}
.fio-no svg{width:20px;height:20px}
.fio-corpo{display:grid;gap:4px;min-width:0;flex:1}
.fio-corpo b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:17px;line-height:1.2}
.fio-corpo small{font-size:12.5px;color:var(--ink-2);line-height:1.5}

.fio-etapa.is-feita .fio-link{background:var(--olive-soft)}
.fio-etapa.is-feita .fio-no{background:var(--olive);color:var(--on-brand)}
.fio-etapa.is-depois{opacity:.55}
.fio-etapa.is-agora .fio-link{background:var(--gold-soft);box-shadow:var(--pop-sm)}
.fio-etapa.is-agora .fio-no{background:var(--brand);color:var(--on-brand)}
a.fio-link:hover{transform:translate(-2px,-2px);box-shadow:var(--pop)}
a.fio-link:active{transform:translate(1px,1px);box-shadow:none}

.fio-ir{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;color:var(--brand-ink)}
.fio-quando{font-size:11px;font-weight:700;color:var(--olive-ink)}
/* contagem parcial: a barra anda durante a etapa, não só ao virá-la */
.fio-contagem{display:flex;align-items:center;gap:8px;margin-top:5px}
.fio-contagem>i{display:block;height:7px;flex:1;max-width:150px;border-radius:var(--r-pill);
  background:var(--brand);border:2px solid var(--ink-line);transition:width .5s ease;min-width:8px}
.fio-contagem{position:relative}
.fio-contagem:before{content:"";position:absolute;left:0;top:0;height:7px;width:150px;max-width:100%;
  background:var(--surface-3);border:2px solid var(--ink-line);border-radius:var(--r-pill)}
.fio-contagem>i{position:relative;z-index:1}
.fio-contagem>small{font-size:11px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.fio-etapa.is-feita .fio-contagem>i{background:var(--olive)}

@media(max-width:600px){
  .fio:before{left:22px}
  .fio-link{padding:13px;gap:12px}
  .fio-no{width:34px;height:34px}
}

/* =============================================================================
   39 · Console de administração · v45

   Deliberadamente seco: tabela, número e filtro. Nada de Cervantes, de pontos
   nem de comemoração — quem entra aqui quer conferir o acervo, não jogar. A
   paleta é a mesma da marca, mas aplicada em densidade de planilha.
   ============================================================================= */

/* `body.console-body` em vez de `.console-body`: as classes herdadas
   (.auth-body vem com display:grid e place-items:center) têm a mesma
   especificidade, e a depender da ordem o corpo virava grade — o que fazia a
   barra de abas encolher para o conteúdo e sair para fora da tela no celular. */
body.console-body{display:block;padding:0;background:var(--bg);min-height:100vh;overflow-x:hidden}
body.console-body .console-abas,
body.console-body .console-topo,
body.console-body .console-corpo{max-width:100%;box-sizing:border-box}
.console-topo{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:20px clamp(16px,3vw,32px);border-bottom:var(--bw) solid var(--ink-line);background:var(--surface);
}
/* O tamanho do ícone da marca vinha do CSS que o app.js injeta; aqui nenhum
   deles roda, então a regra é explícita — sem ela o Cervantes ocupa meia tela. */
.console-topo .brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;font-size:25px}
.console-topo .chankeo-brand-icon{width:42px;height:42px;object-fit:contain;flex:0 0 auto}
.console-topo .brand-word{font-family:var(--font-display);font-variation-settings:var(--wonk-reto);
  font-weight:800;letter-spacing:-1.5px;color:var(--ink)}
.console-topo .brand-word i{color:var(--brand-ink);font-style:normal}
.console-titulo{flex:1;min-width:200px}
.console-titulo .eyebrow{color:var(--brand-ink);font-size:10px}
.console-titulo h1{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(20px,3.4vw,27px);margin:2px 0 0}
.console-saidas{display:flex;gap:8px;align-items:center}
.console-tema{width:40px;height:40px;border:var(--bw) solid var(--ink-line);border-radius:50%;
  background:var(--surface-2);color:var(--ink);font-size:18px}

.console-abas{display:flex;flex-wrap:wrap;gap:6px;padding:12px clamp(16px,3vw,32px);
  border-bottom:2px solid var(--ink-line);background:var(--surface-2)}
.console-aba{flex:0 0 auto;background:transparent;border:2px solid transparent;border-radius:var(--r-pill);
  padding:8px 16px;font-size:13.5px;font-weight:800;color:var(--ink-2);cursor:pointer}
.console-aba:hover{color:var(--ink);background:var(--surface)}
.console-aba.is-on{background:var(--brand);color:var(--on-brand);border-color:var(--ink-line)}
.console-aba.is-link{color:var(--brand-ink)}

.console-corpo{padding:clamp(18px,3vw,30px);max-width:1500px;margin:0 auto}
.console-secao{margin-bottom:30px}
.console-secao h2{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:21px;margin:0 0 6px}
.console-lead{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin:0 0 16px;max-width:86ch}
.console-lead code,.console-porque code{font-size:12px;background:var(--surface-2);
  border:1px solid var(--ink-line);border-radius:5px;padding:1px 5px}
.console-cabeca{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:flex-start}
.console-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.console-filtros input,.console-filtros select{min-width:170px;margin:0}
.console-filtros .button{font-size:12.5px;padding:10px 15px;white-space:nowrap}
.console-contagem{font-size:12.5px;font-weight:800;color:var(--ink-2);margin:12px 0 10px}

/* ---- números ---- */
.console-nums{display:grid;gap:11px;grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
.console-num{background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  padding:16px;display:grid;gap:2px;box-shadow:var(--pop-sm)}
.console-num b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:clamp(23px,3.6vw,31px);line-height:1}
.console-num small{font-size:12px;font-weight:800;color:var(--ink-2)}
.console-num i{font-size:11px;color:var(--ink-2);font-style:normal}

.console-duplo{display:grid;gap:22px}
.console-barras{display:grid;gap:8px}
.console-barra{display:grid;grid-template-columns:minmax(120px,1fr) minmax(70px,2fr) 40px;
  align-items:center;gap:11px;font-size:13px}
.console-barra>i{display:block;height:11px;background:var(--brand);border:2px solid var(--ink-line);
  border-radius:var(--r-pill);min-width:8px}
.console-barra>b{font-family:var(--font-display);font-size:15px;text-align:right}

/* ---- tabela ---- */
.console-tabela-casca{overflow-x:auto;border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--pop-sm)}
.console-tabela{width:100%;border-collapse:collapse;font-size:13px;min-width:720px}
.console-tabela th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);padding:12px 13px;
  border-bottom:var(--bw) solid var(--ink-line);background:var(--surface-2);
  position:sticky;top:0;z-index:1}
.console-tabela td{padding:11px 13px;border-bottom:2px solid var(--surface-3);vertical-align:top;
  line-height:1.45}
.console-tabela tr:last-child td{border-bottom:0}
.console-tabela tbody tr:hover{background:var(--surface-2)}
.console-tabela b{font-weight:800}
.console-tabela small{display:block;font-size:11.5px;color:var(--ink-2);margin-top:2px}
.console-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--ink-2)}
.console-exemplo{max-width:320px;font-style:italic}
.console-fonte{font-size:11.5px;color:var(--ink-2);font-style:italic;max-width:220px}
.console-vazio{text-align:center;color:var(--ink-2);padding:26px}
.console-mini-lista{margin:0;padding-left:16px;display:grid;gap:3px}
.console-mini-lista li{font-size:12px;line-height:1.4}

.console-selo{display:inline-block;background:var(--surface-2);border:2px solid var(--ink-line);
  border-radius:var(--r-pill);padding:2px 9px;font-size:11px;font-weight:800;white-space:nowrap}
.console-selo.is-eixo{background:var(--teal-soft)}
.console-selo.is-tipo{background:var(--gold-soft)}
.console-selo.is-admin{background:var(--brand);color:var(--on-brand)}

/* ---- trilhas no console ---- */
.console-trilha{background:var(--surface);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-lg);padding:18px;margin-bottom:14px;box-shadow:var(--pop-sm)}
.console-trilha header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  justify-content:space-between;margin-bottom:8px}
.console-trilha header>div{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.console-trilha header b{font-family:var(--font-display);font-variation-settings:var(--wonk);font-size:19px}
.console-trilha header code,.console-etapas code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--ink-line);
  border-radius:5px;padding:1px 6px}
.console-etapas-n{font-size:12px;font-weight:800;color:var(--ink-2)}
.console-trilha>p{font-size:13.5px;color:var(--ink-2);margin:0 0 8px;line-height:1.55;max-width:80ch}
.console-porque{font-size:12.5px;padding-left:12px;border-left:3px solid var(--ink-line)}
.console-porque b{color:var(--ink)}
.console-etapas{margin:12px 0 0;padding-left:20px;display:grid;gap:9px}
.console-etapas li{font-size:13px;display:grid;gap:3px}
.console-etapas li b{font-size:14px}
.console-etapas li small{font-size:12px;color:var(--ink-2)}
.console-etapas li::marker{color:var(--brand);font-weight:800}

@media(min-width:900px){.console-duplo{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .console-topo{padding:15px 16px}
  .console-corpo{padding:16px}
  .console-filtros input,.console-filtros select{min-width:0;flex:1}
}

/* ==========================================================================
   40 · Acomodar em vez de rolar
   --------------------------------------------------------------------------
   Barra de rolagem dentro de barra de rolagem é o defeito mais chato que uma
   interface pode ter: o dedo rola a caixa errada, o teclado some no meio da
   página e nada volta para onde estava. A regra desta seção é simples —
   conteúdo se acomoda; rolagem de lado só onde ela é o gesto combinado (os
   trilhos da Brújula e a faixa de atalhos, que existem para deslizar).

   A coluna da esquerda é o caso que mais doía: com o bloco promocional no pé,
   ela pedia 1164px de altura e ganhava rolagem própria em qualquer tela
   normal. Aqui a navegação encolhe um pouco, o promocional sai quando não
   cabe, e o rodapé da conta — que tem o botão de sair — fica sempre visível.
   ========================================================================== */

.sidebar{
  overflow:hidden;                 /* nada de barra própria na coluna */
  scrollbar-width:none;
  padding-top:26px;padding-bottom:22px;
}
.sidebar::-webkit-scrollbar{display:none}
/* O respiro entre a marca e o menu é da MARCA, não do bloco do curso: em tela
   baixa o curso e o rótulo "SEU ESPAÇO" somem, e com a folga presa neles o
   primeiro item do menu subia e encostava no logotipo. */
.sidebar .brand{margin-bottom:18px}
.sidebar .course{margin:0 0 16px}
.sidebar nav{gap:5px}
.sidebar nav a{padding:11px 13px}
.sidebar-bottom{padding-top:20px}
.sidebar .region{padding:16px}
.sidebar .region strong{font-size:19px;margin:9px 0}
.sidebar .region p{margin-bottom:12px}
.sidebar .profile{padding-top:16px}

/* Os degraus que a coluna desce quando falta altura. Quem decide qual vale é o
   colunaQueCabe() no ui.js, medindo — regra de altura em CSS errava nos dois
   sentidos, porque a conta de administração tem dois itens de menu a mais e a
   altura útil do navegador muda com a barra de favoritos e com a fonte. */
.sidebar.is-sem-promo .region{display:none}
.sidebar.is-sem-rotulo .nav-caption{display:none}
.sidebar.is-sem-curso .course{display:none}
.sidebar.is-compacta nav{gap:3px}
.sidebar.is-compacta nav a{padding:8px 13px;font-size:13.5px}
.sidebar.is-compacta nav a>span{font-size:20px}
.sidebar.is-compacta .brand{margin-bottom:12px}
.sidebar.is-compacta .sidebar-bottom{padding-top:12px}
/* último degrau: aí sim rola, mas sem barra à vista */
.sidebar.is-rola{overflow-y:auto}

/* A mesma higiene nas caixas internas que ainda podiam ganhar barra própria. */
.metodo-grade,.obra-grade,.trilha-grade,.brujula-vereditos{overflow:visible}
.console-tabela-casca{scrollbar-width:thin}



/* ==========================================================================
   41 · Laboratório — o relatório em passos
   --------------------------------------------------------------------------
   Uma coisa por tela, e em cada tela a mesma ordem: o Cervantes diz a ideia,
   o desenho prova, a conta fica guardada num "quer ver a conta?" fechado.
   Foi o que tirou o ar de laboratório da tela — e, de quebra, o que fez cada
   passo caber no celular sem rolar.

   As animações não são enfeite: a curva se desenha da esquerda para a direita
   porque é assim que ela se lê, e os pontos caem depois dela porque a ordem
   conta a história certa — primeiro o que o modelo previu, depois o que
   aconteceu. Tudo desligado sob prefers-reduced-motion.
   ========================================================================== */

.lab-passo{
  background:var(--surface);border:var(--bw) solid var(--ink-line);border-radius:var(--r-lg);
  box-shadow:var(--pop);padding:16px 16px 14px;margin:0 0 10px;max-width:640px;margin-inline:auto;
  display:flex;flex-direction:column;
}
.lab-passo.is-adiante{animation:lab-entra-dir .34s cubic-bezier(.2,.8,.2,1) both}
.lab-passo.is-atras{animation:lab-entra-esq .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes lab-entra-dir{from{opacity:0;transform:translateX(26px)}}
@keyframes lab-entra-esq{from{opacity:0;transform:translateX(-26px)}}

.lab-passo-topo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.lab-pontos{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.lab-pontos i{
  width:9px;height:9px;border-radius:50%;background:var(--surface-3);
  border:2px solid var(--ink-line);transition:width .25s,background .25s;
}
.lab-pontos i.is-feito{background:var(--olive)}
.lab-pontos i.is-on{width:24px;border-radius:5px;background:var(--brand)}
.lab-contagem{font-size:11.5px;font-weight:800;color:var(--ink-2);white-space:nowrap;flex:0 0 auto}

.lab-capa{color:var(--brand-ink);display:block;margin-bottom:3px}
.lab-titulo{
  font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:25px;line-height:1.16;letter-spacing:-1.1px;margin:0 0 12px;
}
.lab-corpo{flex:1 1 auto;min-width:0}
.lab-corpo>p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.lab-corpo>p b{color:var(--ink)}

.lab-acoes{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:14px;padding-top:12px;border-top:2px solid var(--ink-line);
}
.lab-acoes .button{min-width:118px}

/* -------- o guia: Cervantes diz a ideia antes do gráfico -------- */
.lab-guia{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.lab-guia-art{flex:0 0 76px;width:76px;align-self:flex-end}
.lab-guia-art img,.lab-guia-art svg{display:block;width:100%;height:auto}
.lab-balao{
  position:relative;flex:1 1 auto;min-width:0;margin:0;
  background:var(--surface-2);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:12px 14px;font-size:14px;line-height:1.55;color:var(--ink);box-shadow:var(--pop-sm);
  animation:lab-balao-entra .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:.1s;
}
.lab-balao b{font-weight:800}
/* o rabicho do balão, apontando para o Cervantes */
.lab-balao::before,.lab-balao::after{
  content:'';position:absolute;left:-11px;bottom:16px;width:0;height:0;
  border:8px solid transparent;border-right-color:var(--ink-line);
}
.lab-balao::after{left:-6px;border-right-color:var(--surface-2)}
@keyframes lab-balao-entra{from{opacity:0;transform:translateX(-10px) scale(.96)}}

/* -------- a conta, guardada e não escondida -------- */
.lab-mais{
  border:2px solid var(--ink-line);border-radius:var(--r-sm);background:var(--surface-2);
  margin:10px 0 0;overflow:hidden;
}
.lab-mais>summary{
  cursor:pointer;list-style:none;padding:11px 13px;font-size:13px;font-weight:800;color:var(--brand-ink);
  display:flex;align-items:center;gap:8px;
}
.lab-mais>summary::-webkit-details-marker{display:none}
.lab-mais>summary::after{content:'▾';margin-left:auto;transition:transform .2s;font-size:11px}
.lab-mais[open]>summary::after{transform:rotate(180deg)}
.lab-mais>summary:hover{background:var(--surface-3)}
.lab-mais-corpo{padding:0 13px 13px;animation:ck-rise .25s ease both}
.lab-mais-corpo p{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0 0 8px}
.lab-mais-corpo p:last-child{margin-bottom:0}
.lab-mais-corpo b{color:var(--ink)}

/* -------- gráficos -------- */
.lab-graf{display:block;width:100%;height:auto;margin:2px auto;max-width:400px;overflow:visible}
.lab-quadrado{max-width:270px}
.lab-grade{stroke:var(--ink-line);stroke-width:1;opacity:.15}
.lab-diagonal{fill:none;stroke:var(--ink-line);stroke-width:2;stroke-dasharray:5 5;opacity:.5}
.lab-faixa-ok{fill:var(--olive);opacity:.13}
.lab-eixo{fill:var(--ink-2);font-size:9px;font-weight:700}
.lab-eixo-titulo{fill:var(--ink-2);font-size:8.5px;font-weight:800;letter-spacing:.4px}
.lab-rotulo{fill:var(--ink);font-size:9.5px;font-weight:800}
.lab-rotulo.is-ruim{fill:var(--brand-ink)}
.lab-curva{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lab-marca-h{stroke:var(--ink-line);stroke-width:2;stroke-dasharray:4 4;opacity:.55}
.lab-erro{stroke:var(--brand);stroke-width:2.5;opacity:.5;stroke-linecap:round}
.lab-ponto{fill:var(--teal);stroke:var(--ink-line);stroke-width:1.5}
.lab-ponto.is-bom{fill:var(--olive)}
.lab-ponto.is-ruim{fill:var(--brand)}
.lab-serie{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lab-serie.is-0{stroke:var(--ink-3)}
.lab-serie.is-1{stroke:var(--teal)}
.lab-serie.is-2{stroke:var(--brand)}
.lab-ponto.is-0{fill:var(--ink-3)}
.lab-ponto.is-1{fill:var(--teal)}
.lab-ponto.is-2{fill:var(--brand)}

/* a linha se desenha: pathLength=1 deixa a conta do traço independente do
   comprimento real do caminho, então o mesmo tempo serve para qualquer curva */
.lab-desenha{stroke-dasharray:1;stroke-dashoffset:1;animation:lab-traco .85s cubic-bezier(.35,.1,.25,1) forwards}
@keyframes lab-traco{to{stroke-dashoffset:0}}
.lab-surge{opacity:0;animation:lab-surge .34s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lab-surge{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
circle.lab-surge,text.lab-surge,line.lab-surge,polygon.lab-surge{transform-box:fill-box;transform-origin:center}
.lab-cresce{transform-origin:bottom;animation:lab-cresce .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes lab-cresce{from{transform:scaleY(0)}}
.lab-cresce-x{transform-origin:left;animation:lab-cresce-x .5s cubic-bezier(.2,.9,.3,1.1) both}
@keyframes lab-cresce-x{from{transform:scaleX(0)}}

@media (prefers-reduced-motion:reduce){
  .lab-desenha{stroke-dasharray:none;stroke-dashoffset:0}
  .lab-surge{opacity:1}
}

.lab-legenda{font-size:12px;color:var(--ink-2);margin:2px 0 8px;line-height:1.8;text-align:center}
.lab-chave{display:inline-block;width:14px;height:4px;border-radius:3px;vertical-align:middle;
  background:var(--brand);margin-right:3px}
.lab-chave.is-ponto{width:10px;height:10px;border-radius:50%;background:var(--teal);
  border:1.5px solid var(--ink-line)}
.lab-chave.is-serie.is-0{background:var(--ink-3)}
.lab-chave.is-serie.is-1{background:var(--teal)}
.lab-chave.is-serie.is-2{background:var(--brand)}

.lab-comoler{
  font-size:12.5px;line-height:1.55;color:var(--ink-2);margin:6px 0 0;
  background:var(--surface-2);border:2px solid var(--ink-line);border-radius:var(--r-sm);
  padding:10px 12px;
}
.lab-comoler b{color:var(--ink)}

.lab-destaque{
  display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;
  background:var(--gold-soft);border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:12px 15px;margin:0 0 10px;box-shadow:var(--pop-sm);
}
.lab-destaque b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:30px;line-height:1.1;letter-spacing:-1.2px;color:var(--gold-ink);flex:0 0 auto}
.lab-destaque span{font-size:13px;color:var(--ink-2);line-height:1.45;flex:1 1 140px;min-width:0}

.lab-veredito{
  font-size:13px;line-height:1.6;margin:10px 0 0;padding:11px 13px;
  background:var(--surface-2);border-left:4px solid var(--teal);border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink);
}
.lab-veredito.is-irregular{border-left-color:var(--brand);background:var(--brand-soft)}
.lab-veredito.is-previsivel{border-left-color:var(--olive)}

.lab-sem{
  display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:var(--ink-2);
  background:var(--surface-2);border:2px dashed var(--ink-line);border-radius:var(--r-md);
  padding:14px 16px;margin:8px 0;
}
.lab-sem svg{width:20px;height:20px;flex:0 0 auto;opacity:.7;margin-top:1px}

.lab-numeros{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.lab-numeros>span{
  flex:1 1 86px;min-width:0;background:var(--surface);border:2px solid var(--ink-line);
  border-radius:var(--r-sm);padding:9px 11px;display:flex;flex-direction:column;gap:2px;
}
.lab-numeros b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:19px;line-height:1.15;letter-spacing:-.5px}
.lab-numeros small{font-size:11px;color:var(--ink-2);line-height:1.35}

.lab-tabela{width:100%;border-collapse:collapse;font-size:12.5px;margin:0 0 8px}
.lab-tabela th{text-align:left;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--ink-2);padding:0 6px 6px 0;font-weight:800}
.lab-tabela td{padding:6px 6px 6px 0;border-top:2px solid var(--ink-line)}
.lab-tabela th:not(:first-child),.lab-tabela td:not(:first-child){text-align:right;padding-right:0}
.lab-tabela td:first-child{color:var(--ink-2)}

/* -------- retenção agora -------- */
.lab-medidor{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:2px 0 8px}
.lab-medidor-n{
  flex:1 1 134px;min-width:0;background:var(--teal);color:var(--on-brand);
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);box-shadow:var(--pop-sm);
  padding:14px;display:flex;flex-direction:column;justify-content:center;gap:4px;
}
.lab-medidor-n b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:36px;line-height:1.1;letter-spacing:-1.8px}
.lab-medidor-n small{font-size:12px;line-height:1.4;opacity:.92}
.lab-hist{flex:2 1 190px;min-width:0;display:flex;gap:8px;align-items:flex-end;height:132px}
.lab-hist-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:4px;height:100%;text-align:center}
.lab-hist-col i{display:block;width:100%;min-height:4px;border:2px solid var(--ink-line);
  border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-3)}
.lab-hist-col i.is-risco{background:var(--brand)}
.lab-hist-col i.is-baixa{background:var(--gold)}
.lab-hist-col i.is-media{background:var(--olive)}
.lab-hist-col i.is-alta{background:var(--teal)}
.lab-hist-col b{font-size:14px}
.lab-hist-col small{font-size:10px;color:var(--ink-2);line-height:1.25}

.lab-lista{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:7px}
.lab-lista li{
  display:grid;grid-template-columns:minmax(0,1fr) 62px 38px;
  grid-template-areas:'frase barra nota' 'meta meta meta';
  gap:3px 10px;align-items:center;background:var(--surface-2);border:2px solid var(--ink-line);
  border-radius:var(--r-sm);padding:8px 11px;animation:ck-rise .3s ease both;
}
.lab-lista-frase{grid-area:frase;font-size:13px;font-weight:700;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-lista-barra{grid-area:barra;height:9px;border:2px solid var(--ink-line);border-radius:var(--r-pill);
  background:var(--surface);overflow:hidden}
.lab-lista-barra i{display:block;height:100%;background:var(--brand)}
.lab-lista b{grid-area:nota;text-align:right;font-size:13px}
.lab-lista small{grid-area:meta;font-size:11px;color:var(--ink-2)}
.lab-acao{margin:10px 0 0;text-align:center}

/* -------- as duas provas -------- */
.lab-comparo{display:flex;gap:10px;margin:0}
.lab-comparo-lado{
  flex:1 1 0;min-width:0;background:var(--surface-2);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-md);padding:12px;text-align:center;box-shadow:var(--pop-sm);
}
.lab-comparo-lado b{display:block;font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:26px;letter-spacing:-1px;margin:2px 0 8px;line-height:1.1}
.lab-comparo-lado small{font-size:11.5px;color:var(--ink-2);line-height:1.4;display:block;margin-top:8px}
.lab-pilha{display:flex;flex-direction:column;gap:4px}
.lab-tijolo{
  display:block;font-style:normal;font-size:11px;font-weight:800;padding:5px 0;
  border:2px solid var(--ink-line);border-radius:var(--r-sm);
}
.lab-tijolo.is-facil{background:var(--olive-soft);color:var(--olive-ink)}
.lab-tijolo.is-dificil{background:var(--brand-soft);color:var(--brand-ink)}

/* -------- o mapa de Wright -------- */
.lab-mapa{display:flex;gap:10px;align-items:stretch;margin:4px 0;min-height:220px;padding-top:24px}
.lab-mapa-eu{position:relative;flex:0 0 92px;border-right:3px solid var(--ink-line)}
.lab-mapa-marca{position:absolute;right:8px;transform:translateY(50%);text-align:right}
.lab-mapa-marca b{display:block;font-size:13px;line-height:1.1}
.lab-mapa-marca small{font-size:11.5px;color:var(--ink-2);font-weight:700}
.lab-mapa-faixa{
  position:absolute;right:-13px;width:8px;background:var(--gold);opacity:.75;
  border:2px solid var(--ink-line);border-radius:var(--r-pill);
}
.lab-mapa-marca::after{
  content:'';position:absolute;right:-13px;top:50%;width:22px;height:4px;margin-top:-2px;
  background:var(--brand);border-radius:2px;
}
.lab-mapa-sem{font-size:11.5px;color:var(--ink-2);padding:8px 8px 0;text-align:right}
.lab-mapa-itens{flex:1 1 auto;min-width:0;display:flex;flex-direction:column-reverse;
  justify-content:space-between;gap:2px}
.lab-mapa-linha{display:flex;align-items:center;gap:8px;min-height:20px}
.lab-mapa-nivel{flex:0 0 26px;font-size:10.5px;font-weight:800;color:var(--ink-2)}
.lab-mapa-barra{flex:1 1 auto;min-width:0;height:13px;background:var(--surface-2);
  border:2px solid var(--ink-line);border-radius:var(--r-pill);overflow:hidden}
.lab-mapa-barra i{display:block;height:100%;background:var(--teal)}
.lab-mapa-linha.is-abaixo .lab-mapa-barra i{background:var(--olive)}
.lab-mapa-linha b{flex:0 0 26px;font-size:12px;text-align:right}

.lab-zonas{display:flex;gap:8px;margin:10px 0 0;flex-wrap:wrap}
.lab-zonas>span{flex:1 1 88px;min-width:0;border:2px solid var(--ink-line);border-radius:var(--r-sm);
  padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.lab-zonas .is-dominados{background:var(--olive-soft)}
.lab-zonas .is-zona{background:var(--gold-soft)}
.lab-zonas .is-novos{background:var(--surface-2)}
.lab-zonas b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:22px;line-height:1.15}
.lab-zonas small{font-size:11px;color:var(--ink-2);line-height:1.35}

.lab-exemplos{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.lab-exemplos li{background:var(--surface);border:2px solid var(--ink-line);border-radius:var(--r-sm);
  padding:9px 11px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.lab-exemplos b{font-size:13px;min-width:0;flex:1 1 auto}
.lab-exemplos small{flex:1 0 100%;font-size:11px;color:var(--ink-2)}
/* sobre mostarda a tinta é sempre a escura — regra da casa */
.lab-selo{font-size:10.5px;font-weight:800;background:var(--gold);color:var(--on-gold);
  border:2px solid var(--ink-line);border-radius:var(--r-pill);padding:1px 8px;flex:0 0 auto}

/* -------- a medida -------- */
.lab-medida{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 20px}
.lab-medida-n{
  flex:1 1 auto;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  background:var(--brand);color:var(--on-brand);border:var(--bw) solid var(--ink-line);
  border-radius:var(--r-md);box-shadow:var(--pop-sm);padding:13px 16px;
}
.lab-medida-n b{font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:42px;line-height:1.1;letter-spacing:-2.2px}
.lab-medida-n span{font-size:20px;font-weight:800;opacity:.92}
.lab-medida-n small{flex:1 0 100%;font-size:11.5px;opacity:.9;line-height:1.35;margin-top:3px}
.lab-regua{
  position:relative;height:36px;margin:0 0 28px;
  background:linear-gradient(90deg,var(--surface-3),var(--gold-soft),var(--teal-soft));
  border:var(--bw) solid var(--ink-line);border-radius:var(--r-pill);
}
.lab-regua-faixa{position:absolute;top:-2px;bottom:-2px;background:var(--gold);opacity:.55;
  border:2px solid var(--ink-line);border-radius:var(--r-pill)}
.lab-regua-marca{position:absolute;top:-7px;bottom:-7px;width:5px;margin-left:-2px;
  background:var(--ink-line);border-radius:3px}
.lab-regua-rot{position:absolute;bottom:-21px;font-size:10.5px;font-weight:800;color:var(--ink-2)}

.lab-duas{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.lab-camada{
  flex:1 1 148px;min-width:0;border:var(--bw) solid var(--ink-line);border-radius:var(--r-md);
  padding:13px;box-shadow:var(--pop-sm);
}
.lab-camada.is-1{background:var(--gold-soft)}
.lab-camada.is-2{background:var(--teal-soft)}
.lab-camada b{display:block;font-family:var(--font-display);font-variation-settings:var(--wonk);
  font-size:20px;letter-spacing:-.8px;margin:4px 0 5px}
.lab-camada p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}

.lab-nota{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin:10px 0 0}
.lab-miuda{margin:0;padding-left:20px;display:grid;gap:8px}
.lab-miuda li{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.lab-miuda b{color:var(--ink)}
.lab-fim{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}

@media (max-width:520px){
  .lab-passo{padding:14px 13px 12px}
  .lab-titulo{font-size:22px}
  .lab-guia-art{flex-basis:64px;width:64px}
  .lab-balao{font-size:13.5px;padding:11px 12px}
  .lab-medida-n b{font-size:36px}
  .lab-medidor-n b{font-size:32px}
  .lab-hist{height:112px;flex-basis:100%}
  .lab-lista li{grid-template-columns:minmax(0,1fr) 50px 36px}
  .lab-acoes .button{min-width:0;flex:1 1 auto;padding-left:12px;padding-right:12px}
  .lab-mapa-eu{flex-basis:76px}
}