/* 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. */
.quiz-container, .game-container { flex: 0 0 auto !important; margin: 8px 5px !important; }
/* .quiz-container already sets its own explicit width:95% (independent of
   flex-grow), so it rendered correctly without help. .game-container has no
   explicit width — only max-width — so removing flex-grow above left it with
   nothing to size its width by except shrink-to-fit, which visibly narrowed
   every game built on it (Pickapair, Spelling Bee, Orderama, Risky Roll,
   Spot-a-rama, Arrange-a-rama, Egg Game, Dungeon Escape, Fill in the Gap,
   Colour Code). Restore the fill-up-to-max-width behaviour explicitly. */
.game-container { width: 100%; }

/* --- 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 {
  width: calc(100% - 32px); 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;
}
.rl-top-card[open] { padding: 4px 20px 18px; }
.rl-top-summary {
  display: flex; align-items: center; justify-content: center; gap: 0.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 { width: 26px; height: 26px; 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;
}
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; }