/* Detail regions consume the shared homepage square unit and gap. Only the
   player and ad containers have route-specific geometry. */
.route-game .site-shell {
  --game-gap: var(--portal-grid-gap);
  --game-tile: var(--portal-unit);
}

.route-game .site-main main {
  padding-top: 24px;
  padding-bottom: 0;
}

.route-game .game-hero {
  max-width: 1733px;
  margin-inline: auto;
}

.route-game .game-layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.route-game .game-layout--compact:has(>.game-ad-column) {
  grid-template-columns: minmax(0, 1fr) clamp(210px, 18.5vw, 300px);
  gap: 24px;
}

.route-game .gamebox {
  width: 100%;
  min-height: 0;
  margin: 0;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px 10px 0 0;
  background: #062b4d;
  box-shadow: 0 10px 24px #0b536344;
}

.route-game .gamebox.gamebox--active {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

.route-game .gamebox[style*="9/16"]:not(.gamebox--active),
.route-game .gamebox.gamebox--active[style*="9/16"] {
  width: 100%;
  max-width: none;
  margin: 0;
  aspect-ratio: 16 / 9;
}

.route-game .game-primary:has(.gamebox[style*="9/16"]) .game-action-strip {
  max-width: none;
  margin: 0;
}

.route-game .gamebox--iframe[style*="4/3"] .game-frame,
.route-game .gamebox--iframe[style*="9/16"] .game-frame {
  inset: 0 auto 0 50%;
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: var(--game-ratio);
  transform: translateX(-50%);
}

.route-game .gamebox:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
}

.route-game .gamebox:has(>.game-poster) {
  background: linear-gradient(105deg, #06435a, #11768c 50%, #06435a);
}

.route-game .game-poster {
  opacity: 1;
  object-fit: contain;
}

.route-game .game-poster[src="/tap-sequence-stage.webp"] {
  object-fit: cover;
}

.route-game .game-start {
  width: min(84%, 350px);
  max-width: 350px;
  padding: 21px 25px 20px;
  border: 1px solid #ffffff36;
  border-radius: 17px;
  background: #082f39d9;
  box-shadow: 0 12px 32px #032d3c40;
  backdrop-filter: blur(12px);
}

.route-game .game-start>span {
  color: #d5fff3;
  font-size: .73rem;
  letter-spacing: .12em;
}

.route-game .game-start p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  max-height: 4.65em;
  margin: 10px 0 15px;
  color: #fff;
  font-size: .91rem;
  line-height: 1.55;
}

.route-game .game-start [data-start] {
  min-height: 42px;
  padding: 8px 22px;
  border-radius: 999px;
  background: #fff;
  color: #0a6e70;
  font-size: .96rem;
  box-shadow: 0 4px 14px #002d3140;
}

.route-game .game-action-strip {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: #fff;
  box-shadow: none;
}

.route-game .game-action-strip .game-topline {
  flex: 1 1 250px;
  gap: 12px;
  min-width: 0;
}

