/* =========================================================
   STRIGOI WATCH — Visual system
   Warm amber safety · cold blue threat · high contrast
   ========================================================= */

:root {
  --bg: #05040a;
  --bg-deep: #020108;
  --amber: #e8a84a;
  --amber-hot: #ffd27a;
  --amber-dim: #8a5a22;
  --gold: #f0c36a;
  --cold: #6b7cff;
  --cold-deep: #2a2f6b;
  --violet: #8b4d9e;
  --danger: #c43c5c;
  --danger-hot: #ff5a7a;
  --wood: #3a2416;
  --wood-light: #5c3a24;
  --wood-edge: #1a0e08;
  --text: #f2e6d0;
  --text-dim: #9a8a72;
  --safe-glow: rgba(232, 168, 74, 0.45);
  --threat-glow: rgba(107, 124, 255, 0.4);
  --font-display: "Cinzel", "Palatino Linotype", serif;
  --font-body: "Spectral", Georgia, serif;
  --radius: 14px;
  --hud-h: 72px;
  --controls-h: 118px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background: #020108;
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Play column stays centered; art is full browser, not only 520px */
#app {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: transparent;
  overflow: hidden;
}

/* —— Full-viewport castle / strigoi atmosphere —— */
.bg-art {
  pointer-events: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}

.bg-art-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("assets/bg-strigoi.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(0.72) brightness(0.58) contrast(1.06);
  transform: scale(1.02);
  animation: bg-drift 56s ease-in-out infinite alternate;
}

/* Light dim — keep sides of castle readable on laptop */
.bg-art-dim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 1, 8, 0.4) 0%, rgba(2, 1, 8, 0.22) 45%, rgba(2, 1, 8, 0.55) 100%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(30, 14, 8, 0.35) 0%, transparent 55%);
}

/*
 * Soft stage only behind the ~520px play column.
 * On wide screens the castle shows fully left/right.
 */
.bg-art-center-clear {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse min(520px, 92vw) 70% at 50% 48%,
    rgba(2, 1, 8, 0.78) 0%,
    rgba(2, 1, 8, 0.45) 38%,
    rgba(2, 1, 8, 0.12) 58%,
    transparent 72%
  );
}

@keyframes bg-drift {
  from { transform: scale(1.02) translate(0, 0); }
  to { transform: scale(1.05) translate(-0.8%, 0.5%); }
}

/* —— Ambient (full viewport, under UI) —— */
.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 2;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: grain-shift 0.4s steps(2) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

.vignette {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    ellipse 85% 75% at 50% 45%,
    transparent 30%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0.72) 100%
  );
}

#smoke {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.18;
}

/* Gameplay: slightly stronger center stage only */
body:has(#screen-game.active) .bg-art-center-clear {
  background: radial-gradient(
    ellipse min(520px, 94vw) 72% at 50% 46%,
    rgba(2, 1, 8, 0.86) 0%,
    rgba(2, 1, 8, 0.5) 40%,
    rgba(2, 1, 8, 0.15) 60%,
    transparent 75%
  );
}

body:has(#screen-game.active) .bg-art-image {
  filter: saturate(0.62) brightness(0.48) contrast(1.08);
}

body:has(#screen-title.active) .bg-art-image {
  filter: saturate(0.78) brightness(0.64) contrast(1.05);
}

/* Wide laptop: show more of the castle on the sides */
@media (min-width: 900px) {
  .bg-art-image {
    background-size: cover;
    background-position: center 35%;
    filter: saturate(0.8) brightness(0.62) contrast(1.05);
  }

  .bg-art-dim {
    background:
      linear-gradient(180deg, rgba(2, 1, 8, 0.28) 0%, rgba(2, 1, 8, 0.12) 45%, rgba(2, 1, 8, 0.4) 100%);
  }

  .bg-art-center-clear {
    background: radial-gradient(
      ellipse 480px 68% at 50% 48%,
      rgba(2, 1, 8, 0.72) 0%,
      rgba(2, 1, 8, 0.35) 42%,
      transparent 70%
    );
  }

  .vignette {
    background: radial-gradient(
      ellipse 70% 80% at 50% 45%,
      transparent 25%,
      rgba(0, 0, 0, 0.25) 60%,
      rgba(0, 0, 0, 0.55) 100%
    );
  }
}

/* —— Screens —— */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen.active {
  opacity: 1;
  visibility: visible;
}

.screen[hidden] { display: none !important; }

/* —— Title —— */
#screen-title {
  justify-content: flex-start;
  padding: max(1rem, env(safe-area-inset-top)) 0 max(1.25rem, env(safe-area-inset-bottom));
}

.title-door {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.28;
  filter: blur(1.5px) brightness(0.55);
  z-index: 0;
  pointer-events: none;
}

.title-frame {
  width: min(72vw, 280px);
  height: min(58vh, 380px);
  transform: scale(0.95);
}

.title-candle {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 48px;
}

.title-candle .wax {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 36px;
  background: linear-gradient(90deg, #c9a06a, #f5e0b8 45%, #b8894a);
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 0 24px var(--safe-glow);
}

.title-candle .flame {
  position: absolute;
  bottom: 34px;
  left: 50%;
  width: 16px;
  height: 26px;
  margin-left: -8px;
  background: radial-gradient(ellipse at 50% 80%, #fff6c8 0%, #ffb040 35%, #e85a20 70%, transparent 100%);
  border-radius: 50% 50% 40% 40%;
  animation: flame-flicker 0.18s ease-in-out infinite alternate;
  filter: blur(0.3px);
}

.title-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 1.25rem 1.15rem 1.4rem;
  margin: 0.5rem 1rem;
  width: min(100% - 2rem, 380px);
  max-width: 380px;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(12, 8, 18, 0.96), rgba(4, 2, 10, 0.98));
  border: 1px solid rgba(154, 138, 114, 0.35);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 0 40px rgba(232, 168, 74, 0.06);
}

.title-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c4a06a;
  margin-bottom: 0.5rem;
}

.logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.85rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow:
    0 0 24px var(--safe-glow),
    0 2px 0 var(--wood-edge);
}

.logo span {
  display: block;
  font-weight: 400;
  font-size: 0.72em;
  letter-spacing: 0.22em;
  color: var(--text);
  margin-top: 0.12em;
}

.tagline {
  margin: 0.75rem 0 1rem;
  font-size: 0.95rem;
  font-style: italic;
  color: #c8b89a;
  line-height: 1.4;
}

.hint-keys {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #a89880;
  line-height: 1.35;
}

.high-score-line {
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--amber);
  min-height: 1.1em;
  line-height: 1.35;
}

/* —— Buttons —— */
.btn-primary {
  appearance: none;
  border: 1px solid rgba(240, 195, 106, 0.7);
  background: linear-gradient(180deg, #6a4218 0%, #3a220c 100%);
  color: #ffe2a0;
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.45) inset,
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(232, 168, 74, 0.18);
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s, background 0.2s, filter 0.15s;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #8a5520 0%, #4a2c10 100%);
  filter: brightness(1.06);
}

.btn-primary:active { transform: scale(0.97); }

.btn-primary.pulse {
  animation: pulse-glow 2.4s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 18px rgba(232, 168, 74, 0.2); }
  50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 28px rgba(232, 168, 74, 0.4); }
}

.btn-ghost {
  appearance: none;
  background: rgba(20, 14, 28, 0.85);
  border: 1px solid rgba(154, 138, 114, 0.35);
  color: #d0c4b0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-top: 0.75rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}

.btn-ghost:hover {
  color: var(--text);
  border-color: rgba(232, 168, 74, 0.45);
  background: rgba(40, 28, 16, 0.9);
}

/* —— Night intro —— */
#screen-night {
  background: rgba(2, 1, 8, 0.92);
  z-index: 40;
}

