*{box-sizing:border-box}html,body{margin:0;background:#07090f;color:#fff;font-family:Arial,sans-serif}body{min-height:100vh;display:grid;place-items:center}main{width:min(1280px,100%);padding:18px}header,footer,.hud{display:flex;align-items:center;justify-content:space-between;gap:16px}header{padding:10px 2px 18px}header b{font-size:24px}header span{display:block;color:#9da7b8;margin-top:5px}.hud{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:12px}.hud div{background:#111622;border:1px solid #252d3c;border-radius:14px;padding:13px 16px}.hud small{display:block;color:#8792a6;font-size:11px}.hud strong{font-size:21px}.stage{position:relative;background:#0d111a;border:1px solid #283143;border-radius:18px;overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}#message{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-weight:800;pointer-events:none;text-shadow:0 2px 10px #000}footer{padding:14px 4px;color:#aeb7c7}@media(max-width:700px){.hud{grid-template-columns:1fr 1fr}header b{font-size:18px}}