:root { --ink:#20283a; --muted:#697286; --paper:#f6f7fb; --line:#e6e8ef; --green:#6f9276; --green-dark:#55745e; --white:#fff; }
* { box-sizing:border-box; }
html { color-scheme:light; }
body.arcade-page { min-height:100vh; margin:0; padding:0 18px; display:flex; flex-direction:column; align-items:center; background:var(--paper); color:var(--ink); font-family:'DM Sans','Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.arcade-header { width:min(900px,100%); min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
.arcade-back { color:#596477; font-size:.88rem; font-weight:800; text-decoration:none; }
.arcade-back:hover { color:var(--green-dark); }
.arcade-brand { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-size:.93rem; font-weight:850; letter-spacing:-.035em; }
.arcade-brand-mark { margin-right: 1px; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:var(--ink); color:#fff; font-size:.84rem; letter-spacing:-.08em; padding-right:2px; }
.arcade-main { width:min(900px,100%); flex:1; padding:30px 0 28px; display:flex; flex-direction:column; align-items:center; }
.arcade-heading { width:100%; margin-bottom:22px; text-align:center; }
.arcade-kicker { color:#7a8798; font-size:.68rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.arcade-heading h1 { margin:9px 0 7px; font-size:clamp(2.2rem,7vw,3rem); line-height:1.1; letter-spacing:-.065em; }
.arcade-heading p { max-width:650px; margin:0 auto; color:var(--muted); font-size:.94rem; line-height:1.6; }
.arcade-panel { width:100%; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--white); box-shadow:0 10px 30px rgba(32,40,58,.045); }
.arcade-status { min-height:24px; margin:0 0 14px; color:#687388; font-size:.9rem; text-align:center; line-height:1.5; }
.arcade-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:17px; }
.arcade-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 17px; border:0; border-radius:11px; background:var(--ink); color:#fff; font:inherit; font-size:.89rem; font-weight:800; text-decoration:none; cursor:pointer; transition:transform 150ms ease,opacity 150ms ease,background 150ms ease; }
.arcade-btn:hover:not(:disabled) { transform:translateY(-1px); opacity:.92; }
.arcade-btn:disabled { opacity:.42; cursor:not-allowed; }
.arcade-btn.secondary { background:#eceef4; color:#3c465a; }
.arcade-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:0 0 16px; }
.stat-pill { min-width:100px; padding:9px 14px; border:1px solid #e8eaf0; border-radius:12px; background:#fafbfe; text-align:center; }
.stat-pill span { display:block; color:#80889a; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.stat-pill strong { display:block; margin-top:3px; font-size:1.12rem; }
.arcade-hint { max-width:700px; margin:14px auto 0; color:#858c9c; font-size:.78rem; line-height:1.6; text-align:center; }
.arcade-footer { width:min(900px,100%); padding:18px 0 22px; border-top:1px solid var(--line); color:#8a91a1; font-size:.79rem; text-align:center; }
.arcade-footer a { color:#647086; font-weight:750; text-decoration:none; }
[hidden] { display:none !important; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #b6cbbb; outline-offset:3px; }
canvas { display:block; max-width:100%; }
@media(max-width:480px) { .arcade-header { min-height:65px; } .arcade-main { padding-top:24px; } .arcade-panel { padding:17px 12px; } .arcade-heading p { font-size:.88rem; } .arcade-btn { min-height:43px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }