/* ============================================================================
   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.
   ============================================================================ */

/* --- 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. */
#hero { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#hero .overlay, #hero #hud, #hero .chrome-btn { position: absolute; }
#hero #game { width: 100%; }

/* The game's own fixed UI (back/mute chrome, 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. */
.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; }

/* --- a round "how to play & info" help icon button at the bottom-left of the
   game; tapping it scrolls down to the content article. It lives inside the
   in-flow #hero (so it scrolls away with the game — see the #hero rule below)
   and also fades (.ginfo-hide-on-scroll) once you scroll into the article. --- */
.ginfo-scrolldown {
  position: fixed; z-index: 55; cursor: pointer;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(var(--ad-h, 56px) + env(safe-area-inset-bottom, 0px) + 12px);
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(80, 60, 110, 0.14); border-radius: 999px; color: #4ec0ca;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(150, 120, 165, 0.34);
}
/* When the game wraps its viewport in an in-flow #hero, the button lives inside
   it and is `absolute` (anchored to the hero's bottom-left), so it scrolls away
   with the game instead of being pinned to the viewport. The base `fixed` above
   is the fallback for any article-game that has no hero. */
#hero .ginfo-scrolldown { position: absolute; }
.ginfo-scrolldown:active { transform: scale(0.92); }
.ginfo-scrolldown svg { width: 22px; height: 22px; }

/* ============================ the article ================================= */
.ginfo {
  position: relative; z-index: 50;
  margin: 0; padding: 0 0 8px;
  background: #fdf2f8; background: linear-gradient(180deg, #fff1f8 0%, #eef4ff 100%);
  color: #5f586f; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  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 rgba(80, 60, 110, 0.12);
}
.ginfo * { box-sizing: border-box; }
.ginfo-inner { max-width: 820px; margin: 0 auto; padding: 30px 20px 36px; }

.ginfo h1 { font-size: clamp(26px, 6vw, 36px); line-height: 1.15; margin: 6px 0 4px; color: #322c43; letter-spacing: 0.01em; }
.ginfo h2 { font-size: clamp(20px, 4.6vw, 25px); margin: 34px 0 12px; color: #322c43; }
.ginfo h3 { font-size: 17px; margin: 20px 0 6px; color: #3a3450; }
.ginfo p  { margin: 0 0 14px; }
.ginfo a  { color: #0b6e78; text-decoration: none; }
.ginfo a:hover { color: #095861; text-decoration: underline; }
.ginfo strong { color: #322c43; }

.ginfo-crumbs { font-size: 13px; color: #8a839c; margin: 0 0 12px; }
.ginfo-crumbs a { color: #8a839c; }
.ginfo-crumbs a:hover { color: #5f586f; }
.ginfo-crumbs span { margin: 0 6px; opacity: 0.6; }

.ginfo-lead { font-size: clamp(16px, 3.4vw, 18px); color: #6b6480; 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 20px; border: none; border-radius: 999px;
  font: 700 15px/1 system-ui, -apple-system, sans-serif; color: #06343c;
  background: #4ec0ca; box-shadow: 0 6px 18px rgba(78, 192, 202, 0.36);
}
.ginfo-play:hover { background: #5fd0da; }
.ginfo-play:active { transform: scale(0.97); }
.ginfo-play svg { width: 17px; height: 17px; }

.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: #4ec0ca; box-shadow: 0 0 0 4px rgba(78, 192, 202, 0.18);
}
.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 system-ui, sans-serif; color: #06343c; background: #4ec0ca;
}

.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: #8a839c; font-weight: 700; padding: 0 12px 8px 0; border-bottom: 1px solid rgba(80, 60, 110, 0.14); }
.ginfo-controls td { padding: 9px 12px 9px 0; border-bottom: 1px solid rgba(80, 60, 110, 0.08); vertical-align: top; }
.ginfo-controls td:first-child { white-space: nowrap; }
.ginfo-controls kbd {
  display: inline-block; padding: 3px 8px; border-radius: 7px; font: 600 13px/1.2 ui-monospace, Menlo, monospace;
  color: #322c43; background: #fff; border: 1px solid rgba(80, 60, 110, 0.18); box-shadow: 0 1px 0 rgba(80, 60, 110, 0.12); }

.ginfo-spec { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px;
  margin: 4px 0 8px; padding: 16px 18px; background: #fff; border: 1px solid rgba(80, 60, 110, 0.12);
  border-radius: 14px; box-shadow: 0 8px 24px rgba(150, 120, 165, 0.14); font-size: 14.5px; }
.ginfo-spec dt { color: #8a839c; font-weight: 600; }
.ginfo-spec dd { margin: 0; color: #322c43; }

.ginfo-faq h3 { margin-top: 18px; }
.ginfo-faq p { color: #5f586f; }

.ginfo-dev { margin-top: 12px; padding: 18px 20px; background: #fff;
  border: 1px solid rgba(80, 60, 110, 0.12); border-radius: 16px; box-shadow: 0 8px 24px rgba(150, 120, 165, 0.14); }
.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: #fff1f8; }
.ginfo-dev-name { font-weight: 800; font-size: 18px; color: #322c43; }
.ginfo-dev-tag { font-size: 13px; color: #8a839c; }
.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: #5f586f; text-decoration: none; }
.ginfo-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; display: block;
  background: #fff; box-shadow: 0 4px 14px rgba(150, 120, 165, 0.2); }
.ginfo-card span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ginfo-card:hover span { color: #322c43; }
.ginfo-card:hover img { outline: 2px solid rgba(78, 192, 202, 0.7); outline-offset: 2px; }

.ginfo-foot { margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(80, 60, 110, 0.12); font-size: 14px; color: #6b6480; }
.ginfo-foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px; }
.ginfo-foot nav a { color: #5f586f; }
.ginfo-foot p { font-size: 13px; color: #8a839c; margin: 0; }