/* Cuca Afiada — sistema visual
   Ideia: caderno quadriculado + lápis de cor + peças de brinquedo que afundam ao toque.
   Cor só codifica categoria. Toques grandes (48px+), letra legível para todas as idades. */

/* A fonte principal é declarada com as MESMAS faixas de peso dos números: assim o navegador junta as duas
   (letras da principal, números da outra). Com faixas diferentes, o negrito caía em fonte de emoji/sistema. */
@font-face{font-family:"Atkinson";src:url("/f/atkinson.woff2") format("woff2");font-weight:200 600;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/f/atkinson.woff2") format("woff2");font-weight:601 750;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/f/atkinson.woff2") format("woff2");font-weight:751 900;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/f/digits-500.woff2") format("woff2");font-weight:200 600;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/f/digits-700.woff2") format("woff2");font-weight:601 750;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:"Atkinson";src:url("/f/digits-800.woff2") format("woff2");font-weight:751 900;unicode-range:U+0030-0039;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/f/fraunces-soft.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light;
  --paper:#FAFCFD;
  --grid:#E5EEF3;
  --surface:#FFFFFF;
  --surface-2:#F2F6F8;
  --ink:#1E2A33;
  --ink-2:#465763;
  --ink-3:#6E7F8B;
  --line:#D5E0E7;
  --focus:#2D6CDF;

  --pencil:#F5B700; --pencil-edge:#C99400; --pencil-ink:#3A2C00;
  --wood:#EBC28E; --graphite:#2B3640;

  --memoria:#7B4FD1;  --memoria-edge:#5A35A6; --memoria-tint:#EFE8FB;
  --atencao:#0E8585;  --atencao-edge:#096363; --atencao-tint:#DFF3F2;
  --palavras:#2D6CDF; --palavras-edge:#1D4FA9; --palavras-tint:#E4EDFC;
  --logica:#D2570A;   --logica-edge:#A3420A;  --logica-tint:#FCEADD;
  --numeros:#D3374A;  --numeros-edge:#A2222F; --numeros-tint:#FBE4E7;
  --percepcao:#2B8C44;--percepcao-edge:#1D6A31;--percepcao-tint:#E1F3E5;
  --conhecimentos:#B8337A;--conhecimentos-edge:#8C2059;--conhecimentos-tint:#F8E2EE;
  --kids:#F5B700;     --kids-edge:#C99400;    --kids-tint:#FFF4CC;
  --superkids:#5E7FD0;--superkids-edge:#4562AC;--superkids-tint:#E7EDFA;
  --qi:#24313B;       --qi-edge:#0F171D;      --qi-tint:#E9EDF0;

  --ok:#1F8A4C; --ok-tint:#DDF3E6; --err:#C2343F; --err-tint:#FBE3E5;

  --r-xl:26px; --r-lg:20px; --r-md:14px; --r-sm:10px;
  --edge:5px;
  --fs:17px;
  --tab-h:66px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  font-size:var(--fs);
}
:root[data-size="g"]{--fs:19.5px}
:root[data-size="gg"]{--fs:22px}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#11171C; --grid:#18212A; --surface:#19222A; --surface-2:#202B34;
    --ink:#EAF0F4; --ink-2:#B8C6D0; --ink-3:#8B9BA7; --line:#2C3944; --focus:#7FA8F5;
    --memoria:#8C66DE; --memoria-edge:#5A35A6; --memoria-tint:#2A2140;
    --atencao:#17A0A0; --atencao-edge:#0A6B6B; --atencao-tint:#12302F;
    --palavras:#4B83EA; --palavras-edge:#2251A8; --palavras-tint:#18263F;
    --logica:#E2691E; --logica-edge:#9E3F09; --logica-tint:#38220F;
    --numeros:#E04B5C; --numeros-edge:#9F2230; --numeros-tint:#3A1C21;
    --percepcao:#36A452; --percepcao-edge:#1D6A31; --percepcao-tint:#16301D;
    --conhecimentos:#CF4A92; --conhecimentos-edge:#8C2059; --conhecimentos-tint:#36182A;
    --kids-tint:#3A3214; --superkids:#7092E0; --superkids-tint:#1E2840; --qi:#2F3D49; --qi-tint:#1D262E;
    --ok-tint:#15301F; --err-tint:#3A1A1E;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#11171C; --grid:#18212A; --surface:#19222A; --surface-2:#202B34;
  --ink:#EAF0F4; --ink-2:#B8C6D0; --ink-3:#8B9BA7; --line:#2C3944; --focus:#7FA8F5;
  --memoria:#8C66DE; --memoria-tint:#2A2140; --atencao:#17A0A0; --atencao-tint:#12302F;
  --palavras:#4B83EA; --palavras-tint:#18263F; --logica:#E2691E; --logica-tint:#38220F;
  --numeros:#E04B5C; --numeros-tint:#3A1C21; --percepcao:#36A452; --percepcao-tint:#16301D;
  --conhecimentos:#CF4A92; --conhecimentos-tint:#36182A; --kids-tint:#3A3214;
  --superkids:#7092E0; --superkids-tint:#1E2840; --qi:#2F3D49; --qi-tint:#1D262E;
  --ok-tint:#15301F; --err-tint:#3A1A1E;
}

