*{box-sizing:border-box}body{margin:0;background:#101318;color:#ded9c8;font:15px system-ui}header{display:flex;align-items:center;justify-content:space-between;padding:15px 4vw;border-bottom:1px solid #444}header b{letter-spacing:.2em;color:#efac62}button{border:1px solid #917458;background:#241e1b;color:#ffe0ac;padding:13px;cursor:pointer;font:inherit}button:active{background:#996331}main{max-width:1120px;margin:auto;padding:20px}canvas{width:100%;max-height:72vh;object-fit:contain;image-rendering:pixelated;background:#000;display:block;outline:none}#stage{position:relative;border:1px solid #78634e;background:#000}.overlay{position:absolute;inset:0;background:linear-gradient(110deg,#101318f7,#201d20eb);display:flex;justify-content:center;flex-direction:column;padding:6%;z-index:2}.overlay[hidden]{display:none}h1{font-size:clamp(36px,7vw,86px);line-height:.9;letter-spacing:-.06em;margin:10px 0 24px}p{line-height:1.5;max-width:620px}.tag{letter-spacing:.16em;color:#e2a563;font-size:12px}#start{align-self:flex-start;background:#e9aa63;color:#111;font-weight:800}#status{color:#aaa}.controls{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}.pad{display:flex;gap:4px}.pad button{touch-action:none;min-width:44px;padding:12px}small{color:#b2aaa0}details{margin-top:20px;color:#aaa}pre{white-space:pre-wrap;font-size:11px}#canvas{min-height:320px}#report{color:#b9aa96;font-family:monospace}#roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}#roster img{height:80px;image-rendering:pixelated}#roster span{display:block;font-size:12px}@media(max-width:600px){main{padding:8px}.overlay{padding:6%}header{padding:10px}header b{font-size:11px}h1{font-size:42px}#canvas{min-height:300px}.pad button{padding:10px}.controls{gap:5px}p{font-size:13px}}#stage:has(#intro:not([hidden])) #canvas{display:none}#intro:not([hidden]){position:relative;align-items:center;text-align:center;padding:28px 20px}#intro h1{font-size:clamp(32px,5vw,55px);margin:12px 0}#intro #start{align-self:center}#intro p{margin:10px auto}.hero-portrait{width:min(100%,360px);height:280px;object-fit:cover;object-position:35% 55%;border:1px solid #a77745;margin-top:18px;box-shadow:0 0 35px #b95e282f}@media(max-width:600px){.hero-portrait{height:230px;width:min(100%,300px)}#intro .tag{font-size:10px}}

#volume{width:90px}

.mouse-bar{display:flex;gap:12px;align-items:center;padding:10px;background:#211d19;color:#ffe0ac}.mouse-bar span{font-size:13px}#canvas{touch-action:none}

#lumenguy-hud{position:absolute;transform:translateX(-50%);background:#162028 url('art/lumenguy-poster.png') 28.5% 35.4%/570% auto no-repeat;border:2px solid #6d9294;pointer-events:none;z-index:1;image-rendering:auto;box-shadow:0 0 8px #56d4d780}#lumenguy-hud span{position:absolute;bottom:0;left:0;right:0;background:#101820d9;color:#7de3e8;text-align:center;font:bold clamp(5px,.65vw,9px) monospace;letter-spacing:0}#stage:has(#intro:not([hidden])) #lumenguy-hud,#stage:has(#victory:not([hidden])) #lumenguy-hud{display:none}

/* Compact landscape controls for phones and small windows. */
@media (orientation:landscape) and (max-height:600px){
 header{height:40px;padding:2px 8px;font-size:11px;gap:4px}header button{padding:5px;min-height:32px}header b{font-size:9px;letter-spacing:0}header #volume{width:55px}main{padding:0 6px;max-width:none}#stage{height:calc(100dvh - 140px);min-height:0;max-width:none}#canvas{height:100%;min-height:0;max-height:none;width:100%;object-fit:contain}.mouse-bar{display:none}.controls{height:94px;margin:3px 0;gap:3px;display:flex;align-content:center;justify-content:space-between;flex-wrap:wrap}.pad{gap:3px}.pad button{min-width:38px;min-height:42px;padding:5px;font-size:11px}h1{font-size:24px!important}.overlay,#intro:not([hidden]){position:absolute;overflow:auto;justify-content:flex-start;padding:10px!important}.overlay p,#intro p{font-size:11px;margin:4px}#intro h1{margin:6px 0}.hero-portrait{display:none}#report,main>small{display:none}}
button{touch-action:none}#stage{position:relative}

@media(max-width:600px) and (orientation:portrait){header{flex-wrap:wrap;gap:4px;padding:6px}header button{padding:7px;font-size:11px}main{padding:4px}#canvas{min-height:0;height:48dvh;max-height:48dvh}.controls{gap:4px;justify-content:center}.pad{flex-wrap:wrap;justify-content:center}.pad button{padding:7px;min-width:42px;min-height:44px}.mouse-bar{display:none}main>small{display:block;font-size:11px}.hero-portrait{height:160px}}

#lumenguy-hud{background-image:url('art/lumenguy-front.webp');background-size:cover;background-position:center}

#exit-hint{position:absolute;left:5%;right:5%;top:8px;z-index:3;background:#0c1717ed;border:1px solid #69dbc8;padding:10px;color:#a5fff0;display:flex;align-items:center;gap:10px;font:bold 14px system-ui;pointer-events:none}#exit-hint[hidden]{display:none}#exit-hint button{pointer-events:auto;white-space:nowrap;padding:8px;background:#17483f}@media(max-height:600px){#exit-hint{font-size:11px;padding:5px;top:3px}#exit-hint button{font-size:11px;padding:5px}}

#spore-alert,#seal-hint{position:absolute;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;text-align:center;background:#251326ee;border:2px solid #dca3ec;color:#fff1ff;padding:8px 12px;font:bold clamp(11px,1.7vw,17px) system-ui;width:min(94%,680px);top:10px}#spore-alert.sealed,#seal-hint{border-color:#8fffc3;background:#103a2cee;color:#c9ffdc}#seal-hint{top:auto;bottom:38px;font-size:11px;padding:4px}#spore-alert[hidden],#seal-hint[hidden]{display:none}