:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#eceada;background:#111a1d}*{box-sizing:border-box}body{margin:0}header{max-width:1400px;margin:auto;padding:20px 25px;display:flex;align-items:center;justify-content:space-between;gap:16px}header a{color:#e3c387;text-decoration:none}header span{font-size:12px;letter-spacing:2px;color:#9ba9a5}button{font:inherit;cursor:pointer;border:1px solid #8c876b;background:#273832;color:#ecdfbd;border-radius:8px;padding:10px 16px}main{max-width:1400px;padding:0 25px 25px;margin:auto}.frame{position:relative;height:min(78vh,820px);min-height:440px;border:1px solid #66745f;border-radius:14px;overflow:hidden;background:#1a262c}canvas{width:100%;height:100%;display:block}.hud{position:absolute;top:24px;left:28px;right:28px;display:flex;justify-content:space-between;pointer-events:none}.hud>div{min-width:110px}.hud small{display:block;font-size:12px;letter-spacing:1.8px;color:#d1d6bc;text-shadow:0 2px 5px #000}.hud b{font-size:36px;font-variant-numeric:tabular-nums;text-shadow:0 2px 5px #000}.timer{text-align:center}.hud>div:last-child{text-align:right}.hp-bar{height:4px;background:#303b32;width:120px;margin-top:5px}#hp-fill{width:100%;height:100%;background:#d4b478}.crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:28px monospace;color:#fff9d8;text-shadow:0 0 3px #000;pointer-events:none}#hitmarker{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:44px monospace;color:#ffca72;opacity:0;pointer-events:none}#hurt{position:absolute;inset:0;box-shadow:inset 0 0 150px #be302f;opacity:0;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#101c22a8;backdrop-filter:blur(3px);padding:20px}.overlay.hidden{display:none}.overlay-card{max-width:620px;text-align:center;background:#142023e8;border:1px solid #8f92605e;border-radius:18px;padding:35px}.eyebrow{font-size:12px;letter-spacing:2px;color:#c7b88b}h1{font-size:clamp(30px,4vw,55px);letter-spacing:2px;margin:16px 0;color:#f3dda7}.overlay-card p{line-height:1.65;color:#c8d0c5}.overlay-card #overlay-meta{font-size:14px}.overlay-card button{background:#e4c38b;color:#172622;border:0;font-weight:700;padding:15px 40px;min-width:180px}.desktop-note{font-size:12px}.bottom-hud{position:absolute;bottom:18px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:12px;color:#cad1b5;pointer-events:none;letter-spacing:1px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;font-size:14px;color:#afc0b1}footer label{display:flex;gap:12px;align-items:center}input{accent-color:#e4c38b}details{font-size:12px;color:#92a79e}details a{color:#d8c491}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #e6be72;outline-offset:3px}@media(max-width:700px){header{padding:14px}header span{display:none}main{padding:0 10px 18px}.frame{height:70vh;min-height:440px}.hud{left:12px;right:12px;top:14px}.hud>div{min-width:70px}.hud small{font-size:10px;letter-spacing:.5px}.hud b{font-size:28px}.hp-bar{width:70px}.overlay-card{padding:20px}.bottom-hud{font-size:10px;left:12px;right:12px}footer{flex-direction:column;align-items:flex-start;gap:2px}}