/* modo calmo (Super Kids): cores suaves, sem textura, sem movimento */
:root[data-calm="1"]{
  --memoria:#8E7BB8; --atencao:#5E9C9C; --palavras:#6E8CC4; --logica:#C08A5E; --numeros:#C07A84;
  --percepcao:#6FA07C; --conhecimentos:#B07C99; --kids:#E8C766; --superkids:#7F95C9;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:"Atkinson","Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:450;line-height:1.45;color:var(--ink);background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px;min-height:100dvh;overflow-x:hidden;
}
:root[data-calm="1"] body{background-image:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
img,svg{display:block}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* tipografia */
.display,h1,h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100;letter-spacing:-.01em;line-height:1.08}
h1{font-size:2.05rem;font-weight:850}
h2{font-size:1.45rem;font-weight:800}
h3{font-size:1.12rem;font-weight:750;line-height:1.25}
.lead{font-size:1.06rem;color:var(--ink-2)}
.muted{color:var(--ink-3)}
.small{font-size:.86rem}
.num{font-variant-numeric:tabular-nums}

/* estrutura */
#app{min-height:100dvh;display:flex;flex-direction:column}
.screen{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:calc(12px + var(--safe-t)) 16px calc(var(--tab-h) + 28px + var(--safe-b))}
.screen.narrow{max-width:560px}
.stack>*+*{margin-top:14px}
.row{display:flex;align-items:center;gap:10px}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section{margin-top:28px}
.section-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-h a{font-weight:700;color:var(--ink-2);text-decoration:none;font-size:.95rem;padding:6px 2px}

/* barra do topo */
.topbar{display:flex;align-items:center;gap:10px;min-height:52px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.brand-word{font-family:"Fraunces",serif;font-variation-settings:"SOFT" 100;font-weight:900;font-size:1.45rem;letter-spacing:-.02em;line-height:1}
.topbar .grow{flex:1}
.chip-stat{display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);font-weight:800;font-size:.95rem}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.45rem;background:var(--surface);border:2px solid var(--line)}

/* barra de abas */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1.5px solid var(--line);display:flex;justify-content:center}
.tabbar nav{display:flex;width:100%;max-width:560px}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--ink-3);font-size:.78rem;font-weight:750}
.tabbar a .ti{font-size:1.45rem;line-height:1;filter:grayscale(.85);opacity:.75}
.tabbar a[aria-current="page"]{color:var(--ink)}
.tabbar a[aria-current="page"] .ti{filter:none;opacity:1;transform:translateY(-1px)}
.tabbar a[aria-current="page"]::after{content:"";width:22px;height:4px;border-radius:2px;background:var(--pencil);margin-top:2px}
body.playing .tabbar{display:none}

/* peças (tiles) de lápis de cor: rosto colorido, textura de risco de lápis, espessura embaixo */
.tile{--c:var(--palavras);--ce:var(--palavras-edge);position:relative;display:flex;flex-direction:column;justify-content:space-between;text-align:left;text-decoration:none;
  color:#fff;background-color:var(--c);
  background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.075) 0 2px,transparent 2px 7px);
  border-radius:var(--r-lg);box-shadow:0 var(--edge) 0 var(--ce);padding:14px 14px 12px;min-height:128px;
  transition:transform .08s ease,box-shadow .08s ease;user-select:none;-webkit-user-select:none;overflow:hidden}
