/* Genio — rebuçado com tempero de banda desenhada.
   Peças redondas e fofas com brilho e base 3D gorda (ar de doce), contorno a caneta preta de espessura variável,
   sombra no chão feita a tracejado de lápis (texturas.css), papel creme com grão.
   Pouca cor: neutros quentes; cor só no que é crítico (Jogar, pais/avisos) e na guia certo/errado, que some. */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/fredoka.woff2) format('woff2'); }

/* profundidade animável da tecla (Z) */
@property --z { syntax: '<length>'; inherits: true; initial-value: 9px; }
/* saltinho e abanão do feedback (propriedades, não transform: assim a sombra continua por trás) */
@property --hop { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --shx { syntax: '<length>'; inherits: false; initial-value: 0px; }

:root {
  /* neutros quentes */
  --cream: #f7f0e3;            /* fundo (papel) */
  --milk: #fffaf1; --milk-2: #f4ead9; --milk-base: #d8c6a8;   /* tecla normal: leite / bolacha */
  --ink: #1d1916;              /* caneta */
  --ink-2: #7d7366;            /* texto secundário */
  --graphite: rgba(60, 50, 40, .35);
  --choc: #4a372b; --choc-2: #3a2a20; --choc-base: #241811;    /* escolhido: chocolate */

  /* doces (só no que é crítico) */
  --go: #3d8bf2; --go-top: #78b3ff; --go-base: #1f5cc0;          /* Jogar / Continuar */
  --warn: #f5ad32; --warn-top: #ffd67a; --warn-base: #c07a10;    /* pais, avisos */
  --right: #2fbf68; --right-top: #79e6a2; --right-base: #1b8646; /* certo (some) */
  --wrong: #ef4f4f; --wrong-top: #ff8d86; --wrong-base: #b02a2a; /* errado (some) */
  --gold: #f4b740;
  --ax-x: #ef4f4f; --ax-y: #2fbf68; --ax-z: #3d8bf2;

  --r: 26px; --r-sm: 16px; --pill: 999px;
  --d: 9px;                    /* altura da base */
  --font: 'Fredoka', 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --spring: cubic-bezier(.3, 1.8, .5, 1);
  --press: 60ms; --release: 420ms;
}

/* ---------- tecla-rebuçado ----------
   Face com brilho; base gorda (box-shadow) com contorno a caneta; .sh = sombra a tracejado no chão (posta pelo kit.js).
   Premir: --z encolhe — a face desce, a base e a sombra encolhem; ao soltar sobe com mola.
   A face mexe-se com `top` (não transform) para a sombra poder ficar por trás dela;
   por isso o contentor com fundo próprio precisa de `isolation: isolate`. */
.k {
  --z: var(--d); --top: var(--milk); --bot: var(--milk-2); --base: var(--milk-base); --text: var(--ink);
  position: relative; top: calc(var(--d) - var(--z) + var(--hop)); left: var(--shx);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 72px; min-width: 72px; padding: 6px 22px; margin-bottom: calc(var(--d) + 4px);
  border: solid var(--ink); border-width: 2.5px 3px 4px 3px;          /* caneta: mais grossa em baixo */
  border-radius: var(--r); background: linear-gradient(180deg, var(--top), var(--bot));
  color: var(--text); font: 600 28px/1.1 var(--font); letter-spacing: .2px; white-space: nowrap;
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, .06),                 /* volume em baixo */
    0 var(--z) 0 0 var(--base),                         /* base 3D */
    .5px calc(var(--z) + 1px) 0 3px var(--ink);        /* caneta à volta da base */
  outline: 1px solid var(--graphite); outline-offset: 3px;   /* traço de lápis por fora */
  transition: --z var(--release) var(--spring), color .12s;
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* brilho de rebuçado */
.k::before {
  content: ''; position: absolute; left: 14%; right: 14%; top: 5px; height: 34%; border-radius: var(--pill); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
}
/* pontinho de luz */
.k::after { content: ''; position: absolute; top: 9px; left: 10%; width: 9px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .85); transform: rotate(-20deg); pointer-events: none; }
.k > * { pointer-events: none; position: relative; }
.k > .sh {                         /* sombra no chão a tracejado cruzado: afasta-se com a altura e encolhe ao premir */
  position: absolute; z-index: -1; inset: -3px -3px -4px -3px; border-radius: inherit;
  translate: calc(var(--z) * .5 + 3px) calc(var(--z) * 1.5 + 5px);
  background: var(--tx-cross); opacity: .75;
}
.k:active, .k.is-down { --z: 2px; transition-duration: var(--press), .12s; transition-timing-function: ease-out; }

