/* Amazon's official Prime Video typeface — matches the client's own brand assets. */
@font-face{ font-family:'Ember Display'; src:url('assets/fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ember Display'; src:url('assets/fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ember Display'; src:url('assets/fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Ember Display'; src:url('assets/fonts/EmberModernDisplay-V1.1/EmberModernDisplayV1.1-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Ember Text'; src:url('assets/fonts/EmberModernText-V1.1/EmberModernTextV1.1-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ember Text'; src:url('assets/fonts/EmberModernText-V1.1/EmberModernTextV1.1-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; font-family:'Ember Text','Poppins',-apple-system,sans-serif; }
html,body { width:100%; height:100%; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; }

:root{
  --gold:#e6c98a;
  --gold-deep:#c98a3a;
  --red:#7a1414;
  --red-bright:#b02020;
  --black:#0a0a0a;
  --parchment:#f2e6d0;
  --panel: rgba(20,16,12,0.72);
}

#stage{
  position:relative;
  width:390px;
  height:693px;
  background:#0a0a0a;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 0 0 2px #2a1a12, 0 20px 60px rgba(0,0,0,0.6);
}

#bg-layer{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:opacity 0.4s ease;
}

#down-figures{ position:absolute; inset:0; z-index:2; pointer-events:none; }
#down-figures img{
  position:absolute; width:130px; opacity:0;
  transition:opacity 0.5s ease;
}
#down-figures img.show{ opacity:1; }

#vanish-patches{ position:absolute; inset:0; z-index:2; pointer-events:none; }
#vanish-patches img{
  position:absolute; opacity:0; object-fit:cover;
  transition:opacity 0.5s ease;
}
#vanish-patches img.show{ opacity:1; }

#progress-dots{
  position:absolute; top:14px; right:14px; z-index:20; display:flex; gap:5px;
}
#progress-dots .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.15); }
#progress-dots .dot.done{ background:var(--gold-deep); }

#show-logo{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  height:34px; width:auto; z-index:20; pointer-events:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

#mute-btn{
  position:absolute; top:10px; left:10px; z-index:20;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  color:var(--gold); opacity:0.8;
}
#mute-btn svg{ width:18px; height:18px; }
#mute-btn .icon-off{ display:none; }
#mute-btn.muted .icon-on{ display:none; }
#mute-btn.muted .icon-off{ display:block; }

/* Traitor-side countdown — hidden by default, shown via .show only during
   Traitor pick/task screens. Sits below #show-logo (top:8px + height:34px). */
#traitor-timer{
  display:none; position:absolute; top:48px; left:22px; right:22px; z-index:21;
  align-items:center; gap:8px;
}
#traitor-timer.show{ display:flex; }
.traitor-timer-track{
  flex:1; height:8px; border-radius:4px; overflow:hidden;
  background:rgba(0,0,0,0.4); border:1px solid rgba(230,201,138,0.25);
}
.traitor-timer-fill{
  height:100%; width:100%; border-radius:4px;
  background:linear-gradient(90deg,#c98a3a,#7a1414);
  transition:width 1s linear;
}
.traitor-timer-fill.urgent{
  background:linear-gradient(90deg,#b02020,#7a1414);
  animation:timerPulse 0.5s ease-in-out infinite;
}
@keyframes timerPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }
.traitor-timer-text{
  color:var(--gold); font-size:12px; font-weight:700; min-width:32px; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Extra headroom on Traitor-side screens so the countdown never collides with
   the header text below it — mirrors the #show-logo clearance fix above. */
#stage.timer-active .screen-pick{ padding-top:92px; }
#stage.timer-active .task-instruction{ top:84px; }

.screen{
  position:absolute; inset:0; z-index:10;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  padding:28px 22px; text-align:center; gap:14px;
}
.screen.active{ display:flex; }

/* Preloader */
#preloader{ background:#0a0a0a; z-index:100; gap:18px; }
.loader-ring{ width:44px; height:44px; border:3px solid rgba(230,201,138,0.2); border-top-color:var(--gold-deep); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader-text{ color:var(--gold); font-size:13px; letter-spacing:1px; }
.loader-bar{ width:180px; height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
#loader-fill{ height:100%; width:0%; background:var(--gold-deep); transition:width 0.2s ease; }

.headline{ font-family:'Ember Display','Poppins',-apple-system,sans-serif; color:var(--parchment); font-size:24px; font-weight:700; line-height:1.3; }
.subline{ color:var(--gold); font-size:13px; line-height:1.6; opacity:0.85; max-width:280px; }
.round-label{ color:var(--gold-deep); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.task-name{ font-family:'Ember Display','Poppins',-apple-system,sans-serif; color:var(--parchment); font-size:18px; font-weight:700; margin-bottom:6px; }

/* Blurred glass panel behind any text sitting over a busy photo background —
   reused everywhere text needs to stay legible against the scene art. */
.text-panel{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  max-width:100%; padding:16px 22px; border-radius:14px;
  background:rgba(10,8,6,0.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(230,201,138,0.14);
}

.task-instruction{
  position:absolute; top:50px; left:22px; right:22px; z-index:15; /* clears #show-logo (top:8px + height:34px) with headroom for any script */
  color:var(--parchment); font-size:14px; font-weight:600; text-align:center;
  padding:10px 14px; border-radius:12px;
  background:rgba(10,8,6,0.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(230,201,138,0.14);
}

button{ border:none; background:none; cursor:pointer; }

.cta{
  background:linear-gradient(180deg,#8b1e1e,#5e1010);
  color:var(--parchment); border:1px solid var(--red-bright);
  padding:13px 22px; border-radius:9px; font-size:13px; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase; width:100%; max-width:280px;
  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:var(--gold); }

/* Share row — kept monochrome gold-on-dark rather than brand colors, so it
   reads as part of the ritual UI rather than a bolted-on social widget. */
.share-row{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:6px; }
.share-label{ color:var(--gold); font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; opacity:0.65; }
.share-icons{ display:flex; gap:14px; }
.share-btn{
  position:relative; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,0.05); border:1px solid rgba(230,201,138,0.3);
  color:var(--gold); 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:19px; height:19px; }
.share-btn .copied-toast{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:rgba(10,8,6,0.92); color:var(--parchment); font-size:10px; font-weight:600;
  padding:5px 9px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity 200ms ease; border:1px solid rgba(230,201,138,0.2);
}
.share-btn .copied-toast.show{ opacity:1; }

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

/* Side select */
.side-row{ display:flex; gap:16px; margin-top:10px; }
.side-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--panel); border:1px solid rgba(230,201,138,0.18);
  border-radius:14px; padding:18px 14px; width:140px;
}
.side-card:active{ border-color:var(--gold-deep); background:rgba(201,138,58,0.1); }
.side-icon{ width:44px; height:44px; }
.side-name{ color:var(--parchment); font-size:14px; font-weight:700; }
.side-desc{ color:var(--gold); font-size:11px; opacity:0.8; }

/* Suspect / target pick screen — background carries the figures, we only add hotspots */
.screen-pick{ justify-content:flex-start; padding-top:58px; } /* clears #show-logo (top:8px + height:34px) with headroom for any script */
.pick-header{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 22px; border-radius:14px;
  background:rgba(10,8,6,0.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(230,201,138,0.14);
}

.pick-hotspots{ position:absolute; inset:0; z-index:3; }
.hotspot{
  position:absolute; border:none; background:transparent; padding:0; cursor:pointer;
}
.hotspot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(230,201,138,0.4), rgba(230,201,138,0) 72%);
  opacity:0; transition:opacity 100ms ease; pointer-events:none;
}
.hotspot:active::after{ opacity:1; }
.hotspot-pulse{
  position:absolute; width:64px; height:64px; margin-left:-32px; margin-top:-32px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(230,201,138,0.55), rgba(230,201,138,0) 70%);
}
.hotspot-pulse.active{ animation:hotspotPulse 0.5s ease-out; }
@keyframes hotspotPulse{
  0%{ opacity:0.9; transform:scale(0.4); }
  100%{ opacity:0; transform:scale(1.7); }
}

/* Task screens share a stage box */
.task-screen{ padding-top:60px; }

/* Wax Seal */
.wax-stage{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.wax-letter{ width:220px; }
.ritual-btn{ position:relative; width:100px; height:100px; display:flex; align-items:center; justify-content:center; }
.ritual-btn span{ color:var(--parchment); font-size:11px; font-weight:700; letter-spacing:1px; z-index:2; }
.progress-ring{ position:absolute; inset:0; width:100px; height:100px; transform:rotate(-90deg); }
.ring-track{ fill:rgba(255,255,255,0.06); stroke:rgba(230,201,138,0.15); stroke-width:5; }
.ring-fill{ fill:none; stroke:var(--gold-deep); stroke-width:5; stroke-dasharray:264; stroke-dashoffset:264; transition:stroke-dashoffset 0.05s linear; }

/* Binding Thread */
.thread-stage{ position:relative; width:220px; height:308px; }
.thread-stage img{ position:absolute; inset:0; width:100%; height:100%; }
#thread-canvas{ position:absolute; inset:0; width:220px; height:308px; touch-action:none; }

/* Candle Watch */
.candle-stage{ position:relative; width:150px; height:320px; margin-top:20px; }
.candle-stage img{ position:absolute; inset:0; width:100%; height:100%; }

/* warm ambient light the flame casts, sits behind the flame */
.candle-glow{
  position:absolute; left:50%; top:14px; width:70px; height:70px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,176,80,0.55) 0%, rgba(255,120,40,0.24) 38%, rgba(255,90,20,0) 70%);
  filter:blur(5px); pointer-events:none; animation:glowpulse 2.6s infinite ease-in-out;
}
@keyframes glowpulse{
  0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
  50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.12); }
}
.candle-glow.snuffed{ display:none; }

