:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#111; color:#f5f0e8; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at 50% 10%,#333 0,#171717 52%,#0b0b0b 100%); }
main { width:min(100%,1100px); padding:18px; }
.game-shell { position:relative; overflow:hidden; border:1px solid #555; border-radius:18px; background:#d7d4cc; box-shadow:0 26px 80px #000b; }
canvas { width:100%; height:auto; display:block; cursor:crosshair; touch-action:none; }
.intro { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:13px; padding:24px; color:#292929; background:#d7d4cced; }
.intro[hidden], .hud[hidden] { display:none; }
.intro h1 { margin:0; font-size:clamp(38px,7vw,82px); line-height:.88; letter-spacing:-.055em; }
.intro p { margin:0; font-family:Georgia,serif; font-size:clamp(16px,2.2vw,25px); }
.intro .eyebrow { font-family:inherit; font-weight:800; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
button { margin-top:10px; min-width:240px; border:0; border-radius:4px; padding:16px 38px; color:white; background:#c43731; font:800 24px/1 inherit; cursor:pointer; box-shadow:0 5px 0 #8f241f; }
button:hover,button:focus-visible { background:#df453e; transform:translateY(-1px); outline:3px solid #2c2c2c; outline-offset:3px; }
.intro small { margin-top:8px; font-weight:650; }
.hud { position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; pointer-events:none; color:#171717; font-size:13px; letter-spacing:.08em; }
.credit { text-align:center; color:#aaa; font-size:13px; }
.credit a { color:#eee; }
@media (max-width:650px){ main{padding:0}.game-shell{border-radius:0;border-inline:0}.credit{padding-inline:12px}.intro small{font-size:11px} }