@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Space+Mono:wght@400;700&display=swap");

:root {
  --bg: #05070c;
  --surface: #0a0e16;
  --surface-2: #101624;
  --line: rgba(134, 160, 196, 0.18);
  --muted: #718096;
  --text: #f2f6ff;
  --lime: #b7ff3c;
  --cyan: #32e7ef;
  --violet: #a86dff;
  --orange: #ffb649;
  --red: #ff556d;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono: 'Space Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-family: var(--mono); overflow-x: hidden; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

body::before {
  position: fixed; inset: 0; content: ''; pointer-events: none; opacity: .36;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 88%);
}
.ambient { position: fixed; pointer-events: none; width: 38vw; height: 38vw; border-radius: 50%; filter: blur(90px); opacity: .09; }
.ambient-one { background: var(--cyan); top: -24vw; right: -8vw; }
.ambient-two { background: var(--violet); bottom: -26vw; left: -12vw; }
.app-shell { width: min(1380px, calc(100% - 56px)); margin: 0 auto; position: relative; min-height: 100vh; display: flex; flex-direction: column; }

.topbar { height: 94px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 14px; background: transparent; padding: 0; }
.brand-mark { width: 25px; height: 28px; display: flex; align-items: end; gap: 3px; transform: skew(-18deg); }
.brand-mark i { width: 5px; background: var(--lime); box-shadow: 0 0 10px var(--lime); display: block; }
.brand-mark i:nth-child(1) { height: 14px; }.brand-mark i:nth-child(2) { height: 22px; }.brand-mark i:nth-child(3) { height: 28px; }
.brand-copy { font: 700 20px var(--display); letter-spacing: .16em; }.brand-copy em { color: var(--lime); font-style: normal; margin: 0 5px; }
.top-status { color: var(--muted); font-size: 10px; letter-spacing: .14em; display: flex; align-items: center; gap: 9px; }.top-status b { color: var(--lime); font-weight: 400; }
.status-dot { width: 6px; height: 6px; display: block; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: blink 1.7s infinite; }
.top-actions { display: flex; align-items: center; gap: 28px; }.metric { display: flex; flex-direction: column; gap: 3px; text-align: right; }.metric span, .heading-readout span { font-size: 9px; color: var(--muted); letter-spacing: .16em; }.metric strong { font: 700 16px var(--display); letter-spacing: .12em; }
.icon-button { width: 33px; height: 33px; border: 1px solid var(--line); background: transparent; color: var(--cyan); font-size: 20px; line-height: 1; transform: rotate(90deg); }.icon-button.muted { color: var(--muted); }

