/* Plano Quest — base.css (extraído do original, ordem preservada) */
/* Layout: um app de tela cheia. Mapa de mundos (cartões com fases em fileira), jogo (HUD + palco + botões de toque), janelas sobrepostas para perguntas, prêmios e responsáveis. */
:root{
  --bg:#0C1424;--panel:#16233C;--panel2:#1E3050;--line:#2C446C;--text:#EAF1FB;--muted:#9DB2D0;
  --gold:#FFC83D;--gold-d:#B98500;--cyan:#5CC8FF;--good:#3DDC97;--bad:#FF6B6B;--violet:#A394FF;--ink:#0C1424;
  --f-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-pixel:'Silkscreen','Courier New',monospace;
  color-scheme:dark;
}
/* altura: 100dvh acompanha a barra de endereço do celular (sem "pular"),
   svh fica como reserva em navegadores antigos */
html{height:100%}
body{
  min-height:100vh;min-height:100svh;min-height:100dvh;
  height:100vh;height:100svh;height:100dvh;
  background:var(--bg);color:var(--text);font:17px/1.5 var(--f-body);margin:0;box-sizing:border-box;
  padding-block:8px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
#app{height:100%}
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
.screen{height:100%;overflow:auto;display:flex;flex-direction:column;gap:14px;padding-bottom:16px}
/* troca de tela suave (o palco do jogo fica de fora para não perder nitidez) */
.screen:not(#game){animation:pqScreenIn .18s ease-out both}
@keyframes pqScreenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen:not(#game){animation:none}}
.ic{width:1.1em;height:1.1em;fill:currentColor;vertical-align:-.17em;flex:none}
.st{width:18px;height:18px;fill:#34476b;flex:none}.st.on{fill:var(--gold)}
.hrt{width:24px;height:24px;fill:#3a4766}.hrt.on{fill:var(--bad)}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.15;margin:0 .15em;font-size:.92em}
.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 .25em}
.frac>span:last-child{padding:0 .25em}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border:2px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--text);font-weight:700;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .05s;position:relative;text-decoration:none}
.btn:hover{background:#27406a}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn.primary{background:var(--gold);border-color:#FFE07A;color:var(--ink);box-shadow:0 4px 0 var(--gold-d)}
.btn.primary:hover{background:#FFD45F}
.btn.primary:active{box-shadow:0 1px 0 var(--gold-d)}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--line)}
.btn.ghost:hover{background:var(--panel)}
.btn.sm{min-height:36px;padding:4px 12px;font-size:.92rem}
.btn.warn{background:#5a2330;border-color:var(--bad)}
.btn:disabled{opacity:.5;cursor:default}
.badge{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--bad);color:#fff;font-size:.8rem;display:grid;place-items:center;padding:0 5px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:2px solid var(--line);border-radius:999px;background:var(--panel);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.chip .ic{color:var(--gold)}
.chip .st{width:16px;height:16px}
.chip .st.on,.chip .st{fill:var(--gold)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.row.col{flex-direction:column}
.sp{flex:1}