arcade.css

: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; }
/* A shared navigation surface keeps account controls clear of page headers. */
body:not(.arcade-has-topbar)::before { display:block; height:env(safe-area-inset-top); content:""; }
.arcade-topbar { position:relative; z-index:1000; width:100%; padding:calc(12px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left)); color:var(--arcade-nav-ink); background:var(--arcade-nav-bg); border-bottom:1px solid var(--arcade-nav-line); box-shadow:0 8px 28px color-mix(in srgb,var(--arcade-dialog-shadow) 45%,transparent); font:700 13px/1.2 system-ui,sans-serif; backdrop-filter:blur(18px); }
.arcade-topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; width:min(1120px,100%); min-height:48px; margin:0 auto; }
.arcade-home { display:inline-flex; flex:0 0 auto; align-items:center; gap:11px; color:inherit; font-size:15px; font-weight:900; letter-spacing:-.025em; text-decoration:none; }
.arcade-home-mark { display:grid; width:38px; height:38px; place-items:center; color:#fff; background:linear-gradient(135deg,#ff4fa3,#6c3bff); border:2px solid var(--arcade-nav-ink); border-radius:12px; box-shadow:3px 3px 0 var(--arcade-nav-ink); font:900 12px ui-monospace,"SFMono-Regular",Consolas,monospace; }
.arcade-account { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
body.arena-fullscreen .arcade-topbar { display:none; }
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 a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; }
.arcade-account button { color: #10271f; background: #83e6c3; }
.arcade-appearance-button::before { margin-right:6px; content:'◐'; }
.arcade-audio-button::before { margin-right:6px; content:'♪'; }.arcade-audio-button[data-audio-muted="true"]::before{content:'×';}.arcade-audio-button:disabled{cursor:not-allowed;opacity:.55}
.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; }
.arcade-install-hint { position:fixed; z-index:1900; bottom:max(16px,env(safe-area-inset-bottom)); left:max(16px,env(safe-area-inset-left)); display:flex; align-items:stretch; overflow:hidden; color:#10271f; background:#83e6c3; border:2px solid var(--arcade-nav-ink); border-radius:15px; box-shadow:5px 5px 0 var(--arcade-nav-ink),0 18px 50px var(--arcade-dialog-shadow); font:800 14px/1.15 system-ui,sans-serif; animation:arcade-install-in .35s ease-out; }
.arcade-install-hint[hidden],body.arena-fullscreen .arcade-install-hint { display:none; }
.arcade-install-hint button { color:inherit; background:transparent; border:0; font:inherit; cursor:pointer; }
.arcade-install-open { display:flex; align-items:center; gap:9px; min-height:52px; padding:8px 10px 8px 13px; text-align:left; }
.arcade-install-open>span:first-child { display:grid; width:30px; height:30px; place-items:center; color:#fff; background:#6c3bff; border-radius:9px; font-size:23px; line-height:1; }
.arcade-install-open small { display:block; margin-bottom:2px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.arcade-install-dismiss { width:38px; border-left:1px solid #10271f33!important; font-size:20px!important; }
.arcade-install-hint button:focus-visible,.arcade-install-dialog button:focus-visible { outline:3px solid #d76b45; outline-offset:-3px; }
.arcade-install-dialog { width:min(520px,calc(100% - 28px)); }
.arcade-install-dialog form { display:grid; gap:18px; padding:24px; font:15px/1.5 system-ui,sans-serif; }
.arcade-install-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.arcade-install-dialog :is(h2,p,ol) { margin:0; }
.arcade-install-dialog h2 { margin-top:2px; font-size:clamp(23px,5vw,30px); line-height:1.15; }
.arcade-install-dialog header small { color:#83e6c3; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.arcade-install-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; }
.arcade-install-dialog>form>p { color:var(--arcade-dialog-muted); }
.arcade-install-dialog ol { display:grid; gap:12px; padding:0; list-style:none; counter-reset:install-step; }
.arcade-install-dialog li { position:relative; min-height:40px; padding:9px 12px 9px 52px; background:var(--arcade-dialog-field); border:1px solid var(--arcade-nav-line); border-radius:12px; counter-increment:install-step; }
.arcade-install-dialog li::before { position:absolute; top:7px; left:9px; display:grid; width:30px; height:30px; place-items:center; color:#10271f; background:#83e6c3; border-radius:9px; content:counter(install-step); font-weight:900; }
.arcade-install-actions { display:flex; justify-content:flex-end; gap:9px; }
.arcade-install-actions button { padding:11px 15px; color:#10271f; background:#83e6c3; border:0; border-radius:10px; font:800 14px system-ui,sans-serif; cursor:pointer; }
.arcade-install-actions button.secondary { color:var(--arcade-nav-ink); background:var(--arcade-dialog-field); }
.arcade-install-status:empty { display:none; }
@keyframes arcade-install-in { from { opacity:0; transform:translateY(14px); } }
.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: 760px) { .arcade-topbar-inner { align-items:flex-start; flex-direction:column; gap:11px; } .arcade-account { width:100%; justify-content:flex-start; overflow-x:auto; padding:2px 3px 5px; scrollbar-width:none; } .arcade-account::-webkit-scrollbar { display:none; } }
@media (max-width: 520px) { .arcade-topbar { padding-inline:12px; } .arcade-home > span:last-child { font-size:14px; } .arcade-account > .arcade-scores-link { display:none; } .arcade-account a,.arcade-account button { white-space:nowrap; } }
@media (max-width: 520px) { .arcade-install-hint { right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); left:auto; } .arcade-install-dialog form { padding:19px; } }
@media (max-width: 480px) { .result-share-content { padding: 17px; } .result-share-actions button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .arcade-install-hint { animation:none; } }
.arcade-build-version { margin: 24px auto calc(18px + env(safe-area-inset-bottom)); padding: 0 16px; text-align:center; }
.arcade-build-version button { min-height:44px; padding:8px 12px; color:var(--arcade-dialog-muted); background:transparent; border:1px solid transparent; border-radius:8px; font:700 12px/1.4 system-ui,sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.arcade-build-version button:hover { color:var(--arcade-nav-ink); border-color:var(--arcade-nav-line); }
.arcade-build-version button:focus-visible,.arcade-release-dialog button:focus-visible { outline:3px solid #d76b45; outline-offset:2px; }
.arcade-release-dialog { width:min(680px,calc(100% - 28px)); max-height:min(760px,calc(100vh - 40px)); }
.arcade-release-dialog form { display:grid; gap:18px; padding:24px; font:15px/1.5 system-ui,sans-serif; }
.arcade-release-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.arcade-release-dialog :is(h2,h3,p,ul) { margin:0; }
.arcade-release-dialog h2 { margin-top:2px; font-size:clamp(23px,5vw,30px); line-height:1.15; }
.arcade-release-dialog header small { color:#83e6c3; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.arcade-release-dialog header button { width:44px; height:44px; padding:0; color:var(--arcade-nav-ink); background:var(--arcade-dialog-field); border:0; border-radius:50%; font-size:24px; cursor:pointer; }
.arcade-release-summary { color:var(--arcade-dialog-muted); }
.arcade-release-sections { display:grid; gap:14px; }
.arcade-release-sections section { padding:15px; background:var(--arcade-dialog-field); border:1px solid var(--arcade-nav-line); border-radius:12px; }
.arcade-release-sections h3 { margin-bottom:8px; font-size:17px; }
.arcade-release-sections ul { display:grid; gap:7px; padding-left:22px; color:var(--arcade-dialog-muted); }
.arcade-release-actions { display:flex; justify-content:flex-end; }
.arcade-release-actions button { min-height:44px; padding:10px 16px; color:#10271f; background:#83e6c3; border:0; border-radius:9px; font-weight:800; cursor:pointer; }
@media(max-width:520px){.arcade-release-dialog form{padding:18px}.arcade-release-dialog{max-height:calc(100vh - 24px)}}
.modern-game :is(button,select,.board,.board-wrap,.tetris-stage),.classic-game :is(button,canvas,#canvas) { touch-action:manipulation; }
.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;pointer-events:none}.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{top:max(118px,calc(env(safe-area-inset-top) + 84px));right:10px;bottom:auto;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)}}

/* Appearance picker and experience-level shell tokens. */
:root { --arcade-shell-width:1120px; --arcade-shell-radius:20px; --arcade-shell-gap:24px; }
:root[data-arcade-theme="cabinet"] { --arcade-shell-width:1280px; --arcade-shell-radius:4px; --arcade-shell-gap:14px; --arcade-nav-bg:#15182a; --arcade-nav-ink:#fff4d0; --arcade-nav-line:#ffcf4a66; --arcade-dialog-bg:#1b1f35; --arcade-dialog-field:#101321; --arcade-dialog-muted:#b9b7c9; }
:root[data-arcade-theme="cabinet"][data-color-mode="light"] { --arcade-nav-bg:#382c42; --arcade-dialog-bg:#fff3d6; --arcade-dialog-field:#ead8b1; --arcade-dialog-muted:#65566a; }
:root[data-arcade-theme="cabinet"][data-color-mode="light"] .arcade-dialog { --arcade-nav-ink:#382c42; }
:root[data-arcade-theme="calm"] { --arcade-shell-width:1040px; --arcade-shell-radius:2px; --arcade-shell-gap:32px; --arcade-nav-bg:rgba(238,244,241,.96); --arcade-nav-ink:#223a33; --arcade-nav-line:#52706840; --arcade-dialog-bg:#f8fbf9; --arcade-dialog-field:#e5eeea; --arcade-dialog-muted:#61746d; }
:root[data-arcade-theme="calm"][data-color-mode="dark"] { --arcade-nav-bg:rgba(17,25,23,.96); --arcade-nav-ink:#e5efeb; --arcade-dialog-bg:#18231f; --arcade-dialog-field:#101815; --arcade-dialog-muted:#9fb0a9; }
.arcade-topbar-inner { width:min(var(--arcade-shell-width),100%); }
[data-arcade-theme="cabinet"] .arcade-topbar { padding-block:8px; background-image:linear-gradient(90deg,#ff3ea5 0 5px,transparent 5px); text-transform:uppercase; letter-spacing:.04em; }
[data-arcade-theme="cabinet"] .arcade-home-mark { border-radius:2px; box-shadow:3px 3px 0 #ffcf4a; }
[data-arcade-theme="calm"] .arcade-topbar { box-shadow:none; }
[data-arcade-theme="calm"] .arcade-home-mark { color:var(--arcade-nav-ink); background:transparent; border:1px solid var(--arcade-nav-line); border-radius:50%; box-shadow:none; }
.arcade-appearance-dialog { width:min(760px,calc(100% - 28px)); }
.arcade-appearance-dialog form { padding:24px; font:15px/1.45 system-ui,sans-serif; }
.arcade-appearance-dialog header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.arcade-appearance-dialog :is(h2,p) { margin:0; }.arcade-appearance-dialog h2{font-size:28px}.arcade-appearance-dialog header small{color:var(--arcade-dialog-muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.arcade-appearance-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}
.arcade-appearance-intro{padding:8px 0 20px;color:var(--arcade-dialog-muted)}
.arcade-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.arcade-theme-grid>button{display:grid;gap:9px;min-width:0;padding:12px;color:var(--arcade-nav-ink);background:var(--arcade-dialog-field);border:2px solid transparent;border-radius:14px;text-align:left;cursor:pointer}.arcade-theme-grid>button[aria-pressed="true"]{border-color:#83e6c3;box-shadow:0 0 0 2px #83e6c344}.arcade-theme-grid strong{font-size:16px}.arcade-theme-grid small{color:var(--arcade-dialog-muted);line-height:1.35}
.arcade-theme-preview{display:grid;grid-template-columns:1fr 1.5fr;grid-template-rows:1fr 1fr;gap:4px;height:82px;padding:8px;background:#f7f3eb;border-radius:9px}.arcade-theme-preview i{display:block;background:#ff4fa3;border:2px solid #20352f;border-radius:6px}.arcade-theme-preview i:first-child{grid-row:1/-1;background:#6c3bff}.preview-cabinet{gap:3px;background:#090b13;border-radius:2px}.preview-cabinet i{background:#16e0bd;border-color:#ffcf4a;border-radius:0}.preview-cabinet i:first-child{background:#ff3ea5}.preview-calm{gap:8px;padding:12px;background:#eef4f1;border-radius:0}.preview-calm i{background:#cfddd7;border:1px solid #527068;border-radius:0}.preview-calm i:first-child{background:#7e9f94}
.arcade-appearance-dialog fieldset{margin:20px 0 0;padding:0;border:0}.arcade-appearance-dialog legend{margin-bottom:8px;font-weight:800}.arcade-color-modes{display:flex;width:max-content;max-width:100%;padding:4px;background:var(--arcade-dialog-field);border-radius:10px}.arcade-color-modes button{padding:9px 14px;color:var(--arcade-dialog-muted);background:transparent;border:0;border-radius:7px;font-weight:800;cursor:pointer}.arcade-color-modes button[aria-checked="true"]{color:var(--arcade-nav-ink);background:var(--arcade-dialog-bg);box-shadow:0 2px 8px var(--arcade-dialog-shadow)}.arcade-appearance-status{min-height:1.4em;margin-top:12px!important;color:var(--arcade-dialog-muted);font-size:13px}
.arcade-audio-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.arcade-audio-levels label{display:grid;gap:8px;padding:12px;color:var(--arcade-dialog-muted);background:var(--arcade-dialog-field);border-radius:10px;font-weight:800}.arcade-audio-levels input{width:100%;min-height:32px;accent-color:#358b75}.arcade-audio-levels input:focus-visible{outline:3px solid #d76b45;outline-offset:3px}.arcade-audio-status{min-height:1.4em;margin:8px 0 0;color:var(--arcade-dialog-muted);font-size:13px}
.arcade-audio-dialog{width:min(520px,calc(100% - 32px))}.arcade-audio-dialog form{display:grid;gap:18px;padding:24px;font:15px/1.45 system-ui,sans-serif}.arcade-audio-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.arcade-audio-dialog :is(h2,p){margin:0}.arcade-audio-dialog h2{font-size:28px}.arcade-audio-dialog header small{color:var(--arcade-dialog-muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.arcade-audio-dialog header>button{width:44px;height:44px;padding:0;color:var(--arcade-nav-ink);background:var(--arcade-dialog-field);border:0;border-radius:50%;font-size:24px;cursor:pointer}.arcade-audio-presets,.arcade-audio-actions{display:flex;flex-wrap:wrap;gap:8px}.arcade-audio-presets button,.arcade-audio-actions button{min-height:44px;padding:9px 12px;color:var(--arcade-nav-ink);background:var(--arcade-dialog-field);border:1px solid var(--arcade-nav-line);border-radius:9px;font:800 13px system-ui;cursor:pointer}.arcade-audio-presets button:hover,.arcade-audio-actions button:hover{background:#83e6c3;color:#10271f}.arcade-audio-levels label span{display:flex;align-items:center;justify-content:space-between;gap:10px}.arcade-audio-levels output{color:var(--arcade-nav-ink);font-variant-numeric:tabular-nums}.arcade-audio-dialog button:focus-visible{outline:3px solid #d76b45;outline-offset:2px}
.arcade-appearance-footer{display:flex;align-items:center;justify-content:space-between;gap:14px}.arcade-appearance-reset{padding:8px 10px;color:var(--arcade-nav-ink);background:transparent;border:1px solid var(--arcade-nav-line);border-radius:8px;font-weight:700;cursor:pointer}
@media(max-width:650px){.arcade-theme-grid{grid-template-columns:1fr}.arcade-theme-grid>button{grid-template-columns:110px 1fr}.arcade-theme-grid>button small{grid-column:2}.arcade-theme-preview{grid-row:1/3}.arcade-appearance-dialog form,.arcade-audio-dialog form{padding:18px}.arcade-audio-levels{grid-template-columns:1fr}}

/* Modern pixel-arcade identity. The stored `playful` id remains stable while
   the experience is presented to players as Pixel. */
@font-face{font-family:"Arcade Pixel";src:url("fonts/Silkscreen-Regular.ttf") format("truetype");font-display:swap;font-style:normal;font-weight:400}
:root{--pixel-font:"Arcade Pixel",ui-monospace,"SFMono-Regular",Consolas,monospace;--pixel-body:ui-monospace,"SFMono-Regular",Consolas,monospace;--pixel-step:4px;--pixel-shadow:4px 4px 0 var(--arcade-nav-line);--pixel-speed:140ms}
:root[data-arcade-theme="playful"]{--arcade-shell-radius:0;--arcade-nav-bg:#111933;--arcade-nav-ink:#fff4d6;--arcade-nav-line:#6ef2d0;--arcade-dialog-bg:#151f3d;--arcade-dialog-field:#0b132b;--arcade-dialog-muted:#b8c4e0;--arcade-dialog-shadow:#030712b8}
:root[data-arcade-theme="playful"][data-color-mode="light"]{--arcade-nav-bg:#fff4d6;--arcade-nav-ink:#192541;--arcade-nav-line:#192541;--arcade-dialog-bg:#fff9e8;--arcade-dialog-field:#f2dfaa;--arcade-dialog-muted:#536079;--arcade-dialog-shadow:#19254138}
:root[data-arcade-theme="cabinet"]{--pixel-shadow:4px 4px 0 #ffcf4a}
[data-arcade-theme="playful"] .arcade-topbar,[data-arcade-theme="cabinet"] .arcade-topbar{border-bottom:3px solid var(--arcade-nav-line);box-shadow:none;font-family:var(--pixel-body);image-rendering:pixelated}
[data-arcade-theme="playful"] .arcade-topbar::after,[data-arcade-theme="cabinet"] .arcade-topbar::after{position:absolute;right:0;bottom:-6px;left:0;height:3px;background:repeating-linear-gradient(90deg,var(--arcade-nav-line) 0 12px,transparent 12px 20px);content:"";pointer-events:none}
[data-arcade-theme="playful"] .arcade-home-mark,[data-arcade-theme="cabinet"] .arcade-home-mark{border-radius:0;box-shadow:var(--pixel-shadow);clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 4px,4px 4px)}
[data-arcade-theme="playful"] .arcade-home>span:last-child,[data-arcade-theme="cabinet"] .arcade-home>span:last-child{font-family:var(--pixel-font);font-size:12px;letter-spacing:-.04em;text-transform:uppercase}
[data-arcade-theme="playful"] .arcade-account a,[data-arcade-theme="playful"] .arcade-account button,[data-arcade-theme="cabinet"] .arcade-account a,[data-arcade-theme="cabinet"] .arcade-account button{min-height:38px;border:2px solid transparent;border-radius:0;font-family:var(--pixel-body);font-size:12px;font-weight:900;text-transform:uppercase;transition:transform var(--pixel-speed),box-shadow var(--pixel-speed)}
[data-arcade-theme="playful"] .arcade-account button,[data-arcade-theme="cabinet"] .arcade-account button{border-color:var(--arcade-nav-line);box-shadow:3px 3px 0 color-mix(in srgb,var(--arcade-nav-line) 75%,#000)}
[data-arcade-theme="playful"] .arcade-account :is(a,button):hover,[data-arcade-theme="cabinet"] .arcade-account :is(a,button):hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--arcade-nav-line)}
[data-arcade-theme="playful"] :is(.arcade-dialog,.result-share-dialog),[data-arcade-theme="cabinet"] :is(.arcade-dialog,.result-share-dialog){border:3px solid var(--arcade-nav-line);border-radius:0;box-shadow:8px 8px 0 color-mix(in srgb,var(--arcade-nav-line) 75%,#000),0 24px 80px var(--arcade-dialog-shadow)}
[data-arcade-theme="playful"] :is(.arcade-dialog,.result-share-dialog) h2,[data-arcade-theme="playful"] .achievement-card strong,[data-arcade-theme="cabinet"] :is(.arcade-dialog,.result-share-dialog) h2,[data-arcade-theme="cabinet"] .achievement-card strong{font-family:var(--pixel-font);letter-spacing:-.05em}
[data-arcade-theme="playful"] :is(.arcade-theme-grid>button,.arcade-audio-levels label,.achievement-card,.result-share-image-wrap),[data-arcade-theme="cabinet"] :is(.arcade-theme-grid>button,.arcade-audio-levels label,.achievement-card,.result-share-image-wrap){border-radius:0}
[data-arcade-theme="playful"] .arcade-theme-grid>button[aria-pressed="true"],[data-arcade-theme="cabinet"] .arcade-theme-grid>button[aria-pressed="true"]{box-shadow:4px 4px 0 var(--arcade-nav-line)}
.preview-playful{gap:3px;padding:9px;background:#0a1020;border-radius:0;image-rendering:pixelated}.preview-playful i{background:#ff4fa3;border-color:#fff4d6;border-radius:0;box-shadow:2px 2px 0 #6ef2d0}.preview-playful i:first-child{background:#6c5cff}
[data-arcade-theme="playful"] :is(.achievement-icon,.achievement-toast,.top-score-toast,.arcade-install-hint),[data-arcade-theme="cabinet"] :is(.achievement-icon,.achievement-toast,.top-score-toast,.arcade-install-hint){border-radius:0;box-shadow:5px 5px 0 var(--arcade-nav-line)}
[data-arcade-theme="playful"] :is(.achievement-toast,.top-score-toast) small,[data-arcade-theme="playful"] .top-score-toast strong,[data-arcade-theme="cabinet"] :is(.achievement-toast,.top-score-toast) small,[data-arcade-theme="cabinet"] .top-score-toast strong{font-family:var(--pixel-font)}
@media(max-width:520px){[data-arcade-theme="playful"] .arcade-home>span:last-child,[data-arcade-theme="cabinet"] .arcade-home>span:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){[data-arcade-theme] .arcade-account :is(a,button){transition:none}}

/* Authenticated, cross-device game saves. */
.arcade-saves-dialog{width:min(820px,calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:min(820px,calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));overflow:auto}.arcade-saves-content{display:grid;gap:16px;padding:calc(22px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));font:14px/1.45 system-ui,sans-serif}.arcade-saves-content>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.arcade-saves-content :is(h2,h3,p){margin:0}.arcade-saves-content h2{font-size:28px}.arcade-saves-content header small,.arcade-save-slot small{color:var(--arcade-dialog-muted);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.arcade-saves-content header>button{width:44px;height:44px;padding:0;color:var(--arcade-nav-ink);background:var(--arcade-dialog-field);border:0;border-radius:50%;font-size:24px;cursor:pointer}.arcade-save-create{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:12px;align-items:end;padding:14px;background:var(--arcade-dialog-field);border:1px solid var(--arcade-nav-line);border-radius:13px}.arcade-save-create label{display:grid;gap:5px;color:var(--arcade-dialog-muted);font-weight:700}.arcade-save-create input{min-height:44px;padding:9px 11px;color:var(--arcade-nav-ink);background:var(--arcade-dialog-bg);border:1px solid var(--arcade-nav-line);border-radius:8px;font:inherit}.arcade-save-create button,.arcade-save-slot-actions button,.arcade-leave-dialog button{min-height:44px;padding:9px 13px;color:#10271f;background:#83e6c3;border:1px solid transparent;border-radius:9px;font-weight:800;cursor:pointer}.arcade-save-create button:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.55}.arcade-save-status{min-height:1.45em;color:var(--arcade-dialog-muted)}.arcade-save-slots{display:grid;gap:11px}.arcade-save-slot{display:grid;grid-template-columns:144px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px;color:var(--arcade-nav-ink);background:var(--arcade-dialog-field);border:1px solid var(--arcade-nav-line);border-radius:13px}.arcade-save-slot.is-active{border:2px solid #83e6c3}.arcade-save-slot.is-active h3::after{margin-left:8px;padding:3px 6px;color:#10271f;background:#83e6c3;border-radius:5px;content:'Active';font-size:9px;text-transform:uppercase}.arcade-save-preview{display:grid;width:144px;aspect-ratio:16/9;place-items:center;overflow:hidden;color:var(--arcade-dialog-muted);background:var(--arcade-dialog-bg);border-radius:8px;font-size:28px}.arcade-save-preview img{width:100%;height:100%;object-fit:cover}.arcade-save-slot h3{overflow:hidden;font-size:17px;text-overflow:ellipsis;white-space:nowrap}.arcade-save-slot p{margin:4px 0;color:var(--arcade-dialog-muted);font-size:12px}.arcade-save-slot-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:190px}.arcade-save-slot-actions .secondary,.arcade-leave-dialog .secondary{color:var(--arcade-nav-ink);background:var(--arcade-dialog-bg);border-color:var(--arcade-nav-line)}.arcade-saves-dialog :is(button,input):focus-visible,.arcade-leave-dialog button:focus-visible{outline:3px solid #d76b45;outline-offset:2px}.arcade-leave-dialog{width:min(520px,calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto}.arcade-leave-dialog>div{display:grid;gap:14px;padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));color:var(--arcade-nav-ink);font:15px/1.5 system-ui,sans-serif}.arcade-leave-dialog :is(h2,p){margin:0}.arcade-leave-dialog>div>small{color:var(--arcade-dialog-muted);font-weight:800;text-transform:uppercase;letter-spacing:.1em}.arcade-leave-dialog>div>div{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.arcade-leave-status{min-height:1.4em;color:var(--arcade-dialog-muted)}
[data-arcade-theme="playful"] :is(.arcade-save-slot,.arcade-save-create,.arcade-save-preview),[data-arcade-theme="cabinet"] :is(.arcade-save-slot,.arcade-save-create,.arcade-save-preview){border-radius:0}
@media(max-width:650px){.arcade-saves-content{padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}.arcade-save-create{grid-template-columns:1fr}.arcade-save-slot{grid-template-columns:100px minmax(0,1fr)}.arcade-save-preview{width:100px}.arcade-save-slot-actions{grid-column:1/-1;max-width:none;justify-content:flex-start}.arcade-save-slot-actions button{flex:1}.arcade-leave-dialog>div{padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left))}.arcade-leave-dialog>div>div button{flex:1 1 150px}}