.night-card {
  text-align: center;
  animation: night-in 0.7s var(--ease-out) both;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  background: rgba(6, 4, 12, 0.96);
  border: 1px solid rgba(154, 138, 114, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  max-width: min(90vw, 320px);
}

@keyframes night-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

.night-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}

#night-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 48px var(--safe-glow);
  letter-spacing: 0.08em;
}

.night-flavor {
  margin-top: 0.85rem;
  font-style: italic;
  color: var(--text-dim);
  font-size: 1rem;
  max-width: 260px;
}

/* —— HUD —— */
.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  padding: max(0.55rem, env(safe-area-inset-top)) 0.75rem 0.65rem;
  gap: 0.4rem 0.5rem;
  background: linear-gradient(180deg, rgba(2, 1, 8, 0.92) 0%, rgba(2, 1, 8, 0.75) 70%, transparent 100%);
  min-height: calc(var(--hud-h) + env(safe-area-inset-top));
  box-sizing: border-box;
}

.hud-left {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
  min-width: 0;
}

.hud-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
}

.hud-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  max-width: 42vw;
}

.hearts {
  display: flex;
  gap: 0.3rem;
}

.heart {
  width: 22px;
  height: 22px;
  position: relative;
  filter: drop-shadow(0 0 6px rgba(232, 168, 74, 0.5));
  transition: transform 0.25s var(--ease-snap), opacity 0.3s, filter 0.3s;
}

.heart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--amber);
  clip-path: path("M12 20.5C12 20.5 2 13.5 2 7.5C2 4.5 4.2 2.5 7 2.5C9 2.5 10.5 3.5 12 5.2C13.5 3.5 15 2.5 17 2.5C19.8 2.5 22 4.5 22 7.5C22 13.5 12 20.5 12 20.5Z");
  transform: scale(0.95);
}

.heart.lost {
  opacity: 0.25;
  filter: grayscale(1) drop-shadow(none);
  transform: scale(0.85);
}

.heart.shake {
  animation: heart-lose 0.45s var(--ease-out);
}

@keyframes heart-lose {
  0% { transform: scale(1.2); filter: drop-shadow(0 0 12px var(--danger-hot)); }
  40% { transform: scale(0.7) rotate(-12deg); }
  100% { transform: scale(0.85); }
}

.streak-pill {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #2a1a08;
  border: 1px solid rgba(232, 168, 74, 0.55);
  color: #ffe2a0;
  animation: streak-pop 0.35s var(--ease-snap);
}

@keyframes streak-pop {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.night-badge {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8dcc8;
  border: 1px solid rgba(154, 138, 114, 0.45);
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(8, 6, 14, 0.92);
  white-space: nowrap;
}

.score-label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #b0a090;
}

.score-value {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: transform 0.2s var(--ease-snap);
  line-height: 1.1;
}

.score-value.bump { animation: score-bump 0.3s var(--ease-snap); }

@keyframes score-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); color: var(--amber-hot); }
  100% { transform: scale(1); }
}

/* —— Stage / Door —— */
#screen-game {
  justify-content: stretch;
  padding-bottom: calc(var(--controls-h) + env(safe-area-inset-bottom));
  padding-top: var(--hud-h);
}

.stage {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  padding: 0.5rem 1rem 0;
}

.door-frame {
  position: relative;
  width: min(86vw, 340px);
  height: min(52vh, 420px);
  max-height: calc(100% - 90px);
  border-radius: 8px 8px 4px 4px;
  background:
    linear-gradient(180deg, rgba(20, 10, 5, 0.2), transparent 30%),
    radial-gradient(ellipse 70% 60% at 50% 55%, rgba(90, 50, 15, 0.45) 0%, transparent 70%),
    linear-gradient(180deg, #0a0610 0%, #120a08 40%, #0c0814 100%);
  box-shadow:
    0 0 0 10px var(--wood),
    0 0 0 12px var(--wood-edge),
    0 0 0 18px var(--wood-light),
    0 0 0 20px var(--wood-edge),
    0 24px 60px rgba(0, 0, 0, 0.7),
    inset 0 0 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(232, 168, 74, 0.08);
  overflow: hidden;
}

.door-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid rgba(90, 58, 36, 0.6);
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 28px,
      rgba(90, 58, 36, 0.08) 28px,
      rgba(90, 58, 36, 0.08) 30px
    );
  mix-blend-mode: soft-light;
}

.door-wood {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 6px,
    rgba(60, 36, 20, 0.15) 6px,
    rgba(60, 36, 20, 0.15) 7px
  );
}

