:root{color-scheme:dark;--bg:#07050c;--ink:#fff;--muted:#bdb1d4;--violet:#9b7cff;--mint:#b8ffda;--danger:#ff756b;--gold:#ffd36e}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:radial-gradient(circle at 50% 35%,#241635 0,#0a0710 55%,#030205 100%);overflow:hidden;font-family:'Modern Sans', monospace}
body{display:grid;place-items:center}
#wrap{position:relative;width:min(100vw,177.777vh);aspect-ratio:16/9;max-height:100vh;background:#000;box-shadow:0 0 80px #000;border:1px solid #39294b;overflow:hidden}
canvas{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#07050c;outline:none}
#topbar{position:absolute;left:0;right:0;top:0;padding:12px 16px;display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.5px;color:#c8bedd;text-shadow:2px 2px #000;pointer-events:none;opacity:.9}
.overlay{position:absolute;inset:0;display:none;place-items:center;align-content:center;text-align:center;padding:48px;background:radial-gradient(circle at 50% 42%,rgba(38,23,57,.96),rgba(4,3,8,.99) 68%);z-index:4;color:white}
.overlay.visible{display:grid}
.emblem{width:92px;height:92px;image-rendering:pixelated;margin-bottom:10px;}
h1{font-size:clamp(30px,5vw,64px);margin:0 0 4px;letter-spacing:.12em;text-shadow:4px 4px #120b1c}
.subtitle{max-width:760px;color:#d1c5df;font-size:clamp(13px,1.7vw,19px);line-height:1.5;margin:12px auto 26px}
button{font:inherit;font-weight:700;letter-spacing:.15em;color:white;background:#120c1b;border:3px solid white;padding:12px 30px;cursor:pointer;box-shadow:6px 6px 0 #000}
button:hover,button:focus{color:#1a1125;background:var(--gold);border-color:var(--gold);outline:none}
.controls{font-size:12px;color:#b9aecb;margin:26px 0 4px}.tiny{font-size:10px;color:#766b88;margin:0}
#fatal{background:#14060a}#fatal pre{white-space:pre-wrap;text-align:left;max-width:800px;color:#ffc3c3}
@media (max-width:720px){#topbar{font-size:9px;padding:8px}.overlay{padding:20px}.controls{font-size:9px}}