:root{--ink:#12141a;--panel:#1b1e27;--panel2:#252936;--cream:#f4f0e8;--mist:#9aa1ad;--line:#333846;--signal:#e23b32;--hit:#8dcfb0;--miss:#e7a09c;
--display:'Fraunces',Georgia,serif;--sans:'Outfit',system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--cream);font:17px/1.45 var(--sans);-webkit-text-size-adjust:100%}
.topline{height:4px;background:var(--signal);position:fixed;top:0;left:0;right:0;z-index:5}
.side{display:none}
.app{max-width:32rem;margin:0 auto;padding:28px 18px calc(40px + env(safe-area-inset-bottom))}
.mark,.h-display{font-family:var(--display);font-style:italic;font-weight:500}
.brand{font-family:var(--display);font-style:italic;font-weight:500;font-size:2.6rem;line-height:1;margin:14px 0 4px}
.tag{color:var(--mist);margin:0 0 20px}
h2{font-family:var(--display);font-style:italic;font-weight:500;font-size:1.7rem;margin:6px 0 10px}
p{margin:0 0 12px}.muted{color:var(--mist)}.small{font-size:.85rem}.center{text-align:center}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.stat b{display:block;font-size:1.6rem;font-family:var(--display);font-style:italic;font-weight:500}
.stat span{color:var(--mist);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
button,.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--cream);border-radius:12px;padding:12px 16px;text-align:center;text-decoration:none;display:inline-block}
button:hover{border-color:var(--mist)}button:disabled{opacity:.5;cursor:default}
.primary{background:var(--signal);border-color:var(--signal);color:#fff;font-weight:600;width:100%;padding:15px;font-size:1.05rem}
.primary:hover{border-color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1}
.link{background:none;border:0;color:var(--mist);text-decoration:underline;padding:6px;cursor:pointer}
.stack>*{margin-bottom:10px}
input[type=text],input[type=email],input[type=password]{width:100%;font:inherit;padding:13px;border-radius:10px;border:1px solid var(--line);background:var(--ink);color:var(--cream);margin-bottom:10px}
label{display:block;color:var(--mist);font-size:.85rem;margin:0 0 4px}
.err{background:#3a1d1d;border:1px solid var(--signal);border-radius:10px;padding:10px 12px;margin:10px 0}
.ok{background:#1d3a2c;border:1px solid var(--hit);border-radius:10px;padding:10px 12px;margin:10px 0}
details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0}
summary{cursor:pointer;font-weight:500}details ol{padding-left:1.1rem;margin:10px 0 0}details li{margin-bottom:6px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.top .link{padding:4px 0}
.rank{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.rank .pts{font-family:var(--display);font-style:italic;font-size:1.3rem;width:3.2rem;color:var(--signal)}
.rank .nm{flex:1;font-weight:500}.rank button{padding:8px 12px}
.meta{display:flex;justify-content:space-between;color:var(--mist);font-size:.9rem;margin-bottom:8px}
.clock{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden;margin-bottom:16px}
.clock i{display:block;height:100%;background:var(--signal);width:100%;transition:width 1s linear}
.q{font-size:1.25rem;line-height:1.35;margin:0 0 18px}
.opt{display:block;width:100%;text-align:left;margin-bottom:10px;padding:14px 16px}
.opt.hit{background:#1f5a3c;border:2px solid #8ff0b8;color:#effff5;font-weight:600;box-shadow:0 0 0 3px rgba(143,240,184,.25),0 0 22px rgba(143,240,184,.45);animation:hitpop .35s ease-out}
.opt.hit::after{content:" \2713";font-weight:700}
@keyframes hitpop{0%{transform:scale(1)}45%{transform:scale(1.04)}100%{transform:scale(1)}}
.opt.miss{background:#3a1d1d;border-color:var(--miss);color:var(--miss)}
.opt.dim{opacity:.5}
.verdict{font-family:var(--display);font-style:italic;font-size:1.5rem;margin:6px 0 12px}
.big{font-family:var(--display);font-style:italic;font-size:3.4rem;line-height:1;margin:4px 0}
.wager{display:flex;align-items:center;justify-content:center;gap:18px;margin:18px 0}
.wager b{font-size:2.6rem;font-family:var(--display);font-style:italic;font-weight:500;min-width:5ch;text-align:center}
.wager button{width:56px;height:56px;font-size:1.6rem;padding:0}
.tiles{display:flex;gap:6px;font-size:1.6rem;justify-content:center;margin:8px 0}
.bar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:.95rem}
.bar .lab{width:7.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .trk{flex:1;height:14px;background:var(--panel2);border-radius:7px;overflow:hidden}
.bar .trk i{display:block;height:100%}
.bar .trk i.h{background:var(--hit)}.bar .trk i.m{background:var(--miss)}
.tabs{display:flex;gap:8px;margin:10px 0}.tabs button{flex:1}.tabs .on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
table.lb{width:100%;border-collapse:collapse}table.lb td{padding:10px 6px;border-bottom:1px solid var(--line)}
table.lb td:first-child{width:2.2rem;color:var(--mist)}table.lb td:last-child{text-align:right;font-weight:600}
table.lb tr.you td{color:var(--signal)}
.sponsor{border:1px dashed var(--line);border-radius:12px;padding:10px 14px;margin:18px 0;color:var(--mist);font-size:.9rem;text-align:center}
.sponsor a{color:var(--cream)}
.foot{color:var(--mist);font-size:.8rem;text-align:center;margin-top:28px}
.loading{color:var(--mist);text-align:center;margin-top:30vh}
@media (min-width:1000px){
 .side{display:block;position:fixed;left:48px;top:48px}
 .side .mark{font-size:1.9rem}.side .sub{color:var(--mist)}
 .app{padding-top:48px}
}
@media (prefers-reduced-motion:reduce){.clock i{transition:none}}

.logo{margin:6px 0 4px;line-height:0}.logo img{max-width:100%;height:auto;margin-left:-6px}
.tag .h-display{color:var(--cream);font-size:1.1rem}