:root {
  color-scheme: dark;
  --bg: #090b20;
  --panel: #111531;
  --panel-2: #191e43;
  --yellow: #ffd84d;
  --pink: #ff4e9a;
  --cyan: #42e5e9;
  --purple: #826bff;
  --text: #f7f7ff;
  --muted: #aab0d0;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; overscroll-behavior: none; }
body {
  background: radial-gradient(circle at 50% -10%, #23265c 0, var(--bg) 42%);
  color: var(--text);
  font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
}
button, input { font: inherit; }
button { color: inherit; cursor: pointer; touch-action: manipulation; }

.app-shell { width: min(100%, 860px); min-height: 100dvh; margin: auto; position: relative; overflow: hidden; }
.topbar { height: 68px; padding: 12px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; }
.brand, .player-chip { border: 0; background: none; display: flex; align-items: center; gap: 9px; }
.brand { font-size: 1.05rem; letter-spacing: -.02em; }
.brand strong { color: var(--yellow); }
.brand-mark { width: 28px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--yellow); border: 3px solid currentColor; font-size: .55rem; }
.player-chip { padding: 8px 12px; border: 1px solid #333964; border-radius: 99px; background: #121631cc; font-size: .82rem; color: #d9dcf3; }

.screen { display: none; min-height: calc(100dvh - 68px); padding: 20px max(20px, env(safe-area-inset-right)) calc(24px + var(--safe-bottom)); }
.screen.active { display: flex; }
.hero-screen { flex-direction: column; justify-content: center; text-align: center; position: relative; padding-bottom: max(54px, calc(30px + var(--safe-bottom))); }
.version-banner { width: min(100%, 440px); margin: 0 auto 24px; padding: 11px 14px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; color: var(--text); text-align: left; text-decoration: none; border: 1px solid #42e5e955; border-radius: 16px; background: linear-gradient(120deg, #151a3ee8, #24355ae8); box-shadow: 0 10px 35px #42e5e912; }
.version-banner[hidden] { display: none; }
.version-banner-icon { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; background: #42e5e91f; }
.version-banner strong, .version-banner small { display: block; }
.version-banner strong { color: var(--cyan); font-size: .82rem; }
.version-banner small { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.eyebrow { margin: 0 0 10px; color: var(--cyan); font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 18px; font-size: clamp(2.4rem, 10vw, 5rem); line-height: .98; letter-spacing: -.055em; }
h1 span { color: var(--yellow); }
.lead { max-width: 570px; margin: 0 auto 30px; color: var(--muted); line-height: 1.55; font-size: clamp(.98rem, 3vw, 1.15rem); }
.hero-actions { width: min(100%, 360px); margin: 0 auto; display: grid; gap: 12px; }
.primary-button, .secondary-button { border: 0; border-radius: 16px; min-height: 54px; padding: 14px 22px; font-weight: 900; letter-spacing: .01em; }
.primary-button { color: #080b12; -webkit-text-fill-color: #080b12; background: linear-gradient(135deg, #ffe977, var(--yellow)); box-shadow: 0 8px 30px #ffd84d28; text-shadow: none; }
.primary-button:active { transform: translateY(2px); }
.secondary-button { color: var(--text); background: var(--panel-2); border: 1px solid #343a70; }
.feature-row { margin-top: 34px; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; color: #aeb4d6; font-size: .75rem; }
.confetti { position: absolute; inset: 2% 5% auto; height: 52%; pointer-events: none; opacity: .55; background: radial-gradient(circle at 10% 20%, var(--pink) 0 3px, transparent 4px), radial-gradient(circle at 90% 24%, var(--cyan) 0 3px, transparent 4px), radial-gradient(circle at 17% 80%, var(--yellow) 0 3px, transparent 4px), radial-gradient(circle at 80% 75%, var(--purple) 0 3px, transparent 4px); }

.game-screen { flex-direction: column; align-items: center; padding-top: 4px; }
.game-hud { width: min(100%, 520px); min-height: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.game-hud > div:first-child { display: flex; flex-direction: column; }
.hud-label { color: var(--muted); font-size: .58rem; font-weight: 800; letter-spacing: .14em; }
#scoreValue { font-size: 1.35rem; color: var(--yellow); }
.level-pill { padding: 7px 12px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-size: .66rem; letter-spacing: .1em; }
.level-pill strong { color: var(--cyan); }
.lives { justify-self: end; color: var(--pink); letter-spacing: 3px; font-size: 1.05rem; }
.canvas-wrap { position: relative; width: min(100%, 520px); display: grid; place-items: center; }
canvas { display: block; width: auto; height: auto; max-width: 100%; max-height: min(64dvh, 590px); border-radius: 16px; background: #050716; box-shadow: 0 18px 55px #0008; touch-action: none; }
.game-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; border-radius: 16px; background: #050716a8; backdrop-filter: blur(3px); }
.game-overlay.hidden { display: none; }
.overlay-card { width: min(100%, 310px); padding: 24px; border: 1px solid #343a70; border-radius: 20px; text-align: center; background: #121631f2; box-shadow: 0 20px 60px #0009; }
.overlay-card h2 { margin-bottom: 8px; font-size: 1.8rem; }
.overlay-card p:not(.eyebrow) { color: var(--muted); line-height: 1.45; }
.compact { min-height: 46px; }
.touch-controls { display: grid; grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(2, 58px); gap: 12px; margin-top: 18px; }
.touch-controls button { min-width: 68px; min-height: 58px; border: 1px solid #414a7d; border-radius: 18px; background: linear-gradient(145deg, #222951, var(--panel-2)); color: #f0f2ff; font-size: 1.22rem; box-shadow: 0 7px 18px #0004; }
.touch-controls button:active { background: var(--purple); transform: scale(.96); }
.touch-controls [data-direction="up"] { grid-column: 2; }
.touch-controls [data-direction="left"] { grid-column: 1; grid-row: 2; }
.touch-controls [data-direction="down"] { grid-column: 2; grid-row: 2; }
.touch-controls [data-direction="right"] { grid-column: 3; grid-row: 2; }
.control-hint { margin: 8px 0 0; color: #73799d; font-size: .67rem; }
.game-footer-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:7px; }
.game-footer-actions .control-hint { margin:0; }
.end-run-button { min-height:32px; padding:6px 10px; border:1px solid #343a70; border-radius:10px; background:#121631; color:#aeb4d6; font-size:.64rem; }
.end-run-button:hover,.end-run-button:focus-visible { color:#fff; border-color:var(--pink); }

.score-screen { flex-direction: column; align-items: center; }
.section-heading { text-align: center; margin: 20px 0 22px; }
.section-heading h2 { margin-bottom: 8px; font-size: clamp(2.2rem, 8vw, 3.5rem); }
.section-heading > p:last-child { color: var(--muted); }
.cash-event-card { width: min(100%, 560px); margin-bottom: 14px; padding: 15px 16px; border: 1px solid #ffe46b70; border-radius: 19px; background: linear-gradient(135deg, #2b2436e8, #16343ae8); box-shadow: 0 14px 45px #ffd84d14; }
.cash-event-top, .cash-event-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cash-event-top span { color: #fff2ad; font-size: .76rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.cash-event-top strong { color: var(--yellow); font-size: clamp(1.6rem, 7vw, 2.2rem); letter-spacing: -.04em; }
.cash-progress { height: 7px; margin: 10px 0 8px; overflow: hidden; border-radius: 99px; background: #080c20a8; }
.cash-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--yellow)); transition: width .4s ease; }
.cash-event-meta { color: #d9ddf1; font-size: .68rem; font-weight: 800; }
.cash-event-card p { margin: 9px 0 0; color: #9fa8c7; font-size: .62rem; line-height: 1.4; }
.score-card { width: min(100%, 560px); padding: 12px; border: 1px solid #292f5b; border-radius: 22px; background: #111531d9; }
.score-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 13px; background: #090c22; }
.score-tabs button { border: 0; border-radius: 10px; padding: 10px; background: transparent; color: var(--muted); font-weight: 800; }
.score-tabs button.active { background: var(--panel-2); color: var(--text); }
.score-list { list-style: none; padding: 4px 0 0; margin: 0; }
.score-list li { min-height: 58px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #252a50; }
.score-list li:last-child { border: 0; }
.rank { color: var(--muted); font-weight: 900; }
.score-list li:nth-child(1) .rank { color: var(--yellow); }
.score-list li:nth-child(2) .rank { color: #e4e8ff; }
.score-list li:nth-child(3) .rank { color: #e99760; }
.score-name { overflow: hidden; text-overflow: ellipsis; font-weight: 800; }
.score-meta { display: block; color: var(--muted); font-size: .68rem; font-weight: 500; }
.score-values { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.score-points { color: var(--yellow); font-weight: 900; }
.score-cash { color: #72f3ba; font-size: .68rem; font-weight: 900; }
.score-empty { display: block !important; padding: 25px !important; text-align: center; color: var(--muted); }
.score-screen > .primary-button { width: min(100%, 320px); margin-top: 18px; }

dialog { width: min(calc(100% - 32px), 420px); padding: 0; border: 1px solid #343a70; border-radius: 24px; color: var(--text); background: #121631; box-shadow: 0 25px 90px #000c; }
dialog::backdrop { background: #050716d9; backdrop-filter: blur(7px); }
dialog form { display: flex; flex-direction: column; padding: 28px; }
.dialog-close { align-self: end; width: 36px; aspect-ratio: 1; margin: -12px -12px 0 0; border: 0; border-radius: 50%; background: #23294f; font-size: 1.5rem; }
.dialog-icon { font-size: 2.5rem; margin-bottom: 14px; }
dialog h2 { margin-bottom: 9px; font-size: 1.75rem; }
dialog p:not(.eyebrow, .form-error) { color: var(--muted); line-height: 1.45; font-size: .88rem; }
dialog label { margin: 8px 0 7px; font-size: .75rem; font-weight: 800; color: #dce0f9; }
dialog input { width: 100%; padding: 14px; border: 1px solid #3d4476; border-radius: 13px; outline: none; color: white; background: #090c22; }
dialog input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px #42e5e922; }
.form-error { min-height: 18px; margin: 5px 0; color: #ff87b8; font-size: .72rem; }

@media (max-height: 720px) {
  .topbar { height: 54px; }
  .screen { min-height: calc(100dvh - 54px); }
  .game-hud { min-height: 42px; }
  canvas { max-height: 57dvh; }
  .touch-controls { grid-template-columns: repeat(3, 60px); grid-template-rows: repeat(2, 50px); gap: 10px; margin-top: 8px; }
  .touch-controls button { min-width: 60px; min-height: 50px; }
  .control-hint { display: none; }
  .version-banner { margin-bottom: 12px; }
}
@media (min-width: 740px) and (min-height: 780px) {
  .topbar { padding-inline: 28px; }
  .screen { padding-inline: 28px; }
  .touch-controls { grid-template-columns: repeat(3, 72px); grid-template-rows: repeat(2, 60px); gap: 14px; }
  .touch-controls button { min-width: 72px; min-height: 60px; }
}
@media (pointer: fine) and (min-width: 900px) { .touch-controls { opacity: .75; } }
@media (prefers-reduced-motion: no-preference) {
  .brand-mark { animation: pulse 2.2s ease-in-out infinite; }
  @keyframes pulse { 50% { filter: drop-shadow(0 0 8px #ffd84d99); } }
}