:root {
  --night: #120a1f;
  --blood: #c1121f;
  --blood-deep: #7a0a14;
  --pumpkin: #ff7a1a;
  --slime: #8cff5a;
  --bone: #efe6d2;
  --ink: #0b0610;
  --display: 'Creepster', 'Impact', fantasy;
  --gothic: 'Pirata One', 'Georgia', serif;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--bone);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- HUD ---------- */

.hud {
  position: fixed;
  z-index: 10;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 14px;
  background: linear-gradient(#07040fcc, #07040f00);
  pointer-events: none;
}
.hud > * { pointer-events: auto; }

.brand {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 44px);
  letter-spacing: .02em;
  color: var(--bone);
  text-decoration: none;
  text-shadow: 0 3px 0 var(--blood-deep), 0 0 24px #c1121f66;
  line-height: 1;
}
.brand b { font-weight: 400; }
.brand span { color: var(--pumpkin); }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { width: clamp(34px, 3.6vw, 44px); height: auto; border-radius: 50%; }

.ticker-pill {
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ff7a1a22;
  border: 1px solid #ff7a1a66;
  color: var(--pumpkin);
}

.fear {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-left: auto;
}
.fear-label { opacity: .6; text-transform: uppercase; letter-spacing: .08em; }
.fear-bar {
  width: 110px; height: 8px;
  border-radius: 99px;
  background: #ffffff18;
  overflow: hidden;
}
.fear-bar i {
  display: block;
  height: 100%;
  width: 14%;
  background: linear-gradient(90deg, var(--slime), var(--pumpkin), var(--blood));
  background-size: 110px 100%;
  transition: width 1.2s ease;
}
.speaking .fear-bar i { width: 100%; transition-duration: .5s; }
.fear-state { min-width: 78px; color: var(--slime); }
.speaking .fear-state { color: #ff4655; }


.buy, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 800 14px var(--body);
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--blood);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--blood-deep);
  transition: transform .15s, box-shadow .15s;
}
.buy:hover, .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--blood-deep); }
.buy.is-off, .btn.is-off, .btn:disabled { background: #3a2a44; box-shadow: 0 4px 0 #1f1426; color: #b9aac6; cursor: not-allowed; transform: none; }
.btn.small { padding: 7px 14px; font-size: 12px; }

/* ---------- stage ---------- */

.stage { position: fixed; inset: 0; }
#scene { width: 100%; height: 100%; display: block; }

.glow-stop { stop-color: #f6e7b8; transition: stop-color 1s; }
.speaking .glow-stop { stop-color: #ff2d3c; }
.moon-disc { fill: #f3e6c4; transition: fill 1s; }
.moon-crater { fill: #d9c9a0; transition: fill 1s; }
.speaking .moon-disc { fill: #c9212e; }
.speaking .moon-crater { fill: #9a1622; }

.star { fill: #fff; opacity: .7; }
.star.tw { animation: twinkle 3s var(--d) infinite ease-in-out; }
@keyframes twinkle { 50% { opacity: .15; } }

.win { fill: #ffb347; animation: flicker 5s infinite; }
.win.w2 { animation-delay: -1.7s; }
.win.w3 { animation-delay: -3.1s; }
@keyframes flicker { 0%, 100% { opacity: .9; } 47% { opacity: .9; } 50% { opacity: .2; } 53% { opacity: .85; } }
.speaking .win { fill: #ff2d3c; }

.podium-text { font-family: var(--gothic); font-size: 17px; fill: #d6a531; letter-spacing: .08em; }

/* the crash chart in the sky */
.candle { opacity: 0; transition: opacity .6s ease; }
.candle line { stroke-width: 3; }
.candle.down line { stroke: #ff3b4e; }
.candle.down rect { fill: #ff3b4e; }
.candle.up line { stroke: #45e089; }
.candle.up rect { fill: #45e089; }
.speaking .candle { opacity: .55; transition: opacity .15s ease calc(var(--i) * 70ms); }

/* fog */
.fog { animation: drift 18s ease-in-out infinite alternate; }
.fog-front { animation-duration: 24s; animation-direction: alternate-reverse; }
@keyframes drift { to { transform: translateX(160px); } }

/* bats + witch */
.bat-fly { animation: fly var(--dur) linear var(--delay) infinite; }
.bat-flap { animation: flap .22s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes fly {
  0% { transform: translate(-300px, 0); }
  25% { transform: translate(300px, -40px); }
  50% { transform: translate(900px, 20px); }
  75% { transform: translate(1500px, -30px); }
  100% { transform: translate(2100px, 0); }
}
@keyframes flap { to { transform: scaleY(.35); } }
.witch-fly { animation: witch 26s linear -8s infinite; }
.witch-bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes witch {
  0% { transform: translate(-400px, 60px); }
  100% { transform: translate(2200px, -40px); }
}

/* ---------- Paul ---------- */

#paul { cursor: pointer; outline: none; }
.tk-fire { opacity: 0; mix-blend-mode: screen; transition: opacity .08s; }
.mouth-on .tk-fire { opacity: 1; }
.tk-point { opacity: 0; transition: opacity .12s; }
.speaking .tk-point { opacity: 1; }
.speaking .tk-idle { opacity: 0; transition: opacity .12s .05s; }
.tk-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 3.4s ease-in-out infinite; }
.mouth-on .tk-body { animation: none; transform: translateY(-2px); }
#pupil-l circle, #pupil-r circle { animation: ember 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ember { 50% { transform: scale(.82); opacity: .85; } }
.speaking #pupil-l circle, .speaking #pupil-r circle { animation-duration: .25s; }
@keyframes breathe { 50% { transform: translateY(2px); } }
#paul:focus-visible .tk-body { filter: drop-shadow(0 0 6px var(--slime)); }

.shake-root { transform-box: view-box; }
.speaking .shake-root { animation: quake .5s .15s 3; }
@keyframes quake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 2px); }
  40% { transform: translate(4px, -3px); }
  60% { transform: translate(-3px, 3px); }
  80% { transform: translate(3px, -1px); }
}

/* ---------- actors ---------- */

.pose, .idle { transform-box: fill-box; transform-origin: 50% 100%; }
.pose {
  transition: transform .45s cubic-bezier(.3, 1.3, .5, 1) var(--rd), opacity .5s ease var(--rd);
}
.speaking .pose { transition-delay: var(--d); transition-duration: .28s; }

.actor-pepe .idle { animation: sway 3.2s ease-in-out infinite; }
.actor-pnut .idle { animation: bob 1.8s ease-in-out infinite; }
.actor-fwog .idle { animation: sway 2.4s ease-in-out infinite; }
.actor-ponke .idle { animation: bob 1.5s ease-in-out infinite; }
.actor-chillguy .idle { animation: sway 4s ease-in-out infinite; }
.actor-zombie .idle { animation: wave 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes sway { 25% { transform: rotate(-2.5deg); } 75% { transform: rotate(2.5deg); } }
@keyframes wave { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

.speaking .actor:not([data-fear=chill]) .idle { animation: tremble .11s linear infinite; }
@keyframes tremble { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }

.speaking [data-fear=duck] .pose { transform: translate(var(--hx), var(--hy)); }
.speaking [data-fear=retract] .pose { transform: translateY(150px); }
.speaking [data-fear=faint] .pose { transform: translateX(-20px) rotate(-84deg); transition-duration: .6s; }
.speaking [data-fear=flee] .pose { transform: translateX(var(--fx)); transition: transform 1.6s cubic-bezier(.55, 0, .9, .5) var(--d); }


.yelp {
  font-family: var(--display);
  font-size: 30px;
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 6px;
  paint-order: stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  transition: opacity .2s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.speaking .yelp { opacity: 1; transform: scale(1); transition-delay: calc(var(--d) + .2s); }
.actor-chillguy .yelp { fill: var(--slime); }

.jack { animation: candle 1.8s infinite; }
@keyframes candle { 0%, 100% { opacity: 1; } 40% { opacity: .75; } 60% { opacity: .95; } }
.lantern .lantern-glow { animation: candle 2.2s var(--d) infinite; }
.speaking .lantern .jack, .speaking .lantern .lantern-glow { opacity: .1; animation: none; transition: opacity .3s; }

/* ---------- tombs ---------- */

.tomb { cursor: pointer; outline: none; }
.tomb-inner { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.tomb.hot .tomb-inner, .tomb:focus-visible .tomb-inner { transform: translateY(-6px) rotate(-1.5deg); }
.tomb-glow { fill: none; stroke: var(--slime); stroke-width: 14; opacity: 0; filter: blur(6px); transition: opacity .25s; }
.tomb.hot .tomb-glow, .tomb:focus-visible .tomb-glow { opacity: .75; }
.tomb-rip { font-family: var(--gothic); font-size: 20px; fill: #2c2836; }
.tomb-label { font-family: var(--gothic); fill: #1f1b28; letter-spacing: .02em; }
.tomb-sub { font-family: var(--body); font-size: 11px; font-weight: 600; fill: #2c2836; text-transform: uppercase; letter-spacing: .12em; }
.tomb.hot .tomb-label { fill: #0e2a08; }

/* ---------- speech bubble ---------- */

.bubble {
  position: fixed;
  z-index: 6;
  max-width: 280px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: var(--bone);
  color: var(--ink);
  border-radius: 18px 18px 18px 4px;
  font: 600 17px/1.3 var(--body);
  box-shadow: 0 6px 0 #0006;
  animation: pop .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.bubble p { margin: 0; min-height: 1.3em; }
.bubble.centered { transform: translateX(-50%); border-radius: 18px; max-width: min(320px, calc(100vw - 32px)); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.bubble.centered { animation: none; }


/* ---------- blood drips ---------- */

.drips { position: fixed; z-index: 9; top: 0; left: 0; right: 0; height: 0; pointer-events: none; }
.drips span {
  position: absolute;
  top: 0;
  height: 0;
  background: linear-gradient(var(--blood-deep), var(--blood));
  border-radius: 0 0 99px 99px;
  transition: height .9s ease-in var(--d);
}
.speaking .drips span { height: var(--h); transition: height 2.4s cubic-bezier(.4, 0, .6, 1) var(--d); }

/* ---------- dock (small screens) ---------- */

.dock { display: none; }

/* ---------- modal slab ---------- */

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: #07040fd9; backdrop-filter: blur(3px); }
.slab {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 44px 32px 32px;
  border-radius: 200px 200px 14px 14px;
  background:
    radial-gradient(circle at 30% 20%, #ffffff14, transparent 50%),
    linear-gradient(160deg, #8d8a9c, #4a4658);
  color: #15121c;
  box-shadow: 0 0 0 4px #2a2733, 0 0 60px #8cff5a33, 0 24px 60px #000c;
  animation: rise .45s cubic-bezier(.3, 1.4, .5, 1);
  text-align: center;
}
@keyframes rise { from { transform: translateY(60px) rotate(-3deg); opacity: 0; } }
.slab-close {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 0;
  background: #1f1b28;
  color: var(--bone);
  font-size: 22px;
  cursor: pointer;
}
.slab-kicker { margin: 18px 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: #2c2836; }
.slab h2 { margin: 2px 0 14px; font: 400 46px/1 var(--gothic); color: #15121c; }
.slab-body { font-size: 15px; line-height: 1.55; text-align: left; }
.slab-body p { margin: 0 0 12px; }
.slab-body em { color: var(--blood-deep); font-style: normal; font-weight: 800; }
.slab-art { display: block; width: 150px; height: auto; margin: 0 auto 12px; filter: drop-shadow(0 8px 12px #0007); }
.note { font-size: 12px; opacity: .7; text-align: center; }

.stats { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.stats li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: #15121c1f; }
.stats span { opacity: .7; }

.steps, .road { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; }
.road { list-style: none; padding: 0; }
.road li { padding: 10px 14px; border-radius: 10px; background: #15121c1f; }

.ca { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; background: #15121c; color: var(--bone); margin-bottom: 14px; }
.ca code { flex: 1; font-size: 13px; overflow-wrap: anywhere; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .fear { display: none; }
  .buy { margin-left: auto; }
}

@media (max-width: 640px) {
  .hud { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .ticker-pill { display: none; }
  .buy { padding: 8px 14px; font-size: 13px; }
  .dock {
    position: fixed;
    z-index: 6;
    left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    display: flex;
    gap: 8px;
    padding: 0 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .dock::-webkit-scrollbar { display: none; }
  .dock-btn {
    flex: 0 0 auto;
    min-width: 96px;
    padding: 10px 10px 8px;
    border: 2px solid #2a2733;
    border-radius: 40px 40px 8px 8px;
    background: linear-gradient(160deg, #8d8a9c, #4a4658);
    color: #15121c;
    font-family: var(--body);
    cursor: pointer;
  }
  .dock-btn b { display: block; font: 400 18px/1 var(--gothic); }
  .dock-btn span { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
  .slab { padding: 40px 20px 24px; border-radius: 140px 140px 14px 14px; }
  .slab h2 { font-size: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .pose { transition-duration: .2s !important; }
}