@import url('/game-modules/look/fonts.css');

    /* A warm miniature neighbourhood on a bright studio desk: target-frame paper, ink and green. */
    :root{
      color-scheme:light;
      --ink:#25303f;--muted:#59615f;--faint:#6b716b;
      --surface:#f6f3ec;--surface-raised:#fffcf5;--surface-hover:#e7ecdf;
      --line:#c8c7ba;--accent:#285d4d;--accent-hover:#204c3f;--accent-ink:#fffcf5;
      --danger:#b3261e;--success:#216a57;--focus:#9c4f21;
      --field:var(--world-field,#ef6a34);--field-ink:var(--world-ink,#1f2638);
      --hard-shadow:0 1px 3px oklch(20% .03 260 / .12);
      --ground:#cecdca;--asphalt:oklch(41% .013 175);--paint:oklch(94% .009 105);
      --grass:oklch(65% .09 130);--curb:oklch(80% .02 105);--pavement:oklch(85% .025 105);
      --scene-shadow:oklch(22% .025 165 / .22);--welcome-glass:transparent;
      --body:'DM Sans',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
      --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.563rem;--text-2xl:1.953rem;
      --text-display:clamp(5rem,min(12vw,22dvh),13rem);--text-mobile-display:clamp(3.75rem,17vw,6rem);
      --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.25rem;--s6:1.5rem;--s8:2rem;--s10:2.5rem;--s12:3rem;--s16:4rem;
      --r1:.25rem;--r2:.5rem;--r3:.75rem;--r4:1.25rem;--r-pill:.5rem;
      --hairline:1px;--ring:3px;--target:2.75rem;--action-height:3.25rem;--panel-width:27rem;
      --vehicle-art-width:144px;--vehicle-art-height:240px;
      --gutter:clamp(1rem,3vw,2.5rem);--top:calc(var(--gutter) + env(safe-area-inset-top));
      --bottom:calc(var(--gutter) + env(safe-area-inset-bottom));--left:calc(var(--gutter) + env(safe-area-inset-left));--right:calc(var(--gutter) + env(safe-area-inset-right));
      --fast:140ms;--normal:300ms;--slow:500ms;--ease:cubic-bezier(.2,.75,.25,1);
      --shadow:var(--hard-shadow);--elevation:0 var(--s4) var(--s16) oklch(30% .03 240 / .18);
      --hud-rails:0;--rail-left:9.5rem;--rail-right:11rem;--hud-bottom-limit:44dvh;--hud-view-limit:30dvh;--queue-width:22rem;
    }
*{box-sizing:border-box}
html:root{color-scheme:light}
html,body{margin:0;width:100%;height:100%;background:var(--field);transition:background-color var(--slow) var(--ease)}
body{font:400 var(--text-base)/1.5 var(--body);color:var(--ink);overflow:hidden;overscroll-behavior:none}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;color:var(--faint)}
button:active:disabled{transform:none}
.primary:disabled{background:var(--surface-raised);border-color:var(--line);color:var(--faint)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:var(--ring) solid var(--focus);outline-offset:var(--s1);box-shadow:0 0 0 calc(var(--s1) + var(--ring) + var(--hairline)) var(--surface)}
::selection{background:var(--accent);color:var(--accent-ink)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:var(--hairline);height:var(--hairline);padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage,#game-root{position:relative;width:100%;height:100dvh;overflow:hidden}
.stage{isolation:isolate}
main.car-main{margin:0;padding:0;max-width:none;height:100dvh}
.world-host{position:absolute;inset:0;overflow:hidden}
.world-host canvas{display:block;width:100%;height:100%;touch-action:none}
.world-host canvas:focus-visible{outline:var(--ring) solid var(--focus);outline-offset:calc(-1 * var(--ring));box-shadow:inset 0 0 0 calc(var(--ring) * 2) var(--surface)}

.intro-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--field) 0%,color-mix(in srgb,var(--field) 85%,transparent) 30%,transparent 62%)}
.intro{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--s4);align-items:start;padding:var(--top) var(--right) var(--bottom) var(--left);pointer-events:none}
.intro>*{pointer-events:auto}
.intro-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);min-width:0}
.about-link{display:inline-flex;align-items:center;min-height:var(--target);color:var(--ink);font-weight:700;font-size:var(--text-sm);text-underline-offset:var(--s1)}
.preview-label{padding:var(--s2) var(--s3);font-size:var(--text-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--field-ink)}
.intro-copy{align-self:center;justify-self:start;display:grid;grid-template-columns:1fr;gap:var(--s6);width:min(34rem,42vw);min-height:0;max-height:100%;overflow:auto;padding:var(--s2) 0;scrollbar-color:var(--line) transparent}
.eyebrow{margin:0;display:flex;align-items:center;gap:var(--s3);text-transform:uppercase;letter-spacing:.2em;font-size:var(--text-xs);font-weight:700;color:var(--accent)}
.welcome-brand .eyebrow{color:var(--field-ink)}
.eyebrow:before{content:'';width:var(--s8);height:var(--hairline);background:currentColor}
h1{font:700 var(--text-display)/.82 var(--display);letter-spacing:-.02em;margin:var(--s3) 0 var(--s4);text-transform:uppercase;color:var(--field-ink)}
h1 span{display:block;color:transparent;-webkit-text-stroke:.035em var(--field-ink)}
.intro-description{font:700 var(--text-xl)/1.15 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--field-ink);margin:0}
.welcome-actions{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.welcome-actions .control{min-height:var(--action-height)}
.state-note{margin:0 0 var(--s3);font-size:var(--text-sm);max-width:38ch;width:fit-content;padding:var(--s2) var(--s3);background:var(--surface);border-radius:var(--r2);box-shadow:var(--hard-shadow)}
.welcome-settings,.dialog-settings{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.welcome-settings .control{background:var(--surface);border-color:transparent;box-shadow:var(--hard-shadow);padding-inline:var(--s3);flex:1}
.welcome-settings .control:hover{background:var(--surface-hover)}
.dialog-settings{padding-block:var(--s4);border-block:var(--hairline) solid var(--line);margin-bottom:var(--s3)}
.intro-facts{margin:var(--s3) 0 0;font-size:var(--text-sm);font-weight:700;color:var(--field-ink)}
.intro-bottom{display:none;align-items:center;gap:var(--s2);font-size:var(--text-xs);color:var(--muted);min-width:0;flex-wrap:wrap}
.intro-bottom strong{font-weight:700;color:var(--ink)}
.intro-bottom:before{content:attr(data-level);display:grid;place-items:center;width:var(--s10);height:var(--s10);border:var(--hairline) solid var(--line);border-radius:var(--r2);font-variant-numeric:tabular-nums}

.primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);min-height:var(--action-height);padding:var(--s4) var(--s8);border:var(--hairline) solid var(--accent);border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font:700 var(--text-xl)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--hard-shadow);transition:transform var(--fast) var(--ease)}
.primary:hover:not(:disabled){background:var(--accent-hover)}
.primary:active,.control:active,.round:active{transform:scale(.97)}
.round{display:grid;place-items:center;min-width:var(--target);min-height:var(--target);padding:var(--s3);border:var(--hairline) solid transparent;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);transition:transform var(--fast) var(--ease)}
.round:hover:not(:disabled),.control:hover:not(:disabled){background:var(--surface-hover)}
.control{display:flex;align-items:center;justify-content:center;gap:var(--s3);min-width:var(--target);min-height:var(--target);padding:var(--s3) var(--s5);border:var(--hairline) solid var(--line);border-radius:var(--r-pill);background:var(--surface-raised);font-size:var(--text-sm);font-weight:700;transition:transform var(--fast) var(--ease)}
.control:disabled{background:var(--surface);border-color:var(--surface-hover)}


