/* ================================================================
   BHalf Challenge — estilo compartilhado (player + host)
   ================================================================ */
:root{
  --bg:#05100F; --stage:#0A1817; --panel:#0F2220; --panel2:#0C1B19; --line:#1E332F;
  --txt:#EAF3EF; --mut:#7C948D; --petrol:#005159; --petrol-lite:#12908C;
  --lime:#E4E231; --green:#6F9A3D; --coral:#FF6B6B; --ok:#8FD05A;
  --o1:#0C7F7A; --o2:#E4E231; --o3:#6F9A3D; --o4:#00494F;
  --font:"Neue Haas Grotesk Display",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  background:radial-gradient(1100px 640px at 12% -8%, rgba(18,144,140,.12), transparent 60%),
    radial-gradient(820px 520px at 100% 0%, rgba(228,226,49,.06), transparent 55%), var(--bg);
  color:var(--txt);font-family:var(--font);-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
a{color:inherit}

/* top bar */
.top{display:flex;align-items:center;gap:14px;padding:16px clamp(16px,4vw,40px)}
.back{font-size:13px;font-weight:600;color:var(--mut);border:1px solid var(--line);background:var(--panel);
  padding:7px 13px;border-radius:999px;text-decoration:none;white-space:nowrap}
.back:hover{border-color:var(--petrol-lite);color:var(--txt)}
.brand{margin-left:auto;display:flex;align-items:center;gap:4px;font-weight:800;letter-spacing:-.02em;font-size:17px}
.brand .blogo{height:17px;width:auto;display:block}
.brand .p{color:var(--lime);font-size:21px;line-height:1;font-weight:800}
.brand .mod{margin-left:10px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--petrol-lite);border:1px solid color-mix(in srgb,var(--petrol-lite) 40%,transparent);padding:3px 9px;border-radius:999px;position:relative;top:-2px}

main{flex:1;display:flex;align-items:center;justify-content:center;padding:12px clamp(16px,4vw,40px) 48px;width:100%}
.stage{width:100%;max-width:680px}
.screen{display:none;animation:fade .35s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* textos */
.kick{color:var(--petrol-lite);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
h1{font-size:clamp(28px,6vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.03;margin:14px 0 12px;text-wrap:balance}
h1 em{font-style:normal;color:var(--lime)}
.lead{color:var(--mut);font-size:16px;max-width:46ch;line-height:1.55}
.sec{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--petrol-lite);margin:24px 0 10px}

/* chips */
.meta-chips{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.chip{font-size:12px;color:var(--txt);background:var(--panel);border:1px solid var(--line);padding:7px 13px;border-radius:999px}

/* campos */
.field{margin:8px 0 4px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:700;margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--txt);
  padding:12px 14px;border-radius:12px;font-size:15px;font-family:inherit}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--petrol-lite)}
.field.mw input{max-width:340px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--lime);color:#07100F;border:none;
  padding:15px 26px;border-radius:14px;font-family:inherit;font-weight:800;font-size:16px;cursor:pointer;
  transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.06)} .btn:active{transform:scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);font-weight:700}
.btn.ghost:hover{border-color:var(--petrol-lite)}
.btn.sm{padding:10px 16px;font-size:14px;border-radius:11px}
.tagline{color:var(--mut);font-size:13px;margin-top:26px}
.tagline b{color:var(--lime)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ring de tempo */
.ring{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;
  background:conic-gradient(var(--lime) var(--deg,360deg), rgba(255,255,255,.08) 0)}
.ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.ring b{position:relative;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.ring.big{width:84px;height:84px}
.ring.big b{font-size:28px}

/* opções (respostas) */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;align-items:center;gap:13px;padding:16px;border-radius:14px;font-size:15.5px;font-weight:700;
  border:1px solid rgba(255,255,255,.08);cursor:pointer;text-align:left;font-family:inherit;position:relative;overflow:hidden;
  transition:transform .1s,filter .12s,opacity .25s,box-shadow .2s}
.opt:hover{filter:brightness(1.06)} .opt:active{transform:scale(.99)}
.opt .shape{width:24px;height:24px;flex:none;display:grid;place-items:center}
.opt .shape svg{width:24px;height:24px}
.o1{background:var(--o1);color:#EAF3EF} .o2{background:var(--o2);color:#0A1F13}
.o3{background:var(--o3);color:#0A1B0A} .o4{background:var(--o4);color:#EAF3EF}
.opts.locked .opt{cursor:default;opacity:.42}
.opts.locked .opt.correct{opacity:1;box-shadow:0 0 0 3px var(--lime),0 12px 34px rgba(228,226,49,.2)}
.opts.locked .opt.wrong{opacity:1;box-shadow:0 0 0 3px var(--coral)}
.opt .mark{margin-left:auto;font-size:18px;opacity:0}
.opts.locked .opt.correct .mark,.opts.locked .opt.wrong .mark{opacity:1}
.opt.picked{box-shadow:0 0 0 3px var(--txt)}

/* ranking */
.lb{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lbrow{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:12px 15px;
  background:var(--panel2);border:1px solid var(--line);border-radius:13px}
.lbrow.me{border-color:var(--petrol-lite);box-shadow:0 0 0 1px color-mix(in srgb,var(--petrol-lite) 40%,transparent) inset}
.lbrow.p1{background:linear-gradient(90deg,color-mix(in srgb,var(--lime) 16%,var(--panel2)),var(--panel2));border-color:color-mix(in srgb,var(--lime) 34%,var(--line))}
.lbrow .pos{font-weight:800;color:var(--mut);font-variant-numeric:tabular-nums}
.lbrow.p1 .pos{color:var(--lime)}
.lbrow .who{display:flex;align-items:center;gap:10px;font-weight:700}
.lbrow .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#07100F;flex:none}
.lbrow .pts{font-variant-numeric:tabular-nums;font-weight:800}

/* prêmio / resultado */
.prize{text-align:center;background:linear-gradient(160deg,color-mix(in srgb,var(--petrol) 34%,var(--panel)),var(--panel));
  border:1px solid color-mix(in srgb,var(--petrol-lite) 38%,var(--line));border-radius:20px;padding:30px 24px;margin-bottom:20px}
.prize .medal{font-size:44px}
.prize .tier{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px}
.prize .final{font-size:40px;font-weight:800;color:var(--lime);font-variant-numeric:tabular-nums;line-height:1;margin:10px 0}
.prize .desc{color:var(--mut);font-size:14px}
.prize .reward{display:inline-block;margin-top:16px;background:var(--lime);color:#07100F;font-weight:800;
  padding:10px 18px;border-radius:999px;font-size:14px}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}