/* Games & Apps (/games-and-apps, 2026-10-23): its own look on top of movies.css. Gameplay hero, READY, SET, GAME ON!,
   the HIGH SCORE band over blurred gameplay, the clip wall and the leaderboard (podium, ranked rows, bonus level). */

/* hero: a blue-neon tint over the gameplay */
.gm-herovid { opacity: .72; }
.gm-shade { background: linear-gradient(180deg, rgba(9, 78, 255, .34) 0%, rgba(25, 28, 70, .44) 45%, rgba(25, 28, 70, .92) 100%); }
/* on the yellow screen (Alex 10-24: yellow mascot) white and green don't read: READY, SET in navy, GAME ON! in Sound.me blue */
.gm-zoom .mv-zl { color: var(--navy); }
.gm-zoom .zf { color: var(--purple); text-shadow: .035em .035em 0 var(--navy), .07em .07em 0 rgba(25, 28, 70, .4); }
/* while the yellow mascot fills the screen, the header links and the "See results" outline button turn navy (white doesn't
   read on yellow); the header goes back to normal once the white screen comes in */
.sh-zoomv.sh-filled:has(.gm-zoom) .sh-stage { color: var(--navy); }
body:has(.sh-zoomv.sh-filled:not(.sh-white-on) .gm-zoom) #hdr:not(.dark) { color: var(--ink); }

/* HIGH SCORE over the hero's gameplay, blurred (mv-done's white veil sits on top of it) */
.lv-done-t .c-purple { text-transform: uppercase; }
.gm-bgvid { position: absolute; z-index: 0; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(12px) saturate(1.3); opacity: .6; pointer-events: none; }

/* the wall: four columns of looping 9:16 clips that drift at different speeds as the page scrolls */
.gm-wall { background: #0c0d22; color: var(--white); }
.gm-wall .big { text-align: center; }
.gm-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); align-items: start; margin-top: clamp(40px, 4.4vw, 64px); padding-bottom: 60px; }
.gm-col { display: grid; gap: clamp(12px, 1.4vw, 20px); will-change: transform; }
.gm-col:nth-child(2) { margin-top: 80px; }
.gm-col:nth-child(3) { margin-top: -10px; }
.gm-col:nth-child(4) { margin-top: 50px; }
.gm-tile { position: relative; margin: 0; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 26px; overflow: hidden; background: #000; box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
.gm-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-tile figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 4px; padding: 56px 16px 16px; background: linear-gradient(180deg, transparent, rgba(5, 6, 20, .84)); }
.gm-tile b { font-size: clamp(17px, 1.4vw, 21px); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.gm-tile span { font-size: 13px; font-weight: 600; color: var(--green); }
@media (max-width: 760px) {
  .gm-cols { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * clamp(16px, 4vw, 56px)); padding: 0 clamp(16px, 4vw, 56px) 8px; scrollbar-width: none; }
  .gm-cols::-webkit-scrollbar { display: none; }
  .gm-col { display: contents; }
  .gm-tile { flex: none; width: 62vw; max-width: 260px; scroll-snap-align: center; }
}

/* the four games, one per screen: the stack itself lives in movies.css (shared with /movies) */
.gm-cases .big { max-width: 14em; }

/* the apps, as cards under the games: icon left, results right, two per row */
.gm-cards { list-style: none; padding: 0; margin: clamp(36px, 4vw, 60px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gm-card { flex-direction: row; align-items: stretch; gap: clamp(16px, 1.6vw, 24px); padding: clamp(14px, 1.3vw, 18px); }
.gm-cicon { flex: none; align-self: flex-start; width: clamp(96px, 9vw, 136px); aspect-ratio: 1; max-width: 100%; border-radius: 24%; overflow: hidden; background: #0c0d22; box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.gm-cicon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gm-nologo { display: grid; place-items: center; width: 100%; height: 100%; background: var(--purple); color: #fff; font-size: 44px; font-weight: 700; }
.gm-card .mv-body { flex: 1; min-width: 0; padding: 4px 6px 2px 0; }
.gm-card .mv-num b { font-size: clamp(44px, 3.8vw, 64px); }

@media (max-width: 900px) {
  .gm-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .gm-cicon { width: 84px; }
  .gm-card h3 { font-size: 21px; }
  .gm-card .mv-dir { font-size: 14px; }
  .gm-card .mv-num b { font-size: 40px; }
}

/* five moments on the games timeline */
.gm-plan .mv-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gm-plan .mv-timeline li:nth-child(5) { --dot: var(--navy); }
@media (max-width: 1020px) { .gm-plan .mv-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gm-plan .mv-timeline { grid-template-columns: minmax(0, 1fr); } }