/* Measured rows reserve space without assuming a title, message or viewport height. */
.hud{--top:calc(var(--gutter) + env(safe-area-inset-top));--bottom:calc(var(--gutter) + env(safe-area-inset-bottom));--left:calc(var(--gutter) + env(safe-area-inset-left));--right:calc(var(--gutter) + env(safe-area-inset-right));position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,auto) minmax(0,auto) minmax(0,1fr) minmax(0,auto);gap:var(--s2);padding:var(--top) var(--right) var(--bottom) var(--left);overflow:hidden;pointer-events:none}
.hud button,.hud a,.hud summary{pointer-events:auto}
.hud-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);min-width:0;min-height:0}
.level-cluster{display:flex;gap:var(--s3);align-items:center;min-width:0;max-width:var(--panel-width)}
.level-cluster>.round{flex:none}
.level-info{padding:var(--s2);min-width:0;flex:1;color:var(--ink);background:var(--surface);border-radius:var(--r2)}
.level-info p{margin:0;font:700 var(--text-2xl)/1 var(--display);letter-spacing:.01em;text-transform:uppercase}
.level-info span{font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.level-info p,.level-info span{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.progress{padding:var(--s2) var(--s5);background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--hard-shadow);text-align:center}
.progress-count{font:700 var(--text-xl)/1 var(--display);letter-spacing:.02em;text-transform:uppercase;font-variant-numeric:tabular-nums;white-space:nowrap}
.progress-caption{font-size:var(--text-xs);color:var(--muted)}
.progress-count.is-bumped{animation:car-count-bump var(--slow) var(--ease)}
@keyframes car-count-bump{30%{transform:scale(1.25)}}
.view-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);min-width:0;min-height:0;padding-block:var(--s1)}
.view-toggle{background:var(--surface);border-color:transparent;box-shadow:var(--hard-shadow)}
.view-toggle:after{content:'▾';font-size:var(--text-xs)}
.view-toggle[aria-expanded=true],.view-toggle[aria-expanded=true]:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}
.view-toggle[aria-expanded=true]:after{content:'▴'}
/* The secondary camera tools float over the map so opening them never refits the lot. */
.view-extra{position:absolute;z-index:2;top:calc(100% + var(--s1));left:0;display:flex;flex-wrap:wrap;gap:var(--s2);max-width:min(calc(100vw - 2rem),24rem);padding:var(--s2);background:color-mix(in srgb,var(--surface) 92%,transparent);border-radius:var(--r4);box-shadow:var(--elevation);pointer-events:auto}
.camera-presets{display:flex;gap:var(--s1);padding:var(--s1);border:var(--hairline) solid var(--line);border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow);flex:none;max-width:100%}
.camera-presets button{min-width:var(--target);min-height:var(--target);padding:var(--s2) var(--s3);border:0;background:transparent;border-radius:var(--r-pill);font-size:var(--text-xs);font-weight:700;color:var(--muted)}
.camera-presets button:hover{background:var(--surface-hover);color:var(--ink)}
.camera-presets button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.camera-presets button[aria-pressed=true]:before,.floor-controls button[aria-pressed=true]:before,.parking-areas button[aria-pressed=true]:before{content:'✓ ';}
.camera-presets button[aria-pressed=true]:hover{background:var(--accent-hover)}
.tools{display:grid;grid-template-columns:repeat(4,var(--target));gap:var(--s1);flex:none;max-width:100%}
.tools .round{padding:var(--s2);min-width:0;width:var(--target);height:var(--target)}
.floor-controls,.parking-areas{display:flex;flex-wrap:wrap;gap:var(--s1);flex:none}
.floor-controls button{padding:var(--s2) var(--s3);min-width:var(--target);min-height:var(--target);border:var(--hairline) solid var(--line);border-radius:var(--r2);background:var(--surface-raised);font-size:var(--text-xs)}
.floor-controls button:hover{background:var(--surface-hover)}
.floor-controls button[aria-pressed=true],.parking-areas button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.floor-controls button[aria-pressed=true]:hover{background:var(--accent-hover)}
.world-status{min-height:0;overflow:auto;scrollbar-color:var(--line) var(--surface)}
.queue-panel{width:max-content;max-width:min(100%,var(--queue-width));padding:var(--s2) var(--s3);background:var(--surface);border:var(--hairline) solid var(--line);border-radius:var(--r3);pointer-events:auto}
.queue-panel summary{min-height:var(--target);cursor:pointer;font-size:var(--text-sm);list-style-position:inside;touch-action:manipulation}
.queue-panel summary strong{font-weight:700}
.queue-panel summary span{display:block;font-size:var(--text-xs);color:var(--muted);padding-top:var(--s1)}
.queue-list{display:flex;gap:var(--s1);overflow-x:auto;list-style:none;margin:var(--s2) 0 0;padding:var(--s1);max-width:100%;scrollbar-color:var(--line) var(--surface)}
.queue-list li{flex:none;min-width:var(--s8);height:var(--s8);display:grid;place-items:center;border:var(--hairline) solid var(--line);border-radius:var(--r2);font-size:var(--text-xs);font-variant-numeric:tabular-nums}
.queue-list .is-next{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700}
.queue-list .departed{color:var(--faint);text-decoration:line-through}
.queue-car{display:block;width:var(--s5,1.25rem);height:calc(var(--s5,1.25rem)*.62);border-radius:.4em;border:2px solid #424957}
.queue-list .is-next .queue-car{box-shadow:0 0 0 2px var(--accent-ink)}
.queue-list .departed .queue-car{opacity:.3}
.hud-bottom{display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:var(--s1);min-height:0;max-height:var(--hud-bottom-limit);overflow:auto;scrollbar-color:var(--line) var(--surface);pointer-events:none}
/* Only the dock's own panels take input; the empty band beside them stays draggable map. */
.hud-bottom>*{flex-shrink:0;pointer-events:auto}
.feedback{margin:0;max-width:min(100%,52ch);padding:var(--s2) var(--s4);text-align:center;font-size:var(--text-sm);font-weight:700;color:var(--ink);background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--hard-shadow);overflow-wrap:anywhere}
.feedback[data-tone=blocked]{color:#fff;background:var(--danger);animation:car-shake 320ms var(--ease)}
@keyframes car-shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.selected-car{display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s2) var(--s2) var(--s2) var(--s5);background:var(--surface);border:0;border-radius:var(--r-pill);box-shadow:var(--hard-shadow);font-size:var(--text-sm);max-width:100%;flex-wrap:wrap}
/* Reserve this row before selection so selecting a car does not shrink the fitted world. */
.selected-car[hidden]{display:flex!important;visibility:hidden;pointer-events:none}
.selected-car{width:min(100%,var(--panel-width));min-height:3.75rem;flex-wrap:nowrap}
.selected-info{display:grid;gap:var(--s1);flex:1;min-width:0;text-align:left}
.selected-info span{font-size:var(--text-xs);color:var(--muted)}
.selected-info strong{font:700 var(--text-lg)/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.selected-car .control{flex:none;padding:var(--s2) var(--s5)}
.selected-car [data-action=sendCar]:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.selected-car [data-action=sendCar]:hover:not(:disabled){background:var(--accent-hover)}
.action-bar{display:grid;grid-template-columns:repeat(2,minmax(var(--target),1fr));width:max-content;max-width:100%;gap:var(--s2);padding:var(--s1);background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--hard-shadow)}
.action-bar .control{min-width:0;padding:var(--s2);overflow-wrap:anywhere}
/* Wide screens: map controls dock bottom-right (map convention) and the action dock is one compact band,
   so the lot gets the full height between the title row and the dock. */