.route-game .game-action-thumb {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.route-game .game-action-strip .game-topline strong {
  color: #0b3552;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.route-game .game-action-strip .game-developer {
  color: #668095;
  font-size: 13px;
  line-height: 1.35;
}

.route-game .game-action-strip .game-action-buttons:not(:has(button:not([hidden]))) {
  display: none;
}

.route-game .game-action-strip .game-action-buttons button {
  display: grid;
  grid-template-rows: 24px 12px;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #078cdd;
}

.route-game .game-action-strip .game-toolbar-icon {
  display: block;
  grid-row: 1;
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
}

.route-game .game-action-strip .game-action-buttons {
  gap: 4px;
}

.route-game .game-action-strip .game-action-buttons button:hover,
.route-game .game-action-strip .game-action-buttons button:focus-visible {
  background: #edf8ff;
  color: #078cdd;
}

.route-game .game-action-strip .game-action-buttons button:focus-visible {
  outline: 2px solid #078cdd;
  outline-offset: 2px;
}

.route-game .game-under-stage {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.route-game .game-under-stage .ad-slot--game-below {
  width: 100%;
  height: clamp(82px, 6vw, 112px);
  min-height: 0;
  background: #c7fff3a8;
}

.route-game .game-ad-column {
  gap: 12px;
  padding: 0;
}

.route-game .game-ad-column .ad-slot--game-side {
  width: 100%;
  height: clamp(210px, 16vw, 300px);
  min-height: 0;
  background: #c7fff3a8;
}

.route-game .game-layout .game-recommendations {
  margin: 0;
  padding: 0;
}

.route-game .game-layout .game-recommendations .cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}

.route-game .game-layout .game-recommendations .card {
  flex: none;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--game-card-shadow, 0 5px 15px #075f6633);
}

.route-game .game-lanes {
  margin: 21px 0 35px;
}

.route-game .game-lanes .cards {
  grid-template-columns: repeat(auto-fill, var(--portal-unit));
  grid-auto-rows: var(--portal-unit);
  gap: var(--portal-grid-gap);
}

.route-game .game-lanes .card {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  box-shadow: var(--game-card-shadow, 0 5px 14px #075f662c);
}

.route-game .game-lanes .game-more-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1;
  padding: 8px 6px;
  border: 1px solid #ffffffbd;
  border-radius: 12px;
  background: #f3fbff;
  color: #118ee4;
  box-shadow: 0 5px 14px #075f6620;
  font-size: clamp(.72rem, 1vw, .95rem);
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
}

.route-game .game-lanes .game-more-tile svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.route-game .game-lanes .game-more-tile:hover {
  background: #fff;
}

.route-game .game-lanes .game-more-tile:focus-visible {
  outline: 3px solid #118ee4;
  outline-offset: 3px;
}

.route-game .game-category-strip {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-template-columns: repeat(auto-fill, calc(2 * var(--portal-unit) + var(--portal-grid-gap)));
  grid-auto-rows: var(--portal-unit);
  gap: var(--portal-grid-gap);
  margin-top: 24px;
  padding-bottom: 76px;
}

.route-game .game-category-tile {
  min-height: 0;
  gap: 10px;
  padding: 6px;
  border-radius: 15px;
}

.route-game .game-category-art {
  flex-basis: calc(var(--portal-unit) - 12px);
  width: calc(var(--portal-unit) - 12px);
  height: calc(var(--portal-unit) - 12px);
  border-radius: 10px;
  background: transparent;
}

.route-game .game-category-tile strong {
  font-size: .84rem;
}

.route-game .game-detail-content {
  padding-top: 73px;
  padding-bottom: 76px;
}

.route-game .game-detail-content>section,
.route-game .game-detail-content>.attribution {
  max-width: 1050px;
}

.route-game .game-detail-content>.game-intro {
  grid-template-columns: 205px minmax(0, 1fr);
  column-gap: 48px;
  row-gap: 16px;
  padding-bottom: 62px;
}

.route-game .game-intro-cover {
  width: 205px;
  border-radius: 16px;
}

.route-game .game-intro-summary {
  max-width: 74ch;
  font-size: 1rem;
  line-height: 1.6;
}

.route-game .game-intro h1 {
  font-size: clamp(1.7rem, 2.5vw, 2.55rem);
}

.route-game .game-intro>.game-tags,
.route-game .game-intro>.game-intro-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 4px 0 0;
}

.route-game .game-intro-copy .game-tags {
  gap: 7px;
  margin: 17px 0 0;
}

.route-game .game-intro .game-tags .pill,
.route-game .game-intro .game-intro-tags .pill {
  min-height: 27px;
  padding: 4px 10px;
  border: 1px solid #d8e9e6;
  background: #e9f9f4;
  color: #2f6672;
  font-size: .75rem;
  font-weight: 650;
}

.route-game .game-detail-content>.game-about {
  padding-bottom: 25px;
}

.route-game .game-about h2,
.route-game .game-specs h2 {
  font-size: 1.45rem;
}

.route-game .game-detail-content>.game-controls,
.route-game .game-detail-content>.game-information,
.route-game .game-meta-item,
.route-game .game-meta-item:nth-child(2n),
.route-game .game-meta-item:nth-child(3n),
.route-game .game-meta-item:nth-child(4n) {
  grid-template-columns: minmax(175px, 250px) minmax(0, 1fr);
  gap: 20px;
}

.route-game .game-meta-item,
.route-game .game-meta-item:nth-child(2n),
.route-game .game-meta-item:nth-child(3n),
.route-game .game-meta-item:nth-child(4n) {
  padding: 17px 8px;
}

.route-game .game-detail-content > .game-detail-related {
  width: 100%;
  max-width: 1050px;
  margin-inline: auto;
  padding: 37px 0 50px;
  border-bottom: 0;
}

.route-game .game-detail-related h2 {
  margin-bottom: 28px;
  font-size: 1.45rem;
}