.garlic {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 70px;
  height: 36px;
  background:
    radial-gradient(circle at 20% 50%, #e8dcc8 0 8px, transparent 9px),
    radial-gradient(circle at 40% 55%, #d8c8a8 0 9px, transparent 10px),
    radial-gradient(circle at 60% 48%, #e0d4b8 0 8px, transparent 9px),
    radial-gradient(circle at 80% 52%, #c8b898 0 7px, transparent 8px),
    linear-gradient(180deg, transparent 40%, rgba(100, 80, 40, 0.5) 70%, transparent);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  opacity: 0.85;
}

.garlic::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  background: #5a4030;
  box-shadow: -10px 4px 0 -0.5px #4a3020, 10px 3px 0 -0.5px #4a3020, -18px 8px 0 -0.5px #4a3020, 18px 7px 0 -0.5px #4a3020;
}

.cross-carving {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 18px;
  height: 28px;
  opacity: 0.35;
}

.cross-carving::before,
.cross-carving::after {
  content: "";
  position: absolute;
  background: var(--amber-dim);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(232, 168, 74, 0.3);
}

.cross-carving::before {
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  margin-left: -1.5px;
}

.cross-carving::after {
  top: 7px;
  left: 0;
  width: 100%;
  height: 3px;
}

.threshold-glow {
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 40%;
  background: radial-gradient(ellipse at 50% 100%, rgba(232, 168, 74, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: light-breathe 3.2s ease-in-out infinite;
}

@keyframes light-breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* —— Visitor —— */
.visitor-slot {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6%;
}

.visitor {
  position: relative;
  width: 150px;
  height: 270px;
  transform-origin: 50% 100%;
  opacity: 0;
  will-change: transform, opacity, filter;
}

/* —— Entrances: WALK vs GLIDE must read in <0.5s —— */

/* WALK: comes from the side with clear foot-fall bobs (weight on ground) */
.visitor.enter-walk {
  opacity: 0;
  transform: translateX(-72px) translateY(6px) scale(0.96);
  transition: none;
}

.visitor.enter-walk.visible {
  opacity: 1;
  animation: walk-in 0.75s cubic-bezier(0.33, 0.9, 0.35, 1) both;
}

.visitor.enter-walk.visible .v-shadow {
  animation: walk-shadow 0.75s ease-out both;
}

.visitor.enter-walk.visible .svg-leg.left {
  animation: walk-step-l 0.75s ease-in-out both;
}

.visitor.enter-walk.visible .svg-leg.right {
  animation: walk-step-r 0.75s ease-in-out both;
}

@keyframes walk-in {
  0% {
    opacity: 0.35;
    transform: translateX(-72px) translateY(8px) scale(0.95);
    filter: brightness(0.8);
  }
  /* step 1 — lift */
  18% {
    opacity: 0.85;
    transform: translateX(-48px) translateY(0px) scale(0.97);
  }
  /* plant */
  28% {
    transform: translateX(-36px) translateY(7px) scale(0.98);
  }
  /* step 2 — lift */
  48% {
    transform: translateX(-16px) translateY(-1px) scale(0.99);
  }
  /* plant */
  58% {
    transform: translateX(-6px) translateY(6px) scale(1);
  }
  /* last half-step settle */
  78% {
    transform: translateX(3px) translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
    filter: none;
  }
}

@keyframes walk-shadow {
  0% { transform: translateX(-40px) scaleX(0.85); opacity: 0.4; }
  28% { transform: translateX(-20px) scaleX(1.05); opacity: 0.7; }
  58% { transform: translateX(-4px) scaleX(1.1); opacity: 0.85; }
  100% { transform: none; opacity: 1; }
}

@keyframes walk-step-l {
  0%, 100% { transform: translate(36px, 148px); }
  18% { transform: translate(36px, 144px) rotate(-8deg); }
  28% { transform: translate(36px, 150px) rotate(2deg); }
  48% { transform: translate(36px, 145px) rotate(-6deg); }
  58% { transform: translate(36px, 150px) rotate(0deg); }
}

@keyframes walk-step-r {
  0%, 100% { transform: translate(74px, 148px); }
  18% { transform: translate(74px, 150px) rotate(4deg); }
  28% { transform: translate(74px, 145px) rotate(-8deg); }
  48% { transform: translate(74px, 150px) rotate(3deg); }
  58% { transform: translate(74px, 144px) rotate(-5deg); }
}

/* GLIDE: no footsteps — rises smooth from mist, floats, feet never plant */
.visitor.enter-glide {
  opacity: 0;
  transform: translateY(42px) scale(0.88);
  filter: blur(2.5px) brightness(0.55);
  transition: none;
}

.visitor.enter-glide.visible {
  opacity: 1;
  /* entrance then ongoing float — must be one shorthand so float doesn't cancel glide-in */
  animation:
    glide-in 0.95s cubic-bezier(0.22, 0.05, 0.2, 1) both,
    uncanny-float 1.8s ease-in-out 0.95s infinite;
}

.visitor.enter-glide.visible .v-shadow {
  animation: glide-shadow 0.95s ease-out both;
}

.visitor.enter-glide.visible .svg-legs {
  /* legs hang stiff — no step cycle */
  animation: none !important;
}

.visitor.enter-glide.visible .svg-leg {
  animation: none !important;
}

@keyframes glide-in {
  0% {
    opacity: 0;
    transform: translateY(48px) scale(0.86);
    filter: blur(3px) brightness(0.45);
  }
  /* constant height rise — zero vertical bob */
  40% {
    opacity: 0.75;
    transform: translateY(18px) scale(0.94);
    filter: blur(1.2px) brightness(0.75);
  }
  70% {
    opacity: 1;
    transform: translateY(6px) scale(0.99);
    filter: blur(0.3px) brightness(0.95);
  }
  /* settle still hovering slightly above “planted” */
  100% {
    opacity: 1;
    transform: translateY(-3px) scale(1);
    filter: none;
  }
}

@keyframes glide-shadow {
  /* shadow stays soft and large — not under the feet like a walk */
  0% { opacity: 0; transform: scaleX(1.4) translateY(6px); filter: blur(2px); }
  50% { opacity: 0.35; transform: scaleX(1.25) translateY(4px); }
  100% { opacity: 0.45; transform: scaleX(1.15) translateY(3px); filter: blur(1px); }
}

/* Ongoing: walkers stay grounded; gliders keep floating */
.visitor.enter-walk.visible:not(.leaving-bless):not(.leaving-banish):not(.afterimage):not(.revealing):not(.tell-gait) {
  animation: walk-in 0.75s cubic-bezier(0.33, 0.9, 0.35, 1) both,
    walk-idle 2.4s ease-in-out 0.75s infinite;
}

@keyframes walk-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1px); }
}

.visitor.enter-jitter {
  opacity: 0;
  transform: translate(10px, 14px) scale(0.92);
  transition: none;
}

.visitor.enter-jitter.visible {
  opacity: 1;
  animation: jitter-in 0.5s steps(4) both;
}

@keyframes jitter-in {
  0% { transform: translate(-10px, 14px) scale(0.92); opacity: 0.25; filter: hue-rotate(10deg); }
  25% { transform: translate(8px, 6px) scale(0.97); opacity: 0.7; }
  50% { transform: translate(-5px, 2px) scale(1.02); opacity: 0.9; }
  75% { transform: translate(3px, 0); }
  100% { transform: none; opacity: 1; filter: none; }
}

/* —— Exit: Bless = welcomed inside · Banish = driven into the night —— */
.visitor.leaving-bless,
.visitor.leaving-banish {
  pointer-events: none;
  transition: none !important;
  z-index: 6;
}

/*
 * Correct bless: visitor APPROACHES and walks INTO the home
 * (toward camera / into doorway) — not flung away like banish.
 */
.visitor.leaving-bless {
  animation: leave-approach-enter 1.05s cubic-bezier(0.33, 0.12, 0.2, 1) forwards !important;
  transform-origin: 50% 100%;
  z-index: 7;
}

.visitor.leaving-bless .svg-legs,
.visitor.leaving-bless .v-legs {
  animation: leave-approach-steps 1.05s ease-in-out forwards;
}

.visitor.leaving-bless .v-shadow {
  animation: leave-approach-shadow 1.05s ease-in forwards;
}

.visitor.leaving-bless .v-svg,
.visitor.leaving-bless .svg-torso,
.visitor.leaving-bless .svg-head {
  animation: leave-approach-warm 1.05s ease-out forwards;
}

@keyframes leave-approach-enter {
  /* Idle at threshold */
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    filter: brightness(1) sepia(0) blur(0);
  }
  /* Step closer — grow (approaching you / the door mouth) */
  22% {
    opacity: 1;
    transform: translate(0, 10px) scale(1.12);
    filter: brightness(1.12) sepia(0.12) blur(0);
  }
  /* Another step in — still larger, filling the frame */
  42% {
    opacity: 1;
    transform: translate(0, 18px) scale(1.28);
    filter: brightness(1.28) sepia(0.22) blur(0);
  }
  /* Cross the lintel — pull into warm depth of the house */
  68% {
    opacity: 0.75;
    transform: translate(0, 8px) scale(1.45);
    filter: brightness(1.55) sepia(0.4) blur(0.8px);
  }
  /* Swallowed by interior light/dark */
  88% {
    opacity: 0.25;
    transform: translate(0, 4px) scale(1.65);
    filter: brightness(1.9) sepia(0.55) blur(2.5px);
  }
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1.85);
    filter: brightness(2.2) sepia(0.6) blur(5px);
  }
}

@keyframes leave-approach-steps {
  0% { transform: none; }
  18% { transform: translateY(-3px); }
  36% { transform: translateY(1px) translateX(2px); }
  54% { transform: translateY(-4px) translateX(-2px); }
  72% { transform: translateY(0) translateX(1px); }
  100% { transform: translateY(2px) scale(1.05); }
}

@keyframes leave-approach-shadow {
  0% { opacity: 1; transform: scaleX(1) translateY(0); }
  30% { opacity: 0.85; transform: scaleX(1.15) translateY(4px); }
  60% { opacity: 0.45; transform: scaleX(1.35) translateY(10px); }
  100% { opacity: 0; transform: scaleX(1.6) translateY(16px); }
}

@keyframes leave-approach-warm {
  0% { filter: none; }
  50% { filter: brightness(1.15); }
  100% { filter: brightness(1.4) sepia(0.25); }
}

/* Strigoi recoils, tears into mist, hurled into the night */
.visitor.leaving-banish {
  animation: leave-banish-flee 0.95s cubic-bezier(0.55, 0.05, 0.7, 0.2) forwards !important;
  transform-origin: 50% 40%;
}

.visitor.leaving-banish .v-svg,
.visitor.leaving-banish .svg-torso,
.visitor.leaving-banish .svg-head {
  animation: leave-banish-shatter 0.95s ease-in forwards;
}

.visitor.leaving-banish .v-shadow {
  animation: leave-banish-shadow 0.5s ease-in forwards;
}

