/* Games page and game pages. Loaded only where needed. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Games page ---------- */
.glist { padding-top: 18px; }
.filters { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.filters label { position: relative; }
.filters input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.filters span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 99px; font: 700 14px var(--body); border: 2px solid var(--line); }
.filters input:checked + span { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.filters input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 3px; }
.glist:has(input[value="dev"]:checked) .cards [data-status]:not([data-status="dev"]) { display: none; }
.teaser { margin-top: 34px; display: flex; align-items: center; gap: 14px; color: var(--fg-soft); font-size: 16px; }
.teaser .q { font: 800 48px/1 var(--display); color: var(--yellow); transform: rotate(-8deg); }

/* ---------- Not the Vase ---------- */
.game-ntv { --ntv-teal: #3D6B70; --ntv-deep: #2F5559; --ntv-orange: #F28C38; --ntv-plum: #4B3448; --ntv-cream: #FFF6E6; --ntv-gold: #FFC93C; --ntv-ink: #221B26; }
.game-ntv main h2 { font-family: 'Bricolage Grotesque', var(--display); letter-spacing: -.03em; }

.ntv-hero { background: var(--ntv-teal); color: var(--ntv-cream); position: relative; overflow: hidden; margin-top: 4px; }
.ntv-hero-in { display: grid; gap: 26px; padding-top: 30px; padding-bottom: 0; position: relative; z-index: 1; }
.ntv-hero .crumb { font-size: 14px; opacity: .8; margin-bottom: 14px; }
.ntv-hero .crumb a { color: var(--ntv-gold); font-weight: 700; text-decoration: none; }
.ntv-hero .crumb a:hover { text-decoration: underline; }
.ntv-hero h1 { font: 800 clamp(52px, 15vw, 112px)/0.92 'Bricolage Grotesque', var(--display); letter-spacing: -.04em; }
.ntv-hero h1 em { font-style: normal; color: var(--ntv-orange); }
.ntv-hero .hook { font-size: 19px; font-weight: 600; max-width: 30ch; margin: 16px 0 18px; }
.ntv-hero .tags { margin-bottom: 20px; }
.ntv-hero .acts { display: flex; flex-wrap: wrap; gap: 12px; }
.ntv-phones { display: flex; justify-content: center; align-items: flex-end; margin-bottom: -2px; }
.ntv-phones img { width: 150px; border-radius: 22px; border: 6px solid var(--ntv-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); margin-bottom: -90px; }
.ntv-phones img:first-child { transform: rotate(-6deg) translate(16px, -14px); }
.ntv-phones img:last-child { transform: rotate(5deg); width: 164px; }
.ntv-table { height: 110px; background: var(--ntv-plum); position: relative; }
.ntv-table::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 20px; background: #D39A62; border-top: 4px solid var(--ntv-ink); border-bottom: 10px solid #9A6238; }
@media (min-width: 900px) {
  .ntv-hero-in { grid-template-columns: 1.1fr 1fr; align-items: end; padding-top: 50px; }
  .ntv-copy { padding-bottom: 70px; }
  .ntv-hero .hook { font-size: 22px; }
  .ntv-phones img { width: 210px; margin-bottom: -120px; } .ntv-phones img:last-child { width: 230px; }
  .ntv-table { height: 130px; }
}

.ntv-shots { padding: 64px 0 20px; }
.ntv-shots h2, .ntv-how h2, .ntv-biscuit h2, .ntv-faq h2 { font-size: 36px; margin-bottom: 8px; }
.ntv-shots .sub { color: var(--fg-soft); }
.strip { list-style: none; margin: 0 auto; padding: 26px var(--pad) 12px; max-width: var(--max); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.strip img { width: 100%; border-radius: 14px; border: 4px solid var(--ntv-ink); background: var(--ntv-teal); }
.strip figcaption { font: 700 12px/1.3 var(--body); margin-top: 8px; color: var(--fg-soft); }
@media (min-width: 900px) {
  .ntv-shots h2, .ntv-how h2, .ntv-biscuit h2, .ntv-faq h2 { font-size: 52px; }
  .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .strip img { border-radius: 20px; border-width: 5px; }
  .strip figcaption { font-size: 14px; }
}

.ntv-how { background: var(--ntv-deep); color: var(--ntv-cream); padding: 64px 0; margin-top: 48px; }
.beats { list-style: none; padding: 0; display: grid; gap: 16px; margin-top: 26px; counter-reset: b; }
.beats li { background: var(--ntv-teal); border-radius: 24px; padding: 22px; position: relative; counter-increment: b; }
.beats li::before { content: counter(b); position: absolute; top: 18px; right: 20px; font: 800 40px/1 'Bricolage Grotesque', var(--display); color: var(--ntv-gold); opacity: .9; }
.beats svg { width: 160px; height: 107px; margin-bottom: 10px; }
.beats h3 { font: 800 22px/1.1 'Bricolage Grotesque', var(--display); letter-spacing: -.02em; margin-bottom: 6px; }
.beats p { opacity: .88; }
.extras { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 22px; }
.extras li { border-left: 4px solid var(--ntv-orange); padding: 4px 0 4px 14px; opacity: .92; }
.extras b { color: var(--ntv-gold); }
@media (min-width: 900px) { .beats { grid-template-columns: repeat(3, 1fr); gap: 22px; } .extras { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.ntv-biscuit { padding: 64px 0 20px; }
.ntv-biscuit-in { display: grid; gap: 24px; align-items: center; }
.ntv-biscuit .portrait { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 6px solid var(--ntv-ink); background: var(--ntv-teal); box-shadow: 0 0 0 8px var(--ntv-orange); }
.ntv-biscuit .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 30%; transform: scale(1.9); transform-origin: 56% 28%; }
.ntv-biscuit .kicker { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 12px; }
.ntv-biscuit p:not(.kicker) { color: var(--fg-soft); font-size: 17px; max-width: 46ch; }
@media (min-width: 900px) { .ntv-biscuit-in { grid-template-columns: auto 1fr; gap: 60px; } .ntv-biscuit .portrait { width: 280px; height: 280px; } .ntv-biscuit p:not(.kicker) { font-size: 19px; } }

.ntv-faq { padding: 56px 0 10px; }
.faq { display: grid; gap: 10px; margin-top: 20px; max-width: 760px; }
.faq details { background: var(--bg-2); border-radius: 18px; border: 2px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 52px 16px 20px; min-height: 44px; font: 700 17px var(--body); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 800 24px/1 var(--display); color: var(--ntv-orange); transition: transform .25s var(--pop); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 20px 18px; color: var(--fg-soft); }
.faq a, .help a { color: var(--accent-text); font-weight: 700; }
.help { margin-top: 24px; color: var(--fg-soft); }

.ntv-more { padding-top: 64px; }
.ntv-more .sec-h h2 { font-size: 30px; }
@media (min-width: 900px) { .ntv-more .sec-h h2 { font-size: 46px; } }