main { flex: 1; padding: 62px 0 36px; }.page { display: none; }.page.active { display: block; }
.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 35px; }.eyebrow { color: var(--lime); font-size: 10px; letter-spacing: .2em; margin: 0 0 11px; }.page-heading h1 { font: 700 clamp(42px, 6vw, 76px)/.83 var(--display); letter-spacing: -.02em; margin: 0; text-transform: uppercase; }.page-heading h1 span { color: var(--cyan); }.heading-note { color: var(--muted); font-size: 11px; margin: 17px 0 0; letter-spacing: .02em; }.heading-readout { border-left: 1px solid var(--line); padding-left: 20px; text-align: left; margin-bottom: 3px; }.heading-readout strong { font: 700 44px/1 var(--display); display: block; color: var(--cyan); letter-spacing: .04em; }
.select-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(360px, .68fr); gap: 18px; }.panel { background: linear-gradient(145deg, rgba(18,25,39,.88), rgba(7,10,17,.9)); border: 1px solid var(--line); position: relative; }
.preview-card { padding: 21px; min-height: 480px; }.panel-label, .levels-toolbar { font-size: 9px; letter-spacing: .17em; color: #9eacc1; display: flex; justify-content: space-between; }.pulse-label { color: var(--lime); }.pulse-label i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); margin-right: 6px; }
.preview-stage { height: 347px; margin-top: 18px; position: relative; background: #030509; overflow: hidden; border: 1px solid rgba(50,231,239,.16); }.preview-stage::before { position: absolute; inset: 0; content:''; background: radial-gradient(circle at 70% 28%, rgba(50,231,239,.12), transparent 27%), linear-gradient(100deg, transparent 48%, rgba(183,255,60,.07) 49%, transparent 50%); pointer-events:none; }.preview-stage canvas { width: 100%; height: 100%; display: block; }.preview-copy { position: absolute; left: 25px; bottom: 21px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }.preview-kicker { font-size: 8px; color: var(--cyan); letter-spacing: .16em; }.preview-copy strong { font: 700 30px/1 var(--display); letter-spacing: .04em; }.preview-copy span:last-child { font-size: 9px; color: var(--muted); }
.preview-footer { display: flex; align-items: end; justify-content: space-between; padding-top: 19px; }.difficulty-row { display: flex; align-items: center; gap: 9px; font-size: 9px; color: var(--muted); letter-spacing: .12em; }.difficulty-pips { display:flex; gap:3px; }.difficulty-pips i { height: 9px; width: 5px; background: var(--line); transform: skew(-18deg); }.difficulty-pips i.active { background: var(--lime); box-shadow: 0 0 7px rgba(183,255,60,.5); }.difficulty-row b { color: var(--lime); font-weight: 400; font-size: 9px; }
.primary-button { color: #071006; background: var(--lime); padding: 13px 16px 12px; font: 700 13px var(--display); letter-spacing: .1em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; box-shadow: 0 0 0 rgba(183,255,60,0); }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(183,255,60,.2); background: #c6ff65; }.primary-button span { font-size: 15px; margin-left: 7px; }
.levels-panel { padding: 21px; }.route-count { color: var(--lime); }.level-list { display:flex; flex-direction:column; gap: 8px; margin-top: 18px; }.level-card { position:relative; display:grid; grid-template-columns: 50px 1fr auto; align-items:center; min-height: 92px; padding: 12px 14px; text-align:left; background: rgba(12,18,29,.8); border: 1px solid rgba(134,160,196,.12); transition: .18s ease; }.level-card:hover { border-color: rgba(50,231,239,.5); transform: translateX(4px); }.level-card.selected { border-color: var(--cyan); background: linear-gradient(90deg, rgba(50,231,239,.11), rgba(12,18,29,.74)); }.level-card.selected::before { content:''; position:absolute; left:-1px; top: 14px; bottom:14px; width:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }.level-num { font: 700 32px var(--display); color: var(--muted); }.selected .level-num { color: var(--cyan); }.level-info strong { display:block; font:700 18px var(--display); letter-spacing:.06em; }.level-info span { display:block; margin-top:4px; color:var(--muted); font-size:9px; line-height:1.5; max-width: 200px; }.level-meta { text-align:right; align-self:stretch; display:flex; flex-direction:column; align-items:end; justify-content:space-between; }.level-tag { font-size:8px; padding:4px 6px; color:var(--lime); border:1px solid rgba(183,255,60,.5); letter-spacing:.1em; }.level-tag.medium { color:var(--orange); border-color:rgba(255,182,73,.5); }.level-tag.hard { color:var(--red); border-color:rgba(255,85,109,.5); }.level-meta small { color:var(--muted); font-size:9px; }.locked-note { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 15px; color: var(--muted); font-size:9px; line-height:1.6; display:flex; gap:9px; }.lock-icon { color:var(--violet); }
.select-bottom { display:flex; justify-content:space-between; align-items:center; margin-top: 18px; }.tip-card { display:flex; align-items:center; gap: 13px; color:var(--muted); font-size:9px; line-height:1.7; }.tip-card strong { display:block; color:var(--text); letter-spacing:.14em; font-size:9px; }.tip-icon { color:var(--cyan); font-size:28px; }.tip-card kbd { color:var(--cyan); border:1px solid rgba(50,231,239,.4); padding:2px 4px; margin: 0 2px; font-size:8px; }.version-readout { text-align:right; font-size:8px; color:var(--muted); line-height:1.8; letter-spacing:.12em; }.version-readout span { color: rgba(113,128,150,.6); }

.game-page { max-width: 1200px; margin: 0 auto; }.game-topline { display:flex; justify-content:space-between; align-items:center; margin-bottom: 18px; }.back-button, .pause-button { background:transparent; color:var(--muted); font-size:9px; letter-spacing:.14em; padding:8px 0; }.back-button:hover, .pause-button:hover { color:var(--lime); }.game-title { text-align:center; display:flex; gap:13px; align-items:baseline; }.game-title span { color:var(--cyan); font:700 15px var(--display); }.game-title strong { font:700 20px var(--display); letter-spacing:.11em; }.game-title em { color:var(--lime); font:normal 9px var(--mono); letter-spacing:.1em; }.pause-button span { display:inline-block; width:3px; height:11px; background:currentColor; margin:0 2px -2px 0; }.game-frame { height: min(62vw, 590px); min-height: 390px; overflow:hidden; border-color: rgba(50,231,239,.25); }.game-frame::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(50,231,239,.06); }.game-frame canvas { display:block; width:100%; height:100%; background:#020406; }.game-hud { position:absolute; z-index:2; top:19px; display:flex; flex-direction:column; gap:4px; pointer-events:none; }.hud-left { left:21px; }.hud-right { right:21px; text-align:right; }.game-hud span { font-size:8px; color:var(--muted); letter-spacing:.14em; }.game-hud strong { font:700 19px var(--display); color:var(--cyan); }.hud-right strong { color:var(--lime); }.center-hint { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:7px; transition:opacity .5s; pointer-events:none; }.center-hint.hidden { opacity:0; }.center-hint strong { font:700 18px var(--display); letter-spacing:.12em; color:var(--lime); }.center-hint > span:last-child { color:var(--muted); font-size:8px; letter-spacing:.12em; }.mouse-icon { color:var(--cyan); font-size:37px; line-height:1; animation: float 1.1s ease-in-out infinite; }
.game-bottomline { display:flex; align-items:center; gap: 10px; margin-top: 17px; }.control-chip { display:flex; align-items:center; gap:8px; font-size:8px; color:var(--muted); }.control-key { border:1px solid var(--line); color:var(--cyan); padding:5px 7px; letter-spacing:.06em; }.coin-readout { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:8px; color:var(--muted); }.coin-readout strong { font:700 19px var(--display); color:var(--orange); }.coin-glyph { color:var(--orange); font-size:12px; }.run-readout { border-left:1px solid var(--line); padding-left:16px; margin-left:12px; display:flex; flex-direction:column; gap:3px; text-align:right; }.run-readout span { color:var(--muted); font-size:8px; }.run-readout strong { color:var(--lime); font:700 19px var(--display); }
.game-overlay, .pause-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:rgba(2,4,8,.72); backdrop-filter: blur(5px); }.game-overlay.hidden, .pause-overlay.hidden { display:none; }.overlay-card { width:min(420px, calc(100% - 40px)); padding:34px; text-align:center; background:rgba(9,14,24,.96); border:1px solid var(--cyan); box-shadow:0 0 45px rgba(50,231,239,.15); }.overlay-card .eyebrow { color:var(--red); }.overlay-card h2, .pause-overlay h2 { font:700 35px/1 var(--display); margin:0; letter-spacing:.06em; }.overlay-card > p:not(.eyebrow) { color:var(--muted); font-size:10px; line-height:1.7; margin:13px 0 23px; }.overlay-stats { display:flex; justify-content:center; gap:34px; padding: 13px 0 18px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.overlay-stats span { display:block; color:var(--muted); font-size:8px; margin-bottom:4px; }.overlay-stats strong { color:var(--cyan); font:700 22px var(--display); }.overlay-actions { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:22px; }.ghost-button { background:transparent; color:var(--muted); border:1px solid var(--line); padding:12px 14px; font-size:9px; letter-spacing:.1em; }.ghost-button:hover { color:var(--text); border-color:var(--text); }.pause-overlay > div { text-align:center; }.pause-overlay h2 { color:var(--cyan); margin-bottom:20px; }.pause-overlay .eyebrow { color:var(--lime); }
.footer { min-height: 67px; display:flex; align-items:center; justify-content:space-between; color:rgba(113,128,150,.55); font-size:8px; letter-spacing:.13em; border-top:1px solid var(--line); }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:.35; } } @keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media (max-width: 880px) { .app-shell { width:min(100% - 30px, 680px); }.top-status { display:none; }.select-layout { grid-template-columns:1fr; }.preview-card { min-height:0; }.preview-stage { height: 300px; }.levels-panel { padding:17px; }.game-frame { height: 68vw; min-height: 400px; }.page-heading { margin-bottom:25px; } }
@media (max-width: 560px) { .app-shell { width:calc(100% - 24px); }.topbar { height:77px; }.brand-copy { font-size:16px; }.top-actions { gap:12px; }.metric { display:none; } main { padding-top:38px; }.heading-note { font-size:9px; max-width:250px; line-height:1.6; }.heading-readout { padding-left:13px; }.heading-readout strong { font-size:34px; }.preview-card { padding:14px; }.preview-stage { height:260px; }.preview-footer { gap:14px; align-items:start; flex-direction:column; }.primary-button { width:100%; }.level-card { grid-template-columns:40px 1fr auto; min-height:84px; padding:10px; }.level-num { font-size:27px; }.level-info strong { font-size:16px; }.select-bottom { align-items:start; gap:20px; flex-direction:column; }.version-readout { text-align:left; }.game-topline { gap:8px; }.game-title { gap:6px; flex-wrap:wrap; justify-content:center; }.game-title strong { font-size:15px; }.back-button, .pause-button { font-size:8px; }.game-frame { height:115vw; min-height:420px; }.game-bottomline { flex-wrap:wrap; }.coin-readout { margin-left:0; }.run-readout { margin-left:auto; }.footer { font-size:7px; } }