@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:wght@600;700;800&family=Press+Start+2P&display=swap');

:root { color-scheme: dark; --ink:#e9e7dc; --muted:#9698a9; --blood:#e44650; --gold:#f5c55c; --night:#101425; --panel:#171c31; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 0%,#242a4b 0,#111426 46%,#090b16 100%); color:var(--ink); font-family:"DM Mono",monospace; }
.game-shell { width:min(1180px,100vw); padding:18px 22px 12px; }
.topbar, footer { display:flex; justify-content:space-between; align-items:center; }
.topbar { padding:0 3px 13px; }.brand { font-family:"Press Start 2P",monospace; font-size:14px; letter-spacing:-1px; color:#f7e6bb; }.brand-mark { color:var(--blood); font-size:19px; margin-right:8px; }.brand em { font-style:normal; color:#b9bfd8; font-size:10px; }.controls, footer { color:var(--muted); font-size:12px; }
kbd { border:1px solid #5f6681; border-bottom-width:3px; border-radius:3px; padding:2px 5px; color:#d8dcf0; font:10px "DM Mono",monospace; background:#222940; }
.game-frame { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #4b5272; box-shadow:0 0 0 4px #1a1f37, 0 22px 65px #060812; background:#0d1121; }
canvas { width:100%; height:100%; display:block; image-rendering:pixelated; }
.hud { position:absolute; inset:0; display:flex; justify-content:space-between; padding:18px 20px; pointer-events:none; text-shadow:1px 2px #090a12; }.hud-left { width:min(310px,42%); }.health-wrap,.xp-wrap { display:grid; grid-template-columns:58px 1fr; gap:5px 9px; align-items:center; margin-bottom:10px; }.health-wrap b,.xp-wrap b { grid-column:2; font-size:10px; color:#d5d6df; }.hud-label { font-size:10px; color:#c4c9dc; text-align:right; }.bar { height:11px; border:1px solid #646a83; background:#090b15; padding:2px; box-shadow:inset 0 0 0 1px #191d2e; }.bar i { display:block; height:100%; width:100%; transition:width .15s; }.health i { background:linear-gradient(90deg,#be273c,#fa5560); }.xp i { background:linear-gradient(90deg,#5699e9,#87dcfa); }.hud-right { text-align:right; display:flex; flex-direction:column; gap:5px; }.hud-right strong { color:#f8e5a3; font:18px "Press Start 2P",monospace; }.hud-right span { font-size:10px; color:#c6cad9; }
.overlay { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; text-align:center; background:rgba(9,11,22,.72); backdrop-filter:blur(3px); padding:25px; }.hidden { display:none; }.start-screen { background:radial-gradient(circle at 50% 40%,rgba(56,48,92,.52),rgba(7,9,18,.82) 62%); }.crest { display:grid; place-items:center; width:67px; height:67px; margin-bottom:14px; border:2px solid #bc3f50; border-radius:50%; color:#ffd36d; font:46px Georgia,serif; box-shadow:0 0 25px #ae354a55; }.eyebrow { margin:0 0 10px; color:#e35058; letter-spacing:3px; font-size:11px; }.overlay h1,.overlay h2 { margin:0; font-family:"Playfair Display",serif; line-height:.85; text-shadow:3px 4px #090b15; }.overlay h1 { font-size:clamp(43px,7vw,80px); letter-spacing:-3px; }.overlay h1 span { color:#f0c35e; }.overlay h2 { font-size:clamp(40px,5vw,62px); color:#f2d16f; }.intro { max-width:530px; margin:25px 0 21px; color:#c8c9d4; font-size:14px; line-height:1.75; } button { border:1px solid #edbf57; border-bottom:4px solid #9d6b24; background:linear-gradient(#e94a54,#b8273a); padding:13px 23px 11px; color:#fff4d6; cursor:pointer; font:13px "Press Start 2P",monospace; text-shadow:1px 2px #6d1321; box-shadow:0 5px 17px #0007; transition:transform .12s,filter .12s; } button:hover { filter:brightness(1.13); transform:translateY(-2px); } button span { color:#ffd877; }.hint { color:#898da4; font-size:10px; margin-top:20px; }
.level-screen p:not(.eyebrow),.pause-screen p:not(.eyebrow) { color:#c3c6d5; }.upgrade-grid { display:grid; grid-template-columns:repeat(3,180px); gap:12px; margin-top:19px; }.upgrade { text-align:left; min-height:178px; padding:17px 15px; border:1px solid #555b79; border-bottom:4px solid #363a55; background:linear-gradient(145deg,#242942,#14182a); color:#e8e7df; font-family:"DM Mono",monospace; }.upgrade:hover { border-color:#f0c75e; background:linear-gradient(145deg,#3b3650,#1d1b30); }.upgrade-icon { display:block; color:#ffd367; font:31px Georgia,serif; margin-bottom:13px; }.upgrade strong { display:block; font-size:13px; color:#f7eac3; margin-bottom:9px; }.upgrade small { display:block; color:#b9bbca; line-height:1.5; font-size:11px; }.final-stats { display:flex; gap:28px; justify-content:center; margin:22px 0; }.final-stats div { color:#a7abc0; font-size:10px; }.final-stats b { display:block; color:#f6d474; font:18px "Press Start 2P",monospace; margin-bottom:7px; }
footer { padding:12px 3px 0; font-size:10px; }
@media (max-width:700px) { .game-shell { padding:8px 8px 6px; }.controls { display:none; }.brand { font-size:10px; }.brand em { font-size:7px; }.game-frame { border-width:1px; }.hud { padding:10px; }.health-wrap,.xp-wrap { grid-template-columns:34px 1fr; gap:4px; margin-bottom:6px; }.hud-label { font-size:8px; }.bar { height:8px; }.hud-left { width:49%; }.hud-right strong { font-size:12px; }.hud-right span,.health-wrap b,.xp-wrap b { font-size:8px; }.upgrade-grid { grid-template-columns:repeat(3,minmax(90px,1fr)); gap:6px; }.upgrade { min-height:142px; padding:10px 8px; }.upgrade-icon { font-size:23px; margin-bottom:8px; }.upgrade strong { font-size:10px; }.upgrade small { font-size:9px; }.intro { font-size:12px; }.hint,footer { display:none; } }