:root {
    color-scheme: dark;
    --black: #05070d;
    --ink: #edf8ff;
    --muted: #94a7b5;
    --cyan: #00d9ff;
    --yellow: #ffe600;
    --red: #ff3156;
    --violet: #d24dff;
    --line: #345266;
    --pixel-font: "Lucida Console", "Courier New", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
    margin: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--black);
    color: var(--ink);
    font-family: var(--pixel-font);
    font-weight: 700;
    letter-spacing: .06em;
    -webkit-user-select: none;
    user-select: none;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.arcade-shell {
    position: relative;
    isolation: isolate;
    width: min(100%, 720px);
    min-height: calc(100dvh - 52px);
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 16px max(14px, env(safe-area-inset-left));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}
.arcade-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    background-image: radial-gradient(circle at 14% 20%, #d7fbff 0 1px, transparent 1.5px), radial-gradient(circle at 72% 11%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 88% 59%, #70caff 0 1px, transparent 1.5px), radial-gradient(circle at 23% 78%, #fff 0 1px, transparent 1.5px);
    background-size: 147px 133px, 193px 177px, 167px 211px, 229px 167px;
}
.cabinet-marquee { position: relative; padding: 2px 56px 10px 2px; text-align: center; border-bottom: 2px solid var(--line); }
.cabinet-marquee p, .cabinet-marquee h1 { margin: 0; }
.cabinet-marquee p { color: var(--cyan); font-size: clamp(.65rem, 2.4vw, .82rem); }
.cabinet-marquee h1 { color: var(--yellow); font-size: clamp(1.35rem, 6.8vw, 2.2rem); line-height: 1.1; text-shadow: 3px 3px 0 #60218a; }
.sound-toggle { position: absolute; right: 0; top: 4px; min-height: 34px; padding: 6px 7px; color: var(--cyan); background: #060a13; border: 1px solid var(--cyan); border-radius: 0; font-size: .59rem; cursor: pointer; }
.sound-toggle:focus-visible, .arcade-button:focus-visible, .touch-button:focus-visible, .close-button:focus-visible, input:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.screen { min-height: 0; width: 100%; }
.landing-screen, .game-over-screen { display: grid; place-items: center; text-align: center; }
.landing-copy, .game-over-copy { width: min(100%, 430px); padding: 30px 0; }
.eyebrow { margin: 0 0 18px; color: var(--violet); font-size: clamp(.7rem, 3vw, .9rem); }
.eyebrow--red { color: var(--red); font-size: clamp(1.1rem, 5vw, 1.55rem); text-shadow: 2px 2px #701328; }
.target-callout { margin: 0 0 30px; color: var(--ink); font-size: clamp(.78rem, 3.4vw, 1rem); line-height: 1.75; }
.target-callout span { color: var(--yellow); font-size: 1.35em; }
.maintenance-message { width: min(100%, 330px); margin: -16px auto 22px; padding: 10px; color: #ffe9a0; background: #251d08; border: 1px solid var(--yellow); font-size: .61rem; line-height: 1.6; }
.button-stack { display: grid; width: min(100%, 300px); gap: 11px; margin: 0 auto; }
.arcade-button { min-height: 47px; padding: 10px 16px; color: var(--ink); background: #101827; border: 2px solid #7793a4; border-radius: 0; box-shadow: 4px 4px 0 #000; cursor: pointer; font-size: clamp(.72rem, 3vw, .88rem); letter-spacing: .12em; }
.arcade-button:hover { border-color: var(--ink); background: #162238; }
.arcade-button:active, .touch-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.arcade-button--primary { color: #171100; background: var(--yellow); border-color: #fff6a5; }
.arcade-button--cyan { color: #001419; background: var(--cyan); border-color: #b9f8ff; }
.controls-hint, .play-hint { margin: 24px 0 0; color: var(--muted); font-size: clamp(.52rem, 2vw, .65rem); line-height: 1.85; }
.game-screen { display: grid; align-content: center; justify-items: center; gap: 11px; padding: 10px 0 4px; touch-action: none; }
.game-frame { position: relative; width: min(92vw, 448px, calc((100dvh - 238px) * .875)); min-width: 210px; aspect-ratio: 7 / 8; border: 3px solid #18384d; background: #000; box-shadow: 0 0 0 2px #000, 7px 7px 0 #000; }
canvas { display: block; width: 100%; height: 100%; background: #000; image-rendering: pixelated; image-rendering: crisp-edges; }
.unlock-toast { position: absolute; left: 50%; top: 43%; width: max-content; max-width: 92%; margin: 0; padding: 9px 12px; transform: translateX(-50%); color: #151000; background: var(--yellow); border: 2px solid #fff8bb; font-size: clamp(.62rem, 2.9vw, .86rem); text-align: center; box-shadow: 4px 4px 0 #000; }
.touch-controls { width: min(100%, 448px); display: flex; align-items: stretch; justify-content: space-between; gap: 24px; padding: 0 2px; }
.move-controls { display: flex; gap: 8px; }
.touch-button { min-width: 71px; min-height: 59px; padding: 8px; color: var(--ink); background: #15243a; border: 2px solid #7390a2; border-radius: 0; box-shadow: 4px 4px 0 #000; cursor: pointer; touch-action: none; font-size: clamp(.62rem, 2.7vw, .78rem); }
.touch-button--fire { min-width: 124px; color: #280008; background: var(--red); border-color: #ffb7c1; }
.score-label { margin: 0; color: var(--muted); font-size: .75rem; }
.final-score { margin: 7px 0 34px; color: var(--yellow); font-size: clamp(2.2rem, 12vw, 3.5rem); text-shadow: 3px 3px #522400; }
.cache-status { margin: 0 0 22px; font-size: clamp(.7rem, 3vw, .9rem); }
.cache-status span[data-status="unlocked"] { color: var(--cyan); }
.cache-status span[data-status="locked"] { color: var(--red); }
.target-reminder { margin: 0 0 25px; color: var(--yellow); font-size: clamp(.57rem, 2.5vw, .72rem); }
.score-submitted { margin: 0 0 22px; color: var(--cyan); font-size: clamp(.7rem, 3vw, .9rem); }
.score-form { width: min(100%, 300px); display: grid; gap: 10px; margin: 20px auto 0; text-align: left; }
.score-form label, .form-message { color: var(--muted); font-size: .62rem; line-height: 1.5; }
.score-form input { min-height: 44px; padding: 8px; color: var(--ink); background: #080d18; border: 2px solid var(--line); border-radius: 0; text-transform: none; }
.form-message { min-height: 18px; margin: 0; color: var(--cyan); text-align: center; }
.overlay-panel { position: fixed; z-index: 4; inset: 0; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom)); background: rgb(0 0 0 / .87); }
.panel-content { position: relative; width: min(100%, 520px); max-height: calc(100dvh - 30px); overflow: auto; padding: 26px 18px 20px; background: #090e19; border: 2px solid var(--cyan); box-shadow: 7px 7px 0 #000; }
.panel-content h2 { margin: 0; color: var(--yellow); text-align: center; font-size: clamp(1rem, 4.5vw, 1.45rem); }
.panel-meta, .prototype-note { color: var(--muted); font-size: .58rem; line-height: 1.5; text-align: center; }
.panel-meta { margin: 10px 0 14px; color: var(--cyan); }
.prototype-note { margin: 17px 0 0; }
.close-button { position: absolute; top: 5px; right: 6px; width: 34px; height: 34px; color: var(--ink); background: transparent; border: 0; font-size: 1.8rem; cursor: pointer; }
table { width: 100%; border-collapse: collapse; font-size: clamp(.58rem, 2.4vw, .76rem); }
th, td { padding: 9px 5px; border-bottom: 1px solid #24394c; text-align: left; }
th { color: var(--cyan); font-size: .7em; }
td:first-child { width: 17%; color: var(--yellow); }
td:nth-child(2) { overflow-wrap: anywhere; }
.score-cell { width: 28%; text-align: right; color: var(--ink); white-space: nowrap; }
.empty-leaderboard { color: var(--muted); text-align: center; }
.reward-content { text-align: center; }
.coordinates-label { margin: 25px 0 10px; color: var(--muted); font-size: .62rem; }
.coordinate { margin: 8px 0; color: var(--cyan); font-size: clamp(1rem, 4.6vw, 1.45rem); letter-spacing: .02em; }
.attribution { min-height: 28px; padding: 5px 12px max(7px, env(safe-area-inset-bottom)); color: #71818e; font: 600 .5rem/1.4 var(--pixel-font); letter-spacing: .03em; text-align: center; }
.attribution a { color: #8fbfd1; }
[hidden] { display: none !important; }
@media (min-width: 600px) { .arcade-shell { min-height: calc(100dvh - 32px); } .game-frame { width: min(62vw, 448px, calc((100dvh - 210px) * .875)); } .landing-copy, .game-over-copy { padding: 46px 0; } }
@media (max-height: 640px) { .cabinet-marquee { padding-bottom: 5px; } .cabinet-marquee p { font-size: .55rem; } .cabinet-marquee h1 { font-size: 1.15rem; } .game-screen { gap: 6px; padding-top: 4px; } .game-frame { width: min(74vw, 350px, calc((100dvh - 170px) * .875)); } .touch-button { min-height: 45px; } .play-hint { margin-top: 5px; } }