.tile:active,.tile.pressed{transform:translateY(4px);box-shadow:0 1px 0 var(--ce)}
.tile .art{font-size:2.6rem;line-height:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.12))}
.tile .t{font-weight:800;font-size:1.02rem;line-height:1.2;text-shadow:0 1px 0 rgba(0,0,0,.18)}
.tile .s{display:block;font-size:.82rem;font-weight:650;opacity:.92;margin-top:2px}
.tile .badges{position:absolute;top:10px;right:10px;display:flex;gap:6px}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:800;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);line-height:1}
.badge.new{background:var(--pencil);color:var(--pencil-ink)}
.badge.lock{background:rgba(20,28,34,.72);color:#fff}
.tile.yellow{color:var(--pencil-ink)}
.tile.yellow .t{text-shadow:none}
:root[data-calm="1"] .tile{background-image:none;transition:none}

.cat-memoria{--c:var(--memoria);--ce:var(--memoria-edge);--ct:var(--memoria-tint)}
.cat-atencao{--c:var(--atencao);--ce:var(--atencao-edge);--ct:var(--atencao-tint)}
.cat-palavras{--c:var(--palavras);--ce:var(--palavras-edge);--ct:var(--palavras-tint)}
.cat-logica{--c:var(--logica);--ce:var(--logica-edge);--ct:var(--logica-tint)}
.cat-numeros{--c:var(--numeros);--ce:var(--numeros-edge);--ct:var(--numeros-tint)}
.cat-percepcao{--c:var(--percepcao);--ce:var(--percepcao-edge);--ct:var(--percepcao-tint)}
.cat-conhecimentos{--c:var(--conhecimentos);--ce:var(--conhecimentos-edge);--ct:var(--conhecimentos-tint)}
.cat-kids{--c:var(--kids);--ce:var(--kids-edge);--ct:var(--kids-tint)}
.cat-superkids{--c:var(--superkids);--ce:var(--superkids-edge);--ct:var(--superkids-tint)}
.cat-qi{--c:var(--qi);--ce:var(--qi-edge);--ct:var(--qi-tint)}

.grid-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
@media (min-width:620px){.grid-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.grid-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1100px){.grid-tiles{grid-template-columns:repeat(5,minmax(0,1fr))}}
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 16px 10px;margin:0 -16px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>.tile{flex:0 0 46%;max-width:210px;scroll-snap-align:start}
@media (min-width:620px){.rail>.tile{flex-basis:30%}}

/* botões */
.btn{--c:var(--ink);--ce:#000;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 20px;border-radius:var(--r-md);
  font-weight:800;font-size:1.04rem;text-decoration:none;background:var(--c);color:#fff;box-shadow:0 4px 0 var(--ce);transition:transform .08s,box-shadow .08s;user-select:none}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ce)}
.btn.primary{--c:var(--pencil);--ce:var(--pencil-edge);color:var(--pencil-ink)}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--line);border:2px solid var(--line)}
.btn.ghost:active{box-shadow:0 1px 0 var(--line)}
.btn.block{display:flex;width:100%}
.btn.sm{min-height:42px;padding:8px 14px;font-size:.95rem}
.btn[disabled]{opacity:.5;pointer-events:none}
.icon-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.3rem;background:var(--surface);border:2px solid var(--line);box-shadow:0 3px 0 var(--line)}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.link{background:none;border:0;padding:8px 4px;font-weight:750;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

/* cartões e superfícies */
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-lg);padding:16px}
.card.tint{background:var(--ct,var(--surface-2));border-color:transparent}
.hr{height:2px;background:var(--line);border:0;margin:16px 0}

/* segmentado (Básico/Médio/Avançado) */
.seg{display:flex;background:var(--surface-2);border:2px solid var(--line);border-radius:16px;padding:4px;gap:4px}
.seg button{flex:1;min-height:44px;border-radius:12px;font-weight:800;color:var(--ink-2);font-size:.98rem}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 0 var(--line)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 6px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:var(--surface);font-weight:750;font-size:.95rem;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--c,var(--ink));border-color:var(--c,var(--ink));color:#fff}

/* formulários */
.field{display:block}
.field>span{display:block;font-weight:750;margin-bottom:6px}
.input{width:100%;min-height:52px;padding:12px 14px;border-radius:var(--r-md);border:2px solid var(--line);background:var(--surface);font-size:1.05rem}
.input:focus{border-color:var(--focus);outline:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.check input{width:22px;height:22px;margin-top:1px;flex:none;accent-color:var(--ink)}
.form-error{background:var(--err-tint);color:var(--err);border-radius:var(--r-sm);padding:10px 12px;font-weight:700}

/* folha de baixo (modal) */
.sheet-bg{position:fixed;inset:0;z-index:60;background:rgba(15,22,28,.48);display:flex;align-items:flex-end;justify-content:center;animation:fade .15s ease}
.sheet{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--surface);border-radius:26px 26px 0 0;padding:20px 18px calc(22px + var(--safe-b));animation:up .2s ease}
@media (min-width:620px){.sheet-bg{align-items:center}.sheet{border-radius:26px}}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:-6px auto 14px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(30px);opacity:.4}}

