/* ============================================================
   STAY IN THE DARK — bright / daylight theme
   Overcast-daylight graveyard. The ground is deliberately a
   MID tone (not white) so the searchlight can read by
   brightening it; on a white ground the beam would vanish.
   All art here is code-drawn placeholder sized to accept
   generated assets later — remove .art-off from #bg-layer to
   swap in real art.
   ============================================================ */

/* Amazon's brand faces, from the official Creative Assets pack.
   Subset to the 103 codepoints this creative can actually render and
   re-encoded as WOFF2: 652 KB -> 55 KB. Safe to subset this hard
   because Ember never renders the Hindi — see the note below.
   NOTE: Ember Modern contains ZERO Devanagari glyphs (verified — 0
   codepoints in U+0900-097F), so Hindi must fall through to a
   platform Devanagari face. The chain below covers Android / iOS /
   Windows with no network request, which matters for a playable. */
@font-face{ font-family:'Ember Display'; src:url('assets/fonts/EmberModernDisplayV1.1-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Ember Text'; src:url('assets/fonts/EmberModernTextV1.1-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Ember Text'; src:url('assets/fonts/EmberModernTextV1.1-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --font-display:'Ember Display','Ember Text','Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI',"Segoe UI",sans-serif;
  --font-text:'Ember Text','Noto Sans Devanagari','Kohinoor Devanagari','Nirmala UI',"Segoe UI",sans-serif;
  --ink:#2b2620;          /* primary text */
  --ink-soft:#6b6459;     /* muted text */
  --gold:#b8860b;
  --gold-lit:#e0a92b;
  --danger:#c0392b;
  --paper:#f7f5f0;        /* stage surface */
  --line:rgba(43,38,32,0.14);
  --field-w:390px;
  --field-h:693px;
}

/* ---- TOUCH HARDENING -------------------------------------------
   This game is driven by press-and-HOLD, which is exactly the gesture
   mobile browsers steal for their own UI. Without all of the below,
   a hold on iOS pops the copy/share callout, starts an image drag, or
   selects text, and the hold silently dies mid-gesture.
     -webkit-touch-callout  kills the iOS long-press callout (iOS/iPadOS only,
                            other browsers ignore it — harmless)
     user-select            stops text/element selection on long press
     -webkit-user-drag      iPadOS still drags images without this, even with
                            touch-callout set
     touch-action:none      no pan, no pinch, no double-tap zoom, and it
                            removes the ~300ms tap delay
     overscroll-behavior    no pull-to-refresh or rubber-band during a hold
   ------------------------------------------------------------------ */
*{ margin:0; padding:0; box-sizing:border-box;
   -webkit-tap-highlight-color:transparent;
   -webkit-touch-callout:none;
   -webkit-user-select:none; user-select:none;
   -webkit-user-drag:none;
   font-family:var(--font-text); }

html,body{ touch-action:none; overscroll-behavior:none; }

img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }

/* the hold surface and the DIG button must own their gestures outright */
#hold-zone,#dig-btn,#dig-wrap,#stage{ touch-action:none; }
h2,#intro-line,#exit-label,.ov-stat .num{ font-family:var(--font-display); }

/* The page behind the stage is the game's own dark tone, so any
   letterbox on an odd aspect ratio reads as intentional rather than
   as a white gap. dvh (not vh) so mobile browser chrome collapsing
   doesn't leave a strip at the bottom. */
html,body{ width:100%; height:100%; min-height:100dvh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:#0a0705; }

/* Fixed 390x693 design space, uniformly scaled to the viewport. All
   gameplay maths stays in those units — see fieldPoint(), which
   converts pointer coords through the element's real rect so it is
   scale-independent. */
#stage{
  position:relative; width:390px; height:693px; overflow:hidden; border-radius:20px;
  background:#0a0705;
  transform:scale(var(--stage-scale,1)); transform-origin:center center;
  box-shadow:0 0 0 1px rgba(43,38,32,0.08), 0 26px 60px rgba(0,0,0,0.5);
}

/* ---- PHONE: genuinely full-bleed -------------------------------
   Phones are far taller than the 390x693 design box (a 390x844 screen
   left 151px of dead band), so on touch devices the stage becomes the
   viewport and the FIELD is scaled to COVER it instead.
   That works because the HUD, DIG button, narrator and end card are
   children of #stage, not #field — so they sit against the real screen
   edges, while only the map art and gameplay layer get the cover-scale.
   Cover, not contain: cropping a little map edge is invisible, whereas
   a letterbox band is the first thing you notice. ---------------- */
@media (max-width:820px), (pointer:coarse){
  #stage{ width:100vw; height:100dvh; border-radius:0; box-shadow:none;
          transform:none; }
  /* Two traps here, both hit during build:
     1. inset:auto MUST come before left/top — it is shorthand for all four
        sides, so declaring it after would wipe them back to auto.
     2. Needs #stage #field, not #field: a media query adds no specificity,
        and the base "#field{inset:0}" rule appears LATER in this file, so a
        plain #field selector would lose to it. */
  #stage #field{ inset:auto; left:50%; top:50%; width:390px; height:693px;
          border-radius:0;
          transform:translate(-50%,-50%) scale(var(--field-scale,1));
          transform-origin:center center; }
}

