/* Citiview Studios — fit rules: nothing is ever cut off, at any screen width (loads last; checked by tools/qa/audit.mjs) */

/* Franchise cards: the title scales with the CARD, not the window, so "SIMULATOR" always fits */
.scard { container-type: inline-size; }
.scard h3 { font-size: clamp(1.2rem, 9cqi, 2.4rem); overflow-wrap: normal; }
.scard p { font-size: clamp(.82rem, 4.2cqi, .95rem); }

/* Game cards: full titles, wrapping to a second line instead of "..." */
.card__t { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
.card__meta { align-items: flex-end; }
.card__logo { bottom: 62px; }

/* Featured tabs: every title fits across the width on desktop (two lines if needed) */
@media (min-width: 901px) {
  .spot__thumbs { overflow: visible; gap: 14px; }
  .thumb { flex: 1 1 0; min-width: 0; width: auto; }
  .thumb__t, .thumb__g { white-space: normal; }
}
/* Phones + tablets: the tabs become clean progress bars only */
@media (max-width: 900px) {
  .spot__thumbs { overflow: visible; gap: 6px; }
  .thumb { flex: 1 1 0; min-width: 0; width: auto; }
  .thumb__t, .thumb__g { display: none; }
}

/* Long words never push past their box */
h1, h2, h3, .display { overflow-wrap: break-word; }
.tag { max-width: 100%; white-space: nowrap; }

/* The scrollbar's space is always reserved, so the page never changes width when the intro hides/shows it
   (a pinned section measured without the scrollbar ended up 17px too wide and cut its right edge) */
html { scrollbar-gutter: stable; }

/* Franchise shortcut chips wrap instead of running off a phone screen */
.chips--anchors { flex-wrap: wrap !important; overflow: visible; }

/* Footer wordmark: CITIVIEW outlined in the logo's four colours (coral, gold, blue, green) */
.footer__wordmark { display: block; width: 100%; height: auto; margin-top: clamp(32px, 4vw, 56px); overflow: visible; }
.footer__wordmark text {
  font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-variation-settings: "wdth" 125;
  font-size: 150px; letter-spacing: -2px;
  fill: rgba(247,245,240,.025); stroke: url(#cvBrand); stroke-width: 1.6; stroke-opacity: .95;
  paint-order: stroke;
}

/* Platform strip under the hero: "Available on Meta Quest" in our own type (Meta's logo files need partner approval) */
main > section.qstrip { padding: 0; border-block: 1px solid var(--line); background: rgba(247,245,240,.02); }
.qstrip__in { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-block: clamp(22px, 2.4vw, 32px); }
.qstrip__mark { display: flex; align-items: center; gap: 14px; flex: none; }
.qstrip__mark .meta-ico { width: 44px; height: 44px; color: var(--paper); }
.qstrip__mark span { display: flex; flex-direction: column; font-family: var(--f-display); font-weight: 800; font-variation-settings: "wdth" 112; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.05; letter-spacing: -.01em; }
.qstrip__mark small { font-family: inherit; font-weight: 600; font-variation-settings: "wdth" 125; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted, rgba(247,245,240,.6)); margin-bottom: 4px; }
.qstrip__txt { margin: 0; flex: 1 1 auto; color: rgba(247,245,240,.72); max-width: 52ch; }
.qstrip .btn { flex: none; margin-left: auto; }
@media (max-width: 760px) {
  .qstrip__in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .qstrip .btn { margin-left: 0; }
}

/* Mobile menu: links start right under the header (they were stacked at the bottom, starting halfway down a tall phone);
   the support / partnerships line stays pinned to the bottom */
.mmenu { justify-content: flex-start; }
.mmenu__foot { margin-top: auto; padding-top: 32px; }

/* Phones: the footer's copyright + trademark lines centred, one under the other */
@media (max-width: 760px) {
  .footer__base { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .footer__base > span { text-wrap: balance; max-width: 34ch; }
  .footer__base > span:first-child { order: 2; }   /* copyright is the last line on the page */
}

/* Game library: no genre filter bar - the count and the search sit on one row right above the grid */
.lib-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.lib-head .search { flex: 0 1 320px; }
@media (max-width: 640px) {
  .lib-head { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .lib-head .search { flex: 1 1 auto; }
}
.lib-all { margin-left: 10px; color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

/* Games page: the library follows the page title closely (no filter bar between them any more) */
main > section.phero + section:has([data-library]) { padding-top: calc(var(--sp) * .45); }