/* aviso flutuante */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 18px + var(--safe-b));transform:translateX(-50%);z-index:80;background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:14px;font-weight:750;max-width:calc(100% - 32px);box-shadow:0 8px 24px rgba(0,0,0,.25);animation:up .2s ease}
body.playing .toast{bottom:calc(24px + var(--safe-b))}

/* mascote */
.mascot{width:72px;height:auto}
.mascot.lg{width:120px}

/* anúncios */
.ad-slot{margin:22px 0 4px;min-height:60px;border-radius:var(--r-md);background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:.8rem;overflow:hidden}
.ad-slot.ad-demo{min-height:96px;background:transparent;border:2px dashed var(--line);padding:12px 16px;text-align:center}
.ad-demo span{display:flex;flex-direction:column;gap:3px;color:var(--ink-3);font-size:.85rem}
.ad-demo b{color:var(--ink-2);font-size:.9rem}
.test-note{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface-2);border:1.5px solid var(--line)}
.test-note p{margin:0;font-size:.9rem;line-height:1.4;color:var(--ink-2)}
.test-note b{color:var(--ink)}
.test-note button{flex:none;border:none;background:none;font-size:1.1rem;color:var(--ink-3);padding:2px 4px;min-height:0}
.ad-slot .ad-label{position:absolute}

/* consentimento */
.consent{position:fixed;left:12px;right:12px;bottom:calc(var(--tab-h) + 12px + var(--safe-b));z-index:70;max-width:536px;margin:0 auto;background:var(--surface);border:2px solid var(--line);border-radius:20px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.consent p{font-size:.92rem;color:var(--ink-2)}
.consent .row{margin-top:12px}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
:root[data-motion="0"] *{animation-duration:.01ms!important;transition-duration:.01ms!important}
[hidden]{display:none!important}

/* Tela de jogo e peças compartilhadas pelos jogos */
.play{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background-color:var(--paper);
  padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
.play-top{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:60px}
.play-title{flex:1;min-width:0}
.play-title b{display:block;font-weight:800;font-size:1rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-title span{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.lvl-dots{display:inline-flex;gap:3px}
.lvl-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.lvl-dots i.on{background:var(--c,var(--ink))}
.play-stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 12px 10px;overflow:hidden}
.play-bottom{display:flex;align-items:center;gap:10px;padding:8px 14px 12px;min-height:58px}
.round-dots{display:flex;gap:6px;flex:1}
.round-dots i{flex:0 1 28px;height:8px;border-radius:4px;background:var(--line)}
.round-dots i.win{background:var(--ok)}
.round-dots i.lose{background:var(--err)}
.round-dots i.cur{background:var(--c,var(--ink));opacity:.55}
.status{font-weight:800;font-size:.98rem;color:var(--ink-2);white-space:nowrap}
.hint-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:12px;background:var(--pencil);color:var(--pencil-ink);font-weight:800;box-shadow:0 3px 0 var(--pencil-edge)}
.hint-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--pencil-edge)}
.hint-btn[hidden]{display:none}

/* área do jogo: o motor recebe .g-root com o espaço disponível */
.g-root{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.g-root.no-scroll{touch-action:none}
.g-prompt{font-size:1.18rem;font-weight:750;text-align:center;line-height:1.35;max-width:34em}
.g-big{font-family:"Fraunces",serif;font-variation-settings:"SOFT" 100;font-weight:850;font-size:2.4rem;line-height:1.05;text-align:center}
.g-emoji{font-size:3.4rem;line-height:1;text-align:center}
.g-sub{font-size:.95rem;color:var(--ink-3);font-weight:700;text-align:center}

/* opções de resposta */
.g-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:520px}
.g-choices.one{grid-template-columns:1fr}
.g-choice{min-height:64px;padding:12px;border-radius:16px;background:var(--surface);border:2.5px solid var(--line);box-shadow:0 4px 0 var(--line);
  font-weight:800;font-size:1.12rem;line-height:1.2;display:flex;align-items:center;justify-content:center;text-align:center;gap:8px;transition:transform .08s,box-shadow .08s}
.g-choice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.g-choice.big{font-size:2.2rem;min-height:84px}
.g-choice.ok{background:var(--ok-tint);border-color:var(--ok);box-shadow:0 4px 0 var(--ok);color:var(--ok)}
.g-choice.bad{background:var(--err-tint);border-color:var(--err);box-shadow:0 4px 0 var(--err);color:var(--err)}
.g-choice.dim{opacity:.45}
.g-choice[disabled]{pointer-events:none}