@media(min-width:1240px) and (min-height:600px){
 .view-row{position:absolute;z-index:1;right:var(--right);bottom:var(--bottom);display:grid;grid-template-columns:auto auto;justify-items:end}
 /* Deck and area pickers stack above zoom so the dock never grows left into the centred action band. */
 .floor-controls,.parking-areas{grid-column:1/-1;grid-row:1}
 .view-extra{top:auto;bottom:calc(100% + var(--s2));left:auto;right:0;width:max-content}
 .world-status{grid-row:2}
 .hud-bottom{grid-row:4;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:var(--s2)}
 .hud-bottom>.feedback,.hud-bottom>.save-warning{grid-column:1/-1;justify-self:center}
}
.result-stars{margin:var(--s2) 0 0}
.result-stars>span{display:flex;gap:var(--s2)}
.result-stars i{width:2.75rem;height:2.75rem;background:var(--surface-hover);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.result-stars i.is-earned{background:#ffc23a;animation:car-star-pop var(--slow) var(--ease) both}
.result-stars i.is-earned:nth-child(2){animation-delay:.15s}.result-stars i.is-earned:nth-child(3){animation-delay:.3s}
@keyframes car-star-pop{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.25) rotate(6deg)}100%{transform:none}}
@media(forced-colors:active){.result-stars i{background:GrayText}.result-stars i.is-earned{background:Highlight}}
.confetti{position:fixed;inset:0;z-index:30;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-1.5rem;left:var(--x);width:var(--w,.6rem);height:var(--h,1rem);background:var(--c);border-radius:.125rem;animation:car-confetti var(--d,1.6s) cubic-bezier(.25,.6,.4,1) var(--delay,0s) both}
@keyframes car-confetti{to{transform:translate(var(--drift),105dvh) rotate(var(--r))}}
.save-warning{margin:0;color:var(--danger);font-size:var(--text-xs);max-width:48ch;text-align:center;background:var(--surface);padding:var(--s2);border-radius:var(--r2)}