/* cor crítica, em tom de bala */
.k--go { --top: var(--go-top); --bot: var(--go); --base: var(--go-base); --text: #fff; }
.k--warn { --top: var(--warn-top); --bot: var(--warn); --base: var(--warn-base); --text: var(--ink); }
.k--go, .k.is-right, .k.is-wrong { text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }

/* formas */
.k--round { border-radius: 50%; padding: 0; width: 84px; height: 84px; }
.k--small { min-height: 52px; min-width: 52px; padding: 2px 16px; font-size: 21px; --d: 6px; --r: 18px; }
.k--small.k--round { width: 52px; height: 52px; }
.k--tile { width: 100%; min-height: 104px; font-size: 52px; }
.k--wide { width: 100%; }
.k--icon { width: 56px; min-width: 56px; min-height: 56px; padding: 0; --d: 6px; --r: 18px; }
.k svg:not([width]) { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* fechada: tracejado de lápis claro e caneta tracejada; desce 2 px e trava */
.k.is-locked, .k:disabled { --text: #a3998b; --base: #e3d8c6; border-style: dashed; background: var(--tx-faint), var(--milk-2); cursor: default; }
.k.is-locked::before, .k.is-locked::after { opacity: .4; }
.k.is-locked > .sh { background: var(--tx-faint); }
.k.is-locked:active, .k.is-locked.is-down { --z: calc(var(--d) - 2px); }

/* escolhida (tab, caixa, ferramenta): chocolate, fica em baixo */
.k.is-on { --z: 3px; --top: var(--choc); --bot: var(--choc-2); --base: var(--choc-base); --text: #fff6ea; }
.k.is-on::before { opacity: .35; }

/* guia de feedback: some ao fim de ~0,9 s */
.k.is-right { --top: var(--right-top); --bot: var(--right); --base: var(--right-base); --text: #fff; animation: k-hop .6s var(--spring); }
.k.is-wrong { --top: var(--wrong-top); --bot: var(--wrong); --base: var(--wrong-base); --text: #fff; animation: k-shake .45s ease; }
.k .badge { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px; display: none; align-items: center; justify-content: center;
  background: var(--milk); border: 3px solid var(--ink); border-radius: 50%; font: 700 19px/1 var(--font); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.k.is-right .badge, .k.is-wrong .badge { display: flex; animation: badge-in .3s var(--spring); }
.k.is-right .badge::before { content: '✓'; } .k.is-wrong .badge::before { content: '✕'; }
.k.is-dim { --text: #c4b8a6; }                 /* apagada sem transparência: o tracejado não passa pela face */
.k.is-dim > * { opacity: .55; } .k.is-dim > .sh { opacity: .3; }
@keyframes k-hop { 35% { --hop: -12px; } 70% { --hop: 2px; } }
@keyframes k-shake { 15%, 55% { --shx: -8px; } 35%, 75% { --shx: 8px; } }
@keyframes badge-in { from { scale: 0; } }

/* ---------- tabs: fila de rebuçados, o escolhido é chocolate ---------- */
.seg { display: flex; gap: 8px; }
.seg .k { flex: 1; min-width: 0; padding: 4px 2px; flex-direction: column; gap: 0; font-size: 16px; min-height: 70px; --d: 7px; --r: 22px; }
.seg .k .emo { font-size: 28px; line-height: 1.15; }

/* imagens do conteúdo: cor mais suave, para não competir com o resto */
.emo { filter: saturate(.8); }

/* ---------- interruptor: calha de caneta, manípulo = rebuçado redondo ---------- */
.tg { position: relative; width: 100px; height: 52px; padding: 0; border: 3px solid var(--ink); border-radius: var(--pill); cursor: pointer; flex: none;
  background: var(--tx-hatch), var(--milk-2); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08); -webkit-tap-highlight-color: transparent; }
.tg::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--choc); opacity: 0; transition: opacity .25s; }
.tg .knob { position: absolute; top: 2px; left: 3px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); z-index: 1;
  background: radial-gradient(circle at 35% 28%, #fff 0 18%, var(--milk) 30%, var(--milk-2)); box-shadow: 0 3px 0 var(--ink);
  transition: left .45s cubic-bezier(.45, 1.6, .5, 1), transform .3s var(--spring); }
.tg:active .knob, .tg.is-down .knob { transform: scale(1.1, .88); transition-duration: .45s, 60ms; }
.tg[aria-checked='true']::before { opacity: 1; }
.tg[aria-checked='true'] .knob { left: calc(100% - 46px); }

/* ---------- caixa e rádio: rebuçados pequenos ---------- */
.ck { width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0; --d: 5px; --r: 14px; font-size: 26px; color: transparent; }
.ck::after { display: none; }
.ck.is-on { color: #fff6ea; }
.ck.k--radio { border-radius: 50%; }
.ck.k--radio > i.dot { width: 16px; height: 16px; border-radius: 50%; background: #fff6ea; scale: 0; transition: scale .3s var(--spring); }
.ck.k--radio.is-on > i.dot { scale: 1; }

/* ---------- campo: almofada de leite com caneta ---------- */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field > span { font: 600 15px/1 var(--font); color: var(--ink-2); padding-left: 6px; }
.field > div { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 16px; border: solid var(--ink); border-width: 2.5px 3px 3.5px 3px; border-radius: var(--r-sm);
  background: var(--milk); box-shadow: inset 0 4px 0 rgba(0, 0, 0, .05); outline: 1px solid var(--graphite); outline-offset: 3px; }
.field input { user-select: text; -webkit-user-select: text; flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 24px var(--font); color: var(--ink); }
.field input::placeholder { color: #bfb3a2; font-weight: 500; }
.field:focus-within > div, .field.is-focus > div { outline: 3px solid var(--ink); outline-offset: 3px; }
.field.is-warn > div { border-color: var(--warn-base); background: #fff4dc; outline: 3px solid var(--warn); outline-offset: 2px; }
.field .note { font: 600 15px var(--font); color: var(--warn-base); padding-left: 6px; }

/* ---------- lista ---------- */
.list { list-style: none; margin: 0 0 14px; padding: 6px; border: solid var(--ink); border-width: 2.5px 3px 4px 3px; border-radius: var(--r); background: var(--milk);
  box-shadow: 0 6px 0 var(--milk-base), .5px 7px 0 3px var(--ink); }
.list li { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 14px; border-radius: var(--r-sm); font: 600 22px var(--font); cursor: pointer; transition: translate var(--release) var(--spring); }
.list li small { margin-left: auto; font: 500 15px var(--font); color: var(--ink-2); }
.list li:active, .list li.is-down { translate: 0 3px; transition-duration: var(--press); }
.list li.is-on { background: linear-gradient(180deg, var(--choc), var(--choc-2)); color: #fff6ea; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15); }
.list li.is-on small { color: #d9c7b2; }

/* ---------- barra de ferramentas vertical ---------- */
.tools { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px 4px; border: solid var(--ink); border-width: 2.5px 3px 4px 3px; border-radius: var(--r);
  background: var(--milk); isolation: isolate; }

.lbl { font: 600 14px/1.2 var(--font); color: var(--ink-2); }

/* indicador de eixos: pequeno e redondo */
.axes { width: 54px; height: 54px; flex: none; display: block; overflow: visible; }
.axes text { font: 700 13px var(--font); }

/* ---------- peças partilhadas pelos ecrãs ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background: var(--tx-paper), var(--cream); color: var(--ink); font: 600 17px/1.3 var(--font); }
button { font-family: var(--font); }

/* cartão de leite com caneta e sombra a tracejado (o contentor não pode ter isolation, senão a sombra passa à frente) */
.card { position: relative; padding: 14px; border: solid var(--ink); border-width: 2.5px 3px 4px 3px; border-radius: var(--r); background: var(--milk);
  box-shadow: 0 6px 0 var(--milk-base), .5px 7px 0 3px var(--ink); margin: 0 6px 18px 0; }
.card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; translate: 10px 20px; background: var(--tx-cross); opacity: .6; pointer-events: none; }

/* pastilha (estrelas) */
.pill { font: 700 22px/1 var(--font); padding: 8px 14px; border: solid var(--ink); border-width: 2.5px 3px 4px 3px; border-radius: var(--pill); background: var(--milk); white-space: nowrap; }
.pill b { color: var(--gold); -webkit-text-stroke: 1.2px var(--ink); }

/* estrelas: douradas com caneta; as que faltam ficam em creme */
.stars { color: var(--gold); letter-spacing: -1px; -webkit-text-stroke: 1px var(--ink); white-space: nowrap; }
.stars i { color: #e9dfcf; font-style: normal; }

/* barra de progresso: calha a tracejado, enche a dourado */
.bar { display: flex; align-items: center; gap: 10px; font: 600 14px var(--font); color: var(--ink-2); }
.bar .track { flex: 1; height: 16px; border: 2.5px solid var(--ink); border-radius: var(--pill); background: var(--tx-hatch), var(--milk-2); overflow: hidden; }
.bar .fill { height: 100%; background: linear-gradient(180deg, #ffe08a, var(--gold)); border-right: 2.5px solid var(--ink); border-radius: var(--pill); transition: width .6s; }
.bar .fill[style*="width:0%"] { border-right: 0; }

/* pontos de progresso do exercício: chocolate o feito, aro no actual */
.dots { display: flex; gap: 7px; justify-content: center; }
.dots i { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--milk); transition: background .3s; }
.dots i.done { background: radial-gradient(circle at 35% 30%, #fff 0 15%, var(--choc) 35%); }
.dots i.now { scale: 1.3; box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--ink); }

/* aviso (porta dos pais): faixa de caramelo */
.tag { display: inline-block; padding: 5px 14px; border: 2.5px solid var(--ink); border-radius: var(--pill); font: 700 16px/1 var(--font); }
.tag--warn { background: linear-gradient(180deg, var(--warn-top), var(--warn)); }

/* abanão de "ainda não": nas teclas mexe --shx; nas outras peças, translate */
.k.nudge { animation: k-shake .45s ease; }
.nudge:not(.k) { animation: shake .45s ease; }
@keyframes shake { 15%, 55% { translate: -8px 0; } 35%, 75% { translate: 8px 0; } }