:root {
  --ink: #070203;
  --ink2: #12060a;
  --blood: #c8141f;
  --blood-hi: #ff2b36;
  --blood-lo: #6e0a12;
  --bone: #efe6dc;
  --bone-dim: rgba(239, 230, 220, .62);
  --line: rgba(200, 20, 31, .55);
  --bar-h: 58px;
  --hud-h: 46px;
  --f-title: 'Pirata One', 'Old English Text MT', serif;
  --f-body: 'Special Elite', 'Courier New', monospace;
  --f-hud: 'VT323', 'Consolas', monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blood-hi); outline-offset: 3px; }

/* ---------- top bar ---------- */
#bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.55) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--blood); box-shadow: 0 0 14px rgba(200,20,31,.6); }
.bname { font-family: var(--f-title); font-size: 26px; line-height: 1; letter-spacing: .5px; }
.btick { font-family: var(--f-hud); font-size: 22px; color: var(--blood-hi); }

.ca {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 4px 4px 4px 10px;
  border: 1px solid var(--line);
  background: rgba(10, 2, 4, .7);
  font-family: var(--f-hud); font-size: 19px;
}
.calabel { color: var(--blood-hi); }
.ca code {
  font-family: var(--f-hud);
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--bone-dim);
}
#copy {
  font-family: var(--f-hud); font-size: 18px;
  padding: 2px 10px; background: var(--bone); color: var(--ink);
}
#copy:hover { background: var(--blood-hi); color: var(--bone); }

.links { display: flex; gap: 8px; flex: 0 0 auto; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--f-hud); font-size: 22px; line-height: 1;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 16px;
  border: 1px solid var(--bone-dim);
  transition: background .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn.ghost:hover { background: var(--bone); color: var(--ink); }
.btn.buy {
  border-color: var(--blood-hi);
  background: var(--blood);
  color: #fff;
  animation: pulse 1.6s ease-in-out infinite;
}
.btn.buy:hover { background: var(--blood-hi); }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,43,54,0); }
  50% { box-shadow: 0 0 22px rgba(255,43,54,.75); }
}

/* ---------- stage + scenes ---------- */
#stage { position: fixed; inset: 0; overflow: hidden; background: var(--ink); }
.scene {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.scene.on { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.scene.cut { transition: none !important; }

.bg {
  position: absolute; inset: -3%;
  z-index: 1;
  background: var(--ink) var(--img) var(--pos, 50% 50%) / cover no-repeat;
}
@media (max-aspect-ratio: 3/4) {
  .bg { background-position: var(--pos-m, var(--pos, 50% 50%)); }
  transform: scale(1.1);
  filter: contrast(1.06) saturate(1.05);
}
.scene.on .bg { animation: push 16s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes push {
  from { transform: scale(1.14) translate3d(0, 1%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}
/* soft floor so captions read */
.scene::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 55%;
  z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(4,1,2,.92), rgba(4,1,2,.5) 45%, transparent);
}

/* jump scare: slam in */
.scene[data-scene="scare"].on .bg { animation: slam .22s cubic-bezier(.1,.9,.2,1) forwards, quake 4s .22s ease-in-out infinite; }
@keyframes slam { from { transform: scale(1.9); filter: brightness(2.2) saturate(2); } to { transform: scale(1.04); } }
@keyframes quake {
  0%, 100% { transform: scale(1.04) translate(0, 0); }
  25% { transform: scale(1.045) translate(-3px, 2px); }
  50% { transform: scale(1.05) translate(2px, -2px); }
  75% { transform: scale(1.045) translate(3px, 1px); }
}

/* flashlight in the tomb */
.dark {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 8vmax, rgba(2,0,1,.55) 14vmax, rgba(2,0,1,.95) 26vmax);
  transition: opacity .25s;
}
.dark.lit { opacity: .15; }

/* ---------- captions ---------- */
.cap {
  position: absolute; z-index: 5;
  left: max(16px, 6vw); bottom: calc(var(--hud-h) + 9vh);
  max-width: min(46ch, 88vw);
  pointer-events: none;
}
.cap h2 {
  margin: 0;
  font-family: var(--f-title); font-weight: 400;
  font-size: clamp(46px, 7.4vw, 118px); line-height: .95;
  color: var(--bone);
  text-shadow: 0 0 18px rgba(200,20,31,.65), 0 4px 0 rgba(0,0,0,.6);
}
.cap h2 .ch { display: inline-block; opacity: 0; white-space: pre; }
.cap h2 .ch.in { animation: flickin .5s steps(1) forwards; }
@keyframes flickin {
  0% { opacity: 0; } 20% { opacity: 1; } 35% { opacity: .1; } 55% { opacity: 1; } 70% { opacity: .4; } 100% { opacity: 1; }
}
.cap p {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.7vw, 26px);
  color: var(--blood-hi);
  text-shadow: 0 2px 10px rgba(0,0,0,.9);
  min-height: 1.3em;
}
.cap p::after { content: '▌'; margin-left: 2px; animation: blink 1s steps(1) infinite; color: var(--bone-dim); }
@keyframes blink { 50% { opacity: 0; } }

/* game prompt */
.act {
  position: absolute; z-index: 6;
  right: max(16px, 6vw); bottom: calc(var(--hud-h) + 10vh);
  font-family: var(--f-hud); font-size: 26px; letter-spacing: 1px;
  padding: 10px 18px;
  border: 1px dashed var(--bone-dim);
  background: rgba(8, 2, 3, .62);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s, transform .4s, background .15s, color .15s;
}
.scene.ready .act { opacity: 1; transform: none; animation: nudge 2.4s 1.2s ease-in-out infinite; }
.act:hover { background: var(--bone); color: var(--ink); border-style: solid; }
.act.used { opacity: .35 !important; animation: none !important; pointer-events: none; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateX(-4px); } 96% { transform: translateX(4px); } }