/* ================= HUD ================= */
#hud{ position:absolute; top:14px; left:0; right:0; z-index:40; display:flex; align-items:center;
      justify-content:space-between; padding:0 16px; pointer-events:none; }

.pill{ display:flex; align-items:center; gap:6px; height:29px; padding:0 13px; border-radius:15px;
       background:#fff; border:1px solid var(--line); color:var(--ink);
       font-size:12.5px; font-weight:800; letter-spacing:0.4px;
       box-shadow:0 2px 5px rgba(60,70,90,0.09); }
.coin{ width:14px; height:14px; }

#title-mark{ color:#e8d5a8; opacity:0.62; font-size:8.5px; font-weight:800; letter-spacing:2.6px;
  text-shadow:0 1px 4px rgba(0,0,0,0.7); }

#dig-pips{ gap:6px; }
.pip{ width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(43,38,32,0.25); background:transparent;
      transition:background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; }
.pip.filled{ background:var(--gold-lit); border-color:var(--gold); box-shadow:0 0 8px rgba(224,169,43,0.6); transform:scale(1.14); }

#alert-bar{ position:absolute; top:50px; left:50%; transform:translateX(-50%) translateY(-6px); z-index:40;
  display:flex; align-items:center; gap:7px; padding:5px 13px; border-radius:13px;
  background:#fff5f4; border:1px solid rgba(192,57,43,0.35);
  color:var(--danger); font-size:9.5px; font-weight:900; letter-spacing:1.6px;
  box-shadow:0 3px 10px rgba(192,57,43,0.18);
  opacity:0; pointer-events:none; transition:opacity 0.18s ease, transform 0.18s ease; }
#alert-bar.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.alert-dot{ width:6px; height:6px; border-radius:50%; background:var(--danger); animation:dotpulse 0.7s ease-in-out infinite; }
@keyframes dotpulse{ 0%,100%{opacity:0.3; transform:scale(0.8);} 50%{opacity:1; transform:scale(1.25);} }

/* ================= FIELD ================= */
/* full-bleed: the graveyard IS the screen */
#field{
  position:absolute; inset:0; width:var(--field-w); height:var(--field-h);
  border-radius:20px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(43,38,32,0.1);
}

/* legibility scrim so HUD/controls read over the ground */
/* Dark scrims: the set art is deep amber (~41% luminance), so light
   text on a darkened band reads far better than the reverse. */
#top-scrim{ position:absolute; top:0; left:0; right:0; height:100px; z-index:31; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,13,7,0.72) 0%, rgba(20,13,7,0.32) 55%, transparent 100%); }
#bottom-scrim{ position:absolute; bottom:0; left:0; right:0; height:130px; z-index:31; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,13,7,0.66) 0%, rgba(20,13,7,0.26) 55%, transparent 100%); }

/* --- generated cenotaph ground --- */
#bg-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; pointer-events:none; }

/* --- unlit shade ------------------------------------------------
   The set art sits at ~104/255 median luminance with p95 of 153, so
   there IS headroom for the beam to light by brightness. This layer
   now only adds a gentle cool falloff away from the light to focus
   the eye. JS drives --lx / --ly / --lr from the light's position. */
#shade{ position:absolute; inset:0; z-index:8; pointer-events:none;
  --lx:50%; --ly:30%; --lr:120px;
  background:radial-gradient(circle var(--lr) at var(--lx) var(--ly),
    rgba(24,18,10,0) 0%,
    rgba(24,18,10,0) 38%,
    rgba(26,20,12,0.10) 62%,
    rgba(24,19,12,0.19) 84%,
    rgba(22,18,12,0.24) 100%); }

