/* The Games page: just three game cards. Also the "portal" that opens a game.
   Games pages use the games blue (#1E4A5F) for all text and lines. */
:root { --color-navy: #1E4A5F; }

.games-main { max-width: none; padding: 0; }

/* ---- Opening line ---- */
.games-hero { position: relative; display: grid; place-items: center; min-height: calc(100svh - 11rem); padding: 2rem var(--gutter) 6rem; text-align: center; overflow: hidden; }
.games-hero__title { margin: 0; font-size: clamp(3rem, 11.5vw, 9.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; color: var(--color-navy); will-change: transform, opacity; }
.hl { display: block; overflow: hidden; padding-bottom: .08em; }
.hl > span { display: inline-block; animation: line-rise .95s cubic-bezier(.2, .8, .2, 1) both; }
.hl:nth-child(1) > span { animation-delay: .15s; }
.hl:nth-child(2) > span { animation-delay: .32s; }
.hl:nth-child(3) > span { animation-delay: .49s; }
@keyframes line-rise { from { transform: translateY(105%) rotate(2deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* a yellow marker pen draws itself under the last line */
.hl--last > span { background: linear-gradient(var(--color-accent, #EDC46A), var(--color-accent, #EDC46A)) no-repeat 0 92% / 0% .26em; animation: line-rise .95s cubic-bezier(.2, .8, .2, 1) .49s both, marker 1s cubic-bezier(.6, 0, .2, 1) 1.35s forwards; }
@keyframes marker { to { background-size: 100% .26em; } }
.games-hero .scroll-cue { opacity: 0; animation: cue-in .8s ease 2s forwards; }
@keyframes cue-in { to { opacity: .55; } }

/* ---- Cards ---- */
.games-reveal { display: grid; align-items: center; min-height: calc(100svh - 11rem); padding: 1rem var(--gutter) 4rem; max-width: 76rem; margin: 0 auto; }
.game-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.game-cards > li { display: flex; }
.game-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; width: 100%; min-height: 24rem; padding: 2.25rem 1.75rem; border: 1.5px solid var(--color-navy); border-radius: 22px; color: var(--color-navy); text-align: center; text-decoration: none; transition: transform .3s var(--ease-out, ease), box-shadow .3s, background .3s; }
.page-main .game-card, .page-main .game-card:hover, .page-main .game-card:focus-visible { color: var(--color-navy); text-decoration: none; }
.game-card h2, .game-card p { color: var(--color-navy); text-decoration: none; }
.game-card--play:hover, .game-card--play:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 34px -16px rgba(30, 74, 95, .5), 0 0 0 6px rgba(237, 196, 106, .6); }
.game-card.opening { transform: scale(1.08); transition-duration: .5s; }
.game-card h2 { position: relative; margin: 0; font-size: clamp(2.3rem, 3.9vw, 3.1rem); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.game-card h2 b { font-weight: 800; }
.game-card p { position: relative; margin: 0; max-width: 17rem; font-size: 1.1rem; }
.game-card__cta { position: relative; margin-top: .75rem; padding: .55rem 1.9rem; border: 1.5px solid var(--color-navy); border-radius: 999px; font-weight: 700; transition: background .2s, color .2s; }
.game-card--play:hover .game-card__cta, .game-card--play:focus-visible .game-card__cta { background: var(--color-navy); color: var(--color-bg, #F8F9F0); }
.game-card__globe { position: absolute; width: 130%; max-width: 30rem; left: 50%; top: 50%; translate: -50% -50%; fill: none; stroke: var(--color-navy); stroke-width: 1.2; opacity: .09; animation: globe-drift 40s linear infinite; pointer-events: none; }
@keyframes globe-drift { to { rotate: 360deg; } }

.game-card--soon { border-style: dashed; border-color: rgba(30, 74, 95, .5); }
.game-card__art { width: 7.5rem; height: 7.5rem; fill: none; stroke: var(--color-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; animation: soon-float 5s ease-in-out infinite; }
.game-card--soon:nth-child(1) .game-card__art { animation-delay: 0s; }
.game-card__art .dash { stroke-dasharray: 3 7; }
.game-card__art .dot { fill: var(--color-navy); stroke: none; }
.game-card p.soon { font-size: 1.35rem; font-weight: 800; letter-spacing: .01em; }
@keyframes soon-float { 50% { transform: translateY(-8px); } }

/* ---- Copy under the cards ---- */
.games-about { max-width: 34rem; margin: clamp(3rem, 7vw, 5rem) auto 0; text-align: center; }
.games-about p { margin: 0 0 1.5rem; font-size: 1.15rem; line-height: 1.5; color: var(--color-navy); }
.games-about p:first-child { font-weight: 700; }

/* ---- Scroll reveal (only when JS is running, so it's never hidden without it) ---- */
.js .reveal { opacity: 0; transform: translateY(46px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * .14s); }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 52rem) {
  .game-cards { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
  .game-card { min-height: 17rem; }
  .game-card--soon { min-height: 13rem; }
  .game-card__art { width: 5.5rem; height: 5.5rem; }
}

/* ---- Opening a game: a circle grows out of the card, filling the screen ---- */
.portal { position: fixed; inset: 0; z-index: 500; pointer-events: none; background: #1E4A5F; clip-path: circle(0 at var(--x) var(--y)); transition: clip-path .65s cubic-bezier(.7, 0, .3, 1); }
.portal.go { clip-path: circle(150vmax at var(--x) var(--y)); }

@media (prefers-reduced-motion: reduce) {
  .hl > span, .hl--last > span, .games-hero .scroll-cue, .game-card__globe, .game-card__art { animation: none; }
  .hl--last > span { background-size: 100% .26em; }
  .games-hero .scroll-cue { opacity: .55; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .portal { display: none; }
  .game-card, .game-card.opening { transition: none; transform: none; }
}

.game-card__neuron { position: absolute; width: 125%; max-width: 28rem; left: 50%; top: 50%; translate: -50% -50%; fill: none; stroke: var(--color-navy); stroke-width: 1.2; opacity: .1; animation: neuron-pulse 5s ease-in-out infinite; pointer-events: none; }
@keyframes neuron-pulse { 50% { opacity: .17; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .game-card__neuron { animation: none; } }