.punch {
  position: absolute; z-index: 6;
  right: max(16px, 6vw); bottom: calc(var(--hud-h) + 10vh + 62px);
  max-width: 34ch; margin: 0; text-align: right;
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--bone);
  background: var(--blood);
  padding: 6px 12px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
  opacity: 0; transform: scale(.6) rotate(-3deg);
  pointer-events: none;
}
.punch.show { animation: stamp .35s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes stamp { to { opacity: 1; transform: scale(1) rotate(-2deg); } }

/* ---------- final card ---------- */
.final::after { height: 100%; background: linear-gradient(to top, rgba(4,1,2,.94) 0, rgba(4,1,2,.8) 38%, rgba(4,1,2,.15) 62%, transparent 80%); }
.endcard {
  position: absolute; z-index: 5; inset: var(--bar-h) 16px var(--hud-h);
  padding-bottom: 3vh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; gap: 6px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s .5s, transform .8s .5s;
}
.scene.on .endcard { opacity: 1; transform: none; }
.endcard h1 {
  margin: 0;
  font-family: var(--f-title); font-weight: 400;
  font-size: clamp(64px, 12vw, 190px); line-height: .9;
  color: var(--blood-hi);
  text-shadow: 0 0 30px rgba(255,43,54,.7), 0 0 80px rgba(200,20,31,.5), 0 6px 0 #000;
  animation: breathe 3.2s ease-in-out infinite;
}
@keyframes breathe { 50% { text-shadow: 0 0 14px rgba(255,43,54,.5), 0 0 40px rgba(200,20,31,.3), 0 6px 0 #000; } }
.kicker { margin: 0; font-size: clamp(15px, 1.6vw, 22px); color: var(--bone-dim); }
.tick { font-family: var(--f-hud); font-size: clamp(28px, 3vw, 40px); color: var(--bone); letter-spacing: 2px; margin: 6px 0; }
.howto {
  list-style: none; margin: 8px 0 14px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: clamp(14px, 1.4vw, 19px);
}
.howto b { font-family: var(--f-hud); font-weight: 400; color: var(--blood-hi); font-size: 1.3em; margin-right: 4px; }
.endbtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn.big { font-size: 28px; padding: 12px 26px; }
.replay { margin-top: 14px; font-family: var(--f-hud); font-size: 20px; color: var(--bone-dim); }
.replay:hover { color: var(--blood-hi); }

/* ---------- effect layers ---------- */
#embers, #bats, #grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#embers { z-index: 2; mix-blend-mode: screen; }
#bats { z-index: 7; }
#grain { z-index: 10; opacity: .13; mix-blend-mode: overlay; }

#fog { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .55; }
#fog i {
  position: absolute; inset: auto -50% -10% -50%; height: 55%;
  background:
    radial-gradient(ellipse 30% 40% at 20% 70%, rgba(150,20,30,.32), transparent 70%),
    radial-gradient(ellipse 25% 35% at 55% 80%, rgba(120,110,120,.22), transparent 70%),
    radial-gradient(ellipse 35% 40% at 85% 75%, rgba(150,20,30,.25), transparent 70%);
  animation: drift 38s linear infinite;
  filter: blur(8px);
}
#fog i + i { animation-duration: 56s; animation-direction: reverse; bottom: -18%; opacity: .7; }
@keyframes drift { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
body[data-scene="sunny"] #fog, body[data-scene="sunny"] #embers { opacity: 0; }

#flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: 0; background: #fff; }
#flash.red { background: radial-gradient(circle, rgba(255,40,50,.9), rgba(120,0,10,.95)); }
#flash.go { animation: flash .5s ease-out; }
#flash.black { background: #000; }
#flash.black.go { animation: blackout .9s ease-in-out; }
@keyframes flash { 0% { opacity: .95; } 15% { opacity: .2; } 25% { opacity: .8; } 100% { opacity: 0; } }
@keyframes blackout { 0% { opacity: 0; } 25% { opacity: 1; } 55% { opacity: 1; } 62% { opacity: .3; } 68% { opacity: 1; } 100% { opacity: 0; } }

#drips { position: absolute; inset: 0; z-index: 9; pointer-events: none; display: flex; }
#drips span {
  flex: 1 1 0; height: 0; align-self: flex-start;
  background: linear-gradient(to bottom, #3d0007, #9e0d18 70%, #d11a26);
  border-radius: 0 0 50% 50% / 0 0 14px 14px;
  margin: 0 -2px;
}
#drips.run span { animation: drip var(--d, 1s) var(--w, 0s) cubic-bezier(.5,0,.7,1) forwards; }
#drips.fade { transition: opacity .6s; opacity: 0; }
@keyframes drip { to { height: var(--h, 120%); } }

#vig {
  position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,0,0,.75) 100%);
}
#vig::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
body.beat #vig { animation: beat .32s ease-out; }
@keyframes beat { 30% { box-shadow: inset 0 0 120px rgba(160,0,12,.55); } }

