/* Rank-coloured factory occupies the existing header illustration slot. */
#pageGames .factory-scene { container-type:inline-size; --factory-color:#69B8FF; }
#pageGames .factory-scene .factory-art {
  position:absolute; inset:12% 0 0; transform-origin:50% 100%;
  animation:rank-factory-breathe 5.6s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
}
#pageGames .factory-scene img.factory-hero {
  position:static; display:block; width:100%; height:auto;
  max-width:none; clip-path:none; filter:none; transition:none;
}
#pageGames .factory-scene::before,
#pageGames .factory-scene::after { display:none; }
#pageGames .factory-scene .factory-window {
  position:absolute; width:8.1%; height:4.8%; border-radius:12%;
  background:linear-gradient(140deg,#effcff90,#d0edff38);
  opacity:0; transform:skewY(6deg);
  animation:rank-factory-window 8s ease-in-out infinite;
}
#pageGames .factory-scene .window-first { left:21.6%; top:65%; animation-delay:-1s; }
#pageGames .factory-scene .window-second { left:37.2%; top:67.3%; animation-delay:-3.3s; }
#pageGames .factory-scene .window-third { left:52.1%; top:69.3%; animation-delay:-5.6s; }
#pageGames .factory-scene .factory-letter {
  left:78.3%; top:23.5%; bottom:auto; color:var(--factory-color);
  font-family:'Montserrat'; font-synthesis:none; font-weight:500;
  font-size:5.2cqw; line-height:1; opacity:0;
  transform:translate(-50%,-50%);
  animation:rank-factory-letters 6.4s linear infinite;
}
#pageGames .factory-scene .letter-a { animation-delay:-.3s; }
#pageGames .factory-scene .letter-b { animation-delay:-1.9s; }
#pageGames .factory-scene .letter-c { animation-delay:-3.5s; }
#pageGames .factory-scene .letter-d { animation-delay:-5.1s; }
@keyframes rank-factory-breathe {
  0%,100% { transform:scale(1,1); }
  25% { transform:scale(1.060,.900); }
  65% { transform:scale(.970,1.045); }
}
@keyframes rank-factory-window { 0%,20%,80%,100% { opacity:0; } 45%,55% { opacity:.7; } }
@keyframes rank-factory-letters {
  0% { opacity:0; transform:translate(-50%,0) scale(.60) rotate(-9deg); filter:blur(.55cqw); }
  12% { opacity:.68; filter:blur(.45cqw); }
  42% { opacity:.76; transform:translate(calc(-50% + 1.2cqw),-10cqw) scale(.92) rotate(6deg); filter:blur(.50cqw); }
  72% { opacity:.42; transform:translate(calc(-50% - 1.4cqw),-20cqw) scale(1.02) rotate(-5deg); filter:blur(.75cqw); }
  100% { opacity:0; transform:translate(calc(-50% + 2cqw),-29cqw) scale(1.06) rotate(7deg); filter:blur(1.1cqw); }
}
#pageGames .factory-motion-paused .factory-art,
#pageGames .factory-motion-paused .factory-letter,
#pageGames .factory-motion-paused .factory-window { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
  #pageGames .factory-scene .factory-art { animation:none; will-change:auto; }
  #pageGames .factory-scene .factory-letter { display:none; }
  #pageGames .factory-scene .factory-window { animation:none; opacity:.15; }
}

