@font-face { font-family: Manrope; src: url('/static/fonts/Manrope-Variable.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root { color-scheme: light; --paper:#f7f6f2; --ink:#171714; --muted:#5f5e58; --line:#c5c3ba; --accent:#174d37; --error:#9c2f24; font-family:Manrope,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
button,input { font:inherit; }
a { color:inherit; text-underline-offset:.2em; }
a:hover { color:var(--accent); }
main { width:min(72rem,calc(100% - 4rem)); margin:0 auto; padding:5rem 0; }
.hero { padding-bottom:4rem; }
.site-name,.result-label { margin:0 0 2rem; color:var(--muted); font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,p { margin-top:0; }
h1 { max-width:35rem; margin-bottom:1.5rem; font-size:clamp(2.8rem,9vw,5.2rem); font-weight:450; line-height:.98; letter-spacing:-.055em; }
.title-risk { color:#c62828; }
h2 { margin-bottom:.75rem; font-size:1.35rem; line-height:1.25; }
.lede { max-width:48rem; margin-bottom:1.25rem; font-size:1.1rem; line-height:1.7; }
.note { color:var(--muted); font-size:.86rem; line-height:1.6; }
.start-card,.game-card { border-top:1px solid var(--ink); padding-top:1.5rem; }
.start-card>p { max-width:35rem; color:var(--muted); line-height:1.65; }
.primary { min-height:2.8rem; border:1px solid var(--ink); border-radius:0; padding:.65rem 1rem; background:var(--ink); color:var(--paper); font-weight:650; cursor:pointer; }
.primary:hover { background:var(--accent); border-color:var(--accent); }
.primary:focus-visible,input:focus-visible,.wager-chips button:focus-visible,fieldset input:focus-visible+span { outline:2px solid var(--accent); outline-offset:2px; }
.primary:disabled { opacity:.55; cursor:wait; }
.stats { display:grid; grid-template-columns:1.5fr 1fr 1fr; border-bottom:1px solid var(--line); padding-bottom:1.25rem; }
.stats span { display:block; margin-bottom:.25rem; color:var(--muted); font-size:.72rem; }
.stats strong { font-size:1.35rem; font-variant-numeric:tabular-nums; }
.coin { margin:2rem 0 .4rem; color:var(--muted); font-size:.78rem; }
.coin span::before { content:'Last toss: '; }
.coin-heads,.coin-tails { color:var(--ink); font-size:1rem; font-weight:700; }
.message { margin-bottom:1.5rem; font-size:.85rem; }
.message.win { color:var(--accent); }
.message.loss,.message.error { color:var(--error); }
.bet-form { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1.25rem; margin-top:2rem; }
.wager-control>label,legend { display:block; margin-bottom:.55rem; color:var(--muted); font-size:.75rem; font-weight:650; }
.wager-chips { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.55rem; }
.wager-chips button { border:0; border-bottom:1px solid var(--line); padding:.2rem .35rem; background:transparent; color:var(--muted); font-size:.7rem; cursor:pointer; }
.wager-chips button:hover { color:var(--accent); border-color:var(--accent); }
.wager-chips button:disabled { opacity:.3; cursor:not-allowed; }
.money-input { display:flex; align-items:center; border-bottom:1px solid var(--ink); }
.money-input span { color:var(--muted); }
.money-input input { width:100%; border:0; padding:.7rem .4rem; outline:0; background:transparent; color:var(--ink); font-size:1.15rem; }
fieldset { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; min-width:0; margin:0; padding:0; border:0; }
legend { grid-column:1/-1; }
fieldset label { cursor:pointer; }
fieldset input { position:absolute; opacity:0; }
fieldset span { display:flex; justify-content:space-between; border:1px solid var(--line); padding:.7rem; font-size:.8rem; }
fieldset small { color:var(--muted); }
fieldset input:checked+span { border-color:var(--ink); background:#ebe9e2; }
.bet-form>.primary { grid-column:1/-1; justify-self:start; }
.finished { padding:1rem 0; }
.finished .result-label { margin-bottom:.75rem; }
.finished p:not(.result-label) { color:var(--muted); }
.stats-header { padding-bottom:3rem; }
.statistics { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--ink); }
.summary-stat { padding:1.5rem 1.5rem 2rem 0; border-bottom:1px solid var(--line); }
.summary-stat:nth-child(2) { padding-left:1.5rem; border-left:1px solid var(--line); }
.summary-stat span,.winner-chart span { display:block; margin-bottom:.5rem; color:var(--muted); font-size:.75rem; font-weight:650; }
.summary-stat strong,.winner-chart strong { font-size:clamp(2rem,6vw,3.75rem); font-weight:450; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.winner-chart { grid-column:1/-1; display:flex; align-items:center; gap:2rem; padding:2rem 0; border-bottom:1px solid var(--line); }
.winner-chart p { margin:.4rem 0 0; color:var(--muted); font-size:.82rem; }
.pie { width:clamp(8rem,22vw,13rem); aspect-ratio:1; flex:none; border-radius:50%; background:conic-gradient(var(--accent) var(--winner-share),#d9d7cf 0); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.stats-back { margin-top:2rem; font-size:.85rem; }
@media(max-width:560px) { main { width:calc(100% - 2rem); padding:2.5rem 0; } .hero { padding-bottom:3rem; } .stats { grid-template-columns:1.4fr 1fr 1fr; } .stats strong { font-size:1.05rem; } .bet-form { grid-template-columns:1fr; } .bet-form>.primary { grid-column:auto; width:100%; } }
@media(max-width:560px) { .statistics { grid-template-columns:1fr; } .summary-stat:nth-child(2) { padding-left:0; border-left:0; } .winner-chart { flex-direction:column; align-items:flex-start; } }