/* landing.css — shared "carnival" look for whole game pages (level-select AND
   gameplay), matching the home hub (public/home.css). Loaded AFTER each game's own
   CSS so it re-skins the page without changing gameplay logic.
   Opt in per page: <body class="<game> rk-land">, add class "rk-hero" to the
   level-select header, and load /nav.js. Fonts come from the page <head>.

   Model: a dark "festive stage" (the body), with all content sitting in BRIGHT
   Creative-Library panels (cards, boards, modals). So the surface/ink tokens are
   forced LIGHT here regardless of the visitor's system theme, and the few bits of
   text that sit directly on the stage are set light explicitly. */

body.rk-land {
  /* festive night stage */
  --paper:     #180A40;                 /* nav/footer backdrop mix */
  --brand:     #F04E37;                 /* orange (buttons + in-card accents) */
  --brand-ink: #B8351F;                 /* readable accent on white panels */
  /* bright panels on the stage — kept light in both color schemes */
  --surface:   #FFFFFF;
  --surface-2: #F2EFE9;
  --card:      #FFFFFF;                  /* panels/buttons stay light on the dark stage (dark mode set this near-black) */
  --ink:       #211E1A;
  --ink-soft:  #6C665E;
  --line:      #E8E3DA;
  color: #F1E9FF;                        /* default on-stage text is light */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg%3E%3Ccircle cx='22' cy='30' r='3' fill='%23FFC93C'/%3E%3Crect x='64' y='20' width='6' height='6' fill='%233AA0FF' transform='rotate(20 67 23)'/%3E%3Ccircle cx='118' cy='52' r='3' fill='%23FF5FA8'/%3E%3Crect x='32' y='96' width='6' height='6' fill='%2335D07A' transform='rotate(35 35 99)'/%3E%3Ccircle cx='96' cy='116' r='3' fill='%23FF3D57'/%3E%3Ccircle cx='128' cy='98' r='2.5' fill='%231FD3C3'/%3E%3Crect x='100' y='14' width='5' height='5' fill='%23A970FF' transform='rotate(15 102 16)'/%3E%3Ccircle cx='60' cy='70' r='2.5' fill='%23FFC93C'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(135% 120% at 50% -8%, #8450C0 0%, #5C2F9E 42%, #3A1F78 100%);
  background-repeat: repeat, no-repeat;
  background-attachment: scroll, fixed;
}

