.lab-game{background:#fff9ef;color:#243c49}.lab-root{width:min(1160px,100%);margin:auto;padding:16px 20px 28px}.lab-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.lab-heading h2{font-size:clamp(20px,3vw,28px);margin:0}.lab-badge{background:#d4eee4;color:#17564e;border-radius:14px;padding:8px 12px;font-weight:800;white-space:nowrap}.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px}.lab-world{background:#def0e6;border:3px solid #96cbb4;border-radius:24px;overflow:hidden;align-self:start;box-shadow:0 6px 0 #badbca}.lab-world canvas{display:block;width:100%;height:auto;aspect-ratio:640/380;touch-action:none}.lab-world p{margin:0;padding:10px 14px;background:#fffefa;font-size:15px;line-height:1.5}.lab-panel{background:#fff;border:2px solid #e9e1d3;border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:12px}.lab-panel h3,.lab-panel p{margin:0}.lab-panel h3{font-size:22px}.lab-panel p{line-height:1.6}.lab-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.lab-btn{min-height:54px;min-width:48px;border:2px solid #bbc9cb;background:#f9fcfb;border-radius:14px;color:#243c49;font:800 16px/1.35 var(--font-body,'Noto Sans KR',sans-serif);padding:10px 8px;cursor:pointer;touch-action:manipulation}.lab-btn:hover{background:#eef7f2}.lab-btn:active{transform:translateY(2px)}.lab-btn:focus-visible,.lab-help summary:focus-visible{outline:4px solid #075e9c;outline-offset:3px}.lab-btn:disabled{opacity:.55;cursor:default;transform:none}.lab-btn.is-on{background:#d2eee4;border-color:#16776d;box-shadow:inset 0 0 0 1px #16776d}.lab-primary{background:#c74530;border-color:#a63323;color:white}.lab-primary:hover{background:#b53a27}.lab-full{grid-column:1/-1}.lab-readout{padding:10px 12px;background:#eef6f2;border-radius:12px;font-size:17px;font-weight:800;line-height:1.5}.lab-status{background:#fff4d9;border-left:5px solid #bb6b14;padding:12px;border-radius:10px;min-height:56px}.lab-status.is-good{background:#e2f5ec;border-color:#16776d}.lab-help{background:white;border-radius:16px;border:1px solid #e9e1d3;padding:12px 16px;margin-top:18px;line-height:1.7}.lab-help summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}.lab-help p{margin:8px 0}.lab-handoff{max-width:620px;margin:30px auto;text-align:center;padding:28px;background:white;border-radius:24px;border:2px solid #ded8cc}.lab-handoff p{line-height:1.7}.lab-handoff .lab-btn{min-width:220px}.lab-mini{font-size:14px;color:#50656d}.lab-beams{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.lab-beams .lab-btn{font-size:14px}.lab-bars{display:flex;gap:8px;align-items:flex-end;height:64px}.lab-bars div{flex:1;background:#16776d;border-radius:6px 6px 0 0;min-height:4px;position:relative}.lab-bars span{position:absolute;top:-22px;left:0;right:0;text-align:center;font-weight:800}.lab-range{width:100%;height:40px;accent-color:#16776d;touch-action:pan-x}.lab-panel label{font-size:16px;font-weight:800}.lab-turns{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.lab-turns span{padding:8px 12px;border:1px solid #b2c9c3;border-radius:12px;background:white;font-weight:700}
@media(max-width:950px){.lab-layout{grid-template-columns:minmax(0,1fr)}.lab-panel{display:grid;grid-template-columns:1fr 1fr;align-items:start}.lab-panel>h3,.lab-panel>.lab-status,.lab-panel>.lab-primary,.lab-panel>.lab-controls,.lab-panel>.lab-beams{grid-column:1/-1}.lab-world{width:100%;max-width:800px;margin:auto}.lab-root{padding:12px 16px 24px}.lab-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.lab-full{grid-column:1/-1}}
@media(max-width:560px){.lab-root{padding:12px 10px 24px}.lab-heading{align-items:flex-start}.lab-heading h2{font-size:20px}.lab-badge{font-size:13px;padding:7px 9px}.lab-world{border-radius:16px}.lab-panel{display:flex;padding:12px;border-radius:16px}.lab-controls{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}.lab-beams{width:100%}.lab-btn{min-height:54px;font-size:15px}.lab-beams .lab-btn{font-size:12px;padding:8px 3px}.lab-readout{font-size:16px}.lab-world p{font-size:13px}.lab-heading{gap:8px}.lab-panel h3{font-size:20px}}
@media(prefers-reduced-motion:reduce){.lab-btn:active{transform:none}.lab-world{box-shadow:none}}
.lab-status[hidden]{display:none}.lab-roll .lab-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.lab-roll .lab-controls>.lab-full{grid-column:auto}.lab-roll .lab-controls>.lab-btn{min-height:64px}
.lab-range{height:48px}.lab-load-error{max-width:520px;margin:40px auto;padding:24px;line-height:1.6}.lab-load-error a{display:block;margin-top:20px;min-height:48px}
/* 플레이 조작만 게임 화면 안에 겹친다. 정답·설정 버튼은 반투명으로 바꾸지 않는다. */
.lab-world.has-overlay{position:relative;padding-bottom:92px;background:#c9e4e3}
.lab-roll .lab-world.has-overlay{background:#69b6bd;border-color:#73b9a7;box-shadow:0 6px 0 #bad8c9}
.lab-overlay{position:absolute;inset:auto 0 0;height:92px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));pointer-events:none}
.lab-pad-side{display:flex;gap:10px;pointer-events:none}
.lab-touch-button{width:64px;height:68px;min-width:64px;min-height:68px;padding:4px;border:2px solid #ffffffb3;border-radius:22px;background:rgba(255,255,255,.38);color:#183c4a;box-shadow:0 2px 5px #1b485329;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lab-touch-button span{display:block;font-size:30px;line-height:1.1;font-family:Arial,sans-serif;font-weight:900}
.lab-touch-button small{display:block;font-size:12px;line-height:1.5;font-weight:800}
.lab-touch-button:hover{background:rgba(255,255,255,.5)}
.lab-touch-button:active,.lab-touch-button.is-held,.lab-touch-button[aria-pressed=true]{background:rgba(255,255,255,.78);border-color:#175464;box-shadow:inset 0 0 0 1px #175464;transform:none}
.lab-touch-button[aria-pressed=true] small::before{content:'✓ '}
.lab-touch-button:disabled{opacity:.45;background:rgba(255,255,255,.2);border-color:#ffffff80;box-shadow:none}
.lab-controls:empty{display:none}
.lab-panel{align-self:start}
@media(max-width:560px){.lab-world.has-overlay{padding-bottom:84px}.lab-overlay{height:84px;padding:10px;gap:12px}.lab-pad-side{gap:8px}.lab-touch-button{width:60px;height:64px;min-width:60px;min-height:64px;border-radius:20px}}
@media(max-height:600px) and (min-width:600px){
 .lab-with-overlay{padding:6px 10px 12px}
 .lab-with-overlay .lab-heading{margin-bottom:6px;gap:8px}
 .lab-with-overlay .lab-heading h2{font-size:18px}
 .lab-with-overlay .lab-badge{font-size:12px;padding:6px 8px}
 .lab-with-overlay .lab-layout{grid-template-columns:minmax(0,1fr) 240px;gap:12px}
 .lab-with-overlay .lab-world{width:100%;max-width:calc(168.42vh - 336.84px);max-width:calc(168.42dvh - 336.84px);padding-bottom:76px}
 .lab-with-overlay .lab-overlay{height:76px;padding:8px}
 .lab-with-overlay .lab-pad-side{gap:8px}
 .lab-with-overlay .lab-touch-button{width:56px;height:60px;min-width:56px;min-height:60px;border-radius:18px}
 .lab-with-overlay .lab-touch-button span{font-size:26px}
 .lab-with-overlay .lab-panel{display:flex;padding:10px;gap:8px}
 .lab-with-overlay .lab-panel .lab-btn{min-height:48px;font-size:14px}
 .lab-with-overlay .lab-readout{font-size:14px;padding:8px}
}