/* flame: layered teardrop — outer body + white-hot core (::after) + blue combustion base (::before) */
.flame{
  position:absolute; left:50%; top:14px; width:22px; height:36px; transform:translateX(-50%);
  transform-origin:50% 92%;
  background:radial-gradient(ellipse at 50% 78%, #fffbe6 0%, #ffe48a 20%, #ffb23c 46%, #ff6a1e 68%, rgba(255,70,20,0) 82%);
  border-radius:50% 50% 50% 50% / 70% 70% 34% 34%;
  box-shadow:0 0 14px 4px rgba(255,140,40,0.7), 0 -4px 10px 2px rgba(255,90,30,0.5);
  filter:blur(0.4px); animation:flicker 0.5s infinite ease-in-out;
}
.flame::before{
  content:''; position:absolute; left:50%; bottom:-6%; width:62%; height:36%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 28%, rgba(96,150,255,0.9) 0%, rgba(60,90,220,0.5) 46%, rgba(40,60,180,0) 76%);
  border-radius:50%; filter:blur(1px);
}
.flame::after{
  content:''; position:absolute; left:50%; top:40%; width:44%; height:42%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 72%, #fffef6 0%, #ffe9a8 52%, rgba(255,210,120,0) 82%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%; filter:blur(0.3px);
}
@keyframes flicker{
  0%{ transform:translateX(-50%) rotate(-2deg) scale(1,1); opacity:.92; }
  25%{ transform:translateX(-51%) rotate(1.4deg) scale(0.96,1.06); }
  50%{ transform:translateX(-49.5%) rotate(2deg) scale(1.04,0.97); opacity:1; }
  75%{ transform:translateX(-50.5%) rotate(-1deg) scale(0.98,1.05); }
  100%{ transform:translateX(-50%) rotate(1deg) scale(1,1.02); opacity:.96; }
}
.flame.snuffed{ display:none; }

