:root{color-scheme:dark;background:#07090b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#doom-app{width:100%;height:100%;margin:0;overflow:hidden;background:#07090b}body{overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}#doom-app{position:relative;display:grid;place-items:center;isolation:isolate}#doom-canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;outline:0;touch-action:none}.hud{position:absolute;z-index:2;color:#e6ecec;text-shadow:1px 1px #000;text-transform:uppercase;pointer-events:none}.top-hud{top:max(16px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:flex-start;gap:16px;letter-spacing:.11em}.top-hud strong{display:block;color:#ec5437;font-size:13px}.top-hud span{opacity:.72;font-size:9px}.controls{display:flex;flex-wrap:wrap;justify-content:end;gap:7px;pointer-events:auto}button{font:inherit;color:#e6ecec;border:1px solid rgb(230 236 236 / .7);background:rgb(5 8 10 / .7);padding:8px 10px;font-size:10px;letter-spacing:.07em;cursor:pointer;touch-action:none}button:hover,button:focus-visible{background:#ec5437;border-color:#ec5437;outline:0}button:disabled{opacity:.5;cursor:wait}.status{left:max(18px,env(safe-area-inset-left));bottom:max(17px,env(safe-area-inset-bottom));margin:0;font-size:10px;letter-spacing:.1em;opacity:.82}.controls-hint{left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);margin:0;padding:8px 10px;background:rgb(5 8 10 / .72);font-size:9px;letter-spacing:.08em;animation:hint-fade 8s ease forwards}.controls-hint span{color:#ec5437}@keyframes hint-fade{0%,70%{opacity:1}100%{opacity:0}}.overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;text-align:center;background:rgb(4 6 7 / .88);color:#e6ecec;letter-spacing:.08em}.start-card{padding:28px}.eyebrow{margin:0 0 14px;color:#a7e875;font-size:10px}.start-card h1{margin:0;color:#ec5437;font-size:clamp(34px,7vw,62px);line-height:.88;letter-spacing:-.07em}.start-card>p:not(.eyebrow){margin:18px 0 24px;color:#c7cece;font-size:12px}.start-card .primary{min-width:170px;border-color:#ec5437;background:#bc3d29;padding:13px 18px;font-weight:700}.start-card .primary:hover{background:#ec5437}.loading{z-index:4;font-size:13px}.loading p::after{content:"";display:inline-block;width:.6em;height:.6em;margin-left:.7em;border:1px solid #a7e875;border-left-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.rotate{z-index:8;gap:6px;align-content:center}.rotate p{margin:0;color:#ec5437;font-size:44px}.rotate strong{font-size:15px}.rotate small{color:#a7e875;font-size:10px}.error{position:absolute;z-index:9;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);max-width:min(620px,calc(100% - 32px));margin:0;padding:12px;background:#6b211d;color:#fff;font-size:12px}#touch-controls{display:none;position:absolute;z-index:3;inset:0;pointer-events:none}#joystick{position:absolute;left:max(8vw,env(safe-area-inset-left));bottom:max(9vh,env(safe-area-inset-bottom));width:108px;height:108px;border:1px solid rgb(230 236 236 / .45);border-radius:50%;background:rgb(5 8 10 / .25);pointer-events:auto;touch-action:none}#joystick i{position:absolute;top:32px;left:32px;width:42px;height:42px;border-radius:50%;background:rgb(236 84 55 / .76)}.touch-actions{position:absolute;right:max(7vw,env(safe-area-inset-right));bottom:max(8vh,env(safe-area-inset-bottom));display:grid;grid-template-columns:58px 78px;gap:9px;align-items:end;pointer-events:auto}.touch-actions button{background:rgb(5 8 10 / .62);font-size:9px}.touch-actions #fire{grid-row:span 2;width:78px;height:78px;border-radius:50%;border-color:#ec5437;background:rgb(180 40 30 / .76)}.touch-actions #weapon,.touch-actions #use{height:34px}@media(pointer:coarse){.top-hud{top:max(9px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right))}.top-hud strong{font-size:10px}.top-hud span{font-size:8px}.controls{gap:4px}.controls button{padding:6px;font-size:8px}.status{left:max(10px,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));font-size:8px}.controls-hint{display:none}#touch-controls{display:block}}@media(pointer:coarse) and (orientation:portrait){#rotate:not([hidden]){display:grid}#touch-controls{visibility:hidden;pointer-events:none}}