/*
 * /games/ landing: a cover gallery that recedes upward from one "stage" row, the library's size below it,
 * and a picker that spins the stage row itself. The frame marks the centre of the stage row; the script
 * reads its box to lay out every row, so the variables below are the only geometry.
 */
.zbui.tagsmod-landing {
  --tagsmod-cover-ring: inset 0 0 0 1px rgb(0 0 0 / 6%);
  --landing-tile: clamp(150px, min(17vw, 26vh), 260px);
  --landing-gap: 14px;
  /* Room under the stage row for the frame's outline, its notch and the winner's lift. */
  --landing-zone-gap: 36px;
  --landing-zone: clamp(250px, 34vh, 320px);
  --landing-pad: max(24px, env(safe-area-inset-bottom));
  --landing-count: clamp(56px, min(7.5vw, 12vh), 112px);
  --landing-result-size: clamp(20px, min(2vw, 3.4vh), 28px);
  --landing-move: cubic-bezier(.65, 0, .35, 1);
  --landing-spring: cubic-bezier(.34, 1.4, .64, 1);
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--zb-surface);
  color: var(--zb-text);
  visibility: visible;
  /* Touches never pan the page underneath; zooming stays available. */
  touch-action: pinch-zoom;
}
.tagsmod-landing *,
.tagsmod-landing *::before,
.tagsmod-landing *::after { box-sizing: border-box; }
.tagsmod-landing::backdrop { background: transparent; }
.tagsmod-landing [hidden] { display: none !important; }
/*
 * No scrolling behind the landing. A stable scrollbar gutter would be painted over the top layer, so the
 * scrollbar goes instead and comes back as soon as the exit starts, while the catalog is still covered.
 */
html:has(.tagsmod-landing[open]:not(.is-leaving)) { overflow: hidden; }
/* First visits: nothing paints until the landing opens; the animation is a fallback if the script never runs. */
html.tagsmod-landing-pending body { visibility: hidden; animation: tagsmod-landing-failsafe 0s 2.5s forwards; }
@keyframes tagsmod-landing-failsafe { to { visibility: visible; } }

.tagsmod-landing .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- Gallery ---- */
.tagsmod-landing-wall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%);
}
.tagsmod-landing-row {
  position: absolute;
  left: 0;
  right: 0;
  opacity: var(--row-opacity, 1);
  transition: opacity .48s var(--landing-move), translate .48s var(--landing-move);
}
.tagsmod-landing-strip { display: flex; width: max-content; will-change: transform; }
.tagsmod-landing-tile {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 5% / 6.667%;
  background: radial-gradient(circle at 30% 20%, var(--zb-primary-soft), transparent 70%), var(--zb-muted);
  transition: opacity .32s var(--zb-ease-out), scale .42s var(--landing-spring);
}
.tagsmod-landing-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--tagsmod-cover-ring);
  pointer-events: none;
}
.tagsmod-landing-tile img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .32s var(--zb-ease-out);
}
.tagsmod-landing-tile.is-loaded img { opacity: 1; }
.tagsmod-landing-row.is-stage .tagsmod-landing-tile { box-shadow: 0 16px 30px -20px rgb(15 23 42 / 55%); }