/* daylight haze */
.fog{ position:absolute; z-index:7; pointer-events:none; border-radius:50%; filter:blur(28px); }
#fog-a{ width:290px; height:120px; left:-40px; top:120px; background:rgba(255,255,255,0.3); animation:drifta 19s ease-in-out infinite; }
#fog-b{ width:250px; height:105px; right:-50px; bottom:60px; background:rgba(255,255,255,0.24); animation:driftb 24s ease-in-out infinite; }
@keyframes drifta{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(70px,-18px);} }
@keyframes driftb{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-60px,14px);} }

#edge-vignette{ position:absolute; inset:0; z-index:30; pointer-events:none;
  background:radial-gradient(ellipse 82% 70% at 50% 46%, transparent 46%, rgba(70,62,48,0.2) 100%); }

/* headstones now live in the generated background art */

/* --- dig mounds: fresh dark earth against pale sand --- */
#mounds{ pointer-events:none; }
/* Four-stage grave sprite: untouched -> broken open -> deep pit -> emptied.
   Strip is 1024x256 (four 256px cells) anchored on the dark-earth centroid,
   shown at 64px, so each frame step is exactly -64px. JS picks the frame
   from dig progress, which means a half-finished dig STAYS half-finished
   on the map after you bail out. */
.mound{ position:absolute; width:64px; height:64px; margin-left:-32px; margin-top:-32px;
  z-index:4; pointer-events:none;
  background-image:url('assets/grave.webp');
  background-size:256px 64px; background-repeat:no-repeat; background-position:0 0;
  filter:drop-shadow(1px 3px 4px rgba(40,28,14,0.45));
  transition:filter 0.25s ease; }

/* drop-shadow follows the sprite's alpha — a box-shadow would draw a
   rectangle around the transparent cell instead */
.mound.near{ filter:drop-shadow(0 0 5px rgba(232,193,105,0.95))
                    drop-shadow(0 0 13px rgba(232,193,105,0.55))
                    drop-shadow(1px 3px 4px rgba(40,28,14,0.45));
  animation:moundbeat 1.15s ease-in-out infinite; }
@keyframes moundbeat{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }

.mound.digging{ filter:drop-shadow(0 0 7px rgba(245,213,122,1))
                       drop-shadow(0 0 18px rgba(232,193,105,0.7));
  animation:digshake 0.18s linear infinite; }
@keyframes digshake{ 0%,100%{transform:translate(0,0);} 25%{transform:translate(-1.4px,0.8px);} 75%{transform:translate(1.4px,-0.6px);} }

.mound.dug{ animation:none;
  filter:drop-shadow(1px 3px 4px rgba(40,28,14,0.45)) saturate(0.85) brightness(0.92); }

.dirt{ position:absolute; z-index:5; width:5px; height:5px; border-radius:50%; background:#6b4a2c;
  pointer-events:none; animation:dirtfly 0.55s ease-out forwards; }
@keyframes dirtfly{ 0%{opacity:0.95; transform:translate(0,0) scale(1);} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(0.4);} }

/* --- The Circle: escape portal, pure CSS ---------------------------
   Layered so it reads at a glance on a busy amber map: a wide soft glow
   to separate it from the ground, counter-rotating rings for motion,
   expanding ripples to pull the eye, rising motes for depth, and a light
   shaft so it can be spotted from across the yard. No image asset, so
   no licence risk and no added page weight. */
#exit-circle{ position:absolute; z-index:12; pointer-events:none; opacity:0; transform:scale(0.6);
  transition:opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1); }
#exit-circle.open{ opacity:1; transform:scale(1); }

.ex-glow{ position:absolute; width:170px; height:170px; margin-left:-85px; margin-top:-85px;
  border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,235,170,0.55) 0%, rgba(245,200,90,0.34) 26%,
             rgba(230,160,40,0.16) 48%, transparent 72%);
  animation:exglow 2.4s ease-in-out infinite; }
@keyframes exglow{ 0%,100%{transform:scale(1); opacity:0.85;} 50%{transform:scale(1.14); opacity:1;} }

/* vertical shaft — makes the exit findable from the far side of the map */
.ex-shaft{ position:absolute; width:44px; height:150px; margin-left:-22px; top:-150px;
  mix-blend-mode:screen; filter:blur(6px);
  background:linear-gradient(to top, rgba(255,225,150,0.5), rgba(255,215,120,0.18) 45%, transparent 85%);
  animation:exshaft 2.4s ease-in-out infinite; }
@keyframes exshaft{ 0%,100%{opacity:0.5;} 50%{opacity:0.9;} }

