:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#d4dfd8;background:#071114;--mint:#addec7;--rust:#d57b51}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:var(--mint);background:#12282b;border:1px solid #47716b;padding:12px 18px;touch-action:none}button:hover{background:#23413f}button:focus-visible,input:focus-visible{outline:2px solid #e9c477}#game{width:100vw;height:100dvh;display:block;touch-action:none;transition:filter .9s ease}
#menu{position:absolute;inset:0;padding:7vh 8vw;background:linear-gradient(90deg,#081315f5 0%,#081315c9 38%,transparent 80%);display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-size:11px;letter-spacing:3px;color:#9cb5aa}h1{font-size:clamp(64px,9vw,128px);line-height:.85;letter-spacing:-5px;margin:32px 0 23px;font-weight:900}h1 span{color:var(--mint)}.tagline{font-size:17px;line-height:1.7;color:#a5b7b1}.join{width:300px;margin-top:16px}.join label{font-size:10px;letter-spacing:2px;display:block;margin-bottom:9px}input{width:100%;padding:13px;background:#102326;border:1px solid #3b5855;color:white}.join button{width:100%;margin-top:10px;text-align:left;background:var(--mint);color:#122323;font-weight:bold;font-size:12px;letter-spacing:1px}.join button span{float:right}.join p{font-size:10px;color:#92a9a2;line-height:1.6}.menuFooter{margin-top:auto;display:flex;gap:60px;font-size:10px;letter-spacing:2px;color:#758e87}header{position:absolute;top:24px;left:30px;right:30px;display:flex;gap:12px;align-items:center}.brand{font-weight:900;font-size:21px;letter-spacing:-1px}.brand span{color:var(--mint)}.brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:5px;font-weight:normal}#objective{margin-left:auto;font-size:14px;letter-spacing:2px;color:var(--mint)}header button{font-size:10px;padding:8px}#location{position:absolute;top:103px;left:30px;font-size:12px;letter-spacing:2px;color:#adc2b8}#map{position:absolute;right:30px;top:93px;width:312px;height:312px;cursor:pointer;border-radius:50%;-webkit-mask-image:radial-gradient(circle closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 68%,transparent 100%)}#map.expanded{width:min(88vw,88vh);height:min(88vw,88vh);top:calc(50vh - min(44vw,44vh));right:calc(50vw - min(44vw,44vh));z-index:5;border-radius:18px;background:#071416c4;-webkit-mask-image:none;mask-image:none}#mapCaption{position:absolute;right:30px;top:413px;font-size:8px;letter-spacing:1.3px;color:#89a79a}#sidebar{position:absolute;left:30px;top:135px}#team{position:absolute;top:104px;left:50%;transform:translateX(-50%);font-size:11px;color:#a6bcb3;pointer-events:none;text-align:center}#team .mates{display:flex;justify-content:center;gap:14px;flex-wrap:nowrap}#team .reserve{text-align:center}#team .mate{width:58px;text-align:center;line-height:1.25}#team .face{position:relative;width:46px;height:46px;margin:0 auto 4px;border-radius:50%;border:3px solid var(--ring);background:#0b1517;overflow:hidden;box-shadow:0 2px 6px #0008}#team .face canvas{width:100%;height:100%;display:block}#team .you .face{box-shadow:0 0 0 2px #fff,0 2px 6px #0008}#team b{display:block;font-size:12px;color:var(--ring);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#team small{display:block;font-size:9px;letter-spacing:.5px;color:#8fa79d;min-height:11px}#team .caught .face canvas{filter:grayscale(.7) brightness(.6)}#team .caught small{color:#ff5a46}#team .x{display:none;position:absolute;inset:0}#team .caught .x{display:block}#team .x::before,#team .x::after{content:'';position:absolute;left:50%;top:50%;width:120%;height:5px;background:#e8231a;border-radius:3px;box-shadow:0 0 4px #000;transform:translate(-50%,-50%) rotate(45deg)}#team .x::after{transform:translate(-50%,-50%) rotate(-45deg)}#team .offline{opacity:.5}
#tasks{font-size:18px;line-height:1.5;color:#e6dcb4;margin-bottom:14px}#tasks small{display:block;font-size:10px;letter-spacing:2px;color:#77998c;margin-bottom:4px}#tasks .task{display:flex;align-items:center;gap:10px;padding:2px 0;overflow:hidden;white-space:nowrap;transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .45s ease-in,height .3s ease,padding .3s ease}#tasks .box{flex:none;width:15px;height:15px;border:2px solid currentColor;border-radius:3px;position:relative;opacity:.85}#tasks .done{color:#9fe07a}#tasks .done .box::after{content:'';position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #9fe07a;border-width:0 3px 3px 0;transform:rotate(45deg);animation:taskTick .25s ease-out}#tasks .leaving{transform:translateX(-120%);opacity:0}#tasks .closing{padding:0}#tasks .urgent{color:#ff6b55;animation:taskPulse 1.2s ease-in-out infinite}@keyframes taskTick{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}@keyframes taskPulse{50%{opacity:.5}}#hud.clownMode #tasks{display:none}#notice{position:absolute;top:24%;left:25%;width:50%;text-align:center;color:#efd6a8;font-size:14px;text-shadow:0 2px 5px #000}#interaction{display:none}#passage{margin-top:5px;color:#a8d3c1;font-size:8.5px;letter-spacing:1px}#track{height:4px;margin-top:12px;background:#28433e}#progress{display:block;height:100%;background:#b8eacb;width:0}#hotbar{position:absolute;bottom:50px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.slot{width:110px;height:66px;text-align:left;padding:8px 10px;background:#09191be8;border:1px solid #3b5751;font-size:11px;color:#bbc9bd}.slot.selected{border-color:#c1e9c7;box-shadow:0 0 16px #94d4b31a}.slot .uses{display:flex;gap:3px;margin-top:6px;width:64px}
.slot .uses i{flex:1;height:4px;background:#2c3d39;border-radius:1px}
.slot .uses i.on{background:#c1e9c7}
.slot small{display:block;font-size:9px;color:#77998c;margin-bottom:10px}.slot b{float:right;color:#e0cda1}#hint{position:absolute;bottom:30px;width:100%;text-align:center;font-size:9px;letter-spacing:1px;color:#80988e}#effects{position:absolute;bottom:135px;left:30px;font-size:12px;color:#ddd4a1}#useButton,#dropButton{position:absolute;bottom:64px;font-size:10px;padding:12px}#useButton{left:calc(50% + 245px)}#dropButton{right:calc(50% + 245px)}#touch{display:none;position:absolute;bottom:26px;left:22px;right:22px;gap:10px;pointer-events:none}#touch button{pointer-events:auto;width:65px;height:65px;background:#153032df}#touch .spacer{margin-left:auto}#touch #lightButton,#touch #cycleButton{font-size:10px;padding:0}#touch #upButton,#touch #downButton{font-size:20px;line-height:1;padding:0}#touch small{font-size:8px;letter-spacing:1px}#touch #actionButton{width:85px;font-size:10px}dialog{max-width:540px;max-height:85dvh;background:#102225;color:#b9cdc2;border:1px solid #4b7065;padding:28px;font-size:13px;line-height:1.7}dialog::backdrop{background:#000b}dialog h2{color:#d2ecd7;font-size:25px}dialog button{width:100%}#blackout,#victory{position:absolute;inset:0;background:#03080aed;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px}#blackout h2{font-weight:normal;letter-spacing:4px;color:#c1c6b9}#blackout p{color:#879f92}#victory h1{font-size:clamp(50px,8vw,110px)}[hidden]{display:none!important}@media(pointer:coarse){#touch{display:flex}#hint{display:none}#hotbar{bottom:110px}.slot{width:86px;height:57px}#useButton,#dropButton{bottom:124px;font-size:9px;padding:10px}#useButton{left:calc(50% + 194px)}#dropButton{right:calc(50% + 194px)}#effects{bottom:175px}#map{width:210px;height:210px;right:15px;top:80px}#mapCaption{display:none}header{top:15px;left:18px;right:18px}#location{top:88px;left:18px}#sidebar{top:115px;left:18px}#notice{top:32%;left:20%;width:60%}}@media(max-height:650px){#menu{padding:5vh 6vw}h1{font-size:65px;margin:20px 0 10px}.tagline{font-size:13px;margin:8px 0}.join{margin-top:8px}.menuFooter{display:none}#map{width:210px;height:210px}#mapCaption{display:none}}
:root #hud{position:absolute;inset:0;pointer-events:none}#hud button,#hud #map{pointer-events:auto}
html,body,canvas,button,button *,#hud,#hud *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea{-webkit-user-select:text;user-select:text}button,button *{-webkit-tap-highlight-color:transparent}button *{pointer-events:none}

button:disabled{opacity:.38;cursor:default}#lightButton.off{color:#d9a27e;border-color:#7a5442}

@media(pointer:coarse) and (max-width:720px){#touch button{width:52px;height:56px}#touch #actionButton{width:70px}#touch{gap:6px;left:10px;right:10px}}
#levelName{position:absolute;top:20px;opacity:.3;pointer-events:none;left:0;right:0;text-align:center;font-size:26px;font-weight:bold;letter-spacing:4px;color:#cfe6d6;text-shadow:0 1px 4px #000}
/* Bloodlust: HIDE across the whole screen, edge to edge and 56% of its height, fading between 7% and 0% every 2s. */
#hideWarn{position:absolute;left:0;top:22vh;width:100vw;height:56vh;pointer-events:none;animation:hidePulse 1s ease-in-out infinite alternate}#hideWarn[hidden]{display:none}#hideWarn svg{display:block;width:100%;height:100%;overflow:visible}#hideWarn text{font:900 140px Arial,Helvetica,sans-serif;fill:#ff3b2b}@keyframes hidePulse{from{opacity:.07}to{opacity:0}}
#alert{position:absolute;bottom:calc(33vh + 6px);left:0;right:0;text-align:center;font-size:38px;line-height:1;font-weight:900;letter-spacing:6px;color:#ff3b2b;text-shadow:0 0 8px #000,0 0 22px #c0100a;animation:alertPulse .8s ease-in-out infinite alternate;pointer-events:none}@media(pointer:coarse){#alert{font-size:30px}}@keyframes alertPulse{from{opacity:.65}to{opacity:1}}
#intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 45%,#0a1719ee,#020607fa);transition:opacity .7s;z-index:5;pointer-events:none}#intro.gone{opacity:0}#intro h1{font-size:clamp(46px,8vw,104px);letter-spacing:-3px}#intro p{color:#a5b7b1;font-size:16px;letter-spacing:1px}
@media(pointer:coarse){#levelName{top:62px;font-size:18px}}
#powerOut{position:absolute;top:56px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:14px;pointer-events:none;font-size:30px;font-weight:bold;letter-spacing:8px;color:#ff4a3a;text-shadow:0 0 10px #ff1a0a88,0 1px 3px #000;animation:powerOutPulse 1.6s ease-in-out infinite}
#powerOut[hidden]{display:none}#powerOut .bolt{width:.95em;height:.95em;fill:currentColor;filter:drop-shadow(0 0 6px #ff1a0aaa)}#powerOut span{margin-right:-8px}
@keyframes powerOutPulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(pointer:coarse){#powerOut{top:86px;font-size:26px;gap:10px;letter-spacing:6px}#team{top:126px}}
#joinClown.secondary{background:#3a1512;color:#f2b0a5;border-color:#7a2f27}#hud.clownMode #hotbar,#hud.clownMode #lightButton{display:none}
/* The clown's gauges: Bloodlust and the jumpscare cooldown, and what he is carrying. */
#gauges{display:none;position:absolute;left:30px;bottom:170px;align-items:flex-end;gap:14px}
#hud.clownMode #gauges{display:flex}
.gauge{position:relative;width:64px;text-align:center}
.gauge svg{width:64px;height:64px;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:5}
.gauge .track{stroke:#ffffff1f}
.gauge .fill{stroke:#a3302a;stroke-linecap:round;stroke-dasharray:125.66;stroke-dashoffset:125.66;transition:stroke-dashoffset .2s}
#scareGauge .fill{stroke:#9d8fd0}
.gauge.ready .fill{stroke:#ff4b3a;filter:drop-shadow(0 0 4px #ff4b3a)}
#scareGauge.ready .fill{stroke:#c9b8ff;filter:drop-shadow(0 0 4px #c9b8ff)}
.gauge b{position:absolute;top:0;left:0;width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#efe6c8}
.gauge small{display:block;font-size:8px;letter-spacing:1.4px;color:#c8b9a0;margin-top:2px}
#kit{font-size:10px;letter-spacing:1.2px;color:#ddd4a1;line-height:1.8;padding-bottom:14px}
#kit b{color:#fff3c4}
@media(pointer:coarse){#gauges{bottom:215px;left:18px}}
/* A kid's timed buffs: a draining ring round the item's icon, seconds underneath. */
#buffs{position:absolute;left:30px;bottom:165px;display:flex;gap:12px;pointer-events:none}
#hud.clownMode #buffs{display:none}
.buff{position:relative;width:48px;text-align:center}
.buff svg{width:48px;height:48px;transform:rotate(-90deg)}
.buff circle{fill:none;stroke-width:4}
.buff .track{stroke:#ffffff1f}
.buff .fill{stroke:#c1e9c7;stroke-linecap:round;stroke-dasharray:125.66;transition:stroke-dashoffset .2s linear}
.buff i{position:absolute;left:8px;top:8px;width:32px;height:32px;background:url(assets/tiny-dungeon/Tilemap/tilemap_packed.png) 0 0/384px 352px;image-rendering:pixelated}
.buff.gear .fill{stroke:#e8c97a;stroke-dashoffset:0}.buff.gear i{image-rendering:auto}
.buff small{display:block;font-size:8px;letter-spacing:1px;color:#c8d6c8;margin-top:1px}
@media(pointer:coarse){#buffs{bottom:210px;left:18px}}
#team .reserve{color:#8fa79d;font-size:10px;margin-top:4px}#victory.lost h1 span{color:#e0574b}
/* Out of kids and watching a friend: nothing of your own to use. */
#hud.spectating:not(.watchingKid) #hotbar,#hud.spectating #hint,#hud.spectating #actionButton,#hud.spectating #useButton,#hud.spectating #dropButton,#hud.spectating #lightButton,#hud.spectating #cycleButton,#hud.spectating #upButton,#hud.spectating #downButton{display:none}

#cheats{position:absolute;top:440px;right:30px;width:180px;padding:10px 12px;background:#081719ee;border:1px solid #2f4a44;font-size:12px;color:#d9e6dc;z-index:20;pointer-events:auto}#cheats small{display:block;font-size:9px;letter-spacing:2px;color:#77998c;margin-bottom:8px}#cheats label{display:flex;align-items:center;gap:8px;cursor:pointer;letter-spacing:1px;margin-top:6px}#cheats input{accent-color:#ffd23a;width:16px;height:16px}#cheats select{margin-left:auto;background:#0c2226;color:#d9e6dc;border:1px solid #2f4a44;font:inherit;font-size:10px;padding:2px}
#fps{position:absolute;right:12px;bottom:8px;padding:2px 7px;background:#000a;font:bold 11px monospace;color:#8fe0a0;z-index:20}#fps.slow{color:#ffd23a}#fps.bad{color:#ff6b55}
#net{position:absolute;right:12px;bottom:110px;padding:5px 8px 6px;background:#000c;border:1px solid #ffffff1a;pointer-events:none;font:bold 11px monospace;color:#8fe0a0;z-index:20}#net.slow{color:#ffd23a}#net.bad{color:#ff6b55}#netText{white-space:pre;line-height:1.35}#netChart{display:block;width:380px;height:110px;margin-top:5px}
#cheats button{margin-top:10px;width:100%;padding:6px;font-size:10px;letter-spacing:1px}

/* The Emperess's summoning meter, bottom centre: three segments (60s, 120s, for good). */
#summon{position:absolute;left:50%;bottom:172px;transform:translateX(-50%);width:min(760px,calc(100vw - 360px));min-width:300px;text-align:center;pointer-events:none;font-size:22px;letter-spacing:6px;color:#c9a6f0}
#summon .segs{display:flex;gap:12px}
#summon i{position:relative;flex:1;height:30px;background:#1d1326cc;border:2px solid #6b3fa0;border-radius:4px;overflow:hidden;font-style:normal}
#summon i b{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#5a1f9a,#b05aff);transition:width .25s linear}
#summon i em{position:absolute;inset:0;font-style:normal;font-size:14px;line-height:30px;letter-spacing:2px;color:#f1e4ff;opacity:.7}
#summon i.spent{border-color:#3a2550}#summon i.spent b{background:#3a2550}
#summon i.ready{border-color:#e2c2ff;box-shadow:0 0 20px #b05aff}#summon i.ready b{animation:summonPulse .6s ease-in-out infinite alternate}
#summon .state{min-height:30px;margin-bottom:8px;font-size:24px;font-weight:700;color:#e2c2ff;text-shadow:0 0 14px #7a2cc0}
#summon .name{margin-top:6px;font-size:16px;opacity:.75}
#summon.chanting .state{animation:summonPulse .35s ease-in-out infinite alternate}
@keyframes summonPulse{from{filter:brightness(1)}to{filter:brightness(1.7)}}
@media(pointer:coarse){#summon{bottom:215px;font-size:18px}#summon .state{font-size:20px}}
/* Spectating: who you are watching, large, at the bottom (where the hotbar is when you play). */
#spectate{position:absolute;left:0;right:0;bottom:52px;text-align:center;pointer-events:none;color:#e6dcb4;text-shadow:0 0 10px #000}
#spectate[hidden]{display:none}
#spectate b{display:block;font-size:44px;font-weight:900;letter-spacing:10px;line-height:1}
#spectate small{display:block;margin-bottom:8px;font-size:11px;letter-spacing:3px;color:#9fb8ac}
@media(pointer:coarse){#spectate{bottom:112px}#spectate b{font-size:34px}}
/* Watching a kid: their inventory, a little smaller and only to look at, where yours would be; the name (and the summon meter) above it. */
#hud.watchingKid #hotbar{transform:translateX(-50%) scale(.8);transform-origin:bottom center}
#hud.watchingKid #hotbar,#hud.watchingKid #hotbar *{pointer-events:none}
#hud.watchingKid #spectate{bottom:132px}#hud.watchingKid #summon{bottom:205px}
@media(pointer:coarse){#hud.watchingKid #spectate{bottom:180px}#hud.watchingKid #summon{bottom:245px}}
@media(pointer:coarse) and (max-height:520px){#hud.watchingKid #spectate{bottom:72px}#hud.watchingKid #summon{bottom:136px}}
#debugButton.on{background:#e8d27a;color:#111;border-color:#e8d27a}

/* The SETTINGS dialog: a column of labelled controls. */
#settings h3{margin:18px 0 8px;font-size:11px;letter-spacing:3px;color:#77998c}
#settings .settings{display:grid;gap:10px}
#settings label{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;letter-spacing:2px}
#settings select{min-width:190px}
#settings .settings-note{min-height:1.4em;margin:14px 0 10px;font-size:11px;color:#e8d27a}

/* Tap-button choices (in place of dropdowns): a row of buttons, the chosen one lit. */
.choice{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.choice button,dialog .choice button{width:auto;flex:0 0 auto;padding:7px 9px;font-size:10px;letter-spacing:1px;min-width:40px}
.choice button.on{background:#e8d27a;color:#111;border-color:#e8d27a}
#settings .row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-width:0;font-size:12px;letter-spacing:2px}
#cheats .row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px;letter-spacing:1px}
#cheats .choice button{margin-top:0;width:auto;padding:3px 5px;font-size:9px;min-width:0}
#settings{max-width:620px}#settings .row .choice{flex:1 1 auto}

/* The gear slot, after the hotbar: the buff item you wear. */
.slot.gear{border-style:dashed;border-color:#5d5a7a;color:#8f8ca8}.slot.gear.worn{border-style:solid;border-color:#9a86d8;color:#e4dcff}

/* Three selectable item slots, followed by the separate gear slot. */
#hotbar{align-items:center}#hotbar .slot{pointer-events:auto;touch-action:none;user-select:none}#hotbar .slot.item.selected{border-color:#c1e9c7;color:#e4efe7;box-shadow:0 0 16px #94d4b34d}#hotbar .slot.gear{margin-left:8px}#hotbar .slot.empty{opacity:.55}
.slot .pips{display:flex;gap:4px;margin-top:7px}.slot .pips i{width:9px;height:9px;border-radius:50%;border:1px solid #9fb8a8}.slot .pips i.on{background:#d5e6da}
#dragGhost{position:fixed;pointer-events:none;z-index:50;padding:6px 10px;background:#0d2224ee;border:1px solid #9fb8a8;font-size:11px;color:#e6efe8;transform:translate(-50%,-130%)}

/* The top: no section and clock line, the tasks at the very top, the children home as a row of figures over the team. */
#location{display:none}#sidebar{top:68px}
#saved{position:absolute;top:100px;left:50%;transform:translateX(-50%);display:flex;gap:5px;pointer-events:none}
#saved i{width:15px;height:18px;display:block}#saved svg{width:100%;height:100%;fill:#2c3d3a;stroke:#4d6660;stroke-width:1}
#saved i.on svg{fill:#ffd96a;stroke:#fff1b8;filter:drop-shadow(0 0 4px #ffcf4a)}
#team{top:126px}
/* The kids' status line (in the light, lights out...) is gone; the clown keeps his. */
#hud:not(.clownMode) #effects{display:none}
/* Touch: a left/right stick on the left; round INTERACT at the right, USE beside it, DROP and the small ones about them. */
#stick{position:relative;width:132px;height:132px;border-radius:50%;background:radial-gradient(circle,#173436cc 0 55%,#0c1f21cc 56%);border:2px solid #3f6862;pointer-events:auto;touch-action:none;flex:0 0 auto}
#stick::before,#stick::after{content:'◀';position:absolute;top:50%;left:12px;transform:translateY(-50%);color:#6f958b;font-size:14px}#stick::after{content:'▶';left:auto;right:12px}
#stick i{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:#2c5a54;border:2px solid #9fc9b4;box-shadow:0 2px 8px #000a}
#touch button.round{border-radius:50%}
@media(pointer:coarse){
 #touch{bottom:22px;left:18px;right:18px;align-items:flex-end}
 #touch #actionButton{width:92px;height:92px;font-size:11px}
 #touch #cycleButton{position:absolute;right:20px;bottom:104px;width:52px;height:52px}
 #touch #lightButton{position:absolute;left:142px;bottom:84px;width:54px;height:54px;font-size:9px}
 #touch #upButton,#touch #downButton{position:absolute;bottom:165px;width:54px;height:54px}#touch #upButton{left:0}#touch #downButton{left:64px}
 #useButton{left:auto;right:120px;bottom:26px;width:80px;height:80px;border-radius:50%;padding:6px;font-size:10px;line-height:1.2}
 #dropButton{right:208px;bottom:30px;width:56px;height:56px;border-radius:50%;padding:4px;font-size:9px}
 #map{width:150px;height:150px;top:70px}
 #sidebar{top:56px}#saved{top:118px}#saved i{width:12px;height:15px}#team{top:140px}
}

header .spacer{margin-left:auto}
/* A phone on its side (short and touch): everything smaller, the hotbar down between the stick and the buttons. */
@media (pointer:coarse) and (max-height:520px){
 header{top:10px;left:14px;right:14px;gap:6px}.brand{font-size:16px}header button{font-size:8px;padding:5px 6px}
 #levelName{top:36px;font-size:12px}#powerOut{top:48px;font-size:16px;letter-spacing:4px;gap:6px}
 #sidebar{top:38px;left:14px}#tasks{font-size:13px;line-height:1.4;margin-bottom:6px}#tasks small{margin-bottom:2px}
 #saved{top:72px;gap:3px}#saved i{width:9px;height:11px}
 #team{top:84px;transform:translateX(-50%) scale(.68);transform-origin:top center}
 #map{width:118px;height:118px;top:44px;right:10px}
 #summon{bottom:102px;width:300px;min-width:0;font-size:11px;letter-spacing:3px}#summon .segs{gap:6px}#summon i{height:14px;border-width:1px}#summon i em{font-size:8px;line-height:14px}#summon .state{font-size:12px;min-height:15px;margin-bottom:3px}#summon .name{font-size:8px;margin-top:2px}
 #hotbar{bottom:12px}.slot{width:74px;height:50px;padding:5px 7px;font-size:10px}
 #buffs{bottom:168px;left:14px}#effects{bottom:150px}
 #stick{width:116px;height:116px}#stick i{width:50px;height:50px;margin:-25px 0 0 -25px}
 #touch{bottom:12px;left:12px;right:12px}#touch #actionButton{width:80px;height:80px}#useButton{right:102px;bottom:14px;width:68px;height:68px;font-size:9px}#dropButton{right:178px;bottom:16px;width:48px;height:48px;font-size:8px}
 #touch #cycleButton{right:16px;bottom:96px;width:44px;height:44px}#touch #lightButton{left:122px;bottom:72px;width:46px;height:46px;font-size:8px}
 #touch #upButton,#touch #downButton{bottom:138px;width:44px;height:44px}#touch #downButton{left:54px}
}
/* Debug ambient-light dial stays usable when the viewport is short. */
#cheats{max-height:calc(100dvh - 450px);overflow-y:auto}
#cheats .ambientDial{margin-top:10px}#cheats .ambientDial label{justify-content:space-between;margin:0;font-size:10px}#cheats .ambientDial output{color:#e8d27a}
#cheats input[type=range]{display:block;width:100%;height:20px;margin:5px 0 0;padding:0;accent-color:#ffd23a;cursor:pointer}
#cheats .ambientScale{position:relative;height:12px;color:#77998c;font-size:9px}
#cheats .ambientScale span{position:absolute;white-space:nowrap;transform:translateX(-50%)}
#cheats .ambientScale span:nth-child(1){left:0;transform:none}
#cheats .ambientScale span:nth-child(2){left:27.27%}
#cheats .ambientScale span:nth-child(3){left:63.64%}
#cheats .ambientScale span:nth-child(4){right:0;transform:none}
@media(max-height:800px){#cheats{top:100px;max-height:calc(100dvh - 120px)}}

#cheats .materialDial{margin-top:10px}#cheats .materialDial label{justify-content:space-between;margin:0;font-size:10px}#cheats .materialDial output{color:#e8d27a}#cheats .materialHint{font-size:8px;letter-spacing:.5px;line-height:1.3;margin-top:6px}

/* The hands: a big lit primary card (Space), the secondary tucked behind it, smaller and dimmer (Q, or tap it or the ⇄ to
   swap), then the rock pouch and the gear slot. The cards slide past each other as they swap. */
#hotbar{align-items:flex-end;gap:14px}
#hotbar .hands{position:relative;display:flex;align-items:flex-end}
#hotbar .slot.item{position:relative;text-align:left;overflow:hidden}
#hotbar .slot.item .icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);background:center/contain no-repeat;image-rendering:pixelated}
#hotbar .slot.item .name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hotbar .slot.item small{display:inline-block;margin-bottom:6px;padding:1px 6px;border-radius:3px;font-weight:bold;letter-spacing:1px}
#hotbar .slot.item b{position:absolute;right:9px;top:7px;float:none}
#hotbar .slot.primary{z-index:2;width:172px;height:78px;padding:9px 12px 9px 62px;border:2px solid #c1e9c7;background:linear-gradient(#123033f2,#09191bf2);color:#eef6ef;box-shadow:0 0 18px #94d4b340,inset 0 0 0 1px #0b1a17}
#hotbar .slot.primary .icon{width:44px;height:44px}
#hotbar .slot.primary .name{font-size:13px;font-weight:bold}
#hotbar .slot.primary small{background:#c1e9c7;color:#0b1a17}
#hotbar .slot.secondary{z-index:1;width:124px;height:58px;margin-left:-4px;padding:7px 10px 7px 46px;border:1px solid #3b5751;background:#071314e6;color:#9fb3a8;opacity:.85}
#hotbar .slot.secondary .icon{left:9px;width:30px;height:30px;opacity:.8}
#hotbar .slot.secondary small{border:1px solid #4d6a62;color:#8fb0a3;margin-bottom:4px}
#hotbar .slot.item.empty{opacity:.5;border-style:dashed}#hotbar .slot.primary.empty{box-shadow:none;border-color:#5d7d74}
#hotbar .swapKey{pointer-events:auto;z-index:3;align-self:center;width:32px;height:32px;margin:0 -10px;padding:0;border-radius:50%;border:1px solid #5d7d74;background:#0c2021;color:#c1e9c7;font-size:15px;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation}
#hotbar .swapKey small{font-size:7px;color:#8fb0a3;margin-top:1px}#hotbar .swapKey:disabled{opacity:.35}
#hotbar .pouches{display:flex;gap:6px}
#hotbar .pouch{pointer-events:auto;position:relative;width:52px;height:58px;padding:6px 0 0;display:flex;flex-direction:column;align-items:center;gap:6px;background:#09191be8;border:1px solid #3b5751;touch-action:manipulation}
#hotbar .pouch .icon{width:28px;height:28px;background:center/contain no-repeat;image-rendering:pixelated}
#hotbar .pouch .pips{display:flex;gap:5px}#hotbar .pouch .pips i{width:8px;height:8px;border-radius:50%;border:1px solid #9fb8a8}#hotbar .pouch .pips i.on{background:#e0cda1;border-color:#e0cda1}
#hotbar .pouch small{position:absolute;top:2px;right:3px;font-size:8px;color:#8fb0a3}
#hotbar .pouch.empty .icon{opacity:.3}#hotbar .pouch .alt{position:absolute;left:3px;top:3px}#hotbar .pouch .alt i{display:block;width:14px;height:14px;background:center/contain no-repeat;image-rendering:pixelated}#hotbar .pouch .hold{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--hold,0) * 100%);background:#e0cda1;transition:width .04s linear}
#hotbar .slot.swapIn{animation:handsIn .22s ease-out}#hotbar .slot.swapOut{animation:handsOut .22s ease-out}
@keyframes handsIn{from{transform:translateX(90px) scale(.75);opacity:.5}}
@keyframes handsOut{from{transform:translateX(-120px) scale(1.25);opacity:.6}}
@media(pointer:coarse){#hotbar .slot.primary{width:150px;height:68px;padding-left:54px}#hotbar .slot.primary .icon{width:38px;height:38px}#hotbar .slot.secondary{width:108px;height:52px;padding-left:40px}#hotbar .slot.secondary .icon{width:26px;height:26px}#hotbar .pouch{width:46px;height:52px}}
@media (pointer:coarse) and (max-height:520px){#hotbar{gap:8px}#hotbar .slot.primary{width:124px;height:54px;padding:5px 8px 5px 44px;font-size:10px}#hotbar .slot.primary .icon{left:7px;width:30px;height:30px}#hotbar .slot.primary .name{font-size:11px}#hotbar .slot.secondary{width:92px;height:44px;padding:4px 6px 4px 34px}#hotbar .slot.secondary .icon{left:6px;width:22px;height:22px}#hotbar .slot.item small{margin-bottom:2px}#hotbar .pouch{width:38px;height:44px;gap:3px;padding-top:4px}#hotbar .pouch .icon{width:22px;height:22px}#hotbar .swapKey{width:28px;height:28px}}
/* With a mouse, the USE and SWAP buttons stand clear either side of the wider hands. */
@media(pointer:fine){#useButton{left:calc(50% + 300px)}#dropButton{right:calc(50% + 300px)}}

/* The slots inventory: three cards (1 potions, 2 projectiles, 3 the tool), each the kind it would use big, the other kind
   held small in its corner, and a bar filling along its foot while you hold its key. A flare shown turns the throw card red. */
#hotbar .cards{display:flex;gap:10px;align-items:flex-end}
#hotbar .slot.card{z-index:1;width:158px;height:72px;padding:8px 10px 8px 56px;border:2px solid #3b5751;background:linear-gradient(#10292bf0,#09191bf0);color:#e4efe7}
#hotbar .slot.card .icon{width:40px;height:40px}
#hotbar .slot.card .name{font-size:12px;font-weight:bold}
#hotbar .slot.card small{background:#1b3a37;color:#c1e9c7;border:1px solid #4d6a62;font-size:8px}
#hotbar .slot.card.potion{border-color:#6f9bd0}#hotbar .slot.card.potion small{color:#cfe2ff;border-color:#5a7fae;background:#17283d}
#hotbar .slot.card.throw{border-color:#c1e9c7}#hotbar .slot.card.throw.flare{border-color:#ff5a3a;box-shadow:0 0 14px #ff3a2455}#hotbar .slot.card.throw.flare small{color:#ffd0c4;border-color:#a8392a;background:#3a1410}
#hotbar .slot.card.tool{border-color:#b4a674}#hotbar .slot.card.tool small{color:#f1e3a6;border-color:#8a7d4e;background:#2e2914}
#hotbar .slot.card .alt{position:absolute;right:6px;bottom:8px;display:flex;align-items:center;gap:2px;opacity:.7;font-size:9px;color:#c9d6cf}#hotbar .slot.card .alt i{width:18px;height:18px;background:center/contain no-repeat;image-rendering:pixelated}#hotbar .slot.card .alt b{position:static;color:#e0cda1;font-size:9px}
#hotbar .slot.card .hold{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--hold,0) * 100%);background:#c1e9c7;transition:width .04s linear}#hotbar .slot.card.potion .hold{background:#8fb8ff}#hotbar .slot.card.throw.flare .hold{background:#ff5a3a}
@media(pointer:coarse){#hotbar .slot.card{width:132px;height:64px;padding-left:48px}#hotbar .slot.card .icon{width:34px;height:34px}}
@media (pointer:coarse) and (max-height:520px){#hotbar .cards{gap:6px}#hotbar .slot.card{width:104px;height:52px;padding:4px 6px 4px 38px;font-size:10px}#hotbar .slot.card .icon{left:6px;width:26px;height:26px}#hotbar .slot.card .name{font-size:10px}#hotbar .slot.card .alt{bottom:4px}}
@media(pointer:fine){#useButton{left:calc(50% + 330px)}#dropButton{right:calc(50% + 330px)}}
#hotbar .slot.card small{white-space:nowrap;letter-spacing:.5px}
#hotbar .slot.card.hot{border-color:#3b5751;opacity:.8;transition:transform .12s ease-out,opacity .12s}#hotbar .slot.card.hot.active{border-color:#c1e9c7;opacity:1;transform:translateY(-6px);box-shadow:0 0 16px #94d4b34d}#hotbar .slot.card.hot.active small{background:#c1e9c7;color:#0b1a17}#hotbar .slot.card.hot.flare.active{border-color:#ff5a3a}
@media(pointer:fine){#useButton{left:calc(50% + 250px)}#dropButton{right:calc(50% + 250px)}}

/* Playing the monster: what is holding him back right now, a chip each, in a column under his gauges (pushing them up). */
#gauges{flex-wrap:wrap;max-width:420px}
#debuffs{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none}
#hud.clownMode #debuffs{display:flex}#debuffs:empty{display:none!important}
#debuffs .debuff{display:flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;background:#1a0b0ae6;border:1px solid #7a2f27;border-radius:3px;font-size:9px;letter-spacing:1px;color:#f2c9bf;white-space:nowrap}
#debuffs .debuff i{width:18px;height:18px;background:center/contain no-repeat;image-rendering:pixelated;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:13px;color:#ffd27a}
#debuffs .debuff b{color:#fff3c4;font-weight:bold}
#debuffs .debuff.stun{border-color:#ffd27a}#debuffs .debuff.flare{border-color:#ff5a3a;background:#2a0806e6}#debuffs .debuff.power{border-color:#8a7d4e}

/* Hotbar tiles: near square, the item's art centred at the top, its name centred under it (and under that its uses, or how
   many of it are stacked there), and the slot's number in a band along the foot; the selected slot gets a clear, larger
   key. The gear slot is a tile the same shape, GEAR in its band. */
#hotbar .slot.card.hot{width:104px;height:112px;padding:0;overflow:hidden;text-align:center}
#hotbar .slot.card.hot .icon{top:8px;left:50%;width:40px;height:40px;transform:translateX(-50%)}
#hotbar .slot.card.hot .name{position:absolute;top:54px;left:4px;right:4px;margin:0;text-align:center}
#hotbar .slot.card.hot .uses{margin:6px auto 0;width:56px}
#hotbar .slot.card.hot small{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;height:25px;margin:0;padding:0;border:0;border-top:1px solid #42605a;border-radius:0;background:linear-gradient(180deg,#102c2b,#0a1e20);color:#a9c8b7;font-size:17px;font-weight:800;line-height:1;letter-spacing:.03em}
#hotbar .slot.card.hot.active small{height:29px;border-top-color:#e5ffeb;background:linear-gradient(180deg,#dcf5de,#9fd5b8);color:#102421;font-size:22px;box-shadow:0 -2px 12px #95e0b044}
#hotbar .slot.card.hot.gear{margin-left:8px;border-style:dashed;border-color:#5d5a7a;color:#8f8ca8}#hotbar .slot.card.hot.gear.worn{border-style:solid;border-color:#9a86d8;color:#e4dcff}
#hotbar .slot.card.hot.gear small{font-size:11px;letter-spacing:2px;color:#8f8ca8}
@media(pointer:coarse){
 #hotbar .slot.card.hot{width:92px;height:100px}
 #hotbar .slot.card.hot .icon{top:7px;width:34px;height:34px}
 #hotbar .slot.card.hot .name{top:46px}
 #hotbar .slot.card.hot small{height:22px;font-size:15px}
 #hotbar .slot.card.hot.active small{height:25px;font-size:19px}
}
@media(pointer:coarse) and (max-height:520px){
 #hotbar .slot.card.hot{width:72px;height:80px}
 #hotbar .slot.card.hot .icon{top:5px;width:26px;height:26px}
 #hotbar .slot.card.hot .name{top:35px;left:2px;right:2px;font-size:10px}
 #hotbar .slot.card.hot .uses{margin-top:4px;width:44px}
 #hotbar .slot.card.hot small{height:18px;font-size:13px}
 #hotbar .slot.card.hot.active small{height:21px;font-size:17px}
}
#lobby{position:absolute;inset:0;z-index:8;overflow:auto;background:radial-gradient(circle at 50% 0%,#173332,#061011 75%);padding:clamp(20px,4vh,48px) 20px;color:#dce8df}
.lobbyPanel{max-width:1020px;margin:auto;text-align:center}
#lobby h1{font-size:clamp(46px,7vw,82px);letter-spacing:-4px;line-height:1;margin:18px 0 8px}
#lobby h1 span{color:var(--mint)}
.lobbyLead{color:#a9c1b7;margin:0 0 26px;font-size:15px}
.lobbySlots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lobbySlot{display:flex;flex-direction:column;align-items:center;min-width:0;padding:14px 8px 16px;background:linear-gradient(#15302f,#0b1a1c);border:2px solid #42625e;border-radius:14px;color:#e2f1e7;transition:transform .15s,border-color .15s,background .15s}
.lobbySlot:not(:disabled):hover{transform:translateY(-3px);border-color:#b7e5cc}
.lobbySlot.selected{border-color:#e5c276;box-shadow:0 0 0 2px #9e773c66;background:linear-gradient(#24403a,#112326)}
.lobbySlot:disabled{cursor:default;opacity:.72}
.lobbySlot canvas{width:min(100%,132px);height:176px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 12px 13px #0009)}
.lobbySlot b{font-size:17px;margin:9px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lobbySlot small{font-size:13px;color:#c3d7ca;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lobbySlot.selected small{color:#f4d490}
.lobbyFooter{margin:25px auto 0;max-width:420px}
.lobbyLoading{display:grid;grid-template-columns:1fr auto;gap:8px;text-align:left;color:#b4cdc0;font-size:12px}
.lobbyLoading progress{grid-column:1/3;width:100%;height:14px;accent-color:#abdec4}
#ready{width:100%;padding:16px;background:#b7e4ca;border-color:#d4ffe6;color:#0a211a;font-size:14px;font-weight:900;letter-spacing:2px}
#ready:disabled{opacity:.45;cursor:wait}
#lobbyStatus{min-height:22px;color:#90aaa0;font-size:12px}
@media(max-width:700px){.lobbySlots{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lobbySlot{padding:8px}.lobbySlot canvas{height:110px;width:80px}.lobbySlot b{font-size:14px}.lobbySlot small{font-size:11px}#lobby h1{font-size:48px}.lobbyLead{font-size:12px;margin-bottom:14px}.lobbyFooter{margin-top:16px}}

#boot{position:absolute;inset:0;z-index:10;background:#071114;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}#boot progress{width:min(440px,78vw);height:18px;accent-color:#abdec4}#boot small{font-size:12px;color:#a9c6b6;font-variant-numeric:tabular-nums}

#pickupMenu{position:absolute;z-index:4;left:50%;bottom:132px;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));padding:12px;background:#08191cf2;border:1px solid #7ba895;border-radius:12px;box-shadow:0 12px 36px #000a;color:#e1f0e7}#pickupMenu .pickupTitle{font-size:12px;font-weight:900;letter-spacing:1.5px;margin-bottom:10px}#pickupMenu .pickupTitle small{float:right;color:#a6c4b4;font-size:10px;font-weight:normal;letter-spacing:.4px}#pickupOptions{display:flex;gap:8px;overflow-x:auto}#pickupOptions button{flex:1 0 120px;max-width:200px;min-height:54px;padding:8px;text-align:left;border-radius:7px;font-size:12px}#pickupOptions button.selected{border-color:#e5c276;background:#2c382d;color:#ffe5aa;box-shadow:inset 0 0 0 1px #e5c276}#pickupOptions button small{display:block;color:#a8bdb1;font-size:10px;margin-top:4px}@media(max-width:700px){#pickupMenu{bottom:190px}#pickupMenu .pickupTitle small{float:none;display:block;margin-top:3px}}

#voiceButton{white-space:nowrap}#voiceButton.on{border-color:#a9ddc2;background:#235343;color:#ecfff2}#voiceButton:disabled{opacity:.55;cursor:default}#talkButton{display:none}
@media(pointer:coarse){#talkButton{display:block;position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;min-width:100px;min-height:62px;border-radius:35px;background:#234d43df;font-size:10px;font-weight:900;letter-spacing:1px}#talkButton:active{background:#a9ddc2;color:#0a211a}}