/* The selection frame sits on the stage row's centre tile; the picker lands the winner inside it. */
.tagsmod-landing-frame {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(var(--landing-pad) + var(--landing-zone) + var(--landing-zone-gap));
  width: var(--landing-tile);
  aspect-ratio: 4 / 3;
  translate: -50% 0;
  /* The tile's own radius; the offset outline then stays concentric with it. */
  border-radius: calc(var(--landing-tile) * .05);
  outline: 2px solid var(--zb-accent);
  outline-offset: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--zb-ease-out), scale .42s var(--landing-spring), box-shadow .42s var(--zb-ease-out);
}
/* The pointer above the frame flicks as tiles pass, like the flapper on a prize wheel; the notch below holds still. */
.tagsmod-landing-pointer,
.tagsmod-landing-frame::after {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 9px;
  margin-left: -7px;
  background: var(--zb-accent);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tagsmod-landing-pointer { top: -19px; transform-origin: 50% 0; }
.tagsmod-landing-frame::after { content: ''; bottom: -19px; rotate: 180deg; }

/* ---- Text zone: the welcome and the result share it, so the stage row never moves between them ---- */
.tagsmod-landing-zone {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: var(--landing-pad);
  height: var(--landing-zone);
  text-align: center;
}
.tagsmod-landing-welcome,
.tagsmod-landing-result {
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tagsmod-landing-welcome { transition: opacity .32s var(--zb-ease-out), translate .32s var(--zb-ease-out), visibility 0s; }
.tagsmod-landing[data-mode="pick"] .tagsmod-landing-welcome {
  opacity: 0;
  translate: 0 12px;
  visibility: hidden;
  transition: opacity .24s var(--zb-ease-in), translate .24s var(--zb-ease-in), visibility 0s .24s;
}
.tagsmod-landing-result {
  opacity: 0;
  translate: 0 10px;
  visibility: hidden;
  transition: opacity .16s var(--zb-ease-in), translate .16s var(--zb-ease-in), visibility 0s .16s;
}
.tagsmod-landing[data-mode="pick"] .tagsmod-landing-result {
  opacity: 1;
  translate: none;
  visibility: visible;
  transition: opacity .32s var(--zb-ease-out) .12s, translate .32s var(--zb-ease-out) .12s;
}
/* While the reel turns the first line says so; the details fade out, and on later picks the buttons stay put. */
.tagsmod-landing-result-lede > span { display: none; }
.tagsmod-landing[data-pick="spinning"] .tagsmod-landing-result-pending,
.tagsmod-landing[data-pick="result"] .tagsmod-landing-result-done { display: inline; }
.tagsmod-landing-result-info { display: flex; flex-direction: column; align-items: center; width: 100%; transition: opacity .32s var(--zb-ease-out) .12s; }
.tagsmod-landing[data-pick="spinning"] .tagsmod-landing-result-info { opacity: 0; transition: opacity .16s var(--zb-ease-in); }
.tagsmod-landing[data-pick="spinning"]:not([data-picked]) .tagsmod-landing-result .tagsmod-landing-actions { visibility: hidden; }
.tagsmod-landing[data-pick="spinning"] .tagsmod-landing-result .tagsmod-landing-action { opacity: .55; pointer-events: none; }
.tagsmod-landing :where(h2, p) { margin: 0; font-family: inherit; }
.tagsmod-landing-title { display: flex; flex-direction: column; align-items: center; color: var(--zb-text); }
.tagsmod-landing-title:focus { outline: none; }
.tagsmod-landing-count {
  display: inline-flex;
  font-size: var(--landing-count);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums tabular-nums;
}
.tagsmod-landing-digits { display: inline-flex; }
.tagsmod-landing-digit { display: inline-block; height: 1em; overflow: hidden; }
.tagsmod-landing-digit > span,
.tagsmod-landing-digit > span > span { display: block; }
.tagsmod-landing-digit > span > span { height: 1em; }
.tagsmod-landing-headline {
  margin-top: .3em;
  font-size: clamp(20px, min(2.2vw, 3.6vh), 30px);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.tagsmod-landing-lede {
  max-width: 34em;
  margin-top: 12px;
  color: var(--zb-text-soft);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  text-wrap: balance;
}
.tagsmod-landing-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 3vh, 26px);
}
.tagsmod-landing-actions form { display: contents; }
.tagsmod-landing .tagsmod-landing-action {
  min-width: 148px;
  min-height: 48px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.tagsmod-landing a.tagsmod-btn--primary,
.tagsmod-landing a.tagsmod-btn--primary:hover { color: var(--zb-on-primary); }
.tagsmod-landing-action .tagsmod-ico { width: 18px; height: 18px; }

.tagsmod-landing-result-lede { color: var(--zb-text-muted); font-size: 13px; line-height: 1.5; }
/* Two lines are always reserved for the title; a short one sits centred in them. */
.tagsmod-landing-result-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * 1.3 * var(--landing-result-size));
  margin-top: 4px;
}
.tagsmod-landing-result-title {
  display: -webkit-box;
  max-width: 26em;
  overflow: hidden;
  color: var(--zb-text);
  font-size: var(--landing-result-size);
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* One line each for the credits and the chips; long credits shorten, the date never wraps. */
.tagsmod-landing-result-meta {
  display: flex;
  justify-content: center;
  max-width: 100%;
  min-height: 1.5em;
  margin-top: 6px;
  color: var(--zb-text-soft);
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}
.tagsmod-landing-result-meta > span:empty { display: none; }
.tagsmod-landing-result-meta > [data-tagsmod-result-makers] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tagsmod-landing-result-meta > [data-tagsmod-result-when] { flex: none; }
.tagsmod-landing-result-meta > span:not(:empty) + span:not(:empty)::before { content: '•'; margin: 0 8px; color: var(--zb-text-subtle); }
.tagsmod-landing-result-tags { display: flex; justify-content: center; gap: 8px; min-height: 26px; margin-top: 10px; overflow: hidden; }
.tagsmod-landing-result-tags span {
  padding: 3px 10px;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-muted);
  color: var(--zb-text-soft);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: nowrap;
}