.ex-ripple{ position:absolute; width:60px; height:60px; margin-left:-30px; margin-top:-30px;
  border-radius:50%; border:2px solid rgba(255,220,130,0.85);
  animation:exripple 2.7s ease-out infinite; animation-delay:var(--d); }
@keyframes exripple{
  0%   { transform:scale(0.5); opacity:0; }
  15%  { opacity:0.9; }
  100% { transform:scale(2.5); opacity:0; }
}

.ex-ring{ position:absolute; border-radius:50%; }
.ex-outer{ width:84px; height:84px; margin-left:-42px; margin-top:-42px;
  border:3px dashed #ffd76b; box-shadow:0 0 12px rgba(255,205,90,0.8), inset 0 0 10px rgba(255,205,90,0.5);
  animation:exspin 7s linear infinite; }
.ex-inner{ width:56px; height:56px; margin-left:-28px; margin-top:-28px;
  border:2px solid rgba(255,240,190,0.9); border-left-color:transparent; border-right-color:transparent;
  box-shadow:0 0 10px rgba(255,225,150,0.7);
  animation:exspin 3.4s linear infinite reverse; }
@keyframes exspin{ to{ transform:rotate(360deg); } }

.ex-core{ position:absolute; width:38px; height:38px; margin-left:-19px; margin-top:-19px;
  border-radius:50%; mix-blend-mode:screen; filter:blur(1px);
  background:radial-gradient(circle, rgba(255,252,235,0.95) 0%, rgba(255,226,140,0.7) 42%, transparent 76%);
  animation:excore 1.5s ease-in-out infinite; }
@keyframes excore{ 0%,100%{transform:scale(0.9); opacity:0.85;} 50%{transform:scale(1.12); opacity:1;} }

.ex-mote{ position:absolute; width:4px; height:4px; margin-left:-2px; margin-top:-2px;
  border-radius:50%; background:#fff2c8; box-shadow:0 0 6px rgba(255,220,140,1);
  animation:exmote 2.8s ease-out infinite; animation-delay:var(--d); }
@keyframes exmote{
  0%   { transform:rotate(var(--a)) translateX(30px) translateY(6px) scale(0.5); opacity:0; }
  20%  { opacity:1; }
  100% { transform:rotate(var(--a)) translateX(14px) translateY(-46px) scale(1); opacity:0; }
}

#exit-label{ position:absolute; top:50px; left:-60px; width:120px; text-align:center; color:#fff0c4;
  font-size:10px; font-weight:900; letter-spacing:2.4px;
  text-shadow:0 0 8px rgba(180,110,10,1), 0 1px 3px rgba(0,0,0,0.9); }
#exit-sub{ position:absolute; top:64px; left:-60px; width:120px; text-align:center; color:#ffd76b;
  font-size:7.5px; font-weight:800; letter-spacing:2px;
  text-shadow:0 1px 3px rgba(0,0,0,0.9); animation:exsub 1.4s ease-in-out infinite; }
@keyframes exsub{ 0%,100%{opacity:0.55;} 50%{opacity:1;} }

/* --- surveillance rig: reads by BRIGHTENING the mid-tone ground --- */
#tower{ position:absolute; z-index:34; width:26px; height:20px; margin-left:-13px; margin-top:-10px;
  pointer-events:none; filter:drop-shadow(0 2px 4px rgba(70,62,48,0.5)); }
#tower svg{ width:100%; height:100%; }

#beam{ position:absolute; z-index:9; pointer-events:none; transform-origin:50% 0%;
  clip-path:polygon(44% 0, 56% 0, 100% 100%, 0% 100%);
  background:linear-gradient(to bottom, rgba(255,247,214,0.72) 0%, rgba(255,238,178,0.4) 42%, rgba(255,230,158,0.18) 78%, transparent 100%);
  mix-blend-mode:screen; filter:blur(5px); }

#spotlight{ position:absolute; z-index:10; pointer-events:none; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,252,236,0.78) 0%, rgba(255,242,196,0.54) 34%, rgba(255,228,158,0.26) 60%, transparent 82%);
  filter:blur(3px); }
#light-core{ position:absolute; inset:34%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,248,0.6), transparent 70%);
  filter:blur(5px); animation:coreflicker 2.4s ease-in-out infinite; }
@keyframes coreflicker{ 0%,100%{opacity:0.8; transform:scale(1);} 45%{opacity:1; transform:scale(1.06);} 70%{opacity:0.88;} }