/* smoke wisp that rises + curls when the flame is snuffed */
.smoke{
  position:absolute; left:50%; top:12px; width:22px; height:60px; transform:translateX(-50%); opacity:0;
  transform-origin:50% 100%; pointer-events:none;
  background:linear-gradient(to top, rgba(200,200,200,0) 0%, rgba(205,205,205,0.5) 32%, rgba(225,225,225,0.38) 66%, rgba(225,225,225,0) 100%);
  border-radius:50%; filter:blur(3px);
}
.smoke.rise{ animation:smokeRise 1.6s ease-out forwards; }
@keyframes smokeRise{
  0%{ opacity:0; transform:translateX(-50%) translateY(8%) scale(0.5,0.4) rotate(0deg); }
  15%{ opacity:.75; }
  55%{ opacity:.5; transform:translateX(-66%) translateY(-60%) scale(1.05,1.5) rotate(-6deg); }
  100%{ opacity:0; transform:translateX(-82%) translateY(-130%) scale(1.5,2.3) rotate(8deg); }
}

/* Cipher Dial */
.dial-stage{ position:relative; width:220px; height:220px; margin-top:30px; touch-action:none; }
.dial-stage img{ position:absolute; inset:0; width:100%; height:100%; }
/* Official client dagger asset as the needle — pivots around its crossguard
   (measured at 49%/34% of the image), same "rotate in place, tip stays
   inside the disc" requirement as the previous brass needle: sized and
   positioned so the blade tip reaches ~95px from center, safely inside the
   110px dial radius at every angle. */
#dial-needle-img{
  inset:auto; left:74px; top:62px; width:73px; height:144px;
  transform-origin:49% 34%; transition:none;
}
#dial-needle-img.snap{ transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1); }

/* Cipher Dial — 3 sequential target marks, revealed one at a time, placed
   just outside the dial disc so they read against the dark background
   instead of fighting the brass tick-ring's own texture for contrast.
   .dial-mark's own transform is JS-driven radial placement (rotate+translate);
   the pulse/glow animation lives on .dial-mark-inner instead so it never
   fights that positional transform. */