/* ---- Close ---- */
.tagsmod-landing-dismiss {
  position: absolute;
  z-index: 4;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  margin: 0;
}
.tagsmod-landing-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--zb-border);
  border-radius: 50%;
  background: var(--zb-surface);
  color: var(--zb-text-muted);
  box-shadow: var(--zb-shadow-card);
  cursor: pointer;
  transition: color var(--zb-duration-fast) var(--zb-ease), border-color var(--zb-duration-fast) var(--zb-ease);
}
.tagsmod-landing-close:hover { border-color: var(--zb-primary-soft-border-strong); color: var(--zb-text); }
.tagsmod-landing-close:focus-visible { outline: none; box-shadow: var(--zb-focus-ring); }
.tagsmod-landing-close .tagsmod-ico { width: 18px; height: 18px; }

/* ---- Picker ---- */
.tagsmod-landing[data-mode="pick"] .tagsmod-landing-row:not(.is-stage) {
  opacity: calc(var(--row-opacity, 1) * .14);
  translate: 0 calc(var(--landing-gap) * -2);
}
.tagsmod-landing[data-mode="pick"] .tagsmod-landing-frame { opacity: 1; }
.tagsmod-landing[data-pick="result"] .tagsmod-landing-frame {
  scale: 1.08;
  box-shadow: 0 0 0 10px rgba(var(--zb-accent-rgb), .1), 0 26px 50px -24px rgba(var(--zb-accent-rgb), .6);
}
.tagsmod-landing[data-pick="result"] .is-stage .tagsmod-landing-tile:not(.is-winner) { opacity: .35; }
.tagsmod-landing-tile.is-winner { z-index: 1; }
.tagsmod-landing[data-pick="result"] .tagsmod-landing-tile.is-winner { scale: 1.08; }

