@charset "UTF-8";
/* Garden State Gridlock by NJTracker. The look is NJTracker's: navy with glows and a dot grid, Fredoka,
   amber VT323 "LED" numbers, cream on ink, 3px ink outlines and chunky sticker shadows that press down.
   Fonts are bundled locally (fonts/, SIL OFL). */
@font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/Fredoka-latin.woff2) format('woff2')}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/VT323-latin.woff2) format('woff2')}

:root{
  color-scheme:dark;
  --ink:#0b1020;--navy:#0e1730;--panel:#152040;--panel-hi:#1b2850;--line:#2a3658;
  --cream:#fdf6e3;--paper:#fff8e7;--muted:#b7c2de;--dim:#8b95b3;--soft:#c9d4f0;
  --led:#ffb627;--green:#3ddc84;--red:#ff4d5e;--cyan:#4fd8ff;--orange:#ff6b3d;--yellow:#ffd23f;
  --lcd:#06080d;--flap:#171b24;--key:#0a1122;
  --sheet:#3d4b76;--sheet-2:#33406a;--sheet-line:#5f6f9f;--sheet-key:#46558a;--sheet-well:#2e3a5e;
  --car-target:#ff5a4e;--shadow:0 5px 0 var(--ink);
  --font:'Fredoka',ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
  --led-font:'VT323',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--cream);-webkit-tap-highlight-color:transparent;
  background-color:var(--navy);
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px);background-size:22px 22px;
}
/* The site's two glows, pinned to the screen so a long page doesn't stretch them. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 15% -10%,#2a3f7a 0,transparent 45%),radial-gradient(circle at 110% 110%,#3a1f5c 0,transparent 40%)}
button,a,select,input,label,summary{touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;margin:0}
button:disabled{cursor:default}
a{color:var(--led);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.muted{font-size:15px;line-height:1.5;color:var(--muted)}
.fine-print{font-size:13px;line-height:1.45;color:var(--dim);margin-top:12px}

/* ---------- page and header ---------- */
.shell{max-width:1200px;margin:0 auto;
  padding:0 max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.topbar{display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 0 16px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;margin-right:auto;color:var(--cream);text-decoration:none;border-radius:14px}
.logo{flex:none;width:48px;height:48px;border-radius:14px;background:var(--orange);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);
  display:grid;place-items:center;transform:rotate(-6deg);animation:wiggle 4s ease-in-out infinite}
@keyframes wiggle{0%,90%,100%{transform:rotate(-6deg)}94%{transform:rotate(6deg)}97%{transform:rotate(-10deg)}}
.brand-text{min-width:0;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:6px}
.brand-name{font-size:23px;font-weight:700;line-height:1.1;white-space:nowrap}
.by{font-size:15px;font-weight:500;color:var(--yellow);white-space:nowrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:0 12px;border:3px solid var(--ink);
  border-radius:14px;background:var(--key);color:var(--soft);font-weight:700;font-size:15px;box-shadow:var(--shadow);white-space:nowrap}
@media (hover:hover){.icon-btn:hover,.menu-btn:hover,.site-tabs a:not(.on):hover{color:var(--cream);background:#131d38}}
.icon-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
/* the board's own header pills (its .viewtabs), so the game reads as one of the site's tabs */
.site-tabs{flex:none;display:flex;gap:8px}
.site-tabs a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:3px solid var(--ink);border-radius:999px;background:var(--key);
  color:var(--soft);font-weight:700;font-size:14px;box-shadow:var(--shadow);text-decoration:none;white-space:nowrap}
.site-tabs a.on{background:var(--cream);color:var(--ink)}
.site-tabs a:active{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
/* ...and on phones, its bottom tab bar (shown in the phone block below) */
.tabbar{display:none}

/* ---------- layout ---------- */
.layout{display:flex;flex-direction:column;gap:22px}
.main-col{min-width:0;scroll-margin-top:10px}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--panel);border:3px solid var(--line);border-radius:20px;padding:18px}

/* the mode switch: the board's Departures / Favorites keys, three across */
.modes{display:flex;gap:8px;margin:0 0 8px}
.mode{flex:1;min-width:0;min-height:48px;display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 8px;border:3px solid var(--ink);border-radius:999px;
  background:var(--key);color:var(--soft);font-weight:700;font-size:16px;box-shadow:var(--shadow);white-space:nowrap}
.mode.on{background:var(--cream);color:var(--ink)}
@media (hover:hover){.mode:not(.on):hover{background:#131d38;color:var(--cream)}}
.mode:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.menu-btn{flex:none;width:48px;min-height:48px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:999px;background:var(--key);color:var(--soft);box-shadow:var(--shadow)}
.menu-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}

/* ---------- the game card ---------- */
.game-card{background:var(--panel);border:3px solid var(--line);border-radius:22px;padding:18px 20px 18px}
.icon-btn.small{flex:none;width:44px;padding:0;border-radius:12px;box-shadow:0 3px 0 var(--ink);font-size:19px}
.icon-btn.small:active{box-shadow:0 1px 0 var(--ink)}
/* a challenge stop (every 100th): a red-hot stop key and a badge */
.challenge-badge{flex:none;padding:2px 5px 1px;border-radius:5px;background:var(--red);color:var(--cream);font:700 10px/1.1 var(--font);letter-spacing:1px;text-shadow:none}
.level-title{grid-area:name;min-width:0}
.level-title h2{font-size:27px;font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.level-title p{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.35}

.play-area{margin-top:16px;display:flex;flex-direction:column}
.play-side{display:contents}   /* below the wide layout, the score strip moves above the board (order) */
/* The board is as big as the window allows: the width, or (tablets) the height left after the page's rows. */
.board-wrap{width:100%;max-width:min(540px,max(340px,calc(100vh - 330px)));margin:0 auto}

/* ---------- the parking lot ---------- */
.board-and-exit{position:relative;padding-right:32px;margin-bottom:12px;touch-action:none;overscroll-behavior:none}
/* Start: an LED panel over the lot (the exit stays in view) until the run begins */
.start-cover{position:absolute;top:0;left:0;bottom:0;right:32px;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:16px;border:4px solid var(--ink);border-radius:16px;background-color:var(--lcd);
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.5px);background-size:12px 12px;box-shadow:inset 0 0 0 3px #232a40}
.start-goal{font-family:var(--led-font);font-size:30px;line-height:1;letter-spacing:2px;color:var(--led);text-shadow:0 0 10px rgba(255,182,39,.6)}
.start-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:190px;min-height:66px;padding:0 30px;border:3px solid var(--ink);
  border-radius:999px;background:var(--green);color:var(--ink);font-weight:700;font-size:27px;box-shadow:0 6px 0 var(--ink);animation:startGlow 1.8s ease-in-out infinite}
.start-button span{font-size:20px}
.start-button:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink);animation:none}
@keyframes startGlow{50%{box-shadow:0 6px 0 var(--ink),0 0 26px rgba(61,220,132,.6)}}
.start-note{max-width:28ch;text-align:center;font-size:14px;line-height:1.4;color:var(--muted)}
.board.waiting .vehicle{visibility:hidden}
/* a small board (short phones) gets a smaller Start panel */
.board-and-exit{container-type:inline-size}
@container (max-width:300px){
  .start-cover{gap:8px;padding:10px}
  .start-goal{font-size:21px;letter-spacing:1px;text-align:center}
  .start-button{min-width:0;min-height:52px;padding:0 24px;font-size:22px}
  .start-note{font-size:12.5px;line-height:1.3}
}
@container (max-width:230px){ .start-note{display:none} }
.board{position:relative;width:100%;aspect-ratio:1;background:var(--lot-base);border:4px solid var(--ink);border-radius:16px;
  box-shadow:0 7px 0 var(--ink),inset 0 0 0 3px #232a40;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;isolation:isolate}
/* the gap in the wall where the exit is */
.board::after{content:"";position:absolute;right:-4px;top:33.3333%;height:16.6667%;width:4px;background:var(--lot-base);z-index:0}
.parking-lines{position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:0;
  background-image:linear-gradient(to right,var(--lot-grid) 1.5px,transparent 1.5px),linear-gradient(to bottom,var(--lot-grid) 1.5px,transparent 1.5px);
  background-size:16.6667% 16.6667%;background-position:-1px -1px}
/* your lane to the exit, marked out in dashed amber */
.parking-lines::after{content:"";position:absolute;left:0;right:0;top:33.3333%;height:16.6667%;background:var(--lot-lane);
  border-top:2px dashed var(--lot-dash);border-bottom:2px dashed var(--lot-dash)}
.exit-lane{position:absolute;right:0;top:calc(4px + (100% - 8px) / 3);height:calc((100% - 8px) / 6);width:32px;background:var(--lcd);
  border:3px solid var(--ink);border-left:0;border-radius:0 12px 12px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--led-font);color:var(--green);text-shadow:0 0 8px rgba(61,220,132,.75);line-height:1}
.exit-lane span{font-size:15px;letter-spacing:1px}
.exit-lane b{font-size:28px;font-weight:400;line-height:.75}

.vehicle{position:absolute;z-index:2;padding:0;border:0;background:none;cursor:grab;border-radius:12px;touch-action:none;
  transition:left .15s ease,top .15s ease;outline-offset:-3px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.vehicle:disabled{cursor:default}
.vehicle.dragging{transition:none;z-index:5;cursor:grabbing}
/* carried on by black ice (app.js skid): a slower glide that eases out, and a frosty glow that fades */
.vehicle.skid{transition:left .45s cubic-bezier(.12,.7,.25,1),top .45s cubic-bezier(.12,.7,.25,1)}
.vehicle.skid::before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px rgba(214,240,255,.95),0 0 16px 5px rgba(140,205,255,.75);animation:skid-frost .6s ease-out forwards}
@keyframes skid-frost{to{opacity:0}}
.vehicle.selected{z-index:4}
.car-body{position:absolute;inset:7%;display:block;border-radius:11px;background:var(--car);border:2.5px solid var(--ink);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.32),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--ink);transition:filter .18s,box-shadow .18s}
.vehicle.h .car-body{inset:10% 4% 15%}
.vehicle.v .car-body{inset:4% 11% 7%;box-shadow:inset 3px 0 0 rgba(255,255,255,.32),inset -4px 0 0 rgba(0,0,0,.2),0 4px 0 var(--ink)}
@media (hover:hover){.vehicle:not(:disabled):hover .car-body{filter:brightness(1.08)}}
.car-roof{position:absolute;left:28%;top:17%;width:46%;height:66%;border-radius:6px;background:rgba(255,255,255,.2);
  border-left:7px solid rgba(11,16,32,.62);border-right:5px solid rgba(11,16,32,.62)}
