/* ============================================================================
   game-info.css - shared styling for the below-the-game content article.
   Pastel light theme, matching the homepage (site.css).

   Loaded per game alongside game-info.js (which, in the deploy build, is also
   pre-rendered to STATIC HTML so crawlers see the content with no JS). The game
   itself is a full-height hero at the top; this article flows underneath it.

   Why this exists: a bare <canvas> game page has no readable text, which Google /
   AdSense flag as thin / low-value content. This adds real, unique, crawlable
   content to every game page without changing how the game plays.

   Classes are namespaced .ginfo* so they can't collide with any game's styles.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700;800&display=swap');

/* Design tokens - mirror the homepage / site.css (game pages don't load site.css). */
:root {
  --paper:     oklch(98.2% 0.018 60);
  --surface:   oklch(99.5% 0.008 80);
  --ink:       oklch(34% 0.072 350);
  --ink-body:  oklch(45% 0.052 350);
  --ink-soft:  oklch(57% 0.040 350);
  --pink:      oklch(66% 0.205 6);
  --pink-ink:  oklch(49% 0.165 7);
  --teal:      oklch(80% 0.108 195);
  --teal-ink:  oklch(47% 0.082 200);
  --line:      oklch(89% 0.028 350);
  --line-soft: oklch(93% 0.018 350);
  --on-teal:   oklch(27% 0.060 205);
  --gi-display: "Fredoka", "Nunito Sans", system-ui, sans-serif;
  --gi-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- make the page scroll -------------------------------------------------
   Games set html,body{overflow:hidden;height:100%} and body{touch-action:none}.
   `:has(.ginfo)` covers the no-JS (pre-rendered) case; `.ginfo-on` (added by
   game-info.js) covers browsers without :has(). Higher specificity than the
   game's element rules, so the document can scroll to the article. */
html:has(.ginfo), html.ginfo-on { overflow-y: auto; height: auto; }
body:has(.ginfo), body.ginfo-on {
  overflow: visible; height: auto; touch-action: auto; -webkit-overflow-scrolling: touch;
}

/* The ad / cross-promo strip moves INTO the document flow (it sits at the bottom
   of the game hero and scrolls away with it) instead of being pinned to the
   viewport over the article. (promo.js also no longer re-pins it.) */
body:has(.ginfo) #ad-banner, body.ginfo-on #ad-banner { position: relative; }

/* --- in-flow game hero ----------------------------------------------------
   A game wraps its whole viewport (canvas/board + chrome + HUD + overlays + ad
   strip) in <div id="hero"> so the game scrolls away as ONE unit when you scroll
   to the article below, instead of its fixed UI staying pinned to the viewport
   and being faded out. The hero is the full game screen at the top of the
   document; its children are positioned `absolute` (anchored to the hero) rather
   than `fixed`. Each game ALSO converts its own inline `position:fixed` UI rules
   to `absolute` (these #hero rules cover the shared chrome/overlay/HUD classes;
   the per-game ones cover each game's custom UI). When a game has a #hero, its
   fixed UI is gone, so game-info.js's fade tagging finds nothing and the UI just
   scrolls. */
/* The game SURFACE is locked so gameplay swipes never pan the page: the canvas
   (#game, via chrome.css) and the modal overlays / menu backdrops each carry their
   OWN touch-action:none (below + in levels.js). #hero itself allows VERTICAL
   panning, so the in-flow chrome at its bottom edge - the game-info "title" bar and
   the ad / promo strip - can be DRAGGED to scroll down to the article and back up,
   the same as tapping the "How to play" button does. The article sits OUTSIDE #hero
   and stays swipe-scrollable; scrollable menus re-enable pan-y (see .mlv-scroll +
   each game's menu list); the promo strip keeps its own horizontal pan. */
#hero { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; touch-action: pan-y; }
/* keep the playfield, modal cards + the chrome buttons locked, so a drag on any of
   them never scrolls the page (taps still fire; touch-action only blocks panning) */
#hero #game, #hero .overlay, #hero .chrome-btn { touch-action: none; }
#hero .overlay, #hero #hud, #hero .chrome-btn { position: absolute; }
/* Inside #hero the overlay's DIM BACKDROP spans the full hero (top:0 from the
   base rule, so the dim covers the top chrome-button strip too), but the card is
   kept inside the safe band: the title bar (--bar-h) AND the in-flow ad/promo
   strip (--ad-h) are reserved at the BOTTOM (so they stay visible below the dim),
   and the back/settings chrome buttons (fixed at the top, ~safe-area + 52px) are
   reserved at the TOP via padding so a tall card never rides up behind them.
   (chrome.css's base .overlay only reserves --ad-h, for the no-#hero fallback.) */
#hero .overlay { bottom: calc(var(--ad-h) + var(--bar-h, 46px));
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px); }
/* Reserve room for the game-info bar (below) AND the ad/promo strip so the
   canvas ends ABOVE both. UNCONDITIONAL (not gated on .ginfo) and applied via
   #hero #game - which beats each game's own `#game` height rule (1 ID) - so the
   canvas is the correct height from FIRST PAINT, before game-info.js runs. The
   bar is always present: pre-rendered into #hero in the deploy build, injected
   by game-info.js in local dev. Gating this on .ginfo/.ginfo-on instead left the
   canvas full-height until the script ran, so games measured a too-tall box on
   load and only self-corrected on the resize game-info.js dispatches afterward.
   Every game sizes its drawing buffer from this element box (clientHeight), so
   the board simply adapts - no per-game edits. */
