/* Gold Rush Express skin on the shared game shell: sepia engraving on a frontier rail line. A canyon line at dusk (or a
   boomtown street), a boxcar of planks and riveted iron straps round wood-crate reels with a split-flap board on top, a
   brass throttle lever as the spin button, the bottom bar laid like a rail, and a lamp-lit mine tunnel for the Mine Cart.
   The theme tokens (--steel, --panel, --ink, --muted, --gilt, the scene, plank and nameplate colours) come from skin.js
   themeMap; iron, brass, wood and paper are materials. Every text sits on a panel whose contrast skin.js guarantees.
   One key light for the whole game, the low sun at the top left (as in art.js): lit edges top/left, shadows and the
   cool dusk bounce bottom/right, on the scene, the boxcar, the reel window, the nameplate and the lever alike. */
:root{
  --steel:#4FA3C7; --panel:#0E0806; --panel-hi:#1E1611;
  --ink:#F4EBDD; --muted:#AAA298; --gilt:#C2796A;
  --sky-top:#140C08; --sky-low:#5A2A1A; --far:#3A1E14; --near:#0B0705; --town:#0E0806;
  --plank:#6E3020; --plank-hi:#B5664F; --plank-lo:#4A1A10;
  --plate:#2E1309; --plate-hi:#43200F; --plate-lo:#1C0B05; --plate-ink:#EFCB72; --brass-ink:#E9C36A; --sun:rgba(255,190,110,.42);
  --iron:#3A332E; --iron-hi:#8E857A; --rivet:#C9C0B2; --brass:#D9A845; --brass-hi:#F6D88A; --brass-lo:#B08230; --paper:#F4E8CE; --sepia:#2A190D;
  --display:"Rye",Georgia,serif; --ui:"Zilla Slab",Georgia,serif;
  --line:color-mix(in srgb,var(--gilt) 32%,transparent); --radius:6px; --radius-sm:4px;
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --panel-border:color-mix(in srgb,var(--gilt) 45%,transparent);
  --hud-bg:linear-gradient(180deg,var(--panel-hi),var(--panel));
  --ibtn-bg:var(--panel); --ibtn-ink:var(--ink);
  --btn-bg:linear-gradient(180deg,var(--brass-hi),var(--brass) 60%,var(--brass-lo)); --btn-ink:#2A1806;
  /* the reel window: a wooden crate, planks across, a shadow at the top and straw at the bottom (see .reel::before) */
  --window-bg:linear-gradient(180deg,rgba(0,0,0,.42),transparent 16%,transparent 80%,rgba(0,0,0,.3)),
    repeating-linear-gradient(180deg,#5A3D26 0 calc(var(--cell)*.5 - 3px),#2C1C10 calc(var(--cell)*.5 - 3px) calc(var(--cell)*.5)),
    linear-gradient(90deg,#4E3420,#5E412A 50%,#4E3420);
  --window-radius:3px; --reel-sep:transparent; --win-glow:#FFD27A; --focus:var(--ink); --spin-blur:1.2px; --win-radius:8px;
  --veil-light:rgba(255,206,130,.16); --spin-ring:color-mix(in srgb,var(--brass-hi) 85%,transparent);
  --rail-iron:#BDB5A8; --rail-tie:#5A3B22; --rail-bed:#22170F; --row-glow:rgba(255,206,120,.22); --steam:rgba(244,236,222,.8);
  --tile-bg:transparent; --tile-ink:var(--paper); --tile-here:#FFE7A0; --badge-bg:#F2C04A; --badge-ink:#2A1806; --pop-ink:#FFF4D0; --pop-stroke:#2A1806;
}
body{background:var(--bg)}

/* scene: the canyon line (default), the boomtown street, the mine tunnel of the Mine Cart. Silhouettes are masks from
   skin.js; only the far mesas drift (transform) and the lamp in the mine breathes (opacity). */
/* the sky: dusk, the low sun behind the far mesas at the left (the key light), a softer glow behind the board */
.scene .sky{background:radial-gradient(34% 28% at var(--sun-at,12% 64%),var(--sun),transparent 72%),radial-gradient(60% 46% at 50% 54%,color-mix(in srgb,var(--sky-low) 72%,transparent),transparent 76%),
  linear-gradient(180deg,var(--sky-top) 0%,color-mix(in srgb,var(--sky-top) 78%,var(--sky-low)) 26%,color-mix(in srgb,var(--sky-top) 40%,var(--sky-low)) 54%,var(--sky-low) 78%,var(--far) 100%)}
.scene .mesa,.scene .town,.scene .mine .arch{-webkit-mask-position:center bottom;mask-position:center bottom;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .6s}
/* far mesas hazed toward the sky (atmospheric), lit on the sun's side; near mesas and the trestle darkest */
.scene .mesa.far{left:-3%;right:-3%;background:radial-gradient(40% 50% at 20% 70%,color-mix(in srgb,var(--sun) 60%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--far) 72%,var(--sky-low)) 40%,var(--far));
  -webkit-mask-image:var(--mesa-far);mask-image:var(--mesa-far);animation:gre-drift 70s ease-in-out infinite alternate}
.scene .mesa.near{background:linear-gradient(180deg,color-mix(in srgb,var(--near) 80%,var(--far)) 55%,var(--near) 80%);-webkit-mask-image:var(--mesa-near);mask-image:var(--mesa-near)}
.scene .town{opacity:0;background:var(--town);-webkit-mask-image:var(--town-mask);mask-image:var(--town-mask)}
body.bg-boomtown .scene .town{opacity:1}
body.bg-boomtown .scene .mesa.near{opacity:0}
.scene .mine{opacity:0;transition:opacity .3s;background:radial-gradient(46% 38% at 50% 60%,#2A1C12,#0A0705 70%)}
.scene .mine i{position:absolute;inset:0;display:block}
.scene .mine .arch{background:linear-gradient(180deg,#4A3220,#20140B);-webkit-mask-image:var(--tunnel-mask);mask-image:var(--tunnel-mask)}
.scene .mine .glow{background:radial-gradient(28% 22% at 50% 58%,rgba(255,214,140,.26),transparent 72%);animation:gre-lamp 3.4s ease-in-out infinite alternate}
body.fs .scene .mine{opacity:1}
/* the print: one static grain layer and a vignette to the corners (no fine pattern right behind the frame) */
.scene .etch{background:radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(8,4,2,.5) 100%)}
.scene .etch::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background:var(--grain) 0 0/160px}
@keyframes gre-drift{from{transform:translateX(-1.5%)}to{transform:translateX(1.5%)}}
@keyframes gre-lamp{from{opacity:.75}to{opacity:1}}

/* the title is the engine's cast nameplate: raised brass letters on a dark painted field inside a polished brass
   rim (a border-box metal gradient, light at the top), lit from the top left; symmetric, so it centres on its glyphs */
.logo h1{font-weight:400;letter-spacing:.04em;color:var(--plate-ink);padding:.06em .5em 0;border:2px solid transparent;border-radius:7px;
  background:radial-gradient(70% 120% at 30% 0%,rgba(255,226,170,.12),transparent 60%) padding-box,linear-gradient(180deg,var(--plate-hi),var(--plate) 55%,var(--plate-lo)) padding-box,
    linear-gradient(180deg,#FFF0B8,#C9A040 34%,#4A3510 50%,#C9A040 60%,#E2C06A 84%,#4A3510) border-box;
  box-shadow:0 0 0 1px rgba(20,10,4,.85),0 4px 10px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(0,0,0,.7),0 -1px 0 rgba(255,236,190,.22)}
.ibtn{border-color:color-mix(in srgb,var(--gilt) 40%,transparent)}.ibtn:hover{border-color:var(--gilt);box-shadow:0 0 10px color-mix(in srgb,var(--steel) 50%,transparent)}
.demo,.auto span{background:var(--ink);color:var(--panel)}
.screen{background:var(--bg)}.screen h2{color:var(--brass-ink);font-weight:400}
.btn{font-weight:400}
.spinner{border-color:color-mix(in srgb,var(--ink) 20%,transparent);border-top-color:var(--ink)}
/* the shell's governed flash, should one fire (big win): a faint lamp tint, never white */
.flash{background:radial-gradient(circle at 50% 45%,rgba(255,214,140,.2),rgba(255,214,140,.06) 45%,transparent 75%)}

/* the boxcar: plank walls, iron straps with rivets top and bottom, iron corner posts; the split-flap board sits in
   the top strap. The frame is its own stacking context, so the board and the message stay on top. */
.frame{isolation:isolate;padding:calc(min(var(--cell)*.3,38px) + 14px) min(calc(var(--cell)*.16),22px) min(calc(var(--cell)*.1),14px)}
.boxcar{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:4px;
  background:linear-gradient(135deg,rgba(255,226,180,.16),transparent 38%,transparent 62%,rgba(10,4,2,.32)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 2px,rgba(255,235,210,.1) 2px 3px,transparent 3px 34px),
    repeating-linear-gradient(90deg,transparent 0 11px,rgba(0,0,0,.05) 11px 12px),
    linear-gradient(180deg,var(--plank-hi),var(--plank) 32%,var(--plank-lo));
  box-shadow:inset 1px 1px 0 rgba(255,226,190,.22),inset -1px -1px 0 rgba(0,0,0,.55),inset 0 0 0 2px #1A0E08,0 16px 36px rgba(0,0,0,.55)}
.boxcar::before,.boxcar::after{content:"";position:absolute;top:0;bottom:0;width:10px;
  background:radial-gradient(circle at 42% 42%,#EDE5D8 0 .8px,var(--rivet) 1.2px,#2A221C 2.2px,transparent 2.6px) 50% 6px/10px 22px repeat-y,linear-gradient(90deg,#8E857A,#5E554C 30%,#1E1814 62%,#4E5A62 88%,#26201C)}
.boxcar::before{left:0}.boxcar::after{right:0}
.boxcar i{position:absolute;display:block;left:0;right:0;height:12px;box-shadow:0 1px 0 rgba(0,0,0,.6),0 2px 3px rgba(0,0,0,.35);
  background:radial-gradient(circle at 42% 42%,#EDE5D8 0 .8px,var(--rivet) 1.2px,#2A221C 2.2px,transparent 2.6px) 6px 50%/22px 12px repeat-x,linear-gradient(180deg,#A39A8E,#5E554C 35%,#1E1814 58%,#4E5A62 86%,#26201C)}
.boxcar .strap.t{top:0}.boxcar .strap.b{bottom:0}
.flapboard{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:1;display:flex;max-width:calc(100% - 28px);padding:4px 8px;border-radius:3px;
  background:linear-gradient(180deg,#1C140E,#0C0805);box-shadow:inset 0 0 0 2px #4A423A,inset 1px 1px 0 2px rgba(255,236,200,.12),0 3px 8px rgba(0,0,0,.6)}
.flapboard .flaps{display:flex;gap:2px;overflow:hidden;perspective:300px}
.flapboard .flaps i{--h:min(var(--cell)*.3,38px);font-style:normal;display:grid;place-items:center;flex:none;width:calc(var(--h)*.64);height:var(--h);font:400 calc(var(--h)*.62)/1 var(--display);
  color:#F3E7CF;background:linear-gradient(180deg,#3A3029,#2A221C 47%,#080503 47% 53%,#241D18 53%,#1A140F);box-shadow:inset 0 1px 0 rgba(255,240,215,.1);border-radius:2px;
  text-shadow:0 1px 0 #000;animation:gre-flip .34s var(--d,0ms) both}
@keyframes gre-flip{0%{transform:rotateX(-90deg)}70%{transform:rotateX(12deg)}100%{transform:none}}
/* the reel window sits in the boxcar: a dark niche (the lip catches light at the bottom), the crate set into it, and
   the frame's shadow falling on it from the top (an overlay under the train row) */
#board.reels-board{padding:3px;border-radius:3px;background:#1A0E08;box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 1px 0 rgba(255,226,190,.22),0 -1px 0 rgba(0,0,0,.5)}
.reels-board .window::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 16px 16px -10px rgba(0,0,0,.72),inset 10px 0 12px -10px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,226,180,.16)}
/* variant "clean": no boxcar and no flap board, a thin iron frame */
body[data-variant="clean"] .frame{padding:6px 6px 4px}
body[data-variant="clean"] .boxcar,body[data-variant="clean"] .flapboard{display:none}
body[data-variant="clean"] #board.reels-board{box-shadow:0 0 0 2px #5E554C,0 0 0 4px #1A1410,0 16px 36px rgba(0,0,0,.45)}

/* the message: a small plate under the reels */
.message{padding:1px 12px;border-radius:3px;background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--brass-ink)}

/* the wood crate: slats between the reels, straw at the bottom of every crate (painted before the strip, so under the
   symbols); the reels stop on a 140 ms beat */
.reels-board .reel+.reel{box-shadow:inset 1px 0 0 rgba(0,0,0,.38),inset 2px 0 0 rgba(255,220,160,.09)}
.reels-board .reel::before{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;pointer-events:none;opacity:.42;
  background:repeating-linear-gradient(112deg,rgba(226,190,104,.45) 0 1.5px,transparent 1.5px 7px),repeating-linear-gradient(64deg,rgba(226,190,104,.3) 0 1.2px,transparent 1.2px 9px);
  -webkit-mask:linear-gradient(180deg,transparent,#000 70%);mask:linear-gradient(180deg,transparent,#000 70%)}
.reels-board .reel.tease{box-shadow:inset 0 0 26px rgba(255,214,140,.6)}
.reels-board .cell.landed .sym{animation:gre-land .26s steps(3,end)}
@keyframes gre-land{0%{transform:translateY(-6%)}34%{transform:translateY(2px)}67%{transform:translateY(-2px)}100%{transform:none}}
.reels-board .cell.win::after{border-color:var(--brass-hi);box-shadow:0 0 12px var(--win-glow),inset 0 0 10px color-mix(in srgb,var(--win-glow) 30%,transparent)}
/* the rest steps back (opacity, no filter: the art direction's dim) */
.reels-board .cell.dim .sym{filter:none;opacity:.45}
/* the Golden Spike's art carries the word WILD: the tag stays as text for screen readers only */
.sym.wild .tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* the Express Train's row is lit by its lamp and framed by rails (trail.css draws the rails; here the light) */
.rail-board .railrow{box-shadow:inset 0 0 22px rgba(255,206,120,.35)}

/* the Mine Cart track: the tile plates are art (art.js tile(kind)); the number and the value come from the config */
.rail-board .tile{background:none;box-shadow:none;border-radius:10%;container-type:size}
.rail-board .tile>img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.rail-board .tile .tno{position:absolute;left:13%;top:11%;font:600 max(10px,calc(var(--ts)*.16))/1 var(--ui);color:var(--sepia)}
.rail-board .tile .tv{position:absolute;left:10%;right:10%;bottom:10%;padding:1px 2px;border-radius:3px;text-align:center;white-space:nowrap;overflow:hidden;
  font:600 max(11px,calc(var(--ts)*.2))/1.2 var(--ui);color:var(--paper);background:var(--sepia)}
.rail-board .tile.t-end .tv{font-family:var(--display);font-weight:400}
/* the Mother Lode's plate is dark wood: its number sits on a sepia chip like the value (paper on sepia, 13.9:1); the
   paytable's mini track names .mt too, so its chip outranks ".minitrack .mt span" below (sepia ink: was sepia on sepia) */
.rail-board .tile.t-end .tno,.minitrack .mt.t-end span{color:var(--paper);background:var(--sepia);padding:0 2px;border-radius:2px}
/* small tiles (phones) keep the silhouette clear: the number is decorative, the tile's label and the bar carry it */
@container (max-width:47px){.rail-board .tile .tno{display:none}}
.rail-board .tile.here{box-shadow:0 0 0 3px var(--tile-here),0 0 16px var(--tile-here)}
.rail-board .cart-art{width:100%;height:100%}
.rail-board .cart .mult{font-family:var(--ui)}

/* the Mine Cart bar: a plate with a lamp before the multiplier */
.fsbar{flex-wrap:wrap;justify-content:center;background:var(--panel);border-color:color-mix(in srgb,var(--gilt) 50%,transparent);color:var(--ink)}
.fsbar b{color:var(--brass-ink)}
.fsbar .fsx{color:var(--brass-ink);font-family:var(--display);font-weight:400}
.fsbar .fsx::before{content:"";display:inline-block;width:.7em;height:.7em;margin-right:.35em;vertical-align:-.02em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FFF4D0,#F2C04A 60%,#8A5A12);box-shadow:0 0 6px rgba(255,214,140,.7)}

/* the HUD: the bottom bar laid like a rail (an iron rail on sleepers along its top edge), the lever bottom right */
.hud{position:relative;border:1.5px solid color-mix(in srgb,var(--gilt) 35%,transparent);margin-top:8px}
.hud::before{content:"";position:absolute;left:12px;right:12px;top:-9px;height:9px;pointer-events:none;
  background:linear-gradient(180deg,#D3CCC0,#7E766C) 0 0/100% 4px no-repeat,repeating-linear-gradient(90deg,var(--rail-tie) 0 8px,transparent 8px 22px) 0 4px/100% 5px no-repeat}
.meter b{color:var(--ink)}.meter.win b{color:var(--brass-ink)}
.pm,.auto{border-color:color-mix(in srgb,var(--gilt) 45%,transparent)}
.auto[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--steel) 75%,transparent)}
/* the throttle lever: a brass disc; on every spin the arm is pulled down for 120 ms and springs back */
.spin{color:#2A1806;background:radial-gradient(circle at 38% 32%,#FFF4CF,var(--brass) 46%,#8A6018 88%,#B08A3A 100%);
  box-shadow:inset 0 2px 1px rgba(255,248,220,.7),inset 0 -4px 7px rgba(60,30,0,.45),0 0 0 3px #3A2414,0 0 0 5px color-mix(in srgb,var(--brass) 60%,transparent),0 9px 18px rgba(0,0,0,.55)}
.spin svg{width:66%;height:66%}
.spin svg .lever{transform-box:view-box;transform-origin:24px 37px}
.spin.kick svg .lever{animation:gre-pull .46s linear}
@keyframes gre-pull{0%{transform:rotate(0)}26%{transform:rotate(62deg);animation-timing-function:cubic-bezier(.2,1.6,.4,1)}100%{transform:rotate(0)}}
.spin:disabled{filter:brightness(.7) saturate(.6)}
/* the Full Steam tablet: an iron plate with a brass rim */
.side .tablet{background:var(--panel-bg);border:2px solid color-mix(in srgb,var(--brass) 70%,transparent);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.tablet .th{font-weight:400;color:var(--brass-ink)}
.tablet small{color:var(--muted)}
.tablet[aria-pressed="true"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),0 0 14px color-mix(in srgb,var(--brass) 60%,transparent)}

/* panels and overlays: dark (or light) plates; titles and amounts in brass (rust stays the boxcar's paint) */
.panel h2,.panel h3{color:var(--brass-ink);font-weight:400}
.panel .lead{color:var(--muted)}
.ptc{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.ptc .symbox,.special .symbox{border-radius:4px;background:linear-gradient(180deg,#5A3D26,#3A2616)}
.special .symbox{position:relative;width:96px;height:96px}.special .symbox img{position:absolute;inset:0;width:100%;height:100%}
.special .symbox .cart-art{position:absolute;inset:0}
.special.train-card{grid-template-columns:150px 1fr}.special.train-card .symbox{width:150px;height:60px}
.ptc .sym,.special .sym{width:100%;height:100%}
.mini{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.mini .g i{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
table.hist .won{color:var(--brass-ink)}
.overlay{background:radial-gradient(44% 30% at 50% 42%,var(--veil-light),transparent),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--panel) 97%,#000) 74%)}
.ovcard h2{font-weight:400;color:var(--brass-ink);text-shadow:0 2px 0 rgba(0,0,0,.55),0 -1px 0 rgba(255,236,190,.2)}
.ovamt{color:var(--ink)}.ovcard p{color:var(--muted)}
/* the track drawn small in the paytable: the same snake, tiles numbered, values from the config */
.minitrack{display:grid;grid-template-columns:repeat(var(--cols,8),minmax(0,1fr));gap:6px 4px;max-width:560px;padding:0;margin:12px 0 4px;list-style:none}
.minitrack .mt{position:relative;aspect-ratio:1;font-size:11px}
.minitrack .mt img{position:absolute;inset:0;width:100%;height:100%}
.minitrack .mt span{position:absolute;left:12%;top:10%;font-weight:600;color:var(--sepia);line-height:1}
.minitrack .mt b{position:absolute;left:8%;right:8%;bottom:8%;border-radius:2px;text-align:center;white-space:nowrap;overflow:hidden;font-weight:600;line-height:1.25;color:var(--paper);background:var(--sepia)}

/* big wins: steam puffs rise round the card (shapes, not light) */
.overlay .puff{position:absolute;left:var(--x);bottom:-10%;width:calc(160px*var(--s));height:calc(120px*var(--s));border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(244,236,222,.5),transparent);animation:gre-puff 2.4s ease-out var(--d,0ms) both}
@keyframes gre-puff{0%{transform:translate(-50%,0) scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(-50%,-70vh) scale(1.4);opacity:0}}

/* the tunnel into and out of the Mine Cart: darkness, then a lamp beam opens from the left (no flash) */
@property --beam{syntax:'<percentage>';inherits:false;initial-value:0%}
.tunnelfx{position:fixed;inset:0;z-index:40;pointer-events:none;display:none;opacity:0;
  background:radial-gradient(ellipse 120% 95% at 24% 56%,transparent calc(var(--beam) - 24%),rgba(7,5,3,.98) var(--beam))}
.tunnelfx.show{display:block}

/* reduced motion: nothing drifts, flips or puffs; the shell keeps fades short */
body.still .scene .mesa.far,body.still .scene .mine .glow,body.still .flapboard .flaps i,body.still .spin.kick svg .lever,body.still .reels-board .cell.landed .sym,body.still .overlay .puff{animation:none}
body.still .scene .mine,body.still .scene .mesa,body.still .scene .town{transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.scene .mesa.far,.scene .mine .glow,.flapboard .flaps i,.spin.kick svg .lever,.reels-board .cell.landed .sym,.overlay .puff{animation:none!important}.overlay .puff{display:none}
  .scene .mine,.scene .mesa,.scene .town{transition-duration:.1s}}
/* phones: a smaller boxcar and flap board, a compact Mine Cart bar */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:calc(min(var(--cell)*.3,38px) + 10px) 8px 6px}
  .scene .sky{--sun-at:20% 24%} /* tall screens: the board covers the horizon, the sun shows above it (still top left) */
  .boxcar::before,.boxcar::after{width:6px}
  .boxcar i{height:8px;background-size:16px 8px,100% 100%}
  .flapboard{top:4px;padding:2px 5px}
  .fsbar{gap:10px;padding:4px 10px;font-size:13px}
  .hud::before{left:8px;right:8px}
}
@media (max-height:520px){.flapboard{display:none}.frame{padding-top:10px}}
@media (max-width:400px){.special.train-card{grid-template-columns:1fr}.minitrack{gap:4px 2px}.minitrack .mt{font-size:9px}
  /* the long name on its plate wraps to two lines here instead of shrinking to the ellipsis (the Rye face is wide) */
  .logo h1{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.03;letter-spacing:.02em;padding:.16em .5em .06em;font-size:clamp(15px,5vw,22px)}}