.v .car-roof{left:17%;top:28%;width:66%;height:46%;border:0;border-top:7px solid rgba(11,16,32,.62);border-bottom:5px solid rgba(11,16,32,.62)}
.vehicle.bus .car-roof{left:14%;width:70%;background:repeating-linear-gradient(to right,rgba(255,255,255,.2) 0 20%,rgba(11,16,32,.45) 20% 26%);border-left-width:6px;border-right-width:5px}
.vehicle.bus.v .car-roof{top:14%;left:17%;width:66%;height:70%;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.2) 0 20%,rgba(11,16,32,.45) 20% 26%);border-top-width:6px;border-bottom-width:5px}
.car-lights{position:absolute;right:2px;top:16%;bottom:16%;width:3px;border-radius:2px;background:linear-gradient(#fff4c2 0 24%,transparent 24% 76%,#fff4c2 76%)}
.v .car-lights{left:16%;right:16%;top:auto;bottom:2px;height:3px;width:auto;background:linear-gradient(to right,#fff4c2 0 24%,transparent 24% 76%,#fff4c2 76%)}
/* your car: its paint, a cream racing stripe (--car-stripe: transparent on a solid-colour ride), an arrow, and a warm glow */
.target .car-body{background:var(--car-target);background-image:linear-gradient(to bottom,transparent 41%,var(--car-stripe,var(--cream)) 41% 59%,transparent 59%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.32),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--ink),0 0 16px rgba(255,120,90,.45)}
.target .car-roof{background:rgba(253,246,227,.35)}
/* the road rules past stop 1000: ice under the cars, barriers, one-way arrows, tow trucks */
/* ice is drawn over the cars (a frosty sheen, an outline and a flake), so ice under a parked car still shows */
.ice-tile{position:absolute;z-index:3;width:16.6667%;height:16.6667%;pointer-events:none;border-radius:5px;
  background:linear-gradient(135deg,rgba(214,242,255,.34),rgba(126,196,255,.16));box-shadow:inset 0 0 0 2px rgba(220,245,255,.85)}
.ice-tile::after{content:"❄";position:absolute;right:6%;top:3%;font-size:11px;line-height:1;color:#fff;text-shadow:0 0 3px rgba(40,90,160,.9)}
.vehicle.block{cursor:default;pointer-events:none}
.vehicle.block .car-body{inset:12%;border-radius:6px;background:repeating-linear-gradient(135deg,#ff7a1a 0 7px,#fdf6e3 7px 14px);box-shadow:0 3px 0 var(--ink)}
.way-mark{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--cream);border:2px solid var(--ink);font:700 13px/1 var(--font);color:var(--ink)}
.tow-band{position:absolute;z-index:1;background:repeating-linear-gradient(45deg,#15171d 0 5px,#ffc62e 5px 10px)}
.vehicle.tow[data-front="r"] .tow-band{left:0;top:0;bottom:0;width:22%;border-radius:9px 0 0 9px}
.vehicle.tow[data-front="l"] .tow-band{right:0;top:0;bottom:0;width:22%;border-radius:0 9px 9px 0}
.vehicle.tow[data-front="d"] .tow-band{left:0;right:0;top:0;height:22%;border-radius:9px 9px 0 0}
.vehicle.tow[data-front="u"] .tow-band{left:0;right:0;bottom:0;height:22%;border-radius:0 0 9px 9px}
.tow-hook{position:absolute;z-index:4;width:9px;height:9px;border:3px solid var(--ink);border-radius:50%;background:#c9ced9}
.vehicle.tow[data-front="r"] .tow-hook{left:-8px;top:50%;transform:translateY(-50%)}
.vehicle.tow[data-front="l"] .tow-hook{right:-8px;top:50%;transform:translateY(-50%)}
.vehicle.tow[data-front="d"] .tow-hook{top:-8px;left:50%;transform:translateX(-50%)}
.vehicle.tow[data-front="u"] .tow-hook{bottom:-8px;left:50%;transform:translateX(-50%)}
/* a one-long escape car is a bubble car: one square, a short round roof, the stripe and the arrow still on it */
.vehicle.target.mini .car-body{inset:12% 7% 17%;border-radius:12px}
.vehicle.target.mini .car-roof{left:18%;width:36%;top:22%;height:56%;border-left-width:5px;border-right-width:0;border-radius:6px}
.vehicle.target.mini .car-body::after{right:6%;font-size:12px}
/* a three-long escape car is a stretch limo, not a bus: one long cream-tinted roof, no bus windows */
.vehicle.target.bus .car-roof{left:18%;width:62%;background:rgba(253,246,227,.35);border-left-width:7px;border-right-width:5px}
.target .car-body::after{content:"➜";position:absolute;z-index:3;right:9%;top:50%;transform:translateY(-52%);font-size:15px;line-height:1;color:var(--arrow,var(--ink))}
.vehicle.selected .car-body{outline:3px solid var(--cyan);outline-offset:2px}
.vehicle.selected:not(.target) .car-body{box-shadow:inset 0 3px 0 rgba(255,255,255,.32),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--ink),0 0 14px rgba(79,216,255,.55)}
.vehicle:focus-visible{outline:none}
.vehicle:focus-visible .car-body{outline:3px solid var(--cyan);outline-offset:3px}
.vehicle.hinting .car-body{outline:3px solid var(--led);outline-offset:3px;animation:hintPulse 1s ease-in-out infinite}
@keyframes hintPulse{50%{filter:brightness(1.25);outline-color:#ffe29a}}
.hint-bubble{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;background:var(--led);color:var(--ink);
  border:2.5px solid var(--ink);border-radius:50%;width:30px;height:30px;display:grid;place-items:center;font-weight:700;font-size:18px;box-shadow:0 2px 0 var(--ink)}
/* mid-drag, nothing else scrolls, bounces or zooms (app.js also freezes .shell) */
html.drag-lock,html.drag-lock body,html.drag-lock .shell{overscroll-behavior:none;touch-action:none}
.board.escaped{overflow:hidden}
.board.escaped .target{animation:escape .6s ease forwards;pointer-events:none}
@keyframes escape{to{transform:translateX(160%);opacity:0}}

/* ---------- score strip: one slim LED row (a 2 x 2 block in the wide layout's side column) ---------- */
.score-strip{order:-1;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,.75fr) minmax(0,1.35fr) minmax(0,1.35fr);margin:0 0 12px;padding:4px 0 3px;background:var(--lcd);
  border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px #232a40;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px);background-size:4px 4px}
.score-strip>div{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:2px dashed #1f2638}
.score-strip>div:first-child{border-left:0}
.score-strip span{font-size:10px;font-weight:600;letter-spacing:1.2px;line-height:1.1;color:var(--dim)}
.score-strip strong{display:flex;align-items:baseline;gap:5px;font-family:var(--led-font);font-weight:400;font-size:27px;line-height:.95;color:var(--led);
  text-shadow:0 0 8px rgba(255,182,39,.6);font-variant-numeric:tabular-nums;white-space:nowrap}
.score-strip strong b{font-weight:400}
.score-strip strong.long{font-size:21px;line-height:1.22}
.score-strip small{font-family:var(--led-font);font-size:18px;line-height:1;color:#c9983a;text-shadow:none}
.score-strip small:empty{display:none}
.timer-cell strong{color:#9fe7ff;text-shadow:0 0 8px rgba(79,216,255,.55)}

/* ---------- controls ---------- */
.game-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.game-actions button{min-height:50px;display:flex;align-items:center;justify-content:center;gap:7px;padding:0 6px;border:3px solid var(--ink);border-radius:14px;
  background:var(--key);color:var(--soft);font-weight:700;font-size:16px;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.game-actions button>span:first-child{font-size:20px;line-height:1}
.game-actions button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.game-actions button:disabled{color:#56607e}
#hint-button{background:var(--led);color:var(--ink)}
#hint-button.result{background:var(--green)}
#hint-button.nohint{background:var(--key);color:#6f7898;cursor:default}   /* Daily and Weekly: tapping says why */
#hint-button:disabled{background:#6b5a2e;color:#2a2410}
#hint-button.nohint:disabled{background:var(--key);color:#4a5270}
@media (hover:hover){.game-actions button:not(:disabled):not(#hint-button):hover{background:#131d38;color:var(--cream)}}
.game-tip{font-size:14px;line-height:1.45;color:var(--dim);text-align:center;margin-top:14px}

/* ---------- weekly view ---------- */
.weekly-view{background:var(--panel);border:3px solid var(--line);border-radius:22px;padding:18px 20px 20px}
.wk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.wk-head h2{font-size:27px;line-height:1.1;margin:6px 0 6px;color:var(--led);text-shadow:0 0 18px rgba(255,182,39,.3)}
.wk-head .eyebrow{color:var(--green)}
.led-box{flex:none;padding:6px 12px 4px;text-align:center;background:var(--lcd);border:3px solid var(--ink);border-radius:12px;box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px #232a40}
.led-box span{display:block;font-size:11px;font-weight:600;letter-spacing:1.4px;color:var(--dim)}
.led-box strong{display:block;font-family:var(--led-font);font-weight:400;font-size:30px;line-height:1;color:var(--led);text-shadow:0 0 8px rgba(255,182,39,.6);white-space:nowrap}
.wk-progress{display:flex;align-items:center;gap:12px;margin:18px 0 14px;font-weight:600;font-size:16px;white-space:nowrap}
.bar{flex:1;height:14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--key);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green);border-right:2.5px solid var(--ink);transition:width .4s}
.status-box{margin:0 0 14px;padding:12px 14px;border:2px dashed var(--line);border-radius:14px;background:#0d1530;font-size:15px;line-height:1.45;color:var(--soft)}
.status-box b{display:block;font-family:var(--led-font);font-weight:400;font-size:26px;line-height:1.05;letter-spacing:1px;color:var(--led);text-shadow:0 0 8px rgba(255,182,39,.5)}
.weekly-list{list-style:none;margin:0;padding:0;background:#0f1830;border:3px solid var(--line);border-radius:16px;overflow:hidden}
.weekly-list:empty{display:none}
.weekly-list li+li{border-top:2px dashed var(--line)}
.wk-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto 12px;align-items:center;gap:10px;width:100%;min-height:60px;padding:8px 14px 8px 12px;text-align:left}
@media (hover:hover){.wk-row:hover{background:var(--panel-hi)}}
.wk-row:focus-visible{outline-offset:-4px}
.wk-row.current{background:linear-gradient(90deg,rgba(79,216,255,.18),transparent 70%);box-shadow:inset 5px 0 0 var(--cyan)}
.wk-n{font-family:var(--led-font);font-size:28px;line-height:1;color:var(--led);text-shadow:0 0 6px rgba(255,182,39,.5)}
.wk-row.done .wk-n{color:var(--green);text-shadow:0 0 6px rgba(61,220,132,.5)}
.wk-main{min-width:0}
.wk-main strong{display:block;font-size:17px;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-main small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.wk-status{font-size:14px;color:var(--dim);text-align:right;white-space:nowrap;line-height:1.25}
.wk-status b{display:block;color:var(--yellow);font-weight:400;letter-spacing:1px}
.wk-status span{font-family:var(--led-font);font-size:20px;color:var(--cream)}
.wk-status small{display:block;font-size:12px;color:var(--yellow);letter-spacing:.5px}
.wk-go{font-size:22px;color:var(--dim);line-height:1}
.wk-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* past weeks */
.wk-picker{display:flex;align-items:center;gap:10px;margin-top:14px}
.wk-picker label{font-size:13px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.wk-picker select{flex:1;min-width:0;min-height:44px;padding:0 10px;font:600 16px var(--font);color:var(--cream);background:var(--flap);border:3px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink)}
/* past Daily Detours: the weekly list's rows, dated */
.day-list{margin-top:14px;max-height:min(58vh,520px);overflow:auto;overscroll-behavior:none}
.day-row{grid-template-columns:62px minmax(0,1fr) auto 12px;min-height:56px}
.day-row .wk-n{font-size:21px;color:#9fe7ff;text-shadow:0 0 6px rgba(79,216,255,.5)}
.modal .day-list{background:var(--sheet-well);border-color:var(--sheet-line)}
.modal .day-list li+li{border-top-color:var(--sheet-line)}

/* ---------- generic chunky buttons ---------- */
.sticker-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 16px;border:3px solid var(--ink);border-radius:14px;
  background:var(--cream);color:var(--ink);font-weight:700;font-size:16px;box-shadow:0 4px 0 var(--ink);text-decoration:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}   /* fast taps never select a key's words (4.88.2: Roll x10 lit up on the phone) */
.sticker-btn.amber{background:var(--led)}
.sticker-btn.small{min-height:44px;font-size:15px;padding:0 13px}
.sticker-btn.wide{width:100%}
.sticker-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.sticker-btn:disabled{opacity:.5;cursor:default}
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:54px;margin-top:18px;padding:0 20px;
  border:3px solid var(--ink);border-radius:16px;background:var(--led);color:var(--ink);font-weight:700;font-size:18px;box-shadow:0 5px 0 var(--ink);text-align:left}
.primary-button>span{font-size:22px;line-height:1}
.primary-button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.text-button{min-height:44px;padding:0 4px;font-weight:700;font-size:15px;color:var(--led);text-decoration:underline;text-underline-offset:3px}
.text-button.center{display:block;margin:10px auto 0}
.link-btn{padding:0;font-size:inherit;color:#9fb0d8;text-decoration:underline;text-underline-offset:3px}

/* ---------- sidebar ---------- */
.section-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}
.section-label>span:last-child{font-family:var(--led-font);font-weight:400;font-size:24px;letter-spacing:1px;line-height:.9;color:var(--led);text-shadow:0 0 6px rgba(255,182,39,.5)}
.driver-rank{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:12px;font-size:15px;color:var(--muted)}
.driver-rank .eyebrow{color:var(--yellow)}
.driver-rank strong{font-family:var(--led-font);font-weight:400;font-size:26px;color:var(--yellow)}
.xp-track{height:14px;margin:6px 0 12px;border:2.5px solid var(--ink);border-radius:999px;background:var(--key);overflow:hidden}
.xp-track span{display:block;height:100%;width:0;background:var(--yellow);transition:width .3s}
/* the level strip under the Undo / Restart / Hint keys, and the XP drop that floats down into it when a stop is finished */
.level-strip{position:relative;display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:3px 10px 3px 8px;border:2.5px solid var(--ink);
  border-radius:999px;background:var(--lcd);box-shadow:0 3px 0 var(--ink)}
.ls-badge{flex:none;font-family:var(--led-font);font-size:21px;line-height:1;color:var(--yellow);text-shadow:0 0 6px rgba(255,210,63,.45);white-space:nowrap}
.ls-track{flex:1;min-width:40px;height:9px;border-radius:999px;background:#1b2130;overflow:hidden}
.ls-track span{display:block;height:100%;width:0;border-radius:999px;background:var(--yellow);transition:width .7s ease}
.ls-xp{flex:none;font-size:12px;font-weight:600;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
.level-strip.bump .ls-badge{animation:lsBump .7s ease}
.level-strip.level-up{animation:lsGlow 1.4s ease}
@keyframes lsBump{35%{transform:scale(1.3)}}
@keyframes lsGlow{25%,60%{box-shadow:0 3px 0 var(--ink),0 0 18px rgba(255,210,63,.9)}}
.xp-drop{position:fixed;z-index:1000;left:var(--x);top:var(--y);pointer-events:none;white-space:nowrap;font-family:var(--led-font);font-size:30px;line-height:1;
  color:#fff;text-shadow:0 2px 0 var(--ink),0 -1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 0 10px rgba(255,210,63,.8);
  transform:translate(-50%,0);animation:xpDrop var(--t,1s) cubic-bezier(.35,.1,.6,1) forwards}
.xp-drop b{color:var(--yellow);font-weight:400}
.xp-drop.in-dialog{position:absolute;top:10px;left:50%}
@keyframes xpDrop{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}14%{opacity:1;transform:translate(-50%,0) scale(1.08)}
  80%{opacity:1}100%{opacity:0;transform:translate(-50%,var(--rise,-60px)) scale(.8)}}
@media (prefers-reduced-motion:reduce){.xp-drop{animation-duration:.01s}.ls-track span{transition:none}}
/* today's sign-in and the missions & goals under the level strip, there during runs too (owner, 2026-10-12) */
.daily-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:10px}
.dr-chip{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:46px;padding:5px 10px 5px 9px;text-align:left;
  border:2.5px solid var(--ink);border-radius:14px;background:var(--panel);box-shadow:0 3px 0 var(--ink);color:var(--cream)}
.dr-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover){.dr-chip:hover{background:var(--panel-hi)}}
.dr-ico{flex:none;font-size:20px;line-height:1}
.dr-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.dr-text b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-text small{font-size:12px;font-weight:500;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-dot{position:absolute;top:-5px;right:-5px;width:13px;height:13px;border-radius:50%;background:var(--red);border:2.5px solid var(--ink)}
.dr-chip.waiting{border-color:var(--led);background:#2a2110}
.dr-chip.waiting b{color:var(--led)}
.dr-chip.all-done small{color:var(--green)}
@media (prefers-reduced-motion:no-preference){.dr-chip.waiting{animation:dr-glow 1.6s ease-in-out infinite alternate}}
@keyframes dr-glow{from{box-shadow:0 3px 0 var(--ink)}to{box-shadow:0 3px 0 var(--ink),0 0 14px rgba(255,182,39,.55)}}
.xp-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:-6px 0 12px;font-size:14px;color:var(--muted)}
.xp-row strong{color:#dfe5f3}
.region-list{list-style:none;margin:14px 0 6px;padding:0}
.region-list li{position:relative}
.region-list li:not(:last-child)::before{content:"";position:absolute;left:23px;top:44px;bottom:-6px;border-left:2px dashed var(--line)}
.region-button{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px 8px;text-align:left;border-radius:12px}
@media (hover:hover){.region-button:not(:disabled):hover{background:var(--panel-hi)}}
.region-button:disabled{opacity:.55}
.region-number{flex:none;width:32px;height:32px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:50%;background:var(--key);color:var(--muted);font-weight:700;font-size:14px}
.region-button.current .region-number{background:var(--cream);color:var(--ink);box-shadow:0 0 0 4px rgba(253,246,227,.18)}
.region-button.complete .region-number{background:var(--green);color:var(--ink)}
.region-text{min-width:0}
.region-button strong{display:block;font-size:16px;font-weight:600}
.region-button small{display:block;font-size:14px;color:var(--muted);margin-top:1px}
.region-lock{margin-left:auto;font-size:13px;color:var(--cyan)}
.row-link{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:6px;padding:10px 4px 0;border-top:2px dashed var(--line);text-decoration:none;font-size:16px}
.row-link span{font-size:22px}
.feature-card{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:16px 16px 15px;border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);color:var(--ink)}
.feature-card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.weekly-card{background:var(--led)}
.daily-card{background:var(--cream)}
.feature-card .eyebrow{color:rgba(11,16,32,.72)}
.feature-card strong{display:block;font-size:19px;font-weight:700;line-height:1.2;margin:3px 0 4px}
.fc-caption{display:block;font-size:15px;line-height:1.35;color:#2b3150}
.feature-icon{flex:none;font-size:30px;line-height:1.1}
body[data-mode="weekly"] .weekly-card,body[data-mode="daily"] .daily-card{outline:3px solid var(--cyan);outline-offset:3px}
.garage-button{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;text-align:left;border:3px solid var(--line);border-radius:18px;background:var(--panel);font-size:16px;font-weight:600}
@media (hover:hover){.garage-button:hover{background:var(--panel-hi)}}
.menu-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.menu-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:8px 14px;text-align:left;border:3px solid var(--line);border-radius:16px;
  background:var(--panel);color:var(--cream);font-size:16px;font-weight:600}
.menu-row>span:nth-child(2){flex:1;min-width:0}
.menu-row small{display:block;font-size:13px;font-weight:500;color:var(--dim)}
@media (hover:hover){.menu-row:hover{background:var(--panel-hi)}}
.menu-row:active{transform:translateY(2px)}
.menu-ico{flex:none;width:36px;height:36px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:11px;background:var(--key);font-size:19px;font-weight:700;color:var(--soft)}
.garage-ico{flex:none;width:38px;height:38px;display:grid;place-items:center;border:2.5px solid var(--ink);border-radius:11px;background:var(--key);font-size:21px}
.garage-button small{display:block;font-size:14px;font-weight:400;color:var(--muted);margin-top:2px}
.garage-button>span:last-child{margin-left:auto;font-size:22px;color:var(--dim)}

.site-foot{margin-top:30px;padding-top:16px;border-top:2px dashed var(--line);text-align:center;font-size:14px;line-height:1.6;color:var(--dim)}
.site-foot nav{margin-top:4px}
.site-foot a{color:#9fb0d8}
.site-foot a:hover,.link-btn:hover{color:var(--led)}

/* ---------- dialogs: the board's lit slate sheets ---------- */
.modal{width:min(460px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:hidden;
  --pad-t:22px;--pad-r:20px;--pad-b:20px;--close-at:12px;padding:0;border:4px solid var(--sheet-line);border-radius:22px;background:linear-gradient(var(--sheet),var(--sheet-2));color:var(--cream);box-shadow:0 8px 0 var(--ink)}
.modal[open]{display:flex;flex-direction:column;animation:popIn .3s cubic-bezier(.3,1.5,.5,1)}
/* the content (app.js wraps it at start): scrolls on its own under the fixed ✕. It stops flat at either end: an iPhone
   rubber-banded past the end and snapped back, which looked like a glitch (owner, 2026-10-01); `none` keeps the
   scroll from passing to the page too, like `contain`, without the bounce. The lists that scroll inside a pop-up do
   the same. */
.modal-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:none;padding:var(--pad-t) var(--pad-r) var(--pad-b)}
@keyframes popIn{from{transform:translateY(-8px) scale(.96);opacity:.4}}
.modal::backdrop{background:rgba(6,10,22,.72)}
/* The ✕ sits in the pop-up's top corner, outside the scrolling content, so it never moves (the eyebrow and title
   leave its width free) */
.modal-close{position:absolute;z-index:5;top:var(--close-at);right:var(--close-at);width:44px;height:44px;display:grid;place-items:center;border:3px solid var(--sheet-line);border-radius:12px;
  background:var(--sheet-key);color:var(--cream);font-weight:700;font-size:17px;box-shadow:0 2px 0 #1b2338}
.modal-close:active{transform:translateY(2px);box-shadow:none}
.modal .eyebrow{padding-right:52px;color:#c6cee3}
.modal h2{margin:6px 0 10px;padding-right:48px;font-size:27px;line-height:1.15;color:var(--led)}
.modal h3{margin:18px 0 6px;font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#c6cee3}
.modal .muted,.modal .help-note{color:#dfe5f3}
.modal .fine-print{color:#b3bdd8;text-align:center}
.wide-modal{width:min(680px,calc(100vw - 24px))}
/* A long list's Close pinned to the bottom, in thumb reach on a phone (the ✕ up top is a stretch) */
.sheet-foot{display:none;flex:none;padding:10px var(--pad-r) 14px;background:var(--sheet-2);border-top:2px solid rgba(11,16,32,.35)}
/* .always: pinned on every screen (the leaderboard's Go), not only on phones */
.sheet-foot.always{display:block}
.sheet-foot[hidden]{display:none}
.help-demo{display:flex;gap:14px;align-items:center;height:78px;margin:16px 0;padding:18px;background:#1b2236;border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 0 0 3px #232a40}
.demo-car{flex:none;width:72px;height:36px;border:2.5px solid var(--ink);border-radius:9px;background:var(--car-target);background-image:linear-gradient(to bottom,transparent 41%,var(--cream) 41% 59%,transparent 59%);box-shadow:0 4px 0 var(--ink)}
.demo-dashes{flex:1;border-top:3px dashed rgba(255,182,39,.5)}
.demo-exit{font-family:var(--led-font);font-size:22px;color:var(--green);text-shadow:0 0 8px rgba(61,220,132,.7)}
.help-steps,.help-list{margin:0;padding-left:22px;font-size:16px;line-height:1.5}
.help-steps li,.help-list li{margin:8px 0;padding-left:4px}
.help-list{padding-left:20px}
.help-note{font-size:15px;line-height:1.55}

.level-section{margin-top:22px}
.level-section h3{margin:0 0 2px;font-size:16px;letter-spacing:.5px;text-transform:none;color:var(--cream)}
.level-section h3.chapter-complete,.region-button strong.chapter-complete{color:var(--green)}
.level-section p{font-size:14px;color:#c6cee3;margin-bottom:10px}
.level-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.level-pick{position:relative;aspect-ratio:1;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:2.5px solid var(--ink);border-radius:12px;
  background:var(--sheet-well);color:var(--cream);box-shadow:0 3px 0 var(--ink)}
.level-pick span{font-family:var(--led-font);font-size:28px;line-height:.9;color:var(--led)}
.level-pick.n3 span{font-size:21px}
.level-pick.n4 span{font-size:16px}
.level-pick small{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--yellow)}
.level-pick.unranked::after,.level-legend .dot{content:'';position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 1.5px var(--ink)}
.level-legend{position:relative;margin-top:14px;padding-left:16px;font-size:14px;line-height:1.35;color:#c6cee3}
.level-legend .dot{top:5px;left:0;right:auto;display:block}
.level-pick.current{background:var(--cream);color:var(--ink)}
.level-pick.current span{color:var(--ink)}
.level-pick.current small{color:#7a5b00}
.level-pick:disabled{background:transparent;box-shadow:none;border-color:#56628c;opacity:.7}
.level-pick:disabled span{color:#9aa6c6}
.level-pick:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
/* challenge stops: a red ring and the word */
.level-pick.challenge{border-color:#7a1422;box-shadow:0 3px 0 var(--ink),0 0 0 2px rgba(255,77,94,.7)}
.level-pick.challenge span{color:#ff8a96}
.level-pick.challenge small{font-size:9px;letter-spacing:.6px;color:#ffb3bc}
.level-pick.challenge.current span{color:var(--ink)}
.level-pick.challenge.current small{color:#a3162a}
.level-section.locked{opacity:.75}
.level-section.locked p{margin-bottom:0}
.level-more{margin-top:18px;font-size:14px;color:#c6cee3;text-align:center}

.win-modal{text-align:center}
.win-modal .eyebrow{padding:0 48px}
.win-modal h2{padding:0;margin-top:10px}
.win-stars{font-size:42px;letter-spacing:8px;line-height:1;color:var(--yellow);text-shadow:0 0 12px rgba(255,210,63,.5);margin-bottom:8px}
.win-description{font-size:16px;line-height:1.5;color:#dfe5f3}
.win-stat-row{display:flex;margin:16px 0 0;padding:8px 0 7px;background:var(--lcd);border:3px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink),inset 0 0 0 2px #232a40}
.win-stat-row>div{flex:1;min-width:0;border-left:2px dashed #1f2638}
.win-stat-row>div:first-child{border-left:0}
.win-stat-row b{display:block;font-family:var(--led-font);font-weight:400;font-size:34px;line-height:1;color:var(--led);text-shadow:0 0 8px rgba(255,182,39,.6);white-space:nowrap}
.win-stat-row span{display:block;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:1.2px;color:var(--dim)}
.reward-note{margin:14px 0 0;padding:10px;border:2px dashed var(--yellow);border-radius:12px;color:var(--yellow);font-size:15px}
.rank-box{margin:16px 0 0;padding:14px;border:3px solid var(--sheet-line);border-radius:16px;background:var(--sheet-well);font-size:15px;line-height:1.45;color:#dfe5f3}
.rank-box p{margin:2px 0}
.rank-box.error{border-color:#c46a76}
.rank-box.loading{color:#c6cee3}
.rank-big{display:block;font-family:var(--led-font);font-weight:400;font-size:38px;line-height:1;color:var(--led);text-shadow:0 0 10px rgba(255,182,39,.6);margin-bottom:4px}
.rank-pb{font-weight:700;color:var(--green);font-size:17px}
.rank-week{font-weight:600;color:var(--cream)}
.rank-head{display:block;font-size:17px;color:var(--cream);margin-bottom:6px}
.rank-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px}
.rank-actions:empty{display:none}
.name-form{text-align:left}
.name-form label,.field-label{display:block;margin:4px 0 6px;font-size:13px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#c6cee3}
/* every text box, the save code's included: at the browser's own 13px, Safari zooms the page in on a tap. Keep 16px or more. */
.name-form input,#driver-name,#save-input{width:100%;min-height:48px;padding:10px 12px;font:600 17px var(--font);color:var(--cream);background:#26314f;border:3px solid var(--sheet-line);border-radius:12px;outline:none}
.name-form input:focus,#driver-name:focus,#save-input:focus{border-color:var(--cyan)}
input::placeholder{color:#9aa6c6}
input[aria-invalid="true"]{border-color:#ff8a96!important}
.form-note{margin:6px 0 0;font-size:13px;line-height:1.4;color:#c0c9e0}
.form-error{margin:6px 0 0;font-size:14px;font-weight:600;color:#ffc2c9}
.form-error:empty{display:none}
.name-row{display:flex;gap:8px;align-items:stretch}
.name-row input{flex:1;min-width:0}
.name-row .sticker-btn{flex:none}
.form-error:not(:empty)+.form-note{display:none}   /* the reason replaces the rules while it's showing */
.name-form .text-button{display:block;margin:6px auto 0}
.save-code{margin:14px 0 4px;font-family:var(--led-font);font-size:clamp(26px,8vw,34px);line-height:1;letter-spacing:2px;text-align:center;color:var(--led);
  text-shadow:0 0 10px rgba(255,182,39,.55);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.save-status{margin-top:14px}
.save-status.ok b{color:var(--green);text-shadow:0 0 8px rgba(61,220,132,.5)}
.save-form{margin-top:18px}
#save-input{text-transform:uppercase;letter-spacing:1px}
#invite-input{width:100%;min-height:48px;padding:10px 12px;font:600 17px var(--font);color:var(--cream);background:#26314f;border:3px solid var(--sheet-line);border-radius:12px;outline:none;text-transform:uppercase;letter-spacing:1px}
#invite-input:focus{border-color:var(--cyan)}
.invite-code{overflow-wrap:anywhere}
#invite-friends:empty{display:none}
.win-secondary{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.win-secondary .sticker-btn{background:var(--sheet-key);color:var(--cream);border-color:var(--ink)}
.share-save{display:inline-flex;margin-top:12px;text-decoration:none}
.share-area{width:100%;height:120px;margin-top:12px;padding:10px;font:500 15px var(--font);color:var(--cream);background:#26314f;border:3px solid var(--sheet-line);border-radius:12px}

.lb-tabs{display:flex;gap:6px;margin:2px 0 12px}
.lb-tabs button{flex:1;min-height:44px;border:2px solid var(--ink);border-radius:10px;background:var(--flap);color:#9fb0d8;font-weight:700;font-size:15px;box-shadow:0 2px 0 var(--ink)}
.lb-tabs button[aria-selected="true"]{background:var(--cream);color:var(--ink)}
.modal.lb-modal h2{font-size:22px;margin-bottom:8px}
.lb-modal .lb-tabs{margin-bottom:10px}
/* the board browser: step through every board with a driver on it, or pick one (a native picker on a phone) */
.lb-nav{display:flex;gap:6px;align-items:stretch;margin:0 0 10px}
.lb-nav select{flex:1;min-width:0;min-height:40px;padding:0 8px;font:600 16px var(--font);color:var(--cream);background:var(--flap);border:3px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink);text-overflow:ellipsis}
.lb-step{flex:none;width:44px;min-height:40px;padding:0;border:3px solid var(--ink);border-radius:12px;background:var(--cream);color:var(--ink);font:700 26px/1 var(--font);box-shadow:0 3px 0 var(--ink)}
.lb-step:disabled{opacity:.35;box-shadow:none}
.lb-step:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.sticker-btn.lb-go{background:var(--green);font-size:18px}
.lb-modal .lb-tabs button{min-height:38px;font-size:14px}
.modal.lb-modal .fine-print{margin-top:10px;font-size:12px}
.lb-body{min-height:170px;background:var(--lcd);border:3px solid var(--ink);border-radius:14px;box-shadow:inset 0 0 0 2px #232a40;overflow:hidden}
.lb-scroll{max-height:min(52vh,440px);overflow:auto;overscroll-behavior:none}
table.lb{width:100%;border-collapse:collapse;font-size:13px}
.lb th{position:sticky;top:0;z-index:1;padding:6px 6px;background:var(--lcd);border-bottom:2px solid #1b2130;font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;text-align:left;color:var(--dim)}
.lb td{padding:3px 6px;border-top:1px dashed #1b2130;vertical-align:middle}
.lb .rk,.lb .mv,.lb .tm{font-family:var(--led-font);font-size:18px;line-height:1;color:var(--led);white-space:nowrap}
.lb th.rk,.lb th.mv,.lb th.tm{font-family:var(--font);font-size:10px;color:var(--dim)}
.lb .rk{width:1%;text-align:right;padding-right:4px}
.lb .mv,.lb .tm{width:1%;text-align:right}
.lb .nm{max-width:0;width:100%;font-weight:600;color:#e6ebf7}
.nm-row{display:flex;align-items:center;gap:6px;min-width:0}
.nm-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb tr.top1 .rk{color:var(--yellow)}
.lb tr.you td{background:rgba(79,216,255,.16)}
.lb tr.you .nm{color:#9fe7ff}
.lv-tag{flex:none;padding:0 5px;border:1.5px solid var(--yellow);border-radius:5px;color:var(--yellow);font-size:9px;font-weight:700;letter-spacing:.5px;vertical-align:2px;white-space:nowrap}
.you-tag{flex:none;padding:0 5px;border-radius:5px;background:var(--cyan);color:var(--ink);font-size:9px;font-weight:700;letter-spacing:1px;vertical-align:2px}
.lb tr.gap td{text-align:center;color:var(--dim);padding:2px}
/* accolades beside a name (app.js badgeStars, partyHat); on a narrow board the stars (and YOU) drop under the name
   together rather than squeeze it */
.lb .nm-row{flex-wrap:wrap;row-gap:3px}
.nm-who{flex:0 1 auto;display:flex;align-items:center;gap:5px;min-width:0}
.nm-tail{flex:none;display:inline-flex;align-items:center;gap:6px}
.nm-btn{display:block;width:100%;min-height:30px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nm-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}
.nm-btn[aria-expanded="true"] .nm-text{text-decoration:underline;text-underline-offset:3px}
.lb tr.driver-row td{padding:2px 6px 8px;border-top:0}
.driver-card{padding:8px 10px;border:2px solid var(--yellow);border-radius:10px;background:#0f1424}
.dc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dc-level{font-family:var(--led-font);font-weight:400;font-size:20px;line-height:1;color:var(--yellow)}
.dc-xp{font-size:12px;color:#dfe5f3}
.dc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0 3px;padding:0;list-style:none}
.dc-stats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;min-width:0}
.dc-stats b{font-family:var(--led-font);font-weight:400;font-size:18px;line-height:1;color:var(--led)}
.dc-stats span{font-size:10px;line-height:1.2;color:var(--dim)}
.dc-note{display:block;font-size:10px;color:var(--dim);text-align:center}
.badges{flex:none;display:inline-flex;align-items:center;gap:2px}
.badge{flex:none;display:inline-flex;align-items:baseline;line-height:1;cursor:default}
.badge.star{font-size:13px}
.badge.shield svg{display:block;width:14px;height:16px;font-family:inherit}
.badge small{margin-left:1px;font-size:10px;font-weight:700;color:var(--dim)}
.star.silver{color:#d3dae4;text-shadow:0 0 3px rgba(211,218,228,.45)}
.star.gold{color:#ffc93c;text-shadow:0 0 4px rgba(255,201,60,.55)}
.star.blue{color:#4f9dff;text-shadow:0 0 4px rgba(79,157,255,.6)}
.star.rainbow{font-size:14px;color:#ff5a5a;background:linear-gradient(90deg,#ff4d4d,#ffa53c,#ffe14d,#4de26b,#4fd8ff,#6b7bff,#d06bff,#ff4d4d);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rainbow-star 2.4s linear infinite;filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
@keyframes rainbow-star{from{background-position:0 0}to{background-position:150% 0}}
.badge.hat svg{display:block;width:19px;height:12px;filter:drop-shadow(0 0 3px rgba(255,201,60,.45))}
@media (prefers-reduced-motion:reduce){.star.rainbow{animation:none}}
.lb-state{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 16px;text-align:center}
.lb-state b{font-family:var(--led-font);font-weight:400;font-size:28px;letter-spacing:1px;color:#8e98b6}
.lb-state.error b{color:#ff9aa5}
.lb-state small{max-width:34ch;font-size:15px;line-height:1.4;color:#b7c2de}
.lb-state .sticker-btn{margin-top:8px}
.lb-summary{margin:0;padding:6px 10px;border-top:2px solid #1b2130;font-size:12px;line-height:1.4;color:var(--dim)}

.switch{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;margin-top:16px;padding:5px 14px 5px 6px;border:3px solid var(--ink);border-radius:999px;
  background:var(--key);color:var(--soft);font-weight:700;font-size:16px;text-align:left;box-shadow:0 4px 0 var(--ink)}
.switch i{position:relative;flex:none;width:48px;height:28px;border-radius:999px;background:#2a3350;border:2px solid var(--ink);transition:background .25s}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.switch[aria-checked="true"]{color:var(--cream)}
.switch[aria-checked="true"] i{background:var(--green)}
.switch[aria-checked="true"] i::after{transform:translateX(20px)}
.switch:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.switch+.form-note{margin-left:6px}
.switch:disabled{opacity:.55}
.switch:disabled:active{transform:none;box-shadow:0 4px 0 var(--ink)}
.volume{margin-top:16px;padding:10px 16px 12px;border:3px solid var(--ink);border-radius:22px;background:var(--key);box-shadow:0 4px 0 var(--ink)}
.volume label{display:flex;justify-content:space-between;align-items:baseline;color:var(--cream);font-weight:700;font-size:16px}
.volume output{font-family:var(--led-font);font-size:22px;font-weight:400;line-height:1;color:var(--led)}
.volume input{--fill:0%;display:block;width:100%;height:32px;margin:6px 0 0;background:none;-webkit-appearance:none;appearance:none}
.volume input::-webkit-slider-runnable-track{height:12px;border:2px solid var(--ink);border-radius:999px;background:linear-gradient(90deg,var(--green) var(--fill),#2a3350 var(--fill))}
.volume input::-moz-range-track{height:8px;border:2px solid var(--ink);border-radius:999px;background:linear-gradient(90deg,var(--green) var(--fill),#2a3350 var(--fill))}
.volume input::-webkit-slider-thumb{width:28px;height:28px;margin-top:-10px;border:3px solid var(--ink);border-radius:50%;background:var(--cream);-webkit-appearance:none;appearance:none}
.volume input::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--ink);border-radius:50%;background:var(--cream)}
.volume input:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;border-radius:999px}
.volume+.form-note{margin-left:6px}
/* Driver settings ▸ Daily Detour reminder: the switch, and its time beside it */
.remind-row{display:flex;align-items:center;gap:8px;margin-top:16px}
.remind-row .switch{flex:1;min-width:0;margin-top:0}
.remind-row select,.remind-offer select{flex:none;min-height:44px;padding:0 6px;font:600 16px var(--font);color:var(--cream);background:var(--flap);border:3px solid var(--ink);border-radius:12px;box-shadow:0 3px 0 var(--ink)}
.remind-row select:disabled{opacity:.55}
.remind-row+.form-note{margin-left:6px}



/* ---------- lots: the ground under the board (the garage's second collection) ----------
   Each is the real place seen from above, in the sticker style: its ground (--lot-base and a background drawn in
   gradients) and the lane colours so the cars (ink-outlined), the dashed lane to the exit and the EXIT sign stay
   clear on it. --lot-lane is a whole background, so a lane can be a road of its own (ruts, a tram lane). Patterns
   tile per cell (--cx/--cy) or finer. A dot at a tile's corner or edge is drawn as halves/quarters from each side
   (at 0 0, at 100% 0 ...), since a % background-position doesn't offset by a % of the tile. Used on .board and on
   the garage's .mini-lot previews (a strip one cell tall, --cy:100%). */
:root{--cx:16.6667%;--cy:16.6667%;--lot-base:#1b2236;--lot-grid:rgba(159,176,216,.13);--lot-lane:rgba(255,182,39,.06);--lot-dash:rgba(255,182,39,.32)}
[data-lot]{background-color:var(--lot-base)}
/* asphalt: the lot at night, with a little aggregate in it */
[data-lot="asphalt"]{background-image:radial-gradient(circle,rgba(210,220,245,.07) .8px,transparent 1.3px),radial-gradient(circle,rgba(0,0,0,.22) .9px,transparent 1.4px);
  background-size:6px 6px,9px 9px;background-position:0 0,3px 4px}
/* boardwalk: Wildwood and Atlantic City: weathered gray-brown planks laid on the diagonal, meeting in a V down the
   middle, and the concrete tram lane with its yellow line (the lane to the exit) */
[data-lot="boardwalk"]{--lot-base:#8a7662;--lot-grid:rgba(45,30,15,.24);--lot-lane:rgba(206,203,194,.93);--lot-dash:#f2c230;
  background-image:repeating-linear-gradient(45deg,rgba(40,26,12,.6) 0 1.5px,transparent 1.5px 8px),repeating-linear-gradient(-45deg,rgba(40,26,12,.6) 0 1.5px,transparent 1.5px 8px),
    repeating-linear-gradient(45deg,rgba(255,244,225,.1) 0 8px,transparent 8px 24px,rgba(40,26,12,.12) 24px 32px,transparent 32px 56px),
    repeating-linear-gradient(-45deg,rgba(255,244,225,.1) 0 8px,transparent 8px 24px,rgba(40,26,12,.12) 24px 32px,transparent 32px 56px);
  background-size:100% 50%;background-position:0 0,0 100%,0 0,0 100%;background-repeat:no-repeat}
.mini-lot[data-lot="boardwalk"]{--lot-lane:rgba(206,203,194,.28)}
/* shore sand: fine grains, bits of shell, wind ripples, and the tyre ruts of a beach-buggy lane */
[data-lot="sand"]{--lot-base:#dcc28f;--lot-grid:rgba(120,85,35,.15);--lot-dash:rgba(150,62,0,.7);
  --lot-lane:linear-gradient(to bottom,transparent 16%,rgba(140,100,50,.24) 16% 36%,transparent 36% 64%,rgba(140,100,50,.24) 64% 84%,transparent 84%),rgba(255,250,235,.14);
  background-image:radial-gradient(3.2px 2px at 50% 50%,#fffaf0 60%,transparent 100%),radial-gradient(2.6px 2px at 50% 50%,#f0b6a4 60%,transparent 100%),
    radial-gradient(circle,rgba(110,78,35,.42) .9px,transparent 1.4px),radial-gradient(circle,rgba(255,252,240,.6) .9px,transparent 1.4px),
    repeating-linear-gradient(172deg,transparent 0 9px,rgba(255,250,235,.18) 9px 11px,transparent 11px 14px,rgba(150,110,60,.12) 14px 15px);
  background-size:43px 37px,59px 53px,7px 7px,11px 11px,auto;background-position:11px 9px,33px 29px,0 0,4px 5px,0 0}
/* Pine Barrens: rusty pitch-pine needles and cones over the forest floor, clumps of scrub oak and huckleberry, and
   a white "sugar sand" road with its ruts as the lane */
[data-lot="pines"]{--lot-base:#6f4b2c;--lot-grid:rgba(30,15,5,.22);--lot-dash:rgba(90,55,20,.85);
  --lot-lane:linear-gradient(to bottom,transparent 20%,rgba(165,135,95,.45) 20% 34%,transparent 34% 66%,rgba(165,135,95,.45) 66% 80%,transparent 80%),rgba(238,229,205,.9);
  background-image:radial-gradient(circle,#557f3a 0 3px,#3a6030 3.4px 4.6px,transparent 5px),radial-gradient(4px 2.6px at 50% 50%,#43290f 70%,transparent 100%),
    linear-gradient(40deg,transparent 45%,rgba(222,166,100,.5) 45% 55%,transparent 55%),linear-gradient(-50deg,transparent 45%,rgba(55,32,14,.42) 45% 55%,transparent 55%),
    linear-gradient(95deg,transparent 45%,rgba(200,140,80,.52) 45% 55%,transparent 55%),linear-gradient(-15deg,transparent 45%,rgba(232,182,122,.45) 45% 55%,transparent 55%);
  background-size:47px 43px,37px 31px,13px 8px,10px 14px,17px 7px,9px 12px;background-position:13px 17px,5px 22px,0 0,3px 2px,6px 4px,2px 7px}
.mini-lot[data-lot="pines"]{--lot-lane:linear-gradient(to bottom,transparent 20%,rgba(165,135,95,.3) 20% 34%,transparent 34% 66%,rgba(165,135,95,.3) 66% 80%,transparent 80%),rgba(238,229,205,.3)}
/* diner floor: the real black-and-white checkerboard, with a shine off the chrome, and a red lane */
[data-lot="diner"]{--lot-base:#4a4d57;--lot-grid:transparent;--lot-lane:rgba(255,70,90,.2);--lot-dash:#ff5a6a;
  background-image:linear-gradient(135deg,rgba(255,255,255,.08),transparent 45%),repeating-conic-gradient(#e6dfcf 0 25%,#4a4d57 0 50%);
  background-size:100% 100%,calc(var(--cx) / 2) calc(var(--cy) / 2);background-position:0 0}
/* Penn concourse: NY Penn's NJ Transit concourse: big granite tiles laid on the diagonal, pale gray and rosy
   pink, a small black inset where they meet, speckled like the stone */
[data-lot="penn"]{--lot-base:#d8d4cc;--lot-grid:rgba(60,50,40,.1);--lot-lane:rgba(255,150,40,.14);--lot-dash:rgba(150,70,0,.85);
  background-image:radial-gradient(circle,rgba(60,50,45,.3) .7px,transparent 1.1px),radial-gradient(circle,rgba(255,255,255,.45) .7px,transparent 1.1px),
    radial-gradient(circle,#26272b 0 2.3px,transparent 2.8px),conic-gradient(from 45deg,#bfa7a0 0 25%,#d8d4cc 0 50%,#bfa7a0 0 75%,#d8d4cc 0);
  background-size:5px 5px,7px 7px,var(--cx) var(--cy),var(--cx) var(--cy);background-position:0 0,3px 2px,0 0,0 0}
/* snow day: fresh snow with soft drifts and sparkle, and the plowed lane: gray slush in two tyre tracks */
/* the road rules' black ice has to show on the light and busy lots: a deeper blue sheen, a blue outline, a shadowed flake */
[data-lot="snow"] .ice-tile,[data-lot="sand"] .ice-tile,[data-lot="penn"] .ice-tile,[data-lot="diner"] .ice-tile,[data-lot="boardwalk"] .ice-tile,[data-lot="pines"] .ice-tile{background:linear-gradient(135deg,rgba(120,190,255,.4),rgba(60,130,220,.22));box-shadow:inset 0 0 0 2px rgba(35,100,185,.85)}
[data-lot="snow"] .ice-tile::after,[data-lot="sand"] .ice-tile::after,[data-lot="penn"] .ice-tile::after,[data-lot="diner"] .ice-tile::after,[data-lot="boardwalk"] .ice-tile::after,[data-lot="pines"] .ice-tile::after{text-shadow:0 0 2px #123a78,0 0 4px rgba(18,58,120,.9)}
[data-lot="snow"]{--lot-base:#eef3fa;--lot-grid:rgba(80,100,140,.16);--lot-dash:rgba(200,105,0,.8);
  --lot-lane:linear-gradient(to bottom,transparent 16%,rgba(95,108,130,.3) 16% 34%,transparent 34% 66%,rgba(95,108,130,.3) 66% 84%,transparent 84%),rgba(150,165,190,.2);
  background-image:radial-gradient(circle,#fff 1.3px,transparent 1.9px),radial-gradient(circle,rgba(150,172,210,.55) .9px,transparent 1.4px),
    radial-gradient(ellipse 60% 45% at 30% 40%,rgba(178,196,228,.45),transparent 70%),radial-gradient(ellipse 50% 40% at 75% 75%,rgba(188,204,232,.4),transparent 70%);
  background-size:13px 13px,11px 11px,calc(var(--cx) * 2) calc(var(--cy) * 2),calc(var(--cx) * 3) calc(var(--cy) * 2);background-position:0 0,6px 5px,0 0,0 0}
/* the Turnpike at night: dark pavement, white skip lines between the lanes, the orange pools of the high-mast
   lights, and the exit ramp's glow */
[data-lot="night"]{--lot-base:#0b0f18;--lot-grid:transparent;--lot-lane:rgba(255,200,110,.07);--lot-dash:rgba(245,245,250,.85);
  background-image:conic-gradient(at 40% 2px,transparent 0 270deg,rgba(236,240,248,.42) 0),radial-gradient(circle at 100% 41.7%,rgba(255,200,120,.22),transparent 34%),
    radial-gradient(circle at 14% 86%,rgba(255,170,80,.17),transparent 30%),radial-gradient(circle at 58% 4%,rgba(255,170,80,.14),transparent 26%),
    radial-gradient(circle,rgba(200,215,255,.12) .8px,transparent 1.3px);
  background-size:var(--cx) var(--cy),100% 100%,100% 100%,100% 100%,7px 7px;background-position:0 -1px,0 0,0 0,0 0,0 0}
/* ---------- rides: the escape car's other looks (the garage's first collection) ----------
   Each is the real vehicle seen from above, nose to the right (the exit), in the sticker style: ink outline, flat
   paint, a few bold details. Drawn over the same car (.car-body > .car-roof, .car-lights, .ride-deco and their
   ::before/::after), sized in % of the car so it reads as a one-cell .mini, at length 2 and as a length-3 .bus.
   The glow stays, and the arrow always shows: on a drawn ride it wears a cream outline. The paint rides (the ones
   with a color in app.js RIDES) are only --car-target. A part drawn with z-index:-1 (tyres, fins) sits under the body and peeks out. */
.ride-deco{display:none;position:absolute;pointer-events:none}
.vehicle.target[data-ride] .car-body::after{text-shadow:none}
.vehicle.target[data-ride]:not([data-ride="red"],[data-ride="orange"],[data-ride="green"],[data-ride="blue"],[data-ride="pink"],[data-ride="peach"],[data-ride="gold"],[data-ride="teal"],[data-ride="yellow"],[data-ride="hudson"],[data-ride="purple"],[data-ride="silver"],[data-ride="fudge"]) .car-body::after{
  z-index:6;color:var(--ink);text-shadow:1.5px 0 var(--cream),-1.5px 0 var(--cream),0 1.5px var(--cream),0 -1.5px var(--cream),1px 1px var(--cream),-1px -1px var(--cream),1px -1px var(--cream),-1px 1px var(--cream)}
/* Soft Serve Truck: a Mister Softee-style step van: white, the light-blue skirt and bumper, the big windshield,
   the roof air conditioner, the music speaker and amber cab lights, and a vanilla swirl in its cone on the roof */
.vehicle.target[data-ride="icecream"] .car-body{border-radius:6px 9px 9px 6px;background:#f7f8fa;
  background-image:linear-gradient(to bottom,#4a8ad6 0 10%,transparent 10% 90%,#4a8ad6 90%),linear-gradient(to right,transparent 94%,#4a8ad6 94%)}
.vehicle.target[data-ride="icecream"] .car-roof{left:3%;width:79%;top:15%;height:70%;border:0;border-right:6px solid rgba(11,16,32,.75);border-radius:3px;
  background:radial-gradient(circle at 95% 14%,#ffab1f 0 1.8px,transparent 2.3px),radial-gradient(circle at 95% 86%,#ffab1f 0 1.8px,transparent 2.3px),
    radial-gradient(circle at 88% 50%,#8b93a0 0 2.6px,transparent 3px),linear-gradient(to right,transparent 75%,rgba(11,16,32,.22) 75% 77%,transparent 77%),
    linear-gradient(to right,#6f7886 0 1.5px,#e2e6eb 1.5px calc(100% - 1.5px),#6f7886 calc(100% - 1.5px)) 48% 50%/15% 42% no-repeat,
    linear-gradient(#6f7886,#6f7886) 48% 50%/15% calc(42% + 3px) no-repeat,#fff}
.vehicle.target[data-ride="icecream"] .ride-deco{display:block;left:21%;top:50%;width:21px;height:21px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid var(--ink);
  background:radial-gradient(circle at 42% 42%,#fffdf6 0 12%,#d9c49a 14% 22%,#fffdf6 24% 38%,#d9c49a 40% 48%,#fffdf6 50% 62%,#c98a3e 64% 80%,#a86a28 82%)}
.vehicle.target.mini[data-ride="icecream"] .ride-deco{left:28%;width:16px;height:16px}
/* Hoboken Cab: a yellow sedan (Hoboken's licensed cabs are yellow) with the city's round seal on each front door
   and the roof light: a dark box with its lit panel, as the city's rules ask */
.vehicle.target[data-ride="taxi"] .car-body{background:#ffc21a;
  background-image:radial-gradient(circle at 65% 4.3px,#fdf6e3 0 2.2px,#14161c 2.5px 3.6px,transparent 3.9px),radial-gradient(circle at 65% calc(100% - 4.3px),#fdf6e3 0 2.2px,#14161c 2.5px 3.6px,transparent 3.9px)}
.vehicle.target.mini[data-ride="taxi"] .car-body{background-image:none}
.vehicle.target.mini[data-ride="taxi"] .ride-deco{left:34%}
.vehicle.target[data-ride="taxi"] .car-roof{top:23%;height:54%;background:rgba(255,255,255,.28)}
.vehicle.target[data-ride="taxi"] .ride-deco{display:block;left:50%;top:50%;width:10px;height:62%;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:3px;
  background:linear-gradient(to right,#23252d 0 25%,#ffe27a 25% 75%,#23252d 75%);box-shadow:0 0 6px rgba(255,226,122,.85)}
/* Garden State Trooper: an NJ State Police cruiser: all white, the French blue and gold wedge on the front doors,
   the red and blue light bar across the roof, and a black push bumper */
.vehicle.target[data-ride="cop"] .car-body{background:#f4f6f9;
  background-image:linear-gradient(110deg,transparent 56%,#f2b705 56% 61%,#1d4ea0 61% 76%,transparent 76%),linear-gradient(70deg,transparent 56%,#f2b705 56% 61%,#1d4ea0 61% 76%,transparent 76%);
  background-size:100% 22%;background-position:0 0,0 100%;background-repeat:no-repeat}
.vehicle.target[data-ride="cop"] .car-roof{top:22%;height:56%;background:#fff}
.vehicle.target[data-ride="cop"] .ride-deco{display:block;left:49%;top:50%;width:10px;height:80%;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:4px;
  background:linear-gradient(to bottom,#ff2d3d 50%,#2d6bff 50%);animation:copLights .7s steps(1) infinite}
@keyframes copLights{50%{background:linear-gradient(to bottom,#5b0f18 50%,#bcd3ff 50%);box-shadow:0 8px 10px rgba(80,140,255,.8)}0%{box-shadow:0 -8px 10px rgba(255,45,61,.8)}}
.vehicle.target[data-ride="cop"] .car-lights::after{content:"";position:absolute;right:-3px;top:10%;bottom:10%;width:4px;border-radius:2px;background:#1b1d24}
/* School Bus: school bus yellow from above: the roof with its two escape hatches and the red flashers at its
   corners, black rub rails down the sides, the hood out front, and the red stop arm on the driver's side */
.vehicle.target[data-ride="schoolbus"] .car-body{border-radius:6px 9px 9px 6px;background:#ffb81c;
  background-image:linear-gradient(to bottom,transparent 7%,#14161c 7% 12%,transparent 12% 88%,#14161c 88% 93%,transparent 93%),linear-gradient(to right,transparent 82%,rgba(120,70,0,.14) 82%)}
.vehicle.target[data-ride="schoolbus"] .car-roof,.vehicle.target.bus[data-ride="schoolbus"] .car-roof,.vehicle.target.mini[data-ride="schoolbus"] .car-roof{
  left:3%;width:77%;top:17%;height:66%;border:0;border-left:3px solid rgba(11,16,32,.7);border-right:6px solid rgba(11,16,32,.78);border-radius:3px;
  background:radial-gradient(circle at calc(100% - 3px) 3px,#ff2d3d 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#ff2d3d 0 2px,transparent 2.5px),
    radial-gradient(circle at 3px 3px,#ff2d3d 0 2px,transparent 2.5px),radial-gradient(circle at 3px calc(100% - 3px),#ff2d3d 0 2px,transparent 2.5px),
    linear-gradient(to right,#14161c 0 2px,#fff3cf 2px calc(100% - 2px),#14161c calc(100% - 2px)) 30% 50%/13% 38% no-repeat,linear-gradient(#14161c,#14161c) 30% 50%/13% calc(38% + 4px) no-repeat,
    linear-gradient(to right,#14161c 0 2px,#fff3cf 2px calc(100% - 2px),#14161c calc(100% - 2px)) 72% 50%/13% 38% no-repeat,linear-gradient(#14161c,#14161c) 72% 50%/13% calc(38% + 4px) no-repeat,#ffc53d}
.vehicle.target.mini[data-ride="schoolbus"] .car-roof{background:radial-gradient(circle at calc(100% - 3px) 3px,#ff2d3d 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 3px) calc(100% - 3px),#ff2d3d 0 2px,transparent 2.5px),
    linear-gradient(to right,#14161c 0 2px,#fff3cf 2px calc(100% - 2px),#14161c calc(100% - 2px)) 40% 50%/30% 38% no-repeat,linear-gradient(#14161c,#14161c) 40% 50%/30% calc(38% + 4px) no-repeat,#ffc53d}
.vehicle.target[data-ride="schoolbus"] .ride-deco{display:block;left:66%;top:-6px;width:10px;height:10px;background:#fdf6e3;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.vehicle.target[data-ride="schoolbus"] .ride-deco::after{content:"";position:absolute;inset:1.5px;background:#e31b23;clip-path:inherit}
.vehicle.target.mini[data-ride="schoolbus"] .ride-deco{left:44%}
/* Clown Car: the circus's tiny rounded car, red with white and yellow polka dots, the sunroof open with three
   clowns' wigs squeezed in, and a big red nose on the grille */
.vehicle.target[data-ride="clown"] .car-body{border-radius:999px;background:#ff4d5e;
  background-image:radial-gradient(circle,#fff 0 2.3px,transparent 2.7px),radial-gradient(circle,#ffd23f 0 2.3px,transparent 2.7px);background-size:12px 12px;background-position:0 0,6px 6px}
.vehicle.target[data-ride="clown"] .car-roof{left:18%;width:54%;top:14%;height:72%;border:2px solid var(--ink);border-radius:999px;
  background:radial-gradient(circle at 20% 50%,#ff8a1f 0 5.5px,#0b1020 6px 7px,transparent 7.5px),radial-gradient(circle at 50% 50%,#3ddc84 0 5.5px,#0b1020 6px 7px,transparent 7.5px),
    radial-gradient(circle at 80% 50%,#4f7dff 0 5.5px,#0b1020 6px 7px,transparent 7.5px),#2a1f3d}
.vehicle.target.mini[data-ride="clown"] .car-roof{left:14%;width:50%;background:radial-gradient(circle at 30% 50%,#ff8a1f 0 5px,#0b1020 5.5px 6.5px,transparent 7px),radial-gradient(circle at 72% 50%,#3ddc84 0 5px,#0b1020 5.5px 6.5px,transparent 7px),#2a1f3d}
.vehicle.target[data-ride="clown"] .ride-deco{display:block;right:-7px;top:50%;width:13px;height:13px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffb3ba 0 20%,#e8142b 24%);border:2px solid var(--ink)}
/* Pizza Delivery: an everyday sedan on a run, the lit car-topper sign across its roof in the Italian flag's
   green, white and red, and a pie box riding on the trunk */
.vehicle.target[data-ride="pizza"] .car-body{background:#3a4150;background-image:linear-gradient(to bottom,rgba(255,255,255,.12),transparent 45%)}
.vehicle.target[data-ride="pizza"] .car-roof{background:rgba(255,255,255,.16)}
.vehicle.target[data-ride="pizza"] .ride-deco{display:block;left:54%;top:50%;width:10px;height:80%;transform:translate(-50%,-50%);border:2px solid var(--ink);border-radius:4px;
  background:linear-gradient(to bottom,#1f9d55 0 33%,#fff 33% 67%,#e53935 67%);box-shadow:0 0 7px rgba(255,240,200,.75)}
.vehicle.target[data-ride="pizza"] .car-body::before{content:"";position:absolute;left:4%;top:50%;width:17%;height:52%;transform:translateY(-50%);border:1.5px solid var(--ink);border-radius:2px;
  background:radial-gradient(circle at 38% 38%,#c62828 0 1.3px,transparent 1.7px),radial-gradient(circle at 62% 45%,#c62828 0 1.3px,transparent 1.7px),radial-gradient(circle at 45% 64%,#c62828 0 1.3px,transparent 1.7px),radial-gradient(circle closest-side,#ffd66b 0 62%,#d58f3a 66% 86%,transparent 90%),#fbf7ee}
.vehicle.target.bus[data-ride="pizza"] .car-body::before{width:12%}
.vehicle.target.mini[data-ride="pizza"] .car-body::before{display:none}
/* Duck Boat: an amphibious DUKW tour boat: a boat hull with a pointed bow, the striped canopy over the benches, six
   wheels showing under the hull, and a rubber duck riding up front */
.vehicle.target[data-ride="duck"] .car-body{border-radius:7px 50% 50% 7px/7px 50% 50% 7px;background:#2d7fd0;background-image:linear-gradient(to bottom,#f4f6fa 0 12%,transparent 12% 88%,#f4f6fa 88%)}
.vehicle.target[data-ride="duck"] .car-body::after{right:3%}
.vehicle.target[data-ride="duck"] .car-roof,.vehicle.target.bus[data-ride="duck"] .car-roof,.vehicle.target.mini[data-ride="duck"] .car-roof{left:5%;width:55%;top:17%;height:66%;border:0;border-right:4px solid rgba(11,16,32,.72);border-radius:3px;
  background:repeating-linear-gradient(to bottom,#fdf6e3 0 16.66%,#e8413a 16.66% 33.33%);box-shadow:0 0 0 1.5px rgba(11,16,32,.55)}
.vehicle.target.mini[data-ride="duck"] .car-roof{width:50%}
.vehicle.target[data-ride="duck"] .ride-deco{display:block;z-index:-1;left:0;right:0;top:-4px;bottom:-4px}
.vehicle.target[data-ride="duck"] .ride-deco::before,.vehicle.target[data-ride="duck"] .ride-deco::after{content:"";position:absolute;top:0;bottom:0;border-radius:3px}
.vehicle.target[data-ride="duck"] .ride-deco::before{left:12%;width:26%;background:linear-gradient(to right,#3a3e48 0 42%,transparent 42% 58%,#3a3e48 58%)}
.vehicle.target[data-ride="duck"] .ride-deco::after{left:62%;width:11%;background:#3a3e48}
.vehicle.target[data-ride="duck"] .car-lights{display:none}
.vehicle.target[data-ride="duck"] .car-body::before{content:"";position:absolute;z-index:2;left:61%;top:50%;width:16px;height:13px;transform:translateY(-50%);
  background:radial-gradient(circle at 7px 45%,#0b1020 0 1.1px,transparent 1.5px),radial-gradient(circle at 5.5px 50%,#ffd23f 0 4.3px,#0b1020 4.6px 5.8px,transparent 6.1px),
    linear-gradient(to right,#0b1020 0 1px,#ff8a1f 1px) 10.5px 50%/5.5px 5px no-repeat}
.vehicle.target.bus[data-ride="duck"] .car-body::before{left:64%}
.vehicle.target.mini[data-ride="duck"] .car-body::before{display:none}
/* NJ Transit Train: the ALP-46 electric that hauls the Multilevels into Penn, from above: a silver body with the
   blue-to-magenta-to-orange stripe fading toward the nose, the dark roof between its two cabs, two red pantographs */
.vehicle.target[data-ride="train"] .car-body{border-radius:12px/45%;background:#d4d9e0;
  background-image:linear-gradient(to right,transparent 92%,#1a1f2c 92%),linear-gradient(to right,#1f4ea3 0,#6c3aa6 26%,#b0288c 50%,#f47a20 76%,#f47a20 84%,rgba(244,122,32,0) 92%),linear-gradient(to right,#1f4ea3 0,#6c3aa6 26%,#b0288c 50%,#f47a20 76%,#f47a20 84%,rgba(244,122,32,0) 92%),
    linear-gradient(to bottom,#aab1bc,#eef1f5 30% 70%,#aab1bc);
  background-size:100% 100%,100% 15%,100% 15%,100% 100%;background-position:0 0,0 7%,0 93%,0 0;background-repeat:no-repeat}
.vehicle.target[data-ride="train"] .car-roof,.vehicle.target.bus[data-ride="train"] .car-roof,.vehicle.target.mini[data-ride="train"] .car-roof{left:7%;width:79%;top:28%;height:44%;border:0;
  border-left:4px solid #1a1f2c;border-right:5px solid #1a1f2c;border-radius:3px;background:repeating-linear-gradient(to right,#626873 0 11px,#4d525c 11px 13px)}
.vehicle.target[data-ride="train"] .ride-deco{display:block;left:21%;right:30%;top:17%;bottom:17%;
  background:linear-gradient(#e0262c,#e0262c) 0 50%/3px 100% no-repeat,linear-gradient(#e0262c,#e0262c) 100% 50%/3px 100% no-repeat,
    linear-gradient(#e0262c,#e0262c) 0 50%/32% 3px no-repeat,linear-gradient(#e0262c,#e0262c) 100% 50%/32% 3px no-repeat}
.vehicle.target.mini[data-ride="train"] .ride-deco{left:16%;right:40%}
/* Monster Truck: a pickup body riding high on four giant tyres that stick out at every corner (from above, a tyre
   is a tread-ribbed block), the cab up front and a roll bar over the bed */
.vehicle.h.target[data-ride="monster"] .car-body{inset:25% 12% 29%;border-radius:7px;
  background:linear-gradient(#b6e35a,#b6e35a) 45% 50%/5% 100% no-repeat,linear-gradient(#3d1a86,#3d1a86) 8% 50%/34% 60% no-repeat,#7b3fe4}
.vehicle.target[data-ride="monster"] .car-roof,.vehicle.target.bus[data-ride="monster"] .car-roof,.vehicle.target.mini[data-ride="monster"] .car-roof{left:51%;width:24%;top:10%;height:80%;border-left-width:3px;border-right-width:5px;border-radius:3px;background:rgba(255,255,255,.24)}
/* The tyres sit centred on the body as it looks, drop shadow included (4px, 3px on a phone), so they ride half of it lower */
.vehicle.target[data-ride="monster"] .ride-deco{display:block;z-index:-1;inset:-56% -5.5%;translate:0 2px}
.vehicle.target[data-ride="monster"] .ride-deco::before,.vehicle.target[data-ride="monster"] .ride-deco::after{content:"";position:absolute;top:0;bottom:0;width:27%;border:2px solid var(--ink);border-radius:6px;
  background:repeating-linear-gradient(to right,#5a606c 0 3px,#2a2d35 3px 6px)}
.vehicle.target[data-ride="monster"] .ride-deco::before{left:0}
.vehicle.target[data-ride="monster"] .ride-deco::after{right:0}
/* at length 3 each tyre keeps its length-2 size, so the pair at each end still reads as one big tyre, not a long block */
.vehicle.target.bus[data-ride="monster"] .ride-deco::before,.vehicle.target.bus[data-ride="monster"] .ride-deco::after{width:18%}
/* Jersey Devil Hot Rod: a chopped black roadster, flames licking back from the nose, a chrome blower through the
   hood, fat slicks out back and skinny wheels up front, devil horns at the windshield and the Devil's forked tail */
.vehicle.h.target[data-ride="devil"] .car-body{inset:22% 8% 26%;border-radius:7px 12px 12px 7px;background:#2b1320;
  box-shadow:inset 0 0 0 2px #ff4d5e,inset 0 3px 0 rgba(255,255,255,.32),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--ink),0 0 16px rgba(255,120,90,.45);
  background-image:radial-gradient(ellipse 55% 26% at 100% 18%,#ffd23f 0 25%,#ff6b3d 32% 62%,transparent 66%),radial-gradient(ellipse 55% 26% at 100% 82%,#ffd23f 0 25%,#ff6b3d 32% 62%,transparent 66%),
    radial-gradient(ellipse 38% 20% at 100% 50%,#ff4d5e 0 55%,transparent 60%)}
@media (max-width:640px){.vehicle.h.target[data-ride="devil"] .car-body{box-shadow:inset 0 0 0 2px #ff4d5e,inset 0 2px 0 rgba(255,255,255,.32),inset 0 -3px 0 rgba(0,0,0,.2),0 3px 0 var(--ink),0 0 12px rgba(255,120,90,.45)}}
.vehicle.target[data-ride="devil"] .car-roof,.vehicle.target.bus[data-ride="devil"] .car-roof,.vehicle.target.mini[data-ride="devil"] .car-roof{left:16%;width:32%;top:12%;height:76%;border-left-width:3px;border-right-width:5px;border-radius:4px;background:rgba(170,30,50,.55)}
.vehicle.target[data-ride="devil"] .car-lights::before,.vehicle.target[data-ride="devil"] .car-lights::after{content:"";position:absolute;right:-6px;width:11px;height:10px;background:#e8142b}
.vehicle.target[data-ride="devil"] .car-lights::before{bottom:100%;clip-path:polygon(0 100%,100% 0,50% 100%)}
.vehicle.target[data-ride="devil"] .car-lights::after{top:100%;clip-path:polygon(0 0,100% 100%,50% 0)}
.vehicle.target[data-ride="devil"] .car-roof::after{content:"";position:absolute;right:calc(150% + 1px);top:4%;height:92%;width:15px;background:#e8142b;
  clip-path:polygon(0 50%,36% 12%,29% 42%,62% 28%,100% 42%,100% 58%,62% 44%,29% 58%,36% 88%)}
.vehicle.target[data-ride="devil"] .car-body::before{content:"";position:absolute;left:63%;top:50%;width:13%;height:58%;transform:translate(-50%,-50%);border:1.5px solid var(--ink);border-radius:2px;
  background:linear-gradient(#1b1d22,#1b1d22) 50% 50%/55% 42% no-repeat,linear-gradient(to bottom,#f2f4f7,#9aa2ae)}
.vehicle.target[data-ride="devil"] .ride-deco{display:block;z-index:-1;inset:-44% -2% -44% 3%;translate:0 2px}
@media (max-width:640px){.vehicle.target:is([data-ride="monster"],[data-ride="devil"]) .ride-deco{translate:0 1.5px}}
.vehicle.target[data-ride="devil"] .ride-deco::before,.vehicle.target[data-ride="devil"] .ride-deco::after{content:"";position:absolute;border:2px solid var(--ink);border-radius:5px;background:repeating-linear-gradient(to right,#5a606c 0 3px,#2a2d35 3px 6px)}
.vehicle.target[data-ride="devil"] .ride-deco::before{left:0;width:25%;top:0;bottom:0}
.vehicle.target[data-ride="devil"] .ride-deco::after{right:7%;width:11%;top:14%;bottom:14%}
@media (prefers-reduced-motion:reduce){.vehicle.target[data-ride="cop"] .ride-deco{animation:none}}

/* ---- new rides (artist 2) ---- */
/* The star-track rides past 700: seen from above, nose to the right. --k scales a length along the car so a part
   keeps its real size in cells (1 at length 2, about 2 on a one-cell .mini, 2/3 on a length-3 .bus). */
.vehicle.target:is([data-ride="tram"],[data-ride="jitney"],[data-ride="woody"],[data-ride="plow"],[data-ride="firetruck"],[data-ride="dragster"],[data-ride="cadillac"],[data-ride="boat"],[data-ride="pontoon"],[data-ride="limo"],[data-ride="ferry"],[data-ride="hovercraft"]){--k:1}
.vehicle.target.mini:is([data-ride="tram"],[data-ride="jitney"],[data-ride="woody"],[data-ride="plow"],[data-ride="firetruck"],[data-ride="dragster"],[data-ride="cadillac"],[data-ride="boat"],[data-ride="pontoon"],[data-ride="limo"],[data-ride="ferry"],[data-ride="hovercraft"]){--k:1.8}
.vehicle.target.bus:is([data-ride="tram"],[data-ride="jitney"],[data-ride="woody"],[data-ride="plow"],[data-ride="firetruck"],[data-ride="dragster"],[data-ride="cadillac"],[data-ride="boat"],[data-ride="pontoon"],[data-ride="limo"],[data-ride="ferry"],[data-ride="hovercraft"]){--k:.667}

/* Wildwood tram car: the yellow tractor with its royal-blue skirt, towing yellow open cars under blue canopies with a
   white fringe (as on the boardwalk today: the canopies are blue, the cars and tractor yellow) */
.vehicle.target[data-ride="tram"]{--n:2}
.vehicle.target.mini[data-ride="tram"]{--n:1}
.vehicle.target.bus[data-ride="tram"]{--n:3}
.vehicle.target[data-ride="tram"] .car-body{border-radius:5px;background:#ffd200;background-image:linear-gradient(to bottom,#1f4fbf 0 9%,transparent 9% 91%,#1f4fbf 91%)}
.vehicle.target[data-ride="tram"] .car-roof,.vehicle.target.bus[data-ride="tram"] .car-roof,.vehicle.target.mini[data-ride="tram"] .car-roof{
  left:2%;width:calc(97% - 24% * var(--k));top:22%;height:56%;border:0;border-radius:2px;
  background:linear-gradient(to right,#ffd200 0 10%,transparent 10% 80%,#ffd200 80% 90%,#2a2f3a 90%) 0 0/calc(100% / var(--n)) 100% repeat-x,
    radial-gradient(circle at 50% 0,#f4f6fa 0 1.7px,transparent 2.2px) 0 0/5px 100% repeat-x,radial-gradient(circle at 50% 100%,#f4f6fa 0 1.7px,transparent 2.2px) 0 0/5px 100% repeat-x,
    linear-gradient(to bottom,#2d62dc,#1f4fbf)}
.vehicle.target[data-ride="tram"] .ride-deco{display:block;right:3%;width:calc(19% * var(--k));top:14%;bottom:14%;border:1.5px solid rgba(11,16,32,.45);border-right:3px solid #1b2640;border-radius:3px;background:#ffe14d}
.vehicle.target[data-ride="tram"] .car-lights{top:12%;bottom:12%}

/* Atlantic City jitney: today's lime-green-and-white shuttle: the green cutaway cab and short hood, the lit route
   sign over the windshield, a white box body with roof hatches, and the green stripe down both sides */
.vehicle.target[data-ride="jitney"] .car-body{border-radius:6px 11px 11px 6px;background:#f5f7f2;
  background-image:linear-gradient(to right,transparent calc(100% - 7% * var(--k)),#5cb81f 0),linear-gradient(to right,transparent calc(100% - 38% * var(--k)),#76cf30 0),
    linear-gradient(to bottom,#76cf30 0 9%,transparent 9% 91%,#76cf30 91%)}
.vehicle.target[data-ride="jitney"] .car-body::after{right:calc(17% * var(--k))}
.vehicle.target[data-ride="jitney"] .car-roof,.vehicle.target.bus[data-ride="jitney"] .car-roof,.vehicle.target.mini[data-ride="jitney"] .car-roof{
  left:4%;width:calc(94% - 40% * var(--k));top:17%;height:66%;border:0;border-left:3px solid rgba(11,16,32,.7);border-radius:3px;
  background:linear-gradient(#e3e7ee,#e3e7ee) 24% 50%/20% 46% no-repeat,linear-gradient(#8d95a3,#8d95a3) 24% 50%/calc(20% + 3px) calc(46% + 3px) no-repeat,
    linear-gradient(#e3e7ee,#e3e7ee) 76% 50%/20% 46% no-repeat,linear-gradient(#8d95a3,#8d95a3) 76% 50%/calc(20% + 3px) calc(46% + 3px) no-repeat,#fbfcf9}
.vehicle.target.mini[data-ride="jitney"] .car-roof{background:linear-gradient(#e3e7ee,#e3e7ee) 50% 50%/40% 46% no-repeat,linear-gradient(#8d95a3,#8d95a3) 50% 50%/calc(40% + 3px) calc(46% + 3px) no-repeat,#fbfcf9}
.vehicle.target[data-ride="jitney"] .ride-deco{display:block;right:calc(7% * var(--k));width:calc(6% * var(--k));top:11%;bottom:11%;border-radius:2px 5px 5px 2px;
  background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.35) 30% 42%,transparent 42%),#1b2640}
.vehicle.target[data-ride="jitney"] .ride-deco::before{content:"";position:absolute;right:100%;top:16%;bottom:16%;width:max(4px,70%);border-radius:1px;border:1px solid var(--ink);
  background:repeating-linear-gradient(to bottom,#ffb627 0 2px,#3a2606 2px 3.5px);box-shadow:0 0 4px rgba(255,182,39,.85)}

/* Surf woody: a '40s wood-bodied wagon: varnished ash frame over honey panels, a sea-green hood, and the longboard
   strapped to the roof rack */
.vehicle.target[data-ride="woody"] .car-body{border-radius:8px 14px 14px 8px/8px 40% 40% 8px;background:#c8904a;
  background-image:linear-gradient(to right,transparent calc(100% - 25% * var(--k)),#7fc3a8 0),
    linear-gradient(to bottom,transparent 11%,#7a4a22 11% 16%,transparent 16% 84%,#7a4a22 84% 89%,transparent 89%),
    repeating-linear-gradient(to right,#7a4a22 0 2px,transparent 2px calc(15% * var(--k))),
    linear-gradient(to bottom,#dda866,#c08445 50%,#b27a3c)}
.vehicle.target[data-ride="woody"] .car-roof,.vehicle.target.bus[data-ride="woody"] .car-roof,.vehicle.target.mini[data-ride="woody"] .car-roof{
  left:5%;width:calc(93% - 35% * var(--k));top:17%;height:66%;border:0;border-left:3px solid rgba(11,16,32,.7);border-right:5px solid #34506b;border-radius:4px;background:#3a2c24}
.vehicle.target[data-ride="woody"] .ride-deco{display:block;z-index:2;left:calc(-3% * var(--k));right:calc(29% * var(--k));top:33%;height:34%;border:1.5px solid var(--ink);
  border-radius:40% 55% 55% 40%/50%;background:linear-gradient(to bottom,transparent 40%,#e0283c 40% 60%,transparent 60%),#fff3c4}
.vehicle.target[data-ride="woody"] .ride-deco::before,.vehicle.target[data-ride="woody"] .ride-deco::after{content:"";position:absolute;top:-60%;bottom:-60%;width:2px;background:#15110e}
.vehicle.target[data-ride="woody"] .ride-deco::before{left:22%}
.vehicle.target[data-ride="woody"] .ride-deco::after{left:68%}

/* Snowplow: a highway-orange dump truck: the angled steel blade on the nose, the cab, an amber beacon, a bed of
   road salt and the spreader at the tail */
.vehicle.target[data-ride="plow"] .car-body{border-radius:5px 7px 7px 5px;
  background:repeating-linear-gradient(to bottom,#4b515c 0 2px,#8d95a3 2px 4px) 0 0/calc(5% * var(--k)) 100% no-repeat,#ff7a00}
.vehicle.target[data-ride="plow"] .car-body::before{content:"";position:absolute;left:calc(6% * var(--k));right:calc(40% * var(--k));top:11%;bottom:11%;border-radius:3px;
  border:2.5px solid #c55800;background:radial-gradient(circle,#9aa6b6 .8px,transparent 1.3px) 0 0/5px 4px,radial-gradient(circle,#b3bdca .7px,transparent 1.2px) 2px 2px/7px 6px,radial-gradient(ellipse 60% 70% at 50% 50%,#fbfdff,#dfe5ee 70%,#c3ccd8)}
.vehicle.target[data-ride="plow"] .car-body::after{right:calc(15% * var(--k))}
.vehicle.target[data-ride="plow"] .car-roof,.vehicle.target.bus[data-ride="plow"] .car-roof,.vehicle.target.mini[data-ride="plow"] .car-roof{
  left:auto;right:calc(9% * var(--k));width:calc(25% * var(--k));top:10%;height:80%;border:0;border-left:3px solid rgba(11,16,32,.75);border-right:4px solid #1b2640;border-radius:3px;background:#ff8f26}
.vehicle.target[data-ride="plow"] .car-roof::after{content:"";position:absolute;z-index:2;right:100%;top:50%;width:9px;height:9px;margin-right:1px;transform:translateY(-50%);border-radius:50%;
  border:1.5px solid var(--ink);background:radial-gradient(circle at 35% 35%,#fff3b0 0 20%,#ffb000 45%,#e07800);box-shadow:0 0 7px 2px rgba(255,176,0,.85);animation:plowBeacon .8s steps(1) infinite}
@keyframes plowBeacon{50%{background:radial-gradient(circle at 35% 35%,#ffe28a 0 15%,#b86a00 50%,#7a4400);box-shadow:none}}
.vehicle.target[data-ride="plow"] .ride-deco{display:block;z-index:2;right:0;width:calc(8% * var(--k));top:-13%;bottom:-3%;border:2px solid var(--ink);border-right-width:3px;border-radius:4px 2px 2px 4px;
  transform:rotate(9deg);background:linear-gradient(to right,#5b626e,#e6e9ee 55%,#9aa2ae)}
.vehicle.target[data-ride="plow"] .car-lights{display:none}

/* Ladder truck: fire-engine red, the aerial ladder laid down the middle from its turntable, a white cab roof with
   a red light bar, and diamond-plate running boards down both sides */
.vehicle.target[data-ride="firetruck"] .car-body{border-radius:5px 8px 8px 5px;
  background:linear-gradient(to right,transparent calc(100% - 26% * var(--k)),#f4f3ee 0 calc(100% - 4% * var(--k)),transparent 0),
    repeating-linear-gradient(45deg,#8d95a3 0 1px,#e3e7ec 1px 3px) 0 0/100% 12% no-repeat,repeating-linear-gradient(45deg,#8d95a3 0 1px,#e3e7ec 1px 3px) 0 100%/100% 12% no-repeat,#d0142a}
.vehicle.target[data-ride="firetruck"] .car-body::before{content:"";position:absolute;left:calc(4% * var(--k));width:calc(22% * var(--k));top:17%;bottom:17%;border-radius:50%;
  border:2px solid var(--ink);background:radial-gradient(circle,#4a505c 0 30%,#aab1bd 34%)}
.vehicle.target[data-ride="firetruck"] .car-body::after{right:calc(11% * var(--k))}
.vehicle.target[data-ride="firetruck"] .car-roof,.vehicle.target.bus[data-ride="firetruck"] .car-roof,.vehicle.target.mini[data-ride="firetruck"] .car-roof{
  z-index:1;left:calc(8% * var(--k));right:calc(13% * var(--k));width:auto;top:31%;height:38%;border:0;border-top:2.5px solid #eef1f5;border-bottom:2.5px solid #eef1f5;border-radius:2px;
  box-shadow:0 0 0 1.5px var(--ink);background:repeating-linear-gradient(to right,#eef1f5 0 2px,#3a3f4a 2px 6px)}
.vehicle.target[data-ride="firetruck"] .ride-deco{display:block;z-index:2;right:calc(3% * var(--k));width:max(4px,calc(5% * var(--k)));top:8%;bottom:8%;border:1.5px solid var(--ink);border-radius:3px;
  background:linear-gradient(to bottom,#ff2d3d 0 38%,#fff 38% 62%,#ff2d3d 62%);animation:ladderLights .6s steps(1) infinite}
@keyframes ladderLights{50%{background:linear-gradient(to bottom,#7a0a14 0 38%,#fff 38% 62%,#7a0a14 62%);box-shadow:0 0 8px rgba(255,45,61,.9)}}
.vehicle.target[data-ride="firetruck"] .car-lights{right:1px}

/* Englishtown dragster: a rear-engine top fueler: a needle body tapering to the nose, the huge rear slicks, the chrome
   blower and headers ahead of them, the high rear wing, tiny front wheels out at the nose. The ink outline is a
   box-shadow ring, so the parts placed in % of the body keep their size at every cell size. */
.vehicle.target.mini[data-ride="dragster"]{--k:1.7}
.vehicle.h.target[data-ride="dragster"] .car-body{inset:36% 2% 40% 17%;border:0;border-radius:4px 100% 100% 4px/4px 50% 50% 4px;
  background:linear-gradient(to bottom,#ff6b1a 0 20%,#ffc21a 20% 80%,#ff6b1a 80%);box-shadow:0 0 0 2px var(--ink),0 3px 0 1px var(--ink),0 0 12px 2px rgba(255,120,90,.5)}
.vehicle.h.target.mini[data-ride="dragster"] .car-body{inset:36% 3% 40% 20%}
.vehicle.target[data-ride="dragster"] .car-body::after{right:auto;left:calc(33% * var(--k))}
.vehicle.target.mini[data-ride="dragster"] .car-body::after{left:calc(28% * var(--k))}
.vehicle.target[data-ride="dragster"] .ride-deco{display:block;z-index:1;left:calc(-6% * var(--k));width:calc(25% * var(--k));top:-125%;bottom:-125%}
.vehicle.target[data-ride="dragster"] .ride-deco::before,.vehicle.target[data-ride="dragster"] .ride-deco::after{content:"";position:absolute;left:0;right:0;height:28.6%;
  border:2px solid var(--ink);border-radius:5px;background:repeating-linear-gradient(to right,#6b717d 0 2px,#4a4f5a 2px 5px);box-shadow:inset 0 2px 0 rgba(255,255,255,.16)}
.vehicle.target[data-ride="dragster"] .ride-deco::before{top:0}
.vehicle.target[data-ride="dragster"] .ride-deco::after{bottom:0}
.vehicle.target[data-ride="dragster"] .car-body::before{content:"";position:absolute;z-index:2;left:calc(-17% * var(--k));width:calc(8% * var(--k));top:-135%;bottom:-135%;border:2px solid var(--ink);border-radius:3px;
  background:linear-gradient(to bottom,#e0283c 0 14%,#ffc21a 14% 22%,#4a4f5a 22% 78%,#ffc21a 78% 86%,#e0283c 86%)}
.vehicle.target.mini[data-ride="dragster"] .car-body::before{left:calc(-14% * var(--k))}
.vehicle.target[data-ride="dragster"] .car-roof,.vehicle.target.bus[data-ride="dragster"] .car-roof,.vehicle.target.mini[data-ride="dragster"] .car-roof{
  z-index:1;left:calc(19% * var(--k));width:calc(11% * var(--k));top:-55%;height:210%;border:1.5px solid var(--ink);border-radius:3px;
  background:linear-gradient(to right,transparent 30%,#15151b 30% 70%,transparent 70%) 50% 50%/100% 34% no-repeat,linear-gradient(to bottom,#f1f3f7,#9aa2ae)}
.vehicle.target[data-ride="dragster"] .car-roof::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:-40%;bottom:-40%;
  background:repeating-linear-gradient(to right,#c9ced6 0 2px,transparent 2px 4px)}
.vehicle.target.mini[data-ride="dragster"] .car-roof{display:none}
.vehicle.target[data-ride="dragster"] .car-lights{z-index:-1;right:calc(9% * var(--k));width:calc(5% * var(--k));top:-110%;bottom:-110%;
  background:linear-gradient(#9aa2ae,#9aa2ae) 50% 0/2px 100% no-repeat}
.vehicle.target[data-ride="dragster"] .car-lights::before,.vehicle.target[data-ride="dragster"] .car-lights::after{content:"";position:absolute;left:-1px;right:-1px;height:32%;
  border:1.5px solid var(--ink);border-radius:2px;background:#4a4f5a}
.vehicle.target[data-ride="dragster"] .car-lights::before{top:0}
.vehicle.target[data-ride="dragster"] .car-lights::after{bottom:0}

/* Pink Cadillac: a '59 convertible with the top down: bubblegum paint, cream leather benches, the wraparound
   windshield, chrome bumpers and side trim, and the famous tail fins with twin bullet lights; a glint for the prize */
.vehicle.h.target[data-ride="cadillac"] .car-body{inset:13% 6px 17% 6px;border-radius:10px 16px 16px 10px/10px 45% 45% 10px;background:#ff8fc8;
  background-image:linear-gradient(to bottom,transparent 9%,#f4f6fa 9% 13%,transparent 13% 87%,#f4f6fa 87% 91%,transparent 91%),
    linear-gradient(to bottom,rgba(255,255,255,.3),transparent 40%,rgba(160,20,90,.18))}
.vehicle.target[data-ride="cadillac"] .car-body::before{content:"";position:absolute;z-index:2;left:-2px;top:8%;bottom:8%;width:5px;border:1.5px solid var(--ink);border-radius:4px 2px 2px 4px;
  background:linear-gradient(to right,#9aa2ae,#f4f6fa 60%,#c9ced6)}
.vehicle.target[data-ride="cadillac"] .car-lights{z-index:2;right:-2px;top:8%;bottom:8%;width:5px;border:1.5px solid var(--ink);border-radius:2px 4px 4px 2px;
  background:linear-gradient(to right,#c9ced6,#f4f6fa 40%,#9aa2ae)}
.vehicle.target[data-ride="cadillac"] .car-roof,.vehicle.target.bus[data-ride="cadillac"] .car-roof,.vehicle.target.mini[data-ride="cadillac"] .car-roof{
  left:calc(22% * var(--k));width:calc(100% - 50% * var(--k));top:17%;height:66%;border:0;border-right:4px solid #9fd2ee;border-radius:5px 45% 45% 5px/5px 30% 30% 5px;
  box-shadow:0 0 0 1.5px var(--ink);
  background:repeating-linear-gradient(to bottom,#fbf3e3 0 3px,#e3d3b4 3px 4px) 6% 50%/34% 84% no-repeat,repeating-linear-gradient(to bottom,#fbf3e3 0 3px,#e3d3b4 3px 4px) 82% 50%/28% 84% no-repeat,
    radial-gradient(circle at 70% 26%,transparent 0 3px,#15151b 3.5px 5px,transparent 5.5px),#c05a8e}
.vehicle.target.mini[data-ride="cadillac"] .car-roof{left:24%;width:44%}
.vehicle.target.mini[data-ride="cadillac"] .car-body::before{top:28%;bottom:28%}
.vehicle.target[data-ride="cadillac"] .ride-deco{display:block;z-index:1;left:-5px;width:calc(26% * var(--k));top:-1px;bottom:-1px;
  filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink))}
.vehicle.target[data-ride="cadillac"] .ride-deco::before,.vehicle.target[data-ride="cadillac"] .ride-deco::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 5% 12%,#ff2d3d 0 2px,transparent 2.5px),radial-gradient(circle at 5% 88%,#ff2d3d 0 2px,transparent 2.5px),linear-gradient(to right,#ffc2e2,#ff8fc8)}
.vehicle.target[data-ride="cadillac"] .ride-deco::before{clip-path:polygon(0 1%,100% 4%,100% 9%,16% 26%,0 22%)}
.vehicle.target[data-ride="cadillac"] .ride-deco::after{clip-path:polygon(0 99%,100% 96%,100% 91%,16% 74%,0 78%)}
.vehicle.target[data-ride="cadillac"] .car-roof::after{content:"✦";position:absolute;z-index:4;right:-9px;top:-7px;font-size:11px;line-height:1;color:#ffe27a;-webkit-text-stroke:.8px var(--ink);
  animation:caddyGlint 2.4s ease-in-out infinite}
@keyframes caddyGlint{0%,60%,100%{transform:scale(.4) rotate(0);opacity:0}75%{transform:scale(1.1) rotate(45deg);opacity:1}}

/* Barnegat Bay speedboat: a white fiberglass hull with a sharp bow, a navy-and-red racing stripe, a tinted curved
   windshield, a tan cockpit with two seats, a black outboard off the square transom and its foaming wake */
.vehicle.h.target[data-ride="boat"] .car-body{inset:12% 3% 16% 13%;border-radius:4px 100% 100% 4px/4px 50% 50% 4px;background:#fbfcfd;
  background-image:radial-gradient(ellipse 118% 50% at 18% 50%,transparent 68%,#1b3a8a 69% 80%,#fbfcfd 80% 84%,#e0283c 84% 93%,transparent 94%)}
.vehicle.h.target.mini[data-ride="boat"] .car-body{inset:12% 4% 16% 22%}
.vehicle.h.target.bus[data-ride="boat"] .car-body{inset:12% 2% 16% 9%}
.vehicle.target[data-ride="boat"] .car-body::after{right:calc(13% * var(--k))}
.vehicle.target[data-ride="boat"] .car-roof,.vehicle.target.bus[data-ride="boat"] .car-roof,.vehicle.target.mini[data-ride="boat"] .car-roof{
  left:calc(7% * var(--k));width:calc(34% * var(--k));top:26%;height:48%;border:0;border-radius:3px 6px 6px 3px;box-shadow:inset 0 0 0 1.5px rgba(11,16,32,.55);
  background:linear-gradient(#f7efe0,#f7efe0) 88% 18%/22% 30% no-repeat,linear-gradient(#f7efe0,#f7efe0) 88% 82%/22% 30% no-repeat,#cfb488}
.vehicle.target.mini[data-ride="boat"] .car-roof{left:6%;width:30%}
.vehicle.target[data-ride="boat"] .car-roof::after{content:"";position:absolute;left:100%;top:-24%;bottom:-24%;width:max(5px,calc(9% * var(--k)));
  border:0;border-right:4px solid #1c2a44;border-radius:0 100% 100% 0/0 50% 50% 0}
.vehicle.target[data-ride="boat"] .ride-deco{display:block;z-index:1;left:calc(-6% * var(--k));width:calc(6% * var(--k));top:35%;bottom:35%;border:1.5px solid var(--ink);border-radius:3px 2px 2px 3px;
  background:linear-gradient(to bottom,#4a4d57,#1c1d22)}
.vehicle.target[data-ride="boat"] .ride-deco::before{content:"";position:absolute;z-index:-1;right:100%;width:150%;top:-140%;bottom:-140%;
  background:linear-gradient(to left,#fff,rgba(225,242,255,.55));clip-path:polygon(100% 30%,0 0,0 22%,50% 50%,0 78%,0 100%,100% 70%)}
.vehicle.target[data-ride="boat"] .car-lights{display:none}

/* Scott's Boat: a lake pontoon: a flat deck with a rounded bow on two big aluminum tubes (bullet noses out past the
   bow), a cream fence with a navy stripe, a burgundy U-lounge at the bow and a stern bench, a teal bimini top over
   the middle, the helm console, and the outboard on the stern */
.vehicle.h.target[data-ride="pontoon"] .car-body{inset:22% 8% 27% 8%;border-radius:4px 12px 12px 4px/4px 40% 40% 4px;background:#cfc6b2;
  background-image:linear-gradient(to right,transparent calc(6% * var(--k)),#8a2238 0 calc(11% * var(--k)),transparent 0),repeating-linear-gradient(to right,rgba(80,70,50,.14) 0 1px,transparent 1px 5px);
  box-shadow:inset 0 0 0 2.5px #f6f1e4,inset 0 0 0 4px #1d3b6e,0 1px 0 var(--ink),0 0 12px rgba(255,120,90,.45)}
.vehicle.target[data-ride="pontoon"] .car-body::before{content:"";position:absolute;right:5%;width:calc(26% * var(--k));top:14%;bottom:14%;border:3.5px solid #8a2238;border-left:0;
  border-radius:2px 7px 7px 2px}
.vehicle.target[data-ride="pontoon"] .car-body::after{right:calc(11% * var(--k))}
.vehicle.target[data-ride="pontoon"] .car-roof,.vehicle.target.bus[data-ride="pontoon"] .car-roof,.vehicle.target.mini[data-ride="pontoon"] .car-roof{
  z-index:2;left:calc(17% * var(--k));width:calc(100% - 56% * var(--k));top:-6%;height:112%;border:2px solid var(--ink);border-radius:4px;box-shadow:0 2px 0 rgba(11,16,32,.35);
  background:repeating-linear-gradient(to right,transparent 0 calc(33.3% - 1px),rgba(255,255,255,.4) 0 33.3%),linear-gradient(to bottom,#2aa3a8,#1f8a8a 50%,#17777a)}
.vehicle.target.mini[data-ride="pontoon"] .car-roof{left:24%;width:34%}
.vehicle.target[data-ride="pontoon"] .car-roof::after{content:"";position:absolute;left:calc(100% + 2px);top:6%;width:max(5px,14%);height:30%;border:1.5px solid var(--ink);border-radius:2px;
  background:linear-gradient(to right,#1b2640 0 45%,#f6f1e4 45%)}
.vehicle.target.mini[data-ride="pontoon"] .car-roof::after{display:none}
.vehicle.target[data-ride="pontoon"] .car-lights{z-index:1;left:calc(-7% * var(--k));right:auto;width:calc(11% * var(--k));top:24%;bottom:24%;border:2px solid var(--ink);
  border-radius:45% 3px 3px 45%/50% 3px 3px 50%;background:radial-gradient(ellipse 60% 55% at 42% 50%,#aab1bd 0 40%,#5a606c 58%,#1c1d22 62%)}
.vehicle.target.mini[data-ride="pontoon"] .car-lights{left:-9%}
.vehicle.target[data-ride="pontoon"] .ride-deco{display:block;z-index:-1;left:calc(-3% * var(--k));right:calc(-8% * var(--k));top:calc(-40% - 2px);bottom:calc(-45% - 2px)}
.vehicle.target.mini[data-ride="pontoon"] .ride-deco{left:-3%;right:-7%}
.vehicle.target[data-ride="pontoon"] .ride-deco::before,.vehicle.target[data-ride="pontoon"] .ride-deco::after{content:"";position:absolute;left:0;right:0;height:28%;
  border:2px solid var(--ink);border-radius:4px 16px 16px 4px/4px 50% 50% 4px;background:linear-gradient(to bottom,#e3e7ee 0 38%,#b9c0cc 38% 78%,#9aa2ae 78%)}
.vehicle.target[data-ride="pontoon"] .ride-deco::before{top:0}
.vehicle.target[data-ride="pontoon"] .ride-deco::after{bottom:0}

/* Stretch limo: a glossy black prom-night limousine: chrome pinstripes down both sides and chrome bumpers, the hood
   and tinted windshield up front, then one long roof with the dark side windows along its edges, two moonroofs,
   and the tinted back glass over the trunk */
.vehicle.target[data-ride="limo"] .car-body{border-radius:6px 11px 11px 6px;background:#1f222b;
  background-image:linear-gradient(to bottom,transparent 8%,#d7dbe2 8% 12%,transparent 12% 88%,#d7dbe2 88% 92%,transparent 92%),
    linear-gradient(to bottom,rgba(255,255,255,.2),transparent 45%,rgba(0,0,0,.25))}
.vehicle.target[data-ride="limo"] .car-body::before{content:"";position:absolute;z-index:2;left:-3px;top:10%;bottom:10%;width:4px;border:1.5px solid var(--ink);border-radius:3px 1px 1px 3px;
  background:linear-gradient(to right,#9aa2ae,#f4f6fa 60%,#c9ced6)}
.vehicle.target[data-ride="limo"] .car-roof,.vehicle.target.bus[data-ride="limo"] .car-roof,.vehicle.target.mini[data-ride="limo"] .car-roof{
  left:calc(8% * var(--k));right:calc(27% * var(--k));width:auto;top:16%;height:68%;border:0;border-left:5px solid #3b4a63;border-right:7px solid #4a6286;border-radius:4px;
  box-shadow:0 0 0 1.5px var(--ink);
  background:linear-gradient(to bottom,#0c1119 0 13%,transparent 13% 87%,#0c1119 87%),
    linear-gradient(135deg,#3a5078 0 50%,#9fb4d6 50% 62%,#3a5078 62%) 24% 50%/20% 46% no-repeat,
    linear-gradient(135deg,#3a5078 0 50%,#9fb4d6 50% 62%,#3a5078 62%) 76% 50%/20% 46% no-repeat,#2b2f3a}
.vehicle.target.mini[data-ride="limo"] .car-roof{left:9%;right:36%;
  background:linear-gradient(to bottom,#0c1119 0 13%,transparent 13% 87%,#0c1119 87%),linear-gradient(135deg,#3a5078 0 50%,#9fb4d6 50% 62%,#3a5078 62%) 50% 50%/40% 46% no-repeat,#2b2f3a}
.vehicle.target[data-ride="limo"] .ride-deco{display:block;z-index:2;right:-3px;top:10%;bottom:10%;width:4px;border:1.5px solid var(--ink);border-radius:1px 3px 3px 1px;
  background:linear-gradient(to right,#c9ced6,#f4f6fa 40%,#9aa2ae)}
.vehicle.target[data-ride="limo"] .car-lights{right:3px}

/* Staten Island Ferry: the orange double-ender from above: a rounded bow at both ends, the black rub rail, the pale
   top deck with a wheelhouse at each end (orange, its window band facing out) and the mast amidships */
.vehicle.target[data-ride="ferry"] .car-body{border-radius:calc(16% * var(--k))/50%;background:#f26a1b;
  background-image:linear-gradient(to bottom,rgba(255,255,255,.22),transparent 45%,rgba(90,30,0,.2));
  box-shadow:inset 0 0 0 2px #15171d,0 4px 0 var(--ink),0 0 16px rgba(255,120,90,.45)}
.vehicle.target[data-ride="ferry"] .car-roof,.vehicle.target.bus[data-ride="ferry"] .car-roof,.vehicle.target.mini[data-ride="ferry"] .car-roof{
  left:calc(9% * var(--k));right:calc(9% * var(--k));width:auto;top:20%;height:60%;border:0;border-radius:calc(8% * var(--k))/40%;box-shadow:0 0 0 1.5px var(--ink);
  background:linear-gradient(to right,#1b2230 0 4%,#f26a1b 4% 17%,transparent 17% 83%,#f26a1b 83% 96%,#1b2230 96%),
    radial-gradient(circle,#15171d 0 2px,transparent 2.5px) 50% 50%/10px 10px no-repeat,
    repeating-linear-gradient(to right,transparent 0 9px,rgba(120,120,110,.18) 9px 10px),#e9e8e2}
.vehicle.target.mini[data-ride="ferry"] .car-roof{left:12%;right:12%;
  background:linear-gradient(to right,#1b2230 0 7%,#f26a1b 7% 26%,transparent 26% 74%,#f26a1b 74% 93%,#1b2230 93%),#e9e8e2}
.vehicle.target[data-ride="ferry"] .car-lights{display:none}
.vehicle.target[data-ride="ferry"] .car-body::after{right:calc(21% * var(--k))}
.vehicle.target.mini[data-ride="ferry"] .car-body::after{right:24%}

/* Hovercraft: the chase craft from Rumble in the Bronx, as a small passenger hovercraft: the black rubber skirt all
   around, a white deck with a red stripe, the tinted cabin up front, and the big ducted fan with its rudders astern */
.vehicle.target[data-ride="hovercraft"] .car-body{border-radius:calc(18% * var(--k))/45%;background:#23252c;
  background-image:repeating-linear-gradient(to right,transparent 0 5px,rgba(255,255,255,.08) 5px 6px)}
.vehicle.target[data-ride="hovercraft"] .car-roof,.vehicle.target.bus[data-ride="hovercraft"] .car-roof,.vehicle.target.mini[data-ride="hovercraft"] .car-roof{
  left:calc(24% * var(--k));right:calc(7% * var(--k));width:auto;top:17%;height:66%;border:0;border-right:calc(9px * var(--k)) solid #2d4a6e;border-radius:5px 45% 45% 5px/5px 50% 50% 5px;
  box-shadow:0 0 0 1.5px var(--ink);
  background:linear-gradient(to bottom,transparent 42%,#e0283c 42% 58%,transparent 58%),linear-gradient(to bottom,#fbfbf8,#d9dce2)}
.vehicle.target.mini[data-ride="hovercraft"] .car-roof{left:30%;right:6%;border-right-width:6px}
.vehicle.target[data-ride="hovercraft"] .ride-deco{display:block;z-index:2;left:calc(9% * var(--k));width:calc(12% * var(--k));top:-4%;bottom:-4%;border:2px solid var(--ink);border-radius:5px;
  background:radial-gradient(circle,#15171d 0 2.5px,transparent 3px),repeating-linear-gradient(to bottom,#e3e7ec 0 3px,#6f7886 3px 5px)}
.vehicle.target[data-ride="hovercraft"] .car-body::before{content:"";position:absolute;z-index:1;left:calc(3% * var(--k));width:calc(7% * var(--k));top:22%;bottom:22%;
  background:repeating-linear-gradient(to bottom,#fbfbf8 0 2px,transparent 2px 6px);filter:drop-shadow(0 0 1px var(--ink))}
.vehicle.target[data-ride="hovercraft"] .car-lights{right:calc(3% * var(--k))}
.vehicle.target[data-ride="hovercraft"] .car-body::after{right:calc(20% * var(--k))}
.vehicle.target.mini[data-ride="hovercraft"] .car-body::after{right:18%}

@media (prefers-reduced-motion:reduce){
  .vehicle.target[data-ride="plow"] .car-roof::after,.vehicle.target[data-ride="firetruck"] .ride-deco{animation:none}
  .vehicle.target[data-ride="cadillac"] .car-roof::after{animation:none;opacity:1;transform:rotate(15deg)}
}
/* ---- end new rides (artist 2) ---- */

/* ---- new lots (artist 3) ---- */
/* Hoboken brick: the red-brick sidewalks of Hoboken and old Jersey City in running bond (each course offset half a
   brick), tan mortar, a worn lighter top edge on every brick and a few darker or brighter bricks scattered about.
   A brick is a third of a cell by a sixth; a mortar joint or an odd brick is a conic quadrant pinned to its tile's
   corner, so nothing needs a % background-position. */
[data-lot="brick"]{--lot-base:#9c3b2a;--lot-grid:rgba(45,10,4,.3);--lot-lane:rgba(255,240,215,.14);--lot-dash:rgba(255,246,227,.92);--brick-m:#cdb893;
  background-image:linear-gradient(to bottom,var(--brick-m) 0 1.5px,rgba(255,196,160,.2) 1.5px 3px,transparent 3px calc(100% - 2px),rgba(50,10,4,.3) calc(100% - 2px)),
    conic-gradient(at 1.5px 50%,transparent 0 270deg,var(--brick-m) 0),
    conic-gradient(at 25% calc(100% / 6),transparent 0 270deg,rgba(112,32,18,.6) 0),
    conic-gradient(at 20% 25%,transparent 0 270deg,rgba(190,86,58,.65) 0),
    conic-gradient(at calc(100% / 7) 12.5%,transparent 0 270deg,rgba(134,49,31,.85) 0),
    conic-gradient(at calc(500% / 7 + 1.5px) 75%,transparent 0 90deg,rgba(112,32,18,.55) 0 180deg,transparent 0),
    conic-gradient(at calc(700% / 9 + 1.5px) calc(500% / 6),transparent 0 90deg,rgba(190,86,58,.6) 0 180deg,transparent 0),
    conic-gradient(at calc(900% / 11 + 1.5px) 50%,transparent 0 90deg,rgba(134,49,31,.85) 0 180deg,transparent 0),
    conic-gradient(at calc(50% + 1.5px) 50%,transparent 0 90deg,var(--lot-base) 0 180deg,transparent 0),
    conic-gradient(at 50% 50%,transparent 0 90deg,var(--brick-m) 0 180deg,transparent 0);
  background-size:100% calc(var(--cy) / 6),calc(var(--cx) / 3) calc(var(--cy) / 3),calc(var(--cx) * 4 / 3) var(--cy),calc(var(--cx) * 5 / 3) calc(var(--cy) * 2 / 3),
    calc(var(--cx) * 7 / 3) calc(var(--cy) * 4 / 3),calc(var(--cx) * 3.5 / 3) calc(var(--cy) * 2 / 3),calc(var(--cx) * 1.5) var(--cy),calc(var(--cx) * 5.5 / 3) calc(var(--cy) / 3),
    calc(var(--cx) / 3) calc(var(--cy) / 3),calc(var(--cx) / 3) calc(var(--cy) / 3)}
/* Boardwalk mini golf: bright putting-green carpet with its fine speckle, a wooden bumper rail round the hole (open
   at the exit), and the cup in the far corner */
[data-lot="minigolf"]{--lot-base:#2fa84f;--lot-grid:rgba(8,70,30,.28);--lot-lane:rgba(255,255,255,.1);--lot-dash:rgba(255,255,255,.92);
  --mg-rail:linear-gradient(to right,#6b4420 0 3px,#d9a960 3px 7.5px,#7a4c22 7.5px 9px);
  background-image:radial-gradient(circle closest-side,#0e1a14 0 26%,#fdf6e3 28% 38%,rgba(0,50,20,.3) 40% 46%,transparent 48%),
    radial-gradient(circle,rgba(8,80,32,.55) .7px,transparent 1.1px),radial-gradient(circle,rgba(210,255,215,.35) .7px,transparent 1.1px),
    linear-gradient(to bottom,rgba(255,255,255,.07) 50%,rgba(0,45,15,.08) 50%);
  background-size:var(--cx) var(--cy),4px 4px,5px 5px,100% calc(var(--cy) * 2);background-position:100% 100%,0 0,2px 1px,0 0;background-repeat:no-repeat,repeat,repeat,repeat}
.board[data-lot="minigolf"]{
  background-image:linear-gradient(to bottom,#6b4420 0 3px,#d9a960 3px 7.5px,#7a4c22 7.5px 9px),linear-gradient(to top,#6b4420 0 3px,#d9a960 3px 7.5px,#7a4c22 7.5px 9px),
    var(--mg-rail),linear-gradient(to left,#6b4420 0 3px,#d9a960 3px 7.5px,#7a4c22 7.5px 9px),linear-gradient(to left,#6b4420 0 3px,#d9a960 3px 7.5px,#7a4c22 7.5px 9px),
    radial-gradient(circle closest-side,#0e1a14 0 26%,#fdf6e3 28% 38%,rgba(0,50,20,.3) 40% 46%,transparent 48%),
    radial-gradient(circle,rgba(8,80,32,.55) .7px,transparent 1.1px),radial-gradient(circle,rgba(210,255,215,.35) .7px,transparent 1.1px),
    linear-gradient(to bottom,rgba(255,255,255,.07) 50%,rgba(0,45,15,.08) 50%);
  background-size:100% 9px,100% 9px,9px 100%,9px 33.3333%,9px 50%,var(--cx) var(--cy),4px 4px,5px 5px,100% calc(var(--cy) * 2);
  background-position:0 0,0 100%,0 0,100% 0,100% 100%,100% 100%,0 0,2px 1px,0 0;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat,repeat,repeat}
/* cranberry bog at harvest: the tea-dark Pine Barrens water flooded over the vines and carpeted in floating crimson
   berries with little glints; the lane is the channel the yellow harvest boom has swept clear */
[data-lot="bog"]{--lot-base:#2b1b1a;--lot-grid:rgba(255,200,190,.08);--lot-lane:rgba(30,12,10,.55);--lot-dash:rgba(255,212,64,.95);
  background-image:radial-gradient(ellipse 38% 30% at 30% 40%,rgba(30,10,8,.4),transparent),radial-gradient(ellipse 30% 24% at 78% 76%,rgba(30,10,8,.32),transparent),radial-gradient(circle at 12.4px 8.6px,rgba(255,255,255,.85) 0 .5px,transparent .9px),radial-gradient(circle at 2.1px 1.8px,#9e1a2c 0 1.05px,#6a0f1c 1.15px 1.4px,transparent 1.6px),radial-gradient(circle at 4.6px 4.9px,#9e1a2c 0 1.05px,#6a0f1c 1.15px 1.4px,transparent 1.6px),radial-gradient(circle at 5.9px 2.4px,#7a0a1c 0 1.05px,#4a0612 1.15px 1.4px,transparent 1.6px),radial-gradient(circle at 1.6px 5.7px,#9e1a2c 0 1.05px,#6a0f1c 1.15px 1.4px,transparent 1.6px),radial-gradient(circle at 3.7px 3.2px,#e0283c 0 1.05px,#9a0e24 1.15px 1.4px,transparent 1.6px),radial-gradient(circle at 6.3px 5.2px,#7a0a1c 0 1.05px,#4a0612 1.15px 1.4px,transparent 1.6px);
  background-size:calc(var(--cx) * 2.5) calc(var(--cy) * 1.5),calc(var(--cx) * 2) calc(var(--cy) * 2.5),31px 29px,7px 6px,6px 7px,8px 7px,7px 8px,6px 6px,8px 6px}
.mini-lot[data-lot="bog"]{--lot-lane:rgba(30,12,10,.3)}
/* Atlantic City casino carpet: a deep burgundy ground under a gold lattice of diamonds, a teal-and-gold medallion
   in each cell and a purple rosette with a gold heart where four cells meet; the lane is a darker runner */
[data-lot="casino"]{--lot-base:#5a0f24;--lot-grid:transparent;--lot-lane:rgba(24,0,10,.42);--lot-dash:#fff1c9;
  background-image:radial-gradient(circle closest-side,#e0b040 0 11%,#5a0f24 12% 19%,#1f8a8a 20% 33%,#e0b040 34% 38%,transparent 39%),
    radial-gradient(circle closest-side at 50% 22%,#7b3aa6 0 30%,transparent 34%),radial-gradient(circle closest-side at 50% 78%,#7b3aa6 0 30%,transparent 34%),
    radial-gradient(circle closest-side at 22% 50%,#7b3aa6 0 30%,transparent 34%),radial-gradient(circle closest-side at 78% 50%,#7b3aa6 0 30%,transparent 34%),
    radial-gradient(circle at 0 0,#e0b040 0 4%,#6b2a93 4.5% 10%,rgba(31,138,138,.6) 10.5% 13%,transparent 13.5%),radial-gradient(circle at 100% 0,#e0b040 0 4%,#6b2a93 4.5% 10%,rgba(31,138,138,.6) 10.5% 13%,transparent 13.5%),
    radial-gradient(circle at 0 100%,#e0b040 0 4%,#6b2a93 4.5% 10%,rgba(31,138,138,.6) 10.5% 13%,transparent 13.5%),radial-gradient(circle at 100% 100%,#e0b040 0 4%,#6b2a93 4.5% 10%,rgba(31,138,138,.6) 10.5% 13%,transparent 13.5%),
    linear-gradient(45deg,transparent calc(25% - 1.2px),rgba(184,138,46,.45) calc(25% - 1.2px) calc(25% + 1.2px),transparent calc(25% + 1.2px) calc(75% - 1.2px),rgba(184,138,46,.45) calc(75% - 1.2px) calc(75% + 1.2px),transparent calc(75% + 1.2px)),
    linear-gradient(-45deg,transparent calc(25% - 1.2px),rgba(184,138,46,.45) calc(25% - 1.2px) calc(25% + 1.2px),transparent calc(25% + 1.2px) calc(75% - 1.2px),rgba(184,138,46,.45) calc(75% - 1.2px) calc(75% + 1.2px),transparent calc(75% + 1.2px)),
    radial-gradient(circle,rgba(31,138,138,.35) .8px,transparent 1.3px);
  background-size:var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),var(--cx) var(--cy),
    var(--cx) var(--cy),var(--cx) var(--cy),6px 6px}
/* rail yard (Sunnyside, Meadows): gray crushed-stone ballast and a track down every row: dark creosoted ties at
   short intervals and two steel rails; the exit row's track runs straight out the exit */
[data-lot="railyard"]{--lot-base:#7a7872;--lot-grid:rgba(25,25,25,.14);--lot-lane:rgba(255,200,70,.1);--lot-dash:rgba(255,204,70,.92);
  background-image:linear-gradient(to bottom,transparent calc(29% - 1.5px),#d4d7dc calc(29% - 1.5px) calc(29% + 1px),#2f2e2b calc(29% + 1px) calc(29% + 2.5px),transparent calc(29% + 2.5px) calc(71% - 1.5px),
      #d4d7dc calc(71% - 1.5px) calc(71% + 1px),#2f2e2b calc(71% + 1px) calc(71% + 2.5px),transparent calc(71% + 2.5px)),
    radial-gradient(circle,rgba(42,41,38,.42) .9px,transparent 1.4px),radial-gradient(circle,rgba(190,186,176,.6) .9px,transparent 1.4px),radial-gradient(circle,rgba(58,56,52,.45) 1.2px,transparent 1.7px),
    linear-gradient(to bottom,var(--lot-base) 0 12%,transparent 12%),
    conic-gradient(at 46% 88%,transparent 0 270deg,#5a4434 0);
  background-size:100% var(--cy),5px 5px,6px 7px,9px 8px,100% var(--cy),calc(var(--cx) / 7) var(--cy);background-position:0 0,0 0,3px 2px,5px 6px,0 0,0 0}
/* Hammonton blueberries: rows of round leafy bushes along the cell lines, hung with clusters of dusty blue berries,
   and the sandy aisles between them, where the cars drive */
[data-lot="blueberry"]{--lot-base:#b89a64;--lot-grid:rgba(90,62,24,.22);--lot-lane:rgba(255,246,222,.18);--lot-dash:rgba(255,248,230,.95);
  background-image:radial-gradient(circle at 30% 7%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),radial-gradient(circle at 38% 12%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),
    radial-gradient(circle at 28% 14%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),radial-gradient(circle at 74% 5%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),
    radial-gradient(circle at 64% 88%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),radial-gradient(circle at 72% 92%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),
    radial-gradient(circle at 66% 96%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),radial-gradient(circle at 22% 90%,#9fb0e8 0 .7px,#5a6ecb 1.1px,#3b4ea8 2.2px,transparent 2.6px),
    radial-gradient(22% 8% at 40% 4%,#4c8a44 0 70%,transparent 100%),radial-gradient(22% 8% at 42% 89%,#4c8a44 0 70%,transparent 100%),
    radial-gradient(42% 23% at 50% 0,#3f7a3a 0 55%,#2f5d2e 70% 88%,#1f3f22 91% 97%,transparent 100%),radial-gradient(42% 23% at 50% 100%,#3f7a3a 0 55%,#2f5d2e 70% 88%,#1f3f22 91% 97%,transparent 100%),
    radial-gradient(24% 17% at 0 0,#2f5d2e 0 86%,#1f3f22 89% 97%,transparent 100%),radial-gradient(24% 17% at 100% 0,#2f5d2e 0 86%,#1f3f22 89% 97%,transparent 100%),
    radial-gradient(24% 17% at 0 100%,#2f5d2e 0 86%,#1f3f22 89% 97%,transparent 100%),radial-gradient(24% 17% at 100% 100%,#2f5d2e 0 86%,#1f3f22 89% 97%,transparent 100%),
    radial-gradient(circle,rgba(110,80,40,.5) .8px,transparent 1.3px),radial-gradient(circle,rgba(240,225,190,.55) .8px,transparent 1.3px);
  background-size:calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),
    calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),
    calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),calc(var(--cx) / 2) var(--cy),6px 6px,7px 7px;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0,3px 4px}
/* Lake Hopatcong: calm green-teal water at a marina, a few faint ripples and flecks, narrow weathered floating
   dock fingers along the column lines (the slips the cars sit in) and the main dock, gray-brown boards laid
   across, as the lane to the exit */
[data-lot="lake"]{--lot-base:#1f4f5a;--lot-grid:rgba(200,235,235,.07);--lot-dash:rgba(255,214,140,.95);
  --lot-lane:repeating-linear-gradient(to right,rgba(52,40,26,.6) 0 1.5px,transparent 1.5px 8px),repeating-linear-gradient(to right,rgba(255,250,235,.08) 0 8px,transparent 8px 16px,rgba(40,28,15,.1) 16px 24px,transparent 24px 40px),
    linear-gradient(to bottom,rgba(20,14,8,.35),transparent 12% 88%,rgba(20,14,8,.35)),#8a7a63;
  background-image:conic-gradient(at 3px 1.5px,transparent 0 270deg,rgba(52,40,26,.6) 0),conic-gradient(at calc(100% - 3px) 1.5px,rgba(52,40,26,.6) 0 90deg,transparent 0),
    linear-gradient(to right,#8a7a63 0 3px,rgba(12,30,34,.5) 3px 4.5px,transparent 4.5px calc(100% - 3px),#8a7a63 calc(100% - 3px)),
    radial-gradient(4.8px .9px at 22.3px 21.5px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(2.8px .9px at 3.9px 14.6px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(3.7px .9px at 32.2px 19.2px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(2.9px .9px at 14.6px 25.3px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(4.5px .9px at 30px 3.5px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(2.8px .9px at 13.2px 14.5px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(4px .9px at 46.1px 34.4px,rgba(215,245,238,.2) 0 45%,transparent 100%),radial-gradient(5.5px 3.3px at 31.5px 14.2px,transparent 78%,rgba(200,240,232,.13) 86% 94%,transparent 100%),radial-gradient(10px 6px at 31.5px 14.2px,transparent 78%,rgba(200,240,232,.13) 86% 94%,transparent 100%),radial-gradient(5.5px 3.3px at 122px 37.2px,transparent 78%,rgba(200,240,232,.13) 86% 94%,transparent 100%),radial-gradient(10px 6px at 122px 37.2px,transparent 78%,rgba(200,240,232,.13) 86% 94%,transparent 100%),
    radial-gradient(ellipse 70% 50% at 30% 30%,rgba(60,120,125,.3),transparent 70%);
  background-size:var(--cx) 7px,var(--cx) 7px,var(--cx) var(--cy),37px 31px,37px 31px,37px 31px,53px 47px,53px 47px,53px 47px,53px 47px,131px 113px,131px 113px,157px 139px,157px 139px,calc(var(--cx) * 3) calc(var(--cy) * 2)}
.mini-lot[data-lot="lake"]{--lot-lane:repeating-linear-gradient(to right,rgba(52,40,26,.6) 0 1.5px,transparent 1.5px 8px) 0 50%/100% 64% no-repeat,
  linear-gradient(to bottom,rgba(20,14,8,.35),transparent 14% 86%,rgba(20,14,8,.35)) 0 50%/100% 64% no-repeat,linear-gradient(#8a7a63,#8a7a63) 0 50%/100% 64% no-repeat}
/* the Atlantic off the Jersey Shore, seen from above: deep Atlantic-blue open water rolling in two sets of long swells
   (a darker trough, a pale crest with a thin line of foam along it) that cross a little, a few whitecaps breaking
   with their foam trailing off, and the lane the churned, paler wake a boat has left straight out to sea */
[data-lot="ocean"]{--lot-base:#245a85;--lot-grid:rgba(225,240,255,.06);--lot-dash:rgba(255,226,140,.95);
  --lot-lane:radial-gradient(9px 1.1px at 50% 50%,rgba(240,248,255,.5) 0 50%,transparent 100%) 0 24%/37px 100% repeat-x,radial-gradient(12px 1.1px at 50% 50%,rgba(240,248,255,.45) 0 50%,transparent 100%) 15px 76%/47px 100% repeat-x,
    linear-gradient(to bottom,rgba(10,30,60,.22),rgba(210,232,255,.17) 25% 75%,rgba(10,30,60,.22)),rgba(110,160,205,.2);
  background-image:radial-gradient(3.5px 1.8px at 60% 50%,rgba(250,253,255,.9) 0 50%,transparent 100%),radial-gradient(14px 1.6px at 45% 55%,rgba(230,242,255,.35) 0 40%,transparent 100%),
    radial-gradient(3px 1.5px at 60% 50%,rgba(250,253,255,.8) 0 50%,transparent 100%),radial-gradient(10px 1.3px at 45% 55%,rgba(230,242,255,.3) 0 40%,transparent 100%),
    repeating-linear-gradient(173deg,transparent 0 25px,rgba(225,240,255,.17) 25px 26.5px,transparent 26.5px 42px),
    repeating-linear-gradient(173deg,rgba(8,28,58,.28) 0,rgba(8,28,58,0) 16px,rgba(160,200,235,.11) 23px,rgba(8,28,58,0) 28px 42px),
    repeating-linear-gradient(178deg,rgba(8,28,58,.16) 0,rgba(8,28,58,0) 13px,rgba(160,200,235,.08) 19px,rgba(8,28,58,0) 24px 31px),
    radial-gradient(ellipse 48% 40% at 50% 50%,rgba(6,24,52,.32),transparent),
    linear-gradient(to bottom,#2e6893,#245a85 50%,#1d4c74);
  background-size:109px 84px,109px 84px,73px 126px,73px 126px,auto,auto,auto,calc(var(--cx) * 3) calc(var(--cy) * 2),100% 100%;
  background-position:21px 22px,21px 22px,57px 64px,57px 64px,0 0,0 0,0 0,calc(var(--cx) * -.8) calc(var(--cy) * .3),0 0}
.mini-lot[data-lot="ocean"]{--lot-lane:radial-gradient(9px 1.1px at 50% 50%,rgba(240,248,255,.4) 0 50%,transparent 100%) 0 26%/37px 100% repeat-x,
  linear-gradient(to bottom,rgba(10,30,60,.18),rgba(210,232,255,.12) 25% 75%,rgba(10,30,60,.18))}
/* black ice has to read on every ground: on the sand of the blueberry aisles, the putting green and the gray
   ballast, the pale frost fades, so there it is the blue ice of Snow Day */
:is([data-lot="blueberry"],[data-lot="minigolf"],[data-lot="railyard"]) .ice-tile{background:linear-gradient(135deg,rgba(120,190,255,.45),rgba(60,130,220,.28));box-shadow:inset 0 0 0 2px rgba(35,100,185,.9)}
:is([data-lot="blueberry"],[data-lot="minigolf"],[data-lot="railyard"]) .ice-tile::after{text-shadow:0 0 2px #123a78,0 0 4px rgba(18,58,120,.9)}
/* on the lake and the ocean, blue ice would sink into the water, so it is a whiter floe with a bright rim */
:is([data-lot="lake"],[data-lot="ocean"]) .ice-tile{background:linear-gradient(135deg,rgba(236,248,255,.46),rgba(190,225,250,.26));box-shadow:inset 0 0 0 2px #f4fbff,0 0 6px rgba(220,245,255,.5)}
/* ---- end new lots (artist 3) ---- */

/* ---------- the garage: two tabs of mini previews ---------- */
.garage-modal .modal-body{display:flex;flex-direction:column}
.garage-intro{font-size:14px;line-height:1.4}
@media (max-width:640px){.garage-modal .eyebrow{display:none}.garage-intro{font-size:13px}}
.garage-tabs{margin:12px 0 10px}
.garage-tabs small{font-size:12px;font-weight:600;opacity:.8}
.garage-grid{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-auto-rows:max-content;align-content:start;gap:10px;padding:2px 2px 6px}
.garage-tile>*{flex:none}
.garage-tile{display:flex;flex-direction:column;align-items:stretch;gap:3px;min-height:44px;padding:6px 6px 8px;text-align:left;border:3px solid var(--ink);border-radius:14px;background:var(--sheet-well);box-shadow:0 3px 0 var(--ink)}
.garage-tile strong{font-size:14px;line-height:1.2;margin-top:3px}
.garage-tile small{font-size:12px;line-height:1.25;color:#c6cee3}
.garage-tile.chosen{background:var(--cream);color:var(--ink)}
.garage-tile.chosen small{color:#2f7a4f;font-weight:700}
.garage-tile.locked{background:transparent;box-shadow:none;border-color:#56628c}
.garage-tile.locked .mini-lot{filter:grayscale(.75) brightness(.7)}
.garage-tile:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.tile-bar{display:block;height:7px;margin-top:2px;border:2px solid var(--ink);border-radius:999px;background:var(--key);overflow:hidden}
.tile-bar i{display:block;height:100%;background:var(--yellow)}
.tile-progress{font-family:var(--led-font);font-size:16px!important;color:var(--led)!important}
/* the gift window: the free rolls or tickets, big; the note keeps its line break before the signature */
#gift-text{white-space:pre-line}
/* the Boss Battle's release window (app.js showBossLaunch) */
.launch-modal{text-align:center}
.launch-modal .eyebrow{padding-left:52px}
.launch-swords{margin:4px 0 0;font-size:56px;line-height:1;animation:launchPop .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes launchPop{from{transform:scale(.3) rotate(-25deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.launch-swords{animation:none}}
.launch-modal h2{padding:0 24px;font-size:30px}
.launch-mission{display:grid;gap:2px;margin:14px 0 16px;padding:12px 14px;border:3px solid var(--ink);border-radius:14px;
  background:linear-gradient(180deg,#ffe58a 0%,#ffb627 100%);box-shadow:0 4px 0 var(--ink);color:var(--ink)}
.launch-mission small{font-size:12px;font-weight:700;letter-spacing:2px}
.launch-mission b{font-size:19px;line-height:1.2}
.launch-prize{font-size:22px;font-weight:700}
.launch-actions{display:grid;gap:6px}
.gift-rolls{margin:6px 0 10px;text-align:center;font:700 34px/1.1 var(--font);color:var(--led);letter-spacing:1px}
.gift-rolls small{display:block;font-size:15px;letter-spacing:2px;color:#c6cee3;text-transform:uppercase}
/* missions and goals: a list per period, each row its text, a progress bar and what it pays */
.goals-sec{margin:4px 0 12px}
.goals-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 6px}
.goals-head h3{margin:0;font-size:17px;color:var(--cream)}
.goals-head small{font-size:13px;color:var(--dim);white-space:nowrap}
.goals-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.goal{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;padding:8px 10px;border:2px solid var(--sheet-line);border-radius:12px;background:#1b2440}
.goal span{font-size:15px;line-height:1.3;color:var(--cream)}
.goal b{font-size:15px;color:var(--led);white-space:nowrap}
.goal-bar{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.goal-bar i{flex:1;height:8px;border-radius:99px;background:#2e3a5e;overflow:hidden}
.goal-bar i::before{content:"";display:block;width:var(--p);height:100%;border-radius:inherit;background:var(--led)}
.goal.done{border-color:var(--green);background:#16332a}
.goal.done b{color:var(--green)}
.goal.done .goal-bar i::before{background:var(--green)}
.goal.bonus{border-style:dashed}
.goals-note{font-size:13px}
/* the daily sign-in: a week's calendar, four days a row with day 7 (the free rolls) twice as wide */
.signin-days{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:4px 0 10px;padding:0;list-style:none}
.sd-day{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:68px;padding:6px 2px;
  border:2px solid var(--sheet-line);border-radius:12px;background:#1b2440;color:#c6cee3;text-align:center}
.sd-day small{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.sd-day b{font:700 19px/1.1 var(--font);color:var(--cream);white-space:nowrap}
.sd-day.big{grid-column:span 2}
.sd-day.big b{font-size:22px}
.sd-day.done{border-color:var(--green);background:#16332a}
.sd-day.done small:last-child{color:var(--green)}
.sd-day.today{border-color:var(--led);background:#3a2c10;box-shadow:0 0 0 2px rgba(255,182,39,.35),0 0 14px rgba(255,182,39,.45)}
.sd-day.today b{color:var(--led)}
.sd-day.later{opacity:.6}
.signin-result{min-height:0;margin:0 0 6px;text-align:center;font:700 22px/1.2 var(--font);color:var(--led)}
.signin-result:empty{display:none}
.signin-result.err{font-size:15px;color:var(--red)}
.signin-note{font-size:14px}
@media (prefers-reduced-motion:no-preference){.sd-day.today:not(.done){animation:sd-glow 1.6s ease-in-out infinite alternate}}
@keyframes sd-glow{to{box-shadow:0 0 0 2px rgba(255,182,39,.6),0 0 22px rgba(255,182,39,.7)}}
/* the owner's gift sender: presets, two amounts side by side, title and note (16px+ text: Safari zooms smaller) */
#gift-send-form .field-label{margin-top:12px}
#gift-send-form .field-label small{font-weight:500;letter-spacing:0;text-transform:none}
.gs-seg{display:flex;gap:8px}
.gs-seg .sticker-btn{flex:1;min-width:0;min-height:44px;padding:0 8px;font-size:15px;opacity:.6}
.gs-seg .sticker-btn[aria-pressed="true"]{opacity:1;border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan)}
.gs-results{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.gs-results:empty{display:none}
.gs-results button{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:6px 12px;text-align:left;font:600 16px var(--font);color:var(--cream);background:#1b2236;border:2px solid var(--sheet-line);border-radius:10px}
.gs-results button[aria-pressed="true"]{border-color:var(--cyan);background:#20304f}
.gs-results button span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.gs-results li.gs-none{font-size:14px;color:#c0c9e0}
#gift-send-form input,#gift-send-form textarea{width:100%;min-height:46px;padding:9px 12px;font:600 17px var(--font);color:var(--cream);background:#26314f;border:3px solid var(--sheet-line);border-radius:12px;outline:none}
#gift-send-form textarea{resize:vertical;line-height:1.35}
#gift-send-form input:focus,#gift-send-form textarea:focus{border-color:var(--cyan)}
/* the owner's preview: a banner over the gift window, its own buttons shown but asleep, Edit and Send at the bottom */
.gift-preview-note{margin:0 52px 12px 0;padding:6px 10px;border:2px dashed var(--cyan);border-radius:10px;font-size:13px;font-weight:700;letter-spacing:1px;color:var(--cyan);text-transform:uppercase}
.gift-modal.previewing #gift-actions{pointer-events:none;opacity:.55}
/* sent: the note says so, in green (app.js gp-send) */
.gift-modal.sent .gift-preview-note{border-style:solid;border-color:var(--green);color:var(--green);text-transform:none;letter-spacing:0}
.gift-modal.failed .gift-preview-note{border-style:solid;border-color:var(--red);color:var(--red);text-transform:none;letter-spacing:0}
.sheet-foot.gift-preview-foot{display:flex;gap:8px}
.gift-preview-foot #gp-edit{flex:none}
.gift-preview-foot #gp-send{flex:1;min-width:0}
.dc-gift{display:block;margin:8px auto 0;min-height:40px;font-size:14px}
/* the buy window's preview: the garage tile's strip of lot, half again as big */
.buy-look{margin:4px 0 14px}
.buy-look .mini-lot{zoom:1.5}
/* a ride or lot won in the Ticket Machine: under the machine, and on the roll's card */
.rs-art .mini-lot{width:150px;zoom:1.4;box-shadow:0 3px 0 var(--ink)}
/* a strip of lot, three cells long, with the lane marked and the escape car in it */
.mini-lot{--cx:44px;--cy:100%;position:relative;display:block;height:44px;border:2.5px solid var(--ink);border-radius:9px;overflow:hidden}
.mini-lot::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:var(--lot-lane);border-top:2px dashed var(--lot-dash);border-bottom:2px dashed var(--lot-dash);pointer-events:none}
.mini-lot .vehicle{top:0;left:6px;width:84px;height:100%;cursor:inherit;pointer-events:none;transition:none}
.mini-lot .vehicle.bus{width:126px}

/* the toast: a popover when the browser has them, so it shows over an open dialog too */
.toast{position:fixed;inset:auto auto calc(16px + env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);margin:0;z-index:100;
  width:max-content;max-width:calc(100vw - 24px);padding:12px 16px;border:4px solid var(--ink);border-radius:16px;background:var(--paper);color:var(--ink);
  font:600 15px/1.4 var(--font);text-align:center;box-shadow:0 6px 0 var(--ink);overflow:visible}
.toast:popover-open{animation:toastIn .3s cubic-bezier(.3,1.4,.5,1)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px)}}
/* a bump notice: a banner at the top, tappable through to that leaderboard */
.notice-banner{position:fixed;inset:calc(10px + env(safe-area-inset-top)) auto auto 50%;transform:translateX(-50%);margin:0;z-index:101;display:flex;align-items:stretch;gap:0;
  width:min(520px,calc(100vw - 20px));padding:0;border:4px solid var(--ink);border-radius:16px;background:var(--led);color:var(--ink);box-shadow:0 6px 0 var(--ink);overflow:hidden}
.notice-banner:popover-open{animation:noticeIn .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes noticeIn{from{opacity:0;transform:translate(-50%,-16px)}}
.notice-text{flex:1;min-width:0;min-height:48px;padding:10px 12px;text-align:left;font:600 15px/1.35 var(--font);color:var(--ink)}
.notice-close{flex:none;width:46px;border-left:3px solid var(--ink);font-weight:700;font-size:16px;color:var(--ink)}
.notice-badge{flex:none;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--red);color:var(--cream);font-size:13px;font-weight:700;line-height:24px;text-align:center}
.menu-btn{position:relative}
.menu-btn.has-news::after{content:"";position:absolute;top:4px;right:4px;width:11px;height:11px;border-radius:50%;background:var(--red);border:2px solid var(--ink)}
.notices-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:min(55vh,480px);overflow:auto;overscroll-behavior:none}
.notices-list li{display:flex;gap:8px;align-items:center}
.news-row{cursor:default}
.notice-go{flex:none;min-width:56px;background:var(--green);color:var(--ink);font-weight:700}
.notice-row{display:block;flex:1;min-width:0;width:100%;min-height:52px;padding:10px 12px;text-align:left;border:3px solid var(--ink);border-radius:14px;background:var(--sheet-well);box-shadow:0 3px 0 var(--ink)}
.notice-main{display:block;font-size:13px;font-weight:500;line-height:1.35}
.notice-row small{display:block;margin-top:2px;font-size:12px;color:#c6cee3}
/* the house ad */
.ad-modal .eyebrow{color:#c6cee3}
.ad-tag{display:inline-block;padding:0 5px;border-radius:5px;background:var(--cream);color:var(--ink);font-size:10px;letter-spacing:1px}
.ad-card{margin-top:12px;padding:16px 16px 14px;border:3px solid var(--ink);border-radius:16px;background:var(--navy);box-shadow:0 4px 0 var(--ink);text-align:center;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.5px);background-size:16px 16px}
.ad-icon{display:block;font-size:40px;line-height:1.1}
.ad-card h2{margin:8px 0 6px;padding:0;font-size:24px;color:var(--led)}
.ad-card p{font-size:15px;line-height:1.45;color:#dfe5f3}
.ad-link{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-weight:700}
.ad-progress{height:10px;margin-top:14px;border:2.5px solid var(--ink);border-radius:999px;background:var(--key);overflow:hidden}
.ad-progress i{display:block;height:100%;width:0;background:var(--green)}
.ad-count{margin-top:8px;text-align:center;font-family:var(--led-font);font-size:24px;letter-spacing:1px;color:var(--led)}
#ad-continue:disabled{background:#6b5a2e;color:#2a2410;cursor:default}
.noscript{position:fixed;inset:0;z-index:100;display:grid;place-content:center;gap:12px;padding:30px;background:var(--navy);color:var(--cream);font:500 20px/1.5 var(--font);text-align:center}

/* ---------- the tavern (#tavern-dialog, tavern.js): the game's chat, full screen like the Boss Battle ---------- */
.tavern-link{grid-column:1/-1}
.tavern-link>span:nth-child(2){flex:1;min-width:0}
/* the sidebar's button where the sidebar is beside the board; the Menu's row where it falls under the board */
@media (min-width:960px){.tavern-row{display:none}}
@media (max-width:959px){.tavern-link{display:none}}
dialog.tavern-stage{background:radial-gradient(120% 70% at 50% 0,#22305e 0,#121a38 55%,#080c1a 100%)}
.tv-scroll{padding:8px max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left))}
.tv-list{list-style:none;margin:0 auto;padding:0;max-width:760px;display:flex;flex-direction:column;gap:9px}
.tv-list li{padding:9px 12px 10px;background:var(--panel);border:2px solid var(--line);border-radius:14px;min-width:0}
.tv-list li.mine{border-color:#4a3f1c;background:#1d2340}
.tv-meta{display:flex;align-items:center;gap:8px;min-width:0}
.tv-meta .tv-who{font-weight:700;font-size:15px;color:var(--cream);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-list li.mine .tv-who:not([data-fc]){color:var(--led)}
.tv-meta small{flex:none;margin-left:auto;font-size:12px;color:var(--dim)}
.tv-text{margin-top:2px;font-size:15.5px;line-height:1.4;color:var(--soft);overflow-wrap:anywhere}
.tv-empty{padding:30px 6px;text-align:center}
.tv-foot{flex:none;border-top:2px solid #1b2130;
  padding:10px max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.tv-foot>*{max-width:760px;margin-left:auto;margin-right:auto}
.tv-form{display:flex;gap:8px}
.tv-form input{flex:1;min-width:0;min-height:46px;padding:8px 12px;font:500 16px var(--font);color:var(--cream);background:#26314f;border:3px solid var(--line);border-radius:12px;outline:none}
.tv-form input:focus{border-color:var(--cyan)}
.tv-note{font-size:14px;line-height:1.45;color:var(--muted);text-align:center}
.tv-error{margin-bottom:8px;font-size:14px;line-height:1.4;color:var(--red)}

/* ---------- desktop: sidebar on the left ---------- */
@media (min-width:960px){
  .layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px;align-items:start}
  .side{order:-1}
}
/* ---------- wide: controls beside the board, the board sized to the window ---------- */
@media (min-width:1100px){
  .play-area{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}
  .play-side{display:block}
  .board-wrap{max-width:max(380px,min(560px,calc(100vh - 300px)))}
  .score-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin:0;row-gap:8px;padding:8px 0 7px;border-radius:14px;box-shadow:0 5px 0 var(--ink),inset 0 0 0 2px #232a40}
  .score-strip>div:nth-child(3){border-left:0}
  .score-strip span{font-size:12px;letter-spacing:1.5px}
  .score-strip strong{flex-direction:column;align-items:center;gap:0;font-size:36px;line-height:1;margin-top:2px}
  .score-strip strong.long{font-size:27px;line-height:1.33}
  .score-strip small{font-size:17px}
  .game-actions{grid-template-columns:1fr 1fr;margin-top:18px}
  .game-actions #hint-button{grid-column:1/-1}
  .daily-row{grid-template-columns:1fr}
}
/* ---------- below the wide layout: the strip, the controls and the tip line up with the board ---------- */
@media (max-width:1099px){
  .score-strip,.game-actions,.level-strip,.daily-row,.game-tip{width:100%;max-width:572px;margin-left:auto;margin-right:auto}
}
@media (min-width:641px) and (max-width:1099px){
  .score-strip{padding:6px 0 5px}
  .score-strip span{font-size:11px}
  .score-strip strong{font-size:32px}
  .score-strip strong.long{font-size:25px;line-height:1.28}
}
/* ---------- tablets and phones ---------- */
@media (max-width:959px){
  .side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .trip-card{grid-column:1/-1}
  .garage-button{grid-column:1/-1}
}
@media (max-width:640px){
  /* The board's height budget: everything on the playing screen that isn't the board (see .board-and-exit). */
  :root{--app-h:100vh;--tabbar-h:calc(78px + env(safe-area-inset-bottom));--play-chrome:222px;--board-min:210px}
  @supports (height:100dvh){:root{--app-h:100dvh}}
  .shell{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  /* A phone keeps the board's bottom tab bar, so there's no header: the game starts at its own mode keys. */
  .topbar{display:none}
  /* Laid out like the board itself: the page never scrolls, only the game above the bar does. A bar pinned with
     position:fixed over a scrolling page slid away on iPhone as Safari's toolbar collapsed. */
  html,body{height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
  body{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
  .shell{flex:1;min-height:0;width:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:20px}
  .tabbar{flex:none;display:flex;gap:6px;height:calc(78px + env(safe-area-inset-bottom));
    padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    border-top:2px solid #1b2130}
  .tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 2px 7px;border:3px solid var(--ink);
    border-radius:14px;background:var(--key);color:var(--soft);font-weight:700;font-size:12px;line-height:1.15;box-shadow:0 4px 0 var(--ink);text-decoration:none;white-space:nowrap}
  .tabbar a.on{background:var(--cream);color:var(--ink)}
  .tabbar a:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
  .tabbar .ti{font-size:19px;line-height:1.1}
  .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
  /* Pop-ups (the result, leaderboards, the menu) stop above the tab bar, and the dimming leaves it clear: the
     site's tabs stay in view, and a tap on one still goes there (see the dialog click handler in app.js). */
  .modal{bottom:calc(78px + env(safe-area-inset-bottom));max-height:calc(100dvh - 90px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
  .modal::backdrop{background:linear-gradient(to top,transparent calc(78px + env(safe-area-inset-bottom)),rgba(6,10,22,.72) 0)}
  /* The stop list sits low, in thumb reach: 70px shorter than other pop-ups, 12px off the bottom */
  #levels-dialog{margin-bottom:12px;max-height:calc(100dvh - 160px - env(safe-area-inset-bottom) - env(safe-area-inset-top))}
  html.standalone #levels-dialog{max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  .sheet-foot{display:block}
  .icon-btn{box-shadow:0 3px 0 var(--ink)}
  .modes{gap:6px;margin-bottom:8px}
  .mode{min-height:44px;padding:4px;gap:5px;font-size:15px;box-shadow:0 4px 0 var(--ink)}
  .menu-btn{width:46px;min-height:44px;box-shadow:0 4px 0 var(--ink)}
  /* the board gets the whole width: no card around it on a phone */
  .game-card{background:none;border:0;border-radius:0;padding:0}
  .weekly-view{padding:14px 12px 16px;border-radius:18px}
  .play-area{margin-top:8px}
  .score-strip{margin-bottom:10px;padding:3px 0 2px}
  .score-strip span{font-size:9px;line-height:1}
  .score-strip strong{font-size:25px;line-height:.9}
  .score-strip strong.long{font-size:19px;line-height:1.18}
  .score-strip small{font-size:17px}
  .board-wrap{max-width:none}
  /* square, and no taller than the height the other rows leave: 100dvh minus the tab bar and --play-chrome */
  .board-and-exit{padding-right:26px;margin-bottom:10px;width:100%;max-width:max(var(--board-min),calc(var(--app-h) - var(--tabbar-h) - env(safe-area-inset-top) - var(--play-chrome) + 26px));margin-left:auto;margin-right:auto}
  .start-cover{right:26px;border-radius:14px;gap:14px}
  .start-goal{font-size:26px}
  .exit-lane{width:26px;border-radius:0 10px 10px 0}
  .exit-lane span{font-size:12px;letter-spacing:0}
  .exit-lane b{font-size:22px}
  .board{border-radius:14px}
  .car-body{border-width:2px;border-radius:8px;box-shadow:inset 0 2px 0 rgba(255,255,255,.32),inset 0 -3px 0 rgba(0,0,0,.2),0 3px 0 var(--ink)}
  .vehicle.v .car-body{box-shadow:inset 2px 0 0 rgba(255,255,255,.32),inset -3px 0 0 rgba(0,0,0,.2),0 3px 0 var(--ink)}
  .target .car-body{box-shadow:inset 0 2px 0 rgba(255,255,255,.32),inset 0 -3px 0 rgba(0,0,0,.2),0 3px 0 var(--ink),0 0 12px rgba(255,120,90,.45)}
  .car-roof{border-left-width:5px;border-right-width:4px;border-radius:4px}
  .v .car-roof{border-top-width:5px;border-bottom-width:4px}
  .target .car-body::after{font-size:12px}
  .game-actions{gap:8px}
  .game-actions button{min-height:46px;font-size:15px;gap:5px}
  .game-tip{font-size:13px;margin-top:12px}
  .wk-head h2{font-size:23px}
  .led-box strong{font-size:26px}
  .wk-row{grid-template-columns:34px minmax(0,1fr) auto 10px;gap:8px;padding:8px 10px}
  .wk-main strong{font-size:16px}
  .side{grid-template-columns:1fr}
  .trip-card{padding:16px 14px}
  .region-list{display:flex;justify-content:space-between;gap:2px;margin:14px 0 8px}
  .region-list li{flex:1;min-width:0}
  .region-list li:not(:last-child)::before{left:50%;right:-50%;top:24px;bottom:auto;border-left:0;border-top:2px dashed var(--line)}
  .region-button{flex-direction:column;gap:6px;min-height:64px;padding:6px 2px;text-align:center}
  .region-number{position:relative;z-index:1}
  .region-button strong{font-size:12px;line-height:1.2}
  .region-button small,.region-lock{display:none}
  .modal{--pad-t:20px;--pad-r:16px;--pad-b:18px;border-radius:20px}
  .modal h2{font-size:24px}
  .level-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* the result fits a 13 mini or an SE above the tab bar with no inner scrolling, whatever it has to say */
  .win-modal{--pad-t:12px;--pad-r:14px;--pad-b:14px;--close-at:8px}
  .win-modal .eyebrow{margin-top:4px;font-size:11px;letter-spacing:1.2px;line-height:1.3}
  /* The ✕ reaches 38px into the title's line, and "A picture-perfect escape." ran under it. The title now stops
     short of it, a few px off centre so the longest titles still take one line: a second would cost the SE a
     scroll. Narrower than a 13 mini, a long title wraps rather than overlap. */
  .win-modal h2{margin:8px 0 2px;padding:0 42px 0 22px;font-size:20px;text-wrap:balance}
  .win-stars{font-size:24px;letter-spacing:5px;margin-bottom:2px}
  .win-description{font-size:14px;line-height:1.35}
  .win-stat-row{margin-top:8px;padding:4px 0 3px}
  .win-stat-row b{font-size:24px}
  .win-stat-row b#win-time{font-size:20px;line-height:24px}
  .win-stat-row span{font-size:9.5px;letter-spacing:.6px}
  .reward-note{margin-top:8px;padding:3px 6px;font-size:13px;line-height:1.3}
  .rank-box{margin-top:10px;padding:8px 10px;font-size:14px;line-height:1.35}
  .rank-big{font-size:30px;margin-bottom:0}
  .rank-pb{font-size:15px}
  .rank-head{font-size:15px;margin-bottom:2px}
  .rank-actions{margin-top:6px}
  .name-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}   /* the placeholder says it */
  .name-form input{min-height:44px;padding:6px 10px;font-size:16px}
  .name-form .sticker-btn{padding:0 12px}
  .name-form .form-note,.name-form .form-error{margin-top:4px;font-size:12.5px;line-height:1.3}
  .name-form .text-button{margin-top:0}
  .win-modal .primary-button{min-height:48px;margin-top:10px;font-size:17px}
  .win-secondary{margin-top:10px;gap:6px;flex-wrap:nowrap}
  .win-secondary .sticker-btn{flex:1 1 auto;min-width:0;padding:0 7px;gap:4px;font-size:13.5px}
}
@media (max-width:640px){
  .ad-card{margin-top:10px;padding:10px 12px}
  .ad-icon{font-size:30px}
  .ad-card h2{margin:4px 0 4px;font-size:21px}
  .ad-card p{font-size:14px;line-height:1.38}
  .ad-link{min-height:44px;margin-top:0}
  .ad-progress{margin-top:10px}
  .ad-count{margin-top:4px;font-size:21px}
  .ad-modal .primary-button{min-height:48px;margin-top:8px}
  .ad-modal .fine-print{margin-top:8px;font-size:12px}
}
@media (max-width:640px) and (max-height:600px){
  .win-description{display:none}   /* short phones: the stars and the title say it */
  .win-modal h2{margin-top:6px}
  .win-modal .primary-button{margin-top:8px}
  .win-secondary{margin-top:8px}
}
@media (max-width:420px){
  .mode>span{display:none}   /* room for the menu key beside the three modes */
}
@media (max-width:360px){
  .score-strip strong{font-size:23px}
  .score-strip strong.long{font-size:17px;line-height:1.22}
  .score-strip small{font-size:15px}
}

/* ===== The top of the playing screen (v2.2, from the design review): a segmented mode switch, the stop key with
   its explicit way to every other stop, the Leaderboard key, and the best result's stars in the BEST cell. ===== */

/* ---------- Row 1: the mode switch, one segmented control + the menu key ---------- */
.mode-seg{flex:1;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:48px;
  border:3px solid var(--ink);border-radius:14px;background:var(--key);box-shadow:0 4px 0 var(--ink)}
.mode-seg .mode{position:relative;flex:none;min-width:0;min-height:0;height:100%;border:0;border-radius:0;box-shadow:none;background:none;
  padding:0 6px;gap:6px;font-size:16px;color:var(--soft)}
.mode-seg .mode+.mode{border-left:2px solid var(--line)}
.mode-seg .mode.on+.mode,.mode-seg .mode+.mode.on{border-left-color:var(--ink)}
.mode-seg .mode:first-child{border-radius:11px 0 0 11px}
.mode-seg .mode:last-child{border-radius:0 11px 11px 0}
.mode-seg .mode.on{background:var(--cream);color:var(--ink)}
.mode-seg .mode:active{transform:none;box-shadow:none}
.mode-seg .mode:not(.on):active{background:#131d38;color:var(--cream)}
.mode-seg .mode:focus-visible{z-index:1;outline:3px solid var(--cyan);outline-offset:1px;border-radius:10px}
.mode-seg .mode::after{content:"";position:absolute;inset:-5px 0}          /* taller hit area: 42 inside the border + 5 + 5 on desktop; phones below */
.menu-btn{width:48px;min-height:48px;border-radius:14px}

/* ---------- Row 2: the stop key (opens the list) + the Leaderboard key ---------- */
.game-head{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;grid-template-areas:"stop . lb" "name name name";row-gap:12px;column-gap:10px;align-items:center}
.stop-btn{grid-area:stop;min-width:0;max-width:100%;display:flex;align-items:stretch;height:48px;padding:0;border:3px solid var(--ink);border-radius:14px;
  background:var(--key);color:var(--cream);box-shadow:0 4px 0 var(--ink);text-align:left}
.stop-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover){.stop-btn:hover{background:#131d38}}
.stop-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:0;padding:0 12px}
.stop-led{display:flex;align-items:center;gap:7px;min-width:0;font:400 22px/22px var(--led-font);letter-spacing:1px;color:var(--led);
  text-shadow:0 0 8px rgba(255,182,39,.55);white-space:nowrap}
.stop-led .code{flex:none}
.stop-led .chap{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.stop-led .challenge-badge{flex:none}
.stop-name{display:none}
.stop-more{flex:none;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border-left:2px dashed #2a3658;
  font:700 14px/1 var(--font);color:var(--soft);white-space:nowrap}
.stop-more svg{flex:none;width:16px;height:16px}
.stop-more .short{display:none}
.lb-key{grid-area:lb;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:48px;padding:0 14px;border:3px solid var(--ink);border-radius:14px;
  background:var(--key);color:var(--soft);font-weight:700;font-size:15px;box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.lb-key .ti{font-size:18px;line-height:1}
.lb-key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover){.lb-key:hover{background:#131d38;color:var(--cream)}}
.game-head .level-title{grid-area:name}
/* the mode tints, as on the tag today */
.game-card[data-mode="daily"] .stop-led{color:#9fe7ff;text-shadow:0 0 8px rgba(79,216,255,.5)}
.game-card[data-mode="weekly"] .stop-led{color:var(--green);text-shadow:0 0 8px rgba(61,220,132,.5)}
.game-card.challenge .stop-led{color:#ff8a96;text-shadow:0 0 8px rgba(255,77,94,.6)}
.game-card.challenge .stop-btn{box-shadow:0 4px 0 var(--ink),0 0 0 2px rgba(255,77,94,.55)}
.game-card.challenge .stop-btn:active{box-shadow:0 1px 0 var(--ink),0 0 0 2px rgba(255,77,94,.55)}

/* ---------- the stars live in the BEST cell now ---------- */
.score-strip .best-cell>span{display:inline-flex;align-items:center;gap:4px;height:1em;white-space:nowrap}   /* the stars never grow the strip */
.best-stars{font-style:normal;font-size:11px;line-height:1;letter-spacing:0;color:var(--yellow);text-shadow:0 0 6px rgba(255,210,63,.55)}
.best-stars s{text-decoration:none;color:#5d6a92;text-shadow:none}

/* ---------- phones ---------- */
@media (max-width:640px){
  :root{--play-chrome:222px}
  .modes{gap:8px;margin-bottom:8px}
  .level-strip{margin-top:8px}
  .mode-seg{height:38px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .mode-seg .mode{font-size:15px;padding:0 4px}
  .mode-seg .mode:first-child{border-radius:9px 0 0 9px}
  .mode-seg .mode:last-child{border-radius:0 9px 9px 0}
  .mode-seg .mode::after{inset:-6px 0}                 /* 32px inside the border + 6 + 6 = 44px to tap */
  .menu-btn{width:44px;min-height:0;height:38px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .menu-btn svg{width:20px;height:20px}

  .game-head{display:flex;gap:8px;height:46px;align-items:stretch}
  .game-head .level-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .stop-btn{flex:1 1 auto;height:46px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .stop-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
  .game-card.challenge .stop-btn{box-shadow:0 3px 0 var(--ink),0 0 0 2px rgba(255,77,94,.55)}
  .stop-main{padding:0 8px 0 10px;gap:1px}
  .stop-led{font-size:19px;line-height:17px;letter-spacing:.5px;gap:6px}
  .stop-name{display:block;font:600 15px/19px var(--font);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stop-name.long{font-size:14px}
  .stop-more{width:48px;padding:0;flex-direction:column;gap:3px;font-size:9.5px;letter-spacing:.8px;color:var(--muted)}
  .stop-more svg{width:17px;height:17px;color:var(--soft)}
  .stop-more .full{display:none}
  .stop-more .short{display:inline}
  .lb-key{flex:none;width:78px;height:46px;min-height:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    border:3px solid var(--ink);border-radius:12px;background:var(--key);color:var(--soft);font:700 11.5px/1.1 var(--font);box-shadow:0 3px 0 var(--ink)}
  .lb-key .ti{font-size:18px;line-height:1}
  .lb-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
  .challenge-badge{padding:2px 5px 1px;font-size:9.5px}
  .play-area{margin-top:8px}
  .score-strip{margin-bottom:10px}
  .game-actions button{min-height:44px}
}
@media (max-width:360px){
  .lb-key{width:70px;font-size:10.5px}
  .stop-more{width:42px}
}

/* ---------- play offline ---------- */
.offline-status.ok b{color:var(--green);text-shadow:0 0 8px rgba(61,220,132,.5)}
.share-glyph{display:inline-block;padding:0 5px;border:2px solid var(--line);border-radius:6px;font-size:13px;line-height:1.3}
#install-how h3{margin-top:14px}
/* Installed as an app: NJTracker's tabs would lead out of it, so they go, and the menu offers the board instead.
   Pop-ups keep clear of the status bar and the home indicator (the page runs under both, black-translucent). */
.standalone-only{display:none!important}
html.standalone .standalone-only{display:flex!important}
html.standalone .tabbar,html.standalone .site-tabs{display:none!important}
html.standalone .shell{padding-bottom:max(20px,env(safe-area-inset-bottom))}
html.standalone .modal{top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
html.standalone .modal::backdrop{background:rgba(6,10,22,.72)}
@media (display-mode:standalone) and (max-width:640px){html #levels-dialog{max-height:calc(100dvh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}
@media (display-mode:standalone){
  .standalone-only{display:flex!important}
  .tabbar,.site-tabs{display:none!important}
  html .shell{padding-bottom:max(20px,env(safe-area-inset-bottom))}
  html .modal{top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  html .modal::backdrop{background:rgba(6,10,22,.72)}
}

@media (prefers-reduced-motion:reduce){
  .start-button{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .logo{animation:none;transform:rotate(-6deg)}
}
.game-version{margin-top:8px;font-size:12px;letter-spacing:.5px;color:var(--dim)}
.version-text{font-family:var(--led-font);font-size:16px;letter-spacing:1px;color:var(--led)}

/* =====================================================================================================================
   THE UNLOCK MOMENT (game designer's section; the ride and lot art itself is above, in the rides/lots sections)
   The "New ride unlocked!" card that pops up over the result (app.js showUnlocks), and the "Next: <name> at N ★"
   goal line it shares with the garage (renderNextUnlock). One unlock gets a big cream sticker with a sunburst and
   the car driving onto its lot; two or more get a compact row each.
   ===================================================================================================================== */
.unlock-modal{text-align:center}
.unlock-modal .modal-body{overflow-x:hidden}
.unlock-modal .eyebrow{padding:0 48px;color:var(--yellow)}
.unlock-modal h2{margin:6px 0 14px;padding:0 44px;color:var(--yellow);text-shadow:0 0 14px rgba(255,210,63,.45)}
.unlock-list{display:grid;gap:12px}
.unlock-card{position:relative;display:grid;gap:10px;justify-items:center;padding:16px 12px 14px;overflow:hidden;
  border:3px solid var(--ink);border-radius:18px;background:var(--cream);color:var(--ink);box-shadow:0 5px 0 var(--ink);transform:rotate(-1deg)}
/* a sunburst of sticker-yellow rays behind the preview, turning slowly */
.unlock-card::before{content:"";position:absolute;left:50%;top:52px;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,196,39,.42) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(closest-side,#000 25%,transparent);mask:radial-gradient(closest-side,#000 25%,transparent);
  animation:unlockSpin 30s linear infinite}
@keyframes unlockSpin{to{transform:rotate(1turn)}}
.unlock-card>*{position:relative;z-index:1}
.unlock-stage{width:min(100%,258px)}
.unlock-stage .mini-lot{zoom:1.5;box-shadow:0 3px 0 var(--ink)}
/* two sparkles that twinkle at the preview's corners */
.unlock-stage::before,.unlock-stage::after{content:"✦";position:absolute;z-index:2;font-size:22px;line-height:1;color:var(--yellow);-webkit-text-stroke:1.5px var(--ink);
  pointer-events:none;animation:unlockTwinkle 1.6s ease-in-out infinite}
.unlock-stage::before{left:-10px;top:-12px}
.unlock-stage::after{right:-8px;bottom:-12px;font-size:17px;animation-delay:.8s}
@keyframes unlockTwinkle{50%{transform:scale(.55) rotate(45deg);opacity:.55}}
.unlock-text{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.unlock-kind{padding:1px 10px;border-radius:999px;background:var(--ink);color:var(--yellow);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.unlock-name{font-size:23px;line-height:1.15;overflow-wrap:anywhere}
.unlock-why{font-size:13px;line-height:1.3;color:#4c536e}
.unlock-use{min-width:min(100%,220px)}
.unlock-card.on{background:#e9f9ef}
.unlock-card.on .unlock-use{background:var(--green)}
.unlock-modal .primary-button{margin-top:14px}
.unlock-modal .text-button.center{margin-top:4px}
/* the arrival: the card pops in like a slapped-on sticker, then the car drives onto its lot */
.unlock-modal.arriving .unlock-card{animation:unlockPop .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0) * .14s + .05s)}
@keyframes unlockPop{from{transform:scale(.55) rotate(-8deg);opacity:0}}
.unlock-modal.arriving .unlock-stage .vehicle{animation:unlockDriveIn .8s cubic-bezier(.25,1.25,.45,1) both;animation-delay:calc(var(--i,0) * .14s + .35s)}
@keyframes unlockDriveIn{from{transform:translateX(-130%)}}
/* two or more at once: a compact row each, the preview beside the name with the key under the name */
.unlock-modal.many .unlock-card{grid-template-columns:minmax(0,112px) minmax(0,1fr);align-items:center;justify-items:start;gap:6px 12px;padding:10px 10px 10px 12px;transform:none;text-align:left}
.unlock-modal.many .unlock-card::before{left:56px;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px}
.unlock-modal.many .unlock-stage{grid-row:1 / span 2;width:100%}
.unlock-modal.many .unlock-use{grid-column:2;width:100%;min-width:0;min-height:40px;padding:0 8px;font-size:14px}
.unlock-modal.many .unlock-stage .mini-lot{zoom:1}
.unlock-modal.many .unlock-stage::after{display:none}
.unlock-modal.many .unlock-text{align-items:flex-start}
.unlock-modal.many .unlock-name{font-size:17px}
.unlock-modal.many .unlock-why{font-size:12px}
/* the next goal: in the garage and under a new unlock */
.garage-next{margin:10px 0 0;padding:7px 10px 8px;border:2.5px solid var(--ink);border-radius:12px;background:var(--sheet-well);box-shadow:0 3px 0 var(--ink);
  font-size:13.5px;line-height:1.35;color:#dfe5f3;text-align:left}
.garage-next:empty{display:none}
.garage-next b{color:var(--cream)}
.garage-next .next-left{font-family:var(--led-font);font-size:19px;line-height:1;color:var(--led);white-space:nowrap}
.garage-next .next-text{display:block}
.garage-next .next-row{display:flex;align-items:center;gap:8px;margin-top:3px}
.garage-next .tile-bar{flex:1;min-width:0;margin-top:0}
.unlock-next{margin-top:14px}
@media (max-width:640px){
  .unlock-modal h2{margin-bottom:10px;font-size:22px}
  .unlock-name{font-size:20px}
  .unlock-modal .primary-button{min-height:48px;margin-top:12px;font-size:17px}
  .garage-next{font-size:12.5px;padding:6px 9px 7px}
}
@media (max-width:360px){.unlock-modal.many .unlock-card{grid-template-columns:minmax(0,96px) minmax(0,1fr)}.unlock-modal.many .unlock-use{font-size:13px}}
@media (prefers-reduced-motion:reduce){
  .unlock-card::before,.unlock-stage::before,.unlock-stage::after,
  .unlock-modal.arriving .unlock-card,.unlock-modal.arriving .unlock-stage .vehicle{animation:none}
}

/* a name in flair on a light notice banner sits on a dark pill, so the pale paints still read. Only the top and
   bottom padding go: the sides keep each effect's room (Signal's light, Moon, Route...) so nothing sits on a letter. */
.notice-text .notice-who.flair{margin:0;padding-top:0;padding-bottom:0;border-radius:7px;background:var(--ink)}
.notice-text .notice-who.flair:not([data-fc]) .fl-t{color:var(--cream)}
.notice-text .notice-who.flair[data-fe="einstein"]{padding:2px 10px}
.notice-text .notice-who.flair[data-fe="ultrainstinct"]{padding:4px 10px 2px}
.notice-text .notice-who.flair[data-fe="thunderclap"]{padding:4px 10px 2px}
.dc-flair{display:block;margin-top:3px;font-size:11px;color:var(--led);text-align:center}

/* ---- The Ticket Machine pop-up ---- */
.tier-common{--tier:#c6cee3}.tier-uncommon{--tier:#3ddc84}.tier-rare{--tier:#4fd8ff}.tier-epic{--tier:#c49bff}.tier-legendary{--tier:#ffb627}.tier-mythical{--tier:#ff7ab8}.tier-celestial{--tier:#ffe6b3}
/* Celestial's name is written in a galaxy wherever its tier is named (the odds, the prize, the flair tiles, the card) */
:is(.fp-tier,.ft-name,.fare-tile small,.rs-ctier):is(.tier-celestial *,.tier-celestial){color:transparent;background:linear-gradient(90deg,#ffd27a,#fff6e4,#ff6ad5,#a77bff,#6fd0ff,#ffd27a) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:fl-slide 4s linear infinite}
.fare-balance{margin:0 0 10px;font-size:15px;color:#dfe5f3}
.fare-count{font-family:var(--led-font);font-size:30px;line-height:1;color:var(--led);vertical-align:-3px}
.fare-free{color:var(--green)}
/* The machine (app.js ticketMachine): a station's ticket vending machine, its prize printed as a one-way ticket
   (ticketCard) and fed out of its tray. Flat CSS for slower phones: gradients and shadows that never change, no
   filters or blends, nothing that loops; the ticket's feed (and a foil sweep from Legendary up) runs once. */
.tvm{position:relative;z-index:1;max-width:280px;margin:2px auto 0;padding:0 0 14px;border:3px solid var(--ink);border-radius:16px 16px 12px 12px;overflow:hidden;
  background:linear-gradient(90deg,#171b25,#353d4f 14%,#2b3242 55%,#232937 86%,#151922);box-shadow:0 5px 0 var(--ink)}
.tvm-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:8px 12px 6px;background:linear-gradient(#173a8c,#0d2560)}
.tvm-sign{font-size:21px;font-weight:800;line-height:1;letter-spacing:4px;color:#fff;text-shadow:0 0 8px rgba(150,190,255,.6)}
.tvm-line{font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#a9bde9;white-space:nowrap}
/* the livery: orange, magenta, blue */
.tvm-stripe,.tk-stripe{height:8px;background:linear-gradient(#f47b20 0 34%,#b5268f 0 67%,#2a62c9 0)}
.tvm-screen{position:relative;margin:12px 12px 0;border:3px solid #07090d;border-radius:8px;overflow:hidden;text-align:center;color:#fff;
  background:linear-gradient(#2459c4,#173d8e);box-shadow:0 0 0 3px #424b60}
.tvm-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%)}
.tvm-bar{display:flex;justify-content:space-between;gap:6px;padding:3px 8px;background:#0b2462;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#cfe0ff}
.tvm-big{display:block;padding:9px 6px 0;font-size:22px;font-weight:800;line-height:1.1;letter-spacing:1px}
.tvm-big.go{color:#7dffb7}
.tvm-big.short{color:#ffd27a}
.tvm-small{display:block;padding:3px 8px 10px;font-size:12px;line-height:1.3;color:#d9e5ff}
.tvm-panel{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 16px 0}
.tvm-slot{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#99a5bf}
.tvm-slot i{display:block;width:46px;height:8px;border-radius:4px;background:#05070b;box-shadow:inset 0 2px 2px #000,0 1px 0 rgba(255,255,255,.14)}
.tvm-keys{width:42px;height:28px;border-radius:4px;background:radial-gradient(circle,#56617a 0 3.5px,transparent 4px) 0 0/14px 14px,#1a1f2a;box-shadow:inset 0 1px 2px #000}
.tvm-led{width:9px;height:9px;border-radius:50%;background:#2a8a55;box-shadow:inset 0 -1px 1px rgba(0,0,0,.4)}
.tvm.ready .tvm-led,.tvm:has(.tvm-big.go) .tvm-led{background:#3ddc84;box-shadow:0 0 7px #3ddc84}
/* the tray: its lip lights amber while a ticket waits in it */
.tvm-tray{position:relative;height:30px;margin:24px 18px 0;border-radius:8px 8px 4px 4px;background:linear-gradient(#020305,#161b25);box-shadow:inset 0 4px 6px #000,0 0 0 2px #485268}
.tvm-tray::before{content:"Take ticket";position:absolute;left:0;right:0;top:-14px;font-size:8px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;text-align:center;color:#8691ac}
.tvm.ready .tvm-tray{box-shadow:inset 0 4px 6px #000,0 0 0 2px var(--led),0 0 12px rgba(255,182,39,.5)}
/* the ticket comes out of the tray's mouth: .fare-out starts there (over the machine's foot) and clips what's still
   inside the machine, so the ticket slides down out of it. Each step (feed, punch, lift) starts as far in as the
   redraw is late (--fed, --punched, --left, set by app.js), so a redraw never plays one twice. */
.fare-out{position:relative;z-index:2;display:flex;justify-content:center;max-width:280px;margin:-32px auto 12px;padding:0 0 8px;overflow:hidden;cursor:pointer}
.fare-out-gap{height:14px}
/* out of tickets: the invite reminder (renderRollTab) */
.fare-invite{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin:0 0 12px;padding:10px 12px;border:2px dashed var(--led);border-radius:12px;background:#3a2c10}
.fare-invite p{margin:0;font-size:15px;line-height:1.35;color:var(--cream)}
.fare-invite .sticker-btn{white-space:nowrap}
.fare-out.feeding .njt-ticket{animation:tk-feed 1.15s cubic-bezier(.3,.6,.35,1) var(--fed,0ms) both}
@keyframes tk-feed{0%{transform:translateY(-101%)}18%,26%{transform:translateY(-74%)}46%,54%{transform:translateY(-38%)}100%{transform:none}}
.fare-out.leaving .njt-ticket{animation:tk-board .3s ease-in var(--left,0ms) both}
@keyframes tk-board{to{transform:translateY(-12px) scale(1.05);opacity:0}}
/* ten at once (4.86.0): ten tickets print one after another (--gap apart, app.js PILE_MS) and pile up in the tray,
   each a little lower and askew (--dx, --dy, --rot, set per ticket), the last on top with the punch. They all share
   one grid cell; the pile's own place is the transform they come to rest on. */
.fare-out.multi{display:grid;grid-template-columns:100%;justify-items:center;padding-bottom:40px}
.fare-out.multi .njt-ticket{grid-area:1/1;width:calc(100% - 44px);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg))}
.fare-out.multi.feeding .njt-ticket{animation:tk-pile var(--feed,300ms) cubic-bezier(.2,.9,.3,1.25) calc(var(--fed,0ms) + var(--i,0) * var(--gap,90ms)) both}
@keyframes tk-pile{from{transform:translateY(-101%)}}   /* shot out in one go, a little past its place on the pile and back */
.fare-out.multi.leaving .njt-ticket{animation:tk-board .3s ease-in calc(var(--left,0ms) + var(--i,0) * 15ms) both}
/* all ten, after the film (app.js tenCard): a tile each in its tier's colour, the best one outlined */
.fare-ten{margin:12px 0 0}
.ften-sum{margin:0 0 6px;font-size:13px;font-weight:600;color:#dfe5f3;text-align:center}
.ften-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.ften{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;padding:6px 8px;border:2px solid var(--ink);border-radius:12px;background:var(--lcd);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--tier) 55%,transparent);overflow:hidden}
.ften.best{box-shadow:inset 0 0 0 3px var(--tier),0 0 10px color-mix(in srgb,var(--tier) 60%,transparent)}
.ften-tier{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--tier)}
.ften .ften-name{max-width:100%;font-size:15px;font-weight:700;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--cream)}
.ften .ften-name.flair{max-width:calc(100% + 14px)}
.ften-tix{font-family:var(--led-font);font-size:22px;font-weight:400;line-height:1.1;color:var(--led)}
.ften strong{max-width:100%;font-size:12.5px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ften small{font-size:11px;color:#c6cee3}
.ften small.ften-new{font-size:15px;font-weight:800;letter-spacing:.5px;color:#ffe03a;text-shadow:0 1px 0 var(--ink)}   /* yellow and big (owner, 2026-11-02) */
/* NJ Transit's pink ticket (owner, 2026-10-02): pink card printed in black, the line's name repeated faintly across
   it, the trip, the fare, when, its number and a code. One SVG for the pattern, drawn once. */
.njt-ticket{position:relative;width:calc(100% - 44px);max-width:236px;overflow:hidden;border-radius:5px;text-align:left;color:#1c1519;
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:11px;line-height:1.25;box-shadow:0 4px 0 rgba(11,16,32,.6);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='40'%3E%3Cg font-family='Arial,sans-serif' font-size='8' font-weight='700' fill='%23c25f80' fill-opacity='.12'%3E%3Ctext x='2' y='12'%3EGRIDLOCK TRANSIT%3C/text%3E%3Ctext x='-64' y='32'%3EGRIDLOCK TRANSIT%3C/text%3E%3Ctext x='68' y='32'%3EGRIDLOCK TRANSIT%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0/132px 40px,
    linear-gradient(170deg,#fad6e0,#f3bfce 60%,#efb4c5)}
.tk-top{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 10px;padding:8px 0 5px;border-bottom:1.5px solid rgba(28,21,25,.35)}
.tk-agency{font-family:system-ui,sans-serif;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;white-space:nowrap}
.tk-type{padding:0 4px;border:1.5px solid currentColor;border-radius:3px;font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap}
.tk-route{padding:7px 10px 0}
.tk-stop{display:grid;grid-template-columns:36px 1fr;align-items:baseline}
.tk-stop small,.tk-kind span,.tk-foot{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:#5c4650}
.tk-stop b{min-width:0;font-size:14px;text-transform:uppercase}
.tk-kind{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:7px 10px 0}
.tk-kind b{font-size:14px}
.tk-foot{display:flex;justify-content:space-between;gap:6px;padding:3px 10px 0;font-weight:700}
.tk-foot span{white-space:nowrap;letter-spacing:.4px}
.tk-no{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px 9px;font-size:10px;font-weight:700}
.tk-code{width:96px;height:16px;background:repeating-linear-gradient(90deg,#1c1519 0 2px,transparent 2px 3px,#1c1519 3px 4px,transparent 4px 7px,#1c1519 7px 10px,transparent 10px 11px,#1c1519 11px 12px,transparent 12px 15px)}
/* the conductor's punches: holes through the card, showing the pop-up behind it (one to three, by the tier), each
   overlapping the others in a small grouping (owner, 2026-10-03), as quick squeezes of the punch leave them (app.js
   sets each one's translate off the first). The ticket gives a touch under each bite (.squeeze: its punch end dips a pixel and
   springs back) and the hole is there at once. No chad (owner, 2026-10-03). The holes are flat, with no shading of
   their own: each one's inner shadow drew its outline inside the others where they overlap (owner, 2026-10-03). */
.tk-hole{position:absolute;right:16px;top:44px;width:13px;height:13px;border-radius:50%;background:#394670;animation:tk-punch .1s ease-out var(--punched,0ms) both}
@keyframes tk-punch{from{transform:scale(.8)}}
.fare-out.squeeze{transform-origin:15% 30%;animation:tk-bite .14s ease-out var(--squeezed,0ms) both}
@keyframes tk-bite{from{transform:none}35%{transform:translateY(1px) rotate(.4deg)}to{transform:none}}
/* the film opens from black as the ticket is boarded */
dialog.roll-stage[open],dialog.roll-stage[open]::backdrop{animation:rs-board .35s ease-out}
@keyframes rs-board{from{opacity:0}}
/* at Penn, after the film: what the trip won */
.fare-arrived{margin:14px 0 4px}
.fare-share{display:block;margin:10px auto 0}
/* The prize card to share (app.js preparePrizePicture, flairgif.js): the roll's card (.rs-prize, as the doors open
   on it) built off screen at 360 x 480 on the station's dark, its tier's glow behind it and the roll's number under
   it; pictured, then removed */
.fg-hold{position:fixed;left:-10000px;top:0;pointer-events:none}
.fg-stage{position:relative;box-sizing:border-box;width:360px;height:480px;overflow:hidden;background:#03050b;color:var(--cream);font-family:var(--font);--glow:var(--tier)}
.fg-stage .rs-prize{--cw:264px;top:45%}
.fg-stage .rs-back{display:none}   /* a picture is flat: the card's back, turned away in 3D, would cover its face */
/* the foil and glare follow a tilting finger, so a picture has no use for them; and an iPhone pictures their blend
   (color-dodge, the dots at a fifth) as a solid blue wedge under a white grid (owner, 2026-10-03) */
.fg-stage .rs-foil,.fg-stage .rs-glare{display:none}
.fg-foot{position:absolute;left:0;right:0;bottom:15px;text-align:center;font:600 13px/1.3 var(--font);letter-spacing:.3px;color:#8b95b3}
.fg-foot b{color:var(--cream)}
.fare-prize{padding:12px 10px;border:3px solid var(--ink);border-radius:16px;background:var(--lcd);text-align:center;box-shadow:inset 0 0 0 3px var(--tier),0 4px 0 var(--ink)}
.fp-tier{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--tier)}
.fare-prize .fp-name{margin:6px auto 0}
.fare-prize .mini-lot{width:min(100%,200px);margin:8px auto 2px}
.fp-title{display:block;margin-top:2px;font-size:16px}
.fp-tickets{display:block;margin-top:4px;font-family:var(--led-font);font-size:42px;font-weight:400;line-height:1;color:var(--led)}
.fp-note{display:block;margin-top:3px;font-size:13px;color:#c6cee3}
/* how to get tickets, posted like a station's fare chart */
.fare-chart{margin:2px 0 0}
.fare-chart summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:#dfe5f3}
/* the two fold-outs show which way they're folded (a flex summary drops the browser's own triangle) */
:is(.fare-chart,.fare-odds)>summary{list-style:none}
:is(.fare-chart,.fare-odds)>summary::-webkit-details-marker{display:none}
:is(.fare-chart,.fare-odds)>summary::before{content:"▸";width:18px;color:var(--led)}
:is(.fare-chart,.fare-odds)[open]>summary::before{content:"▾"}
.fc-card{overflow:hidden;border:3px solid var(--ink);border-radius:10px;background:#fdfbf4;color:#15171c;box-shadow:0 3px 0 var(--ink)}
.fc-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.3}
.fc-table td{padding:7px 10px;border-top:1px solid rgba(21,23,28,.12);vertical-align:top}
.fc-table tr:first-child td{border-top:0}
.fc-table .fc-pays{font-weight:800;color:#1d3f8f;text-align:right;white-space:nowrap}
.fc-cost{margin:0;padding:7px 10px;background:#e9e3d2;font-size:13px;font-weight:700;text-align:center}
.fare-rules{margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.4;color:#c6cee3}
.fare-rules li+li{margin-top:3px}
@media (prefers-reduced-motion:reduce){.fare-out .njt-ticket,.fare-out .tk-hole,.fare-out.squeeze,dialog.roll-stage[open],dialog.roll-stage[open]::backdrop{animation:none!important}}
.fp-name{font-size:24px;font-weight:700;line-height:1.3;color:var(--cream)}
.fare-odds{margin:4px 0 0}
.fare-odds summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:#dfe5f3}
.fare-odds-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.fare-odds-table th{padding:4px 6px;font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;text-align:left;color:#c6cee3}
.fare-odds-table td{padding:4px 6px;border-top:1px dashed rgba(11,16,32,.45)}
.fare-odds-table .ft-name{font-weight:700;color:var(--tier)}
.fare-preview{margin:0 0 6px;padding:10px;border:3px solid var(--ink);border-radius:14px;background:var(--lcd);text-align:center}
.fare-preview small{display:block;font-size:11px;color:var(--dim)}
.modal h3.fare-h{margin:12px 0 6px}
.fare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fare-tile{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0;min-height:66px;padding:7px 8px;border:3px solid var(--ink);border-radius:14px;background:var(--lcd);box-shadow:0 3px 0 var(--ink);color:var(--cream);font:inherit;text-align:left;overflow:hidden}
.fare-tile .fp-name{max-width:100%;font-size:16px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fare-tile .fp-name.flair{max-width:calc(100% + 14px)}
.fare-tile .fp-name.flair[data-fe="einstein"]{max-width:calc(100% + 22px)}
.fare-tile .fp-name.flair[data-fe="ultrainstinct"]{max-width:calc(100% + 20px)}
.fare-tile strong{font-size:13px;line-height:1.2}
.fare-tile small{font-size:11px;color:var(--tier,var(--dim))}
.fare-tile.chosen{box-shadow:inset 0 0 0 3px var(--green),0 3px 0 var(--ink)}
.fare-left{margin:8px 0 0;font-size:13px;color:#c6cee3}
/* this week's new flair (4.46.0), on the Roll tab: a tap opens Your flair */
.fare-new{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:44px;margin:8px 0 0;padding:8px 12px;border:2px dashed var(--led);border-radius:12px;
  background:rgba(255,182,39,.08);color:#dfe5f3;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.fare-new b{color:var(--led);font-size:14px}
/* Your flair's chips (app.js FLAIR_FILTERS) and, under each slot, a heading per tier in its colour */
.fare-filters{gap:5px;margin:10px 0 0}
.fare-filters .sf-chip{flex:1 1 auto;justify-content:center;gap:4px;padding:0 7px}
.modal h4.fare-sub{margin:12px 0 6px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--tier,#9fabc8)}
/* not won yet: the look shown as it would be worn, a little dimmed, a dashed edge and a lock, no press */
.fare-tile.locked{border-style:dashed;border-color:#2c3550;background:#0b0f18;box-shadow:none}
.fare-tile.locked:active{transform:none;box-shadow:none}
.fare-tile.locked .fp-name{opacity:.85}
.fare-tile.locked strong{color:#aab3cb}
/* every tile's look moves only while it's on screen (app.js .in-view), held still off screen, for slower phones */
.fare-tile:not(.in-view) .flair :is(.fl-t,.fl-l,.fl-m,.fl-p,.fl-p *),.fare-tile:not(.in-view) .flair::before,.fare-tile:not(.in-view) .flair::after,
.fare-tile:not(.in-view) .flair .fl-p::before{animation-play-state:paused}
.fare-tile:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.sheet-foot.fare-foot{display:flex;flex-wrap:wrap;gap:8px;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.fare-foot .sticker-btn.fare-wear{flex-basis:100%}   /* Wear it over the two Roll keys (4.86.0: Roll and Roll x10 share a row) */
.fare-foot .sticker-btn{flex:1;min-width:0}
.fare-roll:disabled{opacity:.6}
.fare-badge{background:var(--green);color:var(--ink)}
.garage-tile.for-sale{border-color:var(--led);border-style:dashed}
.garage-tile.for-sale .tile-state{color:var(--led)}

/* ---- A roll of the Ticket Machine, full screen (app.js playRoll) ----
   Phases on .rs-scene[data-phase]: trip (the train crosses New Jersey into the tunnel, drawn by rolltrip.js on
   #rs-trip, which covers the world), pull (cut to the platform: the train comes in and brakes), stop (the camera
   eases onto the doors), tease (the door lamp, the frame light and the sign step up toward the tier: data-glow; from
   Epic up it stalls on the way, with the letterbox and the station going dark: .stall, .surge, .letterbox and .rs-dim,
   below, owner 2026-10-01),
   dark and crack (a Mythical's fake-out: the lights die,
   the screen cracks), ready (tap, or from Epic up hold, to open), open (the doors blast open into the light), reveal
   (the card flies out) and prize. --glow is the colour of the current step; Mythical runs the rainbow.
   app.js moves the camera (.rs-cam, world units: the middle car's doorway centre is 0,0) and the station's other two
   depths with it (.rs-far, .rs-near), the train and its reflection, the
   doors while they're held and the card's tilt, one transform each per frame; everything else here animates
   transform and opacity (and filter on the small door lamp alone). The station is built once as SVG and gradients and only ever moved (or, when it can be, drawn from bitmaps of it on canvas: .rs-station, below). Its lamps are white:
   no tier colour shows before the tease. The two canvases are rollfx.js's: #rs-fx-back behind the train (platform
   motes, rays, aura) and #rs-fx-front over it (sparks, lightning, bursts, confetti), under the card; #rs-trip sits
   between them. */
dialog.roll-stage{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#03050b;color:var(--cream);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
dialog.roll-stage[open]{display:block}
dialog.roll-stage::backdrop{background:#03050b}
.rs-scene{position:absolute;inset:0;overflow:hidden;contain:strict;--glow:transparent;cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.rs-scene[data-glow="common"]{--glow:#f4f1e8}
.rs-scene[data-glow="uncommon"]{--glow:#3ddc84}
.rs-scene[data-glow="rare"]{--glow:#4fd8ff}
.rs-scene[data-glow="epic"]{--glow:#c49bff}
.rs-scene[data-glow="legendary"]{--glow:#ffb627}
.rs-scene[data-glow="mythical"]{--glow:#ff4d5e}
.rs-scene[data-glow="dark"]{--glow:#000}
.rs-scene[data-glow="celestial"]{--glow:#fff1d6}
.rs-world{position:absolute;inset:0;will-change:transform}
/* the far wall of the station: dark tile courses; in the reveal it glows the tier's colour behind the card */
.rs-wall{position:absolute;inset:-30px;background:linear-gradient(180deg,#03050a 0%,#080c18 38%,#10172b 60%,#070a12 100%)}
.rs-wall::before{content:"";position:absolute;inset:0;opacity:.7;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 44px),repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 3px,transparent 3px 88px)}
.rs-wall::after{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at 50% 46%,var(--glow) 0,rgba(0,0,0,0) 62%);transition:opacity .5s}
.rs-scene:is([data-phase="reveal"],[data-phase="prize"]) .rs-wall::after{opacity:.38}
.rs-scene:is([data-phase="reveal"],[data-phase="prize"]) .rs-wall::before{opacity:.25}
.rs-fx{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
/* the station on canvas (rollstation.js, app.js rollSetOn): Safari redraws SVG at every new scale, and the camera
   changes scale all through a roll, so when it can, the station is drawn from bitmaps on two canvases (the far side
   under #rs-fx-back, the rest over it and under .rs-cam), 16px past each edge so a shake never shows theirs.
   .canvasset hides the DOM's station art (visibility: never painted) and leaves the door parts over the canvas,
   except in the trip and the pull, where the canvas draws the car's doors (a column passes in front of them) */
.rs-station{position:absolute;left:-16px;top:-16px;display:block;width:calc(100% + 32px);height:calc(100% + 32px);pointer-events:none;opacity:0;visibility:hidden;will-change:transform}
.rs-scene.canvasset .rs-station{opacity:1;visibility:visible}
.rs-scene.canvasset :is(.rs-far,.rs-near,.rs-ceil,.rs-cars,.rs-haze,.rs-ao,.rs-plat,.rs-refl){visibility:hidden}
.rs-scene.canvasset:is([data-phase="trip"],[data-phase="pull"]) :is(.rs-lamp,.rs-frame,.rs-doorway,.rs-spill){visibility:hidden}
/* the haze and the shade over the doors, in world units (rollstation.js OVER), shown with them */
.rs-over{position:absolute;left:-150px;top:-262px;width:300px;height:400px;pointer-events:none;visibility:hidden}
.rs-scene.canvasset:not([data-phase="trip"]):not([data-phase="pull"]) .rs-over{visibility:visible}
.rs-fx.front{z-index:2}
/* the trip across the state: rolltrip.js's canvas over the world (hidden under it), under the front effects so the
   cut's flash shows over it. .notrip: it failed, so the platform shows instead. .primed: from the tunnel the world
   is shown under the canvas, so the station is drawn before the cut rather than in its first frame */
.rs-trip{position:absolute;inset:0;z-index:1;display:none;width:100%;height:100%;pointer-events:none}
.rs-scene[data-phase="trip"]:not(.notrip) .rs-trip{display:block}
.rs-scene[data-phase="trip"]:not(.notrip):not(.primed) .rs-world{visibility:hidden}
/* the camera: app.js writes its transform, which maps world units onto the screen */
.rs-cam{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform}
.rs-scene[data-phase=""] :is(.rs-cam,.rs-far,.rs-near){visibility:hidden}
.rs-scene:is([data-phase="reveal"],[data-phase="prize"]) :is(.rs-cam,.rs-far,.rs-near,.rs-vig,.rs-station){opacity:0;transition:opacity .3s}
/* The station's other two depths (index.html): the far side behind the train and the columns in front of it. app.js
   writes each one's transform with the camera's, scaled and slid by its depth. */
.rs-far,.rs-near{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;will-change:transform;pointer-events:none}
.rs-far svg{position:absolute;left:-3000px;top:-600px}
/* a column of the platform: a painted steel I-beam, lit from the lamps on both edges, soft-edged since it's close
   and out of focus, on a plinth, with its number plate and a faint streak of itself in the floor */
.rs-col{position:absolute;top:-276px;width:60px;height:416px;
  background:linear-gradient(90deg,rgba(9,12,20,0) 0,#0b0f19 5px,#3b4763 9px,#1a2133 15px,#121827 46px,#2e3a55 52px,#0b0f19 55px,rgba(9,12,20,0) 60px),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,0) 30%,rgba(0,0,0,.3));background-blend-mode:normal}
.rs-col::before{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:16px;border-radius:2px 2px 0 0;box-shadow:0 6px 10px 2px rgba(0,0,0,.55);
  background:linear-gradient(180deg,#3a4560 0 1.5px,rgba(0,0,0,0) 1.5px),linear-gradient(90deg,rgba(9,12,20,0),#121725 5px,#2a3449 10px,#121725 calc(100% - 8px),rgba(9,12,20,0))}
.rs-col::after{content:attr(data-n);position:absolute;left:16px;right:16px;top:150px;height:22px;border-radius:3px;background:#17213a;box-shadow:inset 0 0 0 1.5px #8d9ab8;
  font:700 14px/22px var(--font);color:#e8edf7;text-align:center;letter-spacing:1px}
/* the nearest row of ceiling lights, in fittings, at the columns' depth */
.rs-fit{position:absolute;left:-3000px;top:-276px;width:6000px;height:44px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 12px,#0b0e17 12px 16px,rgba(0,0,0,0) 16px),
    linear-gradient(90deg,#f6f9ff 0 240px,rgba(0,0,0,0) 240px) 30px 16px/300px 4px repeat-x,
    linear-gradient(180deg,rgba(220,230,255,.22),rgba(220,230,255,0)) 10px 18px/280px 26px repeat-x}
.rs-tsign{position:absolute;top:-262px;width:190px;height:48px;padding-top:12px;display:flex;justify-content:center;align-items:baseline;gap:12px;border-radius:5px;
  background:linear-gradient(180deg,#151c2e,#0a0e18);box-shadow:inset 0 0 0 2px #2d3754;font:700 28px/1 var(--font);color:#eef2fa;letter-spacing:3px}
.rs-tsign b:last-child{font-size:34px}
.rs-tsign::before{content:"";position:absolute;left:30px;right:30px;top:-40px;height:40px;background:linear-gradient(90deg,#1b2030 0 3px,transparent 3px calc(100% - 3px),#1b2030 0)}
/* the vignette, over the station and under the sign, the card and the buttons */
.rs-vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 70% at 50% 50%,rgba(2,3,8,0) 55%,rgba(2,3,8,.55) 100%)}
.rs-train{position:absolute;left:0;top:0;will-change:transform}
.rs-cars{position:absolute;left:-1940px;top:-174px;overflow:visible}
/* the motion blur: the cars again, smeared sideways, over the train while it's fast (app.js fades it with the speed) */
.rs-blur{position:absolute;left:-1940px;top:-174px;overflow:visible;opacity:0;pointer-events:none;will-change:opacity}
.rs-scene:not([data-phase="pull"]) .rs-blur{display:none}
/* the canvases draw the pull's blur themselves: the SVG one's filter would be rendered (all but invisibly) under them,
   a long stall on an iPhone the moment the train comes in */
.rs-scene.canvasset .rs-blur{display:none}
/* the ceiling over the platform behind the train, and the platform in front of it: its edge at the car's floor
   (world y 136 to 141 is the gap, then the nosing and the yellow strip), so the wheels are hidden */
.rs-ceil{position:absolute;left:-3000px;top:-1300px}
.rs-plat{position:absolute;left:-3000px;top:136px}
/* each lamp's light through the haze: brighter bands on the train and the floor under it, where it stays as the
   train slides by; and the shade where the platform's edge meets the car */
.rs-haze{position:absolute;left:-3000px;top:-262px;width:6000px;height:400px;pointer-events:none;
  background:radial-gradient(ellipse 120px 400px at 50% 0,rgba(228,236,255,.13),rgba(228,236,255,.04) 55%,rgba(228,236,255,0)) -150px 0/300px 100% repeat-x}
.rs-ao{position:absolute;left:-3000px;top:100px;width:6000px;height:38px;pointer-events:none;background:linear-gradient(180deg,rgba(3,4,9,0),rgba(3,4,9,.5))}
.rs-refl{position:absolute;left:-1940px;top:138px;pointer-events:none;will-change:transform}
/* the door frame's light on the floor in front of the doors: the step's colour, so only from the tease */
.rs-spill{position:absolute;left:-190px;top:141px;width:380px;height:150px;opacity:0;pointer-events:none;background:radial-gradient(ellipse 50% 100% at 50% 0,var(--glow),rgba(0,0,0,0));transition:opacity .3s}
.rs-scene:is([data-phase="tease"],[data-phase="ready"],[data-phase="open"]) .rs-spill{opacity:.42}
/* the doors this roll opens, laid over the middle car's drawn ones */
.rs-doorway{position:absolute;left:-76px;top:-136px;width:152px;height:272px;overflow:hidden;border:4px solid var(--ink);background:#05070c}
.rs-light{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at 50% 50%,#fff 0%,#fff 18%,var(--glow) 48%,rgba(0,0,0,0) 90%);will-change:opacity}
/* stainless, lit from the lamp over them: a highlight at the top by the seam, darker toward the sill */
.rs-door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(180deg,#eef1f7,#a3adc0);will-change:transform}
.rs-door.l{left:0;border-right:2px solid var(--ink)}
.rs-door.r{right:0;border-left:2px solid var(--ink)}
.rs-door::after{content:"";position:absolute;top:0;bottom:0;width:5px;background:#2a3046}
.rs-door.l::after{right:0}
.rs-door.r::after{left:0}
.rs-door i{position:absolute;left:16%;right:16%;top:11%;height:34%;border:3px solid var(--ink);border-radius:9px;background:linear-gradient(135deg,#2c3a66,#16203d 45%,#3a4a7c 50%,#16203d 56%,#0b1020)}
.rs-door i::before{left:20%;right:20%;top:30%;bottom:16%;border-radius:7px;background:linear-gradient(180deg,#56627e,#2c344b);opacity:.75;box-shadow:0 0 0 3px rgba(150,120,90,.35)}
.rs-door i::after{top:0;bottom:0;left:68%;width:4px;background:linear-gradient(90deg,#2a201b,#6b5546,#2a201b)}
.rs-seam{position:absolute;left:50%;top:0;bottom:0;z-index:2;width:6px;margin-left:-3px;background:linear-gradient(90deg,transparent,#fff 35%,#fff 65%,transparent);opacity:0;will-change:transform,opacity}
.rs-seam::before{content:"";position:absolute;top:0;bottom:0;left:-10px;right:-10px;background:linear-gradient(90deg,transparent,var(--glow) 42%,var(--glow) 58%,transparent);opacity:.6}
.rs-scene:is([data-phase="tease"],[data-phase="ready"]) .rs-seam{opacity:.85}
.rs-scene[data-phase="ready"]:not(.holding) .rs-seam{animation:rs-seam 1s ease-in-out infinite}
@keyframes rs-seam{50%{opacity:.35}}
.rs-scene:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-seam{opacity:0}
.rs-scene:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-door{transition:transform .34s cubic-bezier(.15,.85,.3,1)}
.rs-scene:is([data-tier="epic"],[data-tier="legendary"],[data-tier="mythical"],[data-tier="celestial"]):is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-door{transition:transform .22s cubic-bezier(.3,1.25,.4,1)}
.rs-scene:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-door.l{transform:translateX(-104%)}
.rs-scene:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-door.r{transform:translateX(104%)}
.rs-scene:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-light{opacity:1;transition:opacity .2s}
/* 4.80.1: a Common's light is near white, and the camera flies into it, so the full screen went white like a flash
   bang (owner, 2026-10-20). Its light is a dim, soft grey with no white core */
.rs-scene[data-tier="common"] .rs-light{background:radial-gradient(ellipse at 50% 50%,#cfd0d4 0%,#8e939f 24%,#3c4150 55%,rgba(0,0,0,0) 90%)}
.rs-scene[data-tier="common"]:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"]) .rs-light{opacity:.6;transition:opacity .35s}
/* the door lamp over the doors, and the light around the door frame: both the step's colour */
.rs-lamp{position:absolute;left:-28px;top:-178px;width:56px;height:20px;border:3px solid var(--ink);border-radius:10px;background:#2a3046}
.rs-lamp::after{content:"";position:absolute;left:-44px;right:-44px;top:-34px;bottom:-34px;border-radius:50%;background:radial-gradient(closest-side,var(--glow),rgba(0,0,0,0));opacity:0}
.rs-frame{position:absolute;left:-88px;top:-148px;width:176px;height:284px;border:5px solid var(--glow);border-bottom:0;border-radius:10px 10px 0 0;opacity:0}
/* its glow, inside and out: gradients rather than a blurred box-shadow, which costs a long frame to paint this big */
.rs-frame::before,.rs-frame::after{content:"";position:absolute;pointer-events:none;background-repeat:no-repeat}
.rs-frame::before{inset:0;opacity:.55;background-image:linear-gradient(90deg,var(--glow),transparent),linear-gradient(270deg,var(--glow),transparent),linear-gradient(180deg,var(--glow),transparent);
  background-size:16px 100%,16px 100%,100% 16px;background-position:left,right,top}
.rs-frame::after{inset:-16px -16px 0;opacity:.45;background-image:linear-gradient(270deg,var(--glow),transparent),linear-gradient(90deg,var(--glow),transparent),linear-gradient(0deg,var(--glow),transparent);
  background-size:16px calc(100% - 22px),16px calc(100% - 22px),calc(100% - 44px) 16px;background-position:left bottom,right bottom,top}
.rs-scene:is([data-phase="tease"],[data-phase="ready"],[data-phase="open"]) .rs-lamp{background:var(--glow)}
.rs-scene:is([data-phase="tease"],[data-phase="ready"],[data-phase="open"]) .rs-lamp::after{opacity:.95}
.rs-scene:is([data-phase="tease"],[data-phase="ready"],[data-phase="open"]) .rs-frame{opacity:1}
/* Mythical's rainbow: the door parts' own colour runs round the rainbow (4.46.1). It was a hue-rotate filter until
   then, and Safari draws a filtered element into a picture of its own, made again at every zoom: under the hold's
   creeping, shaking camera that was a new door-sized picture a frame, and an iPhone Home Screen app was closed for
   want of memory as the doors were held (owner, 2026-10-08). A colour change is only a repaint. */
@property --rs-rainbow{syntax:'<color>';inherits:true;initial-value:#ff4d5e}
.rs-scene[data-glow="mythical"] :is(.rs-lamp,.rs-frame,.rs-seam,.rs-light,.rs-spill){--glow:var(--rs-rainbow);animation:rs-rainbow 1.1s linear infinite}
@keyframes rs-rainbow{0%,100%{--rs-rainbow:#ff4d5e}16%{--rs-rainbow:#ffb627}32%{--rs-rainbow:#ffe14d}48%{--rs-rainbow:#3ddc84}
  64%{--rs-rainbow:#4fd8ff}80%{--rs-rainbow:#b07cff}}
/* a Celestial's starlight: the lamp and the frame breathe between gold and a violet-tinged white (their colour, not a
   filter, since 4.46.1, as the rainbow above) */
@property --rs-star{syntax:'<color>';inherits:true;initial-value:#fff1d6}
.rs-scene[data-glow="celestial"] :is(.rs-lamp,.rs-frame,.rs-light,.rs-spill){--glow:var(--rs-star);animation:rs-starlight 2.4s ease-in-out infinite}
@keyframes rs-starlight{0%,100%{--rs-star:#fff1d6}50%{--rs-star:#e4d2ff}}
/* a Celestial's ascent (app.js rollAscend): everything goes black around the black hole on the front canvas */
.rs-scene[data-phase="void"] .rs-dark{opacity:.97;transition:opacity .9s ease-in}
.rs-scene[data-phase="void"] .rs-led{--led-c:#1a1206}
.rs-scene[data-phase="void"] .rs-led-row{text-shadow:none}
/* a Mythical's fake-out: the lights die, then the screen cracks with light */
.rs-dark{position:absolute;inset:-40px;background:#000;opacity:0;pointer-events:none;transition:opacity .4s}
.rs-scene:is([data-phase="dark"],[data-phase="crack"]) .rs-dark{opacity:.94;transition:none;animation:rs-die .7s linear both}
@keyframes rs-die{0%{opacity:.2}12%{opacity:.95}20%{opacity:.35}30%{opacity:.97}42%{opacity:.6}52%,100%{opacity:.94}}
.rs-crack{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none;transform:scale(1.14);transition:opacity .5s,transform .5s}
.rs-crack path{fill:none;stroke:url(#rs-rainbow);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.rs-crack path.glow{stroke-width:14;opacity:.32}
.rs-crack path.core{stroke:#fff;stroke-width:1.4}
.rs-crack g{opacity:0}
.rs-crack[data-stage="1"] .c1,.rs-crack[data-stage="2"] :is(.c1,.c2),.rs-crack[data-stage="3"] g{opacity:1}
.rs-scene[data-phase="crack"] .rs-crack{opacity:1;transform:none;transition:none}
/* The stall (from Epic up, after the tap; app.js rollStall, owner 2026-10-01): .stall on the scene while the climb
   seems to stop on a step. The lamp, the frame light, the seam and the light on the floor flicker and fail in that
   step's own colour (they only darken: nothing takes another colour), and the sign flickers out. .rs-dim darkens the
   station around the doors (app.js sets its opacity: the stalls, and the hold as the doors strain); .letterbox brings
   the cinematic bars in, over the effects and under the sign, the hint and Skip, and keeps them through the hold;
   .surge is the next step slamming in: the dark gone at once, the lamp and the floor overbright for a moment. As the
   doors open everything here snaps away. */
.rs-dim{position:absolute;inset:-40px;opacity:0;pointer-events:none;will-change:opacity;background:radial-gradient(ellipse 50% 46% at 50% 50%,rgba(1,2,6,.56) 0%,rgba(1,2,6,.8) 52%,rgba(1,2,6,.98) 100%);
  transition:opacity .7s cubic-bezier(.4,0,.6,1)}
.rs-scene.holdable .rs-dim{transition:opacity .15s linear}
.rs-scene:is(.surge,[data-phase="open"],[data-phase="reveal"],[data-phase="prize"],[data-phase=""]) .rs-dim{transition:none}
.rs-scene.stall .rs-lamp{animation:rs-lamp-fail 1.1s steps(1,end) forwards}
.rs-scene.stall :is(.rs-frame,.rs-seam){animation:rs-light-fail 1.1s steps(1,end) forwards}
.rs-scene.stall .rs-spill{animation:rs-spill-fail 1.1s steps(1,end) forwards}
.rs-scene.stall .rs-led-row:not(.top){animation:rs-sign-fail .95s steps(1,end) forwards}
@keyframes rs-lamp-fail{0%{filter:none}9%{filter:brightness(.3)}13%{filter:none}27%{filter:brightness(.75)}31%{filter:brightness(.18)}35%{filter:brightness(.95)}
  47%{filter:brightness(.5)}50%{filter:brightness(.12)}55%{filter:brightness(.7)}63%{filter:brightness(.25)}70%{filter:brightness(.55)}76%,100%{filter:brightness(.22)}}
@keyframes rs-light-fail{0%{opacity:1}9%{opacity:.3}13%{opacity:1}27%{opacity:.75}31%{opacity:.12}35%{opacity:.9}47%{opacity:.45}50%{opacity:.08}55%{opacity:.6}63%{opacity:.2}70%{opacity:.45}76%,100%{opacity:.18}}
@keyframes rs-spill-fail{0%{opacity:.42}9%{opacity:.12}13%{opacity:.42}27%{opacity:.3}31%{opacity:.04}35%{opacity:.38}47%{opacity:.18}50%{opacity:.03}55%{opacity:.25}63%{opacity:.08}70%{opacity:.18}76%,100%{opacity:.06}}
@keyframes rs-sign-fail{0%{opacity:1}10%{opacity:.08}15%{opacity:1}33%{opacity:0}39%{opacity:.85}46%{opacity:1}60%{opacity:0}66%{opacity:.55}72%,100%{opacity:0}}
.rs-scene.surge .rs-lamp{animation:rs-lamp-surge .55s ease-out}
.rs-scene.surge .rs-spill{animation:rs-spill-surge .6s ease-out}
@keyframes rs-lamp-surge{from{filter:brightness(2.4)}to{filter:none}}
@keyframes rs-spill-surge{from{opacity:1}to{opacity:.42}}
.rs-bar{position:absolute;left:0;right:0;z-index:3;background:#000;pointer-events:none;will-change:transform;transition:transform .6s cubic-bezier(.2,.8,.25,1)}
.rs-bar.top{top:0;height:calc(66px + env(safe-area-inset-top));transform:translateY(-101%);box-shadow:0 8px 18px 4px rgba(0,0,0,.55)}
.rs-bar.bot{bottom:0;height:calc(96px + env(safe-area-inset-bottom));transform:translateY(101%);box-shadow:0 -8px 18px 4px rgba(0,0,0,.55)}
.rs-scene.letterbox .rs-bar{transform:none}
.rs-scene:is([data-phase="open"],[data-phase="reveal"],[data-phase="prize"],[data-phase=""]) .rs-bar{transition:none}
/* the light that floods out of the doors, and the CSS rays shown when rollfx.js isn't there */
.rs-flood{position:absolute;left:50%;top:50%;width:190vmax;height:190vmax;margin:-95vmax 0 0 -95vmax;border-radius:50%;opacity:0;transform:scale(.04);pointer-events:none;will-change:transform,opacity;
  background:radial-gradient(closest-side,#fff 0,#fff 34%,var(--glow) 62%,rgba(0,0,0,0) 100%)}
.rs-scene[data-phase="open"] .rs-flood{opacity:1;transform:none;transition:transform .5s cubic-bezier(.55,0,.9,.4),opacity .12s}
.rs-scene[data-phase="reveal"] .rs-flood{opacity:0;transform:none;transition:opacity .7s ease-out}
.rs-rays{position:absolute;left:50%;top:47%;width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;display:none;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(var(--glow) 0deg 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 55%);mask:radial-gradient(circle,#000 0,transparent 55%);transition:opacity .6s}
.rs-scene.nofx .rs-rays{display:block}
.rs-scene.nofx:is([data-phase="reveal"],[data-phase="prize"]) .rs-rays{opacity:.4;animation:rs-spin 14s linear infinite}
@keyframes rs-spin{to{transform:rotate(360deg)}}
/* the station sign: amber dot-matrix letters that flip into place, then take the step's colour */
.rs-led{position:absolute;left:50%;top:calc(10px + env(safe-area-inset-top));z-index:4;width:min(344px,calc(100% - 24px));padding:7px 10px 5px;transform:translateX(-50%);
  border:4px solid var(--ink);border-radius:12px;background:#0c0702;box-shadow:0 0 0 2px #2b3350,0 6px 0 rgba(0,0,0,.55);font-family:var(--led-font);color:var(--led-c,var(--led));text-align:center;
  opacity:0;transition:opacity .3s,color .15s;pointer-events:none}
.rs-led::after{content:"";position:absolute;inset:3px;border-radius:7px;background:radial-gradient(circle,transparent .9px,rgba(12,7,2,.6) 1.5px) 0 0/3px 3px;pointer-events:none;will-change:transform}
/* (the dots in a layer of their own: a letter flipping under them doesn't paint them again.) In the tunnel's black,
   once the station is primed under the trip, the sign is drawn too, all but unseen, so the cut doesn't paint it from
   nothing (2026-10-02: the cut's frame was the roll's longest on an iPhone). */
.rs-scene.primed[data-phase="trip"] .rs-led{opacity:.002;transition:none}
.rs-scene.primed[data-phase="trip"] .rs-led-row.top{display:block}
.rs-led-row{display:block;min-height:1em;overflow:hidden;white-space:nowrap;font-size:23px;line-height:1.05;letter-spacing:1px;text-shadow:0 0 8px currentColor}
.rs-led-row.top{font-size:27px;letter-spacing:2px}
.rs-led-row.blink{animation:rs-blink-hard 1s steps(1) infinite}
@keyframes rs-blink-hard{50%{opacity:.15}}
/* hidden on the trip, lit from the cut, and gone as the doors open; at the platform only the train's name shows (an
   empty row takes no room), in the tease only the step */
.rs-scene:not([data-phase=""]):not([data-phase="trip"]):not([data-phase="open"]):not([data-phase="reveal"]):not([data-phase="prize"]) .rs-led{opacity:1}
.rs-scene:not([data-phase="pull"]):not([data-phase="stop"]) .rs-led-row.top{display:none}
.rs-scene:is([data-phase="pull"],[data-phase="stop"]) .rs-led-row:empty{display:none}
.rs-scene:is([data-phase="tease"],[data-phase="ready"],[data-phase="open"]) .rs-led{--led-c:var(--glow)}
.rs-scene:is([data-phase="dark"],[data-phase="crack"]) .rs-led{--led-c:#2a1a06}
.rs-scene:is([data-phase="dark"],[data-phase="crack"]) .rs-led-row{text-shadow:none}
.rs-scene[data-glow="celestial"]:not([data-phase="void"]) .rs-led-row{color:transparent;text-shadow:none;background:linear-gradient(90deg,#ffd27a,#fff6e4,#ff6ad5,#a77bff,#6fd0ff,#ffd27a);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:fl-slide 2.6s linear infinite}
.rs-scene[data-glow="mythical"]:not([data-phase="dark"]):not([data-phase="crack"]) .rs-led-row{color:transparent;text-shadow:none;background:linear-gradient(90deg,#ff4d5e,#ff8a2a,#ffe14d,#3ddc84,#4fd8ff,#b07cff,#ff4d5e);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;animation:fl-slide 1.4s linear infinite}
/* the prize card: it flies out of the doorway spinning, then tilts under a finger with a foil sheen and a glare */
.rs-prize{--cw:min(264px,70vw,calc((100vh - 270px) / 1.42));position:absolute;left:50%;top:47%;z-index:6;width:var(--cw);height:calc(var(--cw) * 1.42);margin:calc(var(--cw) * -.71) 0 0 calc(var(--cw) * -.5);perspective:900px;pointer-events:none}
.rs-prize:empty{display:none}
/* ten at once (4.86.1): the best card steps back and all ten are dealt out over the station (app.js rollDealAll),
   two across on a phone and five on a wide screen, clear of Share and the hint */
.rs-prize.away{opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s}
.rs-all{position:absolute;left:12px;right:12px;top:calc(16px + env(safe-area-inset-top));bottom:calc(152px + env(safe-area-inset-bottom));z-index:6;max-width:520px;margin:0 auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:8px;pointer-events:none}
.rs-all[hidden]{display:none}
@media (min-width:700px){.rs-all{max-width:900px;top:14%;bottom:auto;height:min(380px,52vh);grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}}
.rs-mini{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;min-height:0;padding:4px 6px;overflow:hidden;
  border:3px solid var(--ink);border-radius:12px;background:linear-gradient(160deg,#1c2645,#0b1020);box-shadow:inset 0 0 0 2px var(--tier),0 3px 0 var(--ink);
  text-align:center;color:var(--cream);opacity:0;transform:scale(.3) rotate(-10deg)}
.rs-mini:is(.tier-epic,.tier-legendary,.tier-mythical,.tier-celestial){background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tier) 32%,transparent),transparent 72%),linear-gradient(160deg,#1c2645,#0b1020)}
.rs-mini.best{box-shadow:inset 0 0 0 3px var(--tier),0 0 18px var(--tier),0 3px 0 var(--ink)}
.rs-mini.on{animation:rs-deal .34s cubic-bezier(.2,1.5,.4,1) both}
.rs-all.fast .rs-mini.on{animation:none;opacity:1;transform:none}
@keyframes rs-deal{to{opacity:1;transform:none}}
.rsm-tier{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--tier)}
.rsm-stars{font-size:9px;line-height:1;letter-spacing:1px;color:var(--tier)}
.rs-mini .rsm-name{max-width:100%;font-size:17px;font-weight:700;line-height:1.35;white-space:nowrap}
.rsm-tix{font-family:var(--led-font);font-size:24px;font-weight:400;line-height:1.05;color:var(--led)}
.rs-mini>*{flex-shrink:0}
.rs-mini .mini-lot{width:104px;zoom:.62;margin:2px 0 3px}   /* (it is 44px tall: zoomed down to about 27px) */
.rs-mini strong{max-width:100%;font-size:13px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsm-new{font-size:16px;font-weight:800;letter-spacing:.5px;line-height:1.1;color:#ffe03a;text-shadow:0 1px 0 var(--ink),0 0 8px rgba(255,224,58,.45)}   /* yellow and big (owner, 2026-11-02) */
.rsm-dup{font-size:11px;color:#c6cee3}
/* built ahead and all but invisible while the doors wait (app.js rollStageCard), so the reveal only shows it */
.rs-prize.staged{opacity:.002;pointer-events:none}
.rs-prize.staged::before{opacity:0}
/* the card's halo: a gradient behind it (a blurred shadow on a turning card costs a long frame) */
.rs-prize::before{content:"";position:absolute;inset:-22% -30%;background:radial-gradient(closest-side,var(--glow),rgba(0,0,0,0));opacity:.5;pointer-events:none}
.rs-fly{position:absolute;inset:0;transform-style:preserve-3d}
.rs-fly.go{animation:rs-fly var(--fly,.7s) cubic-bezier(.18,.7,.25,1) both}
.rs-fly.pop{animation:rs-pop .3s cubic-bezier(.2,1.5,.4,1) both}
@keyframes rs-fly{0%{transform:translateY(3%) scale(.04) rotateY(-1080deg) rotateZ(-24deg)}72%{transform:translateY(-2%) scale(1.12) rotateY(-24deg) rotateZ(3deg)}100%{transform:translateY(0) scale(1) rotateY(0) rotateZ(0)}}
@keyframes rs-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.rs-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.rs-face,.rs-back{position:absolute;inset:0;overflow:hidden;border:4px solid var(--ink);border-radius:20px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rs-face{display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 12px 12px;text-align:center;
  background:linear-gradient(170deg,#1d2a55 0%,#0e1730 58%,#090e1e 100%);box-shadow:inset 0 0 0 4px var(--tier),inset 0 0 0 7px var(--ink),0 8px 0 var(--ink)}
.rs-back{transform:rotateY(180deg);background:repeating-linear-gradient(45deg,#16204a 0 12px,#1d2a5a 12px 24px);box-shadow:inset 0 0 0 4px var(--tier),inset 0 0 0 7px var(--ink)}
.rs-back::after{content:"G";position:absolute;left:50%;top:50%;display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border:4px solid var(--ink);border-radius:50%;
  background:var(--led);color:var(--ink);font:700 58px/1 var(--font);box-shadow:0 5px 0 var(--ink),0 0 0 8px rgba(255,182,39,.25)}
.rs-ctier{position:relative;font:700 13px/1 var(--font);letter-spacing:3px;text-transform:uppercase;color:var(--tier)}
.rs-stars{display:flex;justify-content:center;gap:1px;height:26px;font-size:24px;line-height:26px}
.rs-stars i{font-style:normal;color:#ffd23f;-webkit-text-stroke:1.5px var(--ink);text-shadow:0 2px 0 var(--ink),0 0 8px rgba(255,210,63,.7);opacity:0}
.rs-stars i.on{animation:rs-stamp .3s cubic-bezier(.3,1.7,.5,1) both}
@keyframes rs-stamp{from{transform:scale(2.8) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
.rs-art{position:relative;flex:1;align-self:stretch;display:grid;place-items:center;min-height:0;margin:2px 0;padding:8px 4px;overflow:hidden;border:3px solid var(--ink);border-radius:14px;
  background:repeating-conic-gradient(from 0deg at 50% 45%,rgba(255,255,255,.05) 0 9deg,transparent 9deg 18deg),#0a0f20}
.rs-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,var(--tier) 0,rgba(0,0,0,0) 68%);opacity:.42}
.rs-art>*{position:relative}
.rs-cname{max-width:100%;font:700 var(--nfs,34px)/1.15 var(--font);color:var(--cream);text-shadow:0 3px 0 var(--ink)}
.rs-cname.flair[data-fc] .fl-t{text-shadow:none}
.rs-tix{display:grid;justify-items:center;gap:2px}
.rs-tix i{font-style:normal;font-size:62px;line-height:1;filter:drop-shadow(0 4px 0 var(--ink))}
.rs-tix b{font:400 58px/1 var(--led-font);color:var(--led);text-shadow:0 0 14px rgba(255,182,39,.75)}
.rs-title{font:700 20px/1.12 var(--font);color:var(--cream)}
.rs-kind{font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#c6cee3}
/* the foil is three cards wide and tall, so sliding it (a transform) sweeps its band across without showing an edge */
.rs-foil,.rs-glare{position:absolute;pointer-events:none;will-change:transform}
.rs-foil{inset:-100%;transform:translate(-18%,-18%);mix-blend-mode:color-dodge;opacity:.55;background-image:linear-gradient(115deg,transparent 41%,rgba(255,77,94,.55) 44%,rgba(255,225,77,.6) 46.5%,rgba(61,220,132,.6) 49%,rgba(79,216,255,.6) 51.5%,rgba(176,124,255,.55) 54%,transparent 57%);background-size:100% 100%}
.rs-card:is(.tier-common,.tier-uncommon) .rs-foil{mix-blend-mode:overlay;opacity:.8;background-image:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.6) 50%,transparent 56%)}
.rs-card:is(.tier-legendary,.tier-mythical,.tier-celestial) .rs-foil{opacity:.75}
/* a Celestial's card: a night sky with nebulae and stars on the face and the back, a gold edge, starlight stars */
.rs-card.tier-celestial .rs-face{background:radial-gradient(circle at 23% 31%,#fff 0 .8px,transparent 1.5px) 0 0/37px 41px,radial-gradient(circle at 71% 64%,rgba(255,255,255,.85) 0 .6px,transparent 1.2px) 0 0/29px 23px,radial-gradient(circle at 46% 12%,rgba(205,220,255,.8) 0 .5px,transparent 1.1px) 0 0/19px 31px,radial-gradient(circle at 88% 83%,#fff 0 1.1px,rgba(160,200,255,.5) 1.6px,transparent 2.6px) 0 0/83px 67px,
    radial-gradient(60% 35% at 15% 30%,rgba(255,82,200,.42),transparent 70%),radial-gradient(55% 40% at 85% 70%,rgba(56,200,255,.38),transparent 70%),radial-gradient(70% 45% at 55% 15%,rgba(167,123,255,.4),transparent 72%),
    linear-gradient(170deg,#1a0f4a 0%,#0b0a26 55%,#05040f 100%);
  box-shadow:inset 0 0 0 4px #ffd27a,inset 0 0 0 7px var(--ink),0 8px 0 var(--ink)}
.rs-card.tier-celestial .rs-back{background:radial-gradient(circle at 23% 31%,#fff 0 .8px,transparent 1.5px) 0 0/37px 41px,radial-gradient(circle at 71% 64%,rgba(255,255,255,.85) 0 .6px,transparent 1.2px) 0 0/29px 23px,radial-gradient(circle at 46% 12%,rgba(205,220,255,.8) 0 .5px,transparent 1.1px) 0 0/19px 31px,radial-gradient(circle at 88% 83%,#fff 0 1.1px,rgba(160,200,255,.5) 1.6px,transparent 2.6px) 0 0/83px 67px,radial-gradient(55% 40% at 30% 40%,rgba(255,82,200,.4),transparent 70%),radial-gradient(50% 45% at 70% 60%,rgba(56,200,255,.35),transparent 70%),#0b0a26;
  box-shadow:inset 0 0 0 4px #ffd27a,inset 0 0 0 7px var(--ink)}
.rs-card.tier-celestial .rs-art{background:radial-gradient(circle at 23% 31%,rgba(255,255,255,.7) 0 .7px,transparent 1.5px) 0 0/37px 41px,radial-gradient(circle at 71% 64%,rgba(255,255,255,.85) 0 .6px,transparent 1.2px) 0 0/29px 23px,radial-gradient(circle at 46% 12%,rgba(205,220,255,.8) 0 .5px,transparent 1.1px) 0 0/19px 31px,radial-gradient(circle at 88% 83%,#fff 0 1.1px,rgba(160,200,255,.5) 1.6px,transparent 2.6px) 0 0/83px 67px,#05040f}
.rs-card.tier-celestial .rs-art::before{background:radial-gradient(ellipse 55% 40% at 50% 47%,rgba(120,80,230,.4),rgba(255,82,200,.1) 60%,rgba(0,0,0,0) 78%);opacity:1}
.rs-card.tier-celestial .rs-foil{opacity:.4}
.rs-card.tier-celestial .rs-stars{gap:0;font-size:22px}
.rs-card.tier-celestial .rs-stars i{color:#fff6e4;text-shadow:0 2px 0 var(--ink),0 0 8px #ffd27a,0 0 16px rgba(167,123,255,.9)}
.rs-foil::after{content:"";position:absolute;inset:0;opacity:.22;background:radial-gradient(circle,rgba(255,255,255,.9) 0 .8px,transparent 1.4px) 0 0/13px 13px,radial-gradient(circle,rgba(255,255,255,.7) 0 .8px,transparent 1.4px) 6px 7px/17px 17px}
.rs-card:is(.tier-common,.tier-uncommon,.tier-rare) .rs-foil::after{display:none}
.rs-glare{inset:-50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 32%);mix-blend-mode:overlay;will-change:transform}
/* NEW! or Duplicate: a stamp that floats in front of the card */
.rs-stamp{position:absolute;right:-12px;top:33%;padding:5px 11px 4px;border:3px solid var(--ink);border-radius:10px;background:var(--red);color:#fff;font:700 24px/1 var(--font);letter-spacing:1px;
  box-shadow:0 4px 0 var(--ink);opacity:0;transform:translateZ(36px) rotate(12deg);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rs-stamp.dup{right:-8px;background:var(--led);color:var(--ink);font-size:16px;line-height:1.15;text-align:center}
.rs-stamp.on{animation:rs-stamp-in .36s cubic-bezier(.3,1.6,.5,1) both}
@keyframes rs-stamp-in{from{transform:translateZ(36px) rotate(-8deg) scale(3);opacity:0}to{transform:translateZ(36px) rotate(12deg);opacity:1}}
/* hold to open (from Epic up): the ring fills while a finger is down anywhere */
.rs-hold{position:absolute;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));z-index:7;display:grid;place-items:center;width:92px;height:92px;margin-left:-46px;border:3px solid var(--ink);border-radius:50%;
  background:rgba(5,8,16,.75);box-shadow:0 0 22px var(--glow);opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.rs-hold svg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg)}
.rs-hold circle{fill:none;stroke-width:8}
.rs-hold .track{stroke:rgba(255,255,255,.14)}
.rs-hold .fill{stroke:var(--glow);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264}
.rs-scene[data-glow="mythical"] .rs-hold .fill{stroke:url(#rs-rainbow)}
.rs-scene[data-glow="celestial"] .rs-hold .fill{stroke:url(#rs-starlight)}
.rs-hold span{font:700 15px/1 var(--font);letter-spacing:2px;color:var(--cream)}
.rs-scene.holdable .rs-hold{opacity:1;transform:none}
.rs-scene.holdable.holding .rs-hold{transform:scale(1.1)}
/* what a tap does, low in thumb reach, and Skip on the right above it: clear of the tab bar's height (78px), so it
   never sits over a tab the film covers (owner, 2026-10-03: it was over Games) */
.rs-hint{position:absolute;left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));z-index:7;margin:0;text-align:center;font:700 19px/1.2 var(--font);color:var(--cream);
  text-shadow:0 2px 0 var(--ink),0 0 12px rgba(0,0,0,.9);pointer-events:none;animation:rs-blink 1.3s ease-in-out infinite}
.rs-hint:empty{display:none}
@keyframes rs-blink{50%{opacity:.45}}
.rs-skip{position:absolute;right:16px;bottom:calc(98px + env(safe-area-inset-bottom));z-index:8;min-width:88px;min-height:46px;padding:0 16px;border:3px solid var(--sheet-line);border-radius:14px;
  background:rgba(14,23,48,.82);color:var(--cream);font:700 16px var(--font);box-shadow:0 3px 0 var(--ink)}
.rs-skip[hidden]{display:none}
/* Share on the prize, centred just above "Tap to continue" (Skip is gone by then) */
.rs-share{position:absolute;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));z-index:8;min-width:120px;min-height:46px;padding:0 20px;transform:translateX(-50%);
  border:3px solid var(--ink);border-radius:14px;background:var(--led);color:var(--ink);font:700 17px var(--font);box-shadow:0 3px 0 var(--ink)}
.rs-share:disabled{opacity:.75}
.rs-share[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .rs-scene,.rs-scene *,.rs-scene *::before,.rs-scene *::after{animation:none!important;transition:none!important}
  .rs-scene .rs-hint,.rs-scene .rs-stars i,.rs-scene .rs-stamp.on,.rs-scene .rs-mini.on{opacity:1}
  .rs-scene .rs-mini.on{transform:none}
  .rs-scene .rs-stamp.on{transform:translateZ(36px) rotate(12deg)}
  .rs-scene[data-phase="open"] .rs-flood{opacity:0}
  /* the stall keeps its pause and a gentle dim; no bars sliding in, no flicker */
  .rs-scene .rs-bar{display:none}
  .rs-scene .rs-dim{transition:opacity .6s linear!important}
}

/* ===== 4.55.0: the first minute, live stars, stop filters, the Detour streak and its reminder ===== */
/* MOVES carries the stars the run can still earn, like BEST carries the best result's; past the goal the count
   turns orange, past two stars red (app.js renderLiveStars) */
.score-strip .moves-cell>span{display:inline-flex;align-items:center;gap:4px;height:1em;white-space:nowrap}
.score-strip strong.over{color:#ff9a4d;text-shadow:0 0 8px rgba(255,140,60,.55)}
.score-strip strong.far{color:#ff6b7a;text-shadow:0 0 8px rgba(255,77,94,.55)}
@media (max-width:420px){
  .score-strip .moves-cell>span{gap:2px;letter-spacing:.6px}
  .live-stars{font-size:9px}
}

/* The Start cover for a device that hasn't solved anything: a small lot where a car slides aside and the striped car
   drives out, over and over (5.2 s). One cell is --c. */
.cover-demo{--c:22px;position:relative;flex:none;display:block;margin-right:10px}
.cd-lot{position:relative;display:block;width:calc(var(--c) * 6);height:calc(var(--c) * 4);border:3px solid var(--ink);border-radius:10px;overflow:hidden;
  background-color:var(--lot-base);background-image:linear-gradient(to right,var(--lot-grid) 1px,transparent 1px),linear-gradient(to bottom,var(--lot-grid) 1px,transparent 1px);
  background-size:var(--c) var(--c);animation:cd-lot 5.2s ease-in-out infinite}
/* the gap in the wall at the end of the lane, and the exit's arrow past it */
.cover-demo::after{content:"";position:absolute;right:0;top:calc(3px + var(--c));width:3px;height:var(--c);background:var(--lot-base)}
.cover-demo::before{content:"→";position:absolute;left:calc(100% + 1px);top:calc(3px + var(--c));height:var(--c);display:flex;align-items:center;
  font:400 20px/1 var(--led-font);color:var(--green);text-shadow:0 0 6px rgba(61,220,132,.7)}
.cd-lane{position:absolute;left:0;right:0;top:var(--c);height:var(--c);background:var(--lot-lane);border-top:1.5px dashed var(--lot-dash);border-bottom:1.5px dashed var(--lot-dash)}
.cover-demo .vehicle{cursor:default;pointer-events:none;transition:none}
.cover-demo .car-roof{border-left-width:4px;border-right-width:3px}
.cover-demo .v .car-roof{border-top-width:4px;border-bottom-width:3px}
.cover-demo .target .car-body::after{font-size:11px}
.cd-x{left:0;top:var(--c);width:calc(var(--c) * 2);height:var(--c);animation:cd-x 5.2s ease-in-out infinite}
.cd-b{--car:#2ec4a6;left:calc(var(--c) * 3);top:var(--c);width:var(--c);height:calc(var(--c) * 2);animation:cd-b 5.2s ease-in-out infinite}
.cd-finger{position:absolute;z-index:6;left:calc(var(--c) * 3);top:calc(var(--c) * 1.5);width:var(--c);height:var(--c);pointer-events:none;opacity:0;
  animation:cd-finger 5.2s ease-in-out infinite}
@keyframes cd-lot{0%,84%{opacity:1}88%,93%{opacity:0}100%{opacity:1}}
@keyframes cd-b{0%,16%{transform:none}30%,88%{transform:translateY(var(--c))}92%,100%{transform:none}}
@keyframes cd-x{0%,44%{transform:none}62%,88%{transform:translateX(calc(var(--c) * 6.5))}92%,100%{transform:none}}
@keyframes cd-finger{
  0%,12%{opacity:0;transform:translate(0,0) scale(1.3)}
  17%{opacity:1;transform:translate(0,0) scale(1)}
  30%{opacity:1;transform:translate(0,var(--c)) scale(1)}
  35%{opacity:0;transform:translate(0,var(--c)) scale(1.2)}
  37%{opacity:0;transform:translate(calc(var(--c) * -2.5),calc(var(--c) * -.5)) scale(1.3)}
  43%{opacity:1;transform:translate(calc(var(--c) * -2.5),calc(var(--c) * -.5)) scale(1)}
  58%{opacity:1;transform:translate(calc(var(--c) * 2),calc(var(--c) * -.5)) scale(1)}
  64%,100%{opacity:0;transform:translate(calc(var(--c) * 2.3),calc(var(--c) * -.5)) scale(1.2)}
}
/* the newcomer's cover is busier: a little less room around each part */
.start-cover.newcomer{gap:12px}
@container (max-width:300px){ .cover-demo{--c:17px} .start-cover.newcomer{gap:8px} }
@container (max-width:230px){ .cover-demo{display:none} }
/* a ghost fingertip (the demo's and stop 1's): a cream dot with a soft ring */
.cd-finger::before,.coach-finger::before{content:"";position:absolute;left:50%;top:50%;width:62%;height:62%;transform:translate(-50%,-50%);border-radius:50%;
  background:rgba(253,246,227,.82);border:2.5px solid rgba(11,16,32,.75);box-shadow:0 0 0 5px rgba(253,246,227,.25),0 3px 8px rgba(0,0,0,.45)}
.cd-finger::before{width:70%;height:70%;border-width:2px;box-shadow:0 0 0 3px rgba(253,246,227,.25)}

/* Stop 1's ghost finger: one cell big, dragging the next car of the route (app.js renderCoach) */
.coach-finger{position:absolute;z-index:6;width:16.6667%;height:16.6667%;pointer-events:none;opacity:0;animation:coach 2.4s ease-in-out infinite}
@keyframes coach{
  0%{opacity:0;transform:translate(0,0) scale(1.25)}
  12%,22%{opacity:1;transform:translate(0,0) scale(1)}
  62%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}
  74%,100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.15)}
}
.board:has(.vehicle.dragging) .coach-finger{display:none}
.coach-finger::after{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:700 15px/1 var(--font);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .cd-finger{opacity:.9}
  .coach-finger{opacity:1}
  .coach-finger[data-dir="right"]::after{content:"→"} .coach-finger[data-dir="left"]::after{content:"←"}
  .coach-finger[data-dir="down"]::after{content:"↓"} .coach-finger[data-dir="up"]::after{content:"↑"}
}

/* the stop list's filters (app.js renderLevels) and its Next key */
.stop-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 2px}
.sf-chip{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 12px;border:2.5px solid var(--ink);border-radius:999px;background:var(--sheet-key);
  color:var(--cream);font-weight:700;font-size:14px;box-shadow:0 3px 0 var(--ink)}
.sf-chip b{font-family:var(--led-font);font-weight:400;font-size:19px;line-height:1;color:var(--led)}
.sf-chip[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.sf-chip[aria-pressed="true"] b{color:#7a5b00}
.sf-chip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.stops-foot{gap:8px}
.sheet-foot.stops-foot.has-next{display:flex}
.stops-foot>.sticker-btn:first-child{flex:none}
.stops-foot #stop-next{flex:1;min-width:0}
@media (max-width:640px){ .sheet-foot.stops-foot{display:flex} .sheet-foot.stops-foot:not(.has-next)>.sticker-btn:first-child{flex:1} }

/* the Detour streak: a flame on the Daily key (dim until today's is done) and a line on the Daily card */
.mode-streak{font-family:var(--led-font);font-weight:400;font-size:18px;line-height:1;color:var(--orange);text-shadow:0 0 6px rgba(255,107,61,.45)}
.mode.on .mode-streak{color:#b8400f;text-shadow:none}
.mode-streak.waiting{opacity:.6}
.fc-streak{display:block;margin-top:5px;font-size:14px;font-weight:700;line-height:1.3;color:#b8400f}

/* the result's reminder offer, after today's Daily */
.remind-offer{margin:12px 0 0;padding:10px 12px;border:3px solid var(--sheet-line);border-radius:16px;background:var(--sheet-well)}
.ro-text{margin:0 0 8px;font-size:15px;line-height:1.35;font-weight:600;color:#dfe5f3}
.ro-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ro-row .text-button{min-height:40px;font-size:14px}
.rank-box .rank-sub{margin:0 0 8px;font-size:14px;line-height:1.35;color:#c6cee3}

/* ---------- the Boss Battle (app.js showBoss; the fight on a canvas, boss.js) ----------
   Full screen: the boss's name and HP up top, the arena (one canvas: the boss, the fighters, the hits; their names as
   flair over it), your share and the prizes scrolling below, the buttons in a bar at the bottom in thumb reach. No CSS
   filters anywhere in it: the iPhone roll scene closed the app with them (4.46.1). */
dialog.boss-stage{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  color:var(--cream);background:radial-gradient(120% 70% at 50% 0,#2b2050 0,#121a38 55%,#080c1a 100%)}
dialog.boss-stage[open]{display:flex;flex-direction:column}
dialog.boss-stage::backdrop{background:#080c1a}
.bs-top{position:relative;flex:none;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))}
.bs-top .modal-close{top:calc(8px + env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.bs-head .eyebrow{padding-right:52px;color:#c6cee3}
.bs-head h2{margin:2px 0 0;padding-right:52px;font-size:24px;line-height:1.15;color:var(--led);overflow-wrap:anywhere}
.bs-hp{position:relative;flex:none;height:30px;margin:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));
  border:3px solid var(--ink);border-radius:12px;background:#33101b;overflow:hidden;box-shadow:0 3px 0 var(--ink)}
.bs-hp i{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(#ff8f6e,#e0283c 70%,#b51d33);transition:width .45s ease-out}
.bs-hp b{position:relative;display:block;font-family:var(--led-font);font-weight:400;font-size:24px;line-height:24px;text-align:center;color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.6);white-space:nowrap}
.bs-scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.bs-arena{position:relative;height:clamp(150px,26vh,220px);height:clamp(150px,26dvh,220px);overflow:hidden}
.bs-arena canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bs-names{position:absolute;inset:0;pointer-events:none}
.bs-names>span{position:absolute;transform:translate(-50%,-100%);max-width:96px;overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:700;
  line-height:1.25;white-space:nowrap;padding:0 4px;border-radius:6px;background:rgba(8,12,26,.66)}
.bs-names>span.you{z-index:1;font-size:11px;background:rgba(58,40,10,.85);outline:1.5px solid rgba(255,182,39,.8)}
.bs-more{position:absolute;left:8px;top:8px;min-height:36px;padding:0 12px;border:2.5px solid var(--ink);border-radius:11px;background:var(--sheet-key);
  font-size:14px;font-weight:700;box-shadow:0 2px 0 var(--ink)}
.bs-body{width:100%;max-width:560px;margin:0 auto;
  padding:4px max(16px,env(safe-area-inset-right)) 14px max(16px,env(safe-area-inset-left))}
.bs-body h3{margin:16px 0 6px;font-size:14px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#c6cee3}
.bs-stats{margin-top:4px;text-align:center}
.bs-stats b{font-size:30px}
.bs-line{margin:8px 0 0;font-size:15px;line-height:1.4;color:#dfe5f3}
.bs-wait{margin:10px 0 0;padding:8px 10px;border:2px dashed var(--cyan);border-radius:12px;font-size:14px;line-height:1.4;color:var(--cyan)}
.bs-tiers,.bs-everyone{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.bs-tiers li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:6px 12px;border:2.5px solid var(--ink);border-radius:12px;
  background:var(--panel);font-size:15px;font-weight:600}
.bs-tiers li b{font-family:var(--led-font);font-weight:400;font-size:24px;color:var(--led)}
.bs-tiers li.mine{border-color:var(--led);background:#3a2f1a}
.bs-everyone li{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:6px 10px;border:2px solid var(--line);border-radius:12px;background:var(--panel)}
.bs-everyone li.you{border-color:var(--led)}
.bs-everyone .bs-who{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap}
.bs-everyone .bs-who small{flex:none;min-width:24px;font-size:12px;color:var(--dim)}
.bs-everyone b{font-family:var(--led-font);font-weight:400;font-size:22px;color:var(--led);text-align:right}
.bs-everyone li>small{grid-column:1 / -1;font-size:12px;color:var(--dim);padding-left:30px}
.bs-fallen{margin:14px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
.sheet-foot.bs-foot{display:flex;gap:10px;flex:none;padding:10px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  background:#141c38;border-top:2px solid rgba(0,0,0,.35)}
.bs-foot .sticker-btn{flex:1;min-width:0}
@media (max-height:620px){.bs-arena{height:clamp(140px,26vh,180px);height:clamp(140px,26dvh,180px)}.bs-head h2{font-size:21px}}
.bs-prize{margin:10px 0 0;padding:8px 10px;border:2px dashed var(--led);border-radius:12px;font-size:14px;line-height:1.4;color:var(--led)}
.bs-body #boss-list{display:block;margin:8px 0 0}
/* ---------- your fighter (app.js showCharacter; the pictures are boss.js's) ---------- */
.char-stage{display:grid;place-items:center;margin:6px auto 4px;width:184px;height:190px;border:3px solid var(--ink);border-radius:18px;
  background:radial-gradient(circle at 50% 35%,#3a2f6a 0,#1b2350 60%,#121733 100%);box-shadow:0 4px 0 var(--ink)}
.char-stage canvas{width:168px;height:180px;image-rendering:pixelated}
.char-row{display:flex;flex-wrap:wrap;gap:6px}
.char-swatch{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2.5px solid var(--sheet-line);border-radius:12px;background:var(--sheet-well)}
.char-swatch[aria-checked="true"]{border-color:var(--led);background:#3a2f1a;box-shadow:0 0 0 2px var(--led)}
.char-swatch canvas{width:40px;height:34px;image-rendering:pixelated}
.char-swatch.locked>*:not(.char-lock){opacity:.35}
.char-dot{display:block;width:26px;height:26px;border:2.5px solid var(--ink);border-radius:50%}
.char-lock{position:absolute;right:-4px;top:-6px;font-size:13px;line-height:1}
.sheet-foot.char-foot{display:flex;gap:10px}
.char-foot .sticker-btn{flex:1;min-width:0}
.gift-items{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:15px;font-weight:600;color:var(--cream)}
/* ---------- gear (app.js showGear; the icons are boss.js's), laid out like MapleStory's Equipment and Item windows
   (owner, 2026-10-16): framed windows with a title bar, square cells with the tier's glow, a card like its tooltip ---------- */
.ms-win{margin:0 0 10px;padding:0 6px 6px;border:3px solid var(--ink);border-radius:10px;
  background:linear-gradient(180deg,#c9d4e8 0%,#a9b7d1 100%);box-shadow:inset 0 0 0 1px #eef3fb,0 3px 0 var(--ink)}
.ms-bar{margin:0 -6px 6px;padding:3px 10px;border-bottom:2px solid var(--ink);border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#6f8fc9 0%,#3f5c98 100%);color:#fff;font-size:12px;font-weight:700;letter-spacing:2px;
  text-shadow:0 1px 0 #1b2a4f}
.ms-equip{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 6px;border:2px solid #6a7896;border-radius:6px;
  background:radial-gradient(circle at 50% 40%,#3a4a78 0,#24305a 60%,#18203f 100%)}
.ms-equip canvas{flex:none;width:112px;height:120px;image-rendering:pixelated}
/* 4.78.0 (owner, 2026-10-18: "I can't see what I'm equipping and the item details without constant scrolling"): the
   pop-up fills the screen, the fighter is pinned at the top (.sheet-top, outside the scrolling body like the foot),
   the card for what's tapped and the buttons at the bottom, and only the bag scrolls between them */
.modal.gear-modal{height:calc(100vh - 24px);height:calc(100dvh - 24px)}
.gear-modal .modal-body{min-height:110px;padding-top:10px;padding-bottom:10px}
.sheet-top{flex:none;padding:var(--pad-t) var(--pad-r) 8px;border-bottom:2px solid rgba(11,16,32,.35)}
.gear-top{padding-top:14px}
.gear-top h2{margin:4px 0 10px;font-size:22px}
.gear-top .ms-win{margin:0;padding-top:6px}
.ms-who{position:relative;display:flex;flex-direction:column;align-items:center}
.ms-try{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);white-space:nowrap;margin:0;padding:1px 8px;border-radius:9px;background:var(--led);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.5px}
.ms-try[hidden]{display:none}
.ms-cell.try{outline:3px dashed var(--led);outline-offset:-1px;z-index:1;animation:msTry 1s ease-in-out infinite alternate}
@keyframes msTry{to{outline-color:transparent}}
@media (prefers-reduced-motion:reduce){.ms-cell.try{animation:none}}
#gear-bonus,#gear-delta{font-style:normal}
.gear-ad{margin-top:6px}
.gear-sweep{margin-top:6px}
.gd-scrolls .gd-scroll.chaos{grid-column:1/-1}
.gear-sweep[hidden]{display:none}
.tip-lines .tip-fx{display:block;line-height:1.35;margin-top:3px}
.tip-lines .tip-fx b{color:#7fe3ff;text-align:left;margin-right:4px}
.tip-lines .tip-fx.sig b{color:#ffb347}
.tip-lines .tip-fx span{color:#dfe5f3}
#gear-delta.up{color:#12823f}
#gear-delta.down{color:#c0262d}
.ms-col{display:grid;gap:8px}
.ms-cell{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;min-width:0;padding:0;border:1px solid #7d8aa6;border-radius:4px;
  background:linear-gradient(180deg,#f7f9fd 0%,#dfe5f0 100%);box-shadow:inset 0 0 0 1px #fff;color:var(--ink)}
.ms-cell[class*=tier-]{box-shadow:inset 0 0 0 2px var(--tier),inset 0 0 8px var(--tier)}
.ms-cell.tier-common{box-shadow:inset 0 0 0 1px #fff}
.ms-cell.slot{width:52px;height:52px;background:linear-gradient(180deg,#e8edf6 0%,#c8d1e2 100%)}
.ms-cell.slot.empty{border-style:dashed}
.ms-cell.blank{background:#d6dde9;box-shadow:inset 0 1px 2px rgba(11,16,32,.25)}
.ms-cell.sel{outline:3px solid var(--led);outline-offset:-1px;z-index:1}
.ms-cell .gear-icon{width:80%;height:80%}   /* drawn at the screen's pixels (app.js itemIcon), so no stretching */
.ms-cell.scroll .gear-icon{image-rendering:pixelated}
.ms-ghost{font-size:9px;font-weight:700;letter-spacing:.5px;color:#7d8aa6}
.ms-worn,.ms-up,.ms-count{position:absolute;font-size:10px;font-weight:700;line-height:1;color:#fff;
  text-shadow:-1px 0 var(--ink),1px 0 var(--ink),0 -1px var(--ink),0 1px var(--ink)}
.ms-worn{top:2px;left:3px;color:var(--led)}
.ms-up{bottom:2px;left:3px;color:#9dffbf}
.ms-count{right:3px;bottom:2px}
.ms-stat{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 0;padding:4px 8px;border:1px solid #7d8aa6;border-radius:4px;background:#f2f5fa}
.ms-stat>span{font-size:12px;font-weight:700;letter-spacing:1px;color:#3f5c98}
.ms-stat b{font-family:var(--led-font);font-weight:400;font-size:28px;line-height:1;color:#b8460c}
.ms-note{margin:4px 2px 0;font-size:12.5px;line-height:1.35;color:#2a3550}
.ms-tabs{display:flex;gap:3px;margin:0 0 4px}
.ms-tabs button{flex:1;min-height:30px;padding:0;border:1px solid #6a7896;border-bottom:none;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,#9fb0cf 0%,#8597ba 100%);color:#233257;font:700 12px/1 var(--font);letter-spacing:1.5px}
.ms-tabs button[aria-selected=true]{background:linear-gradient(180deg,#fff 0%,#e5ebf5 100%);color:#b8460c}
.ms-grid{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:4px;border:2px solid #6a7896;border-radius:4px;background:#8a9abb}
.ms-empty{grid-column:1/-1;margin:2px 0;padding:4px 6px;border-radius:4px;background:#f2f5fa;font-size:13px;line-height:1.35;color:#2a3550}
.ms-meso{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;margin:5px 0 0;padding:4px 8px;border:1px solid #7d8aa6;border-radius:4px;
  background:#f2f5fa;font-size:12.5px;font-weight:600;color:#2a3550}
.ms-meso[hidden]{display:none}
.ms-pips{letter-spacing:1px;color:#b8460c}
/* the card for what's tapped: MapleStory's tooltip, dark glass and a thin light rim */
.ms-tip{margin:0 0 10px;padding:10px;border:1px solid #dfe5f3;border-radius:6px;background:rgba(14,18,38,.96);
  box-shadow:0 0 0 2px var(--ink),0 3px 0 2px var(--ink);text-align:center}
.tip-name{display:block;font-size:17px;color:var(--tier,#fff)}
.tip-tier{display:block;margin:0 0 8px;padding-bottom:6px;border-bottom:1px dashed #5f6f9f;font-size:12px;color:var(--tier,#c6cee3)}
.ms-tip .gd-head{display:flex;align-items:center;gap:10px;text-align:left}
.ms-tip .gd-head canvas{flex:none;width:80px;height:80px;border:1px solid #5f6f9f;border-radius:4px;image-rendering:pixelated;
  background:radial-gradient(circle,#2a3560 0,#151b36 80%);box-shadow:inset 0 0 10px var(--tier,transparent)}
.tip-lines{min-width:0;flex:1}
.tip-lines p{display:flex;justify-content:space-between;gap:6px;margin:0;font-size:12.5px;line-height:1.6;color:#dfe5f3}
.tip-lines p span{color:#9fabc8}
.tip-lines p b{font-weight:700;text-align:right}
.tip-lines .tip-watk b{color:#ffd23f}
.tip-lines .tip-help{display:block;margin-top:4px;color:#9fabc8;line-height:1.35}
.gd-result{min-height:20px;margin:6px 0;font-size:15px;font-weight:600;color:var(--cream)}
.gd-scrolls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.gd-scroll{flex-direction:column;gap:0;min-height:52px;padding:0 4px}
/* the card in the foot (4.78.0): smaller, the piece beside its lines, the name left */
.gear-foot .ms-tip{margin:0 0 10px;padding:8px;text-align:left}
.gear-foot .gd-head{align-items:flex-start}
.gear-foot .gd-head canvas{width:60px;height:60px}
.gd-text{flex:1;min-width:0}
.gear-foot .tip-name{font-size:15px;line-height:1.2}
.gear-foot .tip-tier{margin:0 0 3px;padding-bottom:3px}
/* light blue like the Equipment and Item windows (owner, 2026-10-18: "can we make the background light blue as
   well?"), dark text on it; the tier, too pale to read on blue, is a chip in its colour; the piece keeps its dark well */
.gear-foot .ms-tip{border:3px solid var(--ink);border-radius:10px;background:linear-gradient(180deg,#dfe7f5 0%,#bfcbe2 100%);
  box-shadow:inset 0 0 0 1px #eef3fb,0 3px 0 var(--ink)}
.gear-foot .tip-name{color:#1b2a4f}
.gear-foot .tip-tier{display:inline-block;margin:2px 0 4px;padding:1px 7px;border:1px solid var(--ink);border-radius:8px;
  background:var(--tier,#c6cee3);color:var(--ink);font-weight:700}
.gear-foot .tip-lines p{color:#1b2a4f}
.gear-foot .tip-lines p span{color:#3f5c98}
.gear-foot .tip-lines .tip-watk b{color:#b8460c}
.gear-foot .tip-lines .tip-help{color:#3f5c98}
.gear-foot .gd-result{color:#1b2a4f}
.gear-foot .gd-head canvas{image-rendering:auto;border-color:var(--ink);background:linear-gradient(180deg,#f7f9fd 0%,#dfe5f0 100%);
  box-shadow:inset 0 0 0 2px var(--tier,#c6cee3),inset 0 0 10px var(--tier,transparent)}
.gear-foot .tip-lines p{font-size:12px;line-height:1.45}
.gear-foot .gd-result{min-height:0;margin:4px 0 0;font-size:13.5px}
.gear-foot .gd-result:empty{display:none}
.gear-foot .gd-scrolls{margin:8px 0 0}
.gear-foot .gd-scrolls:empty{display:none}
.gear-foot .gd-scroll{min-height:44px}
.gd-hint{margin:0 0 8px;text-align:center;font-size:13px;color:#c6cee3}
.gd-hint[hidden]{display:none}
/* a short screen (an iPhone SE, Safari's bars showing): everything a size down so the bag keeps a few rows */
@media (max-height:760px){
  .gear-top{padding-top:10px}
  .gear-top h2{margin:2px 0 6px;font-size:19px}
  .gear-top .ms-equip{padding:4px 6px}
  .gear-top #gear-canvas{width:84px;height:90px}
  .gear-top .ms-cell.slot{width:42px;height:42px}
  .gear-top .ms-col{gap:6px}
  .gear-top .ms-stat{margin-top:4px;padding:2px 8px}
  .gear-top .ms-stat b{font-size:22px}
  .gear-foot{padding-top:8px}
  .gear-foot .ms-tip{margin-bottom:8px}
  .gear-foot .gd-head canvas{width:48px;height:48px}
  .gear-foot .gd-scrolls{margin-top:6px}
  .gear-foot .gd-scroll{min-height:40px}
  .gear-foot .gd-scroll small{font-size:10px}
}
.gd-scroll b{font-size:16px}
.gd-scroll small{font-size:11px;font-weight:600}
.rank-drop{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0 0;font-weight:700;color:var(--tier,var(--cream))}
.rank-drop .gear-icon{width:32px;height:32px}
.gear-btns{display:flex;gap:8px}
.gear-btns .sticker-btn{flex:1;min-width:0;padding:0 6px;white-space:nowrap}
.gear-btns .sticker-btn[hidden]{display:none}
.bs-foot .sticker-btn{padding:0 8px}
.bs-foot .bs-fight{flex:1.4}
/* ---------- the fight over a boss puzzle (app.js renderBossMini): the same scene, small; a tap opens it ---------- */
.boss-mini{display:flex;flex-direction:column;width:100%;margin:8px 0 0;padding:0;overflow:hidden;text-align:left;
  border:3px solid var(--ink);border-radius:14px;background:#121a38;box-shadow:0 3px 0 var(--ink)}
.boss-mini[hidden]{display:none}
.bm-hp{position:relative;flex:none;display:block;height:16px;background:#33101b;border-bottom:2px solid var(--ink)}
.bm-hp i{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(#ff8f6e,#e0283c 70%,#b51d33);transition:width .45s ease-out}
.bm-hp b{position:relative;display:block;font-family:var(--led-font);font-weight:400;font-size:16px;line-height:16px;text-align:center;
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.boss-mini canvas{display:block;width:100%;height:96px}
.boss-mini:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@media (max-width:640px){
  /* the strip's height comes out of the board's budget, so the playing screen still fits */
  body[data-mode="boss"]{--play-chrome:350px}
}
/* ...and no Road Trip / Daily / Weekly row (owner, 2026-10-14): the key beside the stop key goes back instead of to
   the fight (app.js renderHUD), and the menu key moves in beside it (renderView). On a phone the row's height goes
   to the board. */
body[data-mode="boss"] .modes{display:none}
.lb-key svg{display:block;width:18px;height:18px}
.game-head .menu-btn{grid-area:menu;width:48px;height:48px;min-height:0;border-radius:14px;box-shadow:0 4px 0 var(--ink)}
body[data-mode="boss"] .game-head{grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto auto;grid-template-areas:"stop . lb menu" "name name name name"}
@media (max-width:640px){
  body[data-mode="boss"]{--play-chrome:304px}
  .game-head .menu-btn{flex:none;width:44px;height:46px;border-radius:12px;box-shadow:0 3px 0 var(--ink)}
  .game-head .menu-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
}
/* ...and below Undo / Restart, the level strip, the daily row and the Road Trip / Weekly / Daily / garage cards give
   way to the fight's own keys: Character and Equipment (owner, 2026-10-14; Scrolls dropped in 4.68.2) */
.boss-keys{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.bk-key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:52px;padding:4px 4px 5px;
  border:2.5px solid var(--ink);border-radius:14px;background:var(--panel);box-shadow:0 3px 0 var(--ink);color:var(--cream);
  font-size:14px;font-weight:700;line-height:1.1;white-space:nowrap}
.bk-ico{font-size:20px;line-height:1}
.bk-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
@media (hover:hover){.bk-key:hover{background:var(--panel-hi)}}
body[data-mode="boss"] .boss-keys{display:grid}
body[data-mode="boss"] .level-strip,body[data-mode="boss"] .daily-row,body[data-mode="boss"] .side{display:none}
@media (min-width:960px){body[data-mode="boss"] .layout{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1099px){.boss-keys{width:100%;max-width:572px;margin-left:auto;margin-right:auto}}
@media (max-width:640px){.boss-keys{margin-top:8px}}
/* Your strike over the result of a boss puzzle (app.js bossCutscene; owner, 2026-10-15): the whole sheet, the fight in
   the middle, then a fade to the result; a tap skips it */
.win-cut{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#080c1a;cursor:pointer;opacity:1;transition:opacity .25s ease}
.win-cut[hidden]{display:none}
.win-cut.out{opacity:0}
.win-cut canvas{display:block;width:100%;height:min(260px,62%);image-rendering:pixelated}
.win-cut-skip{margin:0;font-size:13px;font-weight:600;color:var(--dim)}