#hero #game {
  width: 100%;
  height: calc(100vh - var(--ad-h) - var(--bar-h, 46px));
  height: calc(100dvh - var(--ad-h) - var(--bar-h, 46px));
}

/* The game's own fixed NON-BUTTON UI (the ready/over/shop cards, the HUD) would
   otherwise hover over the article. game-info.js tags those fixed elements and we
   fade them out once the reader scrolls past the hero. Control BUTTONS (back, mute,
   settings, the help button) are NOT tagged - they stay visible and never fade. */
.ginfo-hide-on-scroll { transition: opacity 0.25s ease, visibility 0.25s ease; }
body.ginfo-scrolled .ginfo-hide-on-scroll { opacity: 0 !important; pointer-events: none !important; visibility: hidden !important; }

/* --- game-info bar --------------------------------------------------------
   A slim bar in the document flow BETWEEN the game canvas and the ad/promo
   strip: a "How to play" button on the left, the game name + genre + studio
   floated to the right (which scrolls down to the content article). WHY: it puts readable publisher
   text in the first viewport (a bare-canvas game page reads as "thin" to an
   AdSense reviewer/crawler) and gives the article a clearly labelled entry
   point. The canvas reserves --bar-h for it (see the #hero #game rule above),
   so it never overlaps the playfield; it scrolls away with the in-flow #hero. */
.ginfo-hero-bar {
  box-sizing: border-box; height: var(--bar-h, 46px);
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  /* drag the bar (or its How-to-play button) to scroll down to the article */
  touch-action: pan-y;
  /* Match the "More games" promo strip: cream bg + warm brown text. */
  background: #f6ecdc; border-top: 1px solid rgba(120, 90, 60, 0.14);
  font-family: system-ui, -apple-system, sans-serif; white-space: nowrap; overflow: hidden;
}
/* name · genre · By Anime Mochi - one inline run pushed to the RIGHT edge
   (margin-left:auto) with the How-to-play button fixed on the left; ellipsizes
   as a whole if the bar is too narrow. */