.error-panel{position:absolute;inset:0;display:grid;place-content:center;justify-items:start;gap:var(--s4);padding:var(--top) var(--right) var(--bottom) var(--left);background:var(--surface);overflow:auto}
.error-panel h2{font:700 var(--text-2xl)/1.2 var(--display);margin:0;max-width:32ch}
.error-panel p{margin:0;max-width:52ch;color:var(--muted)}
dialog{margin:auto;inset:0;width:min(38rem,calc(100% - var(--left) - var(--right)));max-height:calc(100dvh - var(--top) - var(--bottom));padding:var(--s6);color:var(--ink);background:var(--surface);border:0;border-radius:var(--r4);box-shadow:var(--elevation);overflow:hidden;overscroll-behavior:contain;scrollbar-color:var(--line) var(--surface);overflow-wrap:anywhere}
dialog::backdrop{background:color-mix(in srgb,var(--field) 70%,transparent)}
dialog h2{font:700 var(--text-2xl)/1.05 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:var(--s4) 0}
dialog[data-dialog=result] h2{font-size:clamp(2.5rem,7vw,4rem);line-height:.9}
dialog p{color:var(--muted);margin:var(--s4) 0 var(--s6)}
dialog ol{padding-left:var(--s6);color:var(--muted)}
dialog li+li{margin-top:var(--s3)}
.dialog-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.dialog-actions .primary{flex:1}
.dialog-actions .control{white-space:nowrap}
dialog[data-dialog=result] .dialog-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr))}
dialog[data-dialog=result] .dialog-actions .primary{grid-column:1/-1}
.level-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.level-filters .field{margin-top:0}
.pause-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.appearance-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.appearance-option{display:grid;justify-items:center;padding:var(--s3) var(--s1);font-size:var(--text-xs);gap:var(--s2);min-width:0}
.appearance-option[aria-pressed=true]{border-color:var(--accent)}
.appearance-option[aria-pressed=true]>span:last-child:before{content:"✓ ";color:var(--accent)}
.swatch{width:var(--s10);height:var(--s6);border:var(--hairline) solid var(--line);border-radius:var(--r1)}
.swatch-asphalt{background:#465359}.swatch-concrete{background:#bdc7c2}.swatch-slate{background:#607d88}
.holding-list{font-size:var(--text-sm)}
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:var(--s2);margin-top:var(--s5)}
.level-option{border-radius:var(--r3);padding:var(--s3);text-align:left;display:grid;justify-content:start;align-items:start;gap:var(--s1)}
.level-option strong{font-size:var(--text-sm)}
.level-option small{font-size:var(--text-xs);color:var(--muted)}
.level-option[aria-current=true]{border-color:var(--accent)}
.level-option [data-current]{font-size:var(--text-xs);color:var(--accent)}
.field{display:grid;gap:var(--s2);margin-top:var(--s4);font-size:var(--text-sm);font-weight:700}
.field input,.field select{width:100%;min-width:0;min-height:var(--target);border:var(--hairline) solid var(--line);background:var(--surface-raised);border-radius:var(--r2);padding:var(--s3);font:400 var(--text-base)/1.5 var(--body);color:var(--ink);caret-color:var(--accent)}
.field input:focus-visible,.field select:focus-visible{outline:var(--ring) solid var(--focus);outline-offset:var(--s1)}
.car-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:var(--s2);margin-top:var(--s4)}
.car-list button{justify-content:start;text-align:left}

