/* ============================================================
   Critter Courier — Twilight Lantern theme
   Cozy dusk: indigo/plum sky, lantern-amber glow, firefly green.
   The game itself draws to <canvas>; CSS only themes the page +
   the loading veil. Fonts are wired in the art phase.
   ============================================================ */

/* Baloo 2 — a warm, rounded, friendly display face (self-hosted, offline). */
@font-face{ font-family:'Baloo 2'; font-weight:400; font-style:normal; font-display:swap; src:url(../assets/fonts/baloo2-400.woff2) format('woff2'); }
@font-face{ font-family:'Baloo 2'; font-weight:600; font-style:normal; font-display:swap; src:url(../assets/fonts/baloo2-600.woff2) format('woff2'); }
@font-face{ font-family:'Baloo 2'; font-weight:700; font-style:normal; font-display:swap; src:url(../assets/fonts/baloo2-700.woff2) format('woff2'); }
@font-face{ font-family:'Baloo 2'; font-weight:800; font-style:normal; font-display:swap; src:url(../assets/fonts/baloo2-800.woff2) format('woff2'); }

:root{
  --indigo:   #241A38;
  --plum:     #3D2B63;
  --lantern:  #FFB740;
  --firefly:  #C6F25B;
  --dusk-pink:#F39CB0;
  --cream:    #FFF3DA;
  --ink:      #160F26;
  /* safe-area insets exposed to JS (read via getComputedStyle in main.js) so the
     canvas HUD + touch controls can dodge the notch / home indicator. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* visually-hidden, but available to screen readers (the aria-live region) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:#160F26;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;            /* we own all touch gestures */
  user-select:none; -webkit-user-select:none;
  font-family: 'Baloo 2', ui-rounded, "Hiragino Maru Gothic ProN", "Segoe UI", system-ui, sans-serif;
  color:var(--cream);
}

#stage{ position:fixed; inset:0; }

#game{
  display:block;
  width:100%; height:100%;
  touch-action:none;
  /* canvas internal resolution set in JS for crisp HiDPI */
}

/* ---- Boot / loading veil ------------------------------------ */
.boot{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px;
  background:
    radial-gradient(120% 90% at 50% 18%, #4a3570 0%, #2c1f4d 42%, #160f26 100%);
  transition:opacity .55s ease;
  z-index:10;
}
.boot.hidden{ opacity:0; pointer-events:none; }

.boot-lantern{
  width:64px; height:78px;
  border-radius:18px 18px 14px 14px;
  background:linear-gradient(180deg, #ffd98a, var(--lantern) 60%, #f59b2e);
  box-shadow:
    0 0 36px 10px rgba(255,183,64,.55),
    0 0 90px 30px rgba(255,183,64,.25),
    inset 0 -8px 14px rgba(180,90,0,.35);
  position:relative;
  animation:bob 2.2s ease-in-out infinite;
}
.boot-lantern::before{   /* the wire handle */
  content:""; position:absolute; left:50%; top:-16px;
  width:34px; height:22px; transform:translateX(-50%);
  border:3px solid #d99327; border-bottom:none;
  border-radius:18px 18px 0 0;
}
.boot-lantern::after{    /* warm flame core */
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:20px; transform:translate(-50%,-50%);
  border-radius:50% 50% 50% 50%;
  background:radial-gradient(circle at 50% 60%, #fff6df, #ffd270);
  filter:blur(.4px);
  animation:flicker 1.1s ease-in-out infinite;
}

.boot-title{
  font-size:clamp(30px, 8vw, 54px);
  font-weight:800; letter-spacing:.5px;
  color:var(--cream);
  text-shadow:0 2px 0 rgba(0,0,0,.35), 0 0 26px rgba(255,183,64,.35);
}
.boot-sub{
  font-size:clamp(13px, 3.6vw, 17px);
  color:var(--dusk-pink); opacity:.9;
}

@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes flicker{ 0%,100%{ opacity:.95; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:.7; transform:translate(-50%,-52%) scale(.92) } }

@media (prefers-reduced-motion: reduce){
  .boot-lantern{ animation:none } .boot-lantern::after{ animation:none }
}

/* The back button, copied from _MASTER/kit-block.css. This game does not carry
   the whole house kit (it is not swept yet), but the way back must be identical
   in all sixteen games, so the component comes across on its own. */
/* ── the way back ─────────────────────────────────────────────────────────
   One control, in every game. It was seventeen links in ten hand-tuned
   variants, half of them a translucent tint over an unknown page, so its
   contrast differed (and could not be measured) game to game.

   It does NOT take the game's chroma. It is the only element that appears in
   all sixteen, so it is the brand's connective tissue: the same gold
   everywhere is what makes it instantly recognisable as the way out. Opaque,
   so it carries its own ground and no page behind it can change its numbers.
   Measured: the label reads 11.98:1 on its own chip; the chip presents an
   edge of at least 3:1 on every ground it ships on - the border carries it on
   the dark games (3.44 at worst, on Critter Courier's lit dusk) and the fill
   carries it on the paper ones (13.8 at worst).

   The label is a destination, not a dingbat. "✦ Arcade" never said it went
   BACK; an arrow and the word do, and the accessible name stays the full
   "Back to the Arcade". */
.bd-back{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 13px; min-height:38px; border-radius:var(--bd-r-control,10px);
  background:#0c1024; border:1.5px solid #b68e56; color:var(--bd-gold,#ffc46b);
  font:600 13px/1 'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  letter-spacing:.02em; text-decoration:none; white-space:nowrap; cursor:pointer}
.bd-back:hover,.bd-back:focus-visible{border-color:var(--bd-gold,#ffc46b); color:#fff3d8}
.bd-back:focus-visible{outline:2px solid var(--bd-gold,#ffc46b); outline-offset:2px}
.bd-back svg{flex:0 0 auto; display:block}
@media (pointer:coarse){ .bd-back{min-height:44px; padding:11px 14px} }
/* WHERE it sits is layout and differs by game, so it is a modifier rather than
   sixteen private styles. Games that draw into a canvas or a full-bleed stage
   float it; games with a normal column let it sit at the top of the flow. */
.bd-back--fixed{position:fixed; top:12px; left:12px; z-index:2147483000}
.bd-back--flow{align-self:flex-start; margin-bottom:4px}
/* display:flex above would otherwise beat the hidden attribute, and a game
   that hides the way back during play (Beatkeeper, Manna Maze) could not */
.bd-back[hidden]{display:none}

/* ── BibleDo sound switch v1 ── copy from _MASTER/GAME-KIT.md §5c, never edit in place ── */
.bd-sound{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:44px; height:44px; padding:0; margin:0; border-radius:var(--bd-r-control,10px);
  background:#0c1024; border:1.5px solid #b68e56; color:var(--bd-gold,#ffc46b);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation}
.bd-sound:hover,.bd-sound:focus-visible{border-color:var(--bd-gold,#ffc46b); color:#fff3d8}
.bd-sound:focus-visible{outline:2px solid var(--bd-gold,#ffc46b); outline-offset:2px}
.bd-sound svg{display:block; width:20px; height:20px; pointer-events:none}
.bd-sound .bd-snd-off{display:none}
.bd-sound[aria-pressed="false"] .bd-snd-on{display:none}
.bd-sound[aria-pressed="false"] .bd-snd-off{display:block}
.bd-sound--fixed{position:fixed; top:12px; right:12px; z-index:2147483000}
.bd-sound[hidden]{display:none}
/* ── end BibleDo sound switch v1 ── */
/* The canvas HUD dodges the notch with these same insets, so the floating switch does too */
.bd-sound--fixed{ top:calc(12px + var(--sat)); right:calc(12px + var(--sar)); }