/* UX follow-up (DESIGN "UX follow-up (built)"): CONTROLS, accessibility,
   FREE WAY onboarding marker, touch cluster, CONTINUE, RECORDS, PHOTO mode.
   Built from ui.css tokens (--panel, .btn, radii, the type roles). */

:root { --ui-scale: 1; --read: 1; }

/* ================= Settings: longer now, so it scrolls; section heads ================= */
.settings-card { max-height: calc(100dvh - 2 * var(--s4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; width: min(600px, 100%); }
.settings-card .set-row { grid-template-columns: 168px minmax(0, 1fr) 44px; }
.set-h { font: 800 13px/1 var(--sans); letter-spacing: 0.22em; color: var(--accent); margin: var(--s2) 0 calc(-1 * var(--s2)); }
.set-controls { justify-self: start; }
@media (max-width: 600px) { .settings-card .set-row { grid-template-columns: 112px minmax(0, 1fr) 36px; } }

/* ================= CONTROLS ================= */
#controls { display: grid; place-items: center; padding: var(--s4); background: rgba(7, 6, 11, 0.86); z-index: 22; }
.controls-card { background: var(--panel-solid); border-radius: var(--r3); box-shadow: var(--edge), var(--lift); width: min(760px, 100%); max-height: calc(100dvh - 2 * var(--s4)); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: var(--s3); padding: var(--s5); animation: rise-in 0.2s var(--ease); }
.ct-dev { height: 44px; }
.ct-note { font: 700 13px/1.3 var(--mono); color: var(--ink-2); min-height: 17px; }
.ct-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: grid; gap: var(--s4); padding-right: var(--s1); }
.ct-sec h3 { font: 800 13px/1 var(--sans); letter-spacing: 0.22em; color: var(--accent); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.ct-list { list-style: none; margin: 0; padding: 0; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, auto) 92px 28px; align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.ct-name b { display: block; font: 800 15px/1.1 var(--sans); letter-spacing: 0.1em; }
.ct-name small { display: block; margin-top: 3px; font: 600 12px/1.2 var(--sans); color: var(--dim); letter-spacing: 0.02em; }
.ct-caps { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; font-size: 18px; }
.ct-caps em { font: 800 12px/1.2 var(--mono); font-style: normal; color: var(--gold); letter-spacing: 0.08em; animation: ct-blink 0.9s steps(2) infinite; }
@keyframes ct-blink { 50% { opacity: 0.35; } }
.ct-none, .ct-fixed { font: 700 12px/1 var(--mono); color: var(--dim); display: inline-flex; gap: 4px; align-items: center; }
.ct-lock { font: 800 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--dim); text-align: center; grid-column: 3 / 5; }
.ct-bind { width: 92px; }
.ct-undo { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--ink-2); font: 800 14px/1 var(--sans); }
.ct-undo:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ct-row.changed .ct-name b::after { content: ' ●'; color: var(--accent); font-size: 10px; vertical-align: 2px; }
.ct-row.waiting { background: linear-gradient(90deg, transparent, rgba(255, 210, 63, 0.08), transparent); }
.ct-pair { display: inline-flex; align-items: center; gap: 3px; margin-left: var(--s2); }
.ct-pair small { font: 800 9px/1 var(--sans); letter-spacing: 0.14em; color: var(--dim); margin-right: 2px; }
.ct-empty { font: 600 14px/1.3 var(--sans); color: var(--dim); padding: var(--s2) 0; }
.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); font: 800 12px/1 var(--mono); color: var(--dim); letter-spacing: 0.06em; }
.ct-foot .btn:disabled { opacity: 0.4; }
@media (max-width: 600px) {
  .controls-card { padding: var(--s4); }
  .ct-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ct-caps { justify-content: flex-start; grid-column: 1; }
  .ct-bind, .ct-lock { grid-column: 2; grid-row: 1 / span 2; }
  .ct-undo { grid-column: 2; }
  .ct-name small { display: none; }
}