@media(max-width:767px){
 .intro-shade{background:linear-gradient(0deg,var(--field) 0%,color-mix(in srgb,var(--field) 88%,transparent) 42%,transparent 66%)}
 .intro-copy{width:100%;max-height:100%;align-self:end;gap:var(--s3);padding:0}
 .welcome-brand{display:block}
 .welcome-brand h1{margin:var(--s1) 0 var(--s2);font-size:clamp(3.5rem,19vw,5.5rem);line-height:.85}
 .welcome-brand h1 span{display:inline}
 .intro-description{font-size:var(--text-base)}
 .level-info p{font-size:var(--text-lg);white-space:normal;line-height:.95;text-wrap:balance}
 .intro-description{font-size:var(--text-sm);max-width:28ch;text-align:left}
 .state-note{font-size:var(--text-xs)}
 .intro-facts{display:none}
 .welcome-settings{margin-top:var(--s3)}
 .welcome-settings .control{padding-inline:var(--s2)}
 .welcome-actions .primary{flex:1}
 .hud-top,.level-cluster{gap:var(--s1)}
 .level-info{padding:var(--s2)}
 .progress{padding:var(--s2)}
 .progress-count{font-size:var(--text-base)}
 .view-row{justify-content:flex-start}
 .hud-bottom{padding:var(--s1) 0}
 .selected-car,.feedback{font-size:var(--text-xs)}
 .feedback{border-radius:var(--r3)}
 .action-bar{width:100%;max-width:var(--panel-width)}
 .queue-panel{max-width:100%}
}
@media(max-width:440px){
 .preview-label{display:none}
 .intro-bottom span{flex-basis:100%;padding-left:calc(var(--s10) + var(--s2))}
 dialog{padding:var(--s4)}
 .dialog-actions>*{flex:1 1 auto}
}
@media(max-height:540px){
 .hud{gap:var(--s1)}
 .hud-bottom{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:start}
 .feedback{max-width:32ch}
 .action-bar{width:max-content}
 .intro-copy{width:min(45vw,26rem);grid-template-columns:1fr;padding:var(--s3);gap:var(--s2);max-height:100%}
 .welcome-brand{display:block}
 .welcome-brand .eyebrow,.intro-description,.intro-facts{display:none}
 .welcome-brand h1{font-size:3rem;margin:0}
 .welcome-settings{margin-top:var(--s1)}
 .state-note{font-size:var(--text-xs);margin-bottom:var(--s1)}
 .welcome-actions .primary,.welcome-actions .control{min-height:var(--target);padding:var(--s2) var(--s3)}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){.intro-shade,dialog::backdrop{background:var(--field)}}
@media(forced-colors:active){
 .primary,.control,.round,.level-info,.progress,.feedback,dialog,.camera-presets,.camera-presets button,.selected-car,.queue-panel,.level-option,.field input,.field select,.floor-controls button,.save-warning,.error-panel{background:Canvas;color:CanvasText;border:var(--hairline) solid ButtonText}
 .camera-presets button[aria-pressed=true],.floor-controls button[aria-pressed=true],.queue-list .is-next{background:Highlight;color:HighlightText;border-color:Highlight}
 button:focus-visible,a:focus-visible,summary:focus-visible,.field input:focus-visible,.field select:focus-visible{outline-color:Highlight}
}
@keyframes car-ui-enter{from{opacity:0}to{opacity:1}}
.intro-copy,dialog[open]{animation:car-ui-enter var(--normal) var(--ease) both}
@media(prefers-reduced-motion:reduce){.intro-copy,dialog[open]{animation:none}}
@media(max-width:319px){.tools{grid-template-columns:repeat(3,var(--target))}}

.site-skip{position:absolute;z-index:20;top:var(--s2);left:var(--s2);transform:translateY(-160%);padding:var(--s3) var(--s4);background:var(--surface);border:var(--hairline) solid var(--line);border-radius:var(--r2);color:var(--ink);min-height:var(--target)}
.site-skip:focus{transform:none}
.boot-status{display:grid;place-content:center;gap:var(--s4);height:100dvh;padding:var(--top) var(--right) var(--bottom) var(--left);background:var(--surface)}
.boot-status h1{font-size:var(--text-2xl);margin:0}.boot-status p{margin:0;color:var(--muted)}
@media(max-width:360px){.welcome-settings{gap:var(--s1)}.welcome-settings .control{padding:var(--s2);font-size:var(--text-xs)}.selected-info span{font-size:var(--text-xs)}.selected-car .control{font-size:var(--text-xs)}.level-filters{grid-template-columns:1fr}}

.world-markers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.world-portal{position:absolute;display:inline-flex;align-items:center;gap:var(--s1);padding:var(--s1) var(--s3);background:var(--surface);color:var(--ink);border:0;border-radius:var(--r-pill);box-shadow:var(--hard-shadow);font:700 var(--text-sm)/1.3 var(--display);letter-spacing:.12em;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
.world-portal--exit,.world-portal[data-kind=exit]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent-ink)}

@media(forced-colors:active){.world-portal{background:Canvas;color:CanvasText;border-color:ButtonText}.appearance-option[aria-pressed=true],.parking-areas button[aria-pressed=true]{border-color:Highlight}}

.intro-top .about-link{padding:var(--s2) var(--s4);background:var(--surface);border-radius:var(--r-pill);box-shadow:var(--hard-shadow);text-decoration:none}

.parking-areas button[aria-pressed=true]:before{content:"✓ "}

.swatch-environment{background:var(--field)}

/* Dialog content has its own density; it does not consume the live playfield. */
dialog[data-dialog=levels]{width:min(64rem,calc(100% - var(--left) - var(--right)))}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
[data-generator]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
[data-generator] .field{margin:0}
[data-generator]>p,[data-generator]>.dialog-actions{grid-column:1/-1;margin:0}

.lot-thumbnail{position:relative;display:block;overflow:hidden;width:100%;height:7rem;border-radius:var(--r2);background:var(--ground);pointer-events:none}
.level-option{justify-content:stretch}
.lot-thumbnail>svg{display:block;width:100%;height:100%}
@media(max-width:440px){[data-generator]{grid-template-columns:1fr}.level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lot-thumbnail{height:5rem}.level-option{padding:var(--s2)}.level-info span{display:none}}