.visitor.leaving-banish .v-aura {
  opacity: 1 !important;
  animation: leave-banish-aura 0.95s ease-out forwards;
}

@keyframes leave-banish-flee {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: brightness(1) hue-rotate(0deg) blur(0);
  }
  12% {
    opacity: 1;
    transform: translate(-10px, 4px) scale(0.97) rotate(-3deg);
    filter: brightness(0.9) hue-rotate(10deg);
  }
  28% {
    opacity: 1;
    transform: translate(14px, -6px) scale(1.04) rotate(4deg);
    filter: brightness(1.3) hue-rotate(20deg) saturate(1.3);
  }
  48% {
    opacity: 0.75;
    transform: translate(-36px, -18px) scale(0.88) rotate(-12deg) skewX(-6deg);
    filter: brightness(0.7) hue-rotate(40deg) blur(1px) contrast(1.2);
  }
  72% {
    opacity: 0.35;
    transform: translate(70px, -40px) scale(0.55) rotate(18deg) skewX(10deg);
    filter: brightness(1.4) hue-rotate(80deg) blur(3px) saturate(0.4);
  }
  100% {
    opacity: 0;
    transform: translate(120px, -70px) scale(0.2) rotate(28deg);
    filter: brightness(2) hue-rotate(120deg) blur(8px) saturate(0);
  }
}

@keyframes leave-banish-shatter {
  0% { opacity: 1; filter: none; }
  40% { opacity: 1; filter: contrast(1.3) brightness(1.2); }
  70% { opacity: 0.5; filter: contrast(1.6) brightness(0.6) blur(1px); }
  100% { opacity: 0; filter: blur(4px); }
}

@keyframes leave-banish-shadow {
  0% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.6) translateY(6px); }
}

@keyframes leave-banish-aura {
  0% { opacity: 0.4; transform: scale(1); }
  35% { opacity: 0.9; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.9); }
}

/* Door reacts to judgment */
.door-frame.fx-welcome::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(255, 210, 120, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255, 180, 80, 0.2) 0%, transparent 55%);
  animation: door-welcome-glow 0.9s var(--ease-out) forwards;
}

.door-frame.fx-welcome .threshold-glow {
  animation: door-welcome-threshold 0.9s ease-out forwards;
}

@keyframes door-welcome-glow {
  0% { opacity: 0; }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes door-welcome-threshold {
  0% { opacity: 0.75; transform: scaleY(1); }
  40% { opacity: 1; transform: scaleY(1.35); filter: brightness(1.5); }
  100% { opacity: 0.75; transform: scaleY(1); filter: none; }
}

.door-frame.fx-banish::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 70% 40%, rgba(100, 160, 255, 0.35) 0%, transparent 65%),
    linear-gradient(105deg, transparent 20%, rgba(160, 200, 255, 0.2) 50%, transparent 80%);
  animation: door-banish-gust 0.95s var(--ease-out) forwards;
}

.door-frame.fx-banish .threshold-glow {
  animation: door-banish-threshold 0.95s ease-out forwards;
}

@keyframes door-banish-gust {
  0% { opacity: 0; transform: translateX(-20%); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateX(30%); }
}

@keyframes door-banish-threshold {
  0%, 100% { opacity: 0.75; filter: none; }
  30% { opacity: 0.2; filter: brightness(0.4) hue-rotate(40deg); }
  55% { opacity: 1; filter: brightness(1.2) hue-rotate(20deg); }
}

/* Mist wisps on banish (slot-level) */
.visitor-slot.fx-banish-mist::before,
.visitor-slot.fx-banish-mist::after {
  content: "";
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  background: radial-gradient(circle, rgba(140, 190, 255, 0.45) 0%, transparent 70%);
  filter: blur(4px);
  animation: mist-wisp 0.9s ease-out forwards;
}

.visitor-slot.fx-banish-mist::after {
  width: 56px;
  height: 56px;
  margin-left: -28px;
  animation-delay: 0.06s;
  animation-name: mist-wisp-2;
}

@keyframes mist-wisp {
  0% { opacity: 0.9; transform: translate(0, 0) scale(0.6); }
  100% { opacity: 0; transform: translate(90px, -80px) scale(2.2); }
}

@keyframes mist-wisp-2 {
  0% { opacity: 0.7; transform: translate(0, 0) scale(0.5); }
  100% { opacity: 0; transform: translate(110px, -50px) scale(2.6); }
}

/* Warm motes pulled inward as they approach / enter (not flung outward) */
.visitor-slot.fx-bless-motes::before,
.visitor-slot.fx-bless-motes::after {
  content: "";
  position: absolute;
  bottom: 28%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 8;
  background: rgba(255, 220, 140, 0.9);
  box-shadow: 0 0 12px rgba(255, 200, 100, 0.85);
  animation: bless-mote-in 1.05s ease-out forwards;
}

.visitor-slot.fx-bless-motes::after {
  width: 7px;
  height: 7px;
  margin-left: 10px;
  bottom: 34%;
  animation-delay: 0.1s;
  animation-name: bless-mote-in-2;
}

@keyframes bless-mote-in {
  0% { opacity: 0; transform: translate(-30px, 20px) scale(0.4); }
  35% { opacity: 1; transform: translate(-8px, 8px) scale(1); }
  100% { opacity: 0; transform: translate(0, -10px) scale(1.8); }
}

@keyframes bless-mote-in-2 {
  0% { opacity: 0; transform: translate(28px, 24px) scale(0.3); }
  40% { opacity: 1; transform: translate(10px, 6px) scale(1); }
  100% { opacity: 0; transform: translate(4px, -8px) scale(1.6); }
}

/* Door mouth opens with warm depth on bless */
.door-frame.fx-welcome .threshold-glow {
  z-index: 5;
}

.visitor.slow-mo {
  animation: slow-breathe 1.2s ease-in-out infinite;
}

@keyframes slow-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}

/* —— Ground: light pool + shadow (shared system; tell = disable/offset) —— */
.v-light-pool {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 100px;
  height: 22px;
  margin-left: -50px;
  background: radial-gradient(ellipse, rgba(232, 168, 74, 0.22) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}

.v-shadow {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 96px;
  height: 20px;
  margin-left: -48px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.65) 0%, transparent 72%);
  z-index: 1;
  transition: opacity 0.15s, transform 0.15s;
}

.visitor.tell-no-shadow .v-shadow {
  opacity: 0 !important;
  visibility: hidden;
}

/* Empty bright floor — loud “missing shadow” read */
.visitor.tell-no-shadow .v-light-pool {
  width: 132px;
  height: 32px;
  margin-left: -66px;
  background: radial-gradient(ellipse, rgba(255, 236, 180, 0.85) 0%, rgba(255, 200, 100, 0.35) 40%, transparent 75%);
  box-shadow:
    0 0 28px rgba(255, 210, 120, 0.65),
    0 0 48px rgba(255, 180, 80, 0.35);
  animation: pool-pulse 0.9s ease-in-out infinite;
}

.visitor.tell-no-shadow::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 70px;
  height: 14px;
  margin-left: -35px;
  border: 1.5px dashed rgba(255, 220, 150, 0.45);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: pool-pulse 0.9s ease-in-out infinite;
}

.visitor.light-cold .v-light-pool {
  background: radial-gradient(ellipse, rgba(140, 210, 240, 0.45) 0%, transparent 70%);
  box-shadow: 0 0 20px rgba(100, 180, 220, 0.35);
}

@keyframes pool-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Dust kick — human rightness */
.v-dust {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 80px;
  height: 20px;
  margin-left: -40px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}

.visitor.has-dust .v-dust { opacity: 1; }

.v-dust span {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210, 180, 120, 0.75), transparent 70%);
  filter: blur(1px);
  animation: dust-puff 1.4s ease-out infinite;
}

