:root {
  color-scheme: dark;
  --ink: #040805;
  --surface: #07110b;
  --surface-2: #0b1a11;
  --surface-3: #10251a;
  --lime: #a9ff39;
  --lime-dark: #4c8c22;
  --mint: #66e3c4;
  --white: #efffe9;
  --muted: #88a58e;
  --red: #ff4f64;
  --gold: #ffd55b;
  --line: rgba(169, 255, 57, .2);
  --pixel: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --readable: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--ink); }
body { margin: 0; min-height: 100vh; color: var(--white); background:
  radial-gradient(circle at 50% -20%, #193822 0, #07110b 42%, #020503 100%);
  font-family: var(--readable); }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.arcade-app { min-height: 100vh; display: grid; place-items: center; padding: clamp(8px, 1.3vw, 20px); }
.game-shell { width: min(96vw, 1440px); border: 1px solid #22462c; background: rgba(4, 10, 6, .94); box-shadow: 0 30px 90px #000, inset 0 0 0 1px rgba(169,255,57,.05); }
.shell-bar, .utility-bar { min-height: 52px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid #183522; background: linear-gradient(180deg, #0c1b12, #07110b); }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font: 900 12px var(--pixel); letter-spacing: .12em; }
.brand-mark { width: 13px; height: 13px; border: 3px solid var(--lime); box-shadow: 5px 0 0 #295c33; transform: rotate(45deg); }
.shell-status { justify-self: center; color: var(--muted); font: 800 9px var(--pixel); letter-spacing: .15em; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.icon-button { justify-self: end; width: 34px; height: 30px; border: 1px solid #31563a; color: var(--white); background: #0a1710; font: 900 11px var(--pixel); cursor: pointer; }

.game-stage { position: relative; }
.hud { min-height: 72px; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 10px clamp(12px, 2vw, 30px); border-bottom: 1px solid #1e3c27; background: rgba(5, 14, 8, .97); }
.hud:not([hidden]) { display: grid; }
.hud-stat { display: flex; flex-direction: column; gap: 3px; }
.hud-stat span { color: var(--muted); font: 800 9px var(--pixel); letter-spacing: .17em; }
.hud-stat strong { color: var(--white); font: 900 clamp(18px, 2vw, 28px) var(--pixel); letter-spacing: .06em; }
.hud-time { align-items: center; text-align: center; }
.hud-time small { color: var(--mint); font: 900 8px var(--pixel); letter-spacing: .14em; }
.hud-lives { align-items: flex-end; }
.life-pips { display: flex; gap: 8px; align-items: center; min-height: 25px; }
.life-pips i { width: 20px; height: 15px; border: 2px solid var(--lime); background: var(--lime); clip-path: polygon(0 0, 100% 0, 100% 65%, 75% 65%, 75% 100%, 25% 100%, 25% 65%, 0 65%); box-shadow: 0 0 10px rgba(169,255,57,.25); }
.life-pips i.is-lost { border-color: #334239; background: #18231b; box-shadow: none; }
.life-pips.large i { width: 28px; height: 21px; }

.canvas-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #030704; isolation: isolate; }
#game-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.canvas-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,.55); }
.runner-asset-status { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; padding: 28px; color: var(--lime); background: #030704; font: 900 12px var(--pixel); letter-spacing: .16em; text-align: center; }
.runner-asset-status.is-error { color: var(--red); }
.canvas-frame.is-hit { animation: hit-shake 130ms steps(2, end); }
.canvas-frame.is-busted::after { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; animation: busted-flash 420ms ease-out forwards; }

.game-screen { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: clamp(12px, 2vw, 28px); visibility: hidden; opacity: 0; pointer-events: none; background: rgba(2, 7, 4, .58); transition: opacity 180ms ease, visibility 180ms; }
.game-screen.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
.main-menu { grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); align-content: center; gap: clamp(34px, 5vw, 90px); padding: clamp(38px, 5.5vw, 88px); background: linear-gradient(90deg, rgba(3,10,6,.9), rgba(3,10,6,.48) 54%, rgba(3,10,6,.88)); }
.hero-lockup { z-index: 1; grid-column: 1; align-self: center; max-width: 760px; }
.overline { margin: 0 0 10px; color: var(--lime); font: 900 clamp(9px, 1vw, 13px) var(--pixel); letter-spacing: .27em; }
h1, h2 { margin: 0; font-family: var(--pixel); font-weight: 950; line-height: .9; text-transform: uppercase; }
h1 { max-width: 760px; color: var(--white); font-size: clamp(64px, 8vw, 118px); letter-spacing: -.075em; line-height: .78; text-wrap: balance; text-shadow: 8px 0 0 #18331f, 0 8px 0 #07100a, 8px 8px 0 #07100a, 0 0 25px rgba(169,255,57,.08); animation: title-glow 5s ease-in-out infinite; }
h2 { color: var(--white); font-size: clamp(34px, 4.4vw, 66px); letter-spacing: -.04em; }
.arcade-title { margin: 24px 0 0; font: 950 clamp(28px, 3.5vw, 50px)/1 var(--pixel); letter-spacing: -.04em; text-transform: uppercase; }
.arcade-title span { display: inline-block; padding: 2px 5px; color: #071008; background: var(--lime); box-shadow: 5px 0 0 #1c6d58, 0 5px 0 #ffd55b, 5px 5px 0 #a12b3c; }
.arcade-title span + span { margin-left: 10px; color: #06100f; background: var(--mint); box-shadow: 5px 0 0 #548e25, 0 5px 0 #e59c2f, 5px 5px 0 #7e2634; }
.subtitle { margin: 19px 0 0; color: var(--mint); font: 900 clamp(11px, 1.2vw, 18px) var(--pixel); letter-spacing: .22em; }
.hero-rule { width: min(420px, 76%); height: 4px; margin: 28px 0 22px; background: linear-gradient(90deg, var(--lime), transparent); }
.hero-copy { margin: 7px 0; color: var(--white); font: 900 clamp(13px, 1.5vw, 20px) var(--pixel); letter-spacing: .12em; }
.hero-copy.secondary { color: var(--lime); }
.menu-actions { z-index: 1; grid-column: 2; align-self: center; display: grid; gap: 14px; width: min(440px, 100%); }

.game-button, .text-button, .toggle-button, .utility-button { position: relative; border: 0; cursor: pointer; font-family: var(--pixel); font-weight: 900; letter-spacing: .1em; }
.game-button { min-height: 58px; padding: 16px 24px; border: 1px solid #386546; color: var(--white); background: linear-gradient(180deg, rgba(15,37,24,.96), rgba(7,20,12,.96)); text-align: left; font-size: 13px; box-shadow: inset 4px 0 0 transparent; transition: transform 90ms ease, border-color 90ms, color 90ms, background 90ms; }
.game-button::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .55; }
.game-button:hover, .game-button:focus-visible { outline: 0; border-color: var(--lime); color: var(--lime); background: #10261a; box-shadow: inset 4px 0 0 var(--lime), 0 0 18px rgba(169,255,57,.08); transform: translateX(3px); }
.game-button:active { transform: translate(3px, 2px); }
.game-button.primary { border-color: var(--lime); color: #071008; background: var(--lime); box-shadow: inset 0 -5px 0 var(--lime-dark); }
.game-button.primary:hover, .game-button.primary:focus-visible { color: #020503; background: #c0ff70; box-shadow: inset 0 -5px 0 #629f2e, 0 0 22px rgba(169,255,57,.25); }
.game-button:disabled { cursor: not-allowed; opacity: .45; filter: grayscale(.4); transform: none; }
.game-button.compact { width: min(220px, 100%); min-height: 42px; margin-top: 18px; padding: 10px 16px; text-align: center; }
.game-button.compact::after { display: none; }
.text-button { padding: 10px 14px; color: var(--muted); background: transparent; }
.text-button:hover, .text-button:focus-visible { outline: 0; color: var(--lime); text-decoration: underline; text-underline-offset: 4px; }

.screen-panel { width: min(620px, 94%); max-height: 96%; overflow: auto; padding: clamp(20px, 3.2vw, 44px); border: 1px solid #315b3b; background: linear-gradient(145deg, rgba(8,24,14,.97), rgba(3,12,7,.98)); box-shadow: 14px 14px 0 rgba(0,0,0,.46), inset 0 0 0 1px rgba(169,255,57,.06); }
.screen-panel h2 { margin-bottom: 24px; }
.wide-panel { width: min(900px, 96%); }
.narrow-panel { text-align: center; }
.lives-callout { display: grid; justify-content: center; gap: 8px; margin: 22px 0 18px; color: var(--lime); font: 900 12px var(--pixel); letter-spacing: .15em; }
.control-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.control-cards > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; padding: 14px; border: 1px solid #31553b; background: #08150d; text-align: left; }
.control-icon, .guide-icon { display: grid; place-items: center; color: #071008; background: var(--lime); font: 900 18px var(--pixel); }
.control-icon { grid-row: 1 / 3; width: 38px; height: 38px; }
.control-cards strong { font: 900 12px var(--pixel); }
.control-cards small { color: var(--muted); font: 800 9px var(--pixel); }
.goal-copy { display: grid; gap: 6px; margin: 20px 0; font-family: var(--pixel); }
.goal-copy strong { color: var(--white); font-size: 12px; }.goal-copy span { color: var(--mint); font-size: 9px; letter-spacing: .08em; }
.heist-turnstile { min-height: 65px; margin: 0 auto 12px; }
.heist-turnstile[hidden] { display: none; }
.button-row { display: grid; gap: 8px; width: min(330px, 100%); margin: 0 auto; }

.how-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.how-grid article { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; min-height: 76px; padding: 12px; border: 1px solid #244731; background: rgba(4,15,8,.8); }
.guide-icon { width: 40px; height: 40px; font-size: 13px; }.guide-icon.danger { color: white; background: #9f2538; }
.how-grid strong { color: var(--lime); font: 900 11px var(--pixel); letter-spacing: .09em; }.how-grid p { margin: 5px 0 0; color: #b3c9b7; font-size: 12px; }
.loot-icon { width: 24px; height: 24px; margin-left: 8px; transform: rotate(45deg); box-shadow: inset 5px 5px 0 rgba(255,255,255,.35); }.loot-icon.cash { background: #7bdd3e; }.loot-icon.gold { background: #f1c33f; }.loot-icon.diamond { background: #56e4ec; }

.leaderboard-panel { display: flex; flex-direction: column; }
.leaderboard-head, .leaderboard-list li { display: grid; grid-template-columns: 84px minmax(220px, 1fr) 150px 160px; align-items: center; gap: 18px; padding: 14px 20px; }
.leaderboard-head { border-bottom: 1px solid #31543a; color: var(--muted); font: 900 11px var(--pixel); letter-spacing: .11em; }
.leaderboard-head span:nth-child(3), .leaderboard-head span:nth-child(4) { text-align: right; }
.leaderboard-list { min-height: 0; max-height: 430px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.leaderboard-list li { min-height: 54px; border-bottom: 1px solid rgba(78,117,85,.22); color: #cce0cf; font: 800 14px var(--pixel); }
.leaderboard-list li span:first-child { color: var(--muted); }
.leaderboard-list li span:last-child { text-align: right; }.leaderboard-list li strong { color: var(--lime); text-align: right; font-size: 15px; }
.leaderboard-list li.is-top-ten span:first-child { color: var(--mint); }.leaderboard-list li.is-podium span:first-child { color: var(--gold); }.leaderboard-list li.is-latest { background: rgba(102,227,196,.08); outline: 1px solid rgba(102,227,196,.3); }
.leaderboard-state { display: grid; justify-items: center; padding: 18px 0; }.leaderboard-state .game-button { margin-top: 0; }.empty-state { margin: 0; padding: 24px 10px; color: var(--muted); font: 800 10px/1.8 var(--pixel); text-align: center; white-space: pre-line; }
.leaderboard-actions { display: flex; justify-content: center; gap: 10px; }.leaderboard-actions .game-button { margin-top: 18px; }

.settings-panel { width: min(650px, 95%); }.settings-list { display: grid; gap: 2px; }.setting-row { min-height: 50px; display: grid; grid-template-columns: 1fr minmax(170px, .8fr); align-items: center; gap: 18px; padding: 8px 12px; border-bottom: 1px solid rgba(75,111,81,.25); }
.setting-row label { color: #d8eadb; font: 900 10px var(--pixel); letter-spacing: .08em; }.toggle-button { justify-self: end; min-width: 74px; padding: 8px 12px; border: 1px solid var(--lime); color: #071008; background: var(--lime); }.toggle-button[aria-pressed="false"] { border-color: #3a5340; color: #93a997; background: #101a13; }
input[type="range"] { width: 100%; accent-color: var(--lime); cursor: pointer; }

.countdown { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; color: var(--lime); background: rgba(2,7,4,.48); font: 950 clamp(80px, 18vw, 220px) var(--pixel); text-shadow: 0 0 35px rgba(169,255,57,.35); }
.countdown span { animation: count-pop 700ms cubic-bezier(.2,.8,.2,1); }
.pause-screen { background: rgba(2,7,4,.82); backdrop-filter: blur(5px); }.pause-actions { margin: 0 auto; }.results-screen { background: rgba(2,7,4,.82); }.result-panel { width: min(760px, 96%); text-align: center; }.busted-title { color: var(--red); text-shadow: 4px 4px 0 #2b0810; }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin: 18px 0; }.result-grid div { padding: 11px 5px; border: 1px solid #31543a; background: #061008; }.result-grid span { display: block; color: var(--muted); font: 800 8px var(--pixel); letter-spacing: .07em; }.result-grid strong { display: block; margin-top: 5px; color: var(--white); font: 900 16px var(--pixel); }
.score-form { display: grid; gap: 9px; margin-bottom: 14px; padding: 14px; border: 1px solid #31543a; background: rgba(3,12,7,.75); text-align: left; }.identity-fields { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 10px; }.identity-field { display: grid; gap: 6px; }.score-form label { color: var(--mint); font: 900 9px var(--pixel); letter-spacing: .1em; }.identity-field input { min-width: 0; width: 100%; padding: 13px; border: 1px solid #45644c; outline: 0; color: var(--lime); background: #030805; font: 900 12px var(--pixel); text-transform: lowercase; }.identity-field input:focus { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(169,255,57,.18); }.identity-field input[aria-invalid="true"] { border-color: var(--red); }.submit-score-button { width: 100%; min-height: 44px; }.form-message { min-height: 16px; margin: 0; color: var(--lime); font: 800 9px var(--pixel); text-align: center; }.form-message.is-error { color: var(--red); }
.start-run-message { margin-top: 10px; }
.result-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }.result-actions .game-button { min-width: 190px; text-align: center; }.result-actions .game-button::after { display: none; }

.debug-panel { display: none; padding: 10px 14px; border-top: 1px solid #31543a; color: var(--mint); background: #020805; font: 800 9px var(--pixel); }.debug-panel.is-visible { display: block; }.debug-panel > strong { display: block; margin-bottom: 8px; letter-spacing: .12em; }.debug-panel dl { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: 0; }.debug-panel dl div { min-width: 0; border-left: 1px solid #21422b; padding-left: 8px; }.debug-panel dt { color: #63836a; }.debug-panel dd { margin: 3px 0 0; overflow-wrap: anywhere; color: white; }
.touch-controls { grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: #050d08; }.touch-controls:not([hidden]) { display: none; }.touch-controls button { min-height: 66px; border: 1px solid #3a6745; color: var(--lime); background: #0b1b11; font: 900 15px var(--pixel); }.touch-controls button small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.touch-controls button.is-active { color: #071008; background: var(--lime); }

.utility-bar { grid-template-columns: 1fr auto; min-height: 44px; border-top: 1px solid #183522; border-bottom: 0; color: #627b67; font: 800 8px var(--pixel); letter-spacing: .08em; }.utility-bar > div { display: flex; gap: 8px; }.utility-button { padding: 6px 9px; border: 1px solid #294a32; color: #a4bca9; background: #09150d; font-size: 8px; }.utility-button:hover, .utility-button:focus-visible { outline: 0; border-color: var(--lime); color: var(--lime); }

.menu-particles i { position: absolute; width: 3px; height: 3px; background: var(--lime); opacity: .35; animation: particle-drift 9s linear infinite; }.menu-particles i:nth-child(1){left:8%;top:18%;animation-delay:-1s}.menu-particles i:nth-child(2){left:36%;top:72%;animation-delay:-4s}.menu-particles i:nth-child(3){left:66%;top:17%;animation-delay:-7s}.menu-particles i:nth-child(4){left:82%;top:64%;animation-delay:-2s}.menu-particles i:nth-child(5){left:52%;top:42%;animation-delay:-6s}

@keyframes title-glow { 0%,100% { filter:none } 50% { filter: drop-shadow(0 0 8px rgba(169,255,57,.12)); } }
@keyframes particle-drift { from { transform: translateY(20px); opacity:0 } 20% {opacity:.45} to { transform: translate(34px,-90px); opacity:0 } }
@keyframes count-pop { 0% { transform:scale(.65);opacity:0 } 25% {transform:scale(1);opacity:1} 100% {transform:scale(1.15);opacity:0} }
@keyframes hit-shake { 0%,100%{transform:none} 25%{transform:translate(-5px,2px)} 70%{transform:translate(4px,-1px)} }
@keyframes busted-flash { 0%{background:rgba(255,79,100,.5)} 100%{background:transparent} }

@media (max-width: 760px), (pointer: coarse) {
  .arcade-app { align-items: start; padding: 0; }.game-shell { width: 100%; min-height: 100vh; border: 0; }.shell-bar { min-height: 44px; padding: 0 10px; }.brand-lockup { font-size: 9px; }.shell-status { display: none; }.shell-bar { grid-template-columns: 1fr auto; }.main-menu { grid-template-columns: 1fr; align-content: center; gap: 24px; padding: 28px 20px; text-align: center; }.hero-lockup,.menu-actions { grid-column:1 }.hero-rule { margin-left:auto;margin-right:auto;background:linear-gradient(90deg,transparent,var(--lime),transparent)}.menu-actions { width:min(430px,100%);margin:0 auto;gap:10px }.game-button { min-height: 50px; }.hud { min-height: 60px; padding: 7px 10px; }.hud-stat strong { font-size: 17px; }.life-pips { gap:4px}.life-pips i { width:15px;height:12px}.canvas-frame { min-height: 0; aspect-ratio: 16 / 9; }.touch-controls:not([hidden]) { display: grid; }.utility-bar { padding: 0 9px; }.utility-bar > span { display:none; }.utility-bar { justify-content:end; }.screen-panel { max-height: 94%; padding: 17px; }.screen-panel h2 { margin-bottom: 15px; }.how-grid { grid-template-columns: 1fr 1fr; gap:5px}.how-grid article { min-height:60px;padding:7px;grid-template-columns:34px 1fr;gap:7px}.guide-icon {width:31px;height:31px}.how-grid p {font-size:9px}.result-grid { grid-template-columns: repeat(3,1fr); margin:10px 0 }.input-action { grid-template-columns:1fr }.result-panel { padding:14px }.debug-panel dl {grid-template-columns:repeat(4,1fr)}
  body[data-heist-mode="menu"] .canvas-frame,
  body[data-heist-mode="paused"] .canvas-frame,
  body[data-heist-mode="busted"] .canvas-frame,
  body[data-heist-mode="safety-stop"] .canvas-frame { min-height: 660px; aspect-ratio: auto; }
}

@media (max-width: 480px) {
  h1 { font-size: 54px; line-height:.82 }.arcade-title {font-size:27px;margin-top:18px}.arcade-title span + span {margin-left:6px}.subtitle { font-size: 10px }.hero-rule {margin-top:20px;margin-bottom:16px}.hero-copy { font-size:11px }.game-screen {padding:8px}.main-menu {padding:18px 14px}.control-cards {grid-template-columns:1fr}.how-grid {grid-template-columns:1fr 1fr}.leaderboard-head,.leaderboard-list li {grid-template-columns:46px minmax(112px,1fr)72px 78px;gap:6px;padding:10px 6px;font-size:10px}.leaderboard-list li {min-height:48px}.leaderboard-list li strong {font-size:10px}.leaderboard-panel {padding:12px 8px}.leaderboard-list {max-height:360px}.setting-row {grid-template-columns:1fr 120px;gap:8px;padding:7px 4px}.result-grid {gap:4px}.result-grid strong {font-size:12px}.identity-fields {grid-template-columns:1fr}.score-form {padding:11px}.identity-field input {font-size:10px}.debug-panel dl {grid-template-columns:repeat(2,1fr)}
  .leaderboard-head,.leaderboard-list li { grid-template-columns: 42px minmax(96px, 1fr) 78px 64px; gap: 5px; padding: 10px 5px; font-size: 9px; }
  .leaderboard-actions { gap: 6px; }.leaderboard-actions .game-button { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important } }