/* Rail board (shared by train-and-trail games): the train row over the reels window and the track that replaces the
   window during the trail. Art comes from the game (trainHTML, cartHTML, tileHTML); colours from the skin:
   --rail-iron, --rail-tie, --rail-bed (track and rail row), --row-glow (the lit train row), --steam (puffs),
   --tile-bg, --tile-ink, --tile-edge, --tile-radius, --tile-here (tiles; --ts, their size, is set by the board),
   --badge-bg, --badge-ink (the cart's multiplier), --pop-ink, --pop-stroke (rising amounts). */
.rail-board .railrow{position:absolute;left:0;right:0;top:calc(var(--cell)*var(--row));height:var(--cell);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,var(--row-glow,rgba(255,214,140,.16)),transparent 45%,transparent 55%,var(--row-glow,rgba(255,214,140,.16)));animation:rl-row .3s ease-out}
/* the rail frame of the train row: an iron rail on its top and bottom edge, with sleeper ticks (not colour alone) */
.rail-board .railrow::before,.rail-board .railrow::after{content:"";position:absolute;left:0;right:0;height:7px;
  background:linear-gradient(180deg,transparent 0 2px,var(--rail-iron,#B9B2A6) 2px 5px,transparent 5px) 0 0/100% 100% no-repeat,repeating-linear-gradient(90deg,var(--rail-tie,#5A3B22) 0 5px,transparent 5px 16px)}
.rail-board .railrow::before{top:0}.rail-board .railrow::after{bottom:0}
.rail-board .train{position:absolute;left:0;top:calc(var(--cell)*var(--row));height:var(--cell);z-index:4;pointer-events:none;will-change:transform;display:flex;align-items:center}
.rail-board .train img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.rail-board .train>*{width:100%;height:100%}
/* the steam trail behind the engine and the steam peek at the row's edge (gone with reduced motion) */
.rail-board .train::after{content:"";position:absolute;right:92%;top:-6%;width:60%;height:70%;border-radius:50%;opacity:.8;
  background:radial-gradient(closest-side,var(--steam,rgba(240,234,224,.75)),transparent),radial-gradient(40% 50% at 20% 70%,var(--steam,rgba(240,234,224,.6)),transparent);animation:rl-trail .45s linear infinite}
.rail-board .steam{position:absolute;left:0;top:calc(var(--cell)*var(--row));width:calc(var(--cell)*.9);height:var(--cell);z-index:3;pointer-events:none}
.rail-board .steam i{position:absolute;left:-20%;bottom:20%;width:60%;height:50%;border-radius:50%;background:radial-gradient(closest-side,var(--steam,rgba(240,234,224,.75)),transparent);animation:rl-puff 1s ease-out infinite}
.rail-board .steam i:nth-child(2){animation-delay:.33s;left:-10%}.rail-board .steam i:nth-child(3){animation-delay:.66s;left:-28%}
.rail-board .cell.xfade .sym{animation:rl-xfade .12s ease-out}
@keyframes rl-row{from{opacity:0}to{opacity:1}}
@keyframes rl-trail{0%{transform:translateX(0) scale(.8);opacity:.85}100%{transform:translateX(-30%) scale(1.15);opacity:.35}}
@keyframes rl-puff{0%{transform:translate(0,0) scale(.5);opacity:0}30%{opacity:.9}100%{transform:translate(40%,-80%) scale(1.25);opacity:0}}
@keyframes rl-xfade{from{opacity:0}to{opacity:1}}

/* the trail: the track replaces the reels window (and the payline markers) */
.rail-board.railing{grid-template-columns:auto}
.rail-board.railing>.pegs,.rail-board.railing>.window{display:none}
.rail-board .track{position:relative;animation:rl-in .35s ease-out}
.rail-board .track svg.rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rail-board .rails polyline{fill:none;stroke-linejoin:round;stroke-linecap:butt}
.rail-board .rails .ties{stroke:var(--rail-tie,#5A3B22)}.rail-board .rails .iron{stroke:var(--rail-iron,#B9B2A6)}.rail-board .rails .bed{stroke:var(--rail-bed,#2A1E16)}
.rail-board .depot{position:absolute;width:calc(var(--ts)*.5);height:calc(var(--ts)*.7);transform:translate(-50%,-50%);border-radius:4px;
  background:repeating-linear-gradient(180deg,var(--rail-tie,#5A3B22) 0 18%,var(--rail-bed,#2A1E16) 18% 26%);box-shadow:inset 0 0 0 2px var(--rail-iron,#B9B2A6)}
.rail-board .tile{position:absolute;width:var(--ts);height:var(--ts);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;overflow:hidden;
  border-radius:var(--tile-radius,8px);background:var(--tile-bg,#2B2420);color:var(--tile-ink,#F6EBD5);box-shadow:inset 0 0 0 2px var(--tile-edge,#8C6A3A),0 3px 6px rgba(0,0,0,.4);transition:filter .2s}
.rail-board .tile.visited{filter:saturate(.55) brightness(.82)}
.rail-board .tile.here{filter:none;box-shadow:inset 0 0 0 3px var(--tile-here,#FFE7A0),0 0 14px var(--tile-here,#FFE7A0)}
.rail-board .tile.hit{animation:rl-hit .5s ease-out}
/* the cart stands on its tile (the tile glows; its value was just shown as the cart landed) */
.rail-board .cart{position:absolute;left:0;top:0;z-index:3;width:calc(var(--ts)*.94);height:calc(var(--ts)*.94);transform:translate(-50%,-58%);pointer-events:none;
  transition-property:left,top;transition-timing-function:cubic-bezier(.45,0,.3,1.15)}
.rail-board .cart>:first-child{width:100%;height:100%}
.rail-board .cart img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.rail-board .cart.hop>:first-child{animation:rl-hop var(--hop,.3s) ease-out}
.rail-board .cart .mult{position:absolute;right:-16%;top:-10%;min-width:2.2em;padding:1px 4px;border-radius:9px;font:800 max(10px,calc(var(--ts)*.18))/1.2 var(--ui,system-ui);text-align:center;
  color:var(--badge-ink,#1C120A);background:var(--badge-bg,#FFE7A0);box-shadow:0 0 0 2px rgba(0,0,0,.45);font-variant-numeric:tabular-nums;opacity:.85}
.rail-board .cart .mult.on{opacity:1}
.rail-board .cart .mult.rise{animation:rl-rise .6s cubic-bezier(.2,1.4,.4,1)}
.rail-board .pop{position:absolute;z-index:4;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;font:800 max(15px,calc(var(--ts)*.3))/1 var(--ui,system-ui);
  color:var(--pop-ink,#FFF4D0);-webkit-text-stroke:3px var(--pop-stroke,#2A1806);paint-order:stroke fill;font-variant-numeric:tabular-nums;animation:rl-pop 1.3s ease-out forwards}
.rail-board .pop.lode{font-size:max(19px,calc(var(--ts)*.42))}
@keyframes rl-in{from{opacity:0}to{opacity:1}}
@keyframes rl-hit{0%{transform:scale(1)}35%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes rl-hop{0%{transform:none}45%{transform:translateY(-14%)}100%{transform:none}}
@keyframes rl-rise{0%{transform:translateY(30%) scale(.7)}60%{transform:translateY(-25%) scale(1.3)}100%{transform:none}}
@keyframes rl-pop{0%{transform:translate(-50%,-30%) scale(.7);opacity:0}15%{transform:translate(-50%,-60%) scale(1.08);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-140%);opacity:0}}
/* reduced motion: no sweep, no steam, no hops; fades stay ≤ 120 ms */
body.still .rail-board .steam,body.still .rail-board .train::after{display:none}
body.still .rail-board .cart,body.still .rail-board .tile{transition:none}
body.still .rail-board .cart.hop>:first-child,body.still .rail-board .tile.hit,body.still .rail-board .cart .mult.rise{animation:none}
body.still .rail-board .pop{animation:rl-fade 1.2s linear forwards}
@keyframes rl-fade{0%,90%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .rail-board .steam,.rail-board .train::after{display:none}
  .rail-board .cart,.rail-board .tile{transition:none}
  .rail-board .track,.rail-board .railrow,.rail-board .cart.hop>:first-child,.rail-board .tile.hit,.rail-board .cart .mult.rise{animation:none!important}
  /* the shell cuts every animation to ~0 here, which would hide a rising amount at once: it stays still until removed */
  .rail-board .pop{animation:none!important}
}