.v-dust span:nth-child(1) { left: 12px; animation-delay: 0s; }
.v-dust span:nth-child(2) { left: 36px; animation-delay: 0.15s; width: 11px; height: 11px; }
.v-dust span:nth-child(3) { left: 56px; animation-delay: 0.3s; }

@keyframes dust-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(6px, -14px) scale(1.3); }
}

/* —— Layered SVG body —— */
.v-svg {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 148px;
  height: 260px;
  margin-left: -74px;
  z-index: 4;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* Warm rim on living villagers (contrast vs cold strigoi) */
.visitor.is-human:not(.tell-cold-aura):not(.tell-wrongness) .v-svg {
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(232, 168, 74, 0.28));
}

.v-aura {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 140px;
  height: 200px;
  margin-left: -70px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}

/* Cold light — strong blue-green cast (peripheral read) */
.visitor.tell-cold-aura .v-aura,
.visitor.tell-wrongness .v-aura {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(140, 230, 255, 0.5) 0%,
    rgba(80, 140, 200, 0.28) 40%,
    transparent 72%);
  animation: cold-pulse 1.1s ease-in-out infinite;
}

.visitor.tell-cold-aura .v-svg,
.visitor.tell-wrongness .v-svg {
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 18px rgba(100, 200, 255, 0.55))
    drop-shadow(0 0 32px rgba(60, 140, 200, 0.35))
    saturate(0.85) hue-rotate(12deg);
}

.visitor.tell-cold-aura .svg-eye-hl,
.visitor.tell-wrongness .svg-eye-hl {
  filter: drop-shadow(0 0 4px #80f0ff);
}

.visitor.light-cold .svg-rim {
  stroke: rgba(160, 230, 255, 0.85) !important;
  stroke-width: 3.2px;
}

@keyframes cold-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* Walkers who also got a glide tell (shouldn't) or wrongness without enter-glide */
.visitor.tell-glide.visible:not(.enter-glide):not(.leaving-bless):not(.leaving-banish):not(.afterimage):not(.revealing),
.visitor.tell-wrongness.visible:not(.enter-glide):not(.leaving-bless):not(.leaving-banish):not(.afterimage):not(.revealing) {
  animation: uncanny-float 1.8s ease-in-out 0.3s infinite;
}

.visitor.enter-glide.visible:not(.leaving-bless):not(.leaving-banish) .v-shadow,
.visitor.tell-glide.visible:not(.leaving-bless):not(.leaving-banish) .v-shadow,
.visitor.tell-wrongness.visible:not(.leaving-bless):not(.leaving-banish) .v-shadow {
  opacity: 0.4;
  transform: scaleX(1.12) translateY(2px);
  filter: blur(1px);
}

@keyframes uncanny-float {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(-16px); }
}

/* Gait — bigger limp so it reads at a glance */
.visitor.tell-gait .svg-torso {
  animation: limp 0.65s ease-in-out infinite;
  transform-origin: 55px 100px;
}

.visitor.tell-gait .svg-leg.left {
  animation: limp-leg-l 0.65s ease-in-out infinite;
}

.visitor.tell-gait .svg-leg.right {
  animation: limp-leg-r 0.65s ease-in-out infinite;
}

.visitor.tell-gait .v-svg {
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(-3px 0 0 rgba(180, 100, 80, 0.15));
}

@keyframes limp {
  0%, 100% { transform: rotate(var(--shoulder-tilt, 0deg)) translateX(0); }
  25% { transform: rotate(calc(var(--shoulder-tilt, 0deg) - 8deg)) translateX(-6px); }
  75% { transform: rotate(calc(var(--shoulder-tilt, 0deg) + 5deg)) translateX(4px); }
}

@keyframes limp-leg-l {
  0%, 100% { transform: translate(36px, 148px); }
  30% { transform: translate(32px, 154px) rotate(-12deg); }
  60% { transform: translate(38px, 146px) rotate(4deg); }
}

@keyframes limp-leg-r {
  0%, 100% { transform: translate(74px, 148px); }
  30% { transform: translate(78px, 144px) rotate(6deg); }
  60% { transform: translate(70px, 156px) rotate(14deg); }
}

/* Backwards feet — same boots, louder silhouette */
.visitor.tell-backwards-feet .svg-leg.left {
  transform: translate(36px, 148px) rotate(16deg) !important;
}

.visitor.tell-backwards-feet .svg-leg.right {
  transform: translate(74px, 148px) rotate(-16deg) !important;
}

.visitor.tell-backwards-feet .svg-foot {
  filter: drop-shadow(0 0 6px rgba(140, 180, 255, 0.65));
}

.visitor.tell-backwards-feet .svg-shin {
  fill: #1a1830 !important;
}

/* Human nod on head layer */
.visitor.has-nod .svg-head {
  animation: friendly-nod 2.8s ease-in-out infinite;
  transform-origin: 55px 48px;
}

@keyframes friendly-nod {
  0%, 70%, 100% { transform: rotate(var(--head-tilt, 0deg)); }
  78% { transform: rotate(calc(var(--head-tilt, 0deg) + 6deg)); }
  86% { transform: rotate(calc(var(--head-tilt, 0deg) - 2deg)); }
  92% { transform: rotate(calc(var(--head-tilt, 0deg) + 3deg)); }
}

/* Blink — eye whites scale; everyone blinks except stillness */
.visitor:not(.tell-stillness) .svg-eye-white {
  transform-origin: center;
  animation: blink-svg 3.6s ease-in-out infinite;
}

.visitor:not(.tell-stillness) .svg-eyes .svg-eye-white:last-of-type {
  animation-delay: 0.05s;
}

@keyframes blink-svg {
  0%, 88%, 100% { transform: scaleY(1); }
  90%, 93% { transform: scaleY(0.08); }
}

.visitor.tell-stillness .svg-eye-white,
.visitor.tell-stillness .svg-torso,
.visitor.tell-stillness .svg-head,
.visitor.tell-stillness .svg-hair {
  animation: none !important;
}

/* Stillness: frozen + slightly wax-like so “no life” reads vs breathing humans */
.visitor.tell-stillness {
  filter: contrast(1.12) saturate(0.75) brightness(0.95);
}

.visitor.tell-stillness .v-svg {
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45))
    contrast(1.1) saturate(0.7);
}

.visitor.tell-stillness .svg-eye-hl {
  opacity: 0.35;
}

/* Soft breathing on torso */
.visitor.is-human:not(.tell-stillness):not(.tell-gait) .svg-torso {
  animation: breathe-svg 3s ease-in-out infinite;
  transform-origin: 55px 120px;
}

.visitor.is-strigoi:not(.tell-stillness):not(.tell-gait):not(.tell-glide):not(.tell-wrongness) .svg-torso {
  animation: breathe-shallow-svg 4s ease-in-out infinite;
  transform-origin: 55px 120px;
}

@keyframes breathe-svg {
  0%, 100% { transform: rotate(var(--shoulder-tilt, 0deg)) scaleY(1); }
  50% { transform: rotate(var(--shoulder-tilt, 0deg)) scaleY(1.015) translateY(-1px); }
}

@keyframes breathe-shallow-svg {
  0%, 100% { transform: rotate(var(--shoulder-tilt, 0deg)) scaleY(1); }
  50% { transform: rotate(var(--shoulder-tilt, 0deg)) scaleY(1.005); }
}

/* Hair micro-sway for living (stillness freezes — subtle tell space) */
.visitor.is-human:not(.tell-stillness) .svg-hair {
  animation: hair-sway 3.8s ease-in-out infinite;
  transform-origin: 55px 50px;
}

@keyframes hair-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(1.5deg); }
}

/* Breath particles */
.v-breath {
  position: absolute;
  bottom: 175px;
  left: 58%;
  width: 48px;
  height: 36px;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
}

.visitor.has-breath .v-breath {
  opacity: 1;
  animation: breath-puff 2s ease-out infinite;
}

.visitor.tell-no-breath .v-breath {
  opacity: 0 !important;
  animation: none !important;
  visibility: hidden;
}

/* Humans: louder breath so “no breath” stands out by absence */
.visitor.is-human.has-breath .v-breath {
  transform: scale(1.15);
}

.v-breath span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  filter: blur(2px);
}

.visitor.breath-warm .v-breath span {
  background: radial-gradient(circle, rgba(255, 240, 210, 0.9), transparent 70%);
  box-shadow: 0 0 12px rgba(255, 220, 160, 0.55);
}

.visitor.breath-cold .v-breath span {
  background: radial-gradient(circle, rgba(160, 200, 230, 0.3), transparent 70%);
}

.v-breath span:nth-child(2) { left: 10px; animation-delay: 0.25s; width: 16px; height: 16px; }
.v-breath span:nth-child(3) { left: 20px; animation-delay: 0.5s; }

@keyframes breath-puff {
  0% { opacity: 0; transform: translate(0, 0) scale(0.55); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(20px, -26px) scale(1.55); }
}

/* Red herring flash — same lighting system, brief cold param */
.visitor.red-herring-flash .v-svg {
  filter:
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45))
    hue-rotate(25deg) saturate(0.85);
}

.visitor.red-herring-flash .v-aura {
  opacity: 0.55 !important;
  background: radial-gradient(ellipse at 50% 40%,
    rgba(120, 200, 220, 0.3) 0%, transparent 70%);
}

/* Fog / wind */
.fog-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(40, 50, 70, 0.55), transparent 30%, transparent 70%, rgba(40, 50, 70, 0.55)),
    radial-gradient(ellipse at 50% 60%, rgba(80, 90, 110, 0.35), transparent 60%);
  animation: fog-drift 4s ease-in-out infinite alternate;
}

@keyframes fog-drift {
  from { opacity: 0.65; transform: translateX(-4%); }
  to { opacity: 0.9; transform: translateX(4%); }
}

.wind-gust {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(200, 210, 255, 0.18) 45%, transparent 70%);
  animation: gust 0.7s var(--ease-out) forwards;
  opacity: 0;
}

.wind-gust.active {
  opacity: 1;
}

@keyframes gust {
  0% { transform: translateX(-40%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(40%); opacity: 0; }
}

/* —— Candle timer —— */
.candle-timer {
  position: relative;
  margin-top: 0.75rem;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 4;
}

.candle-body {
  position: relative;
  width: 22px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

.candle-wax {
  position: relative;
  width: 16px;
  height: 40px;
  background: linear-gradient(90deg, #8a6a40, #f0dcb0 40%, #c9a060 70%, #7a5830);
  border-radius: 3px 3px 2px 2px;
  overflow: hidden;
  box-shadow:
    0 0 20px rgba(232, 168, 74, 0.35),
    inset 2px 0 4px rgba(255, 255, 255, 0.15),
    inset -2px 0 4px rgba(0, 0, 0, 0.2);
}

.candle-burn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(5, 4, 10, 0.92), rgba(20, 12, 8, 0.5));
  transition: none;
  z-index: 2;
}

.candle-burn::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, rgba(255, 180, 80, 0.5), transparent);
}

.candle-flame {
  position: absolute;
  bottom: 38px;
  left: 50%;
  width: 20px;
  height: 28px;
  margin-left: -10px;
  z-index: 3;
  transform-origin: 50% 100%;
  transition: transform 0.1s linear, opacity 0.15s;
}

.flame-outer {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 80%, #ffb040 0%, #e85020 50%, transparent 70%);
  border-radius: 50% 50% 40% 40%;
  filter: blur(1px);
  animation: flame-flicker 0.15s ease-in-out infinite alternate;
  opacity: 0.85;
}

.flame-core {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 8px;
  height: 14px;
  margin-left: -4px;
  background: radial-gradient(ellipse at 50% 70%, #fffef0, #ffe080 60%, transparent);
  border-radius: 50%;
  animation: flame-flicker 0.12s ease-in-out infinite alternate-reverse;
}

@keyframes flame-flicker {
  from { transform: scaleX(1) scaleY(1) rotate(-2deg); }
  to { transform: scaleX(0.9) scaleY(1.08) rotate(3deg); }
}

.candle-timer.urgent .candle-flame {
  animation: flame-panic 0.1s ease-in-out infinite alternate;
  filter: hue-rotate(-15deg) brightness(1.2);
}

.candle-timer.urgent .candle-wax {
  box-shadow: 0 0 28px rgba(255, 100, 60, 0.55), inset 2px 0 4px rgba(255, 255, 255, 0.15);
}

@keyframes flame-panic {
  from { transform: scale(1.05) rotate(-4deg); }
  to { transform: scale(0.92) rotate(5deg); }
}

.candle-timer.snuffed .candle-flame {
  opacity: 0;
  transform: scale(0.2) translateY(8px);
}

.candle-pool {
  width: 36px;
  height: 6px;
  margin-top: 2px;
  background: radial-gradient(ellipse, rgba(40, 24, 10, 0.8), transparent 70%);
  border-radius: 50%;
}

/* —— Feedback —— */
.flash {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.08s linear;
}

.flash.correct {
  background: radial-gradient(ellipse at center, rgba(232, 168, 74, 0.35), transparent 65%);
  opacity: 1;
  animation: flash-out 0.45s var(--ease-out) forwards;
}

.flash.wrong {
  background: radial-gradient(ellipse at center, rgba(180, 40, 80, 0.4), rgba(60, 20, 100, 0.25) 50%, transparent 70%);
  opacity: 1;
  animation: flash-out 0.55s var(--ease-out) forwards;
}

@keyframes flash-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.feedback-toast {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 48;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  max-width: min(92vw, 340px);
  overflow: hidden;
  text-overflow: ellipsis;
  animation: toast-in 0.7s var(--ease-out) forwards;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.feedback-toast.good {
  color: #ffe2a0;
  background: rgba(18, 10, 4, 0.95);
  border: 1px solid rgba(232, 168, 74, 0.65);
}

.feedback-toast.bad {
  color: #ffb0c0;
  background: rgba(28, 6, 12, 0.96);
  border: 1px solid rgba(196, 60, 92, 0.65);
}

.feedback-toast.sharp {
  color: var(--amber-hot);
  border-color: rgba(255, 210, 122, 0.75);
  box-shadow: 0 0 18px rgba(255, 180, 60, 0.25), 0 6px 20px rgba(0, 0, 0, 0.55);
}

@keyframes toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.9); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* —— Controls —— */
.controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  padding: 0.85rem 0.85rem calc(0.95rem + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(2, 1, 8, 0.96) 55%, rgba(2, 1, 8, 0.75) 85%, transparent);
}

.btn-action {
  appearance: none;
  border: none;
  border-radius: var(--radius);
  padding: 0.85rem 0.75rem 0.75rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-height: 88px;
  transition: transform 0.12s var(--ease-out), box-shadow 0.15s, filter 0.15s;
  position: relative;
  overflow: hidden;
}

.btn-action:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.btn-action:active:not(:disabled) {
  transform: scale(0.96);
}

.btn-action.bless {
  background: linear-gradient(165deg, #5a3a14 0%, #1e1208 100%);
  border: 1px solid rgba(240, 195, 106, 0.65);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(232, 168, 74, 0.15),
    inset 0 1px 0 rgba(255, 220, 150, 0.22);
  color: #ffe2a0;
}

.btn-action.bless:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-action.banish {
  background: linear-gradient(165deg, #2a2a5a 0%, #0c0a1c 100%);
  border: 1px solid rgba(140, 150, 230, 0.6);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.45),
    0 0 18px rgba(107, 124, 255, 0.12),
    inset 0 1px 0 rgba(180, 190, 255, 0.15);
  color: #d0d6ff;
}

.btn-action.banish:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-icon {
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.9;
  margin-bottom: 0.15rem;
}

.btn-label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

.btn-sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-style: italic;
  opacity: 0.65;
  letter-spacing: 0.02em;
}

