:root{--bg:#f6f4ef;--fg:#1d1b16;--muted:#6f6a5e;--gold:#d9a521;--gold-d:#a67708;--card:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#16150f;--fg:#f1eee4;--muted:#a09a8a;--card:#211f17}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:520px;margin:0 auto;padding:32px 16px;text-align:center}
h1{font-size:40px;margin:0 0 4px}
h2{font-size:18px;margin:32px 0 8px}
.lead{color:var(--muted);margin:0 0 28px}
.coin{width:180px;height:180px;border-radius:50%;border:6px solid var(--gold-d);background:radial-gradient(circle at 35% 30%,#ffe9a3,var(--gold));color:#4a3500;font:700 26px/1 inherit;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.7,.3,1)}
.coin .side{position:absolute;inset:0;display:grid;place-items:center;backface-visibility:hidden}
.coin .tails{transform:rotateY(180deg)}
.coin:focus-visible{outline:3px solid var(--fg);outline-offset:4px}
.result{font-size:22px;font-weight:600;min-height:33px;margin:20px 0}
.stats{display:flex;gap:12px;justify-content:center}
.stats div{background:var(--card);border-radius:12px;padding:10px 0;width:100px}
.stats b{display:block;font-size:24px}
.stats span{color:var(--muted);font-size:13px}
.history{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.history li{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--card)}
.history li.h{background:var(--gold);color:#4a3500}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;margin-top:20px;font:inherit}
footer{color:var(--muted);font-size:13px;text-align:center;padding:16px}
@media (prefers-reduced-motion:reduce){.coin{transition:none}}