:root { color-scheme: light; --ink:#20352d; --muted:#737b71; --paper:#f7f5ed; --green:#cfeb9e; --line:#e3e5d9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:3px solid #276947; outline-offset:5px; }
.game { width:min(100% - 40px,680px); margin:0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; font-weight:850; font-size:18px; letter-spacing:-.7px; }
.brand-dot { width:12px; height:12px; background:#6b943e; border-radius:50%; }
.tag { color:var(--muted); font-size:12px; letter-spacing:1px; }
.intro { text-align:center; padding:42px 0 30px; }
.eyebrow { color:#6c805d; font-size:12px; font-weight:700; letter-spacing:1px; margin:0 0 17px; }
h1 { font-size:clamp(36px,7vw,52px); line-height:1.22; letter-spacing:-2.6px; margin:0; font-weight:850; }
h1 span { color:#699148; }
.description { color:var(--muted); font-size:14px; line-height:1.7; margin:18px 0 0; }
.arena { background:white; border:1px solid var(--line); border-radius:26px; padding:24px 32px 18px; box-shadow:0 8px 0 #eaece0; }
.arena-top { display:flex; justify-content:space-between; gap:10px; color:#8c9486; font-size:10px; letter-spacing:1.2px; font-weight:750; }
.live-dot { display:flex; align-items:center; gap:6px; letter-spacing:0; }
.live-dot::before { content:""; width:5px; height:5px; background:#87a963; border-radius:50%; }
.duel { display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; padding:28px 0 22px; }
.player { display:flex; flex-direction:column; align-items:center; gap:11px; }
.player-label { font-size:12px; font-weight:750; }
.hand { width:116px; height:116px; border-radius:50%; display:grid; place-items:center; font-size:59px; line-height:1; }
.my-hand { background:#ecf4df; }
.computer-hand { background:#fff0e5; }
.hand-label { font-size:12px; color:var(--muted); min-height:18px; }
.versus { color:#c0c6b9; font-size:14px; font-weight:900; text-align:center; }
.result { text-align:center; min-height:79px; }
.result h2 { font-size:23px; letter-spacing:-.8px; margin:0 0 7px; }
.result p { margin:0; font-size:13px; color:var(--muted); line-height:1.5; }
.choices { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.choice { position:relative; border:1px solid #dce3d1; border-radius:17px; background:#f9fbf5; padding:16px 5px 13px; color:var(--ink); display:flex; flex-direction:column; align-items:center; gap:7px; font-size:14px; font-weight:750; transition:transform .16s,background .16s,border-color .16s; }
.choice-emoji { font-size:31px; line-height:1.2; }
.choice:hover { background:#e8f3d6; border-color:#a1bb7c; transform:translateY(-3px); }
.choice:active { transform:translateY(1px); }
.choice.selected { background:var(--green); border-color:#8eaa63; }
kbd { position:absolute; top:9px; right:10px; color:#9ca88d; font:10px ui-monospace,monospace; }
.keyboard-hint { font-size:10px; color:#929b88; text-align:center; margin:15px 0 0; }
.scoreboard { margin:29px 0 0; padding:21px 24px 17px; background:#eef0e5; border:1px solid #e4e7d9; border-radius:20px; }
.scoreboard-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.scoreboard-heading h2 { margin:0; font-size:13px; letter-spacing:-.3px; }
#reset { border:0; background:transparent; color:#78826c; padding:7px 0 7px 10px; font-size:11px; }
#reset:hover { color:#20352d; }
.scores { display:grid; grid-template-columns:repeat(3,1fr); margin:19px 0 16px; }
.scores > div { display:flex; flex-direction:column; align-items:center; gap:7px; }
.scores > div + div { border-left:1px solid #d9decd; }
.score-label { font-size:11px; color:#7b8470; }
.scores strong { font-size:30px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }
#wins { color:#628c3f; }
#losses { color:#b47d60; }
#score-summary { border-top:1px solid #dfe3d4; padding-top:13px; margin:0; text-align:center; font-size:11px; color:#7d876e; }
footer { text-align:center; font-size:11px; color:#8c9482; line-height:1.9; padding:25px 0 30px; }
footer span { color:#a2aa98; }
.hand.pop { animation:pop .25s ease-out; }
@keyframes pop { 0% { transform:scale(.82) rotate(-8deg); } 70% { transform:scale(1.08) rotate(4deg); } 100% { transform:scale(1); } }
@media (max-width:440px) { .game { width:calc(100% - 28px); } .topbar { padding:21px 0; } .intro { padding:30px 0 25px; } .arena { padding:21px 18px 17px; } .hand { width:96px; height:96px; font-size:49px; } .duel { padding:25px 0 21px; } .choices { gap:9px; } .description { font-size:12px; } .tag { font-size:10px; letter-spacing:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }