:root{--bg:#0e1420;--panel:#182033;--ink:#f3ecdf;--muted:#b8b3c4;--rule:#334061;--accent:#ffc94d;--accent2:#2bd4a7;--focus:#ffd166;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;overscroll-behavior:none}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
/* ------------------------------------------------------------ picker */
.picker{position:fixed;inset:0;overflow:auto;background:radial-gradient(120% 80% at 20% 0%,#1d2a4a 0%,#0e1420 60%);padding:calc(24px + var(--sat)) 0 calc(24px + var(--sab));z-index:5}
.picker[hidden]{display:none}
.picker-inner{width:min(1080px,100% - 32px);margin:0 auto}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);margin:0 0 8px}
h1{font:400 clamp(2.4rem,7vw,4.2rem)/1.05 Georgia,"Times New Roman",serif;margin:0 0 12px}
.lede{color:var(--muted);max-width:62ch;margin:0 0 18px;font-size:1.05rem}
.warn{background:#3a1f22;border:1px solid #7a3a44;padding:12px 14px;border-radius:10px}
.warn a{color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:18px}
.card{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;padding:14px 14px 12px;background:var(--panel);border:1px solid var(--rule);border-radius:16px;color:inherit;min-height:44px}
.card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.card .icon{font-size:22px;color:var(--accent2)}
.card .ctitle{font:400 1.25rem Georgia,serif}
.card .cblurb{font-size:13px;color:var(--muted);min-height:3.2em}
.card .preview{width:100%;height:auto;border-radius:10px;background:#141a2b}
.card .stamp{position:absolute;top:10px;right:10px;font-size:10px;letter-spacing:.1em;background:var(--accent2);color:#12201a;padding:4px 8px;border-radius:999px}
.options{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row label{min-width:120px;color:var(--muted)}
.row input[type=text],.row input:not([type]),.row select{flex:1;min-width:200px;font:inherit;padding:10px 12px;border-radius:10px;border:1px solid var(--rule);background:#0f1524;color:var(--ink)}
fieldset.row{border:1px solid var(--rule);border-radius:12px;padding:10px 14px;margin:0}
fieldset.row legend{color:var(--muted);padding:0 6px}
fieldset.row label{min-width:0;color:var(--ink)}
.words{display:flex;flex-wrap:wrap;gap:6px}
.words button{padding:6px 10px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:inherit;font-size:13px}
.words button[aria-pressed=true]{background:var(--accent);color:#1a1206;border-color:var(--accent)}
.actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.primary{padding:12px 22px;border-radius:999px;border:0;background:linear-gradient(90deg,var(--accent2),#1f8fff);color:#0f1a16;font-weight:700;font-size:16px;min-height:44px}
.text{background:none;border:0;color:var(--accent);padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.fine{font-size:12px;color:var(--muted);margin:0}
.picker footer{margin-top:18px;font-size:13px;color:var(--muted)}
.picker footer a{color:var(--accent)}
/* --------------------------------------------------------------- HUD */
.hud{position:fixed;inset:0;pointer-events:none;z-index:3}
.hud[hidden]{display:none}
.hud>*{pointer-events:auto}
.top-left{position:absolute;left:calc(12px + var(--sal));top:calc(10px + var(--sat));max-width:min(60vw,420px);text-shadow:0 1px 3px #000c}
.hud-title{font:400 1.3rem Georgia,serif;margin:0 0 2px}
.hud-line{font-size:12px;color:#e8e2d4;margin:0;line-height:1.5}
.hud-page{display:inline-block;color:var(--accent2);text-decoration:none;margin-top:4px}
.hud-lanterns{font-size:13px;color:var(--accent);margin:4px 0 0}
.top-right{position:absolute;right:calc(10px + var(--sar));top:calc(8px + var(--sat));display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:56vw}
.top-right .extra{display:contents}
.top-right .more{display:none}
.top-right button,.time-panel button{min-height:38px;padding:7px 11px;border-radius:999px;border:1px solid #ffffff40;background:#0e1420b8;color:var(--ink);font-size:12px;backdrop-filter:blur(6px)}
.top-right button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.time-panel{position:absolute;right:calc(10px + var(--sar));top:calc(56px + var(--sat));background:#0e1420d0;border:1px solid #ffffff30;border-radius:14px;padding:12px 14px;width:min(360px,80vw);display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(8px)}
.time-panel[hidden]{display:none}
.time-panel input[type=range]{width:100%}
.share-url{font:12px ui-monospace,monospace;padding:8px;border-radius:8px;border:1px solid var(--rule);background:#0f1524;color:var(--ink);width:100%}
.toast{position:absolute;left:50%;bottom:calc(96px + var(--sab));transform:translateX(-50%);width:min(680px,92vw);margin:0;padding:12px 16px;border-radius:14px;background:#0e1420d8;border:1px solid #ffffff30;font-size:14px;line-height:1.55;backdrop-filter:blur(8px);text-align:center}
.toast[hidden]{display:none}
.lock-note{position:absolute;left:50%;top:calc(10px + var(--sat));transform:translateX(-50%);background:#0e1420b0;padding:4px 10px;border-radius:999px}
.lock-note[hidden]{display:none}
.map{position:absolute;right:calc(10px + var(--sar));bottom:calc(12px + var(--sab));width:240px;height:136px;border-radius:10px;border:1px solid #ffffff30;background:#0e1420;image-rendering:pixelated;display:none}
.fps{position:absolute;left:calc(12px + var(--sal));bottom:calc(10px + var(--sab));margin:0;font:700 13px/1.5 ui-monospace,"SF Mono",Menlo,Consolas,monospace;letter-spacing:.01em;color:#e8e4f0;padding:5px 10px;border-radius:9px;background:rgba(8,10,18,.62);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.10);text-shadow:0 1px 3px rgba(0,0,0,.9)}
.hints{position:absolute;left:50%;top:calc(58px + var(--sat));transform:translateX(-50%);display:none;gap:12px;align-items:center;background:#0e1420c8;border:1px solid #ffffff30;border-radius:12px;padding:8px 12px;font-size:12px;color:#e8e2d4}
.hints[hidden]{display:none!important}
.hints p{margin:0}
.hints button{border:1px solid #ffffff40;background:transparent;color:var(--accent);border-radius:999px;padding:4px 10px;font-size:12px;white-space:nowrap}
body[data-tier=big] .map{display:block}
body[data-tier=big] .hints{display:flex}
.touch{display:none}
body[data-tier=phone] .touch{display:block}
.stick{position:fixed;width:110px;height:110px;border-radius:50%;border:2px solid #ffffff55;background:#ffffff14;pointer-events:none}
.stick[hidden]{display:none}
.knob{position:absolute;left:35px;top:35px;width:40px;height:40px;border-radius:50%;background:#ffffffaa}
.buttons{position:fixed;right:calc(12px + var(--sar));bottom:calc(14px + var(--sab));display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.buttons button{width:84px;min-height:50px;border-radius:14px;border:1px solid #ffffff50;background:#0e1420c0;color:var(--ink);font-size:13px;touch-action:none;user-select:none;-webkit-user-select:none}
body[data-hud=off] .top-left,body[data-hud=off] .top-right button:not(#hud-toggle),body[data-hud=off] .map,body[data-hud=off] .fps,body[data-hud=off] .hints,body[data-hud=off] .time-panel,body[data-hud=off] .toast{display:none}
@media (max-width:640px){
 .top-right{max-width:62vw;gap:5px}
 .top-right button{padding:6px 9px;font-size:11px;min-height:36px}
 .top-right .more{display:inline-block}
 .top-right .extra{display:none}
 body[data-more=on] .top-right .extra{display:contents}
 .top-left{max-width:44vw}
 .hud-title{font-size:1.05rem}
 .hud-line{font-size:11px}
 .toast{top:calc(150px + var(--sat));bottom:auto;font-size:13px;width:min(560px,94vw)}
 .time-panel{top:calc(100px + var(--sat))}
 .buttons button{width:76px;min-height:48px}
 .picker-inner{width:100%;padding:0 12px}
 .cards{grid-template-columns:1fr 1fr;gap:8px}
 .card{padding:10px}
 .card .cblurb{display:none}
}
@media (max-width:420px){.cards{grid-template-columns:1fr 1fr}.card .preview{display:none}}
@media (prefers-reduced-motion:reduce){.picker{scroll-behavior:auto}}

/* ------------------------------------------------------------- build */
.tools{position:absolute;left:50%;bottom:calc(14px + var(--sab));transform:translateX(-50%);display:none;gap:6px;flex-wrap:wrap;justify-content:center;max-width:min(680px,94vw);padding:8px;border-radius:14px;background:#0e1420c8;border:1px solid #ffffff30;backdrop-filter:blur(8px)}
.tools button{display:flex;align-items:center;gap:6px;min-height:40px;padding:6px 10px;border-radius:999px;border:1px solid #ffffff40;background:transparent;color:var(--ink);font-size:12px}
.tools button i{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid #0008}
.tools button[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:#ffc94d22}
.cross{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #ffffffcc;border-radius:50%;box-shadow:0 0 0 2px #0006;display:none;pointer-events:none}
body[data-build=on] .tools{display:flex}
body[data-build=on] .cross{display:block}
body[data-build=on] .toast{bottom:calc(84px + var(--sab))}
.code-row{display:flex;gap:6px}
.code-row input{flex:1;min-width:0}
@media (max-width:640px){body[data-build=on] .buttons{bottom:calc(78px + var(--sab))}body[data-build=on] .toast{top:calc(150px + var(--sat));bottom:auto}.tools button{min-height:36px;padding:5px 8px;font-size:11px}}

/* ------------------------------------------------ sizes, plots, journey, map */
.row.custom{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:8px 12px;align-items:center}
.row.custom label{min-width:0}
.row.custom input{min-width:0;font:inherit;padding:8px 10px;border-radius:10px;border:1px solid var(--rule);background:#0f1524;color:var(--ink)}
.row input[type=number]{width:100%}
#load-code{padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--accent)}
.plots{border-top:1px solid var(--rule);padding-top:10px}
#plot-list{display:flex;flex-wrap:wrap;gap:8px}
#plot-list button{padding:8px 12px;border-radius:12px;border:1px solid var(--rule);background:transparent;color:inherit;font-size:13px;text-align:left}
#plot-list button small{display:block;color:var(--muted);font-size:11px}
.journey{color:var(--accent2)}
.travel{display:flex;gap:6px;flex-wrap:wrap}
.travel button{font-size:12px}
.tool-actions{bottom:calc(66px + var(--sab))}
.time-panel select{min-height:38px;padding:6px 10px;border-radius:999px;border:1px solid #ffffff40;background:#0e1420;color:var(--ink);font:inherit;font-size:12px}
.tool-actions select{min-height:40px;padding:6px 10px;border-radius:999px;border:1px solid #ffffff40;background:#0e1420;color:var(--ink);font:inherit;font-size:12px}
body[data-build=on] .tool-actions{display:flex}
body[data-build=on] .toast{bottom:calc(132px + var(--sab))}
.bigmap{position:fixed;inset:0;z-index:6;background:#0e1420e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:calc(16px + var(--sat)) 16px calc(16px + var(--sab))}
.bigmap[hidden]{display:none}
.bigmap canvas{width:min(900px,100%);height:auto;border-radius:12px;border:1px solid #ffffff30;background:#0e1420;image-rendering:pixelated}
.bigmap button{min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid #ffffff40;background:#0e1420;color:var(--ink)}
@media (max-width:640px){.row.custom{grid-template-columns:auto 1fr}.tool-actions{bottom:calc(140px + var(--sab));max-width:calc(100vw - 110px);left:8px;transform:none}.tools{max-width:calc(100vw - 110px);left:8px;transform:none}body[data-build=on] .toast{top:calc(150px + var(--sat));bottom:auto}}

body[data-photo=on] .cross,body[data-photo=on] .tools,body[data-photo=on] .tool-actions{display:none!important}
body[data-hud=off] #hud-toggle{opacity:.55}

.row label.check{min-width:0;flex:1;display:flex;gap:8px;align-items:flex-start;color:var(--ink);font-size:13px}
.row label.check input{margin-top:4px}

.passport-grid{display:flex;gap:6px;flex-wrap:wrap}
.pstamp{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--rule);color:var(--muted);font-size:16px}
.pstamp.seen{color:var(--ink);border-color:#5a6a8a}
.pstamp.done{background:var(--accent2);border-color:var(--accent2);color:#12201a}
#road-list{display:flex;flex-wrap:wrap;gap:8px}
#road-list button{padding:8px 12px;border-radius:12px;border:1px solid var(--rule);background:transparent;color:inherit;font-size:13px;text-align:left}
#road-list button small{display:block;color:var(--muted);font-size:11px}

.submit{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}
.submit[hidden]{display:none}
@media (max-width:640px){.submit{grid-template-columns:1fr}}

/* ----------------------------------------------------- comfort settings */
html[data-calm=on] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-contrast=on]{--ink:#fff;--muted:#e6e6e6;--panel:#000;--rule:#fff}
html[data-contrast=on] .picker{background:#000}
html[data-contrast=on] .card{background:#000;border:2px solid #fff}
html[data-contrast=on] .card[aria-pressed=true]{outline:3px solid var(--accent)}
html[data-contrast=on] .top-left{background:#000;border:2px solid #fff;border-radius:10px;padding:8px 10px;text-shadow:none}
html[data-contrast=on] .hud-line{color:#fff;font-size:14px}
html[data-contrast=on] .hud-lanterns{font-size:15px}
html[data-contrast=on] .top-right button,html[data-contrast=on] .time-panel button,html[data-contrast=on] .tools button,html[data-contrast=on] .bigmap button,html[data-contrast=on] .hints button,html[data-contrast=on] .buttons button{background:#000;border:2px solid #fff;color:#fff;font-weight:600;backdrop-filter:none}
html[data-contrast=on] .top-right button[aria-pressed=true],html[data-contrast=on] .tools button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
html[data-contrast=on] .time-panel,html[data-contrast=on] .toast,html[data-contrast=on] .tools,html[data-contrast=on] .hints,html[data-contrast=on] .lock-note,html[data-contrast=on] .bigmap{background:#000;border:2px solid #fff;backdrop-filter:none}
html[data-contrast=on] .toast{font-size:16px;color:#fff}
html[data-contrast=on] .fps{color:#fff;font-size:12px}
html[data-contrast=on] .cross{width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid #fff;box-shadow:0 0 0 3px #000,inset 0 0 0 3px #000}
html[data-contrast=on] .map{border:2px solid #fff}
html[data-contrast=on] a{text-decoration:underline}

/* ----------------------------------------------- daily lantern, hunt sets, the book */
.daily{border-color:var(--accent)}
#set-list{display:grid;gap:8px}
.set{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:#0e1420a0}
.set b{font-weight:600}
.set small{grid-column:1;color:var(--muted);font-size:12px;line-height:1.4}
.set .bar{grid-column:1;height:6px;border-radius:3px;background:#ffffff22;overflow:hidden}
.set .bar i{display:block;height:100%;background:var(--accent2)}
.set.done .bar i{background:var(--accent)}
.set button{grid-column:2;grid-row:1/4;min-height:40px;padding:8px 12px;border-radius:999px;border:1px solid #ffffff40;background:transparent;color:var(--ink);font-size:13px}
.set.done button{border-color:var(--accent);color:var(--accent)}

/* ------------------------------------------- round 10: the device sweep's fixes */
/* the Hour panel: rows wrap, selects never spill past the panel, and the panel scrolls when the screen is short */
.time-panel{max-height:calc(100vh - 70px - var(--sat) - var(--sab));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;z-index:3}
.time-panel>*{max-width:100%}
.time-panel .code-row{flex-wrap:wrap}
.time-panel .code-row>*{min-width:0}
.time-panel select{max-width:100%;flex:1 1 140px}
.time-panel .code-row input.share-url{flex:1 1 120px;min-width:0}
/* the hints sit above the toast, not over the button rows */
.hints{top:auto;bottom:calc(176px + var(--sab));max-width:min(680px,92vw)}
/* buttons never get narrower than a fingertip */
.top-right button{min-width:40px}
/* phones: while More or the Hour panel is open, the toast steps aside */
@media (max-width:640px){
 body[data-more=on] .toast{display:none}
 #time-panel:not([hidden])~#toast{display:none}
 .top-right{z-index:2}
}

/* the Comfort row: its two choices stack, each on its own full-width line */
.row .checks{display:grid;gap:8px;min-width:0;flex:1 1 auto}
.row .checks label.check{display:flex;gap:8px;align-items:flex-start;width:100%;max-width:none}

/* build tools: picture stamps, the Place here buttons, the ghost is drawn in the world itself */
.stamps{bottom:calc(122px + var(--sab));flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:6px 8px;scrollbar-width:thin}
body[data-build=on] .stamps{display:flex}
.stamps button{flex-direction:column;gap:2px;min-width:52px;padding:4px 6px;border-radius:12px;font-size:11px}
.stamps button.village{min-width:72px;border-color:var(--accent)}
.stamps button canvas{display:block;image-rendering:auto}
.tool-actions .place{background:var(--accent);color:#1a1408;font-weight:700;border-color:transparent}
.tool-actions .place:disabled{background:#ffffff22;color:#ffffffaa;font-weight:500}
.buttons .build-only{display:none}
body[data-build=on] .buttons .build-only{display:block}
body[data-build=on] .buttons #b-run{display:none}
.buttons #b-place{min-height:64px;font-size:14px;font-weight:700;background:#ffc94de0;color:#1a1408;border-color:transparent}
.buttons #b-place:disabled{background:#0e1420c0;color:#ffffffaa;font-weight:500}
@media (max-width:640px){.stamps{bottom:calc(196px + var(--sab));max-width:calc(100vw - 110px);left:8px;transform:none}body[data-tier=phone] .tool-actions .place{display:none}}
body[data-build=on] .toast{bottom:calc(200px + var(--sab))}
@media (max-width:640px){body[data-build=on] .toast{top:calc(150px + var(--sat));bottom:auto}}

/* stamps of your own, Rise and fireworks */
.stamps button.mine{border-color:#9ad0ff;color:#9ad0ff}
.tool-actions .rise{font-weight:600}
.tool-actions #select[aria-pressed=true]{border-color:#9ad0ff;color:#9ad0ff;background:#9ad0ff22}
.buttons #b-rise{min-height:56px;font-weight:600}
@media (max-width:640px){body[data-build=on] .buttons{bottom:calc(72px + var(--sab))}}
.tools button[hidden]{display:none}

/* the parcel line under the HUD */
.hud-parcel{position:absolute;left:12px;top:calc(96px + var(--sat));margin:0;padding:6px 10px;border-radius:999px;background:#0e1420c0;color:#ffd27a;font-size:13px;pointer-events:none}
@media (max-width:640px){.hud-parcel{top:calc(118px + var(--sat));font-size:12px}}

/* the garage in the picker, and the driving HUD */
.garage{margin:10px 0 4px;padding:12px;border:1px solid var(--rule);border-radius:14px;background:rgba(255,255,255,.03)}
.garage-title{margin:0 0 8px;font-weight:600}
.garage-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.garage-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px;border:1px solid var(--rule);border-radius:12px;background:#0e1420;color:var(--ink);text-align:left;font:inherit;cursor:pointer;min-height:44px}
.garage-card[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,201,77,.35)}
.garage-card b{font-size:15px}.garage-card small{color:var(--muted);font-size:12px;line-height:1.35}
.garage-icon{width:100%;height:auto;border-radius:8px;background:#0b1020}
.garage-levels{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.garage-levels button{flex:1 1 auto;min-height:40px;padding:6px 10px;border-radius:999px;border:1px solid var(--rule);background:#0e1420;color:var(--ink);font:inherit;cursor:pointer}
.garage-levels button[aria-pressed=true]{background:var(--accent);color:#1a1408;border-color:transparent;font-weight:700}
.garage-note{margin:8px 0 0;color:var(--muted);font-size:13px}
.drive-panel{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + var(--sab));width:min(680px,calc(100% - 24px));z-index:6;background:rgba(14,20,32,.82);border:1px solid var(--rule);border-radius:14px;padding:8px 12px;backdrop-filter:blur(6px)}
.drive-line{margin:0;font:600 14px ui-monospace,Menlo,monospace;color:var(--ink)}
.drive-track{height:6px;border-radius:3px;background:#1d2740;margin:6px 0;overflow:hidden}.drive-track i{display:block;height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));width:0;transition:width .12s}
.drive-brain{margin:0;font-size:12px;color:var(--muted);line-height:1.35}
.drive-buttons{display:flex;gap:8px;margin-top:6px}.drive-buttons button{min-height:44px;flex:1 1 auto;border-radius:12px;border:1px solid var(--rule);background:#20303a;color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
#fire{background:#7a2e2e}#nitro{background:#2e5a7a}#use{background:#5a2e7a}#lob{background:#2e6a4a}#rematch{background:var(--accent);color:#1a1408;border-color:transparent}
body[data-drive] #fly,body[data-drive] #float,body[data-drive] #build,body[data-drive] #boat,body[data-drive] #race,body[data-drive] #tour{display:none}
@media (pointer:fine){#fire,#nitro,#use{display:none}}

.workshop{margin-top:10px;padding:10px;border:1px dashed var(--rule);border-radius:12px}
.workshop-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin:4px 0;font-size:13px}
.workshop-row .pips{font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;color:var(--accent)}
.workshop-row button{min-width:40px;min-height:36px;border-radius:10px;border:1px solid var(--rule);background:#0e1420;color:var(--ink);font:inherit;cursor:pointer}
.workshop-row button:disabled{opacity:.45;cursor:default}

/* the cockpit: the drive panel becomes a dashboard with a dial */
.dash{display:none;width:120px;height:82px;flex:0 0 auto}
body[data-view="cockpit"] .drive-panel{display:grid;grid-template-columns:120px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:4px;align-items:center;background:linear-gradient(180deg,rgba(22,28,44,.94),rgba(8,12,22,.97));border-color:#4a5a80;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.5)}
body[data-view="cockpit"] .dash{display:block;grid-row:1/4;grid-column:1}
body[data-view="cockpit"] .drive-line,body[data-view="cockpit"] .drive-track,body[data-view="cockpit"] .drive-brain,body[data-view="cockpit"] .drive-buttons{grid-column:2}
body[data-view="cockpit"] .drive-line{font-size:15px;letter-spacing:.02em}
#drive-view{background:#3a3f46}
.workshop-items{grid-template-columns:1fr auto}
.workshop-items .items{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.workshop-items .items button{min-height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--rule);background:#0e1420;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.workshop-items .items button:disabled{opacity:.45;cursor:default}

.radar{position:absolute;right:calc(100% + 10px);bottom:0;width:112px;height:112px;pointer-events:none}
@media (max-width:980px){.radar{right:auto;left:0;bottom:calc(100% + 8px);width:88px;height:88px}}
.gp-start{margin-top:10px;width:100%;min-height:44px;border-radius:12px;border:1px solid var(--rule);background:linear-gradient(100deg,#3a2f12,#5a4a18);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}

.garage-weather{margin-top:8px;flex-wrap:wrap}.garage-weather button{font-size:13px}

/* ease of use: kinds of world, travel choice, the vehicles menu */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.cats button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.05);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.cats button[aria-pressed="true"]{background:var(--accent);color:#1a1408;border-color:transparent;font-weight:600}
.card[hidden]{display:none}
.card .ctag{align-self:flex-start;font-size:11.5px;letter-spacing:.02em;padding:3px 9px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.05);color:var(--muted)}
.card .ctag-wander{border-color:#3d7a6a;color:#9fe3cf}.card .ctag-race{border-color:#7a6a3d;color:#f0d890}.card .ctag-games{border-color:#6a4f7a;color:#d9b8f0}.card .ctag-tanks{border-color:#7a3d3d;color:#f0a8a0}.card .ctag-air{border-color:#3d5f7a;color:#a8d4f0}
.garage-row.travel-row{grid-template-columns:repeat(4,1fr)}
@media (max-width:640px){.garage-row.travel-row{grid-template-columns:repeat(2,1fr)}}
.travel-row .travel-foot{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:15/8;font-size:clamp(30px,5vw,54px);background:#0b1020;border-radius:8px}
.card .ctag{white-space:nowrap}
.roam-menu{position:fixed;z-index:30;width:min(300px,calc(100vw - 16px));padding:8px;border-radius:14px;border:1px solid var(--rule);background:rgba(14,20,32,.96);backdrop-filter:blur(8px);box-shadow:0 14px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.roam-menu button{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 12px;min-height:48px;border-radius:10px;border:1px solid transparent;background:rgba(255,255,255,.04);color:var(--ink);font:inherit;cursor:pointer}
.roam-menu button small{color:var(--muted);font-size:12px}.roam-menu button[aria-checked="true"]{border-color:var(--accent);background:rgba(255,178,107,.14)}
.roam-menu p{margin:2px 4px 0;font-size:12px;color:var(--muted)}.roam-menu>*{flex:0 0 auto}
.roam-menu .explorer-toggle{margin-top:4px;border-color:rgba(92,224,255,.35)}.roam-menu .explorer-toggle[aria-pressed=true]{border-color:#5ce0ff;background:rgba(92,224,255,.16);box-shadow:inset 0 0 0 1px rgba(92,224,255,.35)}
.drive-buttons .speed-mul{flex:0 0 auto;font-variant-numeric:tabular-nums}.drive-buttons .speed-mul[aria-pressed=true]{border-color:#5ce0ff;color:#bff0ff;background:#1f3a48}

/* the hidden square of a lantern hunt */
.sqhunt{pointer-events:auto;margin:6px 0 2px;padding:8px 10px;max-width:340px;border-radius:12px;border:1px solid var(--rule);background:rgba(10,14,22,.72);backdrop-filter:blur(6px);text-shadow:none}
.sqhunt[hidden]{display:none}
.sq-head{margin:0 0 6px;font-size:12px;color:var(--accent)}
.sq-flames{display:flex;gap:5px;margin-bottom:6px}
.sq-flame{min-width:30px;padding:2px 0;text-align:center;border-radius:8px;border:1px solid var(--rule);font:600 12px ui-monospace,Menlo,monospace;color:var(--muted)}
.sq-flame.lit{border-color:var(--c);color:#fff;box-shadow:0 0 10px var(--c);background:color-mix(in srgb,var(--c) 28%,transparent)}
.sq-row{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.sq-chip{min-height:44px;padding:4px 2px;border-radius:10px;border:1px solid var(--rule);background:rgba(255,255,255,.05);color:var(--ink);font:600 13px system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer}
.sq-chip:disabled{opacity:.45;cursor:default}
.sq-chip[aria-pressed=true]{border-color:#ffc94d;background:rgba(255,201,77,.22);box-shadow:0 0 12px rgba(255,201,77,.35)}
.sq-chip i{display:flex;gap:2px}.sq-chip u{width:6px;height:6px;border-radius:50%;background:var(--c)}
.sq-out{margin:6px 0 0;font:12px ui-monospace,Menlo,monospace;color:var(--muted);overflow-wrap:anywhere}.sq-out.win{color:#7ee787}
body[data-drive]:not([data-drive=roam]) .sqhunt{display:none}
.sq-chip small{font-size:9.5px;font-weight:500;color:var(--muted);line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the city guide, missions and the laser */
.cities .city-list{display:flex;flex-direction:column;gap:4px;max-height:34vh;overflow:auto}
.city-row{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:36px;padding:4px 8px;border-radius:9px;border:1px solid var(--rule);background:rgba(255,255,255,.05);color:var(--ink);font:13px system-ui,sans-serif;cursor:pointer;text-align:left}
.city-row span{color:var(--muted);font-size:12px;white-space:nowrap}
.city-row[aria-pressed=true]{border-color:#8fd3ff;background:rgba(143,211,255,.18)}
.row-mini{display:flex;gap:6px;margin-top:6px}.row-mini button{min-height:34px;padding:4px 12px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
#laser[aria-pressed=true]{background:#5cf0a0;color:#062012;border-color:transparent;box-shadow:0 0 14px rgba(92,240,160,.6)}
body[data-laser=on] #view-canvas,body[data-laser=on] canvas.view{cursor:crosshair}
body[data-drive]:not([data-drive=roam]) #laser,body[data-drive]:not([data-drive=roam]) #beam,body[data-drive]:not([data-drive=roam]) #weapon{display:none}
.sq-fold{display:block;width:100%;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px;color:var(--accent)}
.sqhunt:has(.sq-fold:only-child){padding:6px 10px}
.foot-fire{display:none;position:absolute;right:calc(14px + var(--sar,0px));bottom:calc(160px + var(--sab,0px));min-width:96px;min-height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:rgba(92,240,160,.28);color:#fff;font:600 16px system-ui,sans-serif;pointer-events:auto;backdrop-filter:blur(4px)}
@media (pointer:coarse){body:not([data-drive]) .foot-fire{display:block}}
body[data-hud=off] .foot-fire{display:none}
.hud-havoc{color:#ffb070;font-size:12.5px;margin:2px 0 0}
.city-wrap{display:flex;gap:4px}.city-wrap .city-row{flex:1 1 auto}.city-go{min-width:44px;border-radius:9px;border:1px solid var(--rule);background:rgba(143,211,255,.12);color:#cfe9ff;font:600 12px system-ui,sans-serif;cursor:pointer}
.paint-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.paint-row button{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}.paint-row button[aria-pressed=true]{border-color:#ffc94d;box-shadow:0 0 0 2px rgba(255,201,77,.5)}.paint-row .paint-own{width:auto;padding:0 10px;border-radius:999px;font:600 12px system-ui,sans-serif;color:var(--ink);background:rgba(255,255,255,.08)}
.danger-row button{font-size:13px}
body[data-panels=off] .sqhunt,body[data-panels=off] .hud-havoc{display:none}
#panels[aria-pressed=true]{background:rgba(255,255,255,.18)}
.sq-head.sq-fold{margin-bottom:6px}
.warp-form{display:flex;gap:4px;margin-top:6px}.warp-form input{flex:1 1 auto;min-width:0;min-height:34px;border-radius:9px;border:1px solid var(--rule);background:rgba(0,0,0,.35);color:var(--ink);padding:4px 8px;font:12px ui-monospace,Menlo,monospace}.warp .warp-list{margin-top:6px}.warp .warp-list .sq-out{margin:4px 0 2px}.warp .warp-name{color:var(--ink);font-size:13px;white-space:normal}
#warp-btn[aria-pressed=true]{background:rgba(255,255,255,.18)}
.seed-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}.seed-row input{flex:1 1 180px;min-height:42px;border-radius:10px;border:1px solid var(--rule);background:#0d1115;color:var(--ink);padding:8px 10px;font:inherit}.seed-row button{min-height:42px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;cursor:pointer}
.city-row{flex-wrap:wrap}.city-row .city-kind{flex:1 1 100%;order:3;color:var(--muted);font-size:11px;line-height:1.2}.city-flight{color:#8fd3ff}
.city-biggest{display:block;width:100%;margin:4px 0 8px;padding:6px 10px;text-align:left;font-size:12.5px}
.forge-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:6px 0 10px}.forge-row label{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted)}.forge-row input,.forge-row select{min-height:38px;border-radius:9px;border:1px solid var(--rule);background:#0d1115;color:var(--ink);padding:4px 8px;font:inherit;width:auto}.forge-row input[type=number]{width:74px}.forge-row button{min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,255,255,.06);color:var(--ink);font:inherit;cursor:pointer}
.menu-link{margin:0 0 6px}.menu-link a{color:var(--accent);text-decoration:none;font-size:14px}.menu-link a:hover{text-decoration:underline}
.forge-preview{margin:10px 0 4px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}.forge-preview canvas{width:200px;height:200px;border-radius:12px;border:1px solid var(--rule);background:#3a5a3a;image-rendering:pixelated}.forge-preview p{flex:1 1 200px;margin:0}

/* the aim overlay (drive.js makes it): a reticle that turns gold on a lock and names the range, a bracket round the raider under the
   nose, a hit marker that flares and fades, an armour bar; a red vignette in the moment of grace after a hit */
#aim-hud{position:fixed;inset:0;pointer-events:none;z-index:5;font:600 13px ui-monospace,Menlo,monospace;color:#f3ecdf}
#aim-hud[hidden],#aim-hud [hidden]{display:none}
.aim-ret{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border:2px solid rgba(243,236,223,.55);border-radius:50%;color:rgba(243,236,223,.7);transition:border-color .15s,transform .15s,box-shadow .15s}
.aim-ret::before,.aim-ret::after{content:"";position:absolute;background:currentColor}
.aim-ret::before{left:50%;top:-9px;width:2px;height:7px;margin-left:-1px;box-shadow:0 30px 0 currentColor}
.aim-ret::after{top:50%;left:-9px;height:2px;width:7px;margin-top:-1px;box-shadow:30px 0 0 currentColor}
.aim-ret[data-lock="1"]{border-color:#ffd25a;color:#ffd25a;transform:scale(1.3);box-shadow:0 0 14px rgba(255,210,90,.55),inset 0 0 6px rgba(255,210,90,.35)}
.aim-range{position:absolute;top:32px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#ffd25a;text-shadow:0 1px 3px #000;font-size:12px}
.aim-bracket{position:absolute;left:50%;top:50%;width:150px;height:90px;margin:-45px 0 0 -75px;border:2px solid #ffd25a;border-radius:6px;box-shadow:0 0 12px rgba(255,210,90,.4);clip-path:polygon(0 0,22% 0,22% 3px,3px 3px,3px 30%,0 30%,0 70%,3px 70%,3px calc(100% - 3px),22% calc(100% - 3px),22% 100%,0 100%,0 0,100% 0,100% 30%,calc(100% - 3px) 30%,calc(100% - 3px) 3px,78% 3px,78% 0,100% 0,100% 100%,78% 100%,78% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 70%,100% 70%,100% 100%)}
.aim-bracket span{position:absolute;left:50%;top:100%;margin-top:6px;transform:translateX(-50%);white-space:nowrap;color:#ffd25a;text-shadow:0 1px 3px #000;font-size:12px}
.aim-hit{position:absolute;left:50%;top:calc(50% - 64px);transform:translateX(-50%);font-size:22px;color:#fff;text-shadow:0 0 10px #ff8a2a,0 1px 2px #000;white-space:nowrap;animation:aim-pop .18s ease-out}
.aim-hit[data-kill="1"]{font-size:30px;color:#ffd25a;text-shadow:0 0 16px #ff5a2a,0 1px 2px #000}
@keyframes aim-pop{from{transform:translateX(-50%) scale(1.6)}to{transform:translateX(-50%) scale(1)}}
.aim-hp{position:absolute;left:50%;top:calc(50% + 50px);width:130px;height:7px;margin-left:-65px;background:rgba(10,16,28,.75);border:1px solid rgba(243,236,223,.4);border-radius:4px;overflow:hidden}
.aim-hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4fc36b,#7ee787);transition:width .15s}
#aim-hud[data-low="1"] .aim-hp i{background:linear-gradient(90deg,#c0392b,#ff5a4a)}
#aim-hud[data-hurt="1"]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px rgba(255,70,50,.5)}
#aim-hud[data-hurt="1"] .aim-ret{border-color:#fff;color:#fff}
body[data-panels=off] #aim-hud .aim-range,body[data-panels=off] #aim-hud .aim-bracket span{display:none}
@media (max-width:640px){.aim-bracket{width:110px;height:70px;margin:-35px 0 0 -55px}.aim-hp{top:calc(50% + 40px)}}
/* the rail: a cyan reticle when it is the gun in hand, a heat bar under the armour (fills while charging, drains as it cools), a cyan hit marker, the Rail button lit */
.aim-ret[data-rail="1"]{border-color:rgba(143,233,255,.8);color:rgba(143,233,255,.9)}
.aim-ret[data-rail="1"][data-lock="1"]{border-color:#bff4ff;color:#bff4ff;box-shadow:0 0 16px rgba(143,233,255,.6),inset 0 0 6px rgba(143,233,255,.4)}
.aim-rail{position:absolute;left:50%;top:calc(50% + 62px);width:130px;height:5px;margin-left:-65px;background:rgba(10,16,28,.75);border:1px solid rgba(143,233,255,.45);border-radius:3px}
.aim-rail i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3fb6d8,#bff4ff);transition:width .08s linear}
.aim-rail[data-state="charging"] i{background:#e8fbff;box-shadow:0 0 10px #8fe9ff}
.aim-rail[data-state="reload"] i{background:linear-gradient(90deg,#ff7a3a,#ffc94d)}
.aim-rail[data-mode="shell"]{border-color:rgba(243,236,223,.25)}
.aim-rail span{position:absolute;left:0;right:0;top:7px;text-align:center;font-size:11px;color:#8fe9ff;white-space:nowrap;letter-spacing:.02em}
.aim-rail[data-mode="shell"] span{color:rgba(243,236,223,.55)}
.aim-hit[data-rail="1"]{color:#bff4ff;text-shadow:0 0 14px #3fb6d8,0 1px 2px #000}
.aim-hit[data-rail="1"][data-kill="1"]{color:#e8fbff;text-shadow:0 0 18px #8fe9ff,0 1px 2px #000}
#rail[aria-pressed=true]{background:#8fe9ff;color:#062030;border-color:transparent;box-shadow:0 0 12px rgba(143,233,255,.6)}
body[data-panels=off] #aim-hud .aim-rail span{display:none}
@media (max-width:640px){.aim-rail{top:calc(50% + 52px)}}

/* the big pod-race HUD: place, lap, speed and the next gate in numerals sized to the screen, readable at a glance on a tablet or a television */
#pod-hud{position:fixed;inset:0;pointer-events:none;z-index:6;color:#fff;font:800 16px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 14px rgba(0,0,0,.55)}
body:not([data-drive="podrace"]) #pod-hud,body[data-hud=off] #pod-hud,#pod-hud[hidden]{display:none}
#pod-hud b{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
#pod-hud small{font-weight:800;opacity:.85;letter-spacing:.08em}
#pod-hud .ph-top{position:absolute;top:clamp(64px,11vh,120px);left:50%;transform:translateX(-50%);display:flex;gap:clamp(14px,4vw,48px);align-items:flex-end;padding:8px 22px;border-radius:18px;background:rgba(8,10,18,.42);backdrop-filter:blur(3px)}
#pod-hud .ph-place b{font-size:clamp(44px,9vmin,120px);color:#ffd21f}
#pod-hud .ph-place small{font-size:clamp(16px,3vmin,34px);margin-left:.25em}
#pod-hud .ph-lap{display:flex;flex-direction:column;align-items:center}
#pod-hud .ph-lap b{font-size:clamp(34px,6.5vmin,88px)}
#pod-hud .ph-lap small{font-size:clamp(12px,2vmin,22px)}
#pod-hud .ph-count{position:absolute;top:34%;left:0;right:0;text-align:center;font-size:clamp(64px,18vmin,220px);color:#ffd21f;text-shadow:0 0 30px rgba(255,160,0,.7),0 4px 0 rgba(0,0,0,.6)}
#pod-hud[data-phase=over] .ph-count{font-size:clamp(40px,9vmin,110px)}
#pod-hud .ph-gate{position:absolute;top:calc(clamp(64px,11vh,120px) + clamp(70px,13vmin,160px));left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
#pod-hud .ph-arrow{display:block;font-style:normal;font-size:clamp(34px,6vmin,76px);color:#ffd21f;transition:transform .08s linear}
#pod-hud .ph-gate span{font-size:clamp(13px,2.2vmin,26px);opacity:.9}
#pod-hud[data-phase=over] .ph-gate,#pod-hud[data-phase=countdown] .ph-gate{display:none}
#pod-hud .ph-speed{position:absolute;right:clamp(14px,3vw,48px);bottom:clamp(150px,24vh,260px);text-align:right}
#pod-hud .ph-speed b{display:block;font-size:clamp(52px,11vmin,150px)}
#pod-hud .ph-speed small{font-size:clamp(14px,2.4vmin,28px)}
#pod-hud .ph-nitro{margin-top:8px;width:clamp(120px,22vmin,280px);height:clamp(8px,1.4vmin,16px);margin-left:auto;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden}
#pod-hud .ph-nitro i{display:block;height:100%;background:linear-gradient(90deg,#5ce0ff,#b98bff)}
#pod-hud[data-boost="1"] .ph-speed b{color:#bfefff;text-shadow:0 0 22px rgba(92,224,255,.9),0 2px 0 rgba(0,0,0,.55)}
@media (max-width:640px){#pod-hud .ph-top{top:auto;bottom:calc(46vh + 10px);padding:6px 14px}#pod-hud .ph-gate{top:clamp(90px,14vh,130px)}#pod-hud .ph-speed{bottom:calc(46vh + 10px);right:12px}#pod-hud .ph-top{left:12px;transform:none}}
.mesh-menu .mesh-row{display:flex;gap:6px;flex-wrap:wrap}.mesh-menu .mesh-row button{flex:1 1 0;min-height:40px;align-items:center;justify-content:center;text-align:center}

/* lantern puzzles */
.lantern-panel{position:fixed;z-index:31;right:12px;top:50%;transform:translateY(-50%);width:min(360px,calc(100vw - 24px));padding:12px;border-radius:14px;border:1px solid var(--rule);background:rgba(14,20,32,.96);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.lantern-panel p{margin:0 0 6px}.lantern-title{font-weight:700}.lantern-rule,.lantern-info{font-size:13px;color:var(--muted)}
.lantern-grid{display:grid;gap:6px;margin:8px 0}.lantern-grid .lantern{aspect-ratio:1;min-width:0;min-height:0;padding:0;border-radius:50%;border:1px solid rgba(255,210,120,.35);background:radial-gradient(circle at 50% 40%,#2a2f3d,#11141c)}
.lantern-grid .lantern.lit{background:radial-gradient(circle at 50% 40%,#fff2b0,#ffb340 55%,#8a4a10);box-shadow:0 0 12px rgba(255,190,80,.75)}
.lantern-grid .lantern.hint{outline:3px solid #5ce0ff;outline-offset:2px}
.lantern-grid[data-variant="hex"] .lantern.shift{transform:translateX(50%)}
.lantern-row{display:flex;gap:6px;flex-wrap:wrap}.lantern-row button{flex:1 1 auto}
.gfx-menu{max-height:calc(100vh - 120px);overflow-y:auto}

/* electric paints in the paint row: a glow ring in the trim's colour; chrome gets a sheen */
.paint-row button.paint-electric{box-shadow:0 0 0 2px var(--glow),0 0 10px 2px var(--glow)}
.paint-row button.paint-chrome{background-image:linear-gradient(135deg,#F4F7FA 0%,#9AA4AE 45%,#E6EBF0 60%,#7A848F 100%)!important}

/* the loading panel (wander.js loadPanelStep): shown only while a world first fills in, over half a second */
.loadpanel{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:60;min-width:min(340px,86vw);padding:16px 20px;border-radius:14px;background:rgba(14,20,32,.88);color:#f3ecdf;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.45);transition:opacity .35s}
.loadpanel.gone{opacity:0}
.loadpanel .lp-t{margin:0 0 10px;font-weight:700;font-size:1.05rem}
.loadpanel .lp-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.loadpanel .lp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2bd4a7,#ffd21f);transition:width .25s}
.loadpanel .lp-n{margin:8px 0 10px;font-size:.85rem;opacity:.8}
.loadpanel .lp-go{border:1px solid rgba(255,255,255,.35);background:transparent;color:inherit;border-radius:99px;padding:5px 14px;cursor:pointer}
.loadpanel{pointer-events:none}   /* looks and drags pass through the panel to the world; only the button takes a tap */
.loadpanel .lp-go{pointer-events:auto}
/* the pod race for beginners: a place gained flashes, the nitro bar pulses with its hint, the Assist and Step up buttons live in the drive panel */
#pod-hud .ph-flash{position:absolute;top:38%;left:0;right:0;text-align:center;font-size:clamp(40px,11vmin,140px);font-weight:900;color:#7dffb0;text-shadow:0 0 28px rgba(60,255,150,.75),0 4px 0 rgba(0,0,0,.6);opacity:0;transform:scale(.7);transition:opacity .18s ease,transform .18s ease}
#pod-hud .ph-flash[data-on="1"]{opacity:1;transform:scale(1)}
#pod-hud[data-hint=nitro] .ph-nitro{outline:3px solid #ffd21f;outline-offset:3px;animation:ph-pulse .6s ease-in-out infinite alternate}
@keyframes ph-pulse{from{box-shadow:0 0 0 rgba(255,210,31,0)}to{box-shadow:0 0 22px rgba(255,210,31,.9)}}
@media (prefers-reduced-motion:reduce){#pod-hud .ph-flash{transition:none}#pod-hud[data-hint=nitro] .ph-nitro{animation:none}}
body:not([data-drive="podrace"]) #pod-assist,body:not([data-drive="podrace"]) #pod-up,#pod-up[hidden]{display:none}
#pod-up{border-color:#ffd21f;color:#ffd21f}
.seed-next{margin-left:8px;white-space:nowrap;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,201,77,.5);background:transparent;color:#ffc94d;font:inherit;cursor:pointer}
.seed-next:hover{background:rgba(255,201,77,.12)}

/* The tower panel in Silo Line: stand next to a tower and it tells you what it is and offers the three things you can
   do to it. Buttons rather than keys, because a button you walk up to and press is the interaction that survives into
   a headset, where there is no keyboard. Sized and spaced for reading at arm's length. */
.silo-panel { position: absolute; left: 50%; transform: translateX(-50%); bottom: 120px; z-index: 6;
  min-width: 320px; max-width: min(560px, 92vw); padding: 12px 14px 11px; border-radius: 14px;
  background: rgba(12, 16, 26, .92); border: 1px solid #38507a; box-shadow: 0 14px 40px -18px rgba(0,0,0,.9);
  color: #e7ecf5; font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif; pointer-events: auto; }
.silo-panel[hidden] { display: none !important; }
.silo-panel .sp-name { margin: 0 0 3px; font-size: 16.5px; font-weight: 700; color: #ffd9a8; }
.silo-panel .sp-stats { margin: 0 0 9px; color: #9fb0ca; font-size: 13px; font-variant-numeric: tabular-nums; }
.silo-panel .sp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.silo-panel button { flex: 1 1 auto; min-width: 104px; min-height: 42px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid #44618f; background: #1b2740; color: #e7ecf5; font: 600 14px/1.2 inherit; cursor: pointer; }
.silo-panel button:hover:not(:disabled) { background: #26365a; border-color: #6f93cf; }
.silo-panel button:disabled { opacity: .45; cursor: default; }
@media (max-width: 620px) { .silo-panel { bottom: 150px; min-width: 0; width: 94vw; } }

/* The build bar in Silo Line: the four towers and the button that starts the wave. Sits above the tower panel so the
   two never collide, and every target is big enough to hit with a controller rather than a mouse pointer. */
.silo-build { position: absolute; left: 50%; transform: translateX(-50%); bottom: 258px; z-index: 6;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: auto; max-width: min(620px, 94vw); }
.silo-build[hidden] { display: none !important; }
.silo-build .sb-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.silo-build button { min-height: 44px; padding: 10px 14px; border-radius: 11px; border: 1px solid #44618f;
  background: rgba(16, 22, 36, .93); color: #e7ecf5; font: 600 14px/1.2 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
.silo-build button:hover:not(:disabled) { background: #26365a; border-color: #6f93cf; }
.silo-build button:disabled { opacity: .42; cursor: default; }
.silo-build .sb-go { min-width: 260px; border-color: #3f7d55; background: rgba(22, 48, 32, .95); color: #b9f4cd; font-size: 15.5px; }
.silo-build .sb-go:hover:not(:disabled) { background: #1d5c38; border-color: #6ddc9a; }
@media (max-width: 620px) { .silo-build { bottom: 310px; } .silo-build .sb-go { min-width: 0; width: 92vw; } }


/* ---- the seam ranges: violet throughout, so the one line in the menu, the card badge and the travel
   button all read as the same thing without adding another box to a page that has enough of them ---- */
#cats button[data-cat="seams"]{ border-color:#7a5cc4; color:#d9c6ff; background:linear-gradient(140deg,rgba(179,136,255,.16),rgba(179,136,255,.04)); }
#cats button[data-cat="seams"][aria-pressed="true"]{ background:linear-gradient(140deg,#c9a9ff,#9a6cff); color:#190d33; border-color:#b388ff; }
.card[data-cat="seams"]{ border-color:#6c53ad; }
.card[data-cat="seams"] .tag{ color:#d9c6ff; }
button.seam-go{ border-color:#7a5cc4; color:#e4d4ff; background:linear-gradient(140deg,rgba(179,136,255,.20),rgba(179,136,255,.05)); }
button.seam-go:hover{ background:linear-gradient(140deg,#c9a9ff,#9a6cff); color:#190d33; }
/* the one purple line, rather than another box on a page that has enough of them */
.menu-link.seam-link a{ color:#c9a9ff; border-color:#7a5cc4; }
.menu-link.seam-link a:hover{ color:#190d33; background:linear-gradient(140deg,#c9a9ff,#9a6cff); border-color:#b388ff; }


/* ---- the stat line: one colour per kind of number, so it reads at a glance ---- */
.fps .s-dot{color:#5a6178}
.fps .s-fps-good{color:#3ef2a0}            /* comfortable */
.fps .s-fps-mid{color:#ffc94d}             /* working */
.fps .s-fps-low{color:#ff6b5e}             /* not keeping up */
.fps .s-chunk{color:#5ac8fa}
.fps .s-tile{color:#b388ff}
.fps .s-corr{color:#ff9fd6}
.fps .s-tri{color:#ffa94d}
.fps .s-cull{color:#8fa7c4}
.fps .s-hide{color:#6f8aa8}
.fps .s-gpu{color:#2bd4a7}
.fps .s-cpu{color:#c6ff6b}
.fps .s-vao{color:#ffe066}
html[data-contrast=on] .fps{font-size:14px;background:rgba(0,0,0,.82);border-color:rgba(255,255,255,.3)}