:root {
  --ink: #e9fcff;
  --muted: #91a7c6;
  --night: #060815;
  --cyan: #61f6ff;
  --violet: #a66aff;
  --magenta: #ff4aaa;
  --lime: #bcff64;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--night); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; background: #030511; }
body::before, body::after { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; }
body::before { opacity: .38; background: linear-gradient(100deg, rgba(2, 10, 28, .8), rgba(1, 5, 18, .3)), url("neon-city-public-90s-sci-fi-v1.png") center / cover; }
body::after { background: radial-gradient(circle at 16% 11%, rgba(0, 232, 255, .18), transparent 28%), radial-gradient(circle at 86% 72%, rgba(255, 61, 169, .16), transparent 30%), linear-gradient(rgba(1, 4, 14, .25), rgba(1, 3, 11, .72)); }
.arcade-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 23px 0 44px; }
.arcade-topbar, .arcade-intro, .game-layout, .panel-actions, .touch-controls, .instructions { display: flex; }
.arcade-topbar { align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 52px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 .88rem/1 var(--mono); letter-spacing: .08em; }
.brand span span { color: var(--cyan); }
.brand-mark { display: grid; width: 30px; height: 30px; place-items: center; color: var(--night); background: var(--cyan); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.system-state, .eyebrow, .panel-label, .instructions, .utility-button, .command-button { font-family: var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.system-state { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--lime); font-size: .66rem; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: blink 1.6s infinite; }
.arcade-intro { align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 9px; color: var(--cyan); font-size: .68rem; }
.arcade-intro h1 { margin: 0; font: 900 clamp(2.6rem, 8vw, 5.7rem)/.82 var(--mono); letter-spacing: -.1em; }
.arcade-intro h1 span { color: var(--cyan); text-shadow: 3px 0 var(--magenta), 0 0 25px rgba(97, 246, 255, .45); }
.arcade-intro > p { max-width: 270px; margin: 0 0 3px; color: #b4c4db; font-size: .9rem; }
.game-layout { align-items: stretch; gap: 14px; }
.game-frame { position: relative; flex: 1; min-width: 0; overflow: hidden; border: 1px solid rgba(97, 246, 255, .55); background: #050a1b; box-shadow: 0 0 0 1px rgba(166, 106, 255, .35), 0 26px 70px rgba(0, 0, 0, .5), inset 0 0 60px rgba(74, 89, 255, .12); aspect-ratio: 16 / 10; touch-action: none; user-select: none; -webkit-user-select: none; }
.game-frame::before { content: ""; position: absolute; z-index: 1; inset: 0; opacity: .3; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(104, 243, 255, .12) 3px 4px); mix-blend-mode: screen; }
.game-frame::after { content: ""; position: absolute; z-index: 2; inset: 11px; border: 1px solid rgba(97, 246, 255, .18); pointer-events: none; }
.corner-cuts { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--night) 0 10px, transparent 11px) top left / 28px 28px no-repeat, linear-gradient(-45deg, var(--night) 0 10px, transparent 11px) top right / 28px 28px no-repeat, linear-gradient(45deg, var(--night) 0 10px, transparent 11px) bottom left / 28px 28px no-repeat, linear-gradient(-135deg, var(--night) 0 10px, transparent 11px) bottom right / 28px 28px no-repeat; }
canvas { display: block; width: 100%; height: 100%; }
.game-hud { position: absolute; z-index: 4; top: 19px; left: 23px; right: 23px; display: flex; justify-content: space-between; pointer-events: none; }
.game-hud div { display: grid; gap: 1px; }.game-hud div:nth-child(2) { text-align: center; }.game-hud div:last-child { text-align: right; }
.game-hud small { color: #a4b5ca; font: .56rem/1.2 var(--mono); letter-spacing: .1em; }
.game-hud strong { color: var(--cyan); font: 700 clamp(.92rem, 2.4vw, 1.26rem)/1.2 var(--mono); letter-spacing: .05em; text-shadow: 0 0 12px rgba(97, 246, 255, .65); }
.game-message { position: absolute; z-index: 5; top: 50%; left: 50%; width: min(84%, 400px); padding: 24px; text-align: center; background: rgba(4, 8, 26, .7); border: 1px solid rgba(166, 106, 255, .45); box-shadow: 0 0 42px rgba(34, 205, 255, .14); transform: translate(-50%, -50%); backdrop-filter: blur(6px); }
.game-message[hidden] { display: none; }.message-kicker { margin: 0; color: var(--magenta); font: .65rem var(--mono); letter-spacing: .11em; }.game-message h2 { margin: 9px 0 10px; font: 800 clamp(1.55rem, 4vw, 2.3rem)/.92 var(--mono); letter-spacing: -.08em; }.message-copy { margin: 0 auto 20px; color: #bdcbdf; font-size: .88rem; }
.command-button, .utility-button, .touch-controls button { border: 0; cursor: pointer; touch-action: manipulation; }
.command-button { padding: 13px 16px; color: #07101c; background: var(--cyan); box-shadow: 4px 4px 0 var(--magenta); font-size: .7rem; font-weight: 800; transition: transform .16s, box-shadow .16s; }
.command-button:hover { box-shadow: 7px 7px 0 var(--magenta); transform: translate(-2px, -2px); }
.side-panel { display: flex; flex: 0 0 210px; flex-direction: column; border: 1px solid rgba(125, 151, 210, .25); background: linear-gradient(160deg, rgba(4, 14, 35, .9), rgba(5, 8, 22, .85)); backdrop-filter: blur(8px); }
.panel-block { padding: 18px; border-bottom: 1px solid rgba(125, 151, 210, .2); }.panel-label { margin: 0 0 9px; color: var(--cyan); font-size: .61rem; }.status-text { min-height: 22px; margin: 0; color: #d7faff; font: 700 .78rem/1.2 var(--mono); letter-spacing: .04em; }
.signal-line { height: 3px; margin-top: 14px; overflow: hidden; background: rgba(141, 168, 205, .2); }.signal-line span { display: block; width: 10%; height: 100%; background: var(--lime); box-shadow: 0 0 9px var(--lime); transition: width .3s ease, background .3s ease; }
.powerup-legend p:not(.panel-label) { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: #b4c4dc; font: .62rem/1.2 var(--mono); }.chip { display: inline-grid; width: 21px; height: 21px; place-items: center; color: #06111a; font-size: .68rem; }.chip-wide { background: var(--cyan); }.chip-multi { background: var(--magenta); }.chip-slow { background: var(--lime); }
.score-block { margin-top: auto; }.score-block strong { display: block; color: var(--lime); font: 700 1.45rem/1 var(--mono); text-shadow: 0 0 13px rgba(188, 255, 100, .5); }.score-block small { display: block; margin-top: 8px; color: var(--muted); font: .53rem/1.3 var(--mono); letter-spacing: .06em; }
.panel-actions { gap: 1px; border-top: 1px solid rgba(125, 151, 210, .2); }.utility-button { flex: 1; min-height: 47px; color: var(--ink); background: rgba(97, 246, 255, .07); font-size: .6rem; }.utility-button:hover, .utility-button[aria-pressed="true"] { background: rgba(166, 106, 255, .24); color: var(--cyan); }
.touch-controls { display: none; }.instructions { justify-content: space-between; gap: 18px; margin: 19px 0 0; color: var(--muted); font-size: .59rem; }.instructions p { margin: 0; }.instructions span { color: var(--magenta); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
@keyframes blink { 50% { opacity: .35; transform: scale(.7); } }
@media (max-width: 780px) { .game-layout { flex-direction: column; }.side-panel { display: grid; flex-basis: auto; grid-template-columns: 1.2fr 1fr 1fr auto; }.panel-block { border-bottom: 0; border-right: 1px solid rgba(125, 151, 210, .2); }.score-block { margin-top: 0; }.panel-actions { border-top: 0; }.powerup-legend { display: none; } }
@media (max-width: 620px), (pointer: coarse) { .arcade-shell { width: min(100% - 24px, 1180px); padding-top: 17px; }.arcade-topbar { margin-bottom: 37px; }.system-state { font-size: .56rem; }.arcade-intro { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 18px; }.arcade-intro > p { max-width: 340px; font-size: .83rem; }.game-frame { aspect-ratio: 10 / 12; }.game-hud { top: 16px; left: 17px; right: 17px; }.game-message { width: min(88%, 360px); padding: 20px 15px; }.side-panel { grid-template-columns: 1fr 1fr; }.panel-block:first-child { border-right: 1px solid rgba(125, 151, 210, .2); }.score-block { border-top: 1px solid rgba(125, 151, 210, .2); }.panel-actions { grid-column: 1 / -1; border-top: 1px solid rgba(125, 151, 210, .2); }.touch-controls { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 7px; margin-top: 12px; }.touch-controls button { min-height: 54px; color: var(--ink); border: 1px solid rgba(97, 246, 255, .32); background: rgba(5, 15, 35, .9); font: 700 1.08rem/1 var(--mono); }.touch-controls .launch-touch { color: #06111a; background: var(--cyan); font-size: .68rem; letter-spacing: .08em; }.instructions { flex-direction: column; gap: 7px; font-size: .55rem; }.instructions p:first-child { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }