:root { --arcade-nav-ink:#20352f; --arcade-nav-bg:rgba(255,253,248,.94); --arcade-nav-line:rgba(32,53,47,.18); --arcade-dialog-bg:#fffdf8; --arcade-dialog-muted:#6d7d76; --arcade-dialog-field:#f3eee5; --arcade-dialog-shadow:#20352f33; }
:root[data-theme="dark"] { --arcade-nav-ink:#f3f7f4; --arcade-nav-bg:rgba(17,27,24,.94); --arcade-nav-line:rgba(255,255,255,.16); --arcade-dialog-bg:#17231f; --arcade-dialog-muted:#aab8b1; --arcade-dialog-field:#0e1714; --arcade-dialog-shadow:#0009; }
/* Keep the first page control below notched and Dynamic Island status bars. A
   flow spacer preserves each page's own header spacing instead of replacing it. */
body::before { display:block; height:env(safe-area-inset-top); content:""; }
.arcade-account { position: fixed; z-index: 1000; top: calc(14px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; padding: 7px; color: var(--arcade-nav-ink); background: var(--arcade-nav-bg); border: 1px solid var(--arcade-nav-line); border-radius: 14px; box-shadow: 0 10px 30px var(--arcade-dialog-shadow); font: 600 13px/1.2 system-ui, sans-serif; backdrop-filter:blur(12px); }
body.arena-fullscreen .arcade-account { display:none; }
.arcade-account a, .arcade-account button { padding: 8px 11px; color: inherit; background: transparent; border: 0; border-radius: 9px; font: inherit; text-decoration: none; cursor: pointer; }
.arcade-account button { color: #10271f; background: #83e6c3; }
.arcade-theme { display:flex; padding:3px; border-radius:9px; background:var(--arcade-dialog-field); }
.arcade-account .arcade-theme button { padding:5px 7px; color:var(--arcade-dialog-muted); background:transparent; }
.arcade-account .arcade-theme button[aria-checked="true"] { color:var(--arcade-nav-ink); background:var(--arcade-dialog-bg); box-shadow:0 1px 5px var(--arcade-dialog-shadow); }
.arcade-theme button:focus-visible { outline:2px solid #d76b45; outline-offset:1px; }
.arcade-dialog { width: min(420px, calc(100% - 32px)); padding: 0; color: var(--arcade-nav-ink); background: var(--arcade-dialog-bg); border: 1px solid var(--arcade-nav-line); border-radius: 20px; box-shadow: 0 24px 80px var(--arcade-dialog-shadow); }
.arcade-dialog::backdrop { background: rgba(5,10,18,.72); backdrop-filter: blur(4px); }
.arcade-auth { display: grid; gap: 16px; padding: 26px; font: 15px/1.5 system-ui, sans-serif; }
.arcade-auth h2, .arcade-auth p { margin: 0; }
.arcade-auth label { display: grid; gap: 6px; color: var(--arcade-dialog-muted); }
.arcade-auth input { width: 100%; padding: 12px; color: var(--arcade-nav-ink); background: var(--arcade-dialog-field); border: 1px solid var(--arcade-nav-line); border-radius: 10px; font: inherit; }
.arcade-auth-actions { display: flex; gap: 9px; }
.arcade-auth-actions button { flex: 1; padding: 11px; color: #10271f; background: #83e6c3; border: 0; border-radius: 10px; font: 700 14px system-ui; cursor: pointer; }
.arcade-auth-actions .secondary { color: var(--arcade-nav-ink); background: var(--arcade-dialog-field); }
.arcade-auth-message { min-height: 1.5em; color: #ffb3a7; }
.result-share-dialog { width: min(680px, calc(100% - 28px)); overflow: hidden; }
.result-share-content { display: grid; gap: 16px; padding: 22px; font: 15px/1.45 system-ui, sans-serif; }
.result-share-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.result-share-heading h2, .result-share-content p { margin: 0; }
.result-share-heading h2 { font-size: clamp(21px, 4vw, 28px); }
.result-share-eyebrow { margin-bottom: 3px !important; color: #83e6c3; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.result-share-close { width: 36px; height: 36px; padding: 0; color: #dbe3ee; background: rgba(255,255,255,.08); border: 0; border-radius: 50%; font: 25px/1 system-ui; cursor: pointer; }
.result-share-image-wrap { overflow: hidden; background: #0d1420; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.result-share-image-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: contain; }
.result-share-caption { color: #f7f8fc; }
.result-share-link { overflow: hidden; color: #9fabbc; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.result-share-actions { display: flex; justify-content: flex-end; gap: 10px; }
.result-share-actions button { min-width: 110px; padding: 11px 16px; border: 0; border-radius: 10px; font: 700 14px system-ui; cursor: pointer; }
.result-share-cancel { color: #f7f8fc; background: rgba(255,255,255,.09); }
.result-share-confirm { color: #10271f; background: #83e6c3; }
@media (max-width: 650px) { .arcade-account { top: auto; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); position: fixed; } }
@media (max-width: 520px) { .arcade-account > a:first-of-type { display:none; } .arcade-account { max-width:calc(100% - 20px); } }
@media (max-width: 480px) { .result-share-content { padding: 17px; } .result-share-actions button { flex: 1; } }
.arcade-build-version { margin: 24px auto calc(18px + env(safe-area-inset-bottom)); padding: 0 16px; color: var(--arcade-dialog-muted); font: 12px/1.4 system-ui, sans-serif; text-align: center; }
.achievement-dialog { width:min(720px,calc(100% - 28px)); max-height:min(760px,calc(100vh - 40px)); }
.achievement-dialog > header { position:sticky; z-index:1; top:0; display:flex; align-items:center; justify-content:space-between; padding:22px 24px; background:var(--arcade-dialog-bg); border-bottom:1px solid var(--arcade-nav-line); }
.achievement-dialog h2,.achievement-dialog header small,.achievement-card p { margin:0; }.achievement-dialog h2{font:800 27px/1.2 system-ui}.achievement-dialog header small,.achievement-card small{color:var(--arcade-dialog-muted);font:700 11px/1.4 system-ui;text-transform:uppercase;letter-spacing:.08em}.achievement-dialog header button{width:36px;height:36px;padding:0;color:var(--arcade-nav-ink);background:var(--arcade-dialog-field);border:0;border-radius:50%;font-size:24px;cursor:pointer}
.achievement-list{display:grid;gap:12px;padding:18px}.achievement-card{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px;color:var(--arcade-dialog-muted);background:var(--arcade-dialog-field);border:1px solid var(--arcade-nav-line);border-radius:14px;filter:grayscale(1);opacity:.72}.achievement-card.is-unlocked{color:var(--arcade-nav-ink);filter:none;opacity:1;border-color:#83e6c366}.achievement-icon{display:grid;width:48px;height:48px;place-items:center;background:var(--arcade-dialog-bg);border-radius:13px;font-size:25px}.achievement-card strong{display:block;margin:2px 0;font:800 17px/1.3 system-ui}.achievement-card p{font:13px/1.4 system-ui}.achievement-card progress{width:min(180px,100%);height:7px;margin-right:8px;accent-color:#83e6c3}.achievement-card button{padding:8px 11px;color:#10271f;background:#83e6c3;border:0;border-radius:9px;font:700 12px system-ui;cursor:pointer}
.achievement-toast{position:fixed;z-index:2000;right:20px;bottom:20px;display:flex;gap:13px;align-items:center;min-width:280px;padding:16px;color:#f7f8fc;background:#17231f;border:1px solid #83e6c366;border-radius:16px;box-shadow:0 18px 60px #0008;animation:achievement-in .35s ease-out}.achievement-toast>span{font-size:30px}.achievement-toast small,.achievement-toast strong{display:block}.achievement-toast small{color:#83e6c3;font:700 10px system-ui;text-transform:uppercase;letter-spacing:.1em}.achievement-toast strong{margin-top:3px;font:800 16px system-ui}@keyframes achievement-in{from{opacity:0;transform:translateY(15px)}}
.top-score-toast{position:fixed;z-index:2100;right:20px;bottom:20px;display:grid;grid-template-columns:auto minmax(230px,1fr);gap:14px;width:min(390px,calc(100% - 40px));padding:20px;color:#fffdf8;background:linear-gradient(135deg,#17231f,#244c40);border:1px solid #ffd36a99;border-radius:20px;box-shadow:0 20px 70px #0009;animation:top-score-in .55s cubic-bezier(.2,.9,.25,1.2);font-family:system-ui,sans-serif}.top-score-toast>button{position:absolute;top:9px;right:9px;width:30px;height:30px;padding:0;color:#fffdf8;background:#ffffff12;border:0;border-radius:50%;font-size:20px;cursor:pointer}.top-score-confetti{font-size:38px;filter:drop-shadow(0 4px 8px #0006);animation:top-score-trophy .8s ease-in-out alternate 3}.top-score-toast small,.top-score-toast strong{display:block}.top-score-toast small{color:#ffd36a;font:800 10px/1.3 system-ui;letter-spacing:.13em;text-transform:uppercase}.top-score-toast strong{max-width:290px;margin:3px 26px 8px 0;font:800 18px/1.25 system-ui}.top-score-toast p{display:flex;align-items:center;gap:12px;margin:0 0 9px}.top-score-toast s{color:#b7c9c2;font:700 17px system-ui}.top-score-toast b{color:#ffd36a;font:900 29px/1 system-ui}.top-score-toast b::before{margin-right:10px;color:#83e6c3;content:'→';font-size:18px}.top-score-toast em{display:block;margin:-3px 0 10px;color:#ffd36a;font:700 12px system-ui;font-style:normal}.top-score-toast a{color:#bff7e3;font:700 13px system-ui;text-underline-offset:3px}@keyframes top-score-in{from{opacity:0;transform:translateY(25px) scale(.94)}}@keyframes top-score-trophy{to{transform:rotate(10deg) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.top-score-toast,.top-score-confetti{animation:none}}
@media(max-width:650px){.achievement-toast{right:10px;bottom:78px;left:10px}.achievement-card{grid-template-columns:auto 1fr}.achievement-card button{grid-column:2;justify-self:start}}
@media(max-width:650px){.top-score-toast{right:10px;bottom:78px;width:calc(100% - 20px)}}