/* —— Mistake lesson panel (learn before next visitor) —— */
.lesson-panel {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0.75rem calc(var(--controls-h) + 0.5rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(2, 1, 8, 0.35) 0%, rgba(2, 1, 8, 0.9) 50%);
  animation: night-in 0.35s var(--ease-out) both;
}

.lesson-panel[hidden] {
  display: none !important;
}

.lesson-card {
  width: min(100%, 380px);
  max-height: min(46vh, 360px);
  overflow-y: auto;
  text-align: left;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: 16px;
  background: #120a12;
  border: 1px solid rgba(196, 60, 92, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6) inset,
    0 16px 48px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(180, 40, 80, 0.15);
}

.lesson-card.fatal {
  border-color: rgba(140, 80, 200, 0.55);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5) inset,
    0 16px 48px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(120, 60, 180, 0.2);
}

.lesson-eyebrow {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--danger-hot);
  margin-bottom: 0.35rem;
}

.lesson-card.fatal .lesson-eyebrow {
  color: #c9a0e8;
}

.lesson-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.45rem;
  line-height: 1.25;
}

.lesson-summary {
  font-size: 0.92rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 0.65rem;
}

.lesson-tells {
  list-style: none;
  margin: 0 0 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lesson-tells li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(154, 138, 114, 0.3);
  font-size: 0.84rem;
  line-height: 1.3;
}

.lesson-tells .tell-badge {
  grid-row: 1 / span 2;
  align-self: center;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.4rem;
  border-radius: 6px;
  background: rgba(100, 160, 200, 0.2);
  border: 1px solid rgba(120, 190, 220, 0.45);
  color: #a8e0f0;
  white-space: nowrap;
}

.lesson-tells .tell-badge.human {
  background: rgba(232, 168, 74, 0.15);
  border-color: rgba(232, 168, 74, 0.45);
  color: var(--gold);
}

.lesson-tells .tell-name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.lesson-tells .tell-how {
  grid-column: 2;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.lesson-hint {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--amber);
  margin-bottom: 0.85rem;
  line-height: 1.35;
}

.lesson-card .btn-primary {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.8rem 1rem;
}

/* Visitor frozen in reveal mode */
.visitor.revealing {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.visitor.revealing .reveal-callout {
  position: absolute;
  z-index: 20;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.4rem;
  border-radius: 999px;
  background: rgba(8, 20, 32, 0.9);
  border: 1px solid rgba(120, 200, 230, 0.65);
  color: #b8f0ff;
  white-space: nowrap;
  box-shadow: 0 0 12px rgba(80, 180, 220, 0.35);
  pointer-events: none;
  animation: callout-pop 0.35s var(--ease-snap) both;
}

.visitor.revealing .reveal-callout.warm {
  background: rgba(28, 16, 4, 0.92);
  border-color: rgba(232, 168, 74, 0.6);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(232, 168, 74, 0.3);
}

@keyframes callout-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.door-frame.lesson-active {
  box-shadow:
    0 0 0 10px var(--wood),
    0 0 0 12px var(--wood-edge),
    0 0 0 18px var(--wood-light),
    0 0 0 20px var(--wood-edge),
    0 0 50px rgba(196, 60, 92, 0.25),
    inset 0 0 80px rgba(0, 0, 0, 0.55);
}

.controls.lesson-dim {
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* Short screens: title panel stays usable */
@media (max-height: 700px) {
  .title-content {
    padding: 1rem 1rem 1.1rem;
    margin: 0.35rem 0.75rem;
  }
  .logo {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  .tagline {
    font-size: 0.88rem;
    margin: 0.5rem 0 0.7rem;
  }
  .rep-detail,
  .daily-score,
  .hint-keys {
    font-size: 0.7rem;
  }
  .title-actions {
    gap: 0.45rem;
  }
  .btn-main {
    padding: 0.85rem 1.1rem 0.8rem;
  }
  .btn-main-label {
    font-size: 0.9rem;
  }
  .btn-primary,
  .btn-secondary {
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
  }
}

/* —— Game over —— */
#screen-over {
  background: rgba(2, 1, 8, 0.94);
  z-index: 40;
  padding: 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.over-card {
  text-align: center;
  max-width: 360px;
  width: calc(100% - 1.5rem);
  animation: night-in 0.6s var(--ease-out) both;
  margin: auto;
  padding: 1.15rem 1rem 1.25rem;
  border-radius: 16px;
  background: rgba(8, 4, 12, 0.96);
  border: 1px solid rgba(154, 138, 114, 0.3);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.fatal-lesson {
  text-align: left;
  margin-bottom: 1.1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: rgba(40, 12, 28, 0.55);
  border: 1px solid rgba(196, 60, 92, 0.4);
}

.fatal-lesson[hidden] { display: none !important; }

.fatal-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--danger-hot);
  margin-bottom: 0.35rem;
}

.fatal-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.fatal-body {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 0.55rem;
}

.fatal-lesson .lesson-tells {
  margin-bottom: 0;
}

.mistakes-log {
  text-align: left;
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(154, 138, 114, 0.22);
}

.mistakes-log[hidden] { display: none !important; }

.mistakes-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

.mistakes-log ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.mistakes-log li {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-dim);
  padding-left: 0.65rem;
  border-left: 2px solid rgba(196, 60, 92, 0.45);
}

.mistakes-log li.fatal-miss {
  border-left-color: var(--violet);
  color: var(--text);
}

.mistakes-log li strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 0.1rem;
}

.mistakes-log li em {
  font-style: normal;
  color: #a8d0e8;
}

.over-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 0.5rem;
}

.over-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  color: var(--text);
  margin-bottom: 1.5rem;
  letter-spacing: 0.04em;
}

.stats {
  list-style: none;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(154, 138, 114, 0.35);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.55);
}

.stats li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(154, 138, 114, 0.12);
  font-size: 0.95rem;
  color: var(--text-dim);
}

.stats li:last-child { border-bottom: none; }

.stats strong {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.hs-note {
  font-size: 0.85rem;
  color: var(--amber);
  margin-bottom: 1.25rem;
  min-height: 1.2em;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}

/* —— Slow-mo overlay —— */
body.slow-mo-active #app {
  filter: saturate(1.15) brightness(1.05);
}

body.slow-mo-active .door-frame {
  box-shadow:
    0 0 0 10px var(--wood),
    0 0 0 12px var(--wood-edge),
    0 0 0 18px var(--wood-light),
    0 0 0 20px var(--wood-edge),
    0 24px 60px rgba(0, 0, 0, 0.7),
    0 0 80px rgba(232, 168, 74, 0.25);
}

/* —— Reduced motion —— */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .visitor,
  .visitor.visible {
    transition: opacity 0.25s linear !important;
    animation: none !important;
  }
  .visitor:not(.tell-stillness) .svg-eye-white,
  .visitor:not(.tell-stillness) .svg-torso,
  .visitor.has-nod .svg-head,
  .visitor.is-human .svg-hair,
  .v-dust span,
  .v-breath,
  .flame-outer, .flame-core, .title-candle .flame { animation: none !important; }
  .btn-primary.pulse { animation: none; }
  /* Keep cold aura visible without pulsing */
  .visitor.tell-cold-aura .v-aura,
  .visitor.tell-wrongness .v-aura { animation: none; opacity: 1; }
}

