:root{color-scheme:dark;--ink:#0c1710;--paper:#f2efd8;--muted:#afbea5;--mint:#def498;--line:#c9e7ac34;--panel:#102017ec;font-family:system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#14261a;color:var(--paper);overflow:hidden}button,input{font:inherit}button{cursor:pointer;border:1px solid var(--line);background:#24382a;color:var(--paper);border-radius:7px;padding:10px 13px;font-weight:700;transition:background .15s,border-color .15s}button:hover,button:focus-visible{background:#36513a;border-color:var(--mint);outline:none}button.primary{background:var(--mint);color:#142213;border-color:var(--mint)}button.primary:hover{background:#f1ffc4}button b{font-size:17px;line-height:1}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}
#view,#view>canvas,#shade,#damage{position:absolute;inset:0;width:100%;height:100%}#view>canvas{display:block}#shade{pointer-events:none;background:linear-gradient(90deg,#0d1713fa 0%,#101c15f3 23%,#142319d2 37%,#14231937 65%,transparent 100%),linear-gradient(0deg,#101b14d9,transparent 26%);z-index:1}.playing #shade{background:linear-gradient(180deg,#0e1a1680,transparent 27%,transparent 78%,#0e1a1680)}#damage{z-index:7;pointer-events:none;box-shadow:inset 0 0 130px 16px #bd3428;opacity:0}
.menu{position:absolute;z-index:2;inset:0;padding:clamp(18px,4vh,42px) clamp(24px,5.8vw,100px);overflow:auto}.mast{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:900;letter-spacing:.18em}.mast small{display:block;color:#b4c3a7;font-size:8px;margin-top:2px;letter-spacing:.25em}.mark{display:grid;place-items:center;width:39px;height:39px;border:1px solid #bdde82;color:var(--mint);border-radius:50%;font-size:22px;letter-spacing:0}.edition{margin-left:auto;font-size:10px;color:#f1f6d8;padding:8px 11px;border:1px solid #e4efd86b;border-radius:4px;background:#14231980}.hero-copy{margin-top:clamp(32px,8vh,96px);max-width:500px}.eyebrow,.setup-title,.menu-footer,.postcard span{font-weight:800;letter-spacing:.2em;font-size:10px;color:var(--mint)}.eyebrow>span{display:inline-block;width:22px;border-top:1px solid var(--mint);margin-right:7px;vertical-align:middle}.hero-copy h1{font-family:Georgia,serif;font-size:clamp(69px,10.4vw,151px);font-weight:400;letter-spacing:-.095em;line-height:.79;margin:16px 0 24px}.hero-copy em{font-weight:400;color:#d6ef9a}.hero-copy p{max-width:340px;color:#c8d1bc;line-height:1.5;font-size:14px;margin-bottom:24px}.setup{max-width:444px}.setup-title{margin:12px 0 8px;color:#98b389}.setup-title span{padding-left:8px;color:var(--paper)}.heroes,.modes,.gear{display:flex;gap:7px}.heroes button{flex:1;display:flex;align-items:center;gap:7px;text-align:left;min-width:0;padding:8px;background:#172a1fdf}.heroes button[aria-pressed=true]{border-color:#c9e884;background:#304431}.avatar{display:grid;place-items:center;min-width:24px;height:28px;background:var(--swatch);color:#101c13;border-radius:3px;font-size:14px}.heroes small{display:block;font-size:9px;font-weight:500;color:var(--muted);white-space:nowrap}.modes button{flex:1;display:flex;justify-content:space-between;align-items:center;gap:8px}.menu-footer{display:flex;gap:18px;margin-top:24px;color:#aab79e;font-size:8px}.postcard{position:absolute;right:5.8vw;bottom:7vh;text-align:right;text-shadow:0 2px 8px #0a1b10;display:grid;gap:6px}.postcard strong{font:italic clamp(26px,4vw,62px) Georgia,serif}.postcard i{display:inline-block;margin:0 5px;width:12px;border-top:1px solid #d0e8ae;vertical-align:middle}#room-form{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:6px}#room-form label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}input{display:block;width:100%;border:1px solid var(--line);border-radius:4px;background:#101d15;color:var(--paper);padding:6px;margin-top:3px}#error{color:#ffb69d;font-size:12px;margin-top:7px}
#hud{position:absolute;inset:0;z-index:2;pointer-events:none}.panel{background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 20px #07110a45}.hud-top,.hud-bottom{position:absolute;inset-inline:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.hud-top{top:16px}.hud-bottom{bottom:16px;align-items:end}.mission,.stats,.vital{padding:12px 14px;min-width:145px}.mission h2{margin:5px 0;font:26px Georgia,serif}.objective{font-size:12px;color:#dbe3d1}.progress{height:4px;background:#304232;border-radius:4px;margin-top:8px;overflow:hidden}.progress i{display:block;height:100%;background:var(--mint);transition:width .15s}.stats strong{display:block;font:30px Georgia,serif}.stats{text-align:right}#award{font-size:9px;color:var(--mint);letter-spacing:.13em}.radar{padding:6px 7px;width:min(228px,28vw)}.radar>div,.vital>div:first-child{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px;font-weight:800;letter-spacing:.1em;color:var(--muted)}.radar canvas{width:100%;height:auto;display:block;margin:4px 0;border-radius:4px}.radar button{pointer-events:auto;padding:2px 4px;font-size:9px}#crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:20px;color:#f7fbe9d9;text-shadow:0 1px 5px #000}.gear{padding:5px;pointer-events:auto}.gear button{padding:6px;font-size:10px}.gear button.active{color:var(--mint);border-color:#b8d677}.gear kbd,.help-line kbd{color:#fff;border:1px solid var(--line);padding:2px 4px;border-radius:3px}.help-line{font-size:10px;color:#fff;background:#132018e3;padding:7px;border-radius:5px;text-align:center}.help-line kbd{margin-left:4px}#prompt,#toasts{position:absolute;left:50%;transform:translateX(-50%);text-align:center}#prompt{top:58%;background:#122218ed;border:1px solid var(--line);padding:8px 13px;border-radius:6px;font-size:12px}#toasts{bottom:88px;display:grid;gap:4px}.toast{background:#142b1cef;border:1px solid var(--line);border-radius:5px;padding:6px 10px;font-size:12px}.toast.award{color:var(--mint)}.toast.warn{color:#ffbaa1}#overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#08120c99}.dialog{padding:26px;max-width:min(420px,90vw);width:100%}.dialog h2{font:36px Georgia,serif;margin:8px 0}.dialog p{color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:700px){.postcard{display:none}.help-line{display:none}.hud-top,.hud-bottom{inset-inline:7px}.mission,.stats,.vital{min-width:0;padding:7px}.mission h2{font-size:16px}.eyebrow{font-size:8px}.gear{gap:2px}.gear button{font-size:8px}.menu{padding-inline:16px}}@media(max-height:690px){.hero-copy{margin-top:23px}.hero-copy h1{font-size:78px;margin-bottom:12px}.hero-copy p{margin-bottom:10px}.menu-footer{margin-top:12px}}


#sound-toggle{position:absolute;z-index:6;right:max(18px,env(safe-area-inset-right));bottom:max(80px,calc(64px + env(safe-area-inset-bottom)));font-size:11px;min-height:36px;background:#122418ec;color:#def498}
#view:not(.playing) #sound-toggle{bottom:max(14px,env(safe-area-inset-bottom));right:max(14px,env(safe-area-inset-right))}
#touch-controls,.touch-hint{display:none}
.touch-ui #touch-controls{display:block}.touch-ui .touch-hint{display:inline}.touch-ui .desktop-hint,.touch-ui .help-line{display:none}
.touch-ui.playing>canvas,.touch-ui #touch-controls button,.touch-ui #stick{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-ui .hud-top{top:max(7px,env(safe-area-inset-top));left:max(7px,env(safe-area-inset-left));right:max(7px,env(safe-area-inset-right))}
.touch-ui .hud-bottom{bottom:max(6px,env(safe-area-inset-bottom));left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));gap:5px}
.touch-ui .mission,.touch-ui .stats,.touch-ui .vital{min-width:0;padding:6px 7px}
.touch-ui .mission h2{font-size:clamp(14px,3.5vw,20px)}
.touch-ui .stats strong{font-size:22px}
.touch-ui .objective{font-size:10px}
.touch-ui .radar{width:clamp(85px,27vw,162px)}
.touch-ui .gear button{min-height:42px;font-size:10px;padding-inline:5px}
.touch-ui .gear kbd{display:none}
.touch-ui .radar button{min-height:28px}
.touch-ui #toasts{bottom:clamp(185px,31vh,240px);width:min(68vw,340px)}
.touch-ui #prompt{top:auto;bottom:clamp(165px,28vh,212px);max-width:80vw;width:max-content;padding:4px 8px}
.touch-ui #sound-toggle{min-height:40px}
.touch-ui.playing #sound-toggle{top:max(111px,calc(104px + env(safe-area-inset-top)));right:max(8px,env(safe-area-inset-right));bottom:auto}
#touch-pause{position:absolute;top:max(111px,calc(104px + env(safe-area-inset-top)));left:max(8px,env(safe-area-inset-left));width:44px;height:44px;padding:0;font-size:20px}
.touch-movement,.touch-actions{position:absolute;bottom:max(67px,calc(64px + env(safe-area-inset-bottom)));display:flex;flex-direction:column;gap:5px;align-items:center}
.touch-movement{left:max(9px,env(safe-area-inset-left));width:133px}
.touch-actions{right:max(9px,env(safe-area-inset-right));align-items:flex-end}
#touch-controls button,#stick{pointer-events:auto;background:#10251dcf;border:1px solid #c0e79875}
#touch-controls button:active,#touch-controls button.held{background:#486747;color:#fff}
#move-mode{min-height:37px;padding:3px 9px;font-size:10px}
#stick{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 11px #a8cb8522;background-image:linear-gradient(90deg,transparent 49%,#bce29038 50%,transparent 51%),linear-gradient(0deg,transparent 49%,#bce29038 50%,transparent 51%)}
#stick-knob{pointer-events:none;width:47px;height:47px;border-radius:50%;background:#d9ef9be0;border:2px solid #e6f9b4;box-shadow:0 3px 12px #07130980}
#dpad{height:108px;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,48px);gap:3px;align-content:center}
#dpad button{font-size:22px;padding:0}
#dpad button:first-child{grid-column:2}
#dpad button:nth-child(2){grid-row:2;grid-column:1}
#dpad button:nth-child(3){grid-row:2;grid-column:2}
#dpad button:nth-child(4){grid-row:2;grid-column:3}
.touch-actions button{min-height:48px;min-width:66px;padding:7px 11px}
#touch-controls #touch-jump{background:#def498;color:#132213;min-width:82px;min-height:52px}
#touch-controls #touch-jump:active,#touch-controls #touch-jump.held{background:#fcffd1}
@media (pointer:coarse){button{min-height:44px}input{font-size:16px}.touch-ui .menu{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.touch-ui .menu-footer{padding-bottom:40px}}
@media (orientation:landscape) and (max-height:490px){.touch-ui .radar{width:100px}.touch-ui.playing #sound-toggle,#touch-pause{top:max(102px,calc(96px + env(safe-area-inset-top)))}.touch-ui #toasts{bottom:54px;width:40vw}.touch-ui #prompt{bottom:102px}}

#view{height:100dvh}.touch-ui #move-mode{min-height:44px}
.touch-ui .radar>div:first-child{font-size:8px;letter-spacing:.05em;white-space:nowrap}