/* peças de letra (madeira pintada) */
.g-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.g-tile{width:var(--ts,48px);height:var(--ts,48px);border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:calc(var(--ts,48px)*.5);
  background:var(--surface);border:2.5px solid var(--c,var(--ink));color:var(--ink);box-shadow:0 4px 0 var(--ce,var(--ink));text-transform:uppercase;transition:transform .08s,box-shadow .08s}
.g-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ce,var(--ink))}
.g-tile.filled{background:var(--c);color:#fff}
.g-tile.used{opacity:.25;pointer-events:none}
.g-slot{width:var(--ts,48px);height:var(--ts,48px);border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:calc(var(--ts,48px)*.5);
  border:2.5px dashed var(--line);background:var(--surface-2);text-transform:uppercase}
.g-slot.filled{border-style:solid;border-color:var(--c);background:var(--surface)}

/* teclado na tela */
.g-keys{width:100%;max-width:520px;display:flex;flex-direction:column;gap:7px}
.g-keys .kr{display:flex;gap:5px;justify-content:center}
.g-key{flex:1;max-width:46px;min-height:52px;border-radius:9px;background:var(--surface);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font-weight:800;font-size:1.08rem;text-transform:uppercase}
.g-key.wide{max-width:76px;flex:1.6;font-size:.85rem}
.g-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.g-key.hit{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 3px 0 #146536}
.g-key.near{background:var(--pencil);border-color:var(--pencil);color:var(--pencil-ink);box-shadow:0 3px 0 var(--pencil-edge)}
.g-key.miss{background:var(--surface-2);color:var(--ink-3);border-color:var(--surface-2);box-shadow:none}
.g-numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:340px}
.g-numpad button{min-height:56px;border-radius:14px;background:var(--surface);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);font-weight:800;font-size:1.45rem}
.g-numpad button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.g-numpad .ok{background:var(--ok);color:#fff;border-color:var(--ok);box-shadow:0 3px 0 #146536;font-size:1.1rem}
.g-display{min-width:160px;min-height:60px;padding:8px 16px;border-radius:16px;border:2.5px solid var(--c,var(--ink));background:var(--surface);font-weight:800;font-size:2rem;text-align:center;font-variant-numeric:tabular-nums}

/* grades (tabuleiros) */
.g-board{display:grid;gap:var(--gap,6px);width:min(100%,var(--bw,520px))}
.g-cell{aspect-ratio:1;border-radius:var(--cr,12px);background:var(--surface);border:2px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:var(--cf,1.4rem);
  transition:transform .08s,background .15s,border-color .15s}
.g-cell:active{transform:scale(.96)}
.g-cell.on{background:var(--c);border-color:var(--c);color:#fff}
.g-cell.hit{background:var(--ok-tint);border-color:var(--ok)}
.g-cell.bad{background:var(--err-tint);border-color:var(--err)}

/* cartas (jogo da memória) */
.g-card{display:block;padding:0;border:0;background:none;perspective:600px;aspect-ratio:1}
.g-card .in{display:block;position:relative;width:100%;height:100%;transition:transform .32s;transform-style:preserve-3d}
.g-card.open .in,.g-card.done .in{transform:rotateY(180deg)}
.g-card .fa,.g-card .ba{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.g-card .fa{background-color:var(--c);background-image:repeating-linear-gradient(118deg,rgba(255,255,255,.1) 0 2px,transparent 2px 7px);box-shadow:0 4px 0 var(--ce)}
.g-card .fa::after{content:"?";font-family:"Fraunces",serif;font-weight:900;font-size:1.6rem;color:rgba(255,255,255,.85)}
.g-card .ba{transform:rotateY(180deg);background:var(--surface);border:2.5px solid var(--c);font-size:var(--cf,2rem);font-weight:800;text-align:center;line-height:1.1;padding:4px;box-shadow:0 4px 0 var(--line)}
.g-card.done .ba{background:var(--ok-tint);border-color:var(--ok)}
:root[data-motion="0"] .g-card .in{transition:none}

/* retorno da rodada */
.g-flash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:5}
.g-flash>div{font-family:"Fraunces",serif;font-variation-settings:"SOFT" 100;font-weight:900;font-size:2.2rem;padding:14px 26px;border-radius:22px;background:var(--surface);
  box-shadow:0 10px 30px rgba(0,0,0,.18);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}
.g-flash .w{color:var(--ok)} .g-flash .l{color:var(--ink-2)}
@keyframes pop{from{transform:scale(.6);opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .32s}
:root[data-calm="1"] .shake{animation:none}

/* instruções e fim de jogo */
.howto{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:440px;padding:8px}
.howto .art{font-size:4rem;line-height:1}
.howto p{font-size:1.08rem;line-height:1.5;color:var(--ink-2)}
.end{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;width:100%;max-width:440px;overflow:auto;max-height:100%;padding:6px 4px 10px}
.end .stars{display:flex;gap:6px;font-size:2.3rem}
.end .stars span{filter:grayscale(1);opacity:.3}
.end .stars span.on{filter:none;opacity:1}
.end .xp{font-weight:800;color:var(--ink-2)}
.fb{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.fb button{min-height:50px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-weight:800;font-size:.95rem;box-shadow:0 3px 0 var(--line)}
.fb button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rate{display:flex;gap:4px;justify-content:center}
.rate button{font-size:2rem;width:48px;height:48px;filter:grayscale(1);opacity:.35}
.rate button.on{filter:none;opacity:1}
.next-card{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:18px;border:2px solid var(--line);background:var(--surface);text-align:left;box-shadow:0 4px 0 var(--line)}
.next-card .ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;font-size:1.8rem;background:var(--c);flex:none}
.next-card b{display:block}
.next-card span{font-size:.85rem;color:var(--ink-3);font-weight:700}

/* área Kids e Super Kids: tudo maior */
.area-kids .g-choice,.area-superkids .g-choice{min-height:84px;font-size:1.3rem}
.area-kids .g-choice.big,.area-superkids .g-choice.big{font-size:2.6rem}
.area-kids .g-prompt,.area-superkids .g-prompt{font-size:1.32rem}
.say-btn{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:6px 14px;border-radius:999px;background:var(--surface);border:2px solid var(--line);font-weight:800}

/* Telas: início, áreas, perfil, Cuca+, documentos */
.daily{border-width:2.5px}
.daily-list{display:grid;gap:8px}
.daily-item{display:flex;align-items:center;gap:12px;text-decoration:none;padding:8px;border-radius:14px;background:var(--surface-2)}
.daily-item .di-ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:1.6rem;background:var(--c);flex:none;box-shadow:0 3px 0 var(--ce)}
.daily-item b{display:block;line-height:1.2}
.daily-item span span{font-size:.85rem;color:var(--ink-3);font-weight:700}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.area-tile{min-height:150px;padding:12px}
.area-tile .art{font-size:2.3rem}
.area-tile .t{font-size:1rem}
.area-tile .s{font-size:.76rem;line-height:1.25}
@media (min-width:620px){.area-tile{min-height:170px}.area-tile .t{font-size:1.2rem}.area-tile .s{font-size:.88rem}}
.promo{display:block}
.promo .mascot{width:64px;flex:none}
.foot{margin-top:30px;text-align:center}
.foot a{color:var(--ink-3);padding:8px 4px;display:inline-block}

.kids-hero{display:flex;align-items:center;gap:14px;margin-top:6px}
.kids-hero .mascot{width:86px;flex:none}
.kids-grid .tile{min-height:150px}
.kids-grid .tile .art{font-size:3.2rem}
.kids-grid .tile .t{font-size:1.12rem}
.stickers{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.stickers span{aspect-ratio:1;display:grid;place-items:center;font-size:1.4rem;border-radius:10px;background:var(--surface-2);opacity:.45}
.stickers span.got{opacity:1;background:var(--kids-tint)}
.agenda h2{margin:0}
.agenda-list{list-style:none;display:grid;gap:8px;margin-top:10px}
.agenda-list li{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--surface-2);border:2px solid transparent}
.agenda-list li.now{border-color:var(--superkids);background:var(--superkids-tint)}
.agenda-list li.done{opacity:.6}
.ag-step{font-size:.78rem;font-weight:800;color:var(--ink-3);min-width:62px}
.ag-ic{font-size:1.6rem}
.pick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border-radius:14px;border:2px solid var(--line);background:var(--surface);font-weight:750;font-size:.92rem;text-align:center}
.pick span{font-size:2rem}
.pick.on{border-color:var(--superkids);background:var(--superkids-tint)}
.pick i{position:absolute;top:6px;right:8px;font-style:normal;font-weight:900;color:var(--superkids)}

.me-head{display:flex;gap:14px;align-items:center}
.avatar.big{width:76px;height:76px;font-size:2.6rem;flex:none}
.bar{height:12px;border-radius:6px;background:var(--surface-2);border:2px solid var(--line);overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;background:var(--pencil);border-radius:4px}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats>div{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px}
.stats b{display:block;font-size:1.3rem;font-family:"Fraunces",serif;font-variation-settings:"SOFT" 100;font-weight:800}
.stats span{font-size:.85rem;color:var(--ink-3);font-weight:700}
.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:620px){.badges-grid{grid-template-columns:repeat(4,1fr)}}
.bdg{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 6px;border-radius:14px;background:var(--surface);border:2px solid var(--line);opacity:.55}
.bdg.got{opacity:1;border-color:var(--pencil)}
.bdg span{font-size:1.8rem}
.bdg b{font-size:.82rem;line-height:1.2}
.bdg small{font-size:.7rem;color:var(--ink-3);line-height:1.2}

.profiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.prof{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 8px;border-radius:20px;background:var(--surface);border:2.5px solid var(--line);box-shadow:0 4px 0 var(--line)}
.prof.on{border-color:var(--pencil);box-shadow:0 4px 0 var(--pencil-edge)}
.prof.add .avatar{color:var(--ink-3)}
.avatars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px}
.av{aspect-ratio:1;font-size:1.5rem;border-radius:12px;border:2px solid var(--line);background:var(--surface)}
.av.on{border-color:var(--pencil);background:var(--kids-tint)}
fieldset{border:0}

.premium-hero{text-align:center;margin-top:8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.premium-hero .price{font-size:1.1rem;color:var(--ink-2);font-weight:750}
.premium-hero .price b{font-family:"Fraunces",serif;font-variation-settings:"SOFT" 100;font-weight:900;font-size:2.6rem;color:var(--ink)}
.benefits{list-style:none;display:grid;gap:10px;margin-top:18px}
.benefits li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:12px}
.benefits li>span{font-size:1.6rem;line-height:1.2}

.doc{margin-top:8px}
.doc h1{font-size:1.8rem}
.doc h2{font-size:1.2rem;margin-top:22px}
.doc p,.doc li{margin-top:8px;line-height:1.6;color:var(--ink-2)}
.doc ul{padding-left:20px}

