/* -------------------------------------------------------------------
   Timeline as a winding road (built by timeline-road.js).
   The world is laid out in its own units and moved by a camera transform.
------------------------------------------------------------------- */
.timeline-section.has-road .timeline-viewport{ display:none; }

.tl-road{
  --rd-h:640px;
  --rd-font:"Baloo 2","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;
  height:var(--rd-h);
  width:100vw; margin-left:calc(50% - 50vw);      /* full width of the band */
  margin-top:8px;
  outline:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
@media (max-width:700px){ .tl-road{ --rd-h:580px; } }
.tl-road:focus-visible .rd-stage{ box-shadow:inset 0 0 0 2px rgba(120,170,255,.45); border-radius:18px; }

.rd-stage{
  position:absolute; inset:0; overflow:hidden; overflow:clip;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 70px), transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 70px), transparent 100%);
}
.rd-world{ position:absolute; left:0; top:0; transform-origin:0 0; }

/* ---------- the road ---------- */
.rd-svg{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.rd-svg path{ fill:none; stroke-linecap:butt; stroke-linejoin:round; }
.rd-part{ transition:opacity .45s ease; }
.rd-bases .rd-part.is-dim,
.rd-tops .rd-part.is-dim{ opacity:.62; }
.rd-glows .rd-part.is-dim{ opacity:.12; }
.rd-dashs .rd-part.is-dim{ opacity:.22; }
.rd-hit{ stroke:transparent; pointer-events:stroke; cursor:pointer; }
.rd-hit.is-here{ cursor:default; }

/* ---------- a month: pin on the road, stem, card ---------- */
.rd-row{
  position:absolute; left:0; top:0;
  transition:opacity .45s ease, filter .45s ease;
}
.rd-row.is-dim{ opacity:.45; filter:saturate(.7); cursor:pointer; }
.rd-row.is-dim.is-near{ opacity:.8; filter:saturate(.9); }   /* the other month on the same road */
.rd-row.is-dim .tl-icon-btn,
.rd-row.is-dim .rd-pill{ cursor:pointer; }

.rd-ring{
  position:absolute; width:46px; height:16px; margin:-8px 0 0 -23px;
  border-radius:50%;
  border:4px solid rgba(0,0,0,.35);
  box-sizing:border-box;
}
.rd-pin{
  position:absolute; width:40px; height:52px; margin:-50px 0 0 -20px;
  color:var(--rc);
  filter:drop-shadow(0 7px 8px rgba(0,0,25,.45)) drop-shadow(0 0 12px var(--rc));
}
.rd-pin svg{ display:block; width:100%; height:100%; }
.rd-row.is-now .rd-pin{ animation:rd-bob 2.4s ease-in-out infinite; }
.rd-row.is-now .rd-ring::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:3px solid var(--rc);
  animation:rd-pulse 2.4s ease-out infinite;
}
@keyframes rd-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes rd-pulse{ 0%{ transform:scale(.8); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }

.rd-stem{
  position:absolute; width:3px; margin-left:-1.5px; border-radius:2px;
  background:var(--rc); opacity:.75;
}

.rd-card{
  position:absolute;
  transform:translate(-50%, -100%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  white-space:nowrap; text-align:center;
  font-family:var(--rd-font);
}
.rd-month{
  font-weight:800; font-size:42px; line-height:.95; letter-spacing:-.02em;
  color:var(--rc);
  text-shadow:0 0 24px var(--rc);
}
.rd-pill{
  appearance:none; -webkit-appearance:none; border:0; margin:0;
  font:800 17px/1 var(--rd-font); color:#fff;
  padding:8px 18px 7px; border-radius:10px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--rc) 62%, #fff) 0%, var(--rc) 100%);
  box-shadow:0 5px 16px -5px var(--rc);
  text-shadow:0 1px 2px rgba(0,0,30,.3);
  transition:box-shadow .2s ease, filter .2s ease;
}
button.rd-pill{ cursor:pointer; }
button.rd-pill:hover,
button.rd-pill:focus-visible{
  filter:brightness(1.08);
  box-shadow:0 0 16px 2px var(--rc), 0 0 34px 6px color-mix(in srgb, var(--rc) 45%, transparent);
}
.rd-tags{ display:flex; align-items:center; gap:8px; }
.rd-month, .rd-tags{ transition:opacity .2s ease; }
.rd-row.is-peek .rd-month,
.rd-row.is-peek .rd-tags{ opacity:0; pointer-events:none; }   /* one of this month's games is hovered */
.rd-card .tl-icons{ margin-top:8px; }

.rd-now{
  display:inline-flex; align-items:center; gap:7px;
  font:800 14px/1 var(--rd-font); color:#fff;
  padding:5px 12px 4px; border-radius:999px;
  background:rgba(255,59,59,.16);
  box-shadow:inset 0 0 0 1px rgba(255,95,95,.5);
}
.rd-now .live-dot{ margin:0; }

.rd-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:2; pointer-events:none;
  font:700 13px/1 var(--rd-font); color:rgba(226,236,255,.72);
  padding:8px 14px 7px; border-radius:999px;
  background:rgba(8,20,64,.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:opacity .6s ease;
}
.tl-road.is-moved .rd-hint{ opacity:0; }

@media (max-width:700px){
  .rd-hint{ bottom:10px; }
}
@media (prefers-reduced-motion: reduce){
  .rd-row.is-now .rd-pin, .rd-row.is-now .rd-ring::after{ animation:none; }
  .rd-part, .rd-row{ transition:none; }
}

/* ---------- the toy car ---------- */
.rd-track{ fill:none; stroke:none; }
.rd-car{ position:absolute; left:0; top:0; width:0; height:0; pointer-events:none; }
.rd-car svg{
  position:absolute; left:-32px; top:-17px; width:112px; height:34px; overflow:visible;
  transform:scale(var(--car-s, 1)); transform-origin:32px 17px;
  filter:drop-shadow(0 6px 5px rgba(0,0,25,.55));
}
.rd-car .rd-beam{ opacity:.4; transition:opacity .3s ease; }
.tl-road.is-flying .rd-car .rd-beam{ opacity:.9; }
.rd-car-body{ animation:rd-idle .9s infinite; }
/* the idle bob starts from rest (no jump when a car starts idling) and loops smoothly */
@keyframes rd-idle{
  0%  { transform:translateY(0); animation-timing-function:ease-out; }
  25% { transform:translateY(.35px); animation-timing-function:ease-in-out; }
  75% { transform:translateY(-.35px); animation-timing-function:ease-in; }
  100%{ transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .rd-car-body{ animation:none; } }

/* ---------- a game's build log as a road (class added by timeline-road.js) ---------- */
/* While the log is open the page can't scroll and loses its scrollbar; the page keeps
   its width (the band still reaches the right edge), so nothing under the dive moves. */
html.rd-lock body{ padding-right:var(--rd-sw, 0px); }
html.rd-lock .fx-band{ margin-right:calc(var(--rd-sw, 0px) * -1); padding-right:var(--rd-sw, 0px); }
html.rd-lock body .site-header{
  right:var(--rd-sw, 0px);
  padding-left:max(24px, calc((100% - var(--rd-sw, 0px) - var(--maxw, 1120px)) / 2 + 24px));
  padding-right:max(24px, calc((100% - var(--rd-sw, 0px) - var(--maxw, 1120px)) / 2 + 24px));
}
#gameModal.is-road{
  background:transparent; color:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  scrollbar-width:none;                     /* the backdrop covers it anyway; hide it from the start */
}
#gameModal.is-road::-webkit-scrollbar{ display:none; width:0; height:0; }
/* The log's backdrop (and its header's) is a copy of the page's band background,
   pinned to where the band sits on screen, so landing on the log changes nothing. */
#gameModal.is-road::before,
#gameModal.is-road .game-overlay-head::before{
  content:""; pointer-events:none;
  background-color:#071236;
  background-image:
    radial-gradient(900px 560px at 88% 0%, rgba(52,196,255,.16), transparent 70%),
    radial-gradient(760px 560px at 0% 900px, rgba(36,104,255,.22), transparent 72%),
    radial-gradient(860px 480px at 100% calc(100% - 560px), rgba(52,150,255,.13), transparent 72%),
    linear-gradient(180deg, #0e2266 0%, #0b1b57 55%, #071236 100%);
  background-size:var(--bg-w, 100%) var(--bg-h, 100%);
  background-position:var(--bg-x, 0px) var(--bg-y, 0px);
  background-repeat:no-repeat;
}
#gameModal.is-road::before{ position:fixed; inset:0; z-index:-1; transition:opacity .25s ease; }
#gameModal.is-road .game-overlay-head{ background:none; }
#gameModal.is-road .game-overlay-head::before{
  position:absolute; inset:0; z-index:-1;
  background-attachment:fixed;             /* lines up with the backdrop behind it */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px), transparent);   /* solid behind the title, soft bottom edge */
          mask-image:linear-gradient(#000 calc(100% - 22px), transparent);
  /* covers the top of the screen as soon as the log opens, before the turning
     road can swing up there, so the road is never seen above the header */
  animation:rd-head-in .16s ease-out both;
}
@keyframes rd-head-in{ from{ opacity:0; } to{ opacity:1; } }
#gameModal.is-road .game-overlay-head-inner h3{ color:#fff; }
#gameModal.is-road .modal-sub{ color:rgba(226,236,255,.72); }
#gameModal.is-road #daysBody{ position:relative; }
#gameModal.is-road .build-days::before{
  /* road + its shaded edge + dashes + glow, all inside one strip that is wide
     enough for the glow, so a mask on the strip only ever cuts it top/bottom */
  --strip:calc(var(--rw, 44px) + 2 * var(--gpad, 0px));
  left:calc(50% + var(--rx, 0px)); width:var(--strip); margin-left:calc(var(--strip) / -2); transform:none;
  top:calc(var(--sty, 0px) - 400px); bottom:-40px;
  border:0; border-radius:0; box-shadow:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0 var(--rd1, 16px), transparent var(--rd1, 16px))
      50% var(--rdo, 0px) / var(--rdash, 3px) var(--rd2, 34px) repeat-y,
    linear-gradient(var(--rc), var(--rc)) 50% 0 / var(--rw, 44px) 100% no-repeat,
    linear-gradient(var(--rc-dark), var(--rc-dark)) calc(50% + var(--rshade, -9px)) 0 / var(--rw, 44px) 100% no-repeat,
    var(--rgl, none) 0 0 / 100% 100% no-repeat;
  transition:opacity .25s ease;
}
#gameModal.is-road .build-day{ grid-template-columns:1fr calc(var(--rw, 44px) + 46px) 1fr; }
/* finish line: the road ends on a checkered stretch */
#gameModal.is-road .build-days::after{
  content:""; position:absolute; left:50%; bottom:-40px;
  width:var(--rw, 44px); height:var(--rw, 44px); margin-left:calc(var(--rw, 44px) / -2);
  background:repeating-conic-gradient(#f4f6fb 0 25%, #14182a 0 50%) 0 0 / calc(var(--rw, 44px) / 3) calc(var(--rw, 44px) / 3);
  box-shadow:var(--rshade, -9px) 0 0 rgba(4,8,28,.6), 0 0 calc(var(--rglow, 16px) * 2) rgba(255,255,255,.18);
}
/* While the camera dives in, the log is open but see-through: its days and header
   text fade in early over the moving road and the page around the road fades to the
   backdrop. When the camera lands, the log's own road, car and header backdrop fade
   in over the identical zoomed ones, then the window over the road closes. */
