/* Genio — tema branco e minimalista (o tema da app: index.html e branco.html).
   Branco como cor primária: fundo branco, teclas de porcelana com base cinzenta clara, caneta de ~2 px.
   O escolhido destaca-se pela forma (mais alto, contorno grosso, respira), não pela cor.
   Cor só no certo/errado (some) e, na variante data-go="acento", num único acento: o botão principal. */
:root {
  --cream: #fcfcfc;
  --milk: #ffffff; --milk-2: #f5f5f4; --milk-base: #dededc;
  --ink: #1a1a1a; --ink-2: #3d3d3d;          /* texto sempre escuro: secundário ainda passa 7:1 no branco */
  --gold: #1c1c1c;
  --ax-x: #f0a8a8; --ax-y: #a6d9b8; --ax-z: #a9c4ee;
  --d: 7px;
}
body { background: var(--cream); font-weight: 500; }

/* ---------- tecla: porcelana, caneta fina, sombra leve só por baixo ---------- */
.k { border-width: 1.5px 2px 2.5px 2px; outline: 0; font-weight: 600;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .035), 0 var(--z) 0 0 var(--base), .5px calc(var(--z) + .5px) 0 2px var(--ink); }
.k::before { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.k::after { opacity: 0; }                 /* sem pontinho de luz: só o brilho */
.k > .sh { inset: 4px 0 -2px 6px; translate: calc(var(--z) * .3 + 1px) calc(var(--z) * .9 + 3px); background: var(--tx-soft); opacity: .45; }
.k.is-locked, .k:disabled { --text: var(--ink); --base: #e4e4e2; border-color: #6e6e6e; border-style: dashed; background: var(--milk-2); }   /* fechada: texto escuro com cadeado, não esbatido */
.k.is-locked > .sh { opacity: .2; background: var(--tx-soft); }
.k.is-locked::before, .k.is-locked::after, .k.is-locked > :not(.sh) { opacity: 1; }

/* escolhida / actual: branca, mais alta, caneta grossa, a respirar */
.k.is-on, .k--go { --top: #fff; --bot: var(--milk-2); --base: var(--milk-base); --text: var(--ink); --z: var(--d); border-width: 3px 3.5px 4.5px 3.5px; text-shadow: none; }
.k.is-on::before { opacity: 1; }
.k--go { --d: 11px; animation: respira 2.4s ease-in-out infinite; }
.k--go:active, .k--go.is-down { animation: none; }
@keyframes respira { 50% { --z: calc(var(--d) + 4px); } }
/* variante "acento": o botão principal (e só ele) leva uma cor */
[data-go='acento'] .k--go { --top: #2a6fd0; --bot: #1d5bb8; --base: #123f85; --text: #fff; text-shadow: none; border-width: 2px 2.5px 3.5px 2.5px; }
[data-go='acento'] .node.k--go { --top: #fff; --bot: var(--milk-2); --base: var(--milk-base); --text: var(--ink); text-shadow: none; border-width: 3px 3.5px 4.5px 3.5px; }

/* certo/errado: a única cor que aparece sempre (some) */
.k.is-right, .k.is-wrong { border-width: 2px 2.5px 3.5px 2.5px; }
.k .badge { border-width: 2px; box-shadow: 0 2px 0 var(--ink); }
.k.is-dim { --text: var(--ink); --z: 2px; }   /* as outras respostas descem, mas o texto fica legível */
.k.is-dim > * { opacity: 1; }
/* certo/errado em tom pastel com texto escuro: passa 7:1 (texto branco sobre verde/vermelho não passava) */
.k.is-right { --top: #b4f2ca; --bot: #6ddb98; --base: #2f9a5a; --text: var(--ink); text-shadow: none; }
.k.is-wrong { --top: #ffc4bf; --bot: #ff958e; --base: #c94a43; --text: var(--ink); text-shadow: none; }

/* ---------- peças ---------- */
.card { border-width: 1.5px 2px 2.5px 2px; box-shadow: 0 5px 0 var(--milk-base), .5px 5.5px 0 2px var(--ink); }
.card::after { inset: 8px 0 0 10px; translate: 4px 10px; background: var(--tx-soft); opacity: .4; }
.pill { border-width: 1.5px 2px 2.5px 2px; font-weight: 600; font-size: 19px; padding: 7px 12px; }
.pill b { color: var(--ink); -webkit-text-stroke: 0; }
.stars { color: var(--ink); -webkit-text-stroke: 0; }
.stars i { color: #8a8a88; }
.dots i { border-width: 2px; }
.dots i.done { background: var(--ink); }
.dots i.now { box-shadow: 0 0 0 3px var(--cream), 0 0 0 4.5px var(--ink); }
.tag--warn { background: #fff; border-width: 2px; }
.field > div { border-width: 1.5px 2px 2.5px 2px; outline: 0; }
.field:focus-within > div { outline: 2.5px solid var(--ink); }
.tg { border-width: 2px; background: var(--milk-2); }
.tg::before { background: var(--ink); }
.tg .knob { border-width: 2px; box-shadow: 0 2px 0 var(--ink); }
.list { border-width: 1.5px 2px 2.5px 2px; box-shadow: 0 5px 0 var(--milk-base), .5px 5.5px 0 2px var(--ink); }
.list li.is-on { background: none; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.list li.is-on small { color: var(--ink-2); }
.list li.is-locked { color: var(--ink); }
.axes { width: 44px; height: 44px; opacity: .9; }
.emo { filter: saturate(.7); }

/* ---------- mapa: só o essencial ---------- */
.is-map .top { padding-top: 14px; }
.chip { min-height: 46px; min-width: 0; padding: 2px 14px; font-size: 18px; --d: 5px; --r: 16px; }
.chip .emo { font-size: 20px; }
.chip .caret { font-size: 16px; color: var(--ink); margin-left: -2px; }
.top .sp { flex: 1; }
.chips { display: flex; gap: 8px; margin-top: 6px; }
.chips .k { flex: 1; min-width: 0; }
.chips .k:not(.is-on) .nm { display: none; }
.chips .k.is-on { flex: 2.4; }
.wmenu { position: absolute; z-index: 20; top: 70px; left: 64px; width: 230px; }
.wmenu li { font-size: 20px; }
.path .ring { display: none; }
.path .node { font-weight: 600; }
.path .node.k--go { font-weight: 700; }
.path .st { font-size: 18px; }
.trophy.off { opacity: .2; }
.go { min-height: 66px; font-size: 26px; }

/* ---------- exercício ---------- */
.qtext, .word { font-weight: 600; }
.qcard svg *:not(text), .opt svg[width] *:not(text) { stroke-width: 2; }
.qcard svg.shape *, .opt svg.shape * { stroke-width: 2.5; }
.opt { font-weight: 600; color: var(--ink); }

/* ---------- resultado ---------- */
.bigstars { -webkit-text-stroke: 0; font-size: 70px; }
.bigstars span { color: var(--ink); }
.bigstars span.off { color: #e2e2e0; }
.confetti { -webkit-text-stroke: 0; color: var(--ink) !important; font-size: 22px; }

/* ---------- pais ---------- */
.modal { background: rgba(28, 28, 28, .3); }
.modal .box { background: var(--cream); }
.box .ans { border-width: 1.5px 2px 2.5px 2px; }
.pp h2 { font-weight: 700; font-size: 18px; color: var(--ink); }
.pp th, .pp td { border-bottom: 1px solid #ececea; }
.pp .days b { background: var(--milk-2); border-width: 1.5px 1.5px 0; }
.pp .days div.today b { background: var(--ink); }
.k--warn { --top: #fff; --bot: var(--milk-2); --base: var(--milk-base); --text: var(--ink); }
#reset { --text: #a3241e; }   /* 7:1 no branco */
#app { position: relative; }

/* ---------- textos visíveis: escuros e grandes (criança de 6 anos) ---------- */
.caption { font: 700 24px/1.25 var(--font); color: var(--ink); }
.qtext, .word { color: var(--ink); }
.storyq { font-weight: 700; }
.opts.long .opt { font-size: 30px; }
.opt.k-txt { font-size: 34px; }
.lbl, .muted, .pp .muted, .pp th, .pp .days div, .wname small, .result .sub, .field > span, .field .note, .list li small, .pp td .muted, .bar { font-size: 16px; color: var(--ink-2); }
.pp th { font-weight: 700; }
.pp table { font-size: 17px; }
.field input::placeholder { color: #5e5e5e; }
.word u, .sentence u { background: none; border-bottom-width: 5px; }
.grid i, .money .note, .groups .objs, .seq span { background: var(--milk-2) !important; }
.seq span, .groups .objs { color: var(--ink); }
.tag { font-size: 16px; color: var(--ink); }
.chip { font-weight: 700; }
.pill { font-weight: 700; }

/* ---------- computador: barra lateral com mundos e disciplinas ---------- */
.wside { display: none; }
@media (min-width: 1024px) {
  #wsel { display: none; }
  .is-map .chips { flex-direction: column; margin-top: 18px; }
  .is-map .chips .k { flex: none; justify-content: flex-start; gap: 10px; padding: 0 16px; min-height: 54px; }
  .is-map .chips .k .nm { display: inline; }
  .is-map .wside { display: block; margin-top: 18px; }
  .wside li { font-size: 19px; min-height: 50px; }
}
.k:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
@media (min-width: 1024px) {
  /* na barra lateral, a disciplina escolhida leva um traço à esquerda (forma, não cor) */
  .is-map .chips .k.is-on::after { content: ''; opacity: 1; position: absolute; left: -14px; top: 50%; width: 6px; height: 26px; margin-top: -13px; border-radius: 3px; background: var(--ink); transform: none; box-shadow: none; }
  .wside li.is-on { box-shadow: inset 0 0 0 2.5px var(--ink), -14px 0 0 -8px var(--ink); }
}
@media (min-width: 768px) { .chips .k .nm, .chips .k:not(.is-on) .nm { display: inline; } .chips .k.is-on { flex: 1; } .chips .k { gap: 8px; } }