.ginfo-hero-meta { flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: right; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ginfo-hero-title { font-weight: 800; color: #5c4837; }
.ginfo-hero-sub, .ginfo-hero-by { font-weight: 600; color: rgba(92, 72, 55, 0.72); }
.ginfo-hero-sep { margin: 0 6px; color: rgba(92, 72, 55, 0.4); }
.ginfo-howto {
  flex: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 14px 0 11px;
  border: none; border-radius: 999px; background: #4ec0ca; color: #06343c;
  font: 700 13px/1 system-ui, -apple-system, sans-serif;
}
.ginfo-howto:active { transform: scale(0.96); }
.ginfo-howto svg { width: 17px; height: 17px; flex: none; }

/* ============================ the article ================================= */
.ginfo {
  position: relative; z-index: 50;
  margin: 0; padding: 0 0 8px;
  background: var(--paper);
  color: var(--ink-body); font-family: var(--gi-body);
  font-size: 16px; line-height: 1.65; text-align: left; -webkit-text-size-adjust: 100%;
  user-select: text; -webkit-user-select: text;
  border-top: 1px solid var(--line);
}
.ginfo * { box-sizing: border-box; }
.ginfo-inner { max-width: 820px; margin: 0 auto; padding: 30px 20px 36px; }

.ginfo h1 { font-family: var(--gi-display); font-weight: 600; font-size: clamp(28px, 6vw, 40px); line-height: 1.08; margin: 6px 0 4px; color: var(--ink); letter-spacing: -0.015em; }
.ginfo h2 { font-family: var(--gi-display); font-weight: 600; font-size: clamp(21px, 4.6vw, 26px); margin: 34px 0 12px; color: var(--ink); letter-spacing: -0.01em; }
/* The "How to play" bar button scrolls to this heading; keep a little breathing
   room above it so it isn't flush to the viewport top. */
#ginfo-howto-section { scroll-margin-top: 16px; }
.ginfo h3 { font-family: var(--gi-display); font-weight: 600; font-size: 18px; margin: 20px 0 6px; color: var(--ink); }
.ginfo p  { margin: 0 0 14px; }
.ginfo a  { color: var(--teal-ink); text-decoration: none; }
.ginfo a:hover { color: var(--ink); text-decoration: underline; }
.ginfo strong { color: var(--ink); }

.ginfo-crumbs { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.ginfo-crumbs a { color: var(--ink-soft); }
.ginfo-crumbs a:hover { color: var(--ink); }
.ginfo-crumbs span { margin: 0 6px; opacity: 0.6; }

.ginfo-lead { font-size: clamp(16px, 3.4vw, 18px); color: var(--ink-soft); margin: 0 0 18px; }

/* "Play" CTA - scrolls back up to the game */
.ginfo-play {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  margin: 2px 0 8px; padding: 11px 22px; border: none; border-radius: 999px;
  font: 800 15px/1 var(--gi-body); color: var(--on-teal);
  background: var(--teal); box-shadow: 0 6px 18px oklch(80% 0.098 195 / 0.4);
  transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ginfo-play:hover { transform: translateY(-2px); }
.ginfo-play:active { transform: scale(0.97); }
.ginfo-play svg { width: 17px; height: 17px; }

/* Contextual link to this game's strategy guide (see GUIDE_FOR in game-info.js). */
.ginfo-guide {
  background: color-mix(in oklch, var(--pink) 6%, var(--surface));
  border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 12px; padding: 12px 16px; margin: 4px 0 18px;
}
.ginfo-guide a { color: var(--teal-ink); font-weight: 800; }

.ginfo-list { list-style: none; margin: 0 0 14px; padding: 0; }
.ginfo-list li { position: relative; padding: 4px 0 4px 28px; }
.ginfo-list li::before {
  content: ""; position: absolute; left: 4px; top: 11px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px color-mix(in oklch, var(--teal) 22%, transparent);
}
.ginfo-related li { display: flex; gap: 12px; align-items: center; padding: 7px 0; }
.ginfo-related li::before { display: none; }
.ginfo-related .ginfo-rel-thumb { flex: none; line-height: 0; text-decoration: none; }
.ginfo-related .ginfo-rel-thumb img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; display: block; border: 1px solid var(--line-soft); }
.ginfo-related .ginfo-rel-body { flex: 1 1 auto; min-width: 0; }
.ginfo-steps { margin: 0 0 14px; padding: 0; counter-reset: step; list-style: none; }
.ginfo-steps li { position: relative; padding: 6px 0 6px 40px; margin: 0 0 4px; }
.ginfo-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 5px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 13px/1 var(--gi-body); color: var(--on-teal); background: var(--teal);
}

.ginfo-controls { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
.ginfo-controls th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); font-weight: 800; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line); }
.ginfo-controls td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
/* The input column can hold several key/button chips ("A / B / C buttons"). Let
   them WRAP onto multiple lines instead of forcing the column wide (which crushed
   the Action column on phones); each chip stays whole via kbd{white-space:nowrap}. */
