@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#e6eee8;background:#101d23;font-synthesis:none;--ink:#101d23;--panel:#172a32;--line:#304751;--muted:#8ba6ac;--mint:#bcf088;--coral:#edab93;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.35;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}[hidden]{display:none!important}button{border:1px solid var(--line);border-radius:7px;background:#213941;color:#dfe9e5;padding:9px 13px;font-size:12px;font-weight:600;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:#304b51;border-color:#67827d}a{color:inherit}.quiet{background:#1b3038}.accent{background:var(--mint);border-color:var(--mint);color:#20312b}.accent:hover:not(:disabled),.play-button:hover:not(:disabled){background:#d1ffa5;border-color:#d1ffa5}.topbar{height:68px;display:flex;align-items:center;padding:0 30px;gap:22px;border-bottom:1px solid var(--line);background:#14242b}.wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-2px;font-size:29px;text-decoration:none}.wordmark span{color:var(--mint);padding-left:4px}.top-divider{height:22px;width:1px;background:var(--line)}.workshop-label{font:11px var(--mono);letter-spacing:1.5px;color:#b6c9c8;display:flex;align-items:center;gap:10px}.edition{font:9px var(--mono);border:1px solid #607a6a;color:var(--mint);padding:4px;border-radius:3px}.top-actions{display:flex;align-items:center;gap:9px;margin-left:auto}#save-status{color:var(--muted);font:10px var(--mono);margin-right:15px}#save-status::before{content:'●';color:var(--mint);margin-right:7px;font-size:8px}main{max-width:1800px;margin:auto;padding:26px 30px 16px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.eyebrow{font:9px var(--mono);letter-spacing:1.5px;color:var(--muted);margin:0 0 9px}.name-label input{font:600 29px 'Space Grotesk',sans-serif;letter-spacing:-1px;max-width:min(560px,45vw);background:none;border:0;border-bottom:1px solid transparent;color:#f0f4e9;padding:0 0 4px;border-radius:0;width:100%}.name-label input:hover{border-bottom-color:#4b646d}.title-tools,.play-actions{display:flex;align-items:flex-end;gap:9px}.compact{display:flex;flex-direction:column;gap:5px;font-size:10px;color:var(--muted)}.compact select{padding:8px 25px 8px 9px;font-size:11px}.play-button{padding:13px 20px;background:var(--mint);color:#20342c;border-color:var(--mint);font-size:13px}.workspace{display:grid;grid-template-columns:205px minmax(280px,1fr) 245px;gap:12px;align-items:stretch}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px}.palette,.inspector{height:min(720px,calc(100vh - 260px));min-height:505px;overflow:auto;scrollbar-width:thin;scrollbar-color:#47636b transparent}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:16px 14px;border-bottom:1px solid var(--line);font:10px var(--mono);letter-spacing:1px}.muted{color:var(--muted);font:9px var(--mono);letter-spacing:0}.select-tool{margin:12px;width:calc(100% - 24px);text-align:left;font-size:11px;padding:10px}.select-tool kbd{float:right}.select-tool.active{background:#bff08a19;color:var(--mint);border-color:#7ea960}.palette-category{font:9px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:12px 14px 7px;margin:0}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 12px}.piece-button{background:#1a3039;text-align:left;min-height:62px;padding:8px;font-size:10px;border-color:#304a54;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.piece-button .piece-symbol{font-size:18px;line-height:18px;color:#8cbed0}.piece-button:hover{transform:translateY(-1px)}.piece-button.active{border-color:var(--mint);background:#30453a;color:#e3f7d8}.piece-button.active::after{content:'+';position:absolute;right:8px;top:5px;color:var(--mint);font-size:18px}.palette-foot{padding:16px 12px;color:var(--muted);font-size:10px;line-height:1.5;border-top:1px solid var(--line);margin-top:15px}.palette-foot button{width:100%;margin-top:10px}.drawing-panel{display:flex;flex-direction:column;min-height:505px;overflow:hidden}.drawing-toolbar{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);height:49px;background:#1a2d35}.button-group,.zoom-controls{display:flex;gap:3px;align-items:center}.drawing-toolbar button{padding:4px 8px;min-width:28px;height:28px;background:#20353d;font-size:14px}.zoom-controls{margin-left:auto}.zoom-controls #fit{font-size:10px;margin-left:5px}.zoom-controls span{font:9px var(--mono);min-width:38px;text-align:center;color:var(--muted)}.snap-control{font-size:10px;color:#bdcccc;display:flex;gap:5px;align-items:center}.snap-control select{font-size:9px;padding:4px 2px;background:transparent;border:none}.snap-control input{width:12px;height:12px;margin:0;accent-color:var(--mint)}#drawing-wrap{position:relative;flex:1;min-height:400px;background:#0e202a;overflow:hidden;touch-action:none}#blueprint{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:default}.canvas-badge{pointer-events:none;position:absolute;top:15px;left:16px;display:flex;align-items:center;gap:8px;font:9px var(--mono);letter-spacing:1px;color:#a7c6c8;background:#152c37dc;padding:7px 9px;border:1px solid #385660;border-radius:4px}.canvas-badge #canvas-dimensions{padding-left:8px;border-left:1px solid #3b535c;color:#7599a9;letter-spacing:0}.live-dot{width:5px;height:5px;border-radius:100%;background:#b6f387}.drawing-footer{display:flex;gap:15px;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--line);font:9px var(--mono);color:#7f9ea6;min-height:32px}.drawing-footer span:last-child{font-size:8px;text-align:right}#selection-empty{padding:30px 20px;color:var(--muted);line-height:1.6;font-size:11px}.empty-icon{font-size:30px;color:#75a9b6;margin-bottom:10px}h2{font-family:'Space Grotesk',sans-serif;font-size:16px;color:#dce9df;letter-spacing:-.3px;margin:0 0 10px}.small{font-size:10px}#piece-properties{padding:15px}#piece-properties .selection-type{font:9px var(--mono);color:var(--mint);letter-spacing:1px;margin:0 0 9px}#piece-properties h2{font-size:19px;margin-bottom:6px}#piece-properties .description{font-size:10px;line-height:1.5;color:var(--muted);margin:0 0 15px}.property-actions{display:flex;gap:6px;margin:15px 0 0}.property-actions button{flex:1;font-size:10px;padding:8px 4px}.danger{color:#f0ad97}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}label:not(.name-label):not(.snap-control):not(.compact):not(.file-pick):not(.textarea-label){font-size:10px;color:#a9bfc1}.world-settings label,#piece-properties label{display:flex;flex-direction:column;gap:5px;margin:9px 0}.world-settings{padding:13px 15px;border-top:1px solid var(--line)}summary{cursor:pointer;font-size:11px;color:#d9e5df;font-weight:600;list-style:none;display:flex;align-items:center;gap:7px}summary::before{content:'›';color:#7d9fa3}details[open]>summary::before{transform:rotate(90deg)}input,select{background:#10252e;color:#d3e3df;border:1px solid #38545e;border-radius:5px;padding:8px;width:100%;min-width:0;font-size:11px}input[type=checkbox]{width:auto;accent-color:var(--mint)}select{cursor:pointer}.layer-details{padding:13px 15px;border-top:1px solid var(--line)}#layers{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto;margin-top:10px}#layers button{font:9px var(--mono);text-align:left;padding:7px;background:#1c333c}#layers button.active{border-color:var(--mint);color:var(--mint)}.validation{margin-top:13px;padding:13px 16px;background:#172930}.validation-title{display:flex;align-items:center;gap:12px}.validation-title>span{border:1px solid #66895a;border-radius:50%;color:var(--mint);width:28px;height:28px;display:grid;place-items:center}.validation-title strong{font-size:12px;font-weight:600}.validation-title p{font-size:10px;color:var(--muted);margin:4px 0 0}.validation-title button{margin-left:auto;font-size:10px;padding:7px 11px}.validation.invalid .validation-title>span{color:#ecb095;border-color:#b97c65}.validation.invalid strong{color:#edb697}#validation-details{padding:10px 0 0 40px;font-size:11px;line-height:1.6;max-height:220px;overflow:auto}#validation-details p{margin:4px 0}.validation-error{color:#efb39b}.validation-warning{color:#a1bdc5}.bottom-note{font-size:9px;color:#7d98a0;line-height:1.6;text-align:center;margin:13px 0 0}kbd{display:inline-block;border:1px solid #52666b;border-bottom-width:2px;border-radius:3px;padding:1px 4px;font:9px var(--mono);color:#b4c9c9;background:#24383f}.play-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:0 0 18px}.play-top h1{font:600 25px 'Space Grotesk',sans-serif;margin:0}.play-stage{position:relative;border:1px solid #55786f;border-radius:12px;overflow:hidden;background:#0d2028;max-width:1250px;margin:auto;box-shadow:0 20px 80px #0004}#play-canvas{width:100%;display:block;aspect-ratio:5/3}.play-bottom{max-width:1250px;margin:16px auto;display:flex;justify-content:space-between;gap:15px}#play-status{font:11px var(--mono);color:var(--mint);display:block}.control-legend{display:block;color:var(--muted);font-size:10px;margin-top:9px;word-spacing:4px}.play-options{display:flex;gap:14px;align-items:center}.play-options label{display:flex;align-items:center;gap:5px;white-space:nowrap}.touch-controls{display:flex;justify-content:center;gap:8px;margin:15px auto}.touch-controls button{touch-action:none;min-width:58px}.touch-controls button.active{background:var(--mint);color:var(--ink)}#play-result{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;border:1px solid #91b679;background:#193029f2;border-radius:9px;padding:14px 18px;max-width:90%;box-shadow:0 8px 30px #0005}#play-result strong{font:600 18px 'Space Grotesk',sans-serif;white-space:nowrap}#play-result span{font-size:10px;color:#b8cbbf;max-width:185px}#play-result button{white-space:nowrap}dialog{width:min(650px,calc(100vw - 30px));border:1px solid #648079;border-radius:14px;background:#1a3038;color:#dce8df;padding:24px;box-shadow:0 20px 100px #0008}dialog::backdrop{background:#071319bc;backdrop-filter:blur(5px)}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.dialog-head h2{font-size:24px;letter-spacing:-.5px}.icon-close{font-size:23px;border:0;background:transparent;padding:0 5px;color:#9ab4b5}.dialog-note{font-size:12px;color:#a8bfc0;line-height:1.7;margin:6px 0 20px}.file-pick{display:block;border:1px dashed #5d807b;background:#203b40;color:var(--mint);padding:13px;font-size:12px;border-radius:7px;text-align:center;cursor:pointer}.file-pick input{display:block;max-width:100%;margin:9px auto 0;border:0;background:none;padding:0;color:#a1b8bb}.textarea-label{display:block;font:10px var(--mono);color:#a0b9bd;margin-top:20px}textarea{display:block;width:100%;resize:vertical;background:#10232c;color:#c4d9d3;border:1px solid #446168;border-radius:6px;padding:12px;font:10px/1.6 var(--mono);margin-top:7px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:17px}.error-text{color:#efad96;font-size:11px;line-height:1.6;white-space:pre-line}.error-text:empty{display:none}#copy-status{font-size:11px;color:var(--mint)}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:calc(100vw - 32px);padding:12px 18px;background:#d2eab9;color:#22342b;border-radius:8px;box-shadow:0 6px 35px #0005;font-size:12px;transition:opacity .18s,transform .18s;z-index:50}#toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(min-width:1550px){.workspace{grid-template-columns:225px minmax(280px,1fr) 270px}.palette,.inspector{height:min(780px,calc(100vh - 260px))}}
@media(max-width:1150px){.topbar{padding:0 18px;gap:14px}.workshop-label{font-size:9px}.edition{display:none}main{padding:22px 18px}.workspace{grid-template-columns:165px minmax(280px,1fr) 215px;gap:8px}.palette-grid{padding:0 8px;gap:4px}.piece-button{font-size:9px;padding:7px}.drawing-footer span:last-child{display:none}.title-tools{gap:7px}.name-label input{font-size:24px}.panel-heading{font-size:9px;padding:14px 11px}.panel-heading .muted{font-size:8px}#save-status{font-size:9px;margin-right:0}.top-actions{gap:6px}.title-tools .compact select{max-width:180px}.drawing-toolbar{gap:6px;padding:8px}.snap-control{gap:3px}}
@media(max-width:900px){.topbar{height:auto;min-height:60px;flex-wrap:wrap;padding:12px 16px;gap:12px}.workshop-label{margin-right:auto}.top-divider{display:none}.top-actions{width:100%;margin:0}.top-actions #save-status{margin-right:auto}.title-row{align-items:flex-start;flex-direction:column;gap:15px}.name-label input{max-width:100%;width:calc(100vw - 45px)}.title-tools{width:100%;align-items:flex-end}.title-tools .compact{flex:1}.title-tools .compact select{max-width:none}.workspace{grid-template-columns:155px minmax(250px,1fr)}.inspector{grid-column:1/-1;height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr}.inspector .panel-heading{grid-column:1/-1}.inspector .layer-details{grid-column:1/-1}.inspector .world-settings{border-left:1px solid var(--line);border-top:0}.palette{height:580px;min-height:580px}.drawing-panel{height:580px}.play-top{flex-direction:column;align-items:stretch}.play-actions{justify-content:space-between}.play-actions button{font-size:11px}.play-bottom{flex-direction:column}.play-options{justify-content:flex-start}#play-result{padding:10px;bottom:12px;gap:10px}#play-result span{display:none}}
@media(max-width:560px){main{padding:18px 10px}.top-actions button{font-size:10px;padding:9px}.top-actions #save-status{font-size:8px}.wordmark{font-size:25px}.workshop-label{font-size:8px}.title-tools{flex-wrap:wrap}.title-tools .compact{min-width:150px}.title-tools .play-button{padding:12px}.workspace{grid-template-columns:115px minmax(200px,1fr);gap:6px}.palette-grid{grid-template-columns:1fr}.piece-button{min-height:42px;flex-direction:row;align-items:center;gap:7px}.piece-button .piece-symbol{font-size:16px}.piece-button.active::after{display:none}.palette-foot{padding:10px 8px}.palette-foot span{display:none}.palette-foot button{font-size:9px;padding:7px 3px}.panel-heading .muted{display:none}.select-tool{margin:8px;width:calc(100% - 16px);padding:7px;font-size:9px}.select-tool kbd{display:none}.palette,.drawing-panel{height:540px;min-height:540px}.drawing-toolbar{height:auto;min-height:43px;flex-wrap:wrap;gap:5px}.snap-control{font-size:9px}.zoom-controls{gap:1px}.zoom-controls span{min-width:30px;font-size:8px}.drawing-toolbar button{min-width:23px;padding:3px 5px;font-size:12px}.canvas-badge{font-size:7px;top:9px;left:7px;padding:5px}.canvas-badge #canvas-dimensions{font-size:7px}.drawing-footer{font-size:8px;padding:8px}.validation{padding:12px}.validation-title{gap:9px}.validation-title p{line-height:1.5}.validation-title strong{font-size:11px}.play-actions{flex-wrap:wrap}.play-actions .compact{min-width:100px}.touch-controls{gap:4px}.touch-controls button{min-width:0;font-size:10px;padding:9px}.control-legend{font-size:9px;word-spacing:1px}#play-result strong{font-size:13px}#play-result button{font-size:10px;padding:7px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.piece-button:hover{transform:none}}

.route-warning{max-width:1250px;margin:0 auto 14px;padding:11px 14px;border:1px solid #977d57;background:#66503533;color:#eac291;border-radius:7px;font-size:11px;line-height:1.6}
/* Rehearsal keeps its complete arena and controls in the viewport. The exact
   width is refined from measured chrome, including wrapped route warnings. */
body[data-mode=play] .top-actions{display:none}
.title-tools{flex-wrap:wrap;justify-content:flex-end;max-width:760px}.title-row>div:first-child{min-width:200px}.title-tools .compact{min-width:180px}#level-source{color:#648079;max-width:420px;margin:6px 0 0;line-height:1.5}#restore-draft{font-size:10px}
@media(max-width:900px){.title-tools{max-width:none;justify-content:flex-start}#level-source{max-width:none}}
body[data-mode=play] .play-stage{width:min(100%,calc((100dvh - 315px)*1.66667));margin-left:auto;margin-right:auto}
body[data-mode=play] .play-top>div:first-child{min-width:0}
body[data-mode=play] #play-title{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px) and (min-width:650px){
 body[data-mode=play] .play-top{flex-direction:row;align-items:center}
 body[data-mode=play] .play-bottom{flex-direction:row}
 body[data-mode=play] .control-legend{font-size:9px;word-spacing:1px}
 body[data-mode=play] #play-title{max-width:32vw;font-size:21px}
 body[data-mode=play] .play-actions{gap:6px}
 body[data-mode=play] .play-actions button{font-size:10px;padding:8px}
}
@media(max-height:620px){
 body[data-mode=play] .topbar{height:47px;min-height:47px;padding-top:7px;padding-bottom:7px}
 body[data-mode=play] .wordmark{font-size:24px}
 body[data-mode=play] #play-view{padding-top:10px;padding-bottom:8px}
 body[data-mode=play] .play-top{margin-bottom:9px;flex-direction:row;align-items:center;gap:9px}
 body[data-mode=play] .play-top .eyebrow{display:none}
 body[data-mode=play] #play-title{font-size:18px;max-width:28vw}
 body[data-mode=play] .play-actions{gap:5px;align-items:center}
 body[data-mode=play] .play-actions button{padding:7px;font-size:10px}
 body[data-mode=play] .play-actions .compact{font-size:0;gap:0;min-width:90px}
 body[data-mode=play] .play-actions select{font-size:10px;padding:6px}
 body[data-mode=play] .play-bottom{margin-top:7px;margin-bottom:5px;flex-direction:row;gap:8px;align-items:center}
 body[data-mode=play] .control-legend{display:none}
 body[data-mode=play] .play-options{gap:8px}
 body[data-mode=play] .play-options label{font-size:9px}
 body[data-mode=play] .touch-controls{margin-top:6px;margin-bottom:2px}
 body[data-mode=play] .touch-controls button{padding:6px 10px;font-size:10px}
 body[data-mode=play] .route-warning{font-size:9px;padding:5px 9px;margin-bottom:7px;line-height:1.35}
}

/* Match the arena's immersive phone viewport without changing the authoring
   workbench. Pausing reveals the secondary rehearsal settings. */
@media (max-width:600px), (pointer:coarse) and (max-width:950px) and (max-height:600px) {
 body[data-mode=play] { width:100%; height:100dvh; overflow:hidden; overscroll-behavior:none; }
 body[data-mode=play] .topbar { display:none; }
 body[data-mode=play] #play-view { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; margin:0; padding:0; }
 body[data-mode=play] .play-stage { position:fixed; inset:0; width:100%!important; height:100dvh; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; }
 body[data-mode=play] #play-canvas { width:100%; height:100%; aspect-ratio:auto; }
 body[data-mode=play] .play-top { position:fixed; z-index:15; top:max(8px,env(safe-area-inset-top)); left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); display:block; margin:0; }
 body[data-mode=play] .play-top > div:first-child { display:none; }
 body[data-mode=play] .play-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; gap:5px; }
 body[data-mode=play] .play-actions button,
 body[data-mode=play] .play-actions select,
 body[data-mode=play] #controller-button { min-height:44px; padding:7px 8px; border:1px solid #d5e5d349; border-radius:9px; background:#17333ac2; color:#eff5e9; font-size:10px; white-space:nowrap; backdrop-filter:blur(8px); }
 body[data-mode=play] .play-actions .compact { font-size:0; gap:0; min-width:75px; width:75px; flex:0 0 75px; }
 body[data-mode=play] .play-actions .compact[for=bot-difficulty] { min-width:90px; width:90px; flex-basis:90px; }
 body[data-mode=play] .play-actions select { width:100%; padding:7px 4px; }
 body[data-mode=play] #play-back { margin-left:auto; }
 body[data-mode=play] .play-bottom { position:fixed; z-index:15; top:calc(max(8px,env(safe-area-inset-top)) + 49px); left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); display:block; max-width:none; margin:0; }
 body[data-mode=play] .play-bottom > div:first-child,
 body[data-mode=play] .play-options label,
 body[data-mode=play] #play-audio-test,
 body[data-mode=play] #play-route-warning { display:none; }
 body[data-mode=play] .play-options { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:8px; align-items:center; }
 body[data-mode=play] #controller-button { max-width:200px; min-height:36px; overflow:hidden; text-overflow:ellipsis; }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) .play-options { padding:8px; border:1px solid #d5e5d349; border-radius:9px; background:#17333aee; backdrop-filter:blur(10px); }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) .play-options label { display:flex; min-height:36px; }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) #play-audio-test { display:block; min-height:36px; }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) #play-route-warning:not([hidden]) { position:fixed; z-index:16; top:calc(max(8px,env(safe-area-inset-top)) + 165px); left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); display:block; max-height:25dvh; overflow:auto; margin:0; padding:10px; font-size:10px; background:#273835f5; }
 body[data-mode=play] .touch-controls { position:fixed; z-index:15; bottom:max(12px,env(safe-area-inset-bottom)); left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); display:grid; grid-template-columns:52px 52px minmax(0,1fr) 52px 52px; grid-template-rows:52px 52px; gap:8px; width:auto; margin:0; padding:0; pointer-events:none; }
 body[data-mode=play] .touch-controls button { width:52px; min-width:52px; height:52px; padding:0; border:1px solid #e4eedb72; border-radius:14px; background:#163c3159; color:#f3f7e9; font-size:10px; box-shadow:none; text-shadow:0 1px 4px #0c261eb0; pointer-events:auto; }
 body[data-mode=play] .touch-controls [data-control=left] { grid-column:1; grid-row:2; font-size:24px; }
 body[data-mode=play] .touch-controls [data-control=right] { grid-column:2; grid-row:2; font-size:24px; }
 body[data-mode=play] .touch-controls [data-control=jump] { grid-column:4; grid-row:1; }
 body[data-mode=play] .touch-controls [data-control=attack] { grid-column:5; grid-row:1; }
 body[data-mode=play] .touch-controls [data-control=dash] { grid-column:4; grid-row:2; }
 body[data-mode=play] .touch-controls [data-control=grapple] { grid-column:5; grid-row:2; }
 body[data-mode=play] .touch-controls button.active { background:#b9e5b382; color:#fff; transform:scale(.97); }
 body[data-mode=play].controller-active .touch-controls,
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) .touch-controls { display:none; }
 body[data-mode=play] #play-result { top:50%; bottom:auto; left:50%; transform:translate(-50%,-50%); max-width:calc(100% - 32px); padding:14px; }
 body[data-mode=play] #play-result button { min-height:44px; }
}
@media (max-width:430px) {
 body[data-mode=play] .play-bottom { top:calc(max(8px,env(safe-area-inset-top)) + 98px); }
}
@media (pointer:coarse) and (min-width:601px) and (max-width:950px) and (max-height:600px) {
 body[data-mode=play] .play-top { right:auto; width:410px; }
 body[data-mode=play] .play-bottom { left:auto; top:max(8px,env(safe-area-inset-top)); max-width:calc(100vw - 450px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
 body[data-mode=play] .play-options { justify-content:flex-end; }
 body[data-mode=play] #controller-button { min-height:44px; }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) .play-bottom { top:calc(max(8px,env(safe-area-inset-top)) + 51px); left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); max-width:none; }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) .play-options { justify-content:flex-start; }
 body[data-mode=play]:has(#play-pause[aria-pressed=true]) #play-route-warning:not([hidden]) { top:calc(max(8px,env(safe-area-inset-top)) + 120px); }
 body[data-mode=play] .touch-controls { grid-template-columns:48px 48px minmax(0,1fr) repeat(4,48px); grid-template-rows:48px; }
 body[data-mode=play] .touch-controls button { width:48px; min-width:48px; height:48px; }
 body[data-mode=play] .touch-controls [data-control] { grid-row:1; }
 body[data-mode=play] .touch-controls [data-control=dash] { grid-column:6; }
 body[data-mode=play] .touch-controls [data-control=grapple] { grid-column:7; }
}

/* Placement settings and group editing stay available in compact layouts. */
.placement-options{margin:0 12px 10px;padding:10px;background:#233e3f;border:1px solid #5e806d;border-radius:7px}
.placement-options label{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.placement-options p{font-size:9px;line-height:1.5;color:var(--muted);margin:8px 0 0}
.placement-options select,.placement-options input{font-size:10px;padding:7px 4px}
#selection-count{color:var(--mint);white-space:nowrap}
.drawing-toolbar .button-group{flex-wrap:wrap}
@media(max-width:560px){.placement-options{margin:0 8px 8px;padding:7px}.placement-options select{font-size:9px}.drawing-footer{flex-wrap:wrap;gap:4px}.drawing-toolbar .zoom-controls{margin-left:0}}
.alignment-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.alignment-actions button{font-size:10px;padding:8px 4px}

.floor-grid-settings{padding:13px 15px;border-top:1px solid var(--line)}
.floor-grid-settings label{display:flex;flex-direction:column;gap:5px;margin:12px 0 8px}
.floor-grid-settings p{color:var(--muted);line-height:1.5}
.floor-grid-settings button,.floor-reference{width:100%;font-size:10px}
.floor-reference{margin-top:9px}
#floor-grid-summary{margin-left:auto;font:9px var(--mono);color:var(--mint)}
#floor-grid-badge{padding-left:8px;border-left:1px solid #3b535c;color:#c6eaa6;letter-spacing:0}
@media(max-width:560px){.canvas-badge{flex-wrap:wrap;max-width:calc(100% - 24px);gap:5px}#floor-grid-badge{flex-basis:100%;padding-left:0;border:0}}

.alignment-actions .mirror-selection{grid-column:1/-1}

#piece-properties label.circuit-start-setting{flex-direction:row;align-items:center;gap:8px;margin:13px 0}#piece-properties .circuit-start-setting input{margin:0;flex:none}

#validation-details .validation-issue{display:flex;align-items:flex-start;gap:10px;width:100%;margin:7px 0;padding:10px 12px;text-align:left;white-space:normal;line-height:1.5;background:#192d35;border-color:#825452;color:#f3b6aa}
#validation-details .validation-issue:hover{background:#3a2c32;border-color:#ed8079}
#validation-details .validation-warning{color:#aecbd0;border-color:#49666b}
.validation-issue .issue-icon{flex:none;font-weight:700;color:#ff807e}.validation-issue .issue-copy{flex:1;min-width:0;overflow-wrap:anywhere}.validation-issue .issue-copy strong,.validation-issue .issue-copy span{display:block}.validation-issue .issue-copy strong{color:#ffd1c4;font-size:11px;margin-bottom:3px}.validation-issue .issue-action{flex:none;font-size:10px;color:#ffd1c4;white-space:nowrap;padding-top:1px}
#layers button.invalid-piece{border-color:#d57070;color:#ffc0b1}#layers button.invalid-piece::before{content:'! ';color:#ff827f;font-weight:700}#layers button.invalid-piece.active{background:#472f36;border-color:#ffb7a8}
#piece-properties .selection-issues{padding:10px 11px;margin:12px 0;border:1px solid #9c5b5c;border-radius:6px;background:#3a2930;color:#ffd1c4;font-size:10px;line-height:1.5}#piece-properties .selection-issues p{margin:5px 0 0}
@media(max-width:560px){#validation-details{padding-left:0}#validation-details .validation-issue{gap:7px;padding:10px}.validation-issue .issue-action{font-size:9px;white-space:normal;max-width:40px}}

.crown-routes{margin-top:13px;padding:16px;background:#172c34;border-color:#677858}
.crown-route-heading{display:flex;align-items:center;gap:14px}.crown-route-heading>div{margin-right:auto}.crown-route-heading h2{margin:0;font-size:18px}.crown-route-heading .eyebrow{color:#e7d49b;margin-bottom:5px}
.crown-route-heading label{display:flex;flex-direction:column;gap:5px;max-width:210px}.crown-route-heading select{font-size:10px}.crown-route-heading button{font-size:10px;white-space:nowrap}
.crown-route-summary{color:#e3e9cf;font-size:12px;margin:15px 0 11px}
.crown-route-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.crown-route-card{--route-color:#a9e9ed;text-align:left;display:flex;flex-direction:column;gap:7px;padding:11px;border-left:3px solid var(--route-color);background:#142831;font-size:10px;min-width:0}
.crown-route-card[aria-pressed=true]{border-color:var(--route-color);background:#29404a}
.crown-route-card-head{display:flex;align-items:center;gap:7px}.crown-route-number{display:grid;place-items:center;flex:none;width:20px;height:20px;color:#10252e;background:var(--route-color);border-radius:50%;font:700 10px var(--mono)}
.crown-route-time{font:600 14px var(--mono);color:var(--route-color);margin-left:auto;white-space:nowrap}.crown-route-gap{color:#bacccc;font-weight:400}.crown-route-detail{font-size:9px;line-height:1.45;font-weight:400;color:#d9bd94}.crown-route-notes{margin:12px 0 0;font-size:10px;line-height:1.6;color:var(--muted)}
.crown-route-toggle{width:100%;margin:9px 0}.crown-route-toggle[aria-pressed=true]{border-color:#dbc789;color:#ffe1a7}
.crown-route-badge{position:absolute;bottom:10px;left:10px;pointer-events:none;padding:6px 8px;color:#f5dc99;border:1px solid #9f9159;background:#142932ed;border-radius:4px;font:9px var(--mono);max-width:calc(100% - 20px)}
@media(max-width:560px){.crown-routes{padding:12px}.crown-route-heading{flex-wrap:wrap;gap:10px}.crown-route-heading>div{flex:1 1 100%}.crown-route-heading label{flex:1;max-width:none}.crown-route-cards{grid-template-columns:1fr}.crown-route-heading h2{font-size:17px}}

/* Saving a playable map stays reachable alongside portable JSON tools. */
.top-actions{flex-wrap:wrap;justify-content:flex-end}
#save-game{white-space:nowrap}
@media(max-width:1100px){.topbar{height:auto;min-height:68px;padding-top:12px;padding-bottom:12px}}
@media(max-width:600px){.top-actions #save-status{flex:1 1 100%;text-align:left}.top-actions button{flex:1 1 auto}.top-actions #save-game{min-height:40px}}