/* Daily game pages (/blog/games/:id). Loaded after site.css; the cards live there. */
.pf-gm-game { background: var(--paper); }
.gm {
  --red: #b3261e;
  min-height: 100vh; padding: 100px var(--gutter) clamp(56px, 8vw, 96px);
  background: var(--paper); color: var(--ink); color-scheme: light;
}
.gm-wrap { max-width: 540px; margin: 0 auto; }
.gm-head { text-align: center; }
.gm-back { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); text-decoration: none; }
.gm-back::before { content: '←'; letter-spacing: 0; }
.gm-back:hover { color: var(--ink); }
.gm-head h1 { margin: 14px 0 10px; font-family: var(--serif); font-size: clamp(60px, 11vw, 92px); line-height: .9; letter-spacing: -0.04em; }
.gm-tag { max-width: 36ch; margin: 0 auto; font-size: 16.5px; line-height: 1.5; color: var(--muted-light); text-wrap: balance; }

.gm-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; padding: 12px 2px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--paper-line); font-size: 14px; color: var(--muted-light); }
.gm-bar strong { color: var(--ink); font-weight: 600; }
.gm-bar-date::before { content: '·'; margin: 0 10px; }
.gm-bar-right { display: flex; align-items: center; gap: 16px; font-variant-numeric: tabular-nums; }
.gm-timer { min-width: 4ch; text-align: right; font-weight: 600; color: var(--ink); }
.gm-timer::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--green); }