/* --- character sprite ---------------------------------------------
   Two 4-frame strips, each 1024x256 (four 256px cells), normalised so
   every frame shares one foot anchor at (128, 236) within its cell.
   Displayed at 46px, so the strip renders 184px wide and each frame
   step is exactly -46px. Anchor lands at 50% / 92% of the box, which
   is why the margins below are -23px / -42px. ---------------------- */
#character{ position:absolute; width:46px; height:46px; margin-left:-23px; margin-top:-42px; z-index:14;
  pointer-events:none; transition:filter 0.18s ease; will-change:background-position;
  background-image:url('assets/char_walk.webp');
  background-size:184px 46px; background-repeat:no-repeat; background-position:0 0;
  filter:drop-shadow(1px 3px 4px rgba(30,22,12,0.5)); }

/* frame 1 doubles as the idle pose — no animation when standing still */
#character.moving{ animation:walkcycle 0.52s steps(4) infinite; }
@keyframes walkcycle{ from{background-position:0 0;} to{background-position:-184px 0;} }

#character.digging{ background-image:url('assets/char_dig.webp');
  animation:digcycle 0.7s steps(4) infinite; }
@keyframes digcycle{ from{background-position:0 0;} to{background-position:-184px 0;} }

#character.lit{ filter:drop-shadow(0 0 12px rgba(255,238,170,0.95)) drop-shadow(1px 3px 4px rgba(30,22,12,0.5)) brightness(1.2); }
/* caught = freeze the current frame + code-driven flash, per PLAN.md —
   deliberately no dedicated "caught" sprite */
#character.caught{ animation:none !important;
  filter:drop-shadow(0 0 14px rgba(216,50,40,0.95)) brightness(1.25); }

#char-shadow{ position:absolute; z-index:13; width:24px; height:8px; margin-left:-12px; margin-top:-4px;
  border-radius:50%; background:radial-gradient(ellipse, rgba(60,52,38,0.42), transparent 72%); pointer-events:none; }

@keyframes boofloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

#danger-flash{ position:absolute; inset:0; z-index:29; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(192,57,43,0.2), rgba(192,57,43,0.42));
  transition:opacity 0.14s ease; }
#danger-flash.on{ opacity:1; animation:dangerpulse 0.5s ease-in-out infinite; }
@keyframes dangerpulse{ 0%,100%{opacity:0.45;} 50%{opacity:1;} }

/* the ONE control layer that should actually receive taps/holds —
   see PLAN.md "Implementation trap already found" before changing this. */
#hold-zone{ position:absolute; inset:0; z-index:20; }

/* ================= CONTROLS (floating on the map) ================= */
#control-hint{ position:absolute; left:0; right:0; bottom:26px; z-index:41; text-align:center;
  color:#e8d5a8; font-size:9.5px; font-weight:800; letter-spacing:1.5px;
  text-transform:uppercase; pointer-events:none; text-shadow:0 1px 4px rgba(0,0,0,0.8);
  transition:opacity 0.6s ease; }
#control-hint.hide{ opacity:0; }

#dig-wrap{ position:absolute; right:20px; bottom:52px; z-index:45; width:120px; height:120px; }

#dig-ring{ position:absolute; inset:0; width:120px; height:120px; transform:rotate(-90deg); pointer-events:none; }
#dig-ring .ring-bg{ fill:none; stroke:rgba(43,38,32,0.1); stroke-width:5; }
#dig-ring .ring-fg{ fill:none; stroke:var(--gold-lit); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:333; stroke-dashoffset:333; filter:drop-shadow(0 0 5px rgba(224,169,43,0.8)); }

#dig-btn{ position:absolute; left:12px; top:12px; width:96px; height:96px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:linear-gradient(180deg,#ffffff,#e8e4da);
  border:1.5px solid rgba(43,38,32,0.16); color:rgba(43,38,32,0.34);
  font-size:12px; font-weight:900; letter-spacing:2px; cursor:pointer;
  box-shadow:0 5px 14px rgba(60,70,90,0.16);
  transition:transform 0.12s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
#dig-btn .shovel{ width:26px; height:26px; opacity:0.3; transition:opacity 0.25s ease; }
#dig-btn .shovel path{ transition:stroke 0.25s ease, fill 0.25s ease; }

#dig-btn.ready{ background:linear-gradient(180deg,#ffd766,#e0a92b);
  border-color:#b8860b; color:#4a3405;
  box-shadow:0 0 0 5px rgba(224,169,43,0.18), 0 6px 16px rgba(184,134,11,0.35); }
