/* ==========================================================================
   DESAFIO BR — design system compartilhado por todos os jogos.
   Herda a paleta do Klose Design pra tudo parecer a mesma casa.
   ========================================================================== */
/* Paleta marinha, a mesma casa do currículo do Renan: água profunda no fundo,
   bioluminescência como destaque, coral no erro. As distâncias entre acerto,
   quase e erro foram preservadas, porque nelas o jogo depende de cor. */
:root{
  --bg:#04182a; --bg2:#082740; --bg3:#0d3250; --ink:#e6f6fa; --mut:#9dc0cf; --dim:#628ba0;
  --cy:#5ff0d0; --gold:#ffc76b; --hot:#ff8069; --warm:#ffa563; --near:#ffdd8a; --hit:#57d98a;
  --rox:#8fb8ff; --line:rgba(126,232,250,.14);
  --disp:'Anton',Impact,sans-serif; --body:'Sora',system-ui,sans-serif; --mono:'Space Mono',monospace;
  --max:560px;
}

/* a página inteira fica dentro d'água: mais escuro embaixo, luz vinda de cima */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(95,240,208,.10), transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 115%, rgba(0,0,0,.5), transparent 62%);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.55;
  -webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}
.hide{display:none !important}

/* --- topo --- */
header{border-bottom:1px solid var(--line);background:rgba(4,24,42,.9);backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:30}
.nav{display:flex;align-items:center;justify-content:space-between;height:54px;max-width:var(--max);
  margin:0 auto;padding:0 18px;gap:10px}
.voltar{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.06em;white-space:nowrap}
.voltar:hover{color:var(--cy)}
.icons{display:flex;gap:4px}
.icons button{background:none;border:none;color:var(--mut);font-size:16px;padding:7px 9px;cursor:pointer;
  border-radius:8px;line-height:1}
.icons button:hover{background:var(--bg3);color:var(--ink)}

/* --- capa: a arte-chave atrás do título ---
   A imagem sangra até as bordas e some num degradê até o fundo do site, então
   o título fica sobre a arte sem caixa nem moldura. É o que dá o ar de cinema. */
.capa{position:relative;margin:0 -18px;height:clamp(120px,26vw,190px);overflow:hidden}
.capa img{width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.62;
  filter:saturate(1.05) contrast(1.05)}
.capa::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,24,42,.62) 0%,rgba(4,24,42,.15) 35%,rgba(4,24,42,.85) 78%,var(--bg) 100%)}
.capa + .top{margin-top:clamp(-84px,-15vw,-56px);position:relative;z-index:2}
h1{text-shadow:0 6px 30px rgba(4,24,42,.9)}

/* --- cabeçalho do jogo --- */
.top{text-align:center;padding:24px 0 14px}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(38px,12vw,58px);line-height:1.12;
  letter-spacing:.02em;text-transform:uppercase;
  background:linear-gradient(#ffe0a8,#ffc76b 55%,#b87a2e);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--cy);
  text-transform:uppercase;margin-top:8px}
.edicao{font-family:var(--mono);font-size:11px;color:var(--dim);margin-top:6px}
.edicao b{color:var(--gold);font-weight:700}

/* --- seletor de desafios --- */
.seletor{margin:4px 0 18px}
.seletor .cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.seletor .cab h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase;font-weight:400}
.seletor .cab span{font-family:var(--mono);font-size:11px;color:var(--mut)}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px}
.grade button{aspect-ratio:1;border:1px solid var(--line);background:var(--bg2);color:var(--mut);
  border-radius:9px;font-family:var(--mono);font-size:12px;cursor:pointer;transition:.15s;position:relative}
.grade button:hover{border-color:var(--cy);color:var(--cy)}
.grade button.ok{background:rgba(87,217,138,.14);border-color:rgba(87,217,138,.5);color:var(--hit)}
.grade button.x{background:rgba(255,128,105,.1);border-color:rgba(255,128,105,.4);color:var(--hot)}
.grade button.atual{outline:2px solid var(--cy);outline-offset:1px;color:var(--ink)}
.grade button.hoje::after{content:'';position:absolute;top:3px;right:3px;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}

/* --- cartão de enunciado --- */
.card{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px 20px;margin-bottom:14px}
.card.destaque{border-left:3px solid var(--gold)}
.card .rot{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase;margin-bottom:10px}
.card .enun{font-size:clamp(17px,4.6vw,21px);font-weight:600;line-height:1.42}

/* Depois que a rodada fecha, os palpites errados viram histórico neutro.
   Deixá-los vermelhos com "não é" contradizia o "ACERTOU!" logo abaixo. */
.passados{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  font-size:13px;color:var(--dim);font-family:var(--mono);letter-spacing:.02em;line-height:1.7}
.passados b{color:var(--mut);font-weight:400}