#stage.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
#stage.shake-big { animation: shake 1s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -3px); }
  30%, 50%, 70% { transform: translate(-7px, 4px) rotate(-.4deg); }
  40%, 60% { transform: translate(7px, -4px) rotate(.4deg); }
}
#stage.glitch .scene.on .bg { animation: glitch .55s steps(1) 1, push 16s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes glitch {
  0% { clip-path: inset(10% 0 60% 0); transform: translate(-18px) scale(1.12); filter: hue-rotate(-25deg) saturate(3); }
  15% { clip-path: inset(55% 0 20% 0); transform: translate(16px) scale(1.12); }
  30% { clip-path: inset(0 0 85% 0); transform: translate(-8px) scale(1.12); filter: invert(.85); }
  45% { clip-path: inset(70% 0 5% 0); transform: translate(22px) scale(1.12); filter: none; }
  60% { clip-path: inset(30% 0 40% 0); transform: translate(-12px) scale(1.12); filter: saturate(4) brightness(1.4); }
  75% { clip-path: none; transform: translate(6px) scale(1.12); }
  100% { clip-path: none; transform: scale(1.12); filter: none; }
}

/* ---------- HUD ---------- */
#hud {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  height: var(--hud-h);
  padding: 0 16px env(safe-area-inset-bottom);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--f-hud); font-size: 21px; letter-spacing: 1px;
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
}
.lbl { color: var(--blood-hi); }
#hud > div, #hud button { white-space: nowrap; }
.dim { color: var(--bone-dim); }
.hud-c { display: flex; align-items: center; gap: 10px; }
.meter { display: inline-block; width: 140px; height: 10px; border: 1px solid var(--bone-dim); padding: 1px; }
.meter i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--blood-lo), var(--blood-hi)); transition: width .9s cubic-bezier(.3,1.4,.5,1); }
.hud-r { display: flex; gap: 14px; align-items: center; }
#mute { color: var(--bone-dim); }
#mute:hover { color: var(--bone); }
#next { color: var(--bone); }
#next .arr { display: inline-block; color: var(--blood-hi); animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
body.end #next { visibility: hidden; }

