/* SEO retrofit wrapper — shared by every game page that opts in via $seo_wrapper
   (see common/games/partials/seo-wrapper-top.php and seo-wrapper-below.php).
   One file so a layout fix only has to happen once, not once per objective. */

.rl-embedded .rl-seo-wrap { display: none !important; }
.rl-seo-wrap, .rl-seo-wrap * { box-sizing: border-box; }

/* --- Layout compatibility ---------------------------------------------- */
/* Most game engines share a base body{display:flex;flex-direction:row;
   align-items:center;justify-content:center} rule, built to center one single
   game box full-height. Checked across all 16 engines used by trophy_games:
   only Space Race overrides this to display:block later in its own
   stylesheet; every other engine (Scoop Snatcher, Pickapair, Spelling Bee,
   Orderama, Risky Roll, Spot-a-rama, Arrange-a-rama, Egg Game, Dungeon
   Escape, Tricky Trios, Fill in the Gap, Colour Code, and the punctuation-
   /word-corrections games) keeps it. With the wrapper added, body gets extra
   siblings (top card, game, below card), so it needs to stack as a column
   instead. Triggered by presence of the wrapper itself (:has), not by a
   specific background class — those vary per engine/page and aren't a
   reliable signal. */
body:has(> .rl-seo-wrap) {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
}
/* Scoop Snatcher's .quiz-container and most other engines' shared
   .game-container both have flex:1 (some also margin:auto on the vertical
   axis), which grows/centers the box via the row layout above — harmless
   there, since flex-grow and auto margins only act on the main axis, and the
   main axis used to be horizontal. In column mode they fight the layout:
   flex:1 grows/shrinks the game's height to soak up whatever the two
   <details> aren't using, and auto margins (where present) re-center the
   whole box every time ANY sibling's height changes. Pin both down: fixed
   height, fixed gap. Space Race's .rr-animation-container doesn't use either
   pattern, so it needed no fix — confirmed empirically, not assumed. */
/* Every engine actually mounts its game under its OWN class name, not a
   shared one — "shares .game-container in the CSS file" turned out not to
   mean "uses it in the DOM". Checked each engine's real rendered root
   directly rather than assuming from its stylesheet:
     .quiz-container          Scoop Snatcher     has own width:95%  — flex fix only
     .game-container          Pickapair, Spelling Bee, Fill in the Gap,
                               Dungeon Escape, Arrange-a-rama, the two
                               *-corrections-game engines — no own width — needs both
     .tricky-trios-container  Tricky Trios       no own width       — needs both
     .riskyroll-container      Risky Roll         has own width:95% — flex fix only
     .order-a-rama-container  Orderama           no flex:1 at all   — needed neither
     .spot-a-rama-wrapper     Spot-a-rama        own width:100% AND own fixed
                               height:calc(100vh - 90px) — different problem, see below
   Don't assume the next new engine matches any of these; check its real DOM. */
.quiz-container, .game-container, .tricky-trios-container, .riskyroll-container {
  flex: 0 0 auto !important; margin: 8px 5px !important;
}
.game-container, .tricky-trios-container { width: 100%; }
/* .spot-a-rama-wrapper: two separate bugs, found in sequence.
   (1) height:calc(100vh - 90px) assumed it was nearly the whole page; fixed
       by dropping to height:auto (same treatment as .quiz-container/
       .game-container get with no height constraint at all).
   (2) Even after (1), clicking the below-disclosure still failed — traced
       with elementFromPoint to .dotted:after (the polka-dot background),
       which is position:absolute; height/width:100% with NO positioned
       ancestor to contain it. That makes it resolve against the viewport
       instead of the wrapper's own box, so it visually and functionally
       covers the whole page — confirmed by outlining the real elements and
       by firing a raw page.mouse.click at the disclosure's coordinates
       (silently did nothing until this was fixed, so this wasn't just a
       Playwright actionability false positive). In the original fixed-
       height design this was invisible, since the wrapper's own box already
       spanned nearly the full page. Fix: give the wrapper a positioning
       context so the pseudo-element is contained by IT, not the viewport —
       standard CSS, not a workaround. */
.spot-a-rama-wrapper {
  position: relative;
  height: auto !important; min-height: 0 !important;
  justify-content: flex-start !important;
}
/* .wrong-a-rama-wrapper (Word/Punctuation Corrections games): identical
   copy-pasted pattern to .spot-a-rama-wrapper, both bugs included — its own
   decorative pseudo-element is .cumulus:after, same position:absolute;
   height/width:100% with no positioned ancestor. Same fix, checked directly
   rather than assumed from the CSS looking similar. */
.wrong-a-rama-wrapper {
  position: relative;
  height: auto !important; min-height: 0 !important;
  justify-content: flex-start !important;
}
/* .colour-code-wrapper: only the first bug, not the second — its own CSS
   already carries height:auto!important and justify-content:flex-start (an
   earlier partial fix), but the min-height:calc(100vh - 90px) floor was left
   in on both of its rules, which forces the same size regardless of content
   (that's what "min-height floor" means — it doesn't shrink), pushing the
   below-disclosure well past the fold. No decorative pseudo-element issue
   here (checked — colour-code.css has none matching the .dotted/.cumulus
   pattern), so this is the only override it needs. */
.colour-code-wrapper { min-height: 0 !important; }

/* --- Top card: branding + H1 + breadcrumb + standfirst ----------------- */
/* Opaque on purpose: this sits on top of whatever animated gradient the game
   uses, which is dark in places, so text can't rely on the page background
   for contrast the way it could on an ordinary page. */