.parking-areas{align-items:center;gap:var(--s2);padding-left:var(--s3);background:var(--surface);border:var(--hairline) solid var(--line);border-radius:var(--r2);font-size:var(--text-xs);pointer-events:auto;max-width:100%}
.parking-areas select{max-width:12rem;min-width:0;min-height:var(--target);border:0;border-radius:var(--r2);padding:var(--s2);font:inherit;background:var(--surface-raised);color:var(--ink)}
.parking-areas select:focus-visible{outline:var(--ring) solid var(--focus);outline-offset:var(--s1)}


.zoom-controls{display:flex;align-items:center;gap:var(--s1);flex:none;max-width:100%;padding:var(--s1);background:var(--surface);border:var(--hairline) solid var(--line);border-radius:var(--r3);pointer-events:auto}
.zoom-controls output{min-width:var(--s12);text-align:center;font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--ink)}
.zoom-controls .round{box-shadow:none;border-color:transparent}
.zoom-controls .control{padding-inline:var(--s3)}
@media(forced-colors:active){.zoom-controls{background:Canvas;border-color:ButtonText}.zoom-controls output{color:CanvasText}}

.welcome-finishes{margin-top:var(--s5);border:0;padding:0;min-width:0}
.welcome-finishes legend{font-size:var(--text-xs);font-weight:700;margin-bottom:var(--s2);color:var(--muted)}
.welcome-finishes .appearance-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.welcome-finishes .appearance-option{background:var(--surface);min-height:var(--target)}
.welcome-finishes .appearance-option[aria-pressed=true]{background:var(--surface-hover);border-color:var(--accent)}
@media(prefers-reduced-transparency:reduce){.intro-copy{background:var(--surface)}}

.world-plan-step{position:absolute;left:0;top:0;display:grid;place-items:center;min-width:1.75rem;height:1.75rem;padding:0 var(--s1);background:var(--ink);color:var(--surface);border-radius:var(--r-pill);box-shadow:var(--hard-shadow);font:700 var(--text-sm)/1 var(--display);pointer-events:none}
.world-plan-step{border:2px solid var(--surface)}
.world-plan-step[data-first=true]{background:var(--surface);color:var(--ink);border-color:var(--ink)}
@media(forced-colors:active){.world-plan-step{background:Canvas;color:CanvasText;border:1px solid ButtonText}}
.world-portal{isolation:isolate}
.world-portal::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;height:1px;width:var(--leader-length,0px);background:var(--ink);transform-origin:left center;transform:rotate(var(--leader-angle,0rad))}