#dig-btn.ready .shovel{ opacity:1; }
#dig-btn.ready::after{ content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid rgba(224,169,43,0.5); animation:readyring 1.5s ease-out infinite; }
@keyframes readyring{ 0%{transform:scale(0.94); opacity:0.85;} 100%{transform:scale(1.16); opacity:0;} }

#dig-btn.active{ transform:scale(0.94); box-shadow:0 0 0 7px rgba(224,169,43,0.22), inset 0 4px 10px rgba(90,60,10,0.28); }
#dig-btn.active::after{ display:none; }

#dig-btn.risky{ background:linear-gradient(180deg,#f0705f,#c0392b); border-color:#8e2419; color:#fff3f1;
  box-shadow:0 0 0 5px rgba(192,57,43,0.18), 0 6px 16px rgba(192,57,43,0.4); }
#dig-btn.risky .shovel path{ stroke:#fff3f1; fill:#fff3f1; }

/* ================= OVERLAYS ================= */
/* End card sits on brand dark, not the bright in-game theme — it has to
   carry the show logo, the Prime Video badge and the CTA. */
.overlay{ position:absolute; inset:0; z-index:60; display:none; flex-direction:column; align-items:center;
  justify-content:center; gap:9px; padding:26px 30px; text-align:center; overflow-y:auto;
  background:radial-gradient(ellipse at 50% 38%, rgba(28,12,9,0.97), rgba(6,3,3,0.99));
  backdrop-filter:blur(4px); }
.overlay.active{ display:flex; animation:ovin 0.35s ease; }
@keyframes ovin{ from{opacity:0; transform:scale(1.03);} to{opacity:1; transform:scale(1);} }

.ov-icon{ width:52px; height:52px; }
/* Boo arrives as a framed portrait, so he gets more room than a glyph */
.ov-icon.lose{ width:96px; height:96px; }
.ov-icon img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,0.7)); }
.ov-icon svg{ width:100%; height:100%; }
.ov-icon.win,.ov-icon.lose{ animation:iconpop 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes iconpop{ from{transform:scale(0.4); opacity:0;} to{transform:scale(1); opacity:1;} }

.overlay h2{ color:#f4ead8; font-size:20px; font-weight:900; letter-spacing:2px; }
.overlay p{ color:rgba(233,220,194,0.75); font-size:12px; line-height:1.6; max-width:260px; }

.ov-stats{ display:flex; gap:10px; margin-top:6px; }
.ov-stat{ min-width:74px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(230,201,138,0.22); }
.ov-stat .num{ display:block; color:#f5d57a; font-size:18px; font-weight:900; line-height:1.2; }
.ov-stat .lbl{ display:block; color:rgba(230,201,138,0.6); font-size:7.5px; font-weight:800; letter-spacing:1.4px; margin-top:2px; }

.ov-btn{ display:none; margin-top:14px; padding:13px 30px; border-radius:11px; cursor:pointer;
  background:linear-gradient(180deg,#d1453a,#a92a20); color:#fff;
  border:1px solid #8e2419; font-size:12.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase;
  box-shadow:0 6px 16px rgba(192,57,43,0.32); transition:transform 0.12s ease; }
.ov-btn:active{ transform:scale(0.96); }

/* ================= THE DAGGER =================
   Placeholder styling until dagger.webp lands — the moment the real
   asset exists, drop it into #dagger-pickup / #dagger-badge as a
   background-image and delete the gradient fallbacks. */
#dagger-pickup{ position:absolute; z-index:26; width:54px; height:54px;
  margin-left:-27px; margin-top:-46px; pointer-events:none; opacity:0;
  background-image:url('assets/dagger.webp');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 0 12px rgba(245,213,122,0.95)) drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
#dagger-pickup.show{ animation:daggerrise 2.2s cubic-bezier(0.2,0.9,0.3,1) forwards; }
@keyframes daggerrise{
  0%   { opacity:0; transform:translateY(16px) scale(0.5) rotate(-14deg); }
  22%  { opacity:1; transform:translateY(-10px) scale(1.18) rotate(4deg); }
  40%  { opacity:1; transform:translateY(-16px) scale(1) rotate(0deg); }
  78%  { opacity:1; transform:translateY(-20px) scale(1) rotate(0deg); }
  100% { opacity:0; transform:translateY(-54px) scale(0.7) rotate(0deg); }
}

/* under the gold counter — top-centre collides with the searchlight tower */
#dagger-badge{ position:absolute; top:50px; left:24px; transform:scale(0.6);
  z-index:41; width:32px; height:32px; opacity:0; pointer-events:none;
  background-image:url('assets/dagger.webp');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 0 7px rgba(245,213,122,0.9));
  transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }
#dagger-badge.on{ opacity:1; transform:translateX(-50%) scale(1); animation:daggerhold 2.6s ease-in-out infinite; }
@keyframes daggerhold{ 0%,100%{filter:drop-shadow(0 0 6px rgba(245,213,122,0.75));} 50%{filter:drop-shadow(0 0 13px rgba(245,213,122,1));} }

/* ================= NARRATION =================
   One banner for every in-game line, priority-queued in JS so
   messages never fight. Non-blocking by design: play continues
   underneath, per playable-ad guidance. */
#narrator{ position:absolute; top:92px; left:50%; transform:translateX(-50%) translateY(-10px);
  z-index:46; max-width:300px; padding:8px 18px; border-radius:15px; text-align:center;
  background:rgba(22,10,8,0.94); border:1px solid rgba(245,213,122,0.55);
  color:#f5d57a; font-size:10.5px; font-weight:900; letter-spacing:1.5px; line-height:1.5;
  box-shadow:0 5px 18px rgba(0,0,0,0.65);
  opacity:0; pointer-events:none; transition:opacity 0.3s ease, transform 0.3s ease; }
