/* /games/g/<id>/ - one game, its own page.
   ==========================================================================
   Kaʻo, 2026-08-08: "Create a detail page and be inspired by Poster and Music
   detail pages. Including the round circle to represent who made it etc."

   So the SHELL IS BORROWED, NOT REDRAWN. This page loads kc-song-detail.css and
   uses its .sd-hero / .sd-head / .sd-eyebrow / .sd-title / .sd-by / .sd-mid /
   .sd-facts exactly as /posters/p/ does, which is why a game page and a poster
   page have the same measure, the same type scale and the same rhythm without
   anyone maintaining a second set of numbers. Everything in this file is what a
   GAME needs and a poster does not: a board is a live thing that has to be given
   room, where a poster is an image with a fixed ratio.

   NOTHING HERE INVENTS A COLOR. Every value is a --mus-* token out of
   kc-music-engine.css, whose light and dark pairs are the site's own and are
   contrast-checked there (ink 11.8:1 light, 13.6:1 dark). That is what makes
   this page correct in html[data-mode="batman"] without a second palette. */

/* No side gutter exists under 900px: v17.css drops .am-main to `padding: 18px 0`
   because /music/ and /posters/ add their own. Without this the board sits flush
   against both edges of a 390px screen. */
@media (max-width: 900px) { .am-app { padding: 0 14px; } }
@media (min-width: 901px) { .am-main { padding-right: 32px; } }

/* iOS Safari zooms into any field under 16px and will not zoom back out, which
   on this page would strand somebody inside the save panel. Stated as a floor so
   it cannot depend on each field remembering. */
.gd-app input, .gd-app select, .gd-app textarea, .kcg-fs input { font-size: 16px; }
/* Kills the 300ms tap wait. Scoped to links and buttons: the games set
   touch-action:none on their own canvas so a drag is a game move, and that
   must survive. */
.gd-app a, .gd-app button, .kcg-fs button { touch-action: manipulation; }

.gd-app { font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ---------------- the rail ---------------- */
/* GONE UNDER 900px, NOT PARKED OFF-SCREEN. v17.css turns .am-side into a fixed
   drawer at that width and slides it out of view, which is right on /games/,
   where a button opens it. This page has no such button, and an off-screen rail
   that is merely translated away is still in the tab order: a keyboard user
   would walk through eleven links they cannot see. display:none takes them out
   of the tree entirely. Nothing is lost, because the back link, "See all" and
   the site's own Games menu all reach the same places. Two classes, so this
   beats v17's single-class rule rather than tying with it. */
@media (max-width: 900px) { .gd-app .am-side { display: none; } }
.gd-railct { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--mus-ink-quiet); font-variant-numeric: tabular-nums; }
html.kc-rail-collapsed .gd-railct { opacity: 0; }

/* ---------------- the way back ---------------- */
/* 44px tall rather than a line of text, because on a phone this is the control
   that undoes arriving here. */
.gd-back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  font-size: 13.5px; font-weight: 700; color: var(--mus-accent); text-decoration: none;
}
.gd-back:hover { text-decoration: underline; }
.gd-back:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 2px; border-radius: 6px; }
.gd-back svg { width: 15px; height: 15px; }

/* ---------------- the game, at the top ---------------- */
/* ONE COLUMN FIRST. On a phone the board is the first thing on the page and the
   words follow it, which is the order somebody who came to play wants. The two
   column form only appears where there is room for both. */
.gd-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; padding: .4rem 0 1rem; }
@media (min-width: 900px) {
  .gd-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
}

.gd-app .kcg-card {
  position: relative;
  border: 1px solid var(--mus-rule); border-radius: 16px;
  background: var(--mus-surface); padding: 8px 12px 12px; overflow: hidden;
}
/* The game prints its own name, and this page prints it as an <h1> right beside
   it, so the copy inside the board is hidden rather than shown twice. The score
   line stays: it is the live region every game writes its commentary into. */
.gd-app .kcg-card .kcg__name { display: none; }
.gd-app .kcg-card .kcg__head { justify-content: flex-end; min-height: 16px; }

/* THE BOARD GETS REAL HEIGHT HERE, more than it gets on a grid of 103 of them.
   Two classes, so it beats .kcp-host's 360px (refined-create.css) rather than
   tying with it. */
.gd-stage .kcg-card__host { height: 420px; }
@media (min-width: 900px) { .gd-stage .kcg-card__host { height: 500px; } }

/* The row under the board is KCGallery's own (see kc-games-browse.js bar()), so
   it needs no sizing here. It needs only to sit where the poster page's actions
   sit, and to be the anchor the save panel opens against. */
.gd-app .kc-pcard__bar { margin-top: 12px; }

.gd-hint { margin: 0 0 1rem; font-size: 16.5px; line-height: 1.5; color: var(--mus-ink-soft); max-width: 46ch; }
/* The maker line. .sd-by is the poster page's byline row and .kc-acircle is the
   same disc every artist gets; only the size is set here, and it is set on the
   circle's HOLDER because .kc-acircle deliberately carries no width. */
.gd-by .kc-acircle { width: 1.5em; }
.gd-free { margin: 0 0 1rem; font-size: 13.5px; font-weight: 700; color: var(--mus-accent); }

/* ---------------- how to play ---------------- */
.gd-how { min-width: 0; }
.gd-how h2 { margin: 0 0 .6rem; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.gd-how__list { margin: 0; padding-left: 1.15rem; display: grid; gap: .55rem; max-width: 62ch; }
.gd-how__list li { font-size: 15.5px; line-height: 1.55; color: var(--mus-ink-soft); }

/* ---------------- more like this ---------------- */
.gd-rule { margin: 1.6rem 0 0; border: 0; border-top: 2px solid var(--mus-ink); }
.gd-more { margin: 1.1rem 0 0; }
.gd-more__hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.gd-more__hd h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.gd-more__all {
  margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 700; color: var(--mus-accent); text-decoration: none;
}
.gd-more__all:hover { text-decoration: underline; }
.gd-more__all:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 2px; border-radius: 6px; }
.gd-grid { display: grid; gap: 16px; margin-top: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.gd-grid .kcg-card__host { height: 336px; }
/* The caption a card carries on /games/, repeated here so a related game reads
   the same on both pages. */
.gd-cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; margin: 0 0 6px; min-height: 22px; }
.gd-cap__n { font-size: 14.5px; font-weight: 700; color: var(--mus-ink); }
.gd-cap__k { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mus-ink-quiet); }

/* ---------------- full screen ---------------- */
/* kc-games-browse.js ships the overlay's own baseline styles with the behaviour
   that creates it, so only the two things it cannot know are set here: this
   page's tokens, and the fact that the board arrives carrying a fixed height
   from the card it was lifted out of. Without the second rule a full screen game
   is a 420px game with a screen of empty room under it. */
.kcg-fs { background: var(--mus-bg); color: var(--mus-ink); z-index: 2000; }
.kcg-fs__bar { border-bottom-color: var(--mus-rule); }
.kcg-fs__stage .kcg-card__host { flex: 1 1 auto; height: auto; min-height: 0; }
.kcg-fs__close { border-color: var(--mus-accent); background: var(--mus-accent); color: var(--mus-accent-ink); }
.kcg-fs__close:hover { background: var(--mus-accent-hover); border-color: var(--mus-accent-hover); }
.kcg-fs__close:focus-visible { outline: 3px solid var(--mus-focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .gd-app .kcg-card { transition: none !important; }
}