.gm-stage { position: relative; }
.gm-board { position: relative; }
.gm-noscript { padding: 48px 0; text-align: center; color: var(--muted-light); }
.gm-svg { display: block; width: 100%; max-width: max(300px, 100svh - 290px); height: auto; margin: 0 auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.gm-svg text { font-family: var(--sans); font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.gm-frame { fill: none; stroke: var(--ink); stroke-width: .05; pointer-events: none; }
.is-won .gm-svg { cursor: default; }

.gm-toast {
  position: absolute; left: 50%; top: 14px; z-index: 5; transform: translate(-50%, -6px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; background: var(--night); color: var(--paper);
  font-size: 14px; font-weight: 500; white-space: nowrap; box-shadow: 0 10px 30px rgb(10 12 23 / .25);
  transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.gm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.gm-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.gm-controls:empty { display: none; }
.gm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--paper-line); background: #fff; color: var(--ink); font: 500 15px var(--sans); cursor: pointer; transition: border-color .15s, background-color .15s, color .15s, opacity .15s; }
.gm-btn:hover:not(:disabled) { border-color: var(--ink); }
.gm-btn:disabled { opacity: .45; cursor: default; }
.gm-btn[hidden] { display: none; }
.gm-btn-solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gm-btn-solid:hover:not(:disabled) { background: var(--green); border-color: var(--green); }

.gm-how { margin-top: 28px; border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.gm-how summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 2px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.gm-how summary::-webkit-details-marker { display: none; }
.gm-how summary::after { content: '+'; font-size: 22px; font-weight: 400; line-height: 1; transition: transform .2s; }
.gm-how[open] summary::after { transform: rotate(45deg); }
.gm-how ul { margin: 0 0 18px; padding-left: 1.15em; font-size: 15.5px; line-height: 1.6; color: #2b2b28; }
.gm-how li { margin-bottom: 6px; padding-left: .2em; }
.gm-how li::marker { color: var(--green); }

.gm-others { margin-top: 36px; }
.gm-others > p, .gm-result-more > p { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); }
.gm-others a, .gm-result-more a { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--paper-line); text-decoration: none; }
.gm-more-name { font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.gm-more-status { margin-left: auto; font-size: 13.5px; color: var(--muted-light); }
.gm-more-status.is-done { color: var(--green); font-weight: 500; }
.gm-more-status.is-done::before { content: '✓ '; }
.gm-others a:hover .gm-more-name, .gm-result-more a:hover .gm-more-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.gm-loading { padding: 120px 0; text-align: center; color: var(--muted-light); font-size: 15px; }

/* ---------- Black Ice ---------- */
.gm-bi { touch-action: none; }
.gm-bi-ice { fill: #e4eef2; }
.gm-bi-alt { fill: #dbe8ed; }
.gm-bi-scuff { fill: none; stroke: rgb(255 255 255 / .8); stroke-width: .025; stroke-linecap: round; }
.gm-bi-trail { fill: none; stroke: var(--green); stroke-width: .07; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .14 .14; opacity: .45; }
.gm-bi-snow { fill: #fff; }
.gm-bi-pine { fill: var(--green); }
.gm-bi-cap { fill: #fff; opacity: .85; }
.gm-bi-aid-ring { fill: #fff; stroke: var(--mint); stroke-width: .05; transition: fill .25s, stroke .25s; }
.gm-bi-cup { fill: none; stroke: var(--night); stroke-width: .045; stroke-linejoin: round; }
.gm-bi-cup-line { stroke: var(--night); stroke-width: .03; }
.gm-bi-aid.is-got .gm-bi-aid-ring { fill: var(--mint); stroke: var(--green); }
.gm-bi-aid.is-got { animation: gm-bi-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.gm-bi-aid, .gm-bi-body { transform-box: fill-box; transform-origin: center; }
@keyframes gm-bi-pop { 50% { transform: scale(1.25); } }
.gm-bi-check-a { fill: #fff; }
.gm-bi-check-b { fill: var(--night); }
.gm-bi-finish { opacity: .45; transition: opacity .3s; }
.gm-bi-finish.is-open { opacity: 1; }
.gm-bi-finish-edge { fill: none; stroke: var(--night); stroke-width: .04; }
.gm-bi-runner { pointer-events: none; }
.gm-bi-dot { fill: var(--night); stroke: #fff; stroke-width: .06; }
.gm-bi-face { fill: none; stroke: var(--mint); stroke-width: .07; stroke-linecap: round; stroke-linejoin: round; transition: transform .12s; }
.gm-bi-body.is-bump { animation: gm-bi-bump .22s ease-out; }
@keyframes gm-bi-bump { 40% { transform: translate(var(--bx), var(--by)); } }
.is-won .gm-bi-dot { fill: var(--green); }
.is-won:not(.is-still) .gm-bi-runner .gm-bi-body { animation: gm-bi-pop .5s .1s cubic-bezier(.3, 1.6, .5, 1) 2; }
.is-won .gm-bi-trail { opacity: .8; stroke-dasharray: none; }

/* ---------- Breakaway ---------- */
.gm-ba { touch-action: none; }
.gm-ba-ground { fill: #fff; }
.gm-ba-lane { stroke: rgb(31 92 69 / .16); stroke-width: .025; }
.gm-ba-grid { stroke: rgb(21 21 19 / .06); stroke-width: .02; }
.gm-ba-rail { fill: none; stroke: var(--ink); stroke-width: .06; stroke-linecap: round; }
.gm-ba-rail-thin { stroke-width: .04; }
.gm-ba-chute { fill: #dcefe5; }
.gm-ba-tape-a { fill: #fff; }
.gm-ba-tape-b { fill: var(--green); }
.gm-ba-hint { fill: none; stroke: var(--green); stroke-width: .06; stroke-linecap: round; stroke-linejoin: round; animation: gm-ba-nudge 1.4s ease-in-out infinite; }
@keyframes gm-ba-nudge { 50% { transform: translateX(.12px); } }
.gm-ba-piece { cursor: grab; transition: transform .2s cubic-bezier(.3, 1.3, .5, 1); }
.gm-ba-piece.is-drag { cursor: grabbing; }
.gm-ba-body { fill: #d9d2c2; stroke: rgb(21 21 19 / .25); stroke-width: .03; transition: filter .15s; }
.gm-ba-piece.c1 .gm-ba-body { fill: #c4cbd6; }
.gm-ba-piece.c2 .gm-ba-body { fill: #e6c9a8; }
.gm-ba-piece.c3 .gm-ba-body { fill: #cfd9c4; }
.gm-ba-piece.is-you .gm-ba-body { fill: var(--green); stroke: var(--night); stroke-width: .05; }
.gm-ba-piece:hover .gm-ba-body, .gm-ba-piece.is-drag .gm-ba-body { filter: brightness(.95); }
.gm-ba-piece.is-drag .gm-ba-body { stroke: var(--ink); stroke-width: .05; }
.gm-ba-head { fill: rgb(21 21 19 / .32); pointer-events: none; }
.gm-ba-shoulders { fill: none; stroke: rgb(21 21 19 / .32); stroke-width: .06; stroke-linecap: round; pointer-events: none; }
.is-you .gm-ba-head { fill: var(--mint); }
.is-you .gm-ba-shoulders { stroke: var(--mint); }
.gm-ba-you { fill: #fff; font-size: .17px; letter-spacing: .02px; opacity: .9; }
.gm-ba .gm-ba-you { dominant-baseline: central; }
.is-won .gm-ba-piece { cursor: default; }

/* ---------- Headlamp ---------- */
.gm-hl-ground { fill: var(--night); }
.gm-hl-grid { stroke: rgb(243 241 236 / .07); stroke-width: .02; }
.gm-hl-star { fill: rgb(243 241 236 / .5); }
.gm-hl-halo { fill: none; stroke: var(--mint); stroke-width: .34; stroke-linecap: round; stroke-linejoin: round; opacity: .45; pointer-events: none; }
.gm-hl-ray { fill: none; stroke: #e8fff3; stroke-width: .08; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.gm-hl-tree path { fill: #2c6a51; }
.gm-hl-mark { transform-box: fill-box; transform-origin: center; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.gm-hl-mark path { fill: #3a3f5c; stroke: rgb(243 241 236 / .35); stroke-width: .03; transition: fill .2s; }
.gm-hl-mark.is-lit { transform: scale(1.18); }
.gm-hl-mark.is-lit path { fill: #f3c75f; stroke: #fff6d8; }
.gm-hl-spot { cursor: pointer; }
.gm-hl-hit { fill: rgb(243 241 236 / .04); transition: fill .15s; }
.gm-hl-spot:hover .gm-hl-hit { fill: rgb(243 241 236 / .1); }
.gm-hl-mirror { transform-box: fill-box; transform-origin: center; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.gm-hl-glass { stroke: #b9c3d6; stroke-width: .1; stroke-linecap: round; }
.gm-hl-mirror.is-lit .gm-hl-glass { stroke: #fff; }
.gm-hl-lamp .gm-hl-band { stroke: var(--paper); stroke-width: .06; stroke-linecap: round; }
.gm-hl-body { fill: var(--ink); stroke: var(--paper); stroke-width: .04; }
.gm-hl-lens { fill: #e8fff3; }
.gm-hl .gm-frame { stroke: var(--night); }
.is-won .gm-hl-halo { opacity: .75; }
.is-won .gm-hl-spot { cursor: default; }

/* ---------- Draft ---------- */
.gm-dr { --c0: #1f5c45; --c1: #7cc3a2; --c2: #e0b052; --c3: #c8553d; --c4: #3d5a80; --c5: #e6dccb; }
.gm-dr-cell { cursor: pointer; transition: fill .3s; }
.gm-dr-cell.c0 { fill: var(--c0); } .gm-dr-cell.c1 { fill: var(--c1); } .gm-dr-cell.c2 { fill: var(--c2); }
.gm-dr-cell.c3 { fill: var(--c3); } .gm-dr-cell.c4 { fill: var(--c4); } .gm-dr-cell.c5 { fill: var(--c5); }
.gm-dr-cell.is-new { animation: gm-dr-in .45s calc(var(--i) * 18ms) ease-out both; }
@keyframes gm-dr-in { 0% { opacity: .35; } 60% { opacity: 1; } }
.gm-dr-edge { fill: none; stroke: #fff; stroke-width: .09; stroke-linecap: round; pointer-events: none; filter: drop-shadow(0 0 .04px rgb(10 12 23 / .6)); }
.gm-dr-flag { pointer-events: none; }
.gm-dr-flag circle { fill: #fff; stroke: var(--ink); stroke-width: .04; }
.gm-dr-flag path { fill: var(--ink); stroke: var(--ink); stroke-width: .04; stroke-linejoin: round; }
.gm-dr-palette { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.gm-dr-swatch { width: 48px; height: 48px; padding: 5px; border: 1px solid var(--paper-line); border-radius: 14px; background: #fff; cursor: pointer; transition: transform .12s, opacity .15s, border-color .15s; }
.gm-dr-swatch span { display: block; width: 100%; height: 100%; border-radius: 9px; }
.gm-dr-swatch:hover:not(:disabled) { border-color: var(--ink); }
.gm-dr-swatch:active:not(:disabled) { transform: scale(.92); }
.gm-dr-swatch:disabled { opacity: .3; cursor: default; }
.gm-dr-swatch .c0 { background: #1f5c45; } .gm-dr-swatch .c1 { background: #7cc3a2; } .gm-dr-swatch .c2 { background: #e0b052; }
.gm-dr-swatch .c3 { background: #c8553d; } .gm-dr-swatch .c4 { background: #3d5a80; } .gm-dr-swatch .c5 { background: #e6dccb; }
.is-won .gm-dr-cell { cursor: default; fill: var(--c0); }
.is-won:not(.is-still) .gm-dr-cell { animation: gm-dr-done .7s calc(var(--i) * 30ms) ease-out both; }
@keyframes gm-dr-done { 45% { fill: var(--c1); } 100% { fill: var(--c0); } }

/* ---------- Hurdles ---------- */
.gm-hu { touch-action: none; }
.gm-hu-floor { fill: #efe6d4; }
.gm-hu-board { stroke: rgb(21 21 19 / .06); stroke-width: .02; }
.gm-hu-wall { fill: var(--night); }
.gm-hu-mark { fill: rgb(124 195 162 / .25); stroke: var(--green); stroke-width: .04; stroke-dasharray: .1 .07; }
.gm-hu-hurdle { pointer-events: none; }
.gm-hu-leg, .gm-hu-foot { stroke: var(--ink); stroke-width: .07; stroke-linecap: round; }
.gm-hu-bar { fill: #fff; stroke: var(--ink); stroke-width: .04; }
.gm-hu-stripe { stroke: var(--clay, #c8553d); stroke-width: .08; transition: stroke .2s; }
.gm-hu-hurdle.is-set .gm-hu-stripe { stroke: var(--green); }
.gm-hu-hurdle.is-set .gm-hu-bar { fill: #dcefe5; }
.gm-hu-runner { pointer-events: none; }
.gm-hu .gm-bi-face { stroke: var(--mint); }
.is-won .gm-hu-hurdle .gm-hu-stripe { stroke: var(--green); }

/* ---------- Switchbacks ---------- */
.gm-sb { --dirt: #b4aa96; }
.gm-sb-ground { fill: #efe9dc; }
.gm-sb-topo { fill: none; stroke: rgb(31 92 69 / .13); stroke-width: .02; pointer-events: none; }
.gm-sb-cell { cursor: pointer; }
.gm-sb-tile { fill: rgb(255 255 255 / .5); stroke: rgb(21 21 19 / .07); stroke-width: .015; transition: fill .2s; }
.gm-sb-cell:hover .gm-sb-tile { fill: rgb(255 255 255 / .85); }
.gm-sb-spin { transition: transform .24s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.gm-sb-edge { fill: none; stroke: rgb(255 255 255 / .9); stroke-width: .34; stroke-linecap: round; }
.gm-sb-trail { fill: none; stroke: var(--dirt); stroke-width: .2; stroke-linecap: round; transition: stroke .2s; }
.gm-sb-knot { fill: var(--dirt); transition: fill .2s; }
.gm-sb-cell.is-lit .gm-sb-trail { stroke: var(--green); }
.gm-sb-cell.is-lit .gm-sb-knot { fill: var(--green); }
.gm-sb-mark { pointer-events: none; }
.gm-sb-mark circle { fill: var(--night); transition: fill .2s; }
.gm-sb-mark text { fill: var(--paper); font-size: .16px; letter-spacing: .01px; }
.gm-sb-lead { fill: none; stroke: var(--dirt); stroke-width: .2; stroke-linecap: round; transition: stroke .2s; }
.gm-sb-mark.is-lit .gm-sb-lead { stroke: var(--green); }
.gm-sb-head.is-lit circle { fill: var(--green); }
.gm-sb-pole { stroke: var(--ink); stroke-width: .05; stroke-linecap: round; }
.gm-sb-flag { fill: var(--dirt); transition: fill .2s; }
.gm-sb-summit.is-lit .gm-sb-flag { fill: var(--green); }
.is-won .gm-sb-cell { cursor: default; }
.is-won:not(.is-still) .gm-sb-cell.is-lit .gm-sb-tile { animation: gm-sb-glow .7s calc(var(--i) * 45ms) ease-out both; }
@keyframes gm-sb-glow { 40% { fill: var(--mint); } }

/* ---------- results ---------- */
.gm-result { position: fixed; inset: 0; z-index: 50; display: flex; padding: 16px; background: rgb(10 12 23 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; overflow-y: auto; }
.gm-result[hidden] { display: none; }
.gm-result.is-open { opacity: 1; }
.gm-result-card {
  position: relative; width: min(100%, 440px); margin: auto; padding: 30px 28px 22px; border-radius: 24px; background: var(--paper); color: var(--ink);
  text-align: center; box-shadow: 0 30px 80px rgb(10 12 23 / .35); transform: translateY(18px) scale(.98); transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.gm-result.is-open .gm-result-card { transform: none; }
.gm-result-x { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--muted-light); font-size: 26px; line-height: 1; cursor: pointer; }
.gm-result-x:hover { background: var(--paper-2); color: var(--ink); }
.gm-badge { position: relative; display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
.gm-badge svg { position: relative; display: block; width: 56px; height: 56px; }
.gm-badge circle { fill: var(--green); transform-origin: 26px 26px; animation: pf-nl-pop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
.gm-badge path { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: pf-nl-draw .4s .35s ease-out forwards; }
.gm-badge i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--mint); opacity: 0; animation: pf-nl-burst .8s .15s cubic-bezier(.2, .7, .3, 1) both; }
.gm-badge i:nth-child(3n) { background: var(--gold); width: 5px; height: 5px; margin: -2.5px; }
.gm-badge i:nth-child(3n + 1) { background: var(--green); }
.gm-result-kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.gm-result-head { margin: 8px 0 6px; font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: .95; letter-spacing: -0.035em; }
.gm-result-sub { font-size: 16px; line-height: 1.5; color: var(--muted-light); }
.gm-result-sub strong { color: var(--ink); font-weight: 600; }
.gm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--paper-line); }
.gm-stats div { padding: 14px 4px; }
.gm-stats div + div { border-left: 1px solid var(--paper-line); }
.gm-stats dd { margin: 0; font-family: var(--serif); font-size: 32px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.gm-stats dt { order: 2; margin-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-light); }
.gm-stats div { display: flex; flex-direction: column-reverse; }
.gm-dist { margin-top: 18px; text-align: left; }
.gm-dist > p { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-light); text-align: center; }
.gm-dist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gm-dist-row > span:first-child { width: 10px; }
.gm-dist-bar { display: flex; justify-content: flex-end; width: var(--w); padding: 3px 8px; border-radius: 6px; background: #cfcbc1; color: var(--ink); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.gm-dist-row.is-today .gm-dist-bar { background: var(--green); color: #fff; }
.gm-share { width: 100%; height: 50px; margin-top: 22px; font-size: 16px; }
.gm-result-next { margin-top: 14px; font-size: 14px; color: var(--muted-light); }
.gm-result-next strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.gm-result-more { margin-top: 20px; text-align: left; }
.gm-result-more a { padding: 12px 2px; }
.gm-result-more a:last-child { border-bottom: 0; }
.gm-result-more .gm-more-name { font-size: 24px; }

@media (max-width: 640px) {
  .gm { padding-top: 84px; }
  .gm-head h1 { margin-top: 10px; }
  .gm-tag { font-size: 15.5px; }
  .gm-bar { margin-top: 18px; font-size: 13px; }
  .gm-bar-date::before { margin: 0 6px; }
  .gm-result-card { padding: 26px 18px 16px; }
  .gm-result-head { font-size: 44px; }
  .gm-stats dd { font-size: 27px; }
  .gm-stats dt { font-size: 10px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-sb-spin, .gm-sb-tile, .gm-bi-aid, .gm-bi-body, .gm-ba-piece, .gm-ba-hint, .gm-hl-mirror, .gm-hl-mark, .gm-dr-cell, .gm-hu-hurdle, .gm-hu-runner, .gm-badge circle, .gm-badge path { animation: none !important; transition: none !important; }
  .gm-badge path { stroke-dashoffset: 0; }
  .gm-badge i { display: none; }
}