/* ===== Desafio de QI ===== */
.qi-hero{display:flex;align-items:center;gap:14px;margin:8px 0 14px}
.qi-hero .mascot{width:64px;height:92px;flex:none}
.qi-hero h1{font-size:2rem}
.qi-hero .lead{margin-top:4px}
.qi-last{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;text-decoration:none;color:var(--ink);margin-bottom:14px}
.qi-last b{grid-row:span 2;font-family:"Fraunces",serif;font-size:2.4rem;font-weight:900}
.qi-last span:first-child{font-weight:800}
.qi-list{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:8px}
.qi-list li{display:flex;gap:12px;align-items:center;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.qi-list .ic{font-size:1.5rem;width:38px;text-align:center}
.qi-list b{display:block}
.qi-list span:not(.ic){color:var(--ink-2);font-size:.95rem}
.qi-age{display:grid;gap:6px;font-weight:800}
.qi-age small{font-weight:400;color:var(--ink-3)}
.qi-tip{color:var(--ink-2);font-size:.95rem;margin:14px 0 0}
.qi-disc{color:var(--ink-3);font-size:.86rem;margin:10px 0 0;line-height:1.45;border-left:3px solid var(--line);padding-left:10px}
body.qi-on{overflow:hidden}
body.qi-on .tabbar{display:none}
.qi-run{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;background:var(--paper)}
.qi-top{display:flex;align-items:center;gap:10px;padding:calc(8px + var(--safe-t)) 12px 6px}
.qi-prog{flex:1;min-width:0}
.qi-steps{display:flex;gap:5px}
.qi-steps i{flex:1;height:7px;border-radius:4px;background:var(--line)}
.qi-steps i.done{background:var(--ok)}
.qi-steps i.cur{background:var(--c);opacity:.6}
.qi-cap{font-weight:800;font-size:.95rem;color:var(--ink-2);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qi-timer{height:6px;margin:0 12px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.qi-timer i{display:block;height:100%;width:0;background:var(--c);border-radius:3px}
.qi-timer i.low{background:var(--pencil)}
.qi-stage{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 14px calc(16px + var(--safe-b))}
.qi-card{width:100%;max-width:480px;text-align:center;background:var(--surface);border:2px solid var(--line);border-radius:22px;padding:22px 18px;display:grid;gap:10px}
.qi-card .qi-ic{font-size:2.6rem}
.qi-card .lead{font-weight:700;color:var(--ink)}
.qi-item{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:12px}
.qi-ask{font-weight:800;text-align:center;margin:0}
.qi-q{font-size:1.25rem;text-align:center;line-height:1.4;margin:0 0 6px}
.qi-fig{width:100%;height:100%;color:var(--ink);display:block}
.qi-mtx{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(100%,300px,38dvh);background:var(--line);border:2px solid var(--line);border-radius:14px;overflow:hidden}
.qi-mtx .cell{aspect-ratio:1;background:var(--surface);padding:7px;display:grid;place-items:center}
.qi-mtx .cell.q{font-family:"Fraunces",serif;font-size:2rem;font-weight:900;color:var(--ink-3)}
.qi-opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}
.qi-opts.mtx{grid-template-columns:repeat(3,1fr);max-width:min(100%,340px,46dvh)}
.qi-opts.num{grid-template-columns:repeat(3,1fr)}
.qi-opts.words{grid-template-columns:1fr 1fr}
.qi-opts.space{grid-template-columns:repeat(3,1fr);max-width:360px}
.qi-opt{min-height:58px;border-radius:16px;background:var(--surface);border:2.5px solid var(--line);box-shadow:0 4px 0 var(--line);font-weight:800;font-size:1.2rem;color:var(--ink);padding:8px;display:grid;place-items:center}
.qi-opt:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.qi-opts.mtx .qi-opt,.qi-opts.space .qi-opt{aspect-ratio:1;padding:9px;min-height:0}
.qi-opts.num .qi-opt{font-size:1.5rem;font-variant-numeric:tabular-nums}
.qi-opt.ok{background:var(--ok-tint);border-color:var(--ok);box-shadow:0 4px 0 var(--ok)}
.qi-opt.bad{background:var(--err-tint);border-color:var(--err);box-shadow:0 4px 0 var(--err)}
.qi-opt[disabled]{pointer-events:none}
.qi-fb{font-weight:800;text-align:center;margin:0}
.qi-seq{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.qi-seq span{min-width:52px;padding:10px 8px;border-radius:14px;background:var(--surface);border:2px solid var(--line);font-weight:800;font-size:1.4rem;text-align:center;font-variant-numeric:tabular-nums}
.qi-seq .q{border-style:dashed;color:var(--ink-3)}
.qi-model{display:flex;flex-direction:column;align-items:center;gap:4px;width:150px;background:var(--surface);border:2.5px solid var(--c);border-radius:16px;padding:8px}
.qi-model span{font-weight:800;font-size:.85rem;color:var(--ink-2)}
.qi-model svg{width:110px;height:110px}
.qi-digit{width:150px;height:150px;border-radius:28px;background:var(--surface);border:3px solid var(--line);display:grid;place-items:center;font-size:5.2rem;font-weight:800;font-variant-numeric:tabular-nums;transition:border-color .15s}
.qi-digit.on{border-color:var(--c)}
.qi-typed{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:52px}
.qi-typed i{width:40px;height:50px;border-radius:12px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:1.5rem}
.qi-sym{display:flex;align-items:center;gap:14px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px}
.qi-sym .t{padding-right:14px;border-right:2px solid var(--line)}
.qi-sym .row{display:flex;gap:8px}
.qi-glyph{width:52px;height:52px;color:var(--ink)}
.qi-sym .t .qi-glyph{width:62px;height:62px}
.qi-yn{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:400px}
.qi-yn .qi-opt{min-height:68px}
@media (max-width:380px){.qi-glyph{width:44px;height:44px}.qi-sym .t .qi-glyph{width:52px;height:52px}.qi-sym{gap:10px;padding:10px}.qi-sym .t{padding-right:10px}}
.qi-res{display:grid;gap:14px;margin-top:10px}
.qi-score{text-align:center}
.qi-score .mascot{width:60px;height:86px}
.qi-res-l{font-weight:800;color:var(--ink-2);margin:6px 0 0}
.qi-iq{font-family:"Fraunces",serif;font-variation-settings:"SOFT" 100;font-size:5.4rem;font-weight:900;line-height:1;margin:2px 0 8px}
.qi-note{color:var(--ink-2);font-size:.92rem}
.qi-bars{display:grid;gap:12px;margin-top:12px}
.qi-bar{display:grid;grid-template-columns:86px 1fr 40px;align-items:center;gap:4px 10px}
.qi-bar .n{font-weight:800}
.qi-bar .tr{position:relative;height:14px;background:var(--surface-2);border-radius:4px}
.qi-bar .tr i{position:absolute;inset:0 auto 0 0;background:var(--c);border-radius:0 4px 4px 0}
.qi-bar .tr b{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--ink-3)}
.qi-bar .v{font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.qi-bar .d{grid-column:1/-1;font-size:.86rem;color:var(--ink-2)}
.qi-train{display:grid;gap:12px;margin-top:10px}
.qi-train b{display:block;margin-bottom:4px}
.qi-game{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 12px;border-radius:14px;border:2px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink);font-weight:700;margin-top:6px}
.qi-game span{font-size:1.4rem}