.ginfo-controls td:first-child { white-space: normal; line-height: 1.9; }
.ginfo-controls kbd {
  display: inline-block; white-space: nowrap; padding: 3px 8px; border-radius: 7px; font: 600 13px/1.2 ui-monospace, Menlo, monospace;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line); }

.ginfo-spec { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px;
  margin: 4px 0 8px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm, 0 8px 24px oklch(40% 0.07 350 / 0.1)); font-size: 14.5px; }
.ginfo-spec dt { color: var(--ink-soft); font-weight: 700; }
.ginfo-spec dd { margin: 0; color: var(--ink); }

/* The long article renders fully expanded - the unique per-game prose is the
   whole point of the page (search value + AdSense content), so it must be visible
   on first paint, not hidden behind an interaction. */
.ginfo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 2px 0 8px; }
.ginfo-actions .ginfo-play { margin: 0; }

.ginfo-faq { margin-top: 8px; }
.ginfo-faq details { border: 2px solid var(--line); border-radius: 16px; padding: 2px 18px; margin: 10px 0; background: var(--surface); transition: border-color 140ms ease; }
.ginfo-faq summary { font-family: var(--gi-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); cursor: pointer; padding: 13px 0; list-style: none; }
.ginfo-faq summary::-webkit-details-marker { display: none; }
.ginfo-faq summary::before { content: "+"; display: inline-block; width: 1.1em; color: var(--pink-ink); font-weight: 700; }
.ginfo-faq details[open] summary::before { content: "\2013"; }
.ginfo-faq details p { margin: 0 0 13px; color: var(--ink-body); }
@media (hover: hover) { .ginfo-faq details:hover { border-color: var(--pink); } }

.ginfo-dev { margin-top: 12px; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm, 0 8px 24px oklch(40% 0.07 350 / 0.1)); }
.ginfo-dev-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.ginfo-dev-logo { width: 52px; height: 52px; border-radius: 14px; flex: none; background: var(--paper); }
.ginfo-dev-name { font-family: var(--gi-display); font-weight: 600; font-size: 19px; color: var(--ink); }
.ginfo-dev-tag { font-size: 13px; color: var(--ink-soft); }
.ginfo-dev p { font-size: 15px; }

.ginfo-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px; margin: 4px 0 8px; }
.ginfo-card { display: block; text-align: center; color: var(--ink-body); text-decoration: none; }
.ginfo-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; display: block;
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: 0 4px 14px oklch(40% 0.06 350 / 0.12); }
.ginfo-card span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.ginfo-card:hover span { color: var(--ink); }
.ginfo-card:hover img { outline: 2px solid var(--teal); outline-offset: 2px; }

.ginfo-foot { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.ginfo-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.ginfo-foot nav a { color: var(--ink-body); font-weight: 700; }
.ginfo-foot p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* Keyboard focus for the article's interactive parts. Game pages don't load
   site.css, so the visible focus ring is defined here (matching site.css's
   pink ring) instead of relying on the varying browser default. */
.ginfo a:focus-visible,
.ginfo-howto:focus-visible,
.ginfo-play:focus-visible,
.ginfo-card:focus-visible,
.ginfo-faq summary:focus-visible,
.ginfo-crumbs a:focus-visible,
.ginfo-rel-thumb:focus-visible {
  outline: 3px solid var(--pink-ink);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Honour a reduced-motion preference: keep the hover styling but drop the lift/
   scale movement on the article's buttons. */
@media (prefers-reduced-motion: reduce) {
  .ginfo-play, .ginfo-howto { transition: none; }
  .ginfo-play:hover, .ginfo-play:active, .ginfo-howto:active { transform: none; }
}