/* Version 2 route styles are scoped to the games menu. */
#gameCards.factory-route {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
  padding: .5rem 0 1rem;
  isolation: isolate;
  container-type: inline-size;
}
.factory-route .route-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.route-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route-road-shadow { stroke: #536f9e; stroke-opacity: .09; filter: blur(1.5px); }
.route-road-curb-side { stroke: #d7e1ef; }
.route-road-edge { stroke: #fcfdff; }
.route-road-gutter { stroke: #91b5e8; opacity: .42; }
.route-road-surface { stroke: url(#route-pavement); }
.route-road-markings { stroke: #fff; stroke-width: 2.6; stroke-opacity: .95; }
.route-road-markings line { stroke-linecap: round; }
#gameCards .route-stop {
  display: grid;
  grid-template-columns: 46% 54%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  gap: 0;
  min-height: 17rem;
  padding: .4rem 0 6.1rem;
  overflow: visible;
  isolation: auto;
  border: 0;
  border-radius: 1.5rem;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transform: none;
  transition: opacity .4s ease;
  -webkit-tap-highlight-color: transparent;
}
#gameCards .route-stop::before,
#gameCards .route-stop::after { display: none; }
#gameCards .route-stop[data-route-side="right"] { grid-template-columns: 54% 46%; }
#gameCards .route-stop[data-route-side="right"] .route-scene { grid-column: 2; grid-row: 1; }
#gameCards .route-stop[data-route-side="right"] .route-details { grid-column: 1; grid-row: 1; }
.route-stop .route-scene {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  align-self: center;
  pointer-events: none;
}
.route-platform {
  position: absolute;
  z-index: -1;
  left: -1%;
  right: -1%;
  bottom: -2%;
  height: 24%;
  border-radius: 50%;
  border: 4px solid #fcfdff;
  background: linear-gradient(145deg, #e9eff8, #dfe7f3);
  box-shadow: 0 3px 0 #d8e0ec, 0 5px 7px #60739512, inset 0 1px 2px #60739513;
}
.route-building {
  position: absolute;
  left: -3%;
  bottom: 3%;
  width: 106%;
  height: 106%;
  display: block;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease, opacity .5s ease;
  transform-origin: 50% 90%;
}
/* Keep the footprint for route geometry; the new cutouts stand directly on the field. */
.route-stop:not(.upcoming-workshop) .route-platform { visibility: hidden; }
.route-stop .route-tree {
  position: absolute;
  z-index: 2;
  left: var(--tree-x);
  bottom: var(--tree-ground);
  width: var(--tree-size);
  aspect-ratio: 1;
  margin-left: calc(var(--tree-size) / -2);
  pointer-events: none;
}
.route-tree-art {
  position: absolute;
  inset: 0;
  background: url('/static/assets/factory-route/illustrated-trees.png') var(--tree-position) / 300% 200% no-repeat;
  transform-origin: 50% 89%;
  animation: route-tree-breeze 8s ease-in-out infinite;
  animation-delay: var(--tree-delay);
  animation-play-state: paused;
}
.route-tree-wide { --tree-position: 0 0; }
.route-tree-tall { --tree-position: 50% 0; }
.route-tree-lobed { --tree-position: 100% 0; }
.route-tree-grove { --tree-position: 0 100%; }
.route-tree-copse { --tree-position: 50% 100%; }
.route-tree-thicket { --tree-position: 100% 100%; }
.route-in-view .route-tree-art { animation-play-state: running; }
#gameCards .route-stop .card-index {
  position: absolute;
  z-index: 4;
  left: 3%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 2px solid #fff;
  background: color-mix(in srgb, var(--station-color) 80%, #5276b0);
  color: #fff;
  box-shadow: 0 3px 7px #60739526;
  font-size: .7rem;
  font-weight: 700;
}
#gameCards .route-stop[data-route-side="right"] .card-index { left: auto; right: 3%; }
.route-stop .route-details {
  position: relative;
  z-index: 3;
  display: block;
  min-width: 0;
  margin-left: .2rem;
  padding: .85rem .8rem .8rem;
  border: 1px solid #dde4ef;
  border-radius: 1.1rem;
  background: linear-gradient(140deg, #fffffffa, #f9fbffed);
  box-shadow: 0 5px 16px #5265850a;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s ease, box-shadow .4s ease;
}
.route-stop[data-route-side="right"] .route-details { margin-left: 0; margin-right: .2rem; }
#gameCards .route-stop .game-card-copy { display: grid; gap: .4rem; transform: none; }
#gameCards .route-stop .game-card-copy strong {
  font-size: clamp(14px, 4.5cqw, 19px);
  line-height: 1.3;
  font-weight: 650;
  text-wrap: balance;
  overflow-wrap: normal;
}
#gameCards .route-stop .game-card-copy > span {
  color: #69768a;
  font-size: max(11px, .66rem);
  line-height: 1.5;
  font-weight: 500;
}
#gameCards .route-stop [data-best] { display: inline-block; white-space: nowrap; }
#gameCards .route-stop .game-card-copy .workshop-lock {
  display: block;
  margin: .25rem 2rem 0 0;
  min-height: 2rem;
  align-content: center;
  color: var(--station-color);
  font-size: max(11px, .66rem);
  line-height: 1.4;
  font-weight: 600;
}
#gameCards .route-stop .game-arrow {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--station-color) 76%, #5178bf);
  color: #fff;
  font-size: 1.15rem;
  text-align: center;
  transform: none;
  transition: transform .3s ease, background .3s ease;
}
#gameCards .route-stop.is-locked .game-arrow { background: transparent; }
#gameCards .route-stop.is-locked .game-arrow .career-helmet { width: 2.5rem; max-width: none; }
#gameCards .route-stop.is-locked .workshop-lock { color: #768297; }
.route-stop.is-locked .route-building { filter: saturate(.65); opacity: .72; }
.route-stop.is-locked .route-details { background: #f7f9fbed; border-color: #e1e6ee; }
.route-future-island { position: absolute; inset: 0; width: 100%; height: 100%; }
#gameCards .route-stop.upcoming-workshop { min-height: 15.5rem; }
.route-stop.upcoming-workshop .route-platform { background: #e4eaf4; }
.route-stop.upcoming-workshop .route-scene { aspect-ratio: 1.15; }
#gameCards .route-stop.upcoming-workshop .card-index { background: #8a96ac; }
#gameCards .route-stop .upcoming-helmet {
  position: absolute;
  z-index: 3;
  left: 27%;
  top: 34%;
  display: block;
  width: 46%;
  filter: drop-shadow(0 4px 5px #121b3d45);
}
#gameCards .route-stop .upcoming-helmet .career-helmet { width: 100%; height: auto; }
#gameCards .route-stop.upcoming-workshop .route-details { border-color: #e4e8f0; background: #fcfdfff0; }
#gameCards .route-stop.upcoming-workshop .workshop-lock { margin-right: 0; min-height: 0; color: #8791a3; font-weight: 500; }
#gameCards .route-stop.upcoming-workshop .game-card-copy strong { font-size: clamp(13px, 4.2cqw, 18px); }
.route-motion-ready .route-stop .route-scene,
.route-motion-ready .route-stop .route-details,
.route-motion-ready .route-stop .route-tree { opacity: 0; translate: 0 10px; transition: opacity .55s ease, translate .55s cubic-bezier(.2,.7,.2,1), transform .4s ease, border-color .4s ease, box-shadow .4s ease; }
.route-motion-ready .route-stop.route-revealed .route-scene,
.route-motion-ready .route-stop.route-revealed .route-details,
.route-motion-ready .route-stop.route-revealed .route-tree { opacity: 1; translate: 0 0; }
#gameCards .route-stop:focus-visible { outline: 2px solid var(--station-color); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  #gameCards button.route-stop:not(.is-locked):hover .route-building { transform: translateY(-3px); }
  #gameCards button.route-stop:not(.is-locked):hover .route-details { border-color: var(--station-color); box-shadow: 0 6px 18px #52658514; }
  #gameCards button.route-stop:not(.is-locked):hover .game-arrow { transform: translate(1px, -1px); }
}
#gameCards button.route-stop:active { opacity: 1; }
#gameCards button.route-stop:not(.is-locked):active .route-details { transform: scale(.98); }
#gameCards button.route-stop.is-launching { color: var(--ink); }
#gameCards button.route-stop.is-launching .route-details { border-color: var(--station-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--station-color) 16%, transparent); }
#gameCards button.route-stop.is-launching .route-building { transform: translateY(-3px); }
@keyframes route-tree-breeze { 0%, 100% { rotate: -.6deg; } 50% { rotate: .6deg; } }
@media (min-width: 480px) {
  #gameCards .route-stop { min-height: 20rem; padding-bottom: 7rem; }
  .route-stop .route-details { padding: 1rem; }
  #gameCards .route-stop.upcoming-workshop { min-height: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
  #gameCards.factory-route *, #gameCards.factory-route *::before, #gameCards.factory-route *::after { animation: none !important; transition: none !important; }
  .route-motion-ready .route-stop .route-scene, .route-motion-ready .route-stop .route-details, .route-motion-ready .route-stop .route-tree { opacity: 1; translate: none; }
  #gameCards .route-stop .route-building, #gameCards .route-stop .route-details, #gameCards .route-stop .game-arrow { transform: none !important; }
}