/* --- interruptor de dicas --- */
.sw{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;margin-bottom:12px;cursor:pointer;transition:.18s;user-select:none}
.sw:hover{border-color:var(--cy)}
.sw:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.sw .kn{width:36px;height:20px;border-radius:20px;background:var(--bg3);border:1px solid var(--line);
  position:relative;flex-shrink:0;transition:.18s}
.sw .kn::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--dim);transition:.18s}
.sw.on .kn{background:rgba(95,240,208,.25);border-color:rgba(95,240,208,.6)}
.sw.on .kn::after{left:18px;background:var(--cy)}
.sw .lb{font-size:13.5px;color:var(--mut);flex:1}
.sw .vl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:6px;padding:3px 7px;white-space:nowrap}
.sw.on .vl{color:var(--cy);border-color:rgba(95,240,208,.4)}
.sw:not(.on) .vl{color:var(--hot);border-color:rgba(255,128,105,.4)}

/* --- dicas --- */
.dicas{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dica{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  font-size:14px;color:var(--mut);display:flex;gap:10px;align-items:flex-start;animation:pop .28s ease}
.dica b{color:var(--cy);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;flex-shrink:0;padding-top:2px}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake .32s ease}

/* --- entrada --- */
input[type=text],input[type=number]{width:100%;background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;color:var(--ink);font-family:inherit;font-size:16px;padding:15px 16px;outline:none;transition:.18s}
input:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(95,240,208,.13)}
input::placeholder{color:var(--dim)}
.sugestoes{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.sug{background:var(--bg3);border:1px solid var(--line);border-radius:9px;color:var(--ink);
  font-size:13.5px;padding:9px 13px;cursor:pointer;transition:.15s}
.sug:hover{border-color:var(--cy);color:var(--cy)}
.restantes{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;
  margin-top:12px;letter-spacing:.06em}

/* --- botões --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  padding:15px 18px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.2s}
.btn.p{background:var(--cy);color:#04283a}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 12px 32px -12px rgba(95,240,208,.6)}
.btn.g{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.g:hover{border-color:var(--cy);color:var(--cy)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.acoes{display:flex;gap:10px;margin-top:18px}
.acoes .btn{flex:1}

/* --- fim de jogo --- */
.fim{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px 20px;
  margin-bottom:16px;text-align:center;animation:pop .3s ease}
.fim .res{font-family:var(--disp);font-size:29px;letter-spacing:.02em;text-transform:uppercase;line-height:1.1}
.fim .res.ok{color:var(--hit)} .fim .res.no{color:var(--hot)}
.fim .resp{font-size:18px;font-weight:600;margin-top:9px}
.fim .resp span{color:var(--gold)}
.fim .obs{color:var(--mut);font-size:14px;margin-top:12px;text-align:left}
.glos{text-align:left;margin-top:18px;border-top:1px solid var(--line);padding-top:15px}
.glos h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);
  text-transform:uppercase;margin-bottom:10px;font-weight:400}
.glos div{font-size:14px;color:var(--mut);padding:5px 0}
.glos b{color:var(--ink)}
.relogio{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:14px;letter-spacing:.05em}
.relogio b{color:var(--ink);font-weight:700}

/* --- modais --- */
.mask{position:fixed;inset:0;background:rgba(4,5,8,.78);backdrop-filter:blur(6px);z-index:60;
  display:none;align-items:center;justify-content:center;padding:20px}
.mask.on{display:flex}
.modal{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:25px 23px;
  max-width:460px;width:100%;max-height:86vh;overflow-y:auto;animation:pop .25s ease}
.modal h3{font-family:var(--disp);font-weight:400;font-size:24px;letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:13px}
.modal p{color:var(--mut);font-size:14.5px;margin-bottom:11px}
.modal .ex{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:13px 15px;
  margin:13px 0;font-size:14px}
.modal .ex .l{display:flex;justify-content:space-between;gap:10px;padding:4px 0;color:var(--mut)}
.modal .ex .l b{color:var(--ink)}
.fechar{width:100%;margin-top:8px;background:var(--bg3);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:13px;font-size:14.5px;font-weight:600;cursor:pointer}
.fechar:hover{border-color:var(--cy);color:var(--cy)}
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:15px 0 6px;text-align:center}
.nums div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 5px}
.nums b{display:block;font-family:var(--disp);font-size:25px;line-height:1;color:var(--gold)}
.nums small{font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}

footer{text-align:center;padding:32px 0 40px;color:var(--dim);font-family:var(--mono);
  font-size:11px;letter-spacing:.05em;line-height:1.9}
footer a{color:var(--mut);border-bottom:1px solid var(--line)}
footer a:hover{color:var(--cy)}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:var(--bg);padding:12px 20px;border-radius:10px;font-size:14px;font-weight:600;opacity:0;
  pointer-events:none;transition:.25s;z-index:80;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}