:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#070812; color:#f5f0e8; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 100%,#252044 0,#0a0b16 52%,#05060d 100%); }
.shell { width:min(96vw,1400px); }
header { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin:0 0 .75rem; }
h1,h2,p { margin:0; } h1,h2 { font-family:Georgia,serif; font-weight:500; } h1 { font-size:clamp(1.8rem,3vw,2.8rem); letter-spacing:.03em; }
.eyebrow { color:#bda8ed; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
.controls { color:#adb0bf; font-size:.78rem; padding-bottom:.3rem; }
kbd { display:inline-block; padding:.1rem .32rem; border:1px solid #50566d; border-bottom-width:2px; border-radius:4px; background:#171926; color:#fff; }
.viewport { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid #363550; border-radius:14px; background:#0e1020; box-shadow:0 30px 90px #0009; }
canvas { display:block; width:100%; height:100%; cursor:crosshair; outline:none; }
.hud { position:absolute; top:1rem; left:1rem; width:min(330px,42%); pointer-events:none; text-shadow:0 1px 3px #000; }
.bar-label { display:flex; justify-content:space-between; margin-bottom:.18rem; color:#e6e3ec; font-size:.68rem; }.mana-label{margin-top:.45rem}
.bar { height:10px; overflow:hidden; border:1px solid #ffffff2e; border-radius:99px; background:#05060aab; }.fill{height:100%;width:100%;transition:width .12s linear}.health{background:linear-gradient(90deg,#8f203e,#ec5260)}.mana{background:linear-gradient(90deg,#3c3bb2,#58c4ff)}
.spell-row { display:flex; gap:.45rem; margin-top:.75rem; }.spell{flex:1;display:grid;gap:.15rem;padding:.48rem .58rem;border:1px solid #ffffff25;border-radius:7px;background:#080914b8;font-size:.65rem}.spell span{color:#bdc1cf}.spell.cooling{opacity:.55}
.quest { position:absolute; top:1rem; right:1rem; display:grid; justify-items:end; gap:.2rem; color:#d9d4e5; font-size:.72rem; text-shadow:0 1px 3px #000; pointer-events:none; }
.game-over { position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:.65rem; background:radial-gradient(circle,#4d1935aa,#05060ded); text-align:center; }.game-over[hidden]{display:none}.game-over h2{font-size:clamp(2.2rem,5vw,4rem)}.game-over p:last-child{color:#c3c0ca}
@media(max-width:700px){.controls{display:none}.shell{width:100vw}.viewport{border-radius:0}.shell>header{margin:.4rem .7rem}.hud{top:.6rem;left:.6rem;width:48%}.quest{top:.6rem;right:.6rem}}