/* ================= Accessibility ================= */
/* TEXT SIZE: the text-bearing panels scale (never the world-anchored markers, which JS places in screen px). */
:where(.hud-tl, .hud-tr, .hud-bottom, .toasts, .zone-strip, .next-exit, .fork-sign, .coach, .pause-card, .settings-card, .controls-card, .howto-board, .title-menu, .title-foot, .title-slips, .menu-right, .menu-left, .store, #dead, #result, #reward, .plate-row,
  .fw-card, .fw-lower, .fw-sign, .fw-tape, .fwe-live, .fwe-near, .gh-prompt, .gh-card, .gh-spot, .spx-card, .spx-heat, .spx-offer, .spx-osd, .spx-ctl, .spx-skip, #radio, #pager, .records-card, .photo-ui, .fwt) { zoom: var(--ui-scale); }
/* COLOURS: colour-safe signals (Okabe–Ito). Canvases use ui/a11y.js sig(). */
body[data-palette='safe'] { --cash: #56b4e9; --red: #d55e00; --pink: #cc79a7; --gold: #f0e442; }
body[data-palette='safe'] #spx { --spx-red: #e69f00; --spx-blue: #56b4e9; }
/* Medals carry a letter as well as a colour. */
body[data-palette='safe'] :is(u.m-gold, u.m-silver, u.m-bronze) { position: relative; display: inline-block; min-width: 12px; min-height: 12px; border-radius: 50%; text-decoration: none; }
body[data-palette='safe'] u.m-gold { background: #f0e442 !important; } body[data-palette='safe'] u.m-silver { background: #f4f4f4 !important; } body[data-palette='safe'] u.m-bronze { background: #8a4b1c !important; }
body[data-palette='safe'] :is(u.m-gold, u.m-silver, u.m-bronze)::after { position: absolute; inset: 0; display: grid; place-items: center; font: 900 9px/1 var(--mono); color: #0b0a10; }
body[data-palette='safe'] u.m-gold::after { content: 'G'; } body[data-palette='safe'] u.m-silver::after { content: 'S'; } body[data-palette='safe'] u.m-bronze::after { content: 'B'; color: #fff; }
/* CARD TIME: CSS-timed chips and cards stay up longer (JS-timed ones use ui/a11y.js readMs). */
.toast { animation-duration: calc(1.3s * var(--read)) !important; }

/* ================= FREE WAY coach: world marker ================= */
.fwc-marker { position: fixed; left: 0; top: 0; z-index: 6; display: none; pointer-events: none; translate: -50% -100%; padding: 6px 10px 5px; border-radius: 6px; background: var(--gold); color: #141414; box-shadow: 0 0 0 2px #141414, 0 6px 18px rgba(0, 0, 0, 0.5); text-align: center; white-space: nowrap; }
.fwc-marker.on { display: block; }
.fwc-marker b { display: block; font: 400 15px/1 var(--display); letter-spacing: 0.04em; }
.fwc-marker em { display: block; margin-top: 2px; font: 800 11px/1 var(--mono); font-style: normal; }
.fwc-marker:not(.edge)::after { content: ''; position: absolute; left: 50%; bottom: -9px; translate: -50% 0; border: 7px solid transparent; border-top-color: var(--gold); border-bottom: 0; animation: fwc-bob 1s ease-in-out infinite; }
@keyframes fwc-bob { 50% { translate: -50% 4px; } }
.fwc-marker.edge { translate: -50% -100%; padding-left: 30px; } /* docked above the minimap */
.fwc-dir { position: absolute; left: 8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; rotate: var(--dir, 0rad); background: #141414; clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%); }
body[data-state='paused'] .fwc-marker, body.replaying .fwc-marker { display: none !important; }

/* ================= 12 px floor for HUD text (AUDIT-UX #30) ================= */
body #radio :is(.rd-tag, .rd-now, .rd-dj, .rd-keys) { font-size: 12px; }
body #radio .rd-artist { font-size: 12px; }
body #radio .rd-keys { display: flex; align-items: center; gap: 4px; color: rgba(244, 241, 232, 0.6); }
body #radio .rd-keys kbd.cap { font-size: 12px; height: 1.6em; min-width: 1.6em; background: rgba(244, 241, 232, 0.9); }
body #radio .rd-keys .cap.face svg { width: 1em; height: 1em; }
body #pager :is(.pg-top, .pg-keys, .pg-keys kbd, .pg-who) { font-size: 12px; }

/* ================= FREE WAY touch actions (ui/fw-touch.js) ================= */
.fwt { position: fixed; z-index: 8; display: none; flex-direction: column; gap: 8px; right: max(8px, env(safe-area-inset-right, 0px)); top: 30%; pointer-events: auto; }
.fwt.on { display: flex; }
.fwt-btn { width: 54px; height: 54px; border-radius: 14px; border: 0; padding: 0; display: grid; place-items: center; align-content: center; gap: 3px; background: rgba(13, 12, 20, 0.66); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24); color: var(--ink); touch-action: none; }
.fwt-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.fwt-btn span { font: 800 12px/1 var(--sans); letter-spacing: 0.02em; }
.fwt-btn.hit { animation: fwt-hit 0.25s var(--ease); }
@keyframes fwt-hit { 40% { transform: scale(0.88); background: var(--accent); color: #0b0a10; } }
.fwt-retry { display: none !important; }
.fwt-retry.on { display: grid !important; background: var(--gold); color: #141414; box-shadow: 0 0 0 2px #141414 inset; }
.fwt-retry.pulse { animation: fwt-pulse 1s ease-in-out infinite; }
@keyframes fwt-pulse { 50% { box-shadow: 0 0 0 2px #141414 inset, 0 0 18px 4px rgba(255, 210, 63, 0.6); } }
@media (orientation: landscape) and (max-height: 520px) {
  .fwt { flex-direction: row; top: calc(10px + var(--safe-t)); right: calc(50% + 34px); }
  .fwt-btn { width: 50px; height: 50px; }
}
body:not(.touch) .fwt { display: none !important; }

/* ================= Colour-safe traffic-light cue ================= */
.light-cue { position: absolute; left: 50%; top: calc(86px + var(--safe-t)); translate: -50% 0; display: none; align-items: center; gap: 8px; padding: 7px 14px 6px 10px; border-radius: 20px; background: rgba(13, 12, 20, 0.85); box-shadow: inset 0 0 0 1px var(--line-2); font: 800 14px/1 var(--sans); letter-spacing: 0.14em; }
.light-cue.on { display: flex; }
.light-cue i { width: 16px; height: 16px; display: block; }
.light-cue.red i { background: #d55e00; } /* a square: stop */
.light-cue.amber i { background: #e69f00; clip-path: polygon(50% 0, 100% 100%, 0 100%); } /* a triangle: changing */
.light-cue.green i { background: #56b4e9; border-radius: 50%; } /* a circle: go */
.light-cue.red b { color: #ffb08a; } .light-cue.green b { color: #a9dcf7; } .light-cue.amber b { color: #ffd88a; }
body[data-state='paused'] .light-cue { display: none; }

/* ================= How To Play: FREE WAY and 3'S A CROWD ================= */
.ht-fw-art { display: grid; place-items: center; }
.ht-fw-art .ob-icon { font-size: 56px; color: var(--accent); }
.party-modes .card h3 { margin-top: var(--s3); }
.party-modes .card .eg { color: var(--gold); font-weight: 800; letter-spacing: 0.06em; }

/* ================= Replay: last 10 s, export ================= */
.spx-now { margin-left: auto; float: right; border: 0; border-radius: 5px; padding: 5px 9px 4px; background: var(--accent); color: #0b0a10; font: 800 11px/1 var(--sans); letter-spacing: 0.12em; pointer-events: auto; }
.spx-clips h4 { display: flex; align-items: center; gap: 6px; }
.spx.exporting .spx-ctl :is(button:not(.spx-export), input) { opacity: 0.35; pointer-events: none; }
.spx.exporting .spx-export { background: var(--red); color: #fff; animation: ct-blink 0.9s steps(2) infinite; }

/* ================= Title: CONTINUE, RECORDS ================= */
.t-continue { display: grid !important; justify-items: start; align-content: center; gap: 4px; text-align: left; }
.t-continue > span { display: flex; align-items: center; gap: var(--s2); }
.t-continue small { font: 700 11px/1 var(--mono); letter-spacing: 0.04em; color: rgba(11, 10, 16, 0.72); text-transform: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-menu .t-continue.btn-primary { font-size: 24px; }
.t-records { position: fixed !important; top: calc(7vh + var(--s4) + var(--safe-t) + 46px); right: var(--s5); display: flex; gap: var(--s2); align-items: center; background: rgba(13, 12, 20, 0.8); animation: rise-in 0.4s 0.7s var(--ease) both; }
.t-records svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
@media (max-width: 760px) { .t-records { height: 36px; } }
body.touch .t-records kbd, body[data-pad] .t-records kbd { display: none; }

/* ================= RECORDS ================= */
#records { display: grid; place-items: center; padding: var(--s4); background: rgba(7, 6, 11, 0.86); z-index: 22; }
.records-card { background: var(--panel-solid); border-radius: var(--r3); box-shadow: var(--edge), var(--lift); width: min(960px, 100%); max-height: calc(100dvh - 2 * var(--s4)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s4); padding: var(--s5); animation: rise-in 0.2s var(--ease); }
.rc-body { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: grid; gap: var(--s5); padding-right: var(--s1); }
.rc-sec h3 { font: 800 13px/1 var(--sans); letter-spacing: 0.22em; color: var(--accent); padding-bottom: var(--s2); border-bottom: 1px solid var(--line); margin-bottom: var(--s3); }
.rc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s2); margin: 0; }
.rc-tile { padding: var(--s3); border-radius: var(--r2); background: var(--panel-up); box-shadow: var(--edge); min-height: 82px; }
.rc-tile dt { font: 800 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--dim); }
.rc-tile dd { margin: 8px 0 0; font: 800 26px/1 var(--mono); color: var(--ink); }
.rc-tile dd small { font: 700 12px/1.2 var(--sans); color: var(--ink-2); margin-left: 4px; letter-spacing: 0.04em; }
.rc-tile dd > small:last-child:not(:first-child) { display: block; margin: 6px 0 0; }
.rc-medals { display: inline-flex; align-items: center; gap: 4px; font-size: 22px; }
.rc-medals u { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-left: 4px; text-decoration: none; position: relative; }
.rc-medals .m-gold { background: #ffd23f; } .rc-medals .m-silver { background: #d6dbe6; } .rc-medals .m-bronze { background: #d98a4e; }
.rc-none { font: 600 15px/1.3 var(--sans); color: var(--dim); grid-column: 1 / -1; }
.rc-share h3 { justify-self: stretch; }
.rc-share { display: grid; gap: var(--s3); justify-items: start; }
.rc-canvas { width: min(600px, 100%); height: auto; border-radius: var(--r2); box-shadow: var(--edge), 0 10px 30px rgba(0, 0, 0, 0.5); }
.rc-note { font: 600 13px/1.3 var(--sans); color: var(--dim); }
@media (max-width: 600px) { .records-card { padding: var(--s4); } .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-tile dd { font-size: 21px; } }

/* ================= PHOTO MODE (ui/photo.js) ================= */
body.photo :is(#hud, #pause, #fw, #fwe, #gh, #spx, #radio, #pager, #touch, .fwt, #onboard, .fwc-marker, #minimap, .light-cue, #wheel) { display: none !important; }
.photo-fx { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: none; }
body.photo .photo-fx { display: block; }
.photo-fx .pf-grain { position: absolute; inset: 0; opacity: 0; mix-blend-mode: overlay; background-size: 192px 192px; }
.photo-fx.grain .pf-grain { opacity: 0.16; }
.photo-fx .pf-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.25s var(--ease); }
.photo-fx .pf-bar.t { top: 0; } .photo-fx .pf-bar.b { bottom: 0; }
.photo-fx.bars .pf-bar { height: max(0px, calc((100vh - 100vw / 2.39) / 2)); }
.photo-fx.snap::after { content: ''; position: absolute; inset: 0; background: #fff; animation: pf-snap 0.45s ease-out forwards; }
@keyframes pf-snap { from { opacity: 0.85; } to { opacity: 0; } }
.photo-ui { position: fixed; left: 50%; bottom: calc(var(--s4) + var(--safe-b)); translate: -50% 0; z-index: 10; display: none; gap: var(--s2); padding: var(--s3) var(--s4); width: min(980px, calc(100vw - 2 * var(--s4))); background: rgba(11, 10, 17, 0.88); border-radius: var(--r3); box-shadow: var(--edge), var(--lift); }
body.photo .photo-ui { display: grid; }
.photo-ui.min > :not(.pu-acts) { display: none; }
.photo-ui.min .pu-help { display: none; }
.pu-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pu-title { font: 400 22px/1 var(--display); letter-spacing: 0.04em; margin-right: var(--s2); color: var(--gold); }
.pu-chip { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.07); color: var(--ink-2); font: 800 12px/1 var(--sans); letter-spacing: 0.12em; }
.pu-chip.on { background: var(--accent); color: #0b0a10; }
.pu-chip.tog { margin-left: 4px; }
.pu-chip.tog.on { background: var(--gold); }
.pu-sliders { gap: var(--s4); }
.pu-sl { display: flex; align-items: center; gap: var(--s2); flex: 1 1 200px; font: 800 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--dim); }
.pu-sl input { flex: 1; accent-color: var(--accent); }
.pu-acts { justify-content: flex-end; }
.pu-help { flex: 1 1 100%; font: 700 12px/1.3 var(--mono); color: var(--dim); }
.pu-note { font: 700 12px/1.3 var(--mono); color: var(--gold); }
@media (max-width: 700px) { .pu-help { display: none; } .photo-ui { padding: var(--s2) var(--s3); } }

/* ================= FREE WAY: WHAT NEXT (ui/fw-next.js) ================= */
.fwn { display: grid; gap: var(--s2); text-align: left; }
/* On the pause card it's the short version: the % and the next gold (GPS); the full panel is the map view's (M). */
.fwn-card :is(.fwn-parts, .fwn-row:not(.fwn-ev)) { display: none; }
.fwn-card { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s3); }
.fwn-card .fwn-h { grid-column: 1 / -1; }
.fwn-card .fwn-pct { padding-bottom: 6px; }
.fwn-card { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.fwn-h { font: 800 12px/1 var(--sans); letter-spacing: 0.22em; color: var(--accent); margin: 0; }
.fwn-pct { position: relative; display: flex; align-items: baseline; gap: var(--s2); padding-bottom: 8px; }
.fwn-pct b { font: 800 26px/1 var(--mono); color: var(--ink); }
.fwn-pct span { font: 800 11px/1 var(--sans); letter-spacing: 0.16em; color: var(--dim); }
.fwn-pct i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255, 255, 255, 0.1) var(--p)); }
.fwn-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.fwn-parts li { display: grid; gap: 3px; }
.fwn-parts b { font: 800 15px/1 var(--mono); }
.fwn-parts b small { font-size: 11px; color: var(--dim); }
.fwn-parts span { font: 800 9.5px/1.1 var(--sans); letter-spacing: 0.08em; color: var(--dim); }
.fwn-rows { display: grid; gap: 4px; }
.fwn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: var(--panel-up); box-shadow: inset 3px 0 0 var(--k, var(--line-2)); color: var(--ink); font: inherit; }
.fwn-row em { grid-column: 1; font: 800 10px/1.1 var(--sans); font-style: normal; letter-spacing: 0.14em; color: var(--dim); }
.fwn-row b { grid-column: 1; font: 800 13px/1.2 var(--sans); letter-spacing: 0.04em; }
.fwn-row span { grid-column: 1; font: 700 11px/1.2 var(--mono); color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.fwn-row kbd { grid-column: 2; grid-row: 1 / span 3; }
.fwn-row u { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
button.fwn-row { cursor: pointer; pointer-events: auto; }
button.fwn-row:hover, button.fwn-row:focus-visible { background: rgba(255, 255, 255, 0.1); }
.fwn-legend.night { box-shadow: inset 3px 0 0 #b45cff; }
.fwn-float { display: none; position: fixed; left: var(--s4); top: calc(118px + var(--safe-t)); max-height: calc(100dvh - 118px - 300px); overflow-y: auto; width: 280px; padding: var(--s3); background: rgba(11, 10, 17, 0.9); border-radius: var(--r2); box-shadow: var(--edge), var(--lift); z-index: 3; pointer-events: auto; }
body.city #pause.map-view .fwn-float { display: grid; }
@media (max-width: 700px) { body.city #pause.map-view .fwn-float { display: none; } .fwn-parts span { font-size: 9px; } }

/* The FREE WAY pause card never runs off a laptop screen: it scrolls inside. */
body.city #pause .pause-card { max-height: calc(100dvh - 2 * var(--s4)); overflow-y: auto; scrollbar-width: thin; }
.pi-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pi-keys .pk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pi-keys kbd.cap { font-size: 14px; }

/* The speedo and minimap sit out the arrival and stunt letterbox (AUDIT-UX #23). */
body:has(#fw .fw-bars.on) :is(#gauge, #minimap) { opacity: 0; transition: opacity 0.3s; }
/* The title has to fit a laptop: its menu grows less than the HUD does. */
:is(.title-menu, .title-foot, .title-slips) { zoom: min(var(--ui-scale), 1.08); }

/* Phones: the starter-pick art stays inside its cell (AUDIT-UX #19). */
@media (max-width: 600px) {
  body .offers.starter .st-art { overflow: hidden; display: grid; place-items: center; border-radius: var(--r2); }
  body .offers.starter .st-art :is(.art-stage-wrap, .art-stage) { position: relative; inset: auto; width: 100%; height: 100%; margin: 0; display: grid; place-items: center; transform: none; }
  body .offers.starter .st-art svg.ob-icon { width: 34px !important; height: 34px !important; position: static; margin: 0; }
  body .offers.starter .st-art .art-pips { display: none; }
  body .offers.starter .st-art :is(.art-stage-wrap, .art-rider) { aspect-ratio: auto; width: 100% !important; max-width: none !important; height: 100% !important; }
  body .offers.starter .st-art :is(img, svg:not(.ob-icon)) { width: auto !important; height: 100% !important; max-width: 100%; position: static; transform: none; }
}
/* FREE WAY pause: the buttons come before the details, so RESUME is never below the fold. */
body.city #pause .pause-word { order: -2; }
body.city #pause .pause-menu { order: -1; }

/* START: MAP (main.js mapStart; DESIGN "Seamless like drune.io"): the city
   pause card's nav switches modes from the map. Same skewed tiles as the
   title list, in a row. While the city loads, no title tiles flash up. */
body.city #pause .pause-nav { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
body.city #pause .pause-nav .btn { flex: 1 1 auto; transform: skewX(-6deg); }
body.city #pause .pause-nav .btn > * { transform: skewX(6deg); }
body.city #pause .pause-nav .pn-primary { background: var(--amber, #ffb547); color: #14120e; border-color: transparent; }
body.map-boot #title { visibility: hidden; }
/* At home on the map, the nav is the whole card: a slim column on the left
   so the city map behind it is the menu. "WHERE TO?" and the DRIVE tile. */
body.map-home #pause .pause-menu,
body.map-home #pause .pi-stats,
body.map-home #pause .pi-foot,
body.map-home #pause #pause-info > :not(.pause-nav) { display: none !important; }
body.map-home #pause .pause-card { max-width: 340px; background: rgba(10, 11, 16, 0.72); }
body.map-home #pause .pause-word { font-size: 44px; }
body.map-home #pause .pause-nav { flex-direction: column; margin: 0; }
body.map-home #pause .pause-nav .btn { justify-content: flex-start; min-height: 56px; }
body.city:not(.map-home) #pause .pause-nav::before { content: 'SWITCH MODE'; flex-basis: 100%; font: 600 11px/1 var(--sans); letter-spacing: 0.14em; color: var(--dim, #8d8f99); }