/* text sitting directly on the dark stage → light */
body.rk-land .hud-scene, body.rk-land .hud-label, body.rk-land .hud-value,
body.rk-land .hud-next, body.rk-land .hud-next b,
body.rk-land .viewport-hint, body.rk-land .grid-note,
body.rk-land [class$="-caption"] { color: #E7DBFF; }
body.rk-land [class$="-caption"] b { color: #FFC93C; }

/* white panels on the stage carry DARK text (they inherit the light on-stage
   color otherwise, which vanishes on white). Buttons set their own colors. */
body.rk-land .level-card,
body.rk-land .win-card,
body.rk-land .panel,
body.rk-land .card { color: var(--ink); }

/* persistent "back to the lobby" button on every game screen */
.lobby-fab {
  position: fixed; left: 14px; bottom: 14px; z-index: 70;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px 10px 13px; border-radius: 999px; text-decoration: none;
  background: #FFC93C; color: #241454;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  border: 2px solid #fff; box-shadow: 0 8px 22px rgba(8,3,24,.5);
  transition: transform .12s ease, box-shadow .12s ease;
}
.lobby-fab:hover, .lobby-fab:focus-visible {
  transform: translateY(-2px); outline: none;
  box-shadow: 0 12px 30px rgba(8,3,24,.62);
}
.lobby-fab-ico { font-size: 1.05rem; line-height: 1; }
@media (max-width: 520px) { .lobby-fab { left: 10px; bottom: 10px; padding: 9px 14px; } }

/* ---- top menu on the festive backdrop ---- */
/* nav uses the shared cool gradient bar from styles.css */
body.rk-land .site-nav .brand { color: #fff; }
/* nav links are self-colored pills now (styles.css) — no per-page color override */

/* ---- the level-select hero (add class "rk-hero" to the game's header) ---- */
body.rk-land .rk-hero {
  position: relative; overflow: hidden; color: #fff;
  margin: 22px 0 34px; padding: 46px 40px 42px; border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(10,4,30,.5), inset 0 1px 0 rgba(255,255,255,.08);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='40' viewBox='0 0 240 40'%3E%3Cpath d='M0 4 Q30 28 60 4 Q90 28 120 4 Q150 28 180 4 Q210 28 240 4' fill='none' stroke='%23F5D06B' stroke-width='2'/%3E%3Ccircle cx='30' cy='23' r='6' fill='%23FF3D57'/%3E%3Ccircle cx='90' cy='23' r='6' fill='%23FFC93C'/%3E%3Ccircle cx='150' cy='23' r='6' fill='%231FD3C3'/%3E%3Ccircle cx='210' cy='23' r='6' fill='%23FF5FA8'/%3E%3C/svg%3E"),
    radial-gradient(120% 130% at 82% 20%, rgba(255,79,140,.25), transparent 55%),
    linear-gradient(180deg, #401C7E 0%, #2C1466 100%);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-position: top, center, center;
  background-size: 240px 40px, cover, cover;
}
body.rk-land .rk-hero > * { position: relative; }
body.rk-land .rk-hero img { filter: drop-shadow(0 0 30px rgba(255,201,60,.35)) drop-shadow(0 12px 20px rgba(0,0,0,.45)); }
body.rk-land .rk-hero h1 { color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.18); }
body.rk-land .rk-hero h1 .accent { color: #FFC93C; text-shadow: 0 0 22px rgba(255,201,60,.55); }
body.rk-land .rk-hero .lede { color: #E7DBFF; }
body.rk-land .rk-hero .lede strong { color: #fff; }
body.rk-land .rk-hero .find-note { color: #E7DBFF; }
body.rk-land .rk-hero .find-note img { filter: none; }

/* ---- cards & modals: bright panels that glow on the dark stage ---- */
body.rk-land .level-card, body.rk-land .page-card,
body.rk-land .story-card, body.rk-land .endless-card,
body.rk-land .win-card {
  box-shadow: 0 10px 26px rgba(10,4,30,.45);
}
body.rk-land .level-card:hover, body.rk-land .page-card:hover,
body.rk-land .story-card:hover, body.rk-land .endless-card:hover {
  box-shadow: 0 16px 40px color-mix(in srgb, #FF3D57 34%, rgba(10,4,30,.5));
}

/* ---- fine print, section heads, tier filters on the stage ---- */
body.rk-land .fine { color: #C9B8F0; }
body.rk-land .fine a, body.rk-land .prose a { color: #FFC93C; }
body.rk-land .section-head h2, body.rk-land .section-head .sub { color: #fff; }
body.rk-land .tier-btn { color: #D9CCF5; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); }
body.rk-land .tier-btn.is-on { color: #241454; background: #FFC93C; border-color: #FFC93C; }

/* ---- footer on the festive backdrop ---- */
body.rk-land .site-foot { border-top-color: rgba(255,255,255,.12); background: transparent; }
body.rk-land .site-foot .brand { color: #fff; }
body.rk-land .foot-links a { color: #C9B8F0; }
body.rk-land .foot-links a:hover { color: #FFC93C; }
body.rk-land .foot-copy, body.rk-land .foot-tag { color: #B9A8E4; }

/* ============================================================= *
 *  LOCKED GAME SCREEN  (all game stages: the 10 kids' games AND  *
 *  the board-game arcade kit `.arc`)                             *
 *  The top menu is tucked behind a ☰; the page is locked while   *
 *  playing so the screen stays put, and the play area scrolls    *
 *  INTERNALLY if it's taller than the screen (nothing clipped).  *
 *  The `nav-toggle` button + `rk-playing` class come from nav.js.*
 * ============================================================= */

/* top menu hidden by default; slides down when you tap ☰ */
body.rk-land .site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transform: translateY(-100%); transition: transform .28s ease;
  box-shadow: 0 12px 34px rgba(10,4,30,.55);
}
body.rk-land.nav-open .site-nav { transform: translateY(0); }
/* when open, shift the bar clear of the fixed corner ✕ so it doesn't cover the home badge */
body.rk-land.nav-open .site-nav { padding-left: 66px; }
/* board games: beat arcade.css's `body.arc .site-nav { position: static }` */
body.arc.rk-land .site-nav { position: fixed; }
@media (prefers-reduced-motion: reduce) {
  body.rk-land .site-nav { transition: none; }
}

/* the Menu button — a corner "dog-ear" triangle. It hugs the very corner instead
   of a wide pill across the top, so it barely overlaps page controls. Keeps a small
   "Menu" label so little kids still know what it is. */
.nav-toggle {
  position: fixed; left: 0; top: 0; z-index: 85; cursor: pointer;
  width: 92px; height: 92px; padding: 0; border: 0; border-radius: 0;
  background: #FFC93C;                                   /* gold — shows as the diagonal rim */
  clip-path: polygon(0 0, 100% 0, 0 100%);
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  filter: drop-shadow(2px 3px 4px rgba(20,10,50,.45));
  transition: transform .12s ease, filter .12s ease; transform-origin: top left;
}
.nav-toggle::before {                                    /* red face, inset from the diagonal */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #FF5A4A 0%, #E23B2E 62%);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 0 calc(100% - 6px));
}
.nav-toggle-ico { position: absolute; left: 12px; top: 9px; font-size: 1.55rem; color: #fff; }
.nav-toggle-lbl { position: absolute; left: 11px; top: 39px; font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: #fff; }
.nav-toggle:hover, .nav-toggle:focus-visible { outline: none; transform: scale(1.05); }
/* open: a smaller corner with just a ✕ (darker red) */
body.nav-open .nav-toggle { width: 70px; height: 70px; }
body.nav-open .nav-toggle::before { background: linear-gradient(135deg, #E23B2E, #B8281C); }
body.nav-open .nav-toggle-lbl { display: none; }
body.nav-open .nav-toggle-ico { font-size: 1.4rem; left: 10px; top: 7px; }
/* the coloring editor provides its own "← Gallery" exit — hide the site menu there
   so it can't cover that button (like arc-full does for board games). */
body.color.rk-playing .nav-toggle { display: none; }
body.arc-full .nav-toggle { display: none; }   /* board-game full screen hides all chrome */
@media (prefers-reduced-motion: reduce) { .nav-toggle { transition: none; } }

/* rk-land utility pages (map / stats / album) lead with their title or art at the
   very top-left — pad them clear of the fixed ☰ Menu button so it never overlaps.
   !important because each of these pages sets its own inline hero padding. */
.map-hero, .s-head, .album-top { padding-top: 66px !important; }

/* lock the page while playing; the play area becomes the only scroller so tall
   boards/lists still reach on small phones (no clipping). overscroll-behavior
   stops a wheel/touch at the scroller's edge from chaining to the page, and the
   footer is dropped from the flow so there's no page overflow to leak into. */
body.rk-playing { overflow: hidden; height: 100dvh; overscroll-behavior: none; }
body.rk-playing .site-foot { display: none; }
/* the 10 view-swap games: <main> centres the play view — a short game (e.g. the
   seek-and-find scene on a phone) sits centred with no empty void and clears the
   ☰ button, while a tall game scrolls inside the section (safe center keeps the
   top reachable when it overflows). */
body.rk-playing:not(.arc) > main {
  height: 100dvh; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: safe center;
}
body.rk-playing:not(.arc) > main > section:not([hidden]) {
  flex: 0 1 auto; min-height: 0; max-height: 100%; width: 100%;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* board games: the whole .arc-main (header + board + tools) centres, and scrolls
   if it's taller than the screen */
body.arc.rk-playing > main.arc-main {
  height: 100dvh; min-height: 0; justify-content: safe center;
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}