/* ---------- gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(110,10,18,.35), transparent 60%),
    linear-gradient(rgba(5,1,2,.86), rgba(5,1,2,.94)),
    var(--ink) url(assets/altar.jpg) center / cover;
  transition: opacity .9s ease, visibility 0s .9s;
}
body:not(.gated) #gate { opacity: 0; visibility: hidden; }
.gate-in { text-align: center; padding: 16px; max-width: 640px; }
.warn { font-family: var(--f-hud); font-size: 20px; color: var(--blood-hi); margin: 0 0 18px; letter-spacing: 1px; }
.flick {
  margin: 0; font-family: var(--f-title); font-weight: 400;
  font-size: clamp(64px, 14vw, 160px); line-height: .9;
  color: var(--bone);
  text-shadow: 0 0 24px rgba(200,20,31,.8);
  animation: flicker 4s steps(1) infinite;
}
@keyframes flicker {
  0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; }
  20%, 63% { opacity: .25; }
  21% { opacity: .8; }
}
.gate-in .sub { margin: 20px 0 30px; color: var(--bone-dim); font-size: 18px; }
#enter {
  display: block; margin: 0 auto 14px;
  font-family: var(--f-hud); font-size: 30px; letter-spacing: 2px; text-transform: uppercase;
  padding: 14px 34px;
  background: var(--blood); color: #fff; border: 1px solid var(--blood-hi);
  animation: pulse 1.6s ease-in-out infinite;
}
#enter:hover { background: var(--blood-hi); }
#quiet { font-family: var(--f-hud); font-size: 19px; color: var(--bone-dim); text-decoration: underline; text-underline-offset: 3px; }
.tip { margin: 26px 0 0; font-family: var(--f-hud); font-size: 18px; color: var(--bone-dim); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  :root { --bar-h: 54px; --hud-h: 44px; }
  #bar { gap: 8px; padding: 0 10px; }
  .bname { display: none; }
  .btick { font-size: 18px; }
  .ca { padding: 3px 3px 3px 7px; gap: 5px; font-size: 16px; }
  .ca code { max-width: 68px; }
  #copy { font-size: 15px; padding: 2px 6px; }
  .btn { font-size: 18px; padding: 7px 10px; }
  .links .btn.ghost span { display: none; }
  .cap { left: 16px; right: 16px; bottom: calc(var(--hud-h) + 92px); }
  .cap h2 { font-size: clamp(40px, 12vw, 64px); }
  .act { left: 16px; right: auto; bottom: calc(var(--hud-h) + 26px); font-size: 22px; padding: 8px 14px; }
  .punch { left: 16px; right: 16px; bottom: calc(var(--hud-h) + 26px); text-align: left; max-width: none; }
  .meter { width: 70px; }
  .hud-c .lbl { display: none; }
  #hud { font-size: 18px; padding: 0 12px env(safe-area-inset-bottom); gap: 8px; }
  #next .txt { display: none; }
  #next .arr { font-size: 22px; }
  .howto { flex-direction: column; gap: 4px; }
  .btn.big { font-size: 22px; padding: 11px 18px; width: min(320px, 100%); }
  .endbtns { flex-direction: column; align-items: center; width: 100%; }
}
@media (max-width: 400px) {
  .btick { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .cap h2 { font-size: 40px; }
  .cap { bottom: calc(var(--hud-h) + 20px); }
  .act, .punch { bottom: calc(var(--hud-h) + 16px); }
  .punch { bottom: calc(var(--hud-h) + 70px); }
  .endcard h1 { font-size: 54px; }
  .howto { margin: 2px 0 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene.on .bg, #fog i, .flick, .btn.buy, #enter, .endcard h1 { animation: none !important; }
  #stage.shake, #stage.shake-big { animation: none; }
}