#narrator.show{ opacity:1; transform:translateX(-50%) translateY(0); }
#narrator.urgent{ background:rgba(60,10,8,0.95); border-color:rgba(255,120,100,0.75); color:#ff9d8a;
  animation:narrurgent 0.5s ease-in-out infinite; }
@keyframes narrurgent{ 0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.045);} }
#narrator em{ font-style:normal; color:#fff3d0; }

/* ---- cold open ---- */
#intro{ position:absolute; inset:0; z-index:50; display:none; flex-direction:column;
  align-items:center; justify-content:center; padding:40px; text-align:center;
  background:radial-gradient(ellipse at 50% 45%, rgba(20,9,6,0.9), rgba(6,3,3,0.96));
  cursor:pointer; transition:opacity 0.55s ease; }
#intro.on{ display:flex; opacity:1; }
body.intro-on #control-hint{ opacity:0; }
#intro.out{ opacity:0; }

#intro-line{ color:#e9dcc2; font-size:17px; font-weight:700; line-height:1.75; letter-spacing:1.2px;
  max-width:280px; text-shadow:0 2px 8px rgba(0,0,0,0.9); }
#intro-line.beat{ animation:introin 0.85s cubic-bezier(0.2,0.9,0.3,1) both; }
#intro-line.tag{ color:#f5d57a; font-size:25px; font-weight:900; letter-spacing:4.5px; line-height:1.3; white-space:nowrap;
  text-shadow:0 0 30px rgba(226,158,30,0.8), 0 2px 6px rgba(0,0,0,0.95); }
@keyframes introin{ from{opacity:0; transform:translateY(16px) scale(0.95); filter:blur(3px);}
                    to{opacity:1; transform:none; filter:blur(0);} }

#intro-skip{ position:absolute; bottom:34px; left:0; right:0; text-align:center;
  color:rgba(233,220,194,0.4); font-size:9px; font-weight:700; letter-spacing:2.2px;
  text-transform:uppercase; animation:skipfade 2s ease-in-out infinite; }
@keyframes skipfade{ 0%,100%{opacity:0.45;} 50%{opacity:0.85;} }

/* ---- finger indicator ---- */
#hand{ position:absolute; z-index:47; width:40px; height:52px; margin-left:-9px; margin-top:-6px;
  pointer-events:none; opacity:0; transition:opacity 0.35s ease;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
#hand.on{ opacity:1; animation:handtap 1.5s ease-in-out infinite; }
#hand svg{ width:100%; height:100%; display:block; }
@keyframes handtap{ 0%,100%{transform:translate(0,0) scale(1);} 45%{transform:translate(-3px,-7px) scale(0.9);} }
.hand-ring{ position:absolute; left:2px; top:-6px; width:30px; height:30px; margin-left:-6px;
  border-radius:50%; border:2px solid rgba(255,225,150,0.9);
  animation:handring 1.5s ease-out infinite; }
@keyframes handring{ 0%{transform:scale(0.4); opacity:0;} 35%{opacity:0.95;} 100%{transform:scale(1.7); opacity:0;} }

/* ================= WALLS =================
   Blocking geometry, deliberately almost invisible: it sits under
   things the background art already draws as solid (plinths, jaali
   screens, fire pits), so the map reads as physical without any
   painted-on blocker. Just a faint contact shadow. */