.dial-mark{
  position:absolute; left:50%; top:50%; width:32px; height:32px; margin:-16px 0 0 -16px;
  opacity:0; pointer-events:none; transition:opacity 0.4s ease;
}
.dial-mark.revealed{ opacity:1; }
.dial-mark-inner{
  width:100%; height:100%;
  filter:drop-shadow(0 0 6px rgba(255,210,120,0.9)) drop-shadow(0 0 2px rgba(255,255,255,0.6));
}
.dial-mark-inner svg{ width:100%; height:100%; display:block; overflow:visible; }
.dial-mark polygon{ fill:rgba(255,205,110,0.95); stroke:#fff8e6; stroke-width:2; transition:fill 0.25s ease; }
.dial-mark.lit polygon{ fill:#fff4d2; stroke:#ffffff; }
.dial-mark.lit .dial-mark-inner{
  filter:drop-shadow(0 0 14px rgba(255,225,150,1)) drop-shadow(0 0 4px rgba(255,255,255,0.9));
  animation:markLit 0.5s ease-out;
}
@keyframes markLit{ 0%{ transform:scale(1); } 40%{ transform:scale(1.7); } 100%{ transform:scale(1); } }

.dial-progress{ display:flex; gap:7px; margin-top:14px; }
.dial-progress .dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.15); transition:background 0.3s ease; }
.dial-progress .dot.done{ background:var(--gold-deep); }

/* Outcome */
/* Boo (the cat) — cameo appears only on bad-news outcomes (red/dark flashes),
   matching the client's own reference: Boo shows up at the "you're
   eliminated" moment, not on a clear/progress result. */
.boo-cameo{
  width:64px; height:64px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold-deep); box-shadow:0 4px 14px rgba(0,0,0,0.5);
  display:none;
}
.boo-cameo.show{ display:block; }
.outcome-flash{ width:70px; height:70px; border-radius:50%; }
.outcome-flash.green{ background:radial-gradient(circle,#7ac97a,#2e6b2e); box-shadow:0 0 30px rgba(122,201,122,0.5); }
.outcome-flash.red{ background:radial-gradient(circle,#e05a5a,#7a1414); box-shadow:0 0 30px rgba(224,90,90,0.5); }
.outcome-flash.dark{ background:radial-gradient(circle,#3a2a1a,#1a1005); box-shadow:0 0 24px rgba(0,0,0,0.5); }

/* Reveal */
#reveal-figure{ width:140px; }

/* "Streaming on Prime Video" badge — logo is blue-on-transparent, needs a
   light chip behind it to read correctly against the dark scene. */
.watch-on-badge{
  display:flex; align-items:center; gap:7px; margin-top:4px;
  background:#fff; border-radius:8px; padding:6px 12px;
}
.watch-on-badge span{ font-size:10px; font-weight:700; color:#555; text-transform:uppercase; letter-spacing:0.5px; }
.watch-on-badge img{ height:14px; width:auto; display:block; }

/* Idle tap nudge — skeleton hand whose fingertip points at where to interact.
   Ported from the edb_stage2 reference (same hand.webp, same animation logic). */
.taphand{
  position:absolute; width:18%; pointer-events:none; z-index:50;
  transform:translate(-13%,-4%);
  filter:drop-shadow(0 5px 9px rgba(0,0,0,0.65)); animation:handfade 220ms ease-out;
}
.taphand img{ display:block; width:100%; transform-origin:13% 4%; animation:handtap 1.05s infinite ease-in-out; }
@keyframes handtap{ 0%,100%{ transform:translate(0,0) scale(1); } 45%{ transform:translate(5%,7%) scale(0.9); } 60%{ transform:translate(5%,7%) scale(0.9); } }
@keyframes handfade{ from{ opacity:0; } to{ opacity:1; } }

.taphand.swipe img{ animation:handswipe 1.5s infinite ease-in-out; }
@keyframes handswipe{
  0%{ transform:translate(0,0); opacity:0; } 14%{ opacity:1; }
  82%{ transform:translate(var(--dx,-40px), var(--dy,0)); opacity:1; }
  100%{ transform:translate(var(--dx,-40px), var(--dy,0)); opacity:0; }
}

.taphand.drag img{ animation:handdrag 2.3s infinite ease-in-out; }
@keyframes handdrag{
  0%{ transform:translate(0,0) scale(1); opacity:0; }
  10%{ transform:translate(0,0) scale(0.88); opacity:1; }
  62%{ transform:translate(var(--dx,0), var(--dy,0)) scale(0.88); opacity:1; }
  76%{ transform:translate(var(--dx,0), var(--dy,0)) scale(1); opacity:1; }
  100%{ transform:translate(var(--dx,0), var(--dy,0)) scale(1); opacity:0; }
}

/* Respect reduced-motion preference — game logic runs on independent JS
   timers, so shortening these purely decorative CSS animations is safe. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}