/* The reading section has its own equal-cover row. The surrounding game wall
   continues to use the shared small/medium/large portal grid. */
.site-shell .site-main .game-detail-related .cards {
  --related-card-gap: clamp(12px, 1vw, 16px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--related-card-gap);
}

.site-shell .site-main .game-detail-related .cards > .card {
  flex: 0 0 calc((100% - 3 * var(--related-card-gap)) / 4);
  width: calc((100% - 3 * var(--related-card-gap)) / 4);
  height: auto;
  grid-area: auto;
  aspect-ratio: 1;
  border-radius: 16px;
}

.route-game .game-detail-related .card::after {
  display: none;
}

@media (max-width: 1100px) {
  .route-game .game-detail-content>.game-intro {
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: 30px;
  }

  .route-game .game-intro-cover {
    width: 190px;
  }
}

@media (max-width: 900px) {
  .route-game .game-detail-content {
    padding-top: 52px;
  }
}

@media (max-width: 650px) {
  .site-shell .site-main .game-detail-related .cards > .card {
    flex-basis: calc((100% - var(--related-card-gap)) / 2);
    width: calc((100% - var(--related-card-gap)) / 2);
  }

  .route-game .site-main main {
    padding-top: 10px;
  }

  .route-game .gamebox {
    aspect-ratio: 16 / 9;
    border-radius: 9px 9px 0 0;
  }

  .route-game .gamebox.gamebox--active {
    min-height: 240px;
    aspect-ratio: 16 / 9;
  }

  .route-game .gamebox.gamebox--active.gamebox--local:not(:fullscreen) {
    height: auto;
    min-height: 350px;
    aspect-ratio: auto;
    padding: 20px;
  }

  .route-game .gamebox[style*="4/3"],
  .route-game .gamebox.gamebox--active[style*="4/3"] {
    aspect-ratio: 4 / 3;
  }

  .route-game .gamebox[style*="9/16"]:not(.gamebox--active),
  .route-game .gamebox.gamebox--active[style*="9/16"] {
    width: min(100%, 405px);
    margin-inline: auto;
    aspect-ratio: 9 / 16;
  }

  .route-game .game-primary:has(.gamebox[style*="9/16"]) .game-action-strip {
    max-width: 405px;
    margin-inline: auto;
  }

  .route-game .gamebox--iframe[style*="4/3"] .game-frame,
  .route-game .gamebox--iframe[style*="9/16"] .game-frame {
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .route-game .game-start {
    width: min(86%, 300px);
    padding: 16px 19px;
  }

  .route-game .game-start p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: 3.2em;
    font-size: .83rem;
  }

  .route-game .game-under-stage .ad-slot--game-below {
    height: 76px;
  }

  .route-game .game-category-strip {
    grid-template-columns: repeat(auto-fill, calc(2 * var(--portal-unit) + var(--portal-grid-gap)));
    gap: var(--portal-grid-gap);
    padding-bottom: 48px;
  }

  .route-game .game-category-tile {
    min-height: 0;
    gap: 7px;
    padding: 5px;
  }

  .route-game .game-category-art {
    flex-basis: calc(var(--portal-unit) - 10px);
    width: calc(var(--portal-unit) - 10px);
    height: calc(var(--portal-unit) - 10px);
  }

  .route-game .game-detail-content {
    padding: 48px 20px 62px;
  }

  .route-game .game-detail-content>.game-intro {
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 17px;
    padding-bottom: 42px;
  }

  .route-game .game-intro-cover {
    width: 92px;
    border-radius: 11px;
  }

  .route-game .game-intro h1 {
    font-size: 1.48rem;
  }

  .route-game .game-intro-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: .94rem;
  }

  .route-game .game-intro>.game-tags,
  .route-game .game-intro>.game-intro-tags {
    grid-column: 1 / -1;
  }

  .route-game .game-detail-content>.game-controls,
  .route-game .game-detail-content>.game-information {
    display: block;
  }

  .route-game .game-meta-item,
  .route-game .game-meta-item:nth-child(2n),
  .route-game .game-meta-item:nth-child(3n),
  .route-game .game-meta-item:nth-child(4n) {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .route-game .game-start,
  .route-game .game-ad-column .card,
  .route-game .game-lanes .card {
    animation: none;
    transition: none;
  }
}

/* Feedback is separate from the site's private activity counters. */
.route-game .game-feedback {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: auto;
}

