.runner-lab { max-width:520px; }
#lab-page-label { color:var(--muted); font-size:9px; letter-spacing:1px; }
.runner-lab .runner-select { padding:17px 18px max(15px,env(safe-area-inset-bottom)); gap:12px; }
.runner-lab .runner-select-heading h1 { font-size:27px; }
.runner-lab .runner-cat-card { min-height:82px; }
.runner-lab .runner-cat-card canvas { min-height:65px; }
.runner-lab .runner-cards { min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.runner-lab .runner-select-footer { flex:none; padding-top:8px; border-top:1px solid #c9ccb480; }
.runner-lab #runner-confirm { min-height:54px; font-size:15px; font-weight:600; letter-spacing:1px; }
.runner-lab #runner-selection-note { font-size:10px; margin-bottom:7px; min-height:15px; }
.selection-dialogue { position:absolute; z-index:8; inset:0; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.selection-shade { position:absolute; inset:0; background:linear-gradient(#13261e30,#142d2440 55%,#182c2480); }
.selection-dialogue .character-stage { top:0; bottom:115px; }
.selection-dialogue .conversation { padding:0 18px 10px; background:linear-gradient(transparent 30px,#f3eddf 30px); }
.selection-dialogue .dialogue-meta { position:relative; z-index:4; }
.selection-dialogue .dialogue { position:relative; z-index:3; min-height:140px; }
#runner-talk-text { display:block; font-size:16px; line-height:1.9; min-height:56px; white-space:pre-line; }
#runner-talk-speaker { flex:none; background:#fffef8; color:var(--green); border:1px solid #c8b68e; border-radius:6px; padding:6px 14px; font-size:13px; letter-spacing:2px; }
#runner-talk-role { font-size:9px; color:var(--muted); background:#f3eddfec; }
.selection-dialogue-actions { display:flex; justify-content:space-between; padding-top:4px; }
#runner-talk-start { font-weight:600; }
/* The playing state has one layout region: the world. Everything else floats. */
.runner-lab[data-scene="runnerGame"] { grid-template-rows:minmax(0,1fr); background:#252c46; }
.runner-lab[data-scene="runnerGame"]>.topbar { display:none; }
.runner-lab .runner-play { display:block; padding:0; background:#252c46; }
.runner-lab .runner-play-area { position:absolute; inset:0; min-height:0; isolation:isolate; }
.runner-lab #runner-canvas { position:absolute; inset:0; width:100%; height:100%; }
.runner-lab .runner-hud { position:absolute; z-index:2; top:calc(env(safe-area-inset-top) + 19px); left:17px; right:70px; padding:0; gap:12px; align-items:flex-start; pointer-events:none; }
.runner-lab .runner-score { display:flex; align-items:center; gap:5px; padding:8px 12px; border:1px solid #ffebc934; border-radius:22px; background:#17253880; color:#fff0c4; font:700 22px/1.2 Georgia,serif; backdrop-filter:blur(4px); }
.runner-lab .runner-score small { font:10px sans-serif; color:#dacdb9; }
.runner-lab .runner-clock { padding:3px 0; gap:4px; color:#fff1d6; font:14px/1.2 ui-monospace,monospace; text-shadow:0 1px 4px #15232d; }
.runner-lab .runner-clock small { color:#d4c8bd; font-size:9px; }
.runner-lab .runner-pause { position:absolute; top:calc(env(safe-area-inset-top) + 17px); right:13px; z-index:3; width:44px; height:44px; min-width:44px; min-height:44px; border:0; background:radial-gradient(circle,#19273999 53%,transparent 56%); color:#ffeccc; font-size:15px; }
.runner-lab .runner-distance { position:absolute; z-index:2; top:calc(env(safe-area-inset-top) + 82px); left:22px; right:22px; height:2px; margin:0; background:#fff3d529; pointer-events:none; }
.runner-lab #runner-distance-fill { background:#f5d19a; box-shadow:0 0 6px #f5c88366; }
#runner-distance-text { position:absolute; right:0; top:8px; color:#e7d2b2; font:8px sans-serif; letter-spacing:1.3px; }
#runner-combo { position:absolute; top:calc(env(safe-area-inset-top) + 116px); left:24px; z-index:2; color:#ffdb88; font:italic 700 22px Georgia,serif; text-shadow:0 2px 6px #1c273a; pointer-events:none; }
.runner-lab #runner-control-note { position:absolute; z-index:2; left:22px; bottom:calc(env(safe-area-inset-bottom) + 29px); color:#f6e7cdbe; font-size:11px; letter-spacing:1px; pointer-events:none; text-shadow:0 1px 5px #162531; transition:opacity .5s; }
.runner-lab #runner-skill { position:absolute; z-index:3; right:23px; bottom:calc(env(safe-area-inset-bottom) + 28px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; width:72px; height:72px; border-radius:50%; padding:0; color:#ffe4b0; background:radial-gradient(circle at 35% 28%,#667f87,#243c53); border:1px solid #e9c387c9; box-shadow:0 0 0 4px #22364888,inset 0 0 0 3px #c4b27a27,0 5px 20px #11222c66; }
.runner-lab #runner-skill small { font:6px Arial,sans-serif; letter-spacing:1.5px; color:#cbbda4; }
.runner-lab #runner-skill strong { font-size:15px; letter-spacing:2px; }
.runner-lab #runner-skill-cooldown { font:9px ui-monospace,monospace; min-height:10px; }
.runner-lab #runner-skill:disabled { background:#24354bcc; color:#b5b7b4; border-color:#c0ac7855; opacity:.7; }
.runner-lab .runner-canvas-note { z-index:2; top:29%; color:#fff0cf; font-size:12px; text-shadow:0 1px 6px #152238; }
.runner-lab .runner-overlay { z-index:5; background:#111e3655; color:#fff0d0; backdrop-filter:blur(2px); }
.runner-lab #runner-countdown { color:#fff0cf; font:italic 700 64px/1.1 Georgia,serif; text-shadow:0 3px 20px #f7c68150; }
.runner-lab #runner-overlay-note { color:#f6e9d4; max-width:280px; line-height:1.9; }
.runner-lab .runner-overlay .primary { color:#203748; background:#e8cca0; border-color:#ead2ab; }
.runner-lab .runner-overlay .text-button { color:#e8d9c6; }
.runner-clear { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; color:#fff1c4; background:#16243748; text-shadow:0 3px 30px #ffcb7577; pointer-events:none; }
.runner-clear p { font:italic 900 clamp(27px,8vw,40px) Arial,sans-serif; letter-spacing:1px; }
.runner-clear h1 { font-size:45px; font-weight:700; letter-spacing:7px; }
.runner-clear.is-perfect { color:#ffe19a; background:radial-gradient(ellipse,#e5b15a29,transparent 75%); }
.runner-failure { position:absolute; z-index:8; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; background:#101b33a6; backdrop-filter:blur(5px); }
.runner-failure-card { width:100%; max-width:370px; max-height:100%; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; padding:26px 23px 22px; text-align:center; background:linear-gradient(145deg,#fff8e9,#ece5d3); border:1px solid #dfc79d; border-radius:18px; box-shadow:0 18px 70px #07122266; }
.runner-play-area.has-failure { touch-action:pan-y; }
.runner-failure-card h1 { margin:10px 0 0; font-size:25px; }
#runner-fail-art { display:block; width:100%; height:190px; object-fit:contain; transform-origin:center 85%; }
#runner-fail-speaker { display:block; font-size:12px; color:#aa8659; letter-spacing:2px; }
#runner-fail-line { font-size:14px; line-height:1.9; min-height:62px; margin:10px 0 18px; white-space:pre-line; }
#runner-fail-actions { display:grid; gap:10px; }
.runner-lab #runner-best { white-space:pre-line; }
.runner-lab .runner-result { overflow-y:auto; justify-content:flex-start; }
.runner-lab .runner-result>* { flex-shrink:0; }
.runner-lab .runner-result-buttons { margin-top:auto; }
#lab-save-status { padding-top:15px; }
.runner-lab .runner-result[data-perfect="true"] { background:radial-gradient(ellipse at 50% 24%,#fff4c6,#ede5cb 72%); }
.runner-lab .runner-result[data-perfect="true"]>.eyebrow { color:#937335; font-weight:700; font-size:17px; letter-spacing:2px; }
.runner-venue { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:30px; text-align:center; background:linear-gradient(#fff6e1b0,#fff7e9ec),var(--game-background) center/cover; }
.runner-venue h1 { font-size:27px; }
.runner-venue .venue-mark { font-size:72px; color:#aa8954; }
#runner-venue-names { font-family:serif; font-size:23px; letter-spacing:3px; }
#runner-venue-info { font-size:12px; line-height:2.2; white-space:pre-line; }
#runner-invitation { max-width:94vw; max-height:96dvh; border:0; padding:38px 10px 10px; background:#f8f1e3; border-radius:6px; }
#runner-invitation::backdrop { background:#101e28cf; }
#runner-invitation img { display:block; max-width:88vw; max-height:82dvh; width:auto; height:auto; object-fit:contain; }
#runner-invitation-close { position:absolute; top:0; right:0; width:44px; background:transparent; font-size:24px; }
@media(max-height:740px) {
 .runner-lab .runner-select { padding:10px 14px; gap:7px; }
 .runner-lab .runner-select-heading h1 { font-size:23px; margin:4px 0; }
 .runner-lab .runner-cat-card { min-height:74px; padding-top:4px; padding-bottom:4px; }
 .runner-lab .runner-cat-copy p { font-size:9px; }
 .runner-lab .runner-cat-special { margin:4px 0; }
 .runner-failure-card { padding:20px; }
 #runner-fail-art { height:140px; }
 #runner-fail-line { margin:8px 0 12px; }
 .selection-dialogue .dialogue { min-height:120px; }
 .runner-lab #runner-finish-art { height:100px; }
 .runner-lab #runner-result-cat { margin-bottom:8px; }
 .runner-lab #runner-best { margin:8px 0; font-size:10px; }
 .runner-lab .runner-result-buttons { gap:6px; }
 .runner-lab .runner-result-buttons button { min-height:44px; padding:9px 14px; }
 .runner-lab #lab-save-status { padding-top:5px; }
}