/* Landscape compact */
@media (max-height: 520px) {
  .door-frame {
    height: min(48vh, 280px);
  }
  .visitor {
    width: 120px;
    height: 210px;
  }
  .v-svg {
    width: 118px;
    height: 210px;
    margin-left: -59px;
  }
  .v-breath { bottom: 140px; }
  .btn-action { min-height: 72px; padding: 0.55rem; }
  :root { --controls-h: 92px; }
}

/* =========================================================
   Systems pack: reputation themes, daily, vigil, attention
   ========================================================= */

.title-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  margin: 0.15rem 0 0.25rem;
}

.title-actions .btn-main,
.title-actions .btn-primary,
.title-actions .btn-secondary {
  width: 100%;
  box-sizing: border-box;
}

/* Main game CTA — brightest, largest, hard to miss */
.btn-main {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  border: 2px solid #ffe6a8;
  background: linear-gradient(180deg, #f0b43a 0%, #c47818 45%, #8a4a0c 100%);
  color: #1a0c02;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1.05rem 1.4rem 0.95rem;
  border-radius: 16px;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(80, 40, 0, 0.35) inset,
    0 6px 0 #5a3008,
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(255, 180, 50, 0.45);
  transition: transform 0.15s var(--ease-out), filter 0.15s, box-shadow 0.2s;
}

.btn-main-label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.35);
}

.btn-main-sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 0.75;
  text-transform: uppercase;
}

.btn-main:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 1px rgba(80, 40, 0, 0.35) inset,
    0 6px 0 #5a3008,
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 48px rgba(255, 190, 60, 0.6);
}

.btn-main:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 1px rgba(80, 40, 0, 0.35) inset,
    0 3px 0 #5a3008,
    0 6px 16px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(255, 180, 50, 0.35);
}

.btn-main.pulse {
  animation: main-cta-pulse 2.2s ease-in-out infinite;
}

@keyframes main-cta-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(80, 40, 0, 0.35) inset,
      0 6px 0 #5a3008,
      0 10px 28px rgba(0, 0, 0, 0.45),
      0 0 28px rgba(255, 180, 50, 0.4);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(80, 40, 0, 0.35) inset,
      0 6px 0 #5a3008,
      0 10px 28px rgba(0, 0, 0, 0.45),
      0 0 52px rgba(255, 200, 80, 0.7);
  }
}

.btn-secondary {
  appearance: none;
  border: 1px solid rgba(140, 155, 230, 0.45);
  background: linear-gradient(180deg, rgba(36, 40, 72, 0.95) 0%, rgba(14, 14, 32, 0.98) 100%);
  color: #c8d0f0;
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  opacity: 0.92;
}

.btn-secondary:hover {
  filter: brightness(1.12);
  opacity: 1;
}

.btn-secondary:active { transform: scale(0.97); }

/* Tutorial = quieter alternate path */
.btn-vigil {
  border-color: rgba(180, 150, 90, 0.4);
  background: linear-gradient(180deg, rgba(48, 36, 22, 0.95) 0%, rgba(18, 12, 8, 0.98) 100%);
  color: #d4c4a0;
  font-size: 0.72rem;
  padding: 0.65rem 1rem;
}

.rep-card {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.75rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(154, 138, 114, 0.4);
  text-align: center;
}

.rep-rank {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.rep-detail {
  font-size: 0.78rem;
  color: #b8a890;
  line-height: 1.35;
}

.daily-preview {
  margin-top: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(12, 14, 32, 0.92);
  border: 1px solid rgba(120, 140, 220, 0.4);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.daily-focus-label {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9aabd8;
  margin-bottom: 0.2rem;
}

.daily-focus {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: #e8ecff;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.daily-score {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #9a9080;
  min-height: 1em;
  line-height: 1.35;
}

.night-focus {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: #c4d0ff;
  max-width: 280px;
  line-height: 1.4;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: rgba(20, 24, 48, 0.85);
  border: 1px solid rgba(120, 140, 220, 0.35);
}

.mode-badge {
  display: block;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d0d8ff;
  background: rgba(16, 18, 40, 0.95);
  border: 1px solid rgba(120, 140, 220, 0.4);
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-glance {
  appearance: none;
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 168, 74, 0.65);
  background: #3a2810;
  color: #ffe2a0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.btn-glance:disabled {
  opacity: 0.4;
  pointer-events: none;
}

.btn-glance.ready {
  animation: pulse-glow 1.8s ease-in-out infinite;
}

/* Afterimage confirm */
.afterimage-tag {
  position: absolute;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 48;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: #e0f8ff;
  background: rgba(6, 14, 24, 0.96);
  border: 1px solid rgba(120, 200, 230, 0.65);
  pointer-events: none;
  white-space: nowrap;
  max-width: min(92vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  animation: toast-in 0.55s var(--ease-out) forwards;
}

.visitor.afterimage {
  animation: none !important;
  opacity: 1 !important;
  filter: brightness(1.05) saturate(1.1);
}

.visitor.afterimage .reveal-callout {
  position: absolute;
  z-index: 20;
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.35rem;
  border-radius: 999px;
  background: rgba(8, 20, 32, 0.88);
  border: 1px solid rgba(120, 200, 230, 0.55);
  color: #b8f0ff;
  pointer-events: none;
}

/* Attention: blackout */
.blackout {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #020108;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s linear;
}

.blackout.active {
  opacity: 0.92;
}

/* Attention: ghost overlap */
.ghost-slot {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6%;
  pointer-events: none;
  opacity: 0.4;
}

.ghost-slot .visitor {
  transform: translateX(-28px) scale(0.92);
  filter: blur(1.5px) brightness(0.55);
  opacity: 0.55;
}

.ghost-slot .visitor.visible {
  opacity: 0.55;
}

/* Red herring flash on humans */
/* Reputation themes on door */
#app.theme-garlic .door-frame .garlic {
  opacity: 1;
  transform: translateX(-50%) scale(1.15);
  filter: drop-shadow(0 0 8px rgba(240, 220, 160, 0.5));
}

#app.theme-cross .door-frame .cross-carving {
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(232, 168, 74, 0.55));
}

#app.theme-cross .door-frame {
  box-shadow:
    0 0 0 10px var(--wood),
    0 0 0 12px var(--wood-edge),
    0 0 0 18px var(--wood-light),
    0 0 0 20px var(--wood-edge),
    0 0 70px rgba(232, 168, 74, 0.18),
    inset 0 0 80px rgba(0, 0, 0, 0.55);
}

#app.theme-ember .threshold-glow {
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 120, 40, 0.35) 0%, transparent 70%);
  opacity: 1;
}

#app.theme-ember .door-frame {
  box-shadow:
    0 0 0 10px #4a2810,
    0 0 0 12px #1a0e08,
    0 0 0 18px #6a3a18,
    0 0 0 20px #1a0e08,
    0 0 80px rgba(255, 100, 40, 0.22),
    inset 0 0 80px rgba(40, 10, 0, 0.45);
}

#app.theme-ember .candle-wax {
  box-shadow: 0 0 28px rgba(255, 120, 40, 0.45);
}

.unlock-note {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin: -0.5rem 0 1rem;
  text-shadow: 0 0 16px var(--safe-glow);
}

.share-line {
  font-size: 0.82rem;
  color: #a8b8ff;
  margin-bottom: 0.85rem;
  line-height: 1.4;
  word-break: break-word;
}

/* First vigil: soft teaching frame */
#app.mode-vigil .door-frame {
  box-shadow:
    0 0 0 10px var(--wood),
    0 0 0 12px var(--wood-edge),
    0 0 0 18px var(--wood-light),
    0 0 0 20px var(--wood-edge),
    0 0 60px rgba(232, 168, 74, 0.2),
    inset 0 0 80px rgba(0, 0, 0, 0.55);
}

#app.mode-daily .night-badge {
  border-color: rgba(120, 140, 220, 0.5);
  color: #c4caff;
}