#walls{ pointer-events:none; }
.wall{ position:absolute; z-index:5; pointer-events:none; border-radius:3px;
  background:rgba(30,20,10,0.16); box-shadow:0 2px 6px rgba(30,20,10,0.2); }

/* ================= BRAND CHROME ================= */
#show-logo{ position:absolute; top:6px; left:50%; transform:translateX(-50%);
  height:30px; width:auto; z-index:42; pointer-events:none;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,0.75)); }

#mute-btn{ position:absolute; top:52px; right:16px; z-index:42;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(20,13,8,0.6); border:1px solid rgba(232,193,105,0.3);
  color:#e8d5a8; cursor:pointer; }
#mute-btn svg{ width:15px; height:15px; }
#mute-btn .icon-off{ display:none; }
#mute-btn.muted .icon-on{ display:none; }
#mute-btn.muted .icon-off{ display:block; }

/* ================= LANGUAGE SELECT ================= */
#lang-screen{ position:absolute; inset:0; z-index:52; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:40px;
  background:radial-gradient(ellipse at 50% 45%, rgba(20,9,6,0.93), rgba(6,3,3,0.97)); }
#lang-screen.on{ display:flex; }
#lang-headline{ color:#e9dcc2; font-size:15px; font-weight:700; line-height:2; letter-spacing:1.2px;
  text-align:center; }
#lang-headline span{ color:rgba(233,220,194,0.62); font-size:14px; }
#lang-row{ display:flex; gap:14px; }
.lang-card{ min-width:118px; padding:16px 18px; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,0.05); border:1px solid rgba(245,213,122,0.35);
  color:#f5d57a; font-size:15px; font-weight:700; letter-spacing:0.8px;
  transition:transform 0.12s ease, background 0.2s ease; }
.lang-card:active{ transform:scale(0.96); background:rgba(245,213,122,0.16); }

/* ================= END CARD ================= */
#end-logo{ height:34px; width:auto; margin-bottom:4px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,0.6)); }

.btnwrap{ display:flex; flex-direction:column; gap:9px; width:100%; align-items:center; margin-top:12px; }

.cta{ width:100%; max-width:280px; padding:13px 22px; border-radius:9px; cursor:pointer;
  background:linear-gradient(180deg,#8b1e1e,#5e1010); color:#f2e6d0; border:1px solid #b02020;
  font-size:12.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  transition:transform 100ms ease; }
.cta:active{ transform:scale(0.98); }
.cta.secondary{ background:rgba(255,255,255,0.05); border:1px solid rgba(230,201,138,0.3);
  color:#e6c98a; text-transform:none; }

.watch-on-badge{ display:flex; align-items:center; gap:7px; margin-top:2px;
  background:#fff; border-radius:8px; padding:6px 12px; }
.watch-on-badge span{ font-size:9.5px; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:0.5px; }
.watch-on-badge img{ height:13px; width:auto; display:block; }

.share-row{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px; }
.share-label{ color:#e6c98a; font-size:9.5px; font-weight:600; letter-spacing:1.4px;
  text-transform:uppercase; opacity:0.7; }
.share-icons{ display:flex; gap:14px; }
.share-btn{ position:relative; width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,0.05); border:1px solid rgba(230,201,138,0.3); color:#e6c98a;
  display:flex; align-items:center; justify-content:center;
  transition:transform 100ms ease, background 150ms ease; }
.share-btn:active{ transform:scale(0.92); background:rgba(201,138,58,0.15); }
.share-btn svg{ width:18px; height:18px; }
.copied-toast{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9px; font-weight:700; color:#e6c98a; opacity:0;
  transition:opacity 0.25s ease; }
.copied-toast.show{ opacity:1; }

/* ================= FX ================= */
.shaking{ animation:shakeit 0.4s ease; }
@keyframes shakeit{
  0%,100%{ transform:translate(0,0); }
  15%{ transform:translate(-9px,3px); }
  32%{ transform:translate(8px,-3px); }
  52%{ transform:translate(-6px,2px); }
  72%{ transform:translate(5px,-2px); }
  88%{ transform:translate(-3px,1px); }
}

.flash-red::after{ content:''; position:absolute; inset:0; z-index:58; pointer-events:none;
  background:rgba(192,57,43,0.34); animation:flashout 0.6s ease forwards; }
@keyframes flashout{ from{opacity:1;} to{opacity:0;} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}