#gameModal.is-road.is-prep{ pointer-events:none; }
#gameModal.is-road.is-prep::before{ opacity:0; }
#gameModal.is-road.is-prep.is-show::before{
  opacity:1;
  -webkit-mask:linear-gradient(#000 0 0) top / 100% var(--hole-top, 0px) no-repeat,
               linear-gradient(#000 0 0) bottom / 100% var(--hole-bot, 0px) no-repeat;
          mask:linear-gradient(#000 0 0) top / 100% var(--hole-top, 0px) no-repeat,
               linear-gradient(#000 0 0) bottom / 100% var(--hole-bot, 0px) no-repeat;
}
#gameModal.is-road.is-prep:not(.is-land):not(.is-ease) .build-days::before{ opacity:0; }
/* Inside the window the zoomed road and car already look exactly like the log's,
   so the log's road and car take over there in one step when the window closes
   (fading one copy in over the other doubled the glow and lights). Outside the
   window the log's road fades in first. */
#gameModal.is-road.is-prep .rd-log-car{ visibility:hidden; }
#gameModal.is-road.is-prep .build-days::before{
  -webkit-mask:linear-gradient(#000 0 0) 0 0 / 100% var(--hm-top, 0px) no-repeat,
               linear-gradient(#000 0 0) 0 calc(var(--hm-top, 0px) + var(--hm-h, 0px)) / 100% 100% no-repeat;
          mask:linear-gradient(#000 0 0) 0 0 / 100% var(--hm-top, 0px) no-repeat,
               linear-gradient(#000 0 0) 0 calc(var(--hm-top, 0px) + var(--hm-h, 0px)) / 100% 100% no-repeat;
}
#gameModal.is-road .game-overlay-head-inner,
#gameModal.is-road .build-days{ transition:opacity .3s ease; }
#gameModal.is-road.is-prep:not(.is-show) .game-overlay-head-inner,
#gameModal.is-road.is-prep:not(.is-show) .build-days{ opacity:0; }
#gameModal.is-road .build-day-node{
  background:#fff;
  box-shadow:0 0 0 4px var(--rc-dark), 0 0 14px 2px var(--rc);
}
#gameModal.is-road .build-day-pill{
  color:#fff;
  background:linear-gradient(135deg, color-mix(in srgb, var(--rc) 62%, #fff) 0%, var(--rc) 100%);
  box-shadow:0 5px 16px -5px var(--rc);
}
#gameModal.is-road .build-day-items,
#gameModal.is-road .build-day-items li{ color:rgba(226,236,255,.86); }
#gameModal.is-road .build-milestone-pill{ position:relative; z-index:2; box-shadow:0 8px 20px -8px rgba(0,0,20,.8); }
.rd-log-car{ position:absolute; left:calc(50% + var(--rx, 0px)); top:54px; width:0; height:0; z-index:0; pointer-events:none; transition:top .15s linear, opacity .3s ease; }
.rd-log-turn{ position:absolute; left:0; top:0; width:0; height:0; transform:rotate(90deg) scale(var(--lcw, 1.5)); transform-origin:0 0; }
.rd-log-car svg{
  position:absolute; left:-32px; top:-17px; width:112px; height:34px; overflow:visible;
  transform:scale(var(--lcc, 1)); transform-origin:32px 17px;
  filter:drop-shadow(0 6px 5px rgba(0,0,25,.55));   /* same as the car on the road */
}
.rd-log-car .rd-beam{ opacity:.4; }
@media (prefers-reduced-motion: reduce){ .rd-log-car{ transition:none; } }

/* zooming into a game: the other months and every sign fade away */
.tl-road.is-diving .rd-row{ opacity:0 !important; pointer-events:none; }
.tl-road.is-diving .rd-part:not(.is-keep),
.tl-road.is-diving .rd-hint{ opacity:0 !important; }
.tl-road.is-diving .rd-car .rd-beam{ opacity:.4 !important; }   /* same lights as the log's car */
/* both cars hold still through the swap: a bobbing car is drawn soft and a half-pixel off */
.tl-road.is-diving .rd-car-body, #gameModal.is-road.is-prep .rd-car-body{ animation:none; }
.tl-road.is-diving .rd-stage{ -webkit-mask-image:none; mask-image:none; box-shadow:none; }   /* road runs edge to edge into the log's */