.route-game .game-feedback-control { position: relative; display: block; }

.route-game .game-feedback-button {
  display: grid;
  grid-template-rows: 24px 12px;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #078cdd;
  cursor: pointer;
}

.route-game .game-feedback-button svg { display: block; width: 24px; height: 24px; stroke-width: 1.8; }
.route-game .game-feedback-button:hover { background: #edf8ff; }
.route-game .game-feedback-button:focus-visible { outline: 2px solid #078cdd; outline-offset: 2px; }
.route-game .game-feedback-button[aria-pressed="true"] { background: #e8f5ff; }
.route-game .game-feedback-button[aria-pressed="true"] svg { fill: currentColor; }
.route-game .game-feedback-button:disabled { opacity: .4; cursor: default; }

.route-game .game-feedback-count {
  display: block;
  min-width: 3ch;
  min-height: 12px;
  color: #617e94;
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.route-game .game-feedback-count[data-empty="true"] { visibility: hidden; }
.route-game .game-feedback [data-feedback-status][data-error="true"] {
  position: absolute;
  z-index: 4;
  top: calc(100% + 6px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 9px 11px;
  border: 1px solid #efd7d7;
  border-radius: 8px;
  background: #fff;
  color: #a13e3e;
  box-shadow: 0 5px 18px #123d5a20;
  font-size: 12px;
  line-height: 1.4;
}

.route-game .game-feedback-tooltip {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(100% + 5px);
  width: max-content;
  max-width: 160px;
  padding: 6px 8px;
  border-radius: 6px;
  background: #173e58;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  visibility: hidden;
}

.route-game .game-feedback-control:not([data-tooltip-dismissed])>.game-feedback-button:focus-visible+.game-feedback-tooltip { visibility: visible; }
@media (hover: hover) {
  .route-game .game-feedback-control:not([data-tooltip-dismissed]):hover>.game-feedback-tooltip { visibility: visible; }
}

.route-game .game-feedback-note { flex-basis: 100%; margin: 0; color: #668095; font-size: 12px; }
.route-game .game-report-dialog {
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 22px;
  overflow: auto;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #173e58;
  box-shadow: 0 18px 60px #07344b40;
}

.route-game .game-report-dialog:not([open]) { display: none; }
.route-game .game-report-dialog::backdrop { background: #052e4580; }
.route-game .game-report-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.route-game .game-report-heading h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.route-game .game-report-heading button { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; background: #edf6fb; color: #54758d; font-size: 25px; line-height: 1; }
.route-game .game-report-dialog>p { margin: 8px 0 18px; color: #668095; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.route-game .game-report-dialog form { display: grid; gap: 8px; min-width: 0; }
.route-game .game-report-dialog label { margin-top: 4px; font-size: 13px; font-weight: 700; }
.route-game .game-report-dialog label span { color: #70899c; font-weight: 400; }
.route-game .game-report-dialog select,.route-game .game-report-dialog textarea { width: 100%; min-width: 0; max-width: 100%; padding: 10px 11px; border: 1px solid #ccdce6; border-radius: 8px; background: #fff; color: #173e58; font: inherit; font-size: 14px; }
.route-game .game-report-dialog textarea { resize: vertical; min-height: 108px; }
.route-game .game-report-dialog select:focus-visible,.route-game .game-report-dialog textarea:focus-visible { outline: 2px solid #078cdd; outline-offset: 2px; }
.route-game .game-report-details-help { display: flex; justify-content: space-between; gap: 10px; color: #70899c; font-size: 11px; line-height: 1.4; }
.route-game .game-report-details-help output { flex: 0 0 auto; }
.route-game .game-report-error,.route-game .game-report-status { margin: 4px 0; font-size: 13px; line-height: 1.45; }
.route-game .game-report-error { color: #b13b3b; }
.route-game .game-report-status:empty { display: none; }
.route-game .game-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.route-game .game-report-actions button { min-height: 42px; padding: 9px 14px; border: 1px solid #d8e5ed; border-radius: 8px; background: #f5f9fc; color: #466983; font-size: 13px; }
.route-game .game-report-actions button[type="submit"] { border-color: #078cdd; background: #078cdd; color: #fff; }
.route-game .game-report-actions button:disabled { opacity: .55; cursor: default; }

@media (max-width: 650px) {
  .route-game .game-action-strip { gap: 8px; min-height: 0; padding: 8px; }
  .route-game .game-action-strip .game-topline { flex: 1 1 152px; gap: 8px; }
  .route-game .game-action-thumb { flex-basis: 40px; width: 40px; height: 40px; }
  .route-game .game-action-strip .game-topline strong { font-size: 16px; }
  .route-game .game-action-strip .game-developer { font-size: 12px; }
  .route-game .game-report-dialog select,.route-game .game-report-dialog textarea { font-size: 16px; }
}

@media (max-width: 360px) {
  .route-game .game-action-strip { row-gap: 4px; }
  .route-game .game-action-strip .game-topline { flex-basis: 100%; }
  .route-game .game-report-dialog { padding: 18px; }
}

@media (max-width: 900px) {
  .route-game .site-main>.site-header .category-nav { display: none; }
  .route-game .site-main>.site-header .header-inner { padding-bottom: 12px; }
}

/* One recommendation tree is positioned by the static renderer for each
   profile. Explicit coordinates prevent large cards from filling side rails. */
.route-game:has(.game-hero--reference) .site-main main { padding-top: 0; }
.route-game .game-hero--reference {
  width: calc(100% + var(--portal-rail) + var(--portal-gap));
  max-width: none;
  margin: 0 0 0 calc(0px - var(--portal-rail) - var(--portal-gap));
}
.route-game .game-layout--reference {
  --detail-primary-cols: 10;
  --detail-primary-rows: 6;
  --detail-reference-medium: calc(2 * var(--portal-unit) + var(--portal-grid-gap));
  --detail-toolbar-height: clamp(64px, calc(var(--portal-unit) * .67), 80px);
  --detail-stage-track-width: calc(var(--detail-primary-cols) * var(--portal-unit) + (var(--detail-primary-cols) - 1) * var(--portal-grid-gap));
  --detail-stage-track-height: calc(var(--detail-primary-rows) * var(--portal-unit) + (var(--detail-primary-rows) - 1) * var(--portal-grid-gap));
  --detail-player-width: min(var(--detail-stage-track-width), calc((var(--detail-stage-track-height) - var(--detail-toolbar-height)) * 16 / 9));
  --detail-player-inline-inset: calc((var(--detail-stage-track-width) - var(--detail-player-width)) / 2);
  display: grid;
  grid-template-columns: repeat(var(--portal-columns), minmax(0, 1fr));
  grid-auto-rows: var(--portal-unit);
  gap: var(--portal-grid-gap);
  align-items: start;
}
.route-game .game-layout--reference :is(.game-under-stage, .game-ad-column, .game-lanes),
.route-game .game-layout--reference .game-lanes>.cards { display: contents; }
.route-game .game-layout--reference>.game-primary {
  grid-column: 2 / span var(--detail-primary-cols);
  grid-row: 1 / span var(--detail-primary-rows);
  width: var(--detail-player-width);
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  align-self: start;
}
.route-game .game-layout--reference .game-action-strip {
  flex-wrap: nowrap;
  height: var(--detail-toolbar-height);
  min-height: 0;
}
.route-game .game-layout--reference .game-topline { flex: 1 1 0; }
.route-game .game-layout--reference .game-action-title { min-width: 0; }
.route-game .game-layout--reference .game-feedback-note {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  margin: 0;
  font-size: clamp(6px, .45vw, 9px);
  line-height: 1;
}
.route-game .game-layout--reference .mobile-device-note { display: none; }
.route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
  grid-column: var(--detail-col) / span var(--detail-span, 1);
  grid-row: var(--detail-row) / span var(--detail-span, 1);
  align-self: start;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
}
.route-game .game-layout--reference .card>strong { padding: 4px 3px 3px; }
.route-game .game-layout--reference .card .cover { overflow: hidden; border-radius: inherit; }
.route-game .game-layout--reference .card:focus-visible { z-index: 6; overflow: visible; }
@media (hover: hover) {
  .route-game .game-layout--reference .card:hover { z-index: 6; overflow: visible; }
}
.route-game .game-layout--reference .ad-slot--game-side {
  --detail-ad-top: clamp(10px, 1.3vw, 27px);
  /* The reference's 300x250 creative accompanies a 204px medium card.
     Scale both together, then fit the available grid including its label. */
  --detail-ad-width: min(calc(var(--detail-reference-medium) * 300 / 204), calc(3 * var(--portal-unit) + 2 * var(--portal-grid-gap) - 16px), calc((3 * var(--portal-unit) + 2 * var(--portal-grid-gap) - var(--detail-ad-top) - 20px) * 6 / 5));
  --detail-ad-height: calc(var(--detail-ad-width) * 5 / 6);
  display: grid;
  grid-column: 12 / span 3;
  grid-row: 1 / span 3;
  align-content: start;
  grid-template-rows: var(--detail-ad-height) 20px;
  justify-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--detail-ad-top) 8px 0;
  background: transparent;
}
.route-game .game-layout--reference .ad-slot--game-side::before,
.route-game .game-layout--reference .ad-slot--game-side>.ad-slot-placeholder {
  grid-column: 1;
  grid-row: 1;
  width: var(--detail-ad-width);
  height: var(--detail-ad-height);
  min-height: 0;
}
.route-game .game-layout--reference .ad-slot--game-side::before { content: ""; }
.route-game .game-layout--reference .ad-slot--game-side>.ad-slot-label {
  position: static;
  grid-column: 1;
  grid-row: 2;
  margin-top: 5px;
  font-size: .6rem;
}
.route-game .game-layout--reference .ad-slot--game-side>.ad-slot-content {
  inset: var(--detail-ad-top) auto auto 50%;
  width: var(--detail-ad-width);
  height: var(--detail-ad-height);
  transform: translateX(-50%);
}
.route-game .game-layout--reference .ad-slot--game-below {
  --detail-banner-cols: 7;
  --detail-banner-inline-inset: var(--detail-player-inline-inset);
  --detail-ad-label-width: 16px;
  --detail-ad-label-height: 0px;
  --detail-ad-width: min(calc(var(--detail-reference-medium) * 728 / 204), calc(var(--detail-banner-cols) * var(--portal-unit) + (var(--detail-banner-cols) - 1) * var(--portal-grid-gap) - var(--detail-banner-inline-inset) - var(--detail-ad-label-width)), calc((var(--portal-unit) - 5px - var(--detail-ad-label-height)) * 728 / 90));
  --detail-ad-height: calc(var(--detail-ad-width) * 90 / 728);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--detail-ad-label-width);
  grid-template-rows: var(--detail-ad-height) var(--detail-ad-label-height);
  align-content: center;
  justify-items: center;
  grid-column: 5 / span 7;
  grid-row: 7;
  /* The player is centred inside its track; both the creative and its label
     stop at the visible player's right edge, rather than the track edge. */
  width: calc(100% - var(--detail-banner-inline-inset));
  justify-self: start;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 2px 0 3px;
  background: transparent;
}
.route-game .game-layout--reference .ad-slot--game-below::before,
.route-game .game-layout--reference .ad-slot--game-below>.ad-slot-placeholder {
  grid-column: 1;
  grid-row: 1;
  width: var(--detail-ad-width);
  height: var(--detail-ad-height);
  min-height: 0;
  justify-self: end;
}
.route-game .game-layout--reference .ad-slot--game-below::before { content: ""; }
.route-game .game-layout--reference .ad-slot--game-below>.ad-slot-label {
  position: static;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(6px, .45vw, 9px);
  line-height: 1;
  writing-mode: vertical-rl;
  letter-spacing: 0;
  transform: none;
  align-self: center;
}
.route-game .game-layout--reference .ad-slot--game-below>.ad-slot-content {
  inset: calc(50% - .5px) var(--detail-ad-label-width) auto auto;
  width: var(--detail-ad-width);
  height: var(--detail-ad-height);
  transform: translateY(-50%);
}
/* The creative shares the reserved face; an oversized provider mount cannot
   grow the grid or draw across the neighbouring game cards. */
.route-game .game-layout--reference :is(.ad-slot--game-side, .ad-slot--game-below)>.ad-slot-content {
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  contain: layout paint;
}
.route-game .game-layout--reference :is(.ad-slot--game-side, .ad-slot--game-below)>.ad-slot-content>* {
  max-width: 100%;
  max-height: 100%;
}
.route-game .game-layout--reference .gamebox {
  padding: 0;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.route-game .game-layout--reference .gamebox--active { aspect-ratio: 16 / 9; }
.route-game .game-layout--reference .game-start {
  display: grid;
  place-items: center;
  width: auto;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.route-game .game-layout--reference .game-start [data-start] {
  display: grid;
  place-items: center;
  width: clamp(58px, 5.5vw, 88px);
  height: clamp(58px, 5.5vw, 88px);
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: #ffffffe3;
  color: #078cdd;
  box-shadow: 0 5px 20px #003d4b2a;
}
.route-game .game-layout--reference .game-start [data-start] svg { width: 42%; height: 42%; }
.route-game .game-layout--reference .game-start [data-start]:focus-visible { outline: 3px solid #078cdd; outline-offset: 5px; }
.route-game .game-poster-caption { display: none; }

@media (min-width: 1601px) {
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-wide-col);
    --detail-row: var(--detail-wide-row);
    --detail-span: var(--detail-wide-span, 1);
  }
}
@media (min-width: 1081px) and (max-width: 1600px) {
  .route-game .game-layout--reference { --detail-primary-cols: 8; --detail-primary-rows: 5; }
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-mid-col);
    --detail-row: var(--detail-mid-row);
    --detail-span: var(--detail-mid-span, 1);
  }
  .route-game .game-layout--reference .ad-slot--game-side { grid-column: 10 / span 2; grid-row: 1 / span 6; }
  .route-game .game-layout--reference .ad-slot--game-below { grid-column: 3 / span 7; grid-row: 6; }
}
@media (min-width: 901px) and (max-width: 1080px) {
  .route-game .game-layout--reference { --detail-primary-cols: 6; --detail-primary-rows: 4; }
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-narrow-col);
    --detail-row: var(--detail-narrow-row);
    --detail-span: var(--detail-narrow-span, 1);
  }
  .route-game .game-layout--reference .ad-slot--game-side { grid-column: 8 / span 2; grid-row: 1 / span 6; }
  .route-game .game-layout--reference .ad-slot--game-below { grid-column: 1 / span 7; grid-row: 5; }
}
@media (min-width: 901px) and (max-width: 1600px) {
  .route-game .game-layout--reference .ad-slot--game-side {
    --detail-ad-top: 10px;
    --detail-ad-width: min(calc(var(--detail-reference-medium) * 160 / 204), calc(2 * var(--portal-unit) + var(--portal-grid-gap) - 16px), calc((6 * var(--portal-unit) + 5 * var(--portal-grid-gap) - var(--detail-ad-top) - 20px) * 4 / 15));
    --detail-ad-height: calc(var(--detail-ad-width) * 15 / 4);
  }
}
@media (min-width: 901px) {
  .route-game:has(.game-hero--reference) .site-rail { align-self: stretch; pointer-events: none; }
  .route-game:has(.game-hero--reference) .rail-head { position: sticky; pointer-events: auto; }
}

/* Fine-pointer narrow windows keep a compact first row, with the player below. */
@media (min-width: 651px) and (max-width: 900px) and (pointer: fine) and (hover: hover) {
  .route-game:has(.game-hero--reference) .site-shell { position: relative; }
  .route-game:has(.game-hero--reference) .site-rail {
    position: absolute;
    top: 14px;
    left: var(--portal-pad);
    display: block;
    width: var(--portal-unit);
    height: calc(100% - 14px);
    z-index: 4;
    pointer-events: none;
  }
  .route-game:has(.game-hero--reference) .rail-head { position: sticky; top: 14px; pointer-events: auto; }
  .route-game:has(.game-hero--reference) .site-main>.site-header { display: none; }
  .route-game .game-layout--reference { grid-template-rows: var(--portal-unit) auto; }
  .route-game .game-layout--reference>.game-primary {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
  .route-game .game-layout--reference .ad-slot--game-side { display: none; }
  .route-game .game-layout--reference .ad-slot--game-below { grid-column: 1 / -1; grid-row: 3; }
}
@media (min-width: 801px) and (max-width: 900px) and (pointer: fine) and (hover: hover) {
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-strip-col);
    --detail-row: var(--detail-strip-row);
    --detail-span: var(--detail-strip-span, 1);
  }
}
@media (min-width: 651px) and (max-width: 800px) and (pointer: fine) and (hover: hover) {
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-strip6-col);
    --detail-row: var(--detail-strip6-row);
    --detail-span: var(--detail-strip6-span, 1);
  }
}

/* Touch previews use a square cover and a bottom caption. Starting still uses
   the real iframe ratio and the existing white feedback/tool strip. */
@media (min-width: 651px) and (max-width: 900px) and (pointer: coarse), (min-width: 651px) and (max-width: 900px) and (hover: none) {
  .route-game .game-layout--reference>.game-primary {
    grid-column: 2 / span 3;
    grid-row: 1 / span 3;
    width: 100%;
  }
  .route-game .game-layout--reference:has(.gamebox--active) { grid-template-rows: repeat(3, minmax(var(--portal-unit), auto)); }
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-tablet-col);
    --detail-row: var(--detail-tablet-row);
    --detail-span: var(--detail-tablet-span, 1);
  }
  .route-game .game-layout--reference .ad-slot--game-side { display: none; }
  .route-game .game-layout--reference .ad-slot--game-below { --detail-mobile-banner-cols: 3; grid-column: 2 / span 3; grid-row: var(--detail-tablet-ad-row, 7); }
}
@media (max-width: 650px) {
  .route-game .game-layout--reference { grid-template-rows: auto; }
  .route-game .game-layout--reference>.game-primary { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .route-game .game-layout--reference .game-lanes>.cards>:is(.card, .game-more-tile) {
    --detail-col: var(--detail-phone-col);
    --detail-row: var(--detail-phone-row);
    --detail-span: var(--detail-phone-span, 1);
  }
  .route-game .game-layout--reference .ad-slot--game-side { display: none; }
  .route-game .game-layout--reference .ad-slot--game-below { grid-column: 1 / -1; grid-row: var(--detail-phone-ad-row, 5); }
}
@media (max-width: 900px) {
  .route-game .game-hero--reference { width: 100%; margin: 0; }
  .route-game .game-layout--reference .ad-slot--game-below {
    --detail-banner-cols: var(--detail-mobile-banner-cols, var(--portal-columns));
    --detail-banner-inline-inset: 0px;
    --detail-ad-label-width: 0px;
    --detail-ad-label-height: 14px;
    grid-template-columns: minmax(0, 1fr);
  }
  .route-game .game-layout--reference .ad-slot--game-below::before,
  .route-game .game-layout--reference .ad-slot--game-below>.ad-slot-placeholder { justify-self: center; }
  .route-game .game-layout--reference .ad-slot--game-below>.ad-slot-content {
    inset: calc(50% - (var(--detail-ad-height) + var(--detail-ad-label-height) + 1px) / 2) auto auto 50%;
    transform: translateX(-50%);
  }
  .route-game .game-layout--reference .ad-slot--game-below>.ad-slot-label {
    position: static;
    grid-column: 1;
    grid-row: 2;
    margin-top: 4px;
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 8px;
  }
  .route-game .game-layout--reference .gamebox.gamebox--active { width: 100%; max-width: none; margin: 0; min-height: 0; aspect-ratio: var(--game-ratio, 16/9); }
  .route-game .game-layout--reference .gamebox--active.gamebox--local:not(:fullscreen) { height: auto; min-height: 350px; aspect-ratio: auto; padding: 20px; }
  .route-game .game-layout--reference .gamebox--iframe .game-frame { inset: 0; width: 100%; height: 100%; transform: none; }
  .route-game .game-layout--reference .game-action-strip { max-width: none; margin: 0; }
}
@media (max-width: 650px), (min-width: 651px) and (max-width: 900px) and (pointer: coarse), (min-width: 651px) and (max-width: 900px) and (hover: none) {
  .route-game .game-layout--reference .gamebox:not(.gamebox--active) {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    aspect-ratio: 1;
    border-radius: clamp(14px, 2.5vw, 23px);
  }
  .route-game .game-layout--reference .gamebox:not(.gamebox--active)>.game-poster { object-fit: cover; }
  .route-game .game-layout--reference .game-primary:not(:has(.gamebox--active))>.game-action-strip { display: none; }
  .route-game .game-layout--reference .game-poster-caption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: start;
    padding: 60px clamp(16px, 3vw, 26px) clamp(18px, 3vw, 28px);
    background: linear-gradient(transparent, #062f35e8);
    color: #fff;
    text-align: left;
    pointer-events: none;
  }
  .route-game .game-layout--reference .game-poster-caption strong {
    color: inherit;
    font-size: clamp(24px, 4vw, 36px);
    font-weight: 850;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .route-game .game-layout--reference .game-poster-caption :is(span, small) { color: #fff; font-size: clamp(12px, 1.8vw, 17px); line-height: 1.3; }
  .route-game .game-layout--reference .game-start { z-index: 2; }
  .route-game .game-layout--reference .game-start [data-start] { width: clamp(60px, 11vw, 84px); height: clamp(60px, 11vw, 84px); }
}
.route-game .game-layout--reference .gamebox:fullscreen { width: 100vw; height: 100vh; min-height: 0; aspect-ratio: auto; border-radius: 0; }