:root{
  --bg:#12141a; --card:#1b1f27; --card2:#232833; --line:#323948;
  --text:#e7eaf0; --muted:#9099a8; --acc:#4fc3f7; --acc2:#9be7ff; --ok:#7bd86b; --bad:#ff6b5f; --warn:#ffc466;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(79,195,247,.08) 1px,transparent 1px);background-size:26px 26px}
.app{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:16px 16px 40px;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0 20px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px}
.logo span{color:var(--acc)} .logo small{font-size:11px;color:var(--muted);font-weight:500;margin-left:6px}
.progress{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.progress-bar{width:180px;height:8px;background:var(--card2);border-radius:4px;overflow:hidden}
#progressFill{height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .3s}

.screen{display:none;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
#screen-start .card,#screen-intro .card{max-width:720px;margin:0 auto}
.center{text-align:center}
h1{font-size:clamp(30px,6vw,44px);line-height:1.1;margin:14px 0}
h2{font-size:clamp(20px,3.6vw,26px);margin:6px 0 18px;line-height:1.3}
h3{margin:0 0 12px;font-size:16px}
.lead{color:#c9d0db;line-height:1.6}
.muted{color:var(--muted);line-height:1.5}
.small{font-size:13px}
code{background:var(--card2);padding:1px 6px;border-radius:5px;font-size:.9em}
.badge{display:inline-block;padding:5px 12px;border-radius:99px;background:rgba(79,195,247,.12);color:var(--acc);font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.stats div{background:var(--card2);border-radius:12px;padding:14px;text-align:center}
.stats b{display:block;font-size:24px;color:var(--acc2);font-variant-numeric:tabular-nums}
.stats span{font-size:12px;color:var(--muted)}
.load-error{background:#2b1b1b;border:1px solid #5a2c28;color:#ffc9c4;padding:14px;border-radius:12px;margin-bottom:16px;line-height:1.5;font-size:14px}
.load-error code{background:#1a1010}

.btn{border:1px solid var(--line);background:var(--card2);color:var(--text);padding:12px 20px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .1s,background .2s,border-color .2s;font-family:inherit}
.btn:hover{border-color:var(--acc)} .btn:active{transform:scale(.97)}
.btn.primary{background:var(--acc);color:#06222f;border-color:var(--acc)}
.btn.primary:hover{background:var(--acc2)}
.btn.big{width:100%;padding:16px;font-size:17px;margin-top:6px}
.btn.ghost{background:none;border:none;color:var(--muted);padding:10px 4px}
.btn.ghost:hover{color:var(--text)}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.nav{margin-top:14px;min-height:40px}

.q-num{color:var(--acc);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.answers{display:grid;gap:10px}
.answer{text-align:left;padding:14px 18px;border-radius:12px;background:var(--card2);border:1px solid var(--line);color:var(--text);font-size:16px;cursor:pointer;transition:all .15s;font-family:inherit;display:flex;gap:12px;align-items:center}
.answer:hover{border-color:var(--acc);transform:translateX(4px)}
.answer.picked{border-color:var(--acc);background:rgba(79,195,247,.14)}
.answer .em{font-size:22px}
.q-feature{font-size:13px;color:var(--muted);margin:-8px 0 18px}
.q-feature b{color:var(--acc2);font-weight:600}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale button{padding:16px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .12s}
.scale button:hover{transform:translateY(-2px)}
.scale .yes2:hover,.scale .yes2.picked{background:#1f3a24;border-color:var(--ok)}
.scale .yes1:hover,.scale .yes1.picked{background:#1d3129;border-color:#5bb07a}
.scale .zero:hover,.scale .zero.picked{background:#2a2f3a;border-color:var(--muted)}
.scale .no1:hover,.scale .no1.picked{background:#3a2a25;border-color:#c97e5f}
.scale .no2:hover,.scale .no2.picked{background:#3d2222;border-color:var(--bad)}

.layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.live ol{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.live li{display:flex;justify-content:space-between;gap:8px;font-size:14px;padding:7px 10px;background:var(--card2);border-radius:8px;transition:all .3s}
.live li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live li b{color:var(--acc2);font-variant-numeric:tabular-nums}
.live-meta{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.5}

.answers-summary{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.chip{font-size:12px;padding:4px 9px;border-radius:99px;background:var(--card2);border:1px solid var(--line)}
.chip.pos{border-color:#3d6b45;color:#bfe8b5} .chip.neg{border-color:#6b3d3d;color:#ffc2bd}
.results{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.res{display:grid;grid-template-columns:28px 184px 1fr auto;gap:14px;align-items:center;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 14px 10px 10px;animation:fade .35s both}
.res input{width:20px;height:20px;accent-color:var(--acc)}
.res img{width:184px;height:86px;object-fit:cover;border-radius:8px;background:#0e1015}
.res .info{min-width:0}
.res .name{font-weight:700;font-size:16px}
.res .name a{color:inherit;text-decoration:none} .res .name a:hover{color:var(--acc2)}
.res .meta{font-size:12px;color:var(--muted);margin:3px 0 6px}
.res .desc{font-size:13px;color:#b8c0cc;line-height:1.4;margin-bottom:6px}
.res .tags{display:flex;flex-wrap:wrap;gap:4px}
.res .tags span{font-size:11px;padding:2px 7px;border-radius:99px;background:#2c3342;color:#c5cedb}
.res .tags span.hit{background:#1f3a2a;color:#a8e6b4}
.res .pct{font-size:22px;font-weight:800;color:var(--acc2);text-align:right;font-variant-numeric:tabular-nums}
.res .pct small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.wheel-setup{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:18px 0 6px}
select{background:var(--card2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit}

.wheel-wrap{position:relative;width:min(460px,100%);aspect-ratio:1;margin:10px auto}
#wheel{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);border-left:16px solid transparent;border-right:16px solid transparent;border-top:30px solid #fff;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;border:4px solid var(--bg);background:var(--acc);color:#06222f;font-weight:900;font-size:14px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5);font-family:inherit}
.hub:disabled{background:#3d5563;cursor:default}
.odds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0}
.odds span{font-size:12px;padding:4px 9px;border-radius:99px;background:var(--card2);display:flex;gap:6px;align-items:center}
.odds i{width:10px;height:10px;border-radius:3px;display:inline-block}
.winner{margin:14px auto 0;max-width:520px;background:var(--card2);border:1px solid var(--acc);border-radius:14px;padding:16px;animation:fade .4s}
.winner img{width:100%;border-radius:10px;margin-bottom:10px}
.winner .w-name{font-size:26px;font-weight:800}
.winner a{color:var(--acc2)}
.proof{margin-top:10px;font-family:ui-monospace,Consolas,monospace}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120px);background:var(--card2);border:1px solid var(--acc);padding:12px 20px;border-radius:12px;z-index:10;transition:transform .35s;max-width:90vw;text-align:center}
.toast{visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);visibility:visible}
.foot{margin-top:auto;padding-top:30px;text-align:center;color:#566072;font-size:12px}

@media (max-width:820px){
  .layout{grid-template-columns:1fr}
  .res{grid-template-columns:24px 1fr auto}
  .res img{display:none}
}
@media (max-width:520px){
  .card{padding:18px}
  .scale{grid-template-columns:1fr 1fr}
  .scale .zero{grid-column:span 2;order:5}
  .stats b{font-size:19px}
}