/* The target's quiet paper panels frame the puzzle without competing with its cars. */
.hud .level-info p,.progress-count,.selected-info strong,dialog h2{font-family:var(--body);text-transform:none;letter-spacing:-.02em}
.hud .level-info p{font-size:var(--text-lg);line-height:1.2;white-space:normal;overflow:visible}
.progress-count{font-size:var(--text-lg);line-height:1.2}
dialog[open]{display:flex;flex-direction:column}
.dialog-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--s1);scrollbar-color:var(--muted) var(--surface)}
dialog>.dialog-actions{flex-shrink:0;padding-top:var(--s3);margin-top:var(--s3);border-top:var(--hairline) solid var(--line)}
dialog[data-dialog=result] h2{font-size:var(--text-2xl);line-height:1.1}
@media(min-width:1240px) and (min-height:600px){.selected-car{width:20rem}.action-bar{max-width:16rem}}
@media(max-width:767px) and (orientation:portrait){
 .hud{--gutter:var(--s3);gap:var(--s1)}
 .hud-top{grid-template-columns:minmax(0,1fr) auto}
 .hud .level-info p{font-size:var(--text-sm)}
 .level-info{padding:var(--s1)}
 .progress{padding:var(--s2)}
 .progress-count{font-size:var(--text-base)}
 .view-row{padding-block:0}
 .zoom-controls{padding:0}
 .zoom-controls .round{padding:var(--s2)}
 .hud-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s1);align-items:center}
 .feedback{grid-column:1;grid-row:2;padding:var(--s1) var(--s2);font-size:var(--text-xs);text-align:left}
 .hud-bottom>.selected-car{grid-column:1/-1;grid-row:1}
 .hud-bottom>.action-bar{grid-column:2;grid-row:2}
 .hud-bottom>.save-warning{grid-column:1/-1}
 .selected-car{min-height:3.25rem;padding:var(--s1) var(--s2)}
 .selected-car .control{padding-inline:var(--s3);font-size:var(--text-xs)}
 .action-bar{padding:0;gap:var(--s2)}
 .action-bar .control{font-size:var(--text-xs)}
}
/* Rail DOM order is left top-to-bottom, then right top-to-bottom; no duplicate controls. */
@media(max-height:540px) and (orientation:landscape){
 .hud{--hud-rails:1;--gutter:var(--s3);grid-template-columns:var(--rail-left) minmax(0,1fr) var(--rail-right);grid-template-rows:auto minmax(0,1fr);gap:var(--s2)}
 .hud-top{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:stretch;gap:var(--s2)}
 .level-cluster{align-items:start;gap:var(--s1)}
 .level-info{padding:var(--s1);background:transparent}
 .hud .level-info p{font-size:var(--text-sm);line-height:1.3}
 .level-info span{font-size:var(--text-xs);letter-spacing:0;white-space:normal}
 .progress{box-shadow:none;padding:var(--s1);display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--s2)}
 .progress-count{font-size:var(--text-base)}
 .view-row{grid-column:1;grid-row:2;align-self:start;display:flex;align-content:start;gap:var(--s1);padding:0;max-height:100%;overflow-y:auto;scrollbar-width:thin}
 .zoom-controls{width:100%;display:grid;grid-template-columns:repeat(3,minmax(var(--target),1fr));gap:0;padding:0;border:0}
 .zoom-controls output{min-width:0}
 .view-row>.fit{width:100%}
 .view-toggle{width:100%}
 .view-extra{position:fixed;left:calc(var(--left) + var(--rail-left) + var(--s2));top:var(--top);bottom:auto;max-height:calc(100dvh - var(--top) - var(--bottom));max-width:calc(100vw - var(--left) - var(--right) - var(--rail-left) - var(--rail-right) - var(--s4));width:16rem;overflow:auto;background:var(--surface)}
 .floor-controls,.parking-areas{width:100%;gap:var(--s1);padding:0}
 .floor-controls button{flex:1;padding-inline:var(--s1)}
 .parking-areas span{padding-left:var(--s1)}
 .parking-areas select{flex:1;width:0}
 .world-status{position:absolute;z-index:1;right:var(--right);bottom:var(--bottom);width:var(--rail-right);max-width:var(--rail-right);max-height:8rem;padding:var(--s1);pointer-events:auto}
 .hud:has(.queue-panel:not([hidden])) .hud-bottom{margin-bottom:8rem}
 .queue-panel{padding:var(--s1) var(--s2)}
 .queue-panel summary{font-size:var(--text-xs)}
 .hud-bottom{grid-column:3;grid-row:1/-1;align-self:stretch;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:start;align-items:stretch;gap:var(--s1);padding:var(--s1);max-height:none;overflow:auto;background:var(--surface);border-radius:var(--r2)}
 .feedback{padding:var(--s1);font-size:var(--text-xs);box-shadow:none;text-align:left}
 .selected-car{display:flex;flex-direction:column;align-items:stretch;gap:var(--s2);width:100%;min-height:0;padding:var(--s2);box-shadow:none}
 .selected-info strong{font-size:var(--text-base)}
 .selected-car .control{width:100%;padding:var(--s2);font-size:var(--text-xs)}
 .action-bar{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:var(--s2);padding:var(--s1);box-shadow:none}
 .action-bar .control{font-size:var(--text-xs)}
 .save-warning{font-size:var(--text-xs)}
 .hud-top{background:var(--surface);padding:var(--s1);border-radius:var(--r2)}
 dialog{padding:var(--s3)}
 dialog h2{margin-block:var(--s2);font-size:var(--text-xl)}
 dialog p{margin-block:var(--s2)}
 dialog[data-dialog=result] .dialog-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
 dialog[data-dialog=result] .dialog-actions .primary{grid-column:auto}
 dialog[data-dialog=result] .dialog-actions .control{white-space:normal;padding:var(--s2)}
}

.selected-car .selected-info{flex:1;justify-content:start;justify-items:start;padding:var(--s1) var(--s2);gap:var(--s1);text-align:left}
.selected-car .selected-info strong{font-size:var(--text-base)}
.selected-car .selected-info span{font-weight:400}
.selected-car{padding:var(--s1) var(--s2)}
@media(max-width:440px){
 dialog[data-dialog=explore]>.dialog-actions{display:grid;grid-template-columns:minmax(0,1fr) auto}
 dialog[data-dialog=explore]>.dialog-actions .primary{font-size:var(--text-lg);padding:var(--s3);gap:var(--s2)}
}