/* VoxaParty games: the Games list and every game page.
   Loads after home.css, which owns tokens, type, buttons, nav, hero, the
   sticky feature walkthrough (.feat-*), spec rows (.spec), .lic-note and
   .closing. Only what those don't cover lives here. Rules: games/CLAUDE.md. */

/* ── Game cards (list page + Extended License Games tab) ── */
.gm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.gm-card {
    display: flex; flex-direction: column; gap: 20px;
    height: 100%;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-2);
    text-align: left;
    transition: background-color 0.2s, border-color 0.2s, transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
a.gm-card:hover {
    background: var(--surface-2);
    border-color: var(--line-2);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.8);
}
a.gm-card:active { transform: translateY(-1px) scale(0.99); }

.gm-card-icon {
    width: 88px; height: 88px;
    border-radius: 20px;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45));
}

.gm-card-body { display: grid; align-content: start; gap: 4px; flex: 1; }
.gm-card-name {
    font-size: 1.35rem; font-weight: 620; font-stretch: 110%;
    letter-spacing: -0.025em; line-height: 1.15;
    color: var(--text);
}
.gm-card-genre { font-size: 0.85rem; font-weight: 500; color: var(--text-3); }
.gm-card-blurb { margin-top: 8px; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }

.gm-card-cta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--violet-soft); font-size: 0.92rem; font-weight: 600;
}
.gm-card-cta svg { transition: transform 0.25s var(--ease-out); }
a.gm-card:hover .gm-card-cta svg { transform: translateX(3px); }

.gm-card-soon { font-size: 0.88rem; font-weight: 500; color: var(--text-3); }

/* the same cards inside the Games tab of extended-license.html */
.xl-games { max-width: 1180px; margin: 0 auto; }

/* ── List page ── */
.gm-head { padding: 148px 0 0; }
.gm-head h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.75rem);
    font-weight: 660;
    letter-spacing: -0.038em;
    line-height: 1.02;
    max-width: 17ch;
}
.gm-head p { margin-top: 20px; max-width: 54ch; font-size: 1.125rem; color: var(--text-2); }

.gm-list { padding: clamp(48px, 6vw, 72px) 0 clamp(80px, 10vw, 128px); }

.gm-noscript { display: grid; gap: 8px; }
.gm-noscript a { color: var(--violet-soft); font-weight: 600; }

/* "Built into every game": ruled grid of shared platform facts */
.gm-platform { background: var(--bg-2); }
.gm-facts {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden;
}
.gm-facts li {
    display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-content: start;
    padding: 28px;
    border-left: 1px solid var(--line);
}
.gm-facts li:nth-child(3n + 1) { border-left: 0; }
.gm-facts li:nth-child(n + 4) { border-top: 1px solid var(--line); }
.gm-facts .demo-icon { grid-row: span 2; width: 44px; height: 44px; }
.gm-facts strong { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; font-stretch: 106%; align-self: end; }
.gm-facts span { color: var(--text-2); font-size: 0.95rem; line-height: 1.55; }

/* ── Game page: hero ── */
.gd-hero .hero-grid { align-items: center; }
.gd-icon {
    width: 72px; height: 72px;
    border-radius: 18px;
    margin-bottom: 28px;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.5));
}
.gd-hero h1 { max-width: 12ch; }

/* two framed phones: the splash in front, gameplay behind */
.gd-stage { aspect-ratio: 1 / 0.98; }
.gd-phone-front { width: 43%; left: 13%; top: 0; z-index: 3; animation-delay: 0.05s; }
.gd-phone-back { width: 39%; right: 10%; top: 11%; z-index: 2; animation-delay: 0.18s; }

/* ── Game page: walkthrough ──
   Framed shots are taller than the home device art (748×1546), so the sticky
   plate gets a little more height. */
.gd-features .feat-device img { height: 92%; }

/* ── Game page: trailer ──
   The game's vertical promo (9:16), plain <video> with native controls: nothing loads until the
   visitor presses play (preload="none"), and the poster is the video's own frame. */
.gd-trailer-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 6vw, 96px); align-items: center;
}
.gd-trailer .section-head { margin-bottom: 0; }
.gd-player {
    justify-self: end;
    width: min(380px, 100%); aspect-ratio: 9 / 16;
    border-radius: var(--radius-lg); overflow: hidden; background: #000;
    border: 1px solid var(--line-2);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(255, 255, 255, 0.025);
}
.gd-player video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Game page: specs ── */
.gd-specs .lic-note { margin-top: 28px; align-items: flex-start; }
.gd-specs .lic-note svg { margin-top: 3px; }

/* ── Game page: closing ── */
.gd-closing .closing-icon { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 28px; }

.gm-pager {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    width: 100%; max-width: 720px;
    margin-top: 64px;
}
.gm-pager-link {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--bg-2);
    text-align: left; font-weight: 600;
    transition: background-color 0.2s, border-color 0.2s;
}
.gm-pager-link small { display: block; font-size: 0.8rem; font-weight: 500; color: var(--text-3); }
.gm-pager-link.is-next { justify-content: flex-end; text-align: right; }
.gm-pager-link:hover { background: var(--surface-2); border-color: var(--line-2); }
.gm-pager-link svg { flex: none; color: var(--violet-soft); }

/* ── Responsive ── */
@media (max-width: 1080px) {
    .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .gm-head { padding-top: 116px; }
    .gm-facts { grid-template-columns: 1fr 1fr; }
    .gm-facts li { border-left: 1px solid var(--line); border-top: 0; }
    .gm-facts li:nth-child(odd) { border-left: 0; }
    .gm-facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .gd-stage { max-width: 520px; }
    .gd-trailer-grid { grid-template-columns: 1fr; justify-items: center; }
    .gd-trailer .section-head { text-align: center; }
    .gd-player { justify-self: center; }
}

@media (max-width: 640px) {
    .gm-grid { grid-template-columns: 1fr; }
    .gm-card { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 20px; }
    .gm-card-icon { width: 64px; height: 64px; border-radius: 15px; }
    .gm-card-body { flex: 1 1 0; min-width: 0; }
    .gm-card-cta, .gm-card-soon { flex-basis: 100%; }

    .gm-facts { grid-template-columns: 1fr; }
    .gm-facts li { border-left: 0 !important; padding: 22px 20px; }
    .gm-facts li + li { border-top: 1px solid var(--line); }

    .gm-pager { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .gm-card, .gm-card-cta svg { transition: none; }
    a.gm-card:hover { transform: none; }
}