@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;600;700&display=swap');

:root { --ink:#f7eaff; --muted:#9b8cad; --pink:#ff3fba; --cyan:#49e5ff; --violet:#7c45ff; --panel:#160d2f; }
* { box-sizing:border-box; }
button, canvas { -webkit-tap-highlight-color:transparent; }
canvas { touch-action:none; }
body { margin:0; min-height:100vh; color:var(--ink); background:#080514; font-family:'Space Grotesk', sans-serif; display:flex; justify-content:center; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background:linear-gradient(110deg, transparent 0 45%, #ff28b91c 46% 47%, transparent 48% 70%, #3bdcff18 71% 72%, transparent 73%), radial-gradient(circle at 50% -10%, #6d27a952, transparent 54%); }
.cabinet { width:min(1100px, 100%); padding:28px 18px 34px; }
.brand { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.eyebrow,.kicker,.hud-label,.panel-heading { font-family:'Press Start 2P', monospace; letter-spacing:.11em; }
.eyebrow,.kicker { color:var(--cyan); font-size:9px; margin:0 0 10px; }
h1 { font-family:'Press Start 2P', monospace; font-size:clamp(15px, 2.4vw, 24px); line-height:1.6; margin:0; text-shadow:4px 4px 0 #5d1b7d; }
h1 span,h2 span { color:var(--pink); }
.icon-button { border:1px solid #684987; color:var(--cyan); background:#17102d; width:43px; height:43px; border-radius:50%; font-size:20px; cursor:pointer; }
.game-frame { position:relative; overflow:hidden; border:2px solid #4f2a72; border-radius:12px; background:#100a25; box-shadow:0 0 0 6px #0d0720, 0 20px 70px #541c7466; }
canvas { display:block; width:100%; height:auto; image-rendering:pixelated; }
.hud { position:absolute; z-index:2; inset:18px 24px auto; display:flex; justify-content:space-between; pointer-events:none; text-shadow:2px 2px 0 #12071d; }
.hud div { display:flex; flex-direction:column; gap:7px; } .hud-right { align-items:flex-end; }
.hud-label { color:#c4a7d7; font-size:8px; } .hud strong { font:16px 'Press Start 2P', monospace; color:#fff; }
.combo-box { align-items:center; opacity:0; transform:translateY(-4px); transition:opacity .18s, transform .18s; }
.combo-box.active { opacity:1; transform:translateY(0); }
.combo-box strong { color:#ffe66b; text-shadow:0 0 12px #ffb52f; }
.jump-box { align-items:center; opacity:.72; } .jump-box strong { color:var(--cyan); font-size:12px; }
.jump-box.used strong { color:#806e91; text-shadow:none; } .jump-box.used { opacity:.5; }
.pause-overlay { position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; background:#09051dcc; } .pause-overlay.hidden { display:none; } .pause-overlay strong { font:12px 'Press Start 2P',monospace; color:#f4eaff; }
.overlay { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:25px; background:linear-gradient(180deg,#0b0620bb,#110823e8); }
.overlay.hidden { display:none; }
h2 { font:clamp(18px, 4vw, 34px) 'Press Start 2P', monospace; line-height:1.6; margin:2px 0 12px; text-shadow:4px 4px 0 #3b1760; }
.overlay p:not(.kicker) { color:#d7cbe1; margin:0 0 22px; }
.arcade-prompt { font:10px 'Press Start 2P',monospace; color:#f5c9ef !important; letter-spacing:.04em; text-shadow:2px 2px 0 #4b1e68; }
.arcade-score { font:11px 'Press Start 2P',monospace; color:#f5eaff !important; letter-spacing:.03em; text-shadow:2px 2px 0 #4b1e68; }
.primary-button { border:0; color:#190821; background:linear-gradient(100deg,#ff5cc7,#ffc0f0); border-radius:5px; padding:14px 22px; font:11px 'Press Start 2P', monospace; cursor:pointer; box-shadow:0 5px 0 #9c237d, 0 0 25px #ff36be70; }
.primary-button:active { transform:translateY(3px); box-shadow:0 2px 0 #9c237d; }
.primary-button:disabled { cursor:not-allowed; opacity:.42; filter:grayscale(.7); box-shadow:none; }
.controls { color:#9d8ab1 !important; font:10px 'Press Start 2P', monospace; margin-top:20px !important; }
.initials { display:flex; gap:8px; margin:3px 0 15px; }
.initials button { width:42px; height:52px; border:1px solid #7f54a4; background:#261548; color:#fff; font:20px 'Press Start 2P', monospace; cursor:pointer; }
.initials button.active { border-color:var(--cyan); box-shadow:0 0 15px #49e5ff88; color:var(--cyan); }
.gameover-board { width:min(520px, 92%); margin:2px 0 18px; padding:12px 15px 10px; background:linear-gradient(120deg,#180d32dd,#100923dd); border:1px solid #70418d; border-radius:7px; box-shadow:0 0 22px #5a1a7750; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; color:#f7b4ef; font-size:10px; } .panel-heading small { color:#756589; font:8px 'Space Grotesk',sans-serif; letter-spacing:.16em; }
.leaderboard { list-style:none; padding:8px 0 0; margin:0; display:grid; gap:4px; }
.leaderboard li { display:grid; grid-template-columns:58px 1fr auto; align-items:center; padding:10px 12px; border-radius:5px; color:#b6a8c0; background:#ffffff05; font-family:'Press Start 2P',monospace; font-size:10px; }
.leaderboard li.champion { color:#ffe78c; background:linear-gradient(90deg,#ffdd6b16,transparent); text-shadow:0 0 10px #ffcf4b; }
.rank { display:flex; align-items:center; gap:5px; color:#7e6a92; white-space:nowrap; min-width:50px; } .leaderboard li.champion .rank { color:#ffca52; } .trophy { display:inline-block; font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif; font-size:17px; line-height:1; filter:saturate(1.35); animation:trophyGlow 1.5s ease-in-out infinite alternate; } .slot-empty { color:#584a68 !important; opacity:.72; }
@keyframes trophyGlow { from { filter:drop-shadow(0 0 1px #ffeb85) saturate(1.2); transform:translateY(0); } to { filter:drop-shadow(0 0 7px #ffd43b) saturate(1.7); transform:translateY(-1px); } }
.footer-note { text-align:center; color:#5c4b6d; font-size:11px; }
@media (max-width:600px) { .cabinet { padding:18px 10px 22px; } .hud { inset:12px 14px auto; gap:8px; } .hud strong { font-size:11px; } .hud-label { font-size:7px; } .jump-box strong,.combo-box strong { font-size:10px; } .leaderboard li { font-size:8px; padding:8px 7px; } .gameover-board { width:96%; margin-bottom:12px; } .gameover-board .panel-heading { font-size:8px; } .gameover-board .panel-heading small { font-size:7px; } .overlay { padding:18px 12px; } h2 { font-size:18px; } .primary-button { padding:13px 15px; font-size:9px; } }