*{box-sizing:border-box}body{margin:0;background:#141824;color:#f5f2e9;font:16px system-ui,sans-serif}main{max-width:1240px;margin:auto;padding:22px}header{display:flex;align-items:center;justify-content:space-between;gap:14px}a{color:#c9f689;text-decoration:none;font-weight:700}header span,.eyebrow,.heading p{font-size:12px;letter-spacing:.16em;color:#a5b0c0}button{font:inherit;color:inherit;border:1px solid #495369;background:#252e3e;border-radius:10px;padding:11px 16px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}button:hover,button.held{background:#40503d;border-color:#c9f689}button:focus-visible,a:focus-visible{outline:3px solid #c9f689;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:24px 0 18px}.heading p{margin:0}h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.055em;margin:4px 0}h1 span{color:#c9f689}#status{max-width:330px;color:#bec8d6;line-height:1.4;padding-bottom:8px}.machine{border:1px solid #445067;border-radius:16px;overflow:hidden;background:#1f2837}.hud{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;gap:12px;font-size:14px;font-weight:700}#cargo{color:#c9f689}#restart{padding:6px 12px;font-size:13px}.viewport{position:relative}canvas{display:block;width:100%;height:auto;touch-action:none}#panel{position:absolute;inset:8% 12% auto;background:#152131f5;border:1px solid #657387;border-radius:18px;padding:24px;text-align:center;box-shadow:0 20px 90px #0005}h2{font-size:clamp(23px,3vw,36px);margin:8px 0;letter-spacing:-.035em}#panelText{max-width:590px;margin:12px auto;color:#d0d8e0;line-height:1.5}.arms{display:flex;justify-content:center;align-items:center;gap:20px;margin:22px 0 10px}.arms button{min-width:165px;padding:16px}.arms strong{display:block;font-size:14px;color:#c9f689;margin-top:6px}#nextBag{font-size:12px;color:#a7b5c8;min-width:120px}#nextBag b{display:block;font-size:16px;color:#fff;margin-top:6px}#repack{padding:5px 12px;font-size:13px}#go{margin-top:14px;background:#c9f689;color:#152131;font-weight:800;border:0;padding:14px 26px}.hint{font-size:14px;color:#9faec3;margin:16px 0 0}.balance{display:flex;justify-content:center;align-items:center;gap:18px;padding:13px;font-size:11px;letter-spacing:.08em}.balance>div{width:220px;height:12px;border-radius:10px;background:linear-gradient(90deg,#f39483,#ead89e 30%,#a9d4a4 40%,#a9d4a4 60%,#ead89e 70%,#f39483);position:relative}.balance b{position:absolute;left:50%;height:18px;top:-3px;border-left:1px solid #13243355}.balance i{position:absolute;left:50%;top:-4px;width:5px;height:20px;background:white;border-radius:4px;transform:translateX(-50%);box-shadow:0 1px 5px #0008;z-index:1}.controls{display:flex;gap:10px;padding:0 16px 16px}.controls button{flex:1;font-size:14px;min-height:50px}footer{display:flex;justify-content:space-between;gap:20px;font-size:12px;line-height:1.5;color:#96a4b8;margin-top:16px}[hidden]{display:none!important}@media(max-width:700px){main{padding:10px}header span{display:none}.heading{margin:18px 0 12px;display:block}h1{font-size:38px}#status{font-size:14px;max-width:none;padding:0}.hud{padding:8px;font-size:11px}#panel{inset:3% 3% auto;padding:12px}.eyebrow{margin:0}h2{font-size:23px}#panelText{font-size:13px;margin:6px auto}.arms{gap:7px;margin:10px 0 5px}.arms button{min-width:0;padding:9px;font-size:13px;flex:1}.arms strong{font-size:11px}#nextBag{min-width:75px;font-size:10px}#nextBag b{font-size:12px}#go{padding:10px 16px;margin-top:8px}.hint{font-size:11px;margin-top:8px}.viewport{min-height:370px}canvas{height:370px;object-fit:cover}.controls{gap:5px;padding:0 7px 10px}.controls button{font-size:12px;padding:8px 4px}.balance{gap:10px}footer{display:block}footer span{display:block;margin-bottom:5px}}

.controls{flex-wrap:wrap}.controls button[data-key="a"],.controls button[data-key="d"]{flex:2;min-height:64px;font-weight:700}#doorAction{flex-basis:100%;background:#c9f689;color:#152131;font-weight:800}@media(max-width:700px){canvas{object-fit:fill}.controls button{font-size:14px}.controls button[data-key="a"],.controls button[data-key="d"]{min-height:72px}.viewport{min-height:370px}#panel{max-height:96%;overflow:auto}}

.challenge-picker{display:flex;align-items:center;gap:14px;margin:0 0 16px;flex-wrap:wrap}.challenge-picker label{font-size:14px;color:#bec8d6}.challenge-picker select{font:inherit;background:#252e3e;color:#f5f2e9;border:1px solid #657387;border-radius:10px;padding:10px}#retry{margin:12px 0 0 10px}

/* Packing and results live outside the camera, never over the character. */
main{max-width:1280px}.play-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start}.play-main{min-width:0}.viewport{min-height:0}canvas{height:auto;aspect-ratio:900/650;object-fit:contain}
#panel{position:static;inset:auto;max-height:none;overflow:visible;box-shadow:none;border:0;border-left:1px solid #445067;border-radius:0;padding:22px 18px;text-align:left;background:#192333;min-width:0}
.arms{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.arms button{min-width:0;padding:12px 6px;font-size:14px}.arms strong{font-size:14px}#nextBag{grid-column:1/-1;grid-row:1;font-size:14px;min-width:0;padding:12px;background:#263446;border-radius:8px}#nextBag b{font-size:18px}h2{font-size:26px}#panelText{font-size:16px}.hint{font-size:14px;line-height:1.5}#go,#retry{width:100%;margin:12px 0 0}#risk{font-size:14px;color:#ffce84;line-height:1.5}.balance{font-size:14px}.hud{font-size:14px}#status{max-width:520px}.controls{padding-bottom:12px}
@media(max-width:900px){.play-layout{grid-template-columns:1fr}#panel{border-left:0;border-top:1px solid #445067;padding:16px}.arms{grid-template-columns:1fr 1fr 1fr}#nextBag{grid-column:2;grid-row:1}#packLeft{grid-column:1;grid-row:1}#packRight{grid-column:3;grid-row:1}.heading{margin:12px 0}h1{font-size:34px}.viewport{min-height:0}canvas{height:auto;aspect-ratio:760/650}#panelText{font-size:14px}#go{min-height:48px}.arms strong{font-size:14px}.balance{gap:8px;font-size:12px}.balance>div{flex:1;max-width:220px}}

.run-guide{display:none;padding:22px 18px;color:#bec8d6;font-size:16px;line-height:1.6;border-left:1px solid #445067}.run-guide h2{color:#f5f2e9}.play-layout:has(#panel[hidden]) .run-guide{display:block}@media(max-width:900px){.play-layout:has(#panel[hidden]) .run-guide{display:none}}

/* Standalone game: keep setup focused and coach weight, not item count. */
#balanceAdvice{margin:12px 0 0;padding:10px 12px;border-left:3px solid #c9f689;background:#263446;color:#eef5df;font-size:14px;line-height:1.45}
.machine:has(#game:not([data-state="play"])) .balance,
.machine:has(#game:not([data-state="play"])) .controls{display:none}

/* Phone: show packing OR play controls, with a stable, bounded camera. */
@media(max-width:900px){
 main{padding:8px 8px calc(24px + env(safe-area-inset-bottom))}
 header{gap:8px;min-height:32px}header button{padding:6px 10px;font-size:14px}header a{font-size:14px}
 .heading{margin:8px 0;display:block}.heading p{display:none}h1{font-size:24px;margin:0 0 3px}#status{font-size:14px;line-height:1.25;min-height:35px;padding:0}
 .challenge-picker{margin:0 0 8px;gap:8px;flex-wrap:nowrap}.challenge-picker label{font-size:14px}.challenge-picker select{min-width:0;flex:1;padding:7px;font-size:16px}
 .hud{font-size:12px;padding:6px;gap:6px}#restart{font-size:12px;padding:5px 7px}
 .viewport{min-height:0;background:#253c46}canvas{width:100%;height:clamp(140px,27svh,235px);aspect-ratio:auto;object-fit:contain}
 .balance{padding:9px 8px;font-size:11px}
 .machine:has(#game[data-state="pack"]) .controls{display:none}
 .machine:has(#game[data-state="unload"]) .controls,.machine:has(#game[data-state="win"]) .controls,.machine:has(#game[data-state="lost"]) .controls{display:none}
 #panel{padding:10px;border-top:1px solid #445067}
 .machine:has(#game[data-state="pack"]) #panelLabel,.machine:has(#game[data-state="pack"]) #panelTitle,.machine:has(#game[data-state="pack"]) #panelText,.machine:has(#game[data-state="pack"]) #hint{display:none}
 .arms{gap:6px;margin:0 0 6px}.arms button{padding:8px 4px;min-height:58px;font-size:14px}.arms strong{font-size:12px;margin-top:3px}#nextBag{padding:6px;font-size:12px}#nextBag b{font-size:14px;margin-top:2px}
 #balanceAdvice{margin:6px 0 4px;padding:7px 9px;font-size:12px;line-height:1.3}#risk{font-size:12px;line-height:1.25;margin:4px 0;min-height:30px}#repack{font-size:12px;padding:4px 8px}#go{min-height:44px;margin-top:6px;padding:9px 12px;font-size:16px}
 .controls{gap:6px;padding:4px 8px 12px}.controls button,.controls button[data-key="a"],.controls button[data-key="d"]{min-height:58px;font-size:14px}
 footer{display:none}
}

@media(max-width:900px) and (max-height:500px){canvas{height:150px}.heading{display:none}}

/* Once a run starts, stop laying the game out like a web page. The camera and
   controls become the whole experience; results sit over the finished run. */
body:has(#game[data-state="play"]) header,
body:has(#game[data-state="play"]) .heading,
body:has(#game[data-state="play"]) .challenge-picker,
body:has(#game[data-state="play"]) footer,
body:has(#game[data-state="unload"]) header,
body:has(#game[data-state="unload"]) .heading,
body:has(#game[data-state="unload"]) .challenge-picker,
body:has(#game[data-state="unload"]) footer,
body:has(#game[data-state="lost"]) header,
body:has(#game[data-state="lost"]) .heading,
body:has(#game[data-state="lost"]) .challenge-picker,
body:has(#game[data-state="lost"]) footer,
body:has(#game[data-state="win"]) header,
body:has(#game[data-state="win"]) .heading,
body:has(#game[data-state="win"]) .challenge-picker,
body:has(#game[data-state="win"]) footer{display:none}

body:has(#game[data-state="play"]) main,
body:has(#game[data-state="unload"]) main,
body:has(#game[data-state="lost"]) main,
body:has(#game[data-state="win"]) main{max-width:none;padding:0}

body:has(#game[data-state="play"]) .machine,
body:has(#game[data-state="unload"]) .machine,
body:has(#game[data-state="lost"]) .machine,
body:has(#game[data-state="win"]) .machine{min-height:100dvh;border:0;border-radius:0}

body:has(#game[data-state="play"]) .play-layout,
body:has(#game[data-state="unload"]) .play-layout,
body:has(#game[data-state="lost"]) .play-layout,
body:has(#game[data-state="win"]) .play-layout{display:block;position:relative}

body:has(#game[data-state="play"]) .play-main,
body:has(#game[data-state="unload"]) .play-main,
body:has(#game[data-state="lost"]) .play-main,
body:has(#game[data-state="win"]) .play-main{width:min(100%,calc((100dvh - 190px) * 900 / 650));margin:0 auto}

body:has(#game[data-state="play"]) canvas,
body:has(#game[data-state="unload"]) canvas,
body:has(#game[data-state="lost"]) canvas,
body:has(#game[data-state="win"]) canvas{width:100%;height:auto;aspect-ratio:900/650;object-fit:fill}

body:has(#game[data-state="play"]) .run-guide,
body:has(#game[data-state="unload"]) .run-guide,
body:has(#game[data-state="lost"]) .run-guide,
body:has(#game[data-state="win"]) .run-guide{display:none}

.play-layout:has(#game[data-state="lost"]) #panel,
.play-layout:has(#game[data-state="win"]) #panel{position:absolute;z-index:4;inset:50% auto auto 50%;width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 90px);overflow:auto;transform:translate(-50%,-50%);border:1px solid #657387;border-radius:16px;padding:24px;text-align:center;background:#152131f5;box-shadow:0 20px 90px #0008}

@media(max-width:900px){
 body:has(#game[data-state="play"]) .play-main,
 body:has(#game[data-state="unload"]) .play-main,
 body:has(#game[data-state="lost"]) .play-main,
 body:has(#game[data-state="win"]) .play-main{width:100%}
 body:has(#game[data-state="play"]) canvas,
 body:has(#game[data-state="unload"]) canvas,
 body:has(#game[data-state="lost"]) canvas,
 body:has(#game[data-state="win"]) canvas{height:auto;aspect-ratio:760/650;object-fit:fill}
 .play-layout:has(#game[data-state="lost"]) #panel,
 .play-layout:has(#game[data-state="win"]) #panel{width:calc(100% - 20px);padding:18px 14px}
}

/* During the run, let the camera use every pixel left by the HUD and controls. */
@media(max-width:900px){
 body:has(#game[data-state="play"]) .machine,
 body:has(#game[data-state="unload"]) .machine,
 body:has(#game[data-state="lost"]) .machine,
 body:has(#game[data-state="win"]) .machine{height:100dvh;min-height:0;display:flex;flex-direction:column}
 body:has(#game[data-state="play"]) .hud,
 body:has(#game[data-state="unload"]) .hud,
 body:has(#game[data-state="lost"]) .hud,
 body:has(#game[data-state="win"]) .hud{flex:0 0 auto}
 body:has(#game[data-state="play"]) .play-layout,
 body:has(#game[data-state="unload"]) .play-layout,
 body:has(#game[data-state="lost"]) .play-layout,
 body:has(#game[data-state="win"]) .play-layout{flex:1 1 auto;min-height:0;height:auto}
 body:has(#game[data-state="play"]) .play-main,
 body:has(#game[data-state="unload"]) .play-main,
 body:has(#game[data-state="lost"]) .play-main,
 body:has(#game[data-state="win"]) .play-main{height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto auto}
 body:has(#game[data-state="play"]) .viewport,
 body:has(#game[data-state="unload"]) .viewport,
 body:has(#game[data-state="lost"]) .viewport,
 body:has(#game[data-state="win"]) .viewport{height:100%;min-height:0}
 body:has(#game[data-state="play"]) canvas,
 body:has(#game[data-state="unload"]) canvas,
 body:has(#game[data-state="lost"]) canvas,
 body:has(#game[data-state="win"]) canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:fill}
}