/* eResonate — games.css · the Games page: two cards, one per game.
   The art on each card is drawn in CSS from the game itself — SPLIT's two
   halves and its seam, the chess room's purple board under stage beams — so
   the page ships no images and cannot drift from what the games look like. */

.games-body { background: var(--bg); color: var(--text); }
.gm-main { max-width: 1120px; margin: 0 auto; padding: calc(var(--nav-h, 72px) + 44px) 20px 72px; }

.gm-head { max-width: 720px; margin-bottom: 34px; }
.gm-eyebrow { font: 700 13px/1 'Outfit', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px; }
.gm-title { font: 800 clamp(34px, 5vw, 54px)/1.05 'Outfit', sans-serif; letter-spacing: -.02em; margin: 0 0 14px; }
.gm-sub { font: 400 18px/1.55 'DM Sans', sans-serif; color: var(--text-muted); margin: 0; }

.gm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 820px) { .gm-grid { grid-template-columns: 1fr; } }

.gm-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.gm-card:hover { transform: translateY(-4px); border-color: var(--border-accent); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }

.gm-art { position: relative; display: block; height: 260px; overflow: hidden; text-decoration: none; }
@media (max-width: 820px) { .gm-art { height: 210px; } }

/* SPLIT: the card is the game — two sides and the seam between them. */
.gm-split .gm-art { display: flex; }
.gm-half { flex: 1; display: flex; align-items: flex-end; padding: 20px; font: 800 24px/1.1 'Outfit', sans-serif; color: #fff; transition: flex .45s cubic-bezier(.2, .8, .2, 1); }
.gm-half-l { background: linear-gradient(160deg, #2E5CFF 0%, #16235c 100%); }
.gm-half-r { background: linear-gradient(200deg, #D946EF 0%, #4a1259 100%); justify-content: flex-end; text-align: right; }
.gm-split:hover .gm-half-l { flex: 1.35; }
.gm-seam { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--bg); color: var(--text); display: grid; place-items: center; font: 700 italic 17px/1 'DM Sans', sans-serif; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); transition: left .45s cubic-bezier(.2, .8, .2, 1); }
.gm-split:hover .gm-seam { left: 57.5%; }

/* Rock 'n' Rook: the Backstage room — purple board, three beams, two pieces. */
.gm-chess .gm-art { background: radial-gradient(120% 90% at 50% 0%, #2a1c5e 0%, #0b0f1e 62%); perspective: 620px; }
.gm-beam { position: absolute; top: -20px; width: 120px; height: 300px; transform-origin: 50% 0; background: linear-gradient(to bottom, rgba(168, 85, 247, .55), rgba(168, 85, 247, 0)); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); mix-blend-mode: screen; animation: gm-sweep 7s ease-in-out infinite alternate; }
.gm-beam-1 { left: 12%; --a: -16deg; --b: 8deg; }
.gm-beam-2 { left: calc(50% - 60px); --a: 10deg; --b: -10deg; background: linear-gradient(to bottom, rgba(217, 70, 239, .5), rgba(217, 70, 239, 0)); animation-duration: 9s; }
.gm-beam-3 { right: 12%; --a: 16deg; --b: -6deg; animation-duration: 8s; }
@keyframes gm-sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
.gm-board { position: absolute; left: 50%; bottom: -22px; width: 264px; height: 264px; margin-left: -132px; transform: rotateX(62deg); border: 8px solid #1b1238; border-radius: 6px; box-shadow: 0 30px 60px rgba(0, 0, 0, .6); background: conic-gradient(#d6c9f0 25%, #3b2a6e 0 50%, #d6c9f0 0 75%, #3b2a6e 0) 0 0 / 66px 66px; }
.gm-piece { position: absolute; bottom: 78px; font-size: 64px; line-height: 1; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .55)); transition: transform .35s ease; }
.gm-piece-w { left: calc(50% - 72px); color: #f6f1e4; }
.gm-piece-b { left: calc(50% + 14px); color: #0e0f16; text-shadow: 0 0 1px #6a6a90, 0 0 14px rgba(168, 85, 247, .55); }
.gm-chess:hover .gm-piece-w { transform: translate(14px, -8px); }
@media (prefers-reduced-motion: reduce) { .gm-beam { animation: none; } .gm-half, .gm-seam, .gm-piece, .gm-card { transition: none; } }

.gm-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.gm-kind { font: 700 12.5px/1 'Outfit', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.gm-name { font: 800 34px/1.05 'Outfit', sans-serif; letter-spacing: -.01em; margin: 0 0 12px; }
.gm-glyph { color: var(--accent-text); font-size: .8em; }
.gm-n { color: #FFD83D; }
.gm-pitch { font: 400 16.5px/1.6 'DM Sans', sans-serif; color: #c9cce6; margin: 0 0 18px; }
.gm-status { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 'DM Sans', sans-serif; color: var(--text); margin: auto 0 18px; padding-top: 4px; min-height: 22px; }
.gm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-dim); flex: none; }
.gm-dot.on { background: var(--money); box-shadow: 0 0 0 0 rgba(62, 224, 140, .6); animation: gm-pulse 2s infinite; }
.gm-dot-gold { background: #FFD83D; }
@keyframes gm-pulse { to { box-shadow: 0 0 0 9px rgba(62, 224, 140, 0); } }
/* Both cards end the same way — status line, then a button of one fixed
   size — so the two buttons sit on one line whatever the copy above does. */
.gm-play { align-self: flex-start; width: 250px; max-width: 100%; text-align: center; justify-content: center; white-space: nowrap; }
@media (max-width: 820px) { .gm-play { width: 100%; } }
.gm-note { font: 400 13.5px/1.5 'DM Sans', sans-serif; color: var(--text-muted); margin: -6px 0 16px; }