/* ---- Entrance and exit ---- */
@keyframes tagsmod-landing-fade { from { opacity: 0; } }
@keyframes tagsmod-landing-rise { from { opacity: 0; translate: 0 10px; } }
@keyframes tagsmod-landing-out { to { opacity: 0; } }
@keyframes tagsmod-landing-lift { to { translate: 0 -100%; } }
.tagsmod-landing[data-intro] .tagsmod-landing-count { animation: tagsmod-landing-fade .32s var(--zb-ease-out) .1s backwards; }
.tagsmod-landing[data-intro] .tagsmod-landing-headline { animation: tagsmod-landing-rise .64s var(--zb-ease-out) .42s backwards; }
.tagsmod-landing[data-intro] .tagsmod-landing-lede { animation: tagsmod-landing-rise .64s var(--zb-ease-out) .52s backwards; }
.tagsmod-landing[data-intro] .tagsmod-landing-actions { animation: tagsmod-landing-rise .64s var(--zb-ease-out) .62s backwards; }
.tagsmod-landing[data-intro] .tagsmod-landing-dismiss { animation: tagsmod-landing-fade .32s var(--zb-ease-out) .8s backwards; }
.tagsmod-landing.is-entering { animation: tagsmod-landing-fade .24s var(--zb-ease-out); }
.tagsmod-landing.is-leaving { pointer-events: none; animation: tagsmod-landing-out .2s var(--zb-ease-in) forwards; }
/* Entering the catalog lifts the landing like a curtain; the shadow keeps its lower edge readable. */
.tagsmod-landing.is-leaving[data-mode="welcome"] {
  box-shadow: 0 24px 48px -16px rgb(15 23 42 / 28%);
  animation: tagsmod-landing-lift .56s var(--landing-move) forwards;
}

[data-bs-theme="dark"] .zbui.tagsmod-landing { --tagsmod-cover-ring: inset 0 0 0 1px rgb(255 255 255 / 8%); color-scheme: dark; }
[data-bs-theme="dark"] .tagsmod-landing-row.is-stage .tagsmod-landing-tile { box-shadow: 0 16px 30px -18px rgb(0 0 0 / 70%); }
[data-bs-theme="dark"] .tagsmod-landing.is-leaving[data-mode="welcome"] { box-shadow: 0 24px 48px -16px rgb(0 0 0 / 60%); }

@media (max-width: 767.98px) {
  .zbui.tagsmod-landing {
    --landing-tile: min(64vw, 280px);
    --landing-gap: 10px;
    --landing-zone-gap: 30px;
    --landing-zone: 300px;
    --landing-count: clamp(52px, 17vw, 72px);
    --landing-result-size: 20px;
  }
  .tagsmod-landing-headline { font-size: 22px; }
  .tagsmod-landing-lede { font-size: 14px; }
  .tagsmod-landing-actions { flex-direction: column; align-self: stretch; margin-top: 20px; }
  .tagsmod-landing .tagsmod-landing-action { width: 100%; }
}
/* Landscape phones: a smaller stage and a compact zone, so nothing has to scroll. */
@media (max-height: 560px) {
  .zbui.tagsmod-landing {
    --landing-tile: clamp(96px, 24vh, 150px);
    --landing-gap: 8px;
    --landing-zone-gap: 24px;
    --landing-zone: 176px;
    --landing-pad: max(12px, env(safe-area-inset-bottom));
    --landing-count: clamp(40px, 13vh, 56px);
    --landing-result-size: 18px;
  }
  .tagsmod-landing-headline { margin-top: .15em; font-size: 18px; }
  .tagsmod-landing-lede { margin-top: 6px; font-size: 13px; }
  .tagsmod-landing-actions { flex-direction: row; align-self: center; margin-top: 12px; }
  .tagsmod-landing .tagsmod-landing-action { width: auto; min-height: 40px; }
  .tagsmod-landing-result-heading { min-height: calc(1.3 * var(--landing-result-size)); }
  .tagsmod-landing-result-title { -webkit-line-clamp: 1; }
  .tagsmod-landing-result-tags { display: none; }
  .tagsmod-landing-pointer { top: -15px; }
  .tagsmod-landing-frame::after { bottom: -15px; }
}

@media (prefers-reduced-motion: reduce) {
  .tagsmod-landing,
  .tagsmod-landing * { transition-duration: .01ms !important; transition-delay: 0s !important; animation: none !important; }
  .tagsmod-landing.is-leaving,
  .tagsmod-landing.is-leaving[data-mode="welcome"] { animation: tagsmod-landing-out .16s linear forwards !important; }
}