.rl-top-card {
  max-width: 720px; margin: 16px auto 15px; padding: 4px 20px;
  background: #faf7f2; border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,.25);
  text-align: center;
}
/* Closed: hug the H1 text, same as .rl-below hugs its summary line — narrow,
   not a full-width bar. Open: needs real width for the breadcrumb/standfirst/
   curriculum lines to wrap properly, so widen it only then. */
.rl-top-card[open] { width: calc(100% - 32px); padding: 4px 20px 18px; }
.rl-top-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem;
  cursor: pointer; list-style: none; padding: 0.6rem 0.1rem; user-select: none;
}
.rl-top-summary::-webkit-details-marker { display: none; }
.rl-top-icon {height: 30px; border-radius: 7px; flex-shrink: 0; display: block; }
.rl-top-summary::after { content: ' \25be'; font-size: 0.85rem; vertical-align: middle; }
.rl-top-card[open] .rl-top-summary::after { content: ' \25b4'; }
.rl-top-summary h1 {
  display: inline; font-size: 1.05rem; font-weight: 800; line-height: 1.3; margin: 0; color: #4a3050;
}
.rl-crumbs {
  font: 400 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #6b6478; margin: 0.5rem 0 0;
}
.rl-crumbs a { color: #6b4a74; text-decoration: none; }
.rl-crumbs a:hover { text-decoration: underline; }
.rl-standfirst {
  font-size: 1rem; color: #5c5273; margin: 0.6rem auto 0; max-width: 34rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* Colours are inline per-instance (each quest has its own bg_color/font_color
   from the quests table — 47 distinct pairs, not a fixed palette a class list
   could reasonably cover), so only shared layout lives here. Direct children
   of .rl-top-summary's flex row (with the icon and h1), not a separate line —
   visible in the collapsed summary itself, not just once expanded. */
.rl-quest-pill {
  display: inline-block; flex-shrink: 0; font-size: 0.78rem; font-weight: 700; line-height: 1;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body.dark-mode .rl-top-card { background: #2d2440; box-shadow: 0 2px 16px rgba(0,0,0,.5); }
body.dark-mode .rl-top-summary h1 { color: #ece7f2; }
body.dark-mode .rl-crumbs { color: #bdb6cc; }
body.dark-mode .rl-crumbs a { color: #c9a8d4; }
body.dark-mode .rl-standfirst { color: #bdb6cc; }

/* --- Below card: teacher tip, examples, curriculum, related, CTA ------- */
/* Closed by default: a child who just wants to play the game gets a single
   quiet line under it, not a poster + pills + a trial CTA competing with the
   start-game modal. Native <details> content is still fully crawlable/indexed
   when collapsed — this isn't hidden-for-SEO, it's a normal disclosure. */
.rl-below {
  max-width: 720px; margin: 20px auto 40px; padding: 8px 20px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #2e2545; background: #faf7f2; border-radius: 14px; box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.rl-below[open] { padding-bottom: 24px; }
.rl-below-summary {
  cursor: pointer; font-weight: 700; font-size: 0.95rem; color: #4a3050;
  list-style: none; padding: 0.6rem 0.2rem; user-select: none;
}
.rl-below-summary::-webkit-details-marker { display: none; }
.rl-below-summary::after { content: ' \25be'; }
.rl-below[open] .rl-below-summary::after { content: ' \25b4'; }
body.dark-mode .rl-below-summary { color: #c9a8d4; }
.rl-below h2 { font-size: 1.15rem; font-weight: 800; color: #4a3050; margin: 1.7rem 0 0.6rem; }
.rl-below p { margin: 0.4rem 0; }
.rl-tip-poster { width: 100%; height: auto; border-radius: 10px; display: block; }
.rl-ex-tier { background: #fff; border: 1px solid #e6dfd4; border-radius: 10px; padding: 0.7rem 1rem; margin: 0.6rem 0; }
.rl-ex-tier .rl-tier-label { font: 700 0.68rem/1 -apple-system, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; color: #6b6478; }
.rl-ex-tier .rl-words { margin-top: 0.4rem; font-size: 0.92rem; }
.rl-pill { display: inline-block; background: #4a3050; color: #fff; border-radius: 999px; padding: 0.2rem 0.8rem; font-size: 0.78rem; font-weight: 700; }
.rl-related { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.rl-related a { background: #fff; border: 1px solid #e6dfd4; border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.85rem; font-weight: 600; color: #0e9494; text-decoration: none; }
.rl-related a:hover { text-decoration: underline; }
.rl-cta { background: #fdeae6; border-radius: 12px; padding: 1.1rem 1.3rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 1.6rem; }
.rl-cta p { margin: 0; font-size: 0.94rem; max-width: 28rem; }
.rl-cta a { background: #e85d4a; color: #fff; font-weight: 800; border-radius: 999px; padding: 0.6rem 1.5rem; text-decoration: none; white-space: nowrap; }
body.dark-mode .rl-below { color: #ece7f2; background: #2d2440; box-shadow: 0 2px 16px rgba(0,0,0,.5); }
body.dark-mode .rl-below h2 { color: #c9a8d4; }
body.dark-mode .rl-ex-tier { background: #221b30; border-color: #453a5c; }
body.dark-mode .rl-ex-tier .rl-tier-label { color: #bdb6cc; }
body.dark-mode .rl-related a { background: #221b30; border-color: #453a5c; color: #3ec6c6; }
body.dark-mode .rl-cta { background: #46261f; }