/* ═══════════════════════════════════════════════════════════════════
   Games — css/games.css (2026-09-22)
   games.html: the hub (a hero and one card per game) and the play view
   (the game framed below the top bar). The Rhythm Runner card's art panel
   borrows the game's own paper, ink and lime so the card reads as the
   game; everything else is EKGLab's Inter, slate and brand blue.
   Spec: docs/superpowers/specs/2026-09-22-games-rhythm-runner-design.md
   ═══════════════════════════════════════════════════════════════════ */
.gm-page [hidden] { display: none !important; }

/* Top bar title: plain on the hub, a breadcrumb while playing */
.gm-crumbs { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.2px; color: #181c1f; white-space: nowrap; }
.gm-crumbs a { color: #26408b; text-decoration: none; }
.gm-crumbs a:hover { text-decoration: underline; }
.gm-crumb-sep { color: #9ea6b0; font-weight: 500; }

/* ── Hub ── */
.gm-main {
    margin-left: 230px; padding-top: 62px; min-height: 100vh;
    font-family: 'Inter', system-ui, sans-serif; color: #181c1f;
    background:
        radial-gradient(1100px 560px at 82% -12%, rgba(95,179,201,.12), transparent 60%),
        radial-gradient(820px 480px at -5% -5%, rgba(38,64,139,.08), transparent 55%),
        #f4f7fc;
}
.gm-wrap { max-width: 1080px; margin: 0 auto; padding: 46px 32px 84px; }
.gm-hero { margin-bottom: 30px; }
.gm-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #0f084b; background: rgba(15,8,75,.06); padding: 5px 12px 5px 9px; border-radius: 999px; }
.gm-eyebrow .material-symbols-outlined { font-size: 16px; }
.gm-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(34px, 4.6vw, 50px); letter-spacing: -.7px; line-height: 1.02; margin: 16px 0 12px; color: #10151c; }
.gm-lede { font-size: 17px; line-height: 1.56; color: #525c6b; margin: 0; max-width: 640px; }

/* The game card */
.gm-card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); background: #fff; border: 1px solid rgba(22,33,52,.10); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(22,33,52,.05), 0 24px 56px -40px rgba(15,8,75,.55); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gm-card:hover { transform: translateY(-2px); border-color: rgba(38,64,139,.28); box-shadow: 0 2px 6px rgba(22,33,52,.06), 0 30px 64px -38px rgba(15,8,75,.6); }
.gm-card:focus-visible { outline: 3px solid rgba(38,64,139,.45); outline-offset: 4px; }

/* Art: a still of the game's playfield (paper, grid, ink trace, Joules, the reward badge) */
.gm-card-art {
    position: relative; min-height: 330px; overflow: hidden;
    background-color: #f7f9ec;
    background-image:
        linear-gradient(#cbd5bb 1px, transparent 1px), linear-gradient(90deg, #cbd5bb 1px, transparent 1px),
        linear-gradient(#e0e6d3 1px, transparent 1px), linear-gradient(90deg, #e0e6d3 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    border-right: 2px solid #222921;
}
.gm-art-label { position: absolute; top: 18px; left: 20px; display: flex; align-items: center; gap: 8px; font: 10.5px 'DM Mono', monospace; letter-spacing: 1px; color: #222921; }
.gm-art-label i { width: 6px; height: 6px; border-radius: 50%; background: #222921; }
.gm-art-trace { position: absolute; left: 0; right: 0; bottom: 18px; width: 100%; height: 56%; }
.gm-art-trace path { fill: none; stroke: #293825; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gm-art-joules { position: absolute; left: 23.5%; bottom: 41%; width: 30%; aspect-ratio: 1; background: url('../games/rhythm-runner/joules-red.png') 50% 0 / 300% 100% no-repeat; filter: drop-shadow(0 6px 10px rgba(34,41,33,.18)); transition: transform .25s ease; }
.gm-card:hover .gm-art-joules { transform: translateY(-6px) rotate(-3deg); }
.gm-art-points { position: absolute; top: 52px; right: 22px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 14px 6px; background: #d9fb70; border: 1.7px solid #263020; font: 700 22px/1 'DM Mono', monospace; color: #263020; }
.gm-art-points small { font: 9px 'DM Mono', monospace; letter-spacing: 1px; }

/* Body */
.gm-card-body { padding: 34px 34px 30px; display: flex; flex-direction: column; align-items: flex-start; }
.gm-card-tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #26408b; }
.gm-card-title { margin: 10px 0; font: 800 44px/.95 'Barlow Condensed', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: -.3px; color: #181c1f; }
.gm-card-pitch { margin: 0; font-size: 15.5px; line-height: 1.55; color: #525c6b; }
.gm-facts { list-style: none; padding: 0; margin: 22px 0 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.gm-facts li { font: 12px 'DM Mono', monospace; color: #404750; background: #f1f4f8; border: 1px solid #e3e8f0; border-radius: 999px; padding: 5px 11px; }
.gm-facts b { color: #181c1f; font-weight: 500; }
.gm-play { display: inline-flex; align-items: center; gap: 8px; background: #26408b; color: #fff; font-size: 15px; font-weight: 600; padding: 12px 22px 12px 24px; border-radius: 12px; box-shadow: 0 10px 22px -12px rgba(38,64,139,.8); transition: background .15s, gap .15s; }
.gm-play .material-symbols-outlined { font-size: 20px; }
.gm-card:hover .gm-play { background: #1e3070; gap: 12px; }
.gm-note { margin: auto 0 0; padding-top: 20px; font-size: 12.5px; color: #8b93a1; }

.gm-soon { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 22px; border: 1.5px dashed #c9d1dd; border-radius: 18px; color: #8b93a1; font-size: 14px; font-weight: 500; }
.gm-soon .material-symbols-outlined { font-size: 19px; }

/* Node Runner's art: the game's line-art heart (images/node-runner-card.webp, rendered from
   games/node-runner/heart-art.js) with Joules on the SA node, a points badge and the route's stations. */
.gm-card + .gm-card { margin-top: 18px; }
.gm-art-nr { position: absolute; left: 3%; top: 10%; height: 86%; aspect-ratio: 1420 / 1100; filter: drop-shadow(0 10px 16px rgba(34,41,33,.16)); transition: transform .25s ease; }
.gm-art-nr img { display: block; width: 100%; height: 100%; }
.gm-art-nr-joules { position: absolute; left: 18.6%; top: 20.2%; width: 15.5%; aspect-ratio: 1; background: url('../games/rhythm-runner/joules-red.png') 50% 0 / 300% 100% no-repeat; filter: drop-shadow(0 0 10px rgba(217,251,112,.95)); transition: transform .25s ease; }
.gm-card:hover .gm-art-nr { transform: translateY(-3px); }
.gm-card:hover .gm-art-nr-joules { transform: translate(8%, 26%) rotate(-6deg); }
.gm-art-ribbon { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 4px; }
.gm-art-ribbon i { font: 600 10px/1 'DM Mono', monospace; font-style: normal; color: #222921; padding: 5px 7px; border: 1.5px solid #222921; border-radius: 3px; background: #fffef9; }
.gm-art-ribbon i:first-child { background: #d9fb70; }

/* Conduction Quest's art: its own sunrise hospital background, Joules mid-jump, the gate reward. */
.gm-art-quest { background: #0b282e url('../games/conduction-quest/medical-sunrise.webp') 60% 40% / cover no-repeat; }
.gm-art-quest .gm-art-label { color: #fff; text-shadow: 0 1px 3px rgba(6,27,34,.6); }
.gm-art-quest .gm-art-label i { background: #9aefd1; }
.gm-art-quest-joules { position: absolute; left: 10%; bottom: 7%; width: 30%; aspect-ratio: 1; background: url('../games/rhythm-runner/joules-red.png') 50% 0 / 300% 100% no-repeat; filter: drop-shadow(0 10px 14px rgba(6,27,34,.45)); transition: transform .25s ease; }
.gm-card:hover .gm-art-quest-joules { transform: translateY(-14px) rotate(-4deg); }

/* ── Play view: the game fills everything below the top bar ── */
.gm-stage { position: fixed; top: 62px; left: 230px; right: 0; bottom: 0; background: #f9f9f3; }
.gm-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #f9f9f3; }

@media (max-width: 900px) {
    .gm-card { grid-template-columns: 1fr; }
    .gm-card-art { min-height: 260px; border-right: 0; border-bottom: 2px solid #222921; }
}
@media (max-width: 768px) {
    .gm-main { margin-left: 0; }
    .gm-wrap { padding: 32px 16px 64px; }
}
/* Phones (2026-09-25): while a game plays, the sidebar goes and the game takes the full width; the header's
   "Games > <game>" breadcrumb is the way back. The sidebar and header carry inline styles, hence !important. */
@media (max-width: 768px) {
    body.gm-playing aside:not(.fav-panel) { display: none !important; }
    body.gm-playing header:not(.gm-hero) { left: 0 !important; padding: 0 12px !important; gap: 10px !important; }
    body.gm-playing .gm-stage { left: 0; }
    body.gm-playing #favPanelBtn, body.gm-playing #btnSettings, body.gm-playing header .topbar-search { display: none !important; }
    body.gm-playing header > div:first-child { flex-shrink: 1 !important; min-width: 0; margin-left: 0 !important; }
    body.gm-playing header > div:first-child > .material-symbols-outlined { display: none; }
    body.gm-playing #gmCrumbs { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.gm-playing #gmFullscreen { font-size: 0 !important; gap: 0 !important; padding: 0 8px !important; }
    body.gm-playing #gmFullscreen .material-symbols-outlined { font-size: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .gm-card, .gm-art-joules, .gm-art-nr, .gm-art-nr-joules, .gm-art-quest-joules, .gm-play { transition: none; }
    .gm-card:hover, .gm-card:hover .gm-art-joules, .gm-card:hover .gm-art-nr, .gm-card:hover .gm-art-nr-joules, .gm-card:hover .gm-art-quest-joules { transform: none; }
}