/* ============================================================
   CART-CADE — haunted carnival theme
   Night-purple midway, pumpkin neon, candle gold, ectoplasm green
   ============================================================ */
:root {
  --night-0: #07040c;
  --night-1: #0e0818;
  --night-2: #170e25;
  --panel:   #1b1130;
  --panel-2: #25173d;
  --field:   #120a1e;
  --line:    rgba(164, 110, 255, .22);
  --line-2:  rgba(255, 140, 60, .35);

  --ink:      #f7efe3;
  --ink-dim:  #bba9cf;
  --ink-mute: #8b78a3;

  --pumpkin:   #ff7a1c;
  --pumpkin-2: #ffa24a;
  --pumpkin-d: #b8480a;
  --candle:    #ffd24a;
  --slime:     #9dff3d;
  --witch:     #a468ff;
  --witch-d:   #5b2fa6;
  --blood:     #ff3b57;
  --cream:     #f3e6cc;

  --spooky: 'Creepster', Impact, fantasy;
  --carny:  'Rye', Georgia, serif;
  --ui:     'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --panel-bg: linear-gradient(180deg, rgba(40, 25, 63, .95), rgba(22, 13, 36, .97));
  /* admission-ticket notches on the left/right edges */
  --notch-mask:
    radial-gradient(circle 12px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 12px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}

* { box-sizing: border-box; }

/* no overflow-x:hidden on html — it forces overflow-y to auto too, which
   breaks position:sticky on .hud. On body it propagates to the viewport. */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--night-1);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; }
a { color: var(--pumpkin-2); text-decoration: none; }
a:hover { color: var(--candle); }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid var(--candle); outline-offset: 3px; }

/* ---------- shared keyframes ---------- */
@keyframes bulbTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes bulbChase { 50% { opacity: .18; box-shadow: none; } }
@keyframes float { 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes urgencyPulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

/* ============================================================
   BACKDROP — a night on the midway: sky, moon, far hills, the
   wheel, the tents, the graveyard gate, fog. Layers that carry
   data-depth drift a little with the pointer (see script.js).
   Anything that moves every frame lives on its own element so it
   composites instead of repainting a big SVG; flickers are stepped.
   ============================================================ */
.scene {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(3, 1, 7, .6)),
    radial-gradient(75% 40% at 50% 104%, rgba(255, 122, 28, .40), transparent 65%),
    radial-gradient(55% 40% at 82% 4%, rgba(164, 104, 255, .22), transparent 62%),
    radial-gradient(60% 50% at 10% 34%, rgba(96, 44, 150, .18), transparent 60%),
    linear-gradient(180deg, #04020a 0%, #0b0618 26%, #170b2b 48%, #2a1040 68%, #43163e 84%, #5a2333 100%);
}
.scene [data-depth] {
  transform: translate3d(calc(var(--px, 0) * var(--d, 0) * -1px), calc(var(--py, 0) * var(--d, 0) * -.5px), 0);
}
/* the lights come up once, on the first paint */
.scene__curtain { position: absolute; inset: 0; z-index: 6; background: #04020a; animation: curtainUp 1.5s ease-out .15s both; }
@keyframes curtainUp { to { opacity: 0; } }
@keyframes candle { 0%, 100% { opacity: 1; } 41% { opacity: .78; } 47% { opacity: .96; } 53% { opacity: .7; } 60% { opacity: 1; } 78% { opacity: .88; } 84% { opacity: 1; } }

.scene__stars { position: absolute; inset: -24px; }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.stars--a { animation: starTwinkle 3.8s ease-in-out infinite; }
.stars--b { animation: starTwinkle 4.6s ease-in-out 1.3s infinite; }
.stars--c { animation: starTwinkle 5.4s ease-in-out 2.4s infinite; }
.stars--bright { animation: starTwinkle 6s ease-in-out .8s infinite; }
@keyframes starTwinkle { 50% { opacity: .42; } }
.shoot { opacity: 0; animation: shoot 16s linear 3s infinite; }
@keyframes shoot {
  0% { opacity: 0; transform: translate(300px, 120px); }
  1.5% { opacity: 1; }
  8% { opacity: 0; transform: translate(820px, 300px); }
  100% { opacity: 0; transform: translate(820px, 300px); }
}

/* Sizes follow the smaller of the window's width and height, so the scene keeps
   its proportions on a wide desktop monitor instead of shrinking into the corners.
   Every SVG that spans the screen gets an explicit width: an svg positioned with
   left+right but no width is sized from its own shape, and stops short on wide screens. */
.scene__moon { position: absolute; right: 6%; top: 5vh; width: clamp(170px, min(22vw, 33vh), 460px); height: auto; }

.scene__cloud { position: absolute; height: auto; animation: cloudDrift 70s ease-in-out infinite alternate; }
.scene__cloud--1 { left: 56%; top: 8vh; width: clamp(200px, min(25vw, 42vh), 560px); }
.scene__cloud--2 { left: 9%; top: 25vh; width: clamp(120px, min(15vw, 25vh), 340px); animation-duration: 55s; animation-direction: alternate-reverse; }
@keyframes cloudDrift { from { translate: -60px 0; } to { translate: 140px 0; } }

.scene__lights {
  position: absolute; top: 0; left: 0; width: 100%; height: max(70px, 4.86vw);
  filter: drop-shadow(0 0 6px rgba(255, 170, 70, .85));
  transition: opacity .4s;
}
.lights__bulbs circle { fill: var(--pumpkin-2); animation: bulbTwinkle 1.6s ease-in-out infinite; }
.lights__bulbs circle:nth-child(3n+2) { fill: var(--witch); animation-delay: .55s; }
.lights__bulbs circle:nth-child(3n) { fill: var(--slime); animation-delay: 1.1s; }

.scene__far { position: absolute; left: -24px; bottom: 14vh; z-index: 0; width: calc(100% + 48px); height: max(36vh, 17vw); }
.far__win { animation: candle 4.2s steps(1, end) infinite; }
.far__win--2 { animation-delay: 1.7s; }
.far__coasterlights { animation: dashRun 2.4s steps(12) infinite; }
@keyframes dashRun { to { stroke-dashoffset: -24; } }

.scene__ferris {
  position: absolute; left: 2%; bottom: 11vh; z-index: 1;
  width: clamp(230px, min(31vw, 50vh), 720px); height: auto;
}
.ferris__wheel { transform-box: view-box; transform-origin: 210px 215px; animation: ferrisSpin 96s linear infinite; }
.cabin { transform-box: view-box; animation: ferrisSpin 96s linear infinite reverse; }
@keyframes ferrisSpin { to { transform: rotate(360deg); } }
.ferris__lights { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 4px currentColor); }
.ferris__lights--a { color: var(--pumpkin-2); animation: chase3 1.5s steps(1) infinite; }
.ferris__lights--b { color: var(--witch); animation: chase3 1.5s steps(1) .5s infinite; }
.ferris__lights--c { color: var(--slime); animation: chase3 1.5s steps(1) 1s infinite; }
@keyframes chase3 { 0%, 100% { opacity: 1; } 33%, 66% { opacity: .18; } }
.ferris__hub { filter: drop-shadow(0 0 8px rgba(255, 210, 74, .9)); }

.scene__midway {
  position: absolute; right: 0; bottom: 10vh; z-index: 1;
  width: clamp(300px, min(42vw, 67vh), 1000px); height: auto;
}
.midway__word { font-family: var(--carny); font-size: 21px; letter-spacing: .12em; fill: #ffd985; filter: drop-shadow(0 0 6px rgba(255, 210, 74, .9)); }
.midway__bulbs { stroke: currentColor; filter: drop-shadow(0 0 3px currentColor); animation: chase2 1s steps(1) infinite; }
.midway__bulbs--a { color: var(--candle); }
.midway__bulbs--b { color: var(--pumpkin-2); animation-delay: .5s; }
@keyframes chase2 { 50% { opacity: .15; } }
.midway__signbulbs { filter: drop-shadow(0 0 3px rgba(255, 210, 74, .9)); animation: bulbTwinkle 1.2s steps(1) infinite; }
.midway__cone { mix-blend-mode: screen; }
.midway__glow { filter: drop-shadow(0 0 8px rgba(255, 160, 60, .9)); animation: candle 3.1s steps(1, end) infinite; }

.scene__bat {
  position: absolute; left: -12%; z-index: 1; width: clamp(30px, 4.7vh, 64px); height: auto;
  color: #0b0614; filter: drop-shadow(0 0 2px rgba(255, 210, 170, .35));
  animation: batFly linear infinite;
}
.scene__bat--1 { top: 17vh; animation-duration: 22s; }
.scene__bat--2 { top: 29vh; width: clamp(22px, 3.3vh, 46px); animation-duration: 31s; animation-delay: 7s; }
.scene__bat--3 { top: 11vh; width: clamp(18px, 2.7vh, 38px); animation-duration: 26s; animation-delay: 15s; }
@keyframes batFly {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(32vw, -3vh); }
  50%  { transform: translate(64vw, 2vh); }
  75%  { transform: translate(96vw, -2vh); }
  100% { transform: translate(128vw, 0); }
}
.bat-wing { transform-box: view-box; transform-origin: 30px 15px; }
.bat-wing--l { animation: batFlapL .32s ease-in-out infinite; }
.bat-wing--r { animation: batFlapR .32s ease-in-out infinite; }
@keyframes batFlapL { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-22deg); } }
@keyframes batFlapR { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(22deg); } }

/* fog, lit by the midway: violet on the left, pumpkin on the right */
.scene__fog {
  position: absolute; left: -25%; right: -25%; bottom: -4vh; height: 36vh; z-index: 2;
  mix-blend-mode: screen;
  background:
    radial-gradient(40% 55% at 22% 78%, rgba(190, 160, 235, .28), transparent 70%),
    radial-gradient(30% 50% at 55% 92%, rgba(255, 170, 90, .20), transparent 70%),
    radial-gradient(38% 60% at 82% 80%, rgba(255, 150, 70, .28), transparent 70%);
  animation: fogDrift 34s ease-in-out infinite alternate;
}
.scene__fog--2 {
  bottom: -9vh; height: 30vh; opacity: .85; animation-duration: 47s; animation-direction: alternate-reverse;
  background:
    radial-gradient(45% 60% at 40% 85%, rgba(200, 170, 240, .2), transparent 70%),
    radial-gradient(35% 55% at 90% 88%, rgba(255, 140, 60, .18), transparent 70%);
}
.scene__fog--3 {
  bottom: -2vh; height: 16vh; z-index: 4; animation-duration: 26s;
  background: radial-gradient(60% 80% at 50% 100%, rgba(170, 140, 220, .22), transparent 70%);
}
@keyframes fogDrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* tall enough that scaling to the full width never crops the cat or the gate off the top */
.scene__ground {
  position: absolute; left: -24px; bottom: 0; z-index: 3;
  width: calc(100% + 48px); height: min(max(24vh, 13.5vw), 34vh); min-height: 140px;
}
.jack__face { fill: #ffe27a; filter: drop-shadow(0 0 6px rgba(255, 170, 60, .95)); animation: candle 3.4s steps(1, end) infinite; }
.jack:nth-of-type(2n) .jack__face { animation-delay: 1.2s; }
.jack:nth-of-type(3n) .jack__face { animation-delay: 2.1s; animation-duration: 2.8s; }
.jack__pool { mix-blend-mode: screen; }
.cat__eyes { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 3px #9dff3d); animation: catBlink 5.5s steps(1, end) infinite; }
@keyframes catBlink { 0%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.08); } 96% { transform: scaleY(1); } }

.scene__embers { position: absolute; left: 0; right: 0; bottom: 7vh; height: 10vh; z-index: 3; }
.ember {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; opacity: 0;
  background: #ffcf6a; box-shadow: 0 0 6px 1px rgba(255, 190, 90, .8);
  animation: emberRise var(--t, 7s) ease-out var(--dl, 0s) infinite;
}
@keyframes emberRise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translate(var(--dx, 8px), -95px); opacity: 0; }
}

/* inner screens get a darker, calmer backdrop so content stays readable */
.scene__dim { position: absolute; inset: 0; z-index: 5; background: rgba(6, 3, 11, .58); opacity: 0; transition: opacity .4s; }
body:not([data-screen="start"]) .scene__dim { opacity: 1; }
body:not([data-screen="start"]) .scene__lights { opacity: 0; }

/* the old house only shows on big landscape monitors: anywhere narrower, the
   title text and the wheel leave it no room and it would sit behind the words */
@media (max-aspect-ratio: 1/1), (max-width: 1799px) { .far__house { display: none; } }

/* phones: the wheel on the left, the tents on the right, the gate between —
   the arch, booth and lamppost would land under the title text */
@media (max-width: 640px) {
  .scene__moon { top: 4vh; right: 3%; width: 42vw; }
  .scene__cloud--1 { left: 40%; top: 10vh; width: 56vw; }
  .scene__cloud--2 { display: none; }
  .scene__far { height: 30vh; bottom: 15vh; }
  .scene__ferris { width: 54vw; left: -12%; bottom: 10vh; }
  .scene__midway { width: 72vw; right: -16%; bottom: 11vh; }
  .midway__lamp, .midway__arch, .midway__booth, .scene__embers, .shoot, .far__house { display: none; }
  .far__coasterlights { animation: none; }
  .scene__ground { height: 22vh; }
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen[hidden] { display: none !important; }
.screen { animation: screenIn .35s ease-out; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }
body[data-screen="start"] .hud { display: none; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--ui); font-weight: 800; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; text-align: center;
  color: #2a1300;
  background: linear-gradient(180deg, #ffb266, var(--pumpkin) 58%, #e8600e);
  border: 0; border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 0 #8a3504, 0 10px 22px rgba(255, 122, 28, .28);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  -webkit-user-select: none; user-select: none;
}
.btn:hover { filter: brightness(1.08); color: #2a1300; }
.btn:active { transform: translateY(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 0 #8a3504, 0 4px 10px rgba(255, 122, 28, .25); }
.btn:focus-visible { outline: 3px solid var(--candle); outline-offset: 4px; }
.btn:disabled { filter: grayscale(.65) brightness(.72); cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.btn--big { font-size: 15px; padding: 16px 26px; border-radius: 14px; }
.btn--glow { animation: ctaGlow 2.2s ease-in-out infinite; }
@keyframes ctaGlow {
  50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 0 #8a3504, 0 0 0 7px rgba(255, 122, 28, .14), 0 0 46px rgba(255, 122, 28, .7); }
}

.btn--ghost {
  background: rgba(164, 104, 255, .08); color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(164, 104, 255, .6), 0 0 18px rgba(164, 104, 255, .18);
}
.btn--ghost:hover { color: var(--ink); background: rgba(164, 104, 255, .16); }
.btn--ghost:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(164, 104, 255, .6); }

.btn--compact { font-size: 11px; padding: 8px 12px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #8a3504; }
.btn--compact:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 0 #8a3504; }
.btn--compact.btn--ghost { box-shadow: inset 0 0 0 2px rgba(164, 104, 255, .6); }

.btn--x { background: linear-gradient(180deg, #ff6a80, var(--blood)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #8e1428; }
.btn--x:hover { color: #fff; }

.btn--acct   { background: linear-gradient(180deg, #c49bff, var(--witch)); color: #1a0833; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #4b2290; }
.btn--arcade { background: linear-gradient(180deg, #c8ff8a, var(--slime)); color: #10200a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 0 #4a8a12; }
.btn--cart   { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 0 #8a3504; }
.btn--acct, .btn--arcade, .btn--cart { font-size: 12px; padding: 10px 13px; }
.btn--acct:hover { color: #1a0833; }
.btn--arcade:hover { color: #10200a; }
.btn--cart.bump { animation: cartBump .35s ease; }
@keyframes cartBump { 30% { transform: scale(1.14) rotate(-4deg); } 65% { transform: scale(.95); } }

/* ============================================================
   HUD
   ============================================================ */
.hud {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px;
  background: rgba(12, 7, 20, .84);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.hud::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 6px; pointer-events: none;
  background: radial-gradient(circle, var(--pumpkin-2) 0 1.8px, transparent 2.6px) 0 50% / 18px 6px repeat-x;
  opacity: .8; animation: bulbTwinkle 1.4s steps(1) infinite;
}
.hud__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.hud__brand:hover { color: var(--ink); }
.hud__logo { display: block; filter: drop-shadow(0 0 10px rgba(255, 122, 28, .5)); }
.hud__title { font-family: var(--spooky); font-size: 29px; letter-spacing: .04em; line-height: 1; color: var(--pumpkin); text-shadow: 0 0 14px rgba(255, 122, 28, .55); }
.hud__nav { display: flex; gap: 4px; margin-left: auto; }
.hud__nav a { font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--ink-dim); padding: 8px 12px; border-radius: 10px; }
.hud__nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.hud__stats { display: flex; align-items: center; gap: 10px; }
.hud__stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 14px; color: var(--ink-dim); white-space: nowrap;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px;
}
.hud__stat b { color: var(--ink); }
.hud__tokens b { color: var(--candle); }
.mnav { display: none; }

@media (max-width: 760px) {
  .hud { gap: 8px; padding: 8px 12px 0; flex-wrap: wrap; }
  .hud__nav, .hud__stat { display: none; }
  body[data-screen="arcade"] .hud__tokens { display: inline-flex; }
  .hud__title { font-size: 23px; }
  .hud__stats { margin-left: auto; gap: 8px; }
  .btn-label { display: none; }
  .btn--acct, .btn--arcade, .btn--cart {
    width: 44px; height: 42px; padding: 0; font-size: 18px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .mnav { display: flex; width: 100%; margin-top: 8px; border-top: 1px solid var(--line); }
  .mnav a { flex: 1; text-align: center; font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: 10px 4px; }
}

/* ============================================================
   TITLE SCREEN
   ============================================================ */
.screen.start { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.hero { width: 100%; padding: 84px 20px 22vh; text-align: center; }
.hero__inner { max-width: 840px; margin: 0 auto; }
.hero__logo { display: block; margin: 0 auto; width: clamp(96px, 16vw, 128px); height: auto; animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 0 26px rgba(255, 122, 28, .6)); }

.neon-sign {
  position: relative; display: inline-block;
  margin: 12px 0 14px; padding: 30px 46px 36px; border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255, 122, 28, .17), transparent 65%),
    linear-gradient(180deg, #1b0f2a, #0f0819);
  border: 2px solid #3a2358;
  box-shadow: 0 0 0 6px rgba(10, 6, 18, .92), 0 0 70px rgba(255, 122, 28, .25), inset 0 0 40px rgba(0, 0, 0, .65);
}
.bulbs { position: absolute; inset: 12px; pointer-events: none; }
.bulb {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d9, var(--candle) 55%, #d98f00);
  box-shadow: 0 0 8px 2px rgba(255, 210, 74, .7);
  animation: bulbChase 1s steps(1) infinite;
}
.bulb--b { animation-delay: .5s; }

.hero__title {
  font-family: var(--spooky); font-weight: 400;
  font-size: clamp(58px, 13vw, 140px); line-height: .9; letter-spacing: .04em;
  color: #ffe9d2;
  text-shadow: 0 0 4px #fff4e6, 0 0 14px var(--pumpkin), 0 0 34px var(--pumpkin), 0 0 72px rgba(255, 122, 28, .7);
}
.flicker { animation: neonFlicker 5s linear infinite; }
.flicker--2 { animation-duration: 7s; animation-delay: 1.3s; }
@keyframes neonFlicker {
  0%, 18%, 22%, 26%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .3; text-shadow: none; }
}
.hero__tag { font-family: var(--carny); font-size: clamp(15px, 2.6vw, 22px); letter-spacing: .12em; color: var(--slime); text-shadow: 0 0 14px rgba(157, 255, 61, .5); margin: 6px 0 0; }
.hero__tag span { color: var(--pumpkin-2); margin: 0 8px; }
.hero__blurb { font-size: clamp(16px, 2.2vw, 19px); color: var(--ink-dim); max-width: 560px; margin: 18px auto 30px; }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__small { margin: 28px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .24em; color: var(--ink-mute); }

@media (max-width: 520px) {
  .neon-sign { padding: 24px 22px 28px; }
  .bulbs { inset: 9px; }
}

/* ============================================================
   TICKER + SECTION HEADS
   ============================================================ */
.ticker {
  position: relative; overflow: hidden; padding: 15px 0;
  background: linear-gradient(180deg, #1d102f, #120a1e);
  border-block: 1px solid var(--line-2);
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: radial-gradient(circle, var(--pumpkin-2) 0 2px, transparent 2.8px) 0 50% / 20px 6px repeat-x;
  animation: bulbChase 1s steps(1) infinite;
}
.ticker::before { top: 3px; }
.ticker::after { bottom: 3px; animation-delay: .5s; }
.ticker__track { display: flex; width: max-content; animation: tickerScroll 44s linear infinite; will-change: transform; }
.ticker__track span { white-space: nowrap; padding-right: 20px; font-weight: 800; font-size: 14px; letter-spacing: .16em; color: var(--pumpkin-2); text-shadow: 0 0 12px rgba(255, 122, 28, .55); }
@keyframes tickerScroll { to { transform: translateX(-50%); } }

.section-head { text-align: center; max-width: 760px; margin: 72px auto 34px; padding: 0 16px; }
.section-head--tight { margin: 8px auto 20px; }
.section-kicker { font-family: var(--carny); font-size: 15px; letter-spacing: .12em; color: var(--slime); text-shadow: 0 0 12px rgba(157, 255, 61, .45); margin: 0 0 8px; }
.section-title {
  font-family: var(--spooky); font-weight: 400;
  font-size: clamp(40px, 7vw, 66px); line-height: 1; letter-spacing: .03em;
  color: var(--pumpkin); text-shadow: 0 0 18px rgba(255, 122, 28, .5), 0 4px 0 #4a1c05;
}
.section-sub { color: var(--ink-dim); font-size: 17px; margin: 14px 0 0; }
.arcade-cta { margin-top: 22px; }

/* ============================================================
   SHOP GRID + PRODUCT CARDS
   ============================================================ */
.shop { max-width: 1160px; margin: 0 auto; padding: 0 18px 30px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr)); gap: 24px; }

.card {
  position: relative; display: flex; flex-direction: column;
  padding: 14px 14px 16px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(42, 26, 66, .96), rgba(20, 12, 33, .98));
  border: 1px solid rgba(255, 140, 60, .22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  animation: cardIn .5s ease-out backwards;
}
.card:nth-child(2) { animation-delay: .08s; }
.card:nth-child(3) { animation-delay: .16s; }
.card:nth-child(4) { animation-delay: .24s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } }
.card:hover {
  transform: translateY(-6px); border-color: rgba(255, 140, 60, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), var(--shadow), 0 0 44px rgba(255, 122, 28, .25);
}
.card__art { position: relative; min-height: 180px; border-radius: 16px; display: grid; place-items: center; padding: 20px; overflow: hidden; }
.card__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(180deg, transparent 55%, rgba(8, 4, 14, .45));
}
.card__art img.brand-logo { position: relative; z-index: 1; max-width: 100%; max-height: 140px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); transition: transform .3s ease; }
.card:hover .card__art img.brand-logo { transform: scale(1.06) rotate(-1.5deg); }
.brand-wordmark { position: relative; z-index: 1; font-family: var(--spooky); font-size: 30px; line-height: 1.1; text-align: center; padding: 8px; }
.card__tag, .card__urgency {
  position: absolute; z-index: 2; top: 24px;
  font-weight: 900; font-size: 11px; letter-spacing: .12em;
  padding: 6px 10px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
}
.card__tag { right: 24px; background: var(--candle); color: #2a1300; }
.card__tag--sale, .card__tag--soldout { background: var(--blood); color: #fff; }
.card__urgency { left: 24px; background: var(--blood); color: #fff; animation: urgencyPulse 1.4s ease-in-out infinite; }
.card__urgency--edition { background: var(--witch); animation: none; }
.card--soldout .card__art { filter: grayscale(.7); opacity: .55; }
.card--soldout .card__name, .card--soldout .card__tagline { opacity: .6; }
.card__name { font-weight: 900; font-size: 18px; letter-spacing: .03em; margin: 14px 4px 4px; }
.card__tagline { color: var(--ink-dim); font-size: 14px; margin: 0 4px 8px; min-height: 2.8em; }
/* the art and VIEW MORE both open the full product screen */
button.card__art { width: 100%; border: 0; font: inherit; color: inherit; cursor: pointer; }
.card__more {
  align-self: flex-start; margin: 0 4px 14px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--carny); font-size: 13px; letter-spacing: .12em; color: var(--slime); text-shadow: 0 0 10px rgba(157, 255, 61, .35);
}
.card__more:hover { color: var(--candle); }

.stats { list-style: none; margin: 0 4px 14px; padding: 0; display: grid; gap: 7px; }
.stat { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; font-weight: 800; font-size: 10px; letter-spacing: .14em; color: var(--ink-mute); }
.stat__bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.stat__fill { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 10px currentColor; animation: fillIn .8s ease-out backwards; }
.stat:nth-child(2) .stat__fill { animation-delay: .12s; }
.stat:nth-child(3) .stat__fill { animation-delay: .24s; }
@keyframes fillIn { from { width: 0; } }
.stat--spd .stat__fill { background: linear-gradient(90deg, #ffb266, var(--pumpkin)); color: var(--pumpkin); }
.stat--cap .stat__fill { background: linear-gradient(90deg, #6fe01e, var(--slime)); color: var(--slime); }
.stat--arm .stat__fill { background: linear-gradient(90deg, #7a3fe0, var(--witch)); color: var(--witch); }

.card__foot { margin-top: auto; display: grid; gap: 10px; padding: 12px 4px 0; border-top: 1px dashed rgba(255, 255, 255, .1); }
.card__price { font-weight: 900; font-size: 26px; line-height: 1; color: var(--candle); text-shadow: 0 0 14px rgba(255, 210, 74, .35); white-space: nowrap; }
.card__price small { font-size: 16px; color: var(--ink-dim); margin-right: 1px; }
.card__was { font-size: 15px; color: var(--ink-mute); text-decoration-color: var(--blood); text-shadow: none; margin-right: 6px; }
.card__buy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ver {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 8px; cursor: pointer; text-overflow: ellipsis;
}
.ver:focus { outline: none; border-color: var(--pumpkin); }
.card.added { animation: pop .35s ease; }
@keyframes pop { 50% { transform: scale(1.03); } }

/* ============================================================
   HOW IT WORKS — admission tickets
   ============================================================ */
.how { max-width: 1040px; margin: 0 auto; padding: 0 18px 30px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step {
  position: relative; text-align: center; padding: 50px 26px 28px; border-radius: 16px;
  background: linear-gradient(180deg, #f6ead2, #e6d2ab); color: #2a1730;
  -webkit-mask: var(--notch-mask); mask: var(--notch-mask);
}
.ticket-stub { display: block; font-family: var(--carny); font-size: 14px; letter-spacing: .18em; color: var(--pumpkin-d); margin: 0; }
.step .ticket-stub { position: absolute; top: 16px; left: 0; right: 0; }
.step .ticket-stub::after { content: ""; display: block; margin: 9px 22px 0; border-top: 2px dashed rgba(42, 23, 48, .25); }
.step__num {
  width: 54px; height: 54px; margin: 16px auto 12px; display: grid; place-items: center; border-radius: 50%;
  font-weight: 900; font-size: 24px; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--pumpkin-2), var(--pumpkin-d));
  box-shadow: 0 6px 14px rgba(184, 72, 10, .4);
}
.step h3 { font-weight: 900; font-size: 17px; letter-spacing: .08em; margin: 0 0 6px; }
.step p { margin: 0; color: #5a4468; font-size: 15px; }
.step b { color: #2a1730; }

/* ============================================================
   REVIEWS — shared card, shop teaser, full page
   ============================================================ */
.teaser { max-width: 1120px; margin: 0 auto; padding: 0 18px 30px; }
.teaser__summary { display: flex; justify-content: center; margin: -12px 0 22px; }
.teaser__list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); align-items: start; }
.teaser__cta { text-align: center; margin-top: 26px; }
.teaser__score { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 210, 74, .35); font-weight: 800; }
.teaser__score b { font-size: 22px; color: var(--candle); }

.review {
  background: var(--panel-bg); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
.review__head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; }
.review__avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 900; font-size: 15px; color: #2a1300;
  background: radial-gradient(circle at 35% 30%, var(--candle), var(--pumpkin));
  box-shadow: 0 0 0 2px rgba(255, 210, 74, .3);
}
.review__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.review__who b { font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review__stars { color: var(--candle); font-size: 14px; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255, 210, 74, .4); }
.review__when { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.review__delbtn { background: none; border: 0; padding: 4px 6px; font-size: 14px; line-height: 1; color: var(--ink-mute); cursor: pointer; }
.review__delbtn:hover { color: var(--blood); }
.review__body { margin: 12px 0 0; color: var(--ink-dim); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.review__photo { display: block; width: 100%; max-height: 260px; object-fit: cover; margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); }

.review-form { display: flex; flex-direction: column; gap: 12px; }
#chatBody .review-form { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--line); }
.review-stars { display: flex; gap: 6px; justify-content: center; }
.review-star { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-size: 34px; line-height: 1; color: rgba(255, 255, 255, .18); transition: transform .12s, color .12s; }
.review-star:hover { transform: scale(1.15); }
.review-star.is-on { color: var(--candle); text-shadow: 0 0 14px rgba(255, 210, 74, .6); }
.review-body { width: 100%; resize: vertical; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.review-photolabel { font-size: 13px; font-weight: 700; color: var(--ink-dim); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review-photolabel input { font-size: 13px; color: var(--ink-dim); max-width: 100%; }
.review-summary { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 210, 74, .35); }
.review-summary:empty { display: none; }
.review-summary__stars { color: var(--candle); font-size: 20px; letter-spacing: 1px; }
.review-summary__num { font-weight: 900; font-size: 18px; }
.review-summary__meta { font-size: 13px; color: var(--ink-dim); }
.review-list { display: grid; gap: 12px; padding: 2px; }
.chat__allreviews { display: block; text-align: center; font-weight: 800; font-size: 13px; letter-spacing: .08em; margin: 0 0 14px; }

.reviewspage { max-width: 1120px; margin: 0 auto; padding: 26px 18px 100px; }
.rv-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
.rv-summary, .rv-write { background: var(--panel-bg); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.rv-write { border-color: var(--line-2); }
.rv-write__h { font-family: var(--spooky); font-weight: 400; font-size: 28px; color: var(--candle); text-align: center; margin: 0 0 12px; }
.rv-score { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.rv-score__num { font-family: var(--spooky); font-size: 68px; line-height: 1; color: var(--candle); text-shadow: 0 0 20px rgba(255, 210, 74, .4); }
.rv-score__stars { display: block; color: var(--candle); font-size: 22px; letter-spacing: 3px; }
.rv-score__meta { color: var(--ink-dim); font-size: 14px; }
.rv-bars { display: grid; gap: 6px; }
.rv-bar {
  display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 10px;
  width: 100%; background: none; border: 0; padding: 5px 8px; border-radius: 8px; cursor: pointer;
  color: var(--ink-dim); font-weight: 800; font-size: 13px; text-align: left;
}
.rv-bar:hover, .rv-bar.is-sel { background: rgba(255, 255, 255, .06); color: var(--ink); }
.rv-bar__track { height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.rv-bar__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pumpkin), var(--candle)); }
.rv-bar__count { text-align: right; color: var(--ink-mute); }
.rv-login { text-align: center; }
.rv-login p { color: var(--ink-dim); margin: 0 0 14px; }
.rv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 28px 0 18px; }
.rv-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-chip {
  font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--ink-dim);
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
}
.rv-chip:hover { color: var(--ink); border-color: rgba(255, 140, 60, .5); }
.rv-chip.is-sel { background: var(--pumpkin); color: #2a1300; border-color: transparent; box-shadow: 0 0 16px rgba(255, 122, 28, .45); }
.rv-sort { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 12px; letter-spacing: .12em; color: var(--ink-mute); }
.rv-sort select { font-size: 14px; font-weight: 600; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.rv-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.rv-more { text-align: center; margin-top: 26px; }
@media (max-width: 820px) { .rv-top { grid-template-columns: 1fr; } }

/* ============================================================
   ABOUT / FAQ / FOOTER
   ============================================================ */
.about { max-width: 900px; margin: 0 auto; padding: 40px 18px 20px; }
.about__panel {
  text-align: center; padding: 38px 30px; border-radius: 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 28, .15), transparent 60%), linear-gradient(180deg, rgba(42, 26, 66, .95), rgba(20, 12, 33, .97));
  border: 1px solid var(--line-2); box-shadow: var(--shadow);
}
.about__panel p:not(.section-kicker) { color: var(--ink-dim); font-size: 17px; max-width: 640px; margin: 16px auto 0; }
.about__panel b { color: var(--ink); }
.about__badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.badge { font-weight: 800; font-size: 12px; letter-spacing: .1em; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--ink); }

.faq { max-width: 860px; margin: 0 auto; padding: 0 18px 50px; }
.faq__list { display: grid; gap: 12px; }
.faq__item { background: rgba(27, 17, 48, .92); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq__item summary { cursor: pointer; list-style: none; padding: 16px 18px; font-weight: 800; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--pumpkin); transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item[open] { border-color: rgba(255, 140, 60, .45); }
.faq__item p { margin: 0; padding: 0 18px 16px; color: var(--ink-dim); }
.faq__item p b { color: var(--ink); }
.faq__item .btn { margin: 0 18px 18px; }

.footer { text-align: center; padding: 46px 18px 64px; margin-top: 30px; background: linear-gradient(180deg, transparent, rgba(7, 4, 12, .92) 30%); border-top: 1px solid var(--line-2); }
.footer img { filter: drop-shadow(0 0 12px rgba(255, 122, 28, .5)); }
.footer__brand { font-family: var(--spooky); font-size: 36px; line-height: 1; color: var(--pumpkin); text-shadow: 0 0 16px rgba(255, 122, 28, .5); margin: 8px 0 14px; }
.footer__nav { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.footer__nav a { font-weight: 700; color: var(--ink-dim); }
.footer__nav a:hover { color: var(--pumpkin-2); }
.footer__small { font-size: 13px; color: var(--ink-mute); margin: 0; }

/* ============================================================
   CART / CHECKOUT
   ============================================================ */
.cartpage { max-width: 780px; margin: 0 auto; padding: 28px 18px 100px; min-height: 100vh; }
.cartpage__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cartpage__head .section-title { font-size: clamp(36px, 6vw, 50px); text-align: left; }
.cartpage__items { list-style: none; margin: 0 0 20px; padding: 6px 18px; border-radius: 18px; background: var(--panel-bg); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cartpage__items:empty { display: none; }
.line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.line:last-child { border-bottom: 0; }
.line__art { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.line__art img.brand-logo { max-width: 46px; max-height: 46px; object-fit: contain; }
.line__art .brand-wordmark { font-size: 12px; padding: 2px; }
.line__name { font-weight: 800; font-size: 15px; }
.line__price { font-size: 14px; color: var(--ink-dim); }
.line__price b { color: var(--candle); font-size: 17px; }
.qty { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qty button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--ink); font-weight: 900; font-size: 16px; cursor: pointer; }
.qty button:hover { background: var(--pumpkin); color: #2a1300; border-color: transparent; }
.qty span { min-width: 20px; text-align: center; font-weight: 900; color: var(--candle); }
.line__rm { background: none; border: 0; padding: 0; margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--blood); cursor: pointer; }
.line__rm:hover { text-decoration: underline; }
.drawer__empty { text-align: center; color: var(--ink-dim); padding: 40px 18px; font-size: 18px; }

.checkout { padding: 24px 22px 26px; border-radius: 20px; background: var(--panel-bg); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.checkout[hidden] { display: none; }
.checkout__h { font-weight: 900; font-size: 15px; letter-spacing: .14em; color: var(--pumpkin-2); margin: 26px 0 14px; }
.checkout__h:first-of-type { margin-top: 4px; }
.checkout__hint { display: block; margin-top: 4px; font-weight: 600; font-size: 13px; letter-spacing: .02em; color: var(--slime); }
.checkout__grid { display: grid; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; font-weight: 800; font-size: 11px; letter-spacing: .14em; color: var(--ink-mute); }
.field input, .field textarea, .pform__field input[type="text"], .pform__field input[type="number"] {
  width: 100%; font-weight: 500; font-size: 16px; letter-spacing: normal; color: var(--ink);
  background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.field input:focus, .field textarea:focus, .pform__field input:focus, .chat__input:focus, .review-body:focus, .admin__search:focus, .admin__numinput:focus {
  outline: none; border-color: var(--pumpkin); box-shadow: 0 0 0 3px rgba(255, 122, 28, .22);
}
.field input.is-invalid { border-color: var(--blood); box-shadow: 0 0 0 3px rgba(255, 59, 87, .2); }
.field__hint { font-weight: 500; font-size: 13px; letter-spacing: normal; color: var(--ink-mute); }
.field__err { font-weight: 600; font-size: 13px; letter-spacing: normal; color: var(--blood); min-height: 1em; }
.field__err:empty { display: none; }
.areacheck { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0 4px; font-size: 15px; color: var(--ink); cursor: pointer; }
.areacheck input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pumpkin); cursor: pointer; }
.areacheck b { color: var(--candle); }
#err-area904 { display: block; margin: 2px 0 0 32px; }
#err-area904:empty { display: none; }
.paybtns { display: flex; gap: 12px; flex-wrap: wrap; }
.paybtn { background: rgba(255, 255, 255, .06); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.paybtn:hover { color: var(--ink); }
.paybtn:active { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
.paybtn.is-sel { background: linear-gradient(180deg, #c8ff8a, var(--slime)); color: #10200a; box-shadow: 0 0 20px rgba(157, 255, 61, .35); }
.pay-note { font-size: 15px; color: var(--candle); margin: 14px 0 0; min-height: 1.4em; }
.checkout__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px dashed rgba(255, 255, 255, .12); }
.drawer__total { display: flex; gap: 14px; align-items: baseline; font-weight: 900; font-size: 16px; letter-spacing: .12em; color: var(--ink-dim); }
.drawer__total b { font-size: 30px; color: var(--candle); letter-spacing: 0; }
.checkout__foot .btn { min-width: 220px; }
.discount-line { font-weight: 800; font-size: 14px; color: var(--slime); margin: 16px 0 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 560px) { .checkout__foot .btn { width: 100%; } }

/* ============================================================
   MODALS (receipt, age gate, auth, product, chat)
   ============================================================ */
.modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: flex-start; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 24px 16px;
  background: rgba(6, 3, 10, .82);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }
.modal__box {
  position: relative; margin: auto; width: 100%; max-width: 440px;
  text-align: center; padding: 34px 28px 30px; border-radius: 24px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 28, .14), transparent 55%), linear-gradient(180deg, #25173d, #150c24);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(255, 122, 28, .12);
  animation: modalIn .25s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.modal__title { font-family: var(--spooky); font-weight: 400; font-size: 38px; letter-spacing: .03em; color: var(--pumpkin); text-shadow: 0 0 16px rgba(255, 122, 28, .45); margin: 0 0 10px; }
.modal__box > p { color: var(--ink-dim); font-size: 16px; }
.modal__box > .ticket-stub { color: var(--slime); margin: -8px 0 10px; }
.modal__score { font-weight: 900; font-size: 18px; letter-spacing: .1em; margin: 16px 0; }
.modal__box > .modal__score { color: var(--ink); }
.modal__score b { color: var(--candle); font-size: 26px; }
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .06);
  color: var(--ink); font-size: 14px; cursor: pointer;
}
.modal__close:hover { background: var(--blood); border-color: transparent; }

.agegate { z-index: 10000; align-items: center; background: radial-gradient(ellipse at 50% 30%, #2a1340, #0a0612 70%); }
.agegate__box { max-width: 420px; }
.agegate__logo { width: 84px; height: auto; filter: drop-shadow(0 0 20px rgba(255, 122, 28, .6)); animation: float 3.2s ease-in-out infinite; }
.agegate__title { font-size: 34px; margin-top: 8px; }
.modal__box > .agegate__sub { margin: 0 0 24px; }
.agegate__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.modal__box > .agegate__blocked { color: var(--blood); font-weight: 700; font-size: 18px; margin: 0; }

.pay-instructions { font-weight: 700; }
.modal__box > .pay-instructions { color: var(--slime); }
.modal__box > .tokens-earned { font-weight: 800; color: var(--candle); margin: 12px 0 0; }
.modal__box > .receipt-note { font-size: 14px; margin: 14px 0 10px; }
.receipt__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 0 0 16px; }

/* ============================================================
   ENTRANCE INTRO — "ENTER IF YOU DARE": lightning, the arcade doors creak
   open, fog rolls out, the ghost ticket taker greets you, then a quick
   peek at what's inside. script.js adds the stage classes in order
   (flash, is-open, is-foggy, has-ghost, has-line, has-peek, out).
   .intro--quick is the short repeat-visit version; .intro--still is the
   reduced-motion version (everything appears at once, nothing moves).
   ============================================================ */
.intro {
  position: fixed; inset: 0; z-index: 10001; overflow: hidden auto;
  display: grid; place-items: center;
  padding: calc(56px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 50% 110%, #1c0c2e, #07040c 62%);
  -webkit-user-select: none; user-select: none;
}
.intro[hidden] { display: none; }
.intro.is-on { animation: seqIn .15s ease both; }
.intro.out { animation: seqOut .38s ease forwards; pointer-events: none; }
@keyframes seqIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes seqOut { to { opacity: 0; } }
.intro.flash::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #e9ddff; animation: seqFlash .28s ease-out forwards; }
@keyframes seqFlash { 0% { opacity: .95; } 30% { opacity: .2; } 45% { opacity: .7; } 100% { opacity: 0; } }

.intro__skip {
  position: absolute; z-index: 6;
  top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right));
  font: 800 12px/1 var(--ui); letter-spacing: .18em; color: var(--ink-dim);
  background: rgba(12, 6, 22, .75); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 18px; min-height: 44px; cursor: pointer;
}
.intro__skip:hover, .intro__skip:focus-visible { color: var(--candle); border-color: var(--candle); outline: none; box-shadow: 0 0 0 3px rgba(255, 210, 74, .25); }

.intro__stage { position: relative; width: min(100%, 560px); display: flex; flex-direction: column; align-items: center; }

/* ---- the doorway ---- */
.intro__doorwrap { position: relative; margin-bottom: 78px; }
.intro__sign {
  position: absolute; left: 50%; top: -26px; transform: translateX(-50%); z-index: 2;
  font-family: var(--spooky); font-size: 26px; line-height: 1; letter-spacing: .08em; white-space: nowrap;
  color: var(--pumpkin); text-shadow: 0 0 12px var(--pumpkin), 0 0 30px rgba(255, 122, 28, .5);
  background: #12081c; border: 3px solid #6a3818; border-radius: 10px; padding: 8px 18px;
  box-shadow: 0 0 0 3px #2a1408, 0 6px 18px rgba(0, 0, 0, .6);
  animation: introSignFlicker 3.2s linear infinite;
}
@keyframes introSignFlicker { 0%, 19%, 23%, 100% { opacity: 1; } 21% { opacity: .35; } 61% { opacity: 1; } 63% { opacity: .5; } 65% { opacity: 1; } }
.intro__doorway {
  position: relative; height: min(36vh, 300px); aspect-ratio: 5 / 6;
  border: 7px solid #2a1408; border-bottom-width: 12px; border-radius: 150px 150px 10px 10px;
  background: #050308; overflow: hidden; perspective: 640px;
  box-shadow: 0 0 0 5px #6a3818, 0 0 0 9px #2a1408, 0 0 46px rgba(255, 122, 28, .12), inset 0 0 36px #000;
}
.intro__inside { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; letter-spacing: 6px; filter: blur(1.5px); opacity: 0; transition: opacity .9s ease .35s; }
.intro__glow {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease .2s;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 170, 70, .95), rgba(255, 110, 30, .6) 38%, rgba(140, 60, 200, .4) 68%, transparent 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px);
}
.intro__door {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2;
  background: repeating-linear-gradient(90deg, #6a3818 0 18px, #55290f 18px 21px);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, .6);
  transition: transform 1.15s cubic-bezier(.35, 1.25, .45, 1);
  backface-visibility: hidden;
}
.intro__door--l { left: 0; transform-origin: left center; border-radius: 144px 0 0 0; }
.intro__door--r { right: 0; transform-origin: right center; border-radius: 0 144px 0 0; }
.intro__handle { position: absolute; top: 55%; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--candle); box-shadow: 0 0 10px rgba(255, 210, 74, .65); }
.intro__door--l .intro__handle { right: 12px; }
.intro__door--r .intro__handle { left: 12px; }
.intro.is-open .intro__door--l { transform: rotateY(-108deg); }
.intro.is-open .intro__door--r { transform: rotateY(108deg); }
.intro.is-open .intro__glow, .intro.is-open .intro__inside { opacity: 1; }
.intro.is-open .intro__doorway { box-shadow: 0 0 0 5px #6a3818, 0 0 0 9px #2a1408, 0 0 70px rgba(255, 122, 28, .45), inset 0 0 36px #000; transition: box-shadow 1s ease .3s; }

/* ---- fog rolling out of the door ---- */
.intro__fog { position: absolute; left: 50%; bottom: -30px; width: 190%; height: 45%; transform: translateX(-50%); pointer-events: none; opacity: 0; z-index: 3; }
.intro__fog span {
  position: absolute; bottom: 0; width: 42%; height: 70%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(215, 200, 245, .8), rgba(215, 200, 245, 0) 70%);
  filter: blur(7px); opacity: 0;
}
.intro__fog span:nth-child(1) { left: 28%; --dx: -60%; --dy: -40%; }
.intro__fog span:nth-child(2) { left: 30%; --dx: 60%;  --dy: -30%; }
.intro__fog span:nth-child(3) { left: 24%; --dx: -25%; --dy: -70%; }
.intro__fog span:nth-child(4) { left: 34%; --dx: 30%;  --dy: -60%; }
.intro__fog span:nth-child(5) { left: 29%; --dx: 0%;   --dy: -20%; }
.intro.is-foggy .intro__fog { opacity: 1; }
.intro.is-foggy .intro__fog span { animation: fogRoll 3.4s ease-out forwards; }
.intro.is-foggy .intro__fog span:nth-child(2) { animation-delay: .15s; }
.intro.is-foggy .intro__fog span:nth-child(3) { animation-delay: .3s; }
.intro.is-foggy .intro__fog span:nth-child(4) { animation-delay: .45s; }
.intro.is-foggy .intro__fog span:nth-child(5) { animation-delay: .6s; }
@keyframes fogRoll {
  0%   { transform: translate(0, 30%) scale(.35); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.8); opacity: .65; }
}

/* ---- the ghost ticket taker ---- */
.intro__ghost { position: absolute; left: 50%; bottom: -70px; z-index: 4; transform: translate(-50%, 46px) scale(.8); opacity: 0; transition: transform .55s cubic-bezier(.3, 1.4, .5, 1), opacity .35s ease; }
.intro.has-ghost .intro__ghost { transform: translate(-50%, 0) scale(1); opacity: 1; }
.intro.has-ghost .ghost { animation: ghostBob 2.6s ease-in-out .6s infinite; }
@keyframes ghostBob { 50% { transform: translateY(-9px) rotate(-2deg); } }
.ghost { position: relative; width: 82px; height: 96px; filter: drop-shadow(0 0 16px rgba(190, 160, 255, .55)); }
.ghost__body {
  position: absolute; left: 0; right: 0; top: 0; bottom: 12px;
  background: #f5f0fc; border-radius: 41px 41px 4px 4px;
  box-shadow: inset -10px -6px 0 rgba(170, 140, 230, .28);
}
.ghost__body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;
  background: radial-gradient(circle at 50% 0, #f5f0fc 9.5px, transparent 10.5px) 0 0 / 20.5px 12px repeat-x;
}
.ghost__eye { position: absolute; top: 34px; width: 11px; height: 15px; border-radius: 50%; background: #1a0c2a; }
.ghost__eye--l { left: 24px; } .ghost__eye--r { left: 46px; }
.ghost__eye::after { content: ""; position: absolute; top: 3px; left: 3px; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.ghost__mouth { position: absolute; top: 56px; left: 34px; width: 13px; height: 9px; border-radius: 50%; background: #1a0c2a; }
.ghost__cap {
  position: absolute; top: -13px; left: 50%; width: 46px; height: 22px; z-index: 2;
  transform: translateX(-50%) rotate(-7deg);
  background: var(--blood); border-radius: 7px 7px 3px 3px;
  box-shadow: inset 0 -6px 0 #8a1020, 0 2px 6px rgba(0, 0, 0, .5);
}
.ghost__cap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 3px; background: var(--candle); }
.ghost__cap::after { content: ""; position: absolute; left: 50%; top: 5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 6px rgba(255, 210, 74, .8); }
.ghost__ticket { position: absolute; right: -22px; top: 44px; font-size: 26px; line-height: 1; transform: rotate(22deg); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }

/* ---- the speech bubble ---- */
.intro__bubble {
  position: relative; max-width: 100%; margin: 0;
  background: var(--cream); color: #2a1300; border-radius: 18px; padding: 14px 20px 16px;
  text-align: center; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(10px) scale(.9); transition: transform .38s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease;
}
.intro__bubble::before { content: ""; position: absolute; top: -12px; left: 50%; margin-left: -12px; border: 12px solid transparent; border-top: 0; border-bottom-color: var(--cream); }
.intro.has-line .intro__bubble { opacity: 1; transform: none; }
.intro__who { margin: 0 0 6px; font: 800 11px/1 var(--ui); letter-spacing: .22em; color: var(--pumpkin-d); }
.intro__line { margin: 0; font: 700 clamp(16px, 2.3vw, 19px)/1.35 var(--ui); }

/* ---- the peek at what's inside ---- */
.intro__peek { margin: 16px 0 0; text-align: center; }
.intro__kicker { margin: 0 0 8px; font-family: var(--carny); font-size: 12px; letter-spacing: .22em; color: var(--slime); text-shadow: 0 0 12px rgba(157, 255, 61, .45); opacity: 0; transition: opacity .3s ease; }
.intro__peek ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.intro__peek li {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1 var(--ui); letter-spacing: .03em; color: var(--ink);
  background: rgba(164, 104, 255, .12); border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px;
  opacity: 0; transform: translateY(10px) scale(.9); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .25s ease;
}
.intro__peek li b { color: var(--candle); }
.intro.has-peek .intro__kicker { opacity: 1; }
.intro.has-peek .intro__peek li { opacity: 1; transform: none; }
.intro.has-peek .intro__peek li:nth-child(2) { transition-delay: .14s; }
.intro.has-peek .intro__peek li:nth-child(3) { transition-delay: .28s; }
.intro.has-peek .intro__peek li:nth-child(4) { transition-delay: .42s; }

/* the short repeat-visit version: quicker doors, no peek */
.intro--quick .intro__door { transition-duration: .5s; }
.intro--quick .intro__glow, .intro--quick .intro__inside { transition-delay: 0s; transition-duration: .5s; }
.intro--quick .intro__peek { display: none; }
.intro--quick .intro__doorway { height: min(30vh, 240px); }

/* reduced motion: nothing moves, it's all just there */
.intro--still, .intro--still * { animation: none !important; transition: none !important; }
.intro--still .intro__fog span { opacity: .5; transform: translate(var(--dx), var(--dy)) scale(1.5); }

/* small phones: keep the whole show in view */
@media (max-height: 640px), (max-width: 380px) {
  .intro { padding-top: calc(50px + env(safe-area-inset-top)); }
  .intro__doorway { height: min(30vh, 220px); }
  .intro__doorwrap { margin-bottom: 66px; }
  .intro__sign { font-size: 21px; top: -22px; padding: 6px 14px; }
  .ghost { transform: scale(.85); transform-origin: bottom center; }
  .intro__line { font-size: 15px; }
  .intro__peek li { font-size: 12px; padding: 8px 11px; }
}
/* ---------- auth / account modal ---------- */
.auth__box { max-width: 400px; }
#authBody { display: flex; flex-direction: column; gap: 14px; text-align: center; }
#authBody .auth__title { margin: 0; }
.auth__msg { font-size: 14px; font-weight: 600; color: var(--candle); min-height: 1.2em; margin: 0; }
.auth__msg:empty { min-height: 0; }
.auth__field { text-align: left; }
.pwfield { position: relative; display: flex; }
.pwfield input { flex: 1; width: 100%; padding-right: 44px; }
.pwfield__toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: transparent; border: 0; cursor: pointer; padding: 6px 8px; font-size: 17px; line-height: 1; color: var(--ink-dim); }
.pwfield__toggle:hover { color: var(--pumpkin-2); }
.auth__remember { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 13px; color: var(--ink-dim); cursor: pointer; text-align: left; margin: 0; }
.auth__remember input { width: 17px; height: 17px; accent-color: var(--pumpkin); cursor: pointer; flex: 0 0 auto; }
.auth__box .btn { width: 100%; margin: 0; }
.auth__switch { font-size: 14px; color: var(--ink-dim); margin: 0; }
.auth__email { font-size: 15px; color: var(--ink); margin: 0; word-break: break-all; }
.token-icon { width: 1.35em; height: 1.35em; vertical-align: -.3em; }
.token-badge {
  align-self: center; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: 999px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 210, 74, .4);
  box-shadow: 0 0 24px rgba(255, 210, 74, .18);
  font-weight: 900; color: var(--candle);
}
.token-badge b { font-size: 24px; color: #fff; }
.token-badge span { font-size: 11px; letter-spacing: .14em; color: var(--ink-dim); }
.myorders { text-align: left; }
.myorders__h { font-weight: 900; font-size: 13px; letter-spacing: .14em; color: var(--pumpkin-2); margin: 0 0 8px; }
.myorders__row { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: 14px; color: var(--ink-mute); padding: 8px 0; border-bottom: 1px dashed rgba(255, 255, 255, .1); }
.myorders__row span:nth-child(2) { flex: 1; color: var(--ink); }
.myorders__row b { color: var(--candle); white-space: nowrap; }
.myorders__none, .myorders__loading { color: var(--ink-mute); font-size: 15px; text-align: center; margin: 8px 0; }

/* ============================================================
   ARCADE
   ============================================================ */
.arcade { max-width: 1120px; margin: 0 auto; padding: 26px 18px 100px; }
.arcade__bal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; margin: 0 auto; padding: 12px 22px; border-radius: 999px;
  background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 210, 74, .35);
  box-shadow: 0 0 30px rgba(255, 210, 74, .15); font-weight: 900;
}
.arcade__bal b { font-size: 30px; line-height: 1; color: var(--candle); text-shadow: 0 0 14px rgba(255, 210, 74, .5); }
.arcade__bal span { font-size: 12px; letter-spacing: .16em; color: var(--ink-dim); }
.arcade__bal .token-icon { width: 30px; height: 30px; }
.arcade__intro { text-align: center; color: var(--ink-dim); max-width: 620px; margin: 14px auto 24px; }
.halloween-banner {
  text-align: center; font-weight: 900; letter-spacing: .05em; color: #2a1300;
  background: linear-gradient(90deg, var(--pumpkin), var(--candle), var(--pumpkin));
  padding: 12px 16px; border-radius: 14px; box-shadow: 0 0 30px rgba(255, 122, 28, .4);
  max-width: 760px; margin: 0 auto 22px;
}
.halloween-banner[hidden] { display: none; }
.arcade__duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 22px; margin-top: 22px; align-items: start; }
.arcade__sub {
  font-family: var(--spooky); font-weight: 400; font-size: clamp(32px, 5vw, 44px); letter-spacing: .03em;
  color: var(--pumpkin); text-shadow: 0 0 16px rgba(255, 122, 28, .45); text-align: center; margin: 56px 0 22px;
}
.arcade__sub span { display: block; font-family: var(--carny); font-size: 14px; letter-spacing: .16em; color: var(--slime); text-shadow: 0 0 10px rgba(157, 255, 61, .4); margin-top: 6px; }

.panel { background: var(--panel-bg); border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45), var(--shadow); }
.panel__h { font-family: var(--spooky); font-weight: 400; font-size: 34px; letter-spacing: .04em; color: var(--candle); text-shadow: 0 0 14px rgba(255, 210, 74, .35); text-align: center; margin: 0 0 12px; }

/* ---------- trick-or-treat ---------- */
/* Trick-or-Treat door styles live at the end of this file */

/* ---------- wheel of fate ---------- */
.wheel-panel { text-align: center; }
.wheel-wrap { position: relative; width: min(340px, 80vw); margin: 22px auto 20px; }
/* the glow sits on a still layer behind the wheel: a shadow on the spinning
   canvas itself had to be redrawn every frame, which made spins stutter on phones */
.wheel-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 26px 4px rgba(255, 122, 28, .28); pointer-events: none; }
.wheel-wrap canvas { position: relative; display: block; width: 100%; height: auto; border-radius: 50%; transition: transform 4s cubic-bezier(.15, .7, .12, 1); will-change: transform; }
.wheel-pointer { position: absolute; top: -18px; left: 50%; width: 36px; height: auto; transform: translateX(-50%); z-index: 2; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
/* the hub sits above the canvas and never rotates, so its face stays upright */
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 17%; height: auto; transform: translate(-50%, -50%); z-index: 1; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .6)); pointer-events: none; }
.wheel-cost { color: var(--ink-dim); font-size: 14px; margin: 12px 0 0; }
.wheel-result { font-weight: 800; color: var(--slime); min-height: 1.4em; margin: 10px 0 0; }

/* ---------- prize counter ---------- */
.prize-panel { display: flex; flex-direction: column; }
.prize__desc { text-align: center; color: var(--ink-dim); margin: 0 0 16px; font-size: 15px; }
.prize__list { display: grid; gap: 12px; }
.prize {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  padding: 14px 18px 14px 20px; border-radius: 14px;
  background: linear-gradient(90deg, #f6ead2, #e7d4ae); color: #2a1730;
  -webkit-mask: var(--notch-mask); mask: var(--notch-mask);
}
.prize__icon { font-size: 28px; line-height: 1; }
.prize__name { display: block; font-weight: 900; font-size: 17px; letter-spacing: .03em; line-height: 1.2; white-space: nowrap; }
.prize__cost { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-weight: 800; font-size: 13px; color: #7a3f12; }
.prize__cost .token-icon { width: 17px; height: 17px; }
.prize .btn { padding: 10px 14px; font-size: 12px; }
.prize.is-locked { opacity: .62; }
.prize__res { min-height: 1.4em; text-align: center; font-weight: 800; color: var(--slime); margin: 14px 0 0; }

/* ---------- booths (game panels) ---------- */
.games { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); align-items: start; }
.game { position: relative; overflow: hidden; padding: 62px 20px 20px; }
.booth__awning {
  position: absolute; top: 0; left: 0; right: 0; height: 42px;
  background: repeating-linear-gradient(90deg, var(--pumpkin) 0 28px, #2b1845 28px 56px);
  -webkit-mask: linear-gradient(#000 0 0) top / 100% 28px no-repeat, radial-gradient(circle 14px at 14px 28px, #000 96%, #0000) 0 0 / 28px 42px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% 28px no-repeat, radial-gradient(circle 14px at 14px 28px, #000 96%, #0000) 0 0 / 28px 42px repeat-x;
}
.booth__new { position: absolute; top: 9px; right: 12px; z-index: 2; font-weight: 900; font-size: 11px; letter-spacing: .14em; padding: 5px 10px; border-radius: 999px; background: var(--slime); color: #10200a; box-shadow: 0 0 16px rgba(157, 255, 61, .6); }
.game__h { font-family: var(--spooky); font-weight: 400; font-size: 29px; letter-spacing: .03em; text-align: center; margin: 0 0 6px; }
.game__desc { text-align: center; color: var(--ink-dim); font-size: 14px; margin: 0 0 16px; min-height: 3em; }
.game__res { text-align: center; font-weight: 700; font-size: 14px; color: var(--candle); min-height: 1.4em; margin: 12px 0 0; }
.game .btn { display: block; width: 100%; }
.game__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.game__row .btn { width: auto; }
.game__score { font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--ink-dim); white-space: nowrap; }
.game__score b { color: var(--candle); }
.game .btn[hidden] { display: none; }
.sort-live { text-align: center; font-weight: 800; font-size: 12px; letter-spacing: .1em; color: var(--slime); margin: 0 0 12px; }

.slot-bets { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.chip-bet {
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer;
  font-weight: 900; font-size: 14px; color: var(--ink);
  background: radial-gradient(circle, #2b1845 0 54%, transparent 55%), repeating-conic-gradient(var(--witch) 0 30deg, #2b1845 0 60deg);
  border: 2px solid rgba(0, 0, 0, .5); box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
  transition: transform .1s;
}
.chip-bet:hover { transform: translateY(-2px); }
.chip-bet.is-sel {
  color: #fff;
  background: radial-gradient(circle, #5a2204 0 54%, transparent 55%), repeating-conic-gradient(var(--pumpkin) 0 30deg, #fff4e0 0 60deg);
  box-shadow: 0 0 18px rgba(255, 122, 28, .6), 0 4px 0 rgba(0, 0, 0, .4);
}

/* playing cards */
.table-label { text-align: center; font-weight: 800; font-size: 12px; letter-spacing: .14em; color: var(--ink-mute); margin: 8px 0 6px; }
.table-total { color: var(--candle); }
.card-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 70px; margin-bottom: 4px; }
.card-face {
  width: 50px; height: 70px; border-radius: 8px; display: grid; place-items: center;
  font-weight: 900; font-size: 17px; color: #1a1020;
  background: linear-gradient(180deg, #fffaf0, #efe3cc); border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  animation: dealIn .25s ease-out backwards;
}
.card-face.red { color: #d11f3a; }
.card-face.back { color: transparent; background: repeating-linear-gradient(45deg, #5b2fa6 0 6px, #2b1845 6px 12px); border: 2px solid var(--cream); }
@keyframes dealIn { from { transform: translateY(-10px) rotate(-6deg); opacity: 0; } }
.bj-action-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.bj-action-row[hidden] { display: none; }
.bj-action-row .btn { width: auto; flex: 1 1 100px; }

/* roulette */
.roulette-display {
  width: 96px; height: 70px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 14px;
  font-weight: 900; font-size: 30px; background: #0d0716;
  border: 2px solid rgba(255, 210, 74, .5); box-shadow: 0 0 20px rgba(255, 210, 74, .2), inset 0 0 14px rgba(0, 0, 0, .7);
}
.roulette-display.red { color: var(--blood); }
.roulette-display.black { color: var(--ink); }
.roulette-display.green { color: var(--slime); }
.roulette-picks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.pick-btn { font-weight: 800; font-size: 12px; letter-spacing: .1em; padding: 9px 14px; border-radius: 10px; cursor: pointer; color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.pick-btn.is-sel { border-color: var(--candle); box-shadow: 0 0 0 1px var(--candle), 0 0 14px rgba(255, 210, 74, .35); }
.pick-btn--red { color: #ff7a8c; }
.pick-btn--black { color: var(--ink-dim); }
.roulette-numinput { display: block; width: 84px; margin: 0 auto 12px; text-align: center; font-size: 18px; font-weight: 800; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }

/* spooky sort */
.sort-lane { position: relative; height: 190px; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(157, 255, 61, .14), transparent 60%), #0d0716; border: 1px solid var(--line); }
.sort-lane::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--blood); box-shadow: 0 0 12px var(--blood); }
.sort-item { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 46px; height: 46px; }
.sort-item img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.sort-bins { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.sort-bin {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 78px; padding: 8px 4px;
  border-radius: 6px 6px 20px 20px; cursor: pointer; font-weight: 800; font-size: 10px; letter-spacing: .08em; color: var(--ink);
  background: linear-gradient(180deg, #3a2358, #22143a); border: 1px solid var(--line); border-top: 3px solid var(--pumpkin);
  transition: box-shadow .15s, transform .1s;
}
.sort-bin:active { transform: translateY(2px); }
.sort-bin img { width: 38px; height: 38px; object-fit: contain; }
.sort-bin img.is-big, .sort-item img.is-big { transform: scale(1.18); }
.sort-bin:disabled { opacity: .45; cursor: default; }
.sort-bin.is-hit { box-shadow: 0 0 0 2px var(--slime), 0 0 18px rgba(157, 255, 61, .6); }
.sort-bin.is-miss { box-shadow: 0 0 0 2px var(--blood), 0 0 18px rgba(255, 59, 87, .6); }

/* emoji take their alpha from the text color, and disabled buttons get a
   faded one by default — pin it, or pumpkins/spirits/zombies render ghostly
   exactly when they're meant to be watched (sequence playback, the shuffle) */
.code-pad, .code-pad:disabled, .whack-hole, .whack-hole:disabled, .shuffle-cup, .shuffle-cup:disabled { color: var(--ink); }

/* séance (simon says) */
.code-pads { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.code-pad {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  font-size: 27px; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #3a2358, #170d27);
  border: 2px solid rgba(164, 104, 255, .35); box-shadow: inset 0 0 16px rgba(0, 0, 0, .6);
  filter: grayscale(.5) brightness(.75);
  transition: transform .1s, box-shadow .1s, filter .1s;
}
.code-pad:disabled { cursor: default; }
.code-pad.is-lit { filter: none; transform: scale(1.12); box-shadow: 0 0 0 2px var(--witch), 0 0 26px rgba(164, 104, 255, .8), inset 0 0 16px rgba(164, 104, 255, .4); }
.code-pad.is-wrong { filter: none; box-shadow: 0 0 0 2px var(--blood), 0 0 22px rgba(255, 59, 87, .7); }

/* ghost toss */
.throw-track { position: relative; height: 54px; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: #0d0716; border: 1px solid var(--line); }
.throw-track::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 22px); }
.throw-zone { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, rgba(157, 255, 61, .35), rgba(157, 255, 61, .1)); border-left: 2px dashed var(--slime); border-right: 2px dashed var(--slime); }
.throw-ball { position: absolute; top: 50%; left: 0; width: 28px; height: 28px; transform: translate(-50%, -50%); }
.throw-ball.is-emoji { display: flex; align-items: center; justify-content: center; font-size: 24px; }

/* bob for apples — vertical position driven by JS; wobble is decorative */
.bob-tub { position: relative; height: 140px; margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px 8px 30px 30px; background: linear-gradient(180deg, #24150b 0%, #24150b 58%, #16384a 58%, #0b2230 100%); }
.bob-zone { position: absolute; left: 8%; right: 8%; height: 20%; background: rgba(255, 210, 74, .16); border-top: 2px dashed var(--candle); border-bottom: 2px dashed var(--candle); }
.bob-apple { position: absolute; left: 50%; top: 0; width: 26px; height: 26px; font-size: 22px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .5)); animation: bobWobble 1.4s ease-in-out infinite; }
@keyframes bobWobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-10deg); } 50% { transform: translate(-50%, -50%) rotate(10deg); } }
.bob-water { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 12px); }
.bob-ripple { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, .12), transparent 70%); animation: rippleFade 2.4s ease-in-out infinite; }
@keyframes rippleFade { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* plinko — a cobweb board */
.plinko-board {
  position: relative; height: 160px; margin-bottom: 4px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background:
    repeating-conic-gradient(from 90deg at 50% -8%, rgba(255, 255, 255, .05) 0 .6deg, transparent .6deg 12deg),
    repeating-radial-gradient(circle at 50% -8%, transparent 0 24px, rgba(255, 255, 255, .045) 24px 25px),
    radial-gradient(ellipse at 50% 0%, rgba(164, 104, 255, .16), transparent 70%),
    #0d0716;
}
.plinko-pegs { position: absolute; inset: 0; }
.plinko-peg { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(210, 190, 240, .55); transform: translate(-50%, -50%); transition: transform .15s ease, background-color .15s ease; }
.plinko-peg.is-hit { background: var(--candle); transform: translate(-50%, -50%) scale(1.9); box-shadow: 0 0 8px var(--candle); }
.plinko-ball {
  position: absolute; top: 6%; left: 50%; z-index: 2; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe0b0, var(--pumpkin) 60%, var(--pumpkin-d));
  box-shadow: 0 0 10px rgba(255, 122, 28, .85);
  transform: translate(-50%, -50%);
  transition: left .28s cubic-bezier(.34, 1.56, .64, 1), top .28s cubic-bezier(.34, 1.56, .64, 1);
}
.plinko-ball.is-bouncing { animation: plinkoBounce .28s ease-out; }
@keyframes plinkoBounce {
  0%   { transform: translate(-50%, -50%) scale(1, 1); }
  35%  { transform: translate(-50%, -50%) scale(1.35, .68); }
  65%  { transform: translate(-50%, -50%) scale(.82, 1.18); }
  100% { transform: translate(-50%, -50%) scale(1, 1); }
}
.plinko-slots { display: flex; gap: 3px; margin-bottom: 14px; }
.plinko-slot { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 11px; color: var(--ink); background: rgba(255, 255, 255, .06); border-radius: 6px; padding: 6px 1px; white-space: nowrap; }
.plinko-slot--edge { color: var(--candle); }
.plinko-slot--worst { color: var(--blood); }
.plinko-slot.is-hit { background: var(--candle); color: #2a1300; }

/* whack-a-zombie */
.whack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.whack-hole {
  position: relative; height: 82px; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 110%, rgba(157, 255, 61, .12), transparent 60%), linear-gradient(180deg, #1a0f2b, #0f0819);
  transition: box-shadow .12s;
}
.whack-hole:disabled { cursor: default; }
.whack-hole::before { /* tombstone */
  content: ""; position: absolute; left: 50%; bottom: 16px; width: 34px; height: 40px; margin-left: -17px;
  border-radius: 17px 17px 3px 3px; background: linear-gradient(180deg, #4d4360, #2c2438); opacity: .75;
}
.whack-hole::after { /* dirt mound, drawn over the bottom of whatever climbs out */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -13px; height: 32px; z-index: 2;
  border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #4d3018, #2a190b 70%);
}
.whack-mob { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1; font-size: 40px; line-height: 1; text-align: center; transform: translateY(115%); transition: transform .12s ease-out; }
.whack-hole.is-up .whack-mob { transform: translateY(0); }
.whack-hole.is-hit { box-shadow: inset 0 0 0 2px var(--slime), 0 0 18px rgba(157, 255, 61, .5); }
.whack-hole.is-hit .whack-mob { transform: translateY(12%) scale(.85) rotate(-14deg); }
.whack-hole.is-oops { box-shadow: inset 0 0 0 2px var(--blood), 0 0 18px rgba(255, 59, 87, .55); }

/* pumpkin shuffle */
.shuffle-table {
  position: relative; height: 136px; margin-bottom: 10px; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 122, 28, .22), transparent 65%), linear-gradient(180deg, #1c1030, #0f0819);
}
.shuffle-table::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, #3a1f10, #24130a); border-top: 2px solid #5a3015; }
.shuffle-cup {
  position: absolute; bottom: 12px; z-index: 1; width: 82px; height: 104px; margin-left: -41px;
  padding: 0; border: 0; background: none; cursor: pointer;
  transition: left var(--shuffle-ms, 380ms) ease-in-out, transform var(--shuffle-ms, 380ms) ease-in-out;
}
.shuffle-cup:disabled { cursor: default; }
.shuffle-cup.is-front { z-index: 3; transform: scale(1.1); }
.shuffle-cup.is-back { z-index: 0; transform: scale(.9); }
.shuffle-shell { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; font-size: 62px; line-height: 1; text-align: center; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); transition: transform .35s ease, filter .2s; }
.shuffle-candy { position: absolute; left: 0; right: 0; bottom: 4px; z-index: 1; font-size: 26px; line-height: 1; text-align: center; opacity: 0; transition: opacity .2s; }
.shuffle-cup.has-candy.is-lifted .shuffle-candy { opacity: 1; }
.shuffle-cup.is-lifted .shuffle-shell { transform: translateY(-40px) rotate(-6deg); }
.shuffle-table.is-picking .shuffle-cup:hover .shuffle-shell { transform: translateY(-6px); filter: drop-shadow(0 0 14px rgba(255, 210, 74, .8)); }
.shuffle-cup.is-picked .shuffle-shell { filter: drop-shadow(0 0 16px var(--candle)); }

/* leaderboard */
.leaderboard-panel { max-width: 620px; margin: 0 auto; border-color: rgba(255, 210, 74, .3); }
.leaderboard__note { text-align: center; color: var(--ink-dim); margin: 0 0 6px; }
.leaderboard__timer { text-align: center; font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--slime); margin: 0 0 16px; }
.leaderboard { display: grid; gap: 10px; min-width: 0; }
.leaderboard__row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); min-width: 0; }
.leaderboard__row--gold { border-color: rgba(255, 210, 74, .6); background: linear-gradient(90deg, rgba(255, 210, 74, .16), rgba(0, 0, 0, .25) 50%); box-shadow: 0 0 22px rgba(255, 210, 74, .2); }
.leaderboard__row--silver { border-color: rgba(220, 220, 235, .5); background: linear-gradient(90deg, rgba(220, 220, 235, .1), rgba(0, 0, 0, .25) 50%); }
.leaderboard__row--bronze { border-color: rgba(205, 127, 50, .55); background: linear-gradient(90deg, rgba(205, 127, 50, .12), rgba(0, 0, 0, .25) 50%); }
.leaderboard__rank { width: 32px; text-align: center; font-weight: 900; font-size: 17px; flex: 0 0 auto; }
.leaderboard__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 900; font-size: 13px; color: #fff; background: radial-gradient(circle at 35% 30%, var(--witch), var(--witch-d)); }
.leaderboard__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.leaderboard__score { font-weight: 900; color: var(--candle); flex: 0 0 auto; }
.leaderboard__delbtn { background: none; border: 0; padding: 2px 6px; font-size: 14px; color: var(--ink-mute); cursor: pointer; flex: 0 0 auto; }
.leaderboard__delbtn:hover { color: var(--blood); }

/* ============================================================
   ADMIN
   ============================================================ */
.adminpage { max-width: 840px; margin: 0 auto; padding: 28px 18px 100px; min-height: 100vh; }
.adminpage .cartpage__head .section-title { color: var(--witch); text-shadow: 0 0 16px rgba(164, 104, 255, .5), 0 4px 0 #2a1448; }
.admin__tabs { display: flex; gap: 8px; margin: 0 0 18px; flex-wrap: wrap; }
.admin__tab { font-size: 12px; padding: 9px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--ink-dim); box-shadow: inset 0 0 0 1px var(--line); }
.admin__tab:hover { color: var(--ink); }
.admin__tab:active { transform: none; box-shadow: inset 0 0 0 1px var(--line); }
.admin__tab.is-sel { background: linear-gradient(180deg, var(--pumpkin-2), var(--pumpkin)); color: #2a1300; box-shadow: 0 0 16px rgba(255, 122, 28, .4); }
.admin__status { font-weight: 800; font-size: 13px; letter-spacing: .05em; color: var(--slime); margin: 0 0 16px; }
.admin__orders, .admin__messages, .admin__users, .admin__games { display: grid; gap: 14px; }
.admin__orders[hidden], .admin__messages[hidden], .admin__users[hidden], .admin__stock[hidden], .admin__games[hidden], .admin__odds[hidden] { display: none; }
.admin__odds { display: block; }
#adminUsersTop, #adminUsersList, #adminOrdersList, #adminMessagesList, #adminGamesList { display: grid; gap: 14px; }
.admin__order, .admin__thread, .admin__user, .admin__product, .admin__stockpanel, .admin__leader {
  background: rgba(27, 17, 48, .95); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px;
}
.admin__order--pending { border-color: rgba(255, 210, 74, .6); box-shadow: 0 0 20px rgba(255, 210, 74, .18); }
.admin__row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; font-weight: 800; font-size: 15px; color: var(--ink); }
.admin__row span { color: var(--candle); }
.admin__meta { font-size: 14px; color: var(--ink-mute); margin-top: 4px; }
.admin__items { font-size: 14px; color: var(--pumpkin-2); margin-top: 8px; }
.admin__discount { font-weight: 800; font-size: 13px; color: var(--candle); margin-top: 8px; }
.admin__discount--ban { color: var(--blood); }
.admin__pending { font-size: 14px; color: var(--candle); margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin__leader { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-color: rgba(255, 210, 74, .45); }
.admin__leader b { color: var(--candle); }
.admin__stockpanel { border-color: rgba(157, 255, 61, .3); margin-bottom: 14px; }
.admin__stockpanel .admin__userrow { margin-top: 10px; }
.admin__stockpanel .admin__userrow:first-of-type { margin-top: 0; }
.admin__stockpanel .admin__userrow span { flex: 1 1 160px; }
.admin__search { display: block; width: 100%; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; }
.admin__search::placeholder { color: var(--ink-mute); }
.admin__sectionhead { font-weight: 900; font-size: 13px; letter-spacing: .12em; margin: 0; padding-top: 14px; border-top: 1px dashed var(--line); }
#adminUsersList > .admin__sectionhead:first-child,
#adminOrdersList > .admin__sectionhead:first-child,
#adminMessagesList > .admin__sectionhead:first-child { padding-top: 0; border-top: none; }
.admin__sectionhead--admin { color: var(--blood); }
.admin__sectionhead--alert { color: var(--candle); }
.admin__sectionhead--normal { color: var(--pumpkin-2); }
.admin__msgrow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(27, 17, 48, .95); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); padding: 13px 16px;
}
.admin__msgrow:hover { border-color: rgba(255, 140, 60, .5); }
.admin__msgrow--needsreply { border-color: rgba(255, 210, 74, .6); box-shadow: 0 0 16px rgba(255, 210, 74, .18); }
.admin__msgrow-name { font-weight: 800; }
.admin__msgrow-meta { font-size: 13px; color: var(--ink-mute); white-space: nowrap; }
.admin__msgback { margin-bottom: 4px; }
.admin__thread-log { display: grid; gap: 8px; margin: 12px 0; max-height: 280px; overflow-y: auto; }
.admin__user--admin { border-color: rgba(255, 59, 87, .5); }
.admin__user--banned { opacity: .7; }
.admin__uname { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font-weight: 800; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.admin__uname:hover, .admin__uname:focus-visible { color: var(--pumpkin-2); }
.admin__badge { display: inline-block; font-weight: 900; font-size: 10px; letter-spacing: .1em; color: #fff; background: var(--blood); padding: 3px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.admin__userrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.admin__useractions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.admin__tokenfield { display: flex; align-items: center; gap: 8px; }
.admin__numinput { width: 100px; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.admin__product { margin-top: 12px; }
.admin__product:first-of-type { margin-top: 0; }
.admin__pthumb { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); flex: 0 0 auto; }
.admin__pthumb--none { display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: var(--ink-mute); font-weight: 900; font-size: 16px; }
.admin__pthumb--big { width: 86px; height: 86px; }
.admin__pname { flex: 1 1 160px; font-size: 15px; line-height: 1.5; }
.admin__gamesummary { display: flex; flex-wrap: wrap; gap: 8px; }
.admin__gamechip.is-sel { background: linear-gradient(180deg, #c49bff, var(--witch)); color: #1a0833; }

/* admin odds tab */
.odds__h { font-weight: 900; font-size: 16px; letter-spacing: .1em; color: var(--slime); margin: 0 0 8px; }
.odds__rows { display: grid; gap: 10px; margin: 14px 0; }
.odds__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.odds__name { flex: 1 1 140px; font-size: 14px; font-weight: 700; color: var(--ink); }
.odds__field { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 10px; letter-spacing: .12em; color: var(--ink-mute); }
.odds__preview { font-weight: 800; font-size: 13px; color: var(--candle); min-width: 90px; }
.odds__chance { font-weight: 800; font-size: 14px; color: var(--pumpkin-2); min-width: 56px; text-align: right; }
.odds__summary { font-size: 15px; color: var(--ink); margin-top: 10px; }
.odds__summary b { color: var(--candle); }
.odds__caveat { font-size: 13px; margin-top: 6px; }
.odds__sliderrow { display: flex; align-items: center; gap: 8px; }
.odds__slider { -webkit-appearance: none; appearance: none; width: 110px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); outline: none; cursor: pointer; }
.odds__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--pumpkin); border: 2px solid #2a1300; cursor: grab; }
.odds__slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--pumpkin); border: 2px solid #2a1300; cursor: grab; }
.odds__slider:disabled { opacity: .35; cursor: not-allowed; }
.odds__val { width: 70px; font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 4px 7px; text-align: right; }
.odds__val:disabled { opacity: .35; }
.odds__select { font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 5px 6px; cursor: pointer; }
.odds__del { font-weight: 800; font-size: 11px; letter-spacing: .06em; color: #fff; background: var(--blood); border: 0; border-radius: 8px; padding: 7px 10px; cursor: pointer; margin-left: auto; }
.odds__del:hover { filter: brightness(1.15); }
.odds__badge { display: inline-block; font-weight: 900; font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; color: #10070a; white-space: nowrap; }
.odds__badge--shop { background: var(--slime); }
.odds__badge--player { background: var(--blood); color: #fff; }
.odds__badge--fair { background: var(--witch); color: #fff; }
.odds__bar { flex: 1 1 100%; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.odds__barfill { display: block; height: 100%; background: linear-gradient(90deg, var(--pumpkin), var(--candle)); }

/* admin add/edit product form */
.pform { text-align: left; display: grid; gap: 14px; }
.pform__imgrow { display: flex; align-items: center; gap: 14px; }
.pform__field { flex: 1 1 auto; }
.pform__field input[type="file"] { font-size: 13px; color: var(--ink-dim); }
.pform__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.pform__flavors { display: grid; gap: 8px; }
.pform__flavor { display: flex; align-items: center; gap: 8px; }
.pform__flavorname { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.pform__soldout { display: flex; align-items: center; gap: 5px; font-weight: 800; font-size: 10px; letter-spacing: .08em; color: var(--ink-mute); white-space: nowrap; }
.pform__actions { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.product__box { width: min(94vw, 580px); max-width: 580px; text-align: left; max-height: 88vh; overflow-y: auto; }

/* ============================================================
   MESSAGING
   ============================================================ */
.chatfab {
  position: fixed; right: 18px; bottom: 18px; z-index: 250;
  width: 60px; height: 60px; border-radius: 50%; border: 0;
  font-size: 26px; line-height: 1; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--pumpkin-2), var(--pumpkin-d));
  box-shadow: 0 0 0 3px rgba(10, 6, 18, .9), 0 10px 26px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 122, 28, .5);
  transition: transform .15s ease;
}
.chatfab:hover { transform: translateY(-3px) scale(1.04); }
.chatfab:active { transform: translateY(1px); }
body[data-screen="start"] .chatfab { display: none; }
.chatfab__badge {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border-radius: 999px;
  border: 2px solid var(--night-1); background: var(--blood); color: #fff;
  font-weight: 900; font-size: 12px; line-height: 1;
  animation: badgePop .25s ease;
}
.chatfab__badge[hidden] { display: none; }
@keyframes badgePop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.chat__box { width: min(94vw, 440px); max-width: 440px; text-align: left; }
.chat__title { text-align: center; }
.chat__tabs { display: flex; gap: 8px; margin: 0 0 16px; justify-content: center; flex-wrap: wrap; }
.chat__hint { font-size: 15px; color: var(--ink-dim); margin: 0 0 12px; }
.chat__note { font-size: 14px; color: var(--candle); min-height: 1.2em; margin: 0 0 8px; }
.chat__field { text-align: left; margin-bottom: 12px; }
.chat__field textarea { resize: vertical; }
.chat__send { width: 100%; }
.chat__sent { font-size: 17px; color: var(--slime); text-align: center; }
.chat__loading { font-size: 15px; color: var(--ink-mute); text-align: center; }
.chat__log { display: grid; gap: 8px; max-height: 320px; overflow-y: auto; padding: 4px 2px; margin-bottom: 12px; }
.chat__bub { justify-self: start; max-width: 85%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; font-size: 15px; line-height: 1.4; color: var(--ink); background: rgba(164, 104, 255, .16); border: 1px solid rgba(164, 104, 255, .32); overflow-wrap: anywhere; }
.chat__bub--you { justify-self: end; border-radius: 14px 14px 4px 14px; background: rgba(255, 122, 28, .15); border-color: rgba(255, 122, 28, .38); }
.chat__when { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--ink-mute); margin-bottom: 2px; }
.admin__thread-log .chat__bub { position: relative; padding-right: 30px; }
.chat__delbtn { position: absolute; top: 4px; right: 4px; background: none; border: 0; padding: 2px 5px; font-size: 13px; line-height: 1; color: var(--ink-mute); cursor: pointer; }
.chat__delbtn:hover { color: var(--blood); }
.chat__row { display: flex; gap: 10px; }
.chat__row .btn { flex: 0 0 auto; }
.chat__input { flex: 1; min-width: 0; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }

/* ============================================================
   TOASTS + UPDATE BANNER
   ============================================================ */
.toast-stack { position: fixed; top: 88px; right: 16px; z-index: 500; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 300px;
  padding: 11px 15px; border-radius: 14px;
  background: rgba(27, 17, 48, .97); color: var(--ink);
  border: 1px solid rgba(157, 255, 61, .45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5), 0 0 18px rgba(157, 255, 61, .2);
  font-weight: 600; font-size: 14px; line-height: 1.3;
  animation: toastIn .25s ease-out, toastOut .3s ease-in 2.6s forwards;
}
.toast__icon { color: var(--slime); font-weight: 900; flex: 0 0 auto; }
@keyframes toastIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { to { transform: translateX(40px); opacity: 0; } }
@media (max-width: 620px) {
  .toast-stack { top: auto; bottom: 90px; right: 12px; left: 12px; align-items: stretch; }
  .toast { max-width: none; }
}

.update-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; font-weight: 800; font-size: 14px; color: #2a1300;
  background: linear-gradient(90deg, var(--pumpkin), var(--candle));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.update-banner[hidden] { display: none; }

/* ============================================================
   VIEW MORE — the full product screen
   ============================================================ */
.pview__box { max-width: 880px; text-align: left; padding: 26px; }
#productViewBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; }
.pview__art { position: sticky; top: 0; min-height: 320px; border-radius: 18px; display: grid; place-items: center; padding: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 34px rgba(0, 0, 0, .45); }
.pview__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(180deg, transparent 55%, rgba(8, 4, 14, .45));
}
.pview__art img.brand-logo { position: relative; z-index: 1; max-width: 100%; max-height: 250px; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.pview__art .card__tag { top: 16px; right: 16px; }
.pview__kicker { font-family: var(--carny); font-size: 12px; letter-spacing: .2em; color: var(--slime); text-shadow: 0 0 10px rgba(157, 255, 61, .4); margin: 0 0 6px; }
.pview__name { font-family: var(--spooky); font-weight: 400; font-size: clamp(30px, 5vw, 44px); line-height: 1; letter-spacing: .03em; color: var(--pumpkin); text-shadow: 0 0 16px rgba(255, 122, 28, .45); margin: 0 0 8px; }
.pview__tagline { color: var(--ink-dim); font-weight: 700; font-size: 13px; letter-spacing: .06em; margin: 0 0 14px; }
.pview__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pview__price b { font-size: 32px; line-height: 1; color: var(--candle); text-shadow: 0 0 14px rgba(255, 210, 74, .35); }
.pview__price s { color: var(--ink-mute); font-weight: 800; font-size: 17px; text-decoration-color: var(--blood); }
.pview__stock { font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slime); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(157, 255, 61, .35); }
/* the description reads like a fortune teller's card */
.pview__descbox {
  position: relative; margin: 0 0 18px; padding: 18px 24px; border-radius: 14px;
  background: radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .5), transparent 60%), linear-gradient(135deg, #f6ead2, #e2cca2);
  color: #2a1730; box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  -webkit-mask: var(--notch-mask); mask: var(--notch-mask);
}
.pview__desc { margin: 0 0 10px; font-size: 15px; line-height: 1.65; }
.pview__desc:first-child::first-letter { font-family: var(--spooky); font-size: 2.3em; line-height: .8; float: left; margin: 4px 6px 0 0; color: var(--pumpkin-d); }
.pview__desc:last-child { margin-bottom: 0; }
.pview__h { font-weight: 900; font-size: 12px; letter-spacing: .16em; color: var(--pumpkin-2); margin: 0 0 8px; }
.pview__flavors { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pview__flavors li { font-size: 13px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(164, 104, 255, .14); border: 1px solid rgba(164, 104, 255, .32); }
.pview__flavors li.is-out { opacity: .55; text-decoration: line-through; text-decoration-color: var(--blood); }
.pview__flavors em { font-style: normal; font-weight: 900; font-size: 10px; letter-spacing: .1em; color: var(--blood); margin-left: 4px; }
.pview__stats { margin: 0 0 18px; }
.pview__buy { display: flex; gap: 10px; flex-wrap: wrap; }
.pview__buy .ver { flex: 1 1 200px; }
.pview__buy .btn { flex: 1 1 190px; margin: 0; }
@media (max-width: 720px) {
  .pview__box { padding: 20px 16px; }
  #productViewBody { grid-template-columns: 1fr; gap: 18px; }
  .pview__art { position: relative; min-height: 220px; }
}

/* ============================================================
   CLOSED FOR THE NIGHT — a booth that's used up today's plays
   ============================================================ */
.booth.is-closed > :not(.closed-sign):not(.booth__awning) { filter: grayscale(.65) brightness(.5); }
.closed-sign {
  position: absolute; inset: 42px 0 0; z-index: 5;
  display: grid; place-items: center; padding: 18px;
  background: radial-gradient(ellipse at 50% 40%, rgba(24, 10, 40, .45), rgba(6, 3, 10, .86));
  animation: signIn .35s ease-out;
}
.closed-sign[hidden] { display: none; }
@keyframes signIn { from { opacity: 0; } }
.closed-sign__board {
  position: relative; width: 100%; max-width: 280px; text-align: center;
  padding: 22px 16px 16px; border-radius: 10px;
  background: repeating-linear-gradient(0deg, #4a2a16 0 30px, #3e2311 30px 32px);
  border: 3px solid #1a0c05;
  box-shadow: inset 0 0 0 2px rgba(255, 200, 120, .14), inset 0 0 26px rgba(0, 0, 0, .55), 0 14px 30px rgba(0, 0, 0, .6), 0 0 44px rgba(255, 122, 28, .16);
  transform: rotate(-2.5deg); transform-origin: 50% -30px;
  animation: signSway 5s ease-in-out infinite;
}
/* the nail it hangs from */
.closed-sign__board::before {
  content: ""; position: absolute; left: 50%; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d9d0c4, #6b6258); box-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
@keyframes signSway { 50% { transform: rotate(2deg); } }
.closed-sign__top { display: block; font-family: var(--carny); font-size: 11px; letter-spacing: .14em; color: var(--candle); margin: 4px 0 8px; }
.closed-sign__big {
  display: block; font-family: var(--spooky); font-weight: 400; font-size: 34px; line-height: .95; letter-spacing: .04em;
  color: #ffe9d2; text-shadow: 0 0 8px rgba(255, 122, 28, .9), 0 0 24px rgba(255, 122, 28, .55); margin-bottom: 10px;
  animation: signFlicker 4.5s infinite;
}
@keyframes signFlicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .45; } }
.closed-sign__why { display: block; font-size: 13px; line-height: 1.45; color: #f3dcc0; margin-bottom: 12px; }
.closed-sign__timer {
  display: inline-block; font-weight: 900; font-size: 12px; letter-spacing: .1em; font-variant-numeric: tabular-nums;
  color: var(--slime); background: rgba(0, 0, 0, .4); border: 1px solid rgba(157, 255, 61, .35); border-radius: 999px; padding: 6px 12px;
}
.closed-sign--inline { position: static; inset: auto; display: block; padding: 4px 0 0; background: none; animation: none; }
.closed-sign--inline .closed-sign__board { max-width: 440px; transform: none; animation: none; margin: 0; }
.closed-sign--inline .closed-sign__big { font-size: 30px; }

/* ============================================================
   CART CARDS — haunted collector cards
   ============================================================ */
.ccard {
  --frame: #efe3cc; --frame-2: #a88a5c;
  position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 5 / 7;
  padding: 7px; border-radius: 14px; overflow: hidden; text-align: left;
  background: linear-gradient(145deg, var(--frame), var(--frame-2));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 10px 24px rgba(0, 0, 0, .5);
  container-type: inline-size;
}
.ccard__inner {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; gap: 5px;
  padding: 7px 7px 6px; border-radius: 9px; border: 1px solid rgba(0, 0, 0, .65);
  background:
    radial-gradient(1.3px 1.3px at 18% 26%, rgba(255, 255, 255, .75), transparent),
    radial-gradient(1px 1px at 72% 14%, rgba(255, 255, 255, .6), transparent),
    radial-gradient(1.3px 1.3px at 88% 64%, rgba(255, 255, 255, .45), transparent),
    linear-gradient(180deg, #211235, #140b22 58%, #0b0613);
}
.ccard__top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.ccard__top img { flex: 0 0 auto; width: 12px; height: 12px; width: 8cqw; height: 8cqw; }
.ccard__name { min-width: 0; font-family: var(--carny); font-size: 12px; font-size: 7.6cqw; line-height: 1.15; color: var(--ink); text-shadow: 0 1px 0 #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__num { flex: 0 0 auto; font-weight: 900; font-size: 10px; font-size: 6.6cqw; letter-spacing: .04em; color: var(--candle); }
.ccard__art {
  position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 72%, rgba(255, 122, 28, .5), transparent 62%), radial-gradient(ellipse at 50% 120%, #3c1d55, #140a22 72%);
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 0 20px rgba(0, 0, 0, .75);
}
.ccard__emoji { font-size: 46px; font-size: 32cqw; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.ccard__img { width: 100%; height: 100%; object-fit: cover; }
.ccard__lock { font-family: var(--spooky); font-size: 52px; font-size: 34cqw; line-height: 1; color: rgba(255, 255, 255, .16); }
.ccard__shine { position: absolute; inset: 0; pointer-events: none; }
.ccard__rarity { font-weight: 900; font-size: 9px; font-size: 5.8cqw; letter-spacing: .14em; text-align: center; color: var(--frame); padding: 3px 0; border-radius: 4px; background: rgba(0, 0, 0, .38); }
.ccard__rarity span { color: var(--candle); letter-spacing: .02em; }
.ccard__flavor {
  margin: 0; min-height: 2.6em; font-size: 9.5px; font-size: 5.9cqw; line-height: 1.3; font-style: italic; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ccard__foot { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-weight: 800; font-size: 7.5px; font-size: 4.8cqw; letter-spacing: .12em; color: var(--ink-mute); }
.ccard__foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__count {
  position: absolute; z-index: 3; right: 12px; top: 22%;
  min-width: 30px; padding: 3px 7px; border-radius: 999px; text-align: center;
  font-weight: 900; font-size: 12px; color: #2a1300; background: var(--candle);
  box-shadow: 0 0 0 2px #140b22, 0 4px 10px rgba(0, 0, 0, .5);
}

/* RARE — cold silver frame and a shine that sweeps the art */
.ccard--rare { --frame: #e2f4ff; --frame-2: #5b8cc4; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 16px rgba(120, 190, 255, .35), 0 10px 24px rgba(0, 0, 0, .5); }
.ccard--rare .ccard__shine, .ccard--epic .ccard__shine, .ccard--legendary .ccard__shine {
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) no-repeat;
  background-size: 250% 100%; animation: cardShine 3.6s ease-in-out infinite;
}
@keyframes cardShine { 0%, 45% { background-position: 130% 0; } 80%, 100% { background-position: -30% 0; } }
.ccard--rare .ccard__art { background: radial-gradient(ellipse at 50% 72%, rgba(90, 170, 255, .45), transparent 62%), radial-gradient(ellipse at 50% 120%, #1d3159, #0d1226 72%); }

/* EPIC — witch-purple frame with a pulsing glow */
.ccard--epic { --frame: #ecd6ff; --frame-2: #7a3fe0; animation: epicPulse 2.4s ease-in-out infinite; }
@keyframes epicPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 16px rgba(164, 104, 255, .55), 0 10px 24px rgba(0, 0, 0, .5); }
  50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 34px rgba(190, 140, 255, .95), 0 10px 24px rgba(0, 0, 0, .5); }
}
.ccard--epic .ccard__art { background: radial-gradient(ellipse at 50% 72%, rgba(190, 110, 255, .55), transparent 62%), radial-gradient(ellipse at 50% 120%, #3d1a66, #150a26 72%); }
.ccard--epic .ccard__rarity span { color: #d7b6ff; }

/* LEGENDARY — a rainbow border that never stops turning, gold glow, holo art */
.ccard--legendary { background: #120a1e; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 0 22px rgba(255, 210, 74, .65), 0 0 52px rgba(255, 122, 28, .3), 0 10px 24px rgba(0, 0, 0, .5); }
.ccard--legendary::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 190%; aspect-ratio: 1;
  background: conic-gradient(#ff7a1c, #ffd24a, #9dff3d, #56d8ff, #a468ff, #ff3b57, #ff7a1c);
  transform: translate(-50%, -50%); animation: legendSpin 4s linear infinite;
}
@keyframes legendSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ccard--legendary .ccard__inner { background: radial-gradient(ellipse at 50% 0%, rgba(255, 210, 74, .22), transparent 60%), linear-gradient(180deg, #2a1636, #170c24 58%, #0b0613); }
.ccard--legendary .ccard__art { background: radial-gradient(ellipse at 50% 72%, rgba(255, 210, 74, .6), transparent 62%), radial-gradient(ellipse at 50% 120%, #5a2c12, #1a0b14 72%); }
.ccard--legendary .ccard__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .35;
  background: linear-gradient(135deg, #ff7a1c, #ffd24a, #9dff3d, #56d8ff, #a468ff, #ff3b57);
  background-size: 300% 300%; animation: holoShift 5s ease-in-out infinite;
}
@keyframes holoShift { 50% { background-position: 100% 100%; } }
.ccard--legendary .ccard__name { color: #ffe9a8; }
.ccard--legendary .ccard__rarity { color: var(--candle); text-shadow: 0 0 8px rgba(255, 210, 74, .7); }

/* not collected yet — a silhouette in the dark */
.ccard--missing { filter: grayscale(1) brightness(.5); opacity: .8; box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 6px 14px rgba(0, 0, 0, .45); animation: none; }
.ccard--missing::before { animation: none; }
.ccard--missing .ccard__name { letter-spacing: .25em; }
.ccard.ccard--missing .ccard__art { background: radial-gradient(ellipse at 50% 60%, #2a2238, #0f0a18 72%); }
.ccard.ccard--missing .ccard__art::after, .ccard.ccard--missing .ccard__shine { display: none; }

/* ---------- the collection page ---------- */
.cardspage { max-width: 1120px; margin: 0 auto; padding: 26px 18px 100px; }
.cards-sets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 18px; }
.cards-sets:empty { display: none; }
.cards-head { text-align: center; margin-bottom: 26px; }
.cards-head__name { font-family: var(--spooky); font-weight: 400; font-size: clamp(34px, 6vw, 50px); letter-spacing: .04em; color: var(--candle); text-shadow: 0 0 16px rgba(255, 210, 74, .4); }
.cards-head__desc { color: var(--ink-dim); max-width: 640px; margin: 6px auto 14px; }
.cards-status { display: inline-block; font-weight: 800; font-size: 13px; letter-spacing: .05em; padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); color: var(--ink-dim); margin: 0 0 16px; }
.cards-status--limited { color: var(--pumpkin-2); border-color: rgba(255, 140, 60, .5); box-shadow: 0 0 18px rgba(255, 122, 28, .15); }
.cards-status--limited b { color: var(--candle); font-variant-numeric: tabular-nums; }
.cards-status--soon { color: #c79bff; border-color: rgba(164, 104, 255, .5); }
.cards-progress { max-width: 520px; margin: 0 auto 14px; display: grid; gap: 7px; }
.cards-progress__label { font-weight: 800; font-size: 13px; letter-spacing: .1em; color: var(--ink-dim); }
.cards-progress__label b { font-size: 20px; color: var(--slime); }
.cards-progress__track { height: 12px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .07); border: 1px solid rgba(157, 255, 61, .25); }
.cards-progress__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6fe01e, var(--slime)); box-shadow: 0 0 14px rgba(157, 255, 61, .6); transition: width .6s ease; }
.cards-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cards-legend__item { font-weight: 800; font-size: 11px; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; border: 1px solid; background: rgba(0, 0, 0, .25); }
.cards-legend__item em { font-style: normal; font-weight: 700; color: var(--ink-mute); margin-left: 4px; }
.cards-legend__item--common { color: #efe3cc; border-color: rgba(239, 227, 204, .4); }
.cards-legend__item--rare { color: #8ed2ff; border-color: rgba(142, 210, 255, .45); }
.cards-legend__item--epic { color: #c79bff; border-color: rgba(199, 155, 255, .5); }
.cards-legend__item--legendary { color: var(--candle); border-color: rgba(255, 210, 74, .6); box-shadow: 0 0 14px rgba(255, 210, 74, .25); }
.cards-guest { margin: 16px 0 0; color: var(--ink-dim); }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(42%, 170px), 1fr)); gap: 20px; }
.cards-grid__slot { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; transition: transform .2s ease; }
button.cards-grid__slot { cursor: pointer; }
button.cards-grid__slot:hover { transform: translateY(-6px) rotate(-1.2deg); }
.cards-how { margin-top: 44px; }
.cards-how__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cards-how__list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: start; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); color: var(--ink-dim); font-size: 14px; line-height: 1.4; }
.cards-how__list li span { grid-row: span 2; font-size: 26px; line-height: 1; }
.cards-how__list li b { display: block; font-size: 12px; letter-spacing: .14em; color: var(--pumpkin-2); }
.cards-how__note { text-align: center; color: var(--ink-mute); font-size: 13px; margin: 18px 0 0; }

/* ---------- the reveal pop-up ---------- */
.cardreveal__box { max-width: 400px; overflow: hidden; }
.cardreveal__box > * { position: relative; z-index: 1; }
.cardreveal__box > .modal__close { position: absolute; z-index: 3; }
.cardreveal__stage { width: min(250px, 66vw); margin: 12px auto 14px; perspective: 900px; }
.cardreveal__flip { transform-style: preserve-3d; animation: cardFlip .95s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes cardFlip { 0% { transform: rotateY(180deg) scale(.55); opacity: 0; } 35% { opacity: 1; } 100% { transform: rotateY(0) scale(1); } }
.cardreveal--zoom .cardreveal__flip { animation: modalIn .25s ease-out; }
.modal__box > .cardreveal__note { font-weight: 800; color: var(--candle); margin: 0 0 14px; }
.cardreveal--rare .cardreveal__box { border-color: rgba(120, 190, 255, .6); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px rgba(90, 170, 255, .3); }
.cardreveal--epic .cardreveal__box { border-color: rgba(190, 140, 255, .7); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 80px rgba(0, 0, 0, .6), 0 0 80px rgba(164, 104, 255, .45); }
.cardreveal--epic .modal__title { color: #d7b6ff; text-shadow: 0 0 18px rgba(164, 104, 255, .7); }
.cardreveal--legendary .cardreveal__box { border-color: rgba(255, 210, 74, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 30px 80px rgba(0, 0, 0, .6), 0 0 90px rgba(255, 210, 74, .45); }
.cardreveal--legendary .cardreveal__box::before {
  content: ""; position: absolute; z-index: 0; left: 50%; top: 42%; width: 160%; aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 210, 74, .16) 0 9deg, transparent 9deg 18deg);
  transform: translate(-50%, -50%); animation: legendSpin 14s linear infinite;
}
.cardreveal--legendary .modal__title { color: var(--candle); text-shadow: 0 0 20px rgba(255, 210, 74, .8); }
.cardreveal--zoom .cardreveal__box::before { display: none; }

/* ---------- admin: Cards tab ---------- */
.admin__cardset { margin-bottom: 18px; }
.admin__setstatus { font-weight: 900; font-size: 10px; letter-spacing: .1em; padding: 4px 9px; border-radius: 999px; }
.admin__row .admin__setstatus--live { color: #10200a; background: var(--slime); }
.admin__row .admin__setstatus--soon { color: #fff; background: var(--witch); }
.admin__row .admin__setstatus--gone, .admin__row .admin__setstatus--off { color: var(--ink); background: rgba(255, 255, 255, .12); }
.admin__cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 14px; }
.admin__carditem .admin__meta { font-size: 12px; }
.admin__carditem .admin__useractions { margin-top: 6px; }
.pform__cardpreview { width: 190px; margin: 0 auto 4px; }
.pform__check { align-self: end; padding-bottom: 12px; font-size: 12px; }
.pform__field select { width: 100%; padding: 10px; font-size: 15px; }

/* ---------- account panel extras ---------- */
.acct__discount { margin: 0; font-size: 14px; color: var(--ink-dim); }
.acct__discount b { color: var(--candle); }
.myorders__status { display: block; font-style: normal; font-weight: 800; font-size: 11px; letter-spacing: .05em; color: var(--slime); margin-top: 2px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .scene__curtain { display: none; }
}

/* ============================================================
   INSTALLABLE APP — install buttons, install help, launch splash,
   offline screen (pwa.js)
   ============================================================ */
.btn--install {
  background: linear-gradient(180deg, rgba(164, 104, 255, .28), rgba(91, 47, 166, .42)); color: var(--ink);
  box-shadow: inset 0 0 0 2px rgba(164, 104, 255, .75), 0 4px 0 #2c1454, 0 0 22px rgba(164, 104, 255, .35);
  text-shadow: 0 0 10px rgba(164, 104, 255, .6);
}
.btn--install:hover { color: var(--ink); filter: brightness(1.15); }
.btn--install:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(164, 104, 255, .75), 0 1px 0 #2c1454, 0 0 14px rgba(164, 104, 255, .3); }
.btn--install.btn--compact { box-shadow: inset 0 0 0 2px rgba(164, 104, 255, .75), 0 3px 0 #2c1454; }
.btn--install[hidden] { display: none; }
.footer__install { margin: 0 0 16px; }

.install-box__icon { border-radius: 20px; box-shadow: 0 0 0 1px rgba(255, 140, 60, .35), 0 0 26px rgba(255, 122, 28, .35); }
.install-steps { text-align: left; margin: 4px 0 22px; padding: 0; list-style: none; counter-reset: step; }
.install-steps li {
  counter-increment: step; position: relative;
  padding: 12px 12px 12px 50px; margin: 0 0 8px; border-radius: 14px;
  background: rgba(7, 4, 12, .45); border: 1px solid var(--line);
  color: var(--ink); font-size: 15px; line-height: 1.45;
}
.install-steps li::before {
  content: counter(step); position: absolute; left: 12px; top: 11px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: 14px; color: #2a1300;
  background: linear-gradient(180deg, #ffb266, var(--pumpkin));
}
.install-steps b { color: var(--candle); }
.install-steps__icon { width: 20px; height: 20px; vertical-align: -4px; color: #5fb0ff; }

.offline-screen { z-index: 10000; align-items: center; }
.offline-screen__logo { filter: drop-shadow(0 0 14px rgba(255, 122, 28, .5)) grayscale(.35); animation: offlineFlicker 3.2s infinite; }
@keyframes offlineFlicker { 0%, 18%, 22%, 60%, 100% { opacity: 1; } 20%, 61% { opacity: .45; } }
.modal__box > .offline-screen__small { font-size: 13px; color: var(--ink-mute); margin: 16px 0 0; }

.app-splash { display: none; }
.is-app .app-splash {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 122, 28, .30) 0%, rgba(255, 122, 28, .10) 26%, rgba(255, 122, 28, 0) 46%),
    radial-gradient(ellipse at 50% 30%, #2b1747 0%, var(--night-2) 45%, var(--night-1) 72%, var(--night-0) 100%);
  background-color: var(--night-1);
  transition: opacity .5s ease, visibility .5s;
}
.app-splash.is-leaving { opacity: 0; visibility: hidden; }
.app-splash__logo { width: 42vmin; max-width: 190px; height: auto; filter: drop-shadow(0 0 18px rgba(255, 140, 40, .6)); animation: splashBob 1.6s ease-in-out infinite; }
@keyframes splashBob { 50% { transform: translateY(-6px); } }
.app-splash__title { font-family: var(--spooky); font-size: clamp(44px, 16vmin, 76px); line-height: 1; color: var(--pumpkin); text-shadow: 0 0 18px rgba(255, 122, 28, .6); letter-spacing: .03em; margin: 18px 0 8px; }
.app-splash__tag { font-family: var(--carny); font-size: 13px; letter-spacing: .14em; color: var(--cream); opacity: .8; margin: 0 0 28px; }
.app-splash__bar { width: 150px; height: 6px; border-radius: 6px; overflow: hidden; background: rgba(164, 104, 255, .18); box-shadow: inset 0 0 0 1px rgba(164, 104, 255, .35); }
.app-splash__bar span { display: block; width: 40%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--pumpkin), var(--candle)); animation: splashBar 1.1s ease-in-out infinite; }
@keyframes splashBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) {
  .app-splash__logo, .app-splash__bar span, .offline-screen__logo { animation: none; }
}
/* inside the installed app the page runs edge to edge — keep the top bar
   and the modals clear of the notch / Dynamic Island and the home bar */
.is-app .hud { padding-top: calc(10px + env(safe-area-inset-top)); }
@media (max-width: 760px) { .is-app .hud { padding-top: calc(8px + env(safe-area-inset-top)); } }
.is-app .modal { padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.is-app .update-banner { padding-top: calc(10px + env(safe-area-inset-top)); }
.is-app .app-splash { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }


/* ============================================================
   TRICK-OR-TREAT DOOR — the porch scene, the ring, the reveal, and the
   on-screen tricks (slime, BOO!, bats, lights out, upside down).
   arcade.js flips the state classes on .trick in order:
   is-ringing → is-shaking → is-hand → is-open (+ is-treat / is-trick)
   ============================================================ */
.trick { display: flex; align-items: flex-start; gap: 26px; max-width: 820px; margin: 0 auto; border-color: rgba(157, 255, 61, .35); overflow: hidden; }
.trick[hidden] { display: none; }
.trick__scene {
  position: relative; flex: 0 0 auto; width: 250px; height: 290px; border-radius: 14px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #2a1440, #0a0512 60%);
  box-shadow: inset 0 0 0 1px rgba(164, 110, 255, .25), inset 0 -40px 60px rgba(0, 0, 0, .6);
}
.trick__moon { position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; border-radius: 50%; background: #f3e6cc; box-shadow: 0 0 22px rgba(243, 230, 204, .7), inset -8px -4px 0 rgba(170, 150, 120, .35); }
.trick__lamp { position: absolute; left: 28px; top: 78px; width: 14px; height: 20px; border-radius: 4px 4px 7px 7px; background: #2a1408; box-shadow: 0 0 0 2px #6a3818; }
.trick__flame { position: absolute; left: 50%; top: 3px; width: 8px; height: 12px; margin-left: -4px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3b0, var(--candle) 45%, var(--pumpkin) 80%); box-shadow: 0 0 14px 4px rgba(255, 210, 74, .45); animation: lampFlicker 2.8s ease-in-out infinite; }
@keyframes lampFlicker { 0%, 100% { opacity: 1; transform: scaleY(1); } 37% { opacity: .85; transform: scaleY(1.1); } 61% { opacity: .95; } 78% { opacity: .7; transform: scaleY(.9); } }
.trick.is-shaking .trick__flame, .trick.is-hand .trick__flame { animation: lampPanic .12s linear infinite; }
@keyframes lampPanic { 0% { opacity: 1; } 40% { opacity: .1; } 60% { opacity: .9; } 100% { opacity: .3; } }
.trick__house { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); width: 128px; }
.trick__door {
  position: relative; width: 112px; height: 168px; margin: 0 auto;
  border: 6px solid #2a1408; border-bottom: 0; border-radius: 56px 56px 0 0;
  background: #050308; overflow: hidden; perspective: 520px;
  box-shadow: 0 0 0 4px #6a3818, 0 0 0 7px #2a1408, 0 0 34px rgba(255, 122, 28, .12);
  transition: box-shadow .8s ease;
}
.trick.is-open .trick__door { box-shadow: 0 0 0 4px #6a3818, 0 0 0 7px #2a1408, 0 0 56px rgba(255, 122, 28, .5); }
.trick__dark { position: absolute; inset: 0; background: #050308; }
.trick__glow { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease .25s;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 170, 70, .95), rgba(255, 110, 30, .55) 40%, rgba(140, 60, 200, .35) 70%, transparent 100%); }
.trick.is-open .trick__glow { opacity: 1; }
.trick.is-trick.is-open .trick__glow { background: radial-gradient(ellipse at 50% 100%, rgba(157, 255, 61, .9), rgba(90, 200, 60, .45) 40%, rgba(60, 30, 100, .4) 70%, transparent 100%); }
.trick__eyes { position: absolute; left: 50%; top: 58px; width: 30px; height: 10px; margin-left: -15px; display: flex; justify-content: space-between; opacity: 0; transition: opacity .3s; }
.trick__eyes i { width: 9px; height: 9px; border-radius: 50%; background: var(--candle); box-shadow: 0 0 10px 2px rgba(255, 210, 74, .8); animation: eyesBlink 1.6s ease-in-out infinite; }
.trick.is-shaking .trick__eyes, .trick.is-hand .trick__eyes { opacity: 1; }
@keyframes eyesBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.trick__hand { position: absolute; right: -6px; top: 70px; font-size: 40px; line-height: 1; transform: translateX(80px) rotate(-30deg); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); filter: sepia(1) hue-rotate(60deg) saturate(2) brightness(.8); z-index: 5; }
.trick.is-hand .trick__hand { transform: translateX(0) rotate(-70deg); }
.trick.is-open .trick__hand { transform: translateX(90px) rotate(-30deg); transition-duration: .25s; }
.trick__peek { position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; line-height: 1; opacity: 0; transform: scale(.4); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) .5s, opacity .3s ease .5s; z-index: 2; }
.trick.is-open .trick__peek { opacity: 1; transform: scale(1); }
.trick__slab {
  position: absolute; inset: 0; z-index: 4; border-radius: 50px 50px 0 0;
  background: repeating-linear-gradient(90deg, #6a3818 0 19px, #55290f 19px 22px);
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .6);
  transform-origin: left center; transition: transform .9s cubic-bezier(.35, 1.2, .45, 1);
}
.trick__panel { position: absolute; left: 20px; right: 20px; border: 3px solid rgba(0, 0, 0, .35); border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255, 190, 120, .08); }
.trick__panel--top { top: 44px; height: 44px; }
.trick__panel--bottom { top: 104px; height: 50px; }
.trick__knocker { position: absolute; top: 76px; right: 14px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--candle); box-shadow: 0 0 10px rgba(255, 210, 74, .6); }
.trick__wreath { position: absolute; top: 12px; left: 50%; font-size: 24px; line-height: 1; margin-left: -12px; filter: drop-shadow(0 0 6px rgba(255, 122, 28, .8)); }
.trick.is-shaking .trick__slab { animation: doorShake .09s linear infinite; }
@keyframes doorShake { 0% { transform: translate(1px, 0) rotate(.6deg); } 50% { transform: translate(-1px, 1px) rotate(-.6deg); } 100% { transform: translate(1px, -1px) rotate(.4deg); } }
.trick.is-hand .trick__slab { transform: rotateY(-30deg); }
.trick.is-open .trick__slab { transform: rotateY(-108deg); }
.trick__step { display: block; width: 150px; height: 12px; margin: 0 auto; border-radius: 3px; background: linear-gradient(180deg, #4a2a16, #2a1408); box-shadow: 0 4px 0 #1a0c05; }
.trick__fog { position: absolute; left: 50%; bottom: 0; width: 200%; height: 46%; transform: translateX(-50%); pointer-events: none; opacity: 0; }
.trick__fog span { position: absolute; bottom: 0; width: 40%; height: 70%; border-radius: 50%; filter: blur(7px); opacity: 0;
  background: radial-gradient(ellipse, rgba(215, 200, 245, .8), rgba(215, 200, 245, 0) 70%); }
.trick__fog span:nth-child(1) { left: 30%; --dx: -60%; --dy: -35%; }
.trick__fog span:nth-child(2) { left: 30%; --dx: 60%;  --dy: -25%; }
.trick__fog span:nth-child(3) { left: 26%; --dx: -20%; --dy: -70%; }
.trick__fog span:nth-child(4) { left: 34%; --dx: 25%;  --dy: -55%; }
.trick.is-open .trick__fog { opacity: 1; }
.trick.is-open .trick__fog span { animation: fogRoll 3.2s ease-out forwards; }
.trick.is-open .trick__fog span:nth-child(2) { animation-delay: .15s; }
.trick.is-open .trick__fog span:nth-child(3) { animation-delay: .3s; }
.trick.is-open .trick__fog span:nth-child(4) { animation-delay: .45s; }
.trick.is-trick .trick__fog span { background: radial-gradient(ellipse, rgba(157, 255, 61, .55), rgba(157, 255, 61, 0) 70%); }

/* candy / confetti burst out of the door */
.trick__burst { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; z-index: 6; }
.trick__burst span { position: absolute; left: 0; top: 0; font-size: 22px; line-height: 1; opacity: 0; will-change: transform; animation: candyFly var(--d, 1.4s) cubic-bezier(.2, .8, .3, 1) var(--dl, 0s) forwards; }
.trick__burst i { position: absolute; left: 0; top: 0; width: 8px; height: 12px; border-radius: 2px; background: var(--c, var(--candle)); opacity: 0; animation: candyFly var(--d, 1.6s) cubic-bezier(.2, .8, .3, 1) var(--dl, 0s) forwards; }
@keyframes candyFly {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.4); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
}
/* slime drips down the scene on a trick */
.trick__drips { position: absolute; left: 0; right: 0; top: -4px; height: 100%; pointer-events: none; z-index: 5; display: none; }
.trick.is-trick .trick__drips { display: block; }
.trick__drips i { position: absolute; top: 0; width: 18px; height: 0; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #7ddf2a, #4fb31a); box-shadow: 0 0 10px rgba(157, 255, 61, .5); animation: dripDown 1.6s cubic-bezier(.4, 0, .6, 1) forwards; }
.trick__drips i:nth-child(1) { left: 8%;  --h: 70px;  animation-delay: 0s; }
.trick__drips i:nth-child(2) { left: 24%; --h: 130px; animation-delay: .2s; width: 26px; }
.trick__drips i:nth-child(3) { left: 44%; --h: 50px;  animation-delay: .05s; }
.trick__drips i:nth-child(4) { left: 60%; --h: 160px; animation-delay: .3s; width: 22px; }
.trick__drips i:nth-child(5) { left: 76%; --h: 90px;  animation-delay: .15s; }
.trick__drips i:nth-child(6) { left: 90%; --h: 60px;  animation-delay: .4s; }
@keyframes dripDown { to { height: var(--h); } }

/* the bell */
.trick__body { flex: 1; text-align: left; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.trick .panel__h { text-align: left; color: var(--slime); text-shadow: 0 0 14px rgba(157, 255, 61, .4); }
.trick__desc { color: var(--ink-dim); margin: 0 0 14px; }
.trick__bell {
  display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
  font: 900 15px/1 var(--ui); letter-spacing: .12em; color: var(--ink);
  background: linear-gradient(180deg, #2b1a45, #1b1130); border: 2px solid #6a3818; border-radius: 999px;
  padding: 10px 22px 10px 12px; cursor: pointer;
  box-shadow: 0 6px 0 #2a1408, 0 12px 26px rgba(0, 0, 0, .45);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
}
.trick__bell:hover { filter: brightness(1.1); }
.trick__bell:active, .trick.is-ringing .trick__bell { transform: translateY(5px); box-shadow: 0 1px 0 #2a1408, 0 4px 10px rgba(0, 0, 0, .45); }
.trick__bell:disabled { cursor: not-allowed; filter: grayscale(.5) brightness(.7); }
.trick__bell:focus-visible { outline: 3px solid var(--candle); outline-offset: 4px; }
.trick__bell[hidden] { display: none; }
.trick__bellbtn { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb3a0, var(--blood) 55%, #8a1020); box-shadow: 0 0 0 4px #3a2a2a, 0 0 18px 4px rgba(255, 59, 87, .55); animation: bellGlow 1.8s ease-in-out infinite; }
@keyframes bellGlow { 50% { box-shadow: 0 0 0 4px #3a2a2a, 0 0 30px 8px rgba(255, 59, 87, .8); } }
.trick__bell:disabled .trick__bellbtn { animation: none; box-shadow: 0 0 0 4px #3a2a2a; }

/* the reveal */
.trick__reveal { margin-top: 6px; }
.trick__reveal[hidden] { display: none; }
.trick__kind { display: inline-block; font: 900 11px/1 var(--ui); letter-spacing: .22em; padding: 6px 10px; border-radius: 999px; background: rgba(157, 255, 61, .15); color: var(--slime); }
.trick.is-trick .trick__kind { background: rgba(164, 104, 255, .2); color: var(--witch); }
.trick__icon { display: block; font-size: 58px; line-height: 1; margin: 8px 0 4px; animation: revealPop .55s cubic-bezier(.3, 1.5, .5, 1) both; filter: drop-shadow(0 0 16px rgba(255, 210, 74, .55)); }
.trick.is-trick .trick__icon { filter: drop-shadow(0 0 16px rgba(157, 255, 61, .55)); }
@keyframes revealPop { from { transform: scale(.2) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.trick__name { display: block; font-family: var(--spooky); font-size: clamp(26px, 4vw, 36px); line-height: 1; letter-spacing: .04em; color: var(--candle); text-shadow: 0 0 18px rgba(255, 210, 74, .5); animation: revealPop .5s cubic-bezier(.3, 1.4, .5, 1) .1s both; }
.trick.is-trick .trick__name { color: var(--slime); text-shadow: 0 0 18px rgba(157, 255, 61, .5); }
.trick__line { margin: 8px 0 0; font-size: 15px; color: var(--ink-dim); font-style: italic; }
.trick__res { min-height: 1.4em; font-weight: 800; color: var(--candle); margin: 10px 0 0; }
.trick__res--err { color: var(--blood); }
.trick__res--err:empty { display: none; }
.trick__jackpot { font-family: var(--spooky); font-size: clamp(28px, 5vw, 44px); line-height: 1.05; color: var(--candle); text-shadow: 0 0 24px var(--candle), 0 0 60px rgba(255, 210, 74, .6); animation: jackpotPulse .5s ease-in-out infinite alternate; margin: 6px 0; }
@keyframes jackpotPulse { to { transform: scale(1.06); } }
.trick__jackpot--kidding { color: var(--witch); text-shadow: 0 0 18px var(--witch); animation: none; }
@media (max-width: 640px) {
  .trick { flex-direction: column; align-items: center; text-align: center; }
  .trick__scene { width: 100%; max-width: 360px; height: 270px; }
  .trick__body, .trick .panel__h { text-align: center; }
  .trick__bell { align-self: center; }
}

/* the whole page jolts */
body.is-quake { animation: quake .5s ease-in-out; }
@keyframes quake { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 3px) rotate(-.4deg); } 35% { transform: translate(6px, -4px) rotate(.4deg); } 55% { transform: translate(-4px, 4px); } 75% { transform: translate(4px, -2px); } }
/* ROTTEN APPLE: everything upside down for a bit */
body { transition: transform .8s ease-in-out; }
body.is-flipped { transform: rotate(180deg); }

/* ---- pending effects (Sugar Rush, Half-Off, Mirror Curse, Second Helping, Cursed Tag) ---- */
.effects { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 820px; margin: 14px auto 0; }
.effects[hidden] { display: none; }
.effects span { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1.25 var(--ui); letter-spacing: .04em; color: var(--ink); background: rgba(164, 104, 255, .12); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.effects span b { color: var(--candle); }
.effects span.is-bad { border-color: rgba(157, 255, 61, .4); }
.effects span.is-bad b { color: var(--slime); }
.booth.is-mirrored { border-color: var(--slime); box-shadow: 0 0 24px rgba(157, 255, 61, .3); }
.booth.is-mirrored::before { content: "🔄 MIRROR CURSE: CONTROLS REVERSED"; display: block; margin: 0 0 10px; font: 900 11px/1 var(--ui); letter-spacing: .18em; color: #10200a; background: var(--slime); border-radius: 999px; padding: 7px 12px; text-align: center; }

/* ---- full-screen tricks ---- */
.fx-slime { position: fixed; inset: 0; z-index: 10005; touch-action: none; cursor: grab; }
.fx-slime canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-slime__hint { position: absolute; left: 50%; top: calc(18px + env(safe-area-inset-top)); transform: translateX(-50%); font: 900 13px/1 var(--ui); letter-spacing: .2em; color: #10200a; background: var(--slime); border-radius: 999px; padding: 11px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap; animation: hintBob 1.2s ease-in-out infinite alternate; }
@keyframes hintBob { to { transform: translate(-50%, 6px); } }
.fx-slime.is-done { animation: seqOut .5s ease forwards; pointer-events: none; }
.fx-boo { position: fixed; inset: 0; z-index: 10005; display: grid; place-items: center; background: rgba(4, 2, 8, .92); pointer-events: none; animation: booIn 1.25s ease-out forwards; }
.fx-boo .ghost { transform: scale(2.6); filter: drop-shadow(0 0 40px rgba(190, 160, 255, .8)); animation: booLunge 1.25s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.fx-boo b { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-family: var(--spooky); font-size: clamp(90px, 22vw, 200px); line-height: 1; color: var(--blood); text-shadow: 0 0 30px var(--blood); animation: booText 1.25s ease-out forwards; }
@keyframes booIn { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes booLunge { 0% { transform: scale(.2) translateY(200px); } 25% { transform: scale(3.2) translateY(-10px); } 60% { transform: scale(2.8); } 100% { transform: scale(2.6); } }
@keyframes booText { 0%, 15% { opacity: 0; transform: translateX(-50%) scale(.4); } 30% { opacity: 1; transform: translateX(-50%) scale(1.2); } 80% { opacity: 1; } 100% { opacity: 0; } }
.fx-bats { position: fixed; inset: 0; z-index: 10004; pointer-events: none; overflow: hidden; }
.fx-bats span { position: absolute; left: -80px; top: var(--y); font-size: var(--s, 34px); line-height: 1; animation: batFly var(--d, 2.6s) linear var(--dl, 0s) forwards; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
@keyframes batFly { 0% { transform: translate(0, 0) scaleX(1); } 25% { transform: translate(30vw, -40px) scaleX(-1) rotate(8deg); } 50% { transform: translate(60vw, 30px) scaleX(1); } 75% { transform: translate(90vw, -30px) scaleX(-1) rotate(-8deg); } 100% { transform: translate(calc(100vw + 120px), 10px) scaleX(1); } }
.fx-dark { position: fixed; inset: 0; z-index: 10003; pointer-events: none; --x: 50%; --y: 50%; background: radial-gradient(circle 110px at var(--x) var(--y), transparent 0, rgba(0, 0, 0, .55) 60%, rgba(2, 1, 5, .985) 100%); animation: seqIn .5s ease both; }
.fx-dark.is-done { animation: seqOut .8s ease forwards; }
.fx-dark__hint { position: absolute; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); font: 900 12px/1 var(--ui); letter-spacing: .2em; color: var(--candle); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .trick__flame, .trick__eyes i, .trick__bellbtn, .trick__jackpot, body.is-quake, .trick.is-shaking .trick__slab { animation: none !important; }
  body.is-flipped { transform: none; }
}

/* ---- Admin → DOORBELL ---- */
.admin__door { display: block; }
.admin__door[hidden] { display: none; }
.dadm__total { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 900; font-size: 15px; color: var(--ink); margin: 10px 0 14px; }
.dadm__total b { font-size: 22px; color: var(--slime); }
.dadm__total.is-off b { color: var(--blood); }
.dadm__total .dadm__warn { color: var(--blood); font-size: 13px; }
.dadm__bar { flex: 1 1 200px; height: 10px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .08); display: flex; }
.dadm__bar i { display: block; height: 100%; }
.dadm__bar i.t { background: var(--candle); }
.dadm__bar i.k { background: var(--witch); }
.dadm__group { font-family: var(--carny); font-size: 12px; letter-spacing: .2em; color: var(--ink-mute); margin: 16px 0 6px; }
.dadm__row { display: grid; grid-template-columns: auto 52px 1fr 120px 1fr 96px; gap: 8px 10px; align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.dadm__row.is-off { opacity: .5; }
.dadm__row input[type="text"], .dadm__row input[type="number"] { width: 100%; font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.dadm__row input:disabled { opacity: .35; }
.dadm__icon { font-size: 22px; text-align: center; }
.dadm__field { display: flex; flex-direction: column; gap: 3px; font: 800 10px/1 var(--ui); letter-spacing: .12em; color: var(--ink-mute); min-width: 0; }
.dadm__field small { font: 600 11px/1.3 var(--ui); letter-spacing: 0; color: var(--ink-mute); text-transform: none; }
.dadm__on { display: flex; align-items: center; gap: 6px; font: 800 10px/1 var(--ui); letter-spacing: .12em; color: var(--ink-mute); cursor: pointer; }
.dadm__on input { width: 18px; height: 18px; accent-color: var(--slime); cursor: pointer; }
.dadm__chance { font-weight: 900; font-size: 15px; color: var(--pumpkin-2); text-align: right; }
.dadm__line { grid-column: 1 / -1; }
@media (max-width: 760px) { .dadm__row { grid-template-columns: auto 44px 1fr 96px; } .dadm__field--amt, .dadm__field--chance { grid-column: span 2; } }
.dadm__stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.dadm__stats th, .dadm__stats td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.dadm__stats th { font: 800 10px/1 var(--ui); letter-spacing: .14em; color: var(--ink-mute); }
.dadm__stats td:first-child, .dadm__stats th:first-child { text-align: left; }
.dadm__stats tr.is-off td { opacity: .45; }
.dadm__stats .neg { color: var(--blood); }
.dadm__stats .pos { color: var(--slime); }
.dadm__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dadm__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.dadm__tile { background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dadm__tile span { display: block; font: 800 10px/1 var(--ui); letter-spacing: .14em; color: var(--ink-mute); margin-bottom: 6px; }
.dadm__tile b { font-size: 22px; color: var(--candle); }
.dadm__tile small { display: block; font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.dadm__filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.dadm__filters .admin__search { flex: 1 1 220px; width: auto; }
.dadm__filters select { font-size: 14px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.dadm__log { display: grid; gap: 8px; }
.dadm__logrow { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 6px 12px; align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 14px; }
.dadm__logrow .ic { font-size: 22px; text-align: center; }
.dadm__logrow .who { font-weight: 800; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dadm__logrow .who small { display: block; font-weight: 600; color: var(--ink-mute); font-size: 12px; }
.dadm__logrow .what { font-weight: 800; color: var(--candle); }
.dadm__logrow .what.trick { color: var(--witch); }
.dadm__logrow .when { font-size: 12px; color: var(--ink-mute); text-align: right; }
.dadm__logrow .delta { font-weight: 900; }
.dadm__logrow .delta.pos { color: var(--slime); } .dadm__logrow .delta.neg { color: var(--blood); }
@media (max-width: 560px) { .dadm__logrow { grid-template-columns: 36px 1fr auto; } .dadm__logrow .when { grid-column: 2 / -1; text-align: left; } }

/* ============================================================
   INSTANT TAPS — no double-tap zoom, no tap delay, no grey flash on
   iPhone, and a pressed look the moment a finger lands (script.js adds
   .is-pressed on touch-down). Pinch-zoom still works everywhere.
   ============================================================ */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button, a, label, input, select, textarea, summary, [role="button"], [data-game], .trick__scene, .wheel-wrap {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* game boards: a fast double tap never selects text or pops the iPhone menu */
[data-game], .trick, .wheel-wrap, .prize__list, .leaderboard { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn.is-pressed:not(:disabled) { transform: translateY(4px); transition-duration: 0s; }
button:not(.btn).is-pressed:not(:disabled) { filter: brightness(1.2); transition-duration: 0s; }
/* iPhone zooms the page into any field smaller than 16px when it's tapped */
@media (pointer: coarse) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* ---- keep phones fast while playing ----
   The see-through blur behind the header and pop-ups had to be redrawn
   every frame over the moving backdrop; on touch screens they're solid. */
@media (pointer: coarse) {
  .hud { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(12, 7, 20, .96); }
  .modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(6, 3, 10, .9); }
}
/* the carnival holds still behind the arcade, so every frame goes to the games */
body[data-screen="arcade"] .scene, body[data-screen="arcade"] .scene * { animation-play-state: paused !important; }

/* ---- instant feedback while the server answers ---- */
.plinko-ball.is-waiting { animation: plinkoWait .5s ease-in-out infinite alternate; }
@keyframes plinkoWait { from { transform: translate(-50%, -50%) translateX(-3px); } to { transform: translate(-50%, -50%) translateX(3px); } }
.shuffle-cups.is-rattling .shuffle-cup, .is-rattling > .shuffle-cup { animation: cupRattle .16s ease-in-out infinite alternate; }
@keyframes cupRattle { from { rotate: -3deg; } to { rotate: 3deg; } }
[data-game].is-starting { box-shadow: 0 0 0 2px rgba(157, 255, 61, .55), 0 0 26px rgba(157, 255, 61, .25); transition: box-shadow .15s ease; }

/* ---- Hall of Fame: your own row ---- */
.leaderboard__row--me { border-color: var(--slime); box-shadow: 0 0 0 1px var(--slime), 0 0 18px rgba(157, 255, 61, .2); }
.leaderboard__you { font: 900 9px/1 var(--ui); letter-spacing: .14em; color: #10200a; background: var(--slime); border-radius: 999px; padding: 3px 6px; margin-left: 4px; vertical-align: 2px; }
.leaderboard__gap { text-align: center; color: var(--ink-mute); margin: 2px 0; font-weight: 900; letter-spacing: .3em; }

/* ---- "A NEW VERSION HAS RISEN" ---- */
.update-banner { padding: 0; background: none; box-shadow: none; }
.update-banner__tap {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 10px 16px; border: 0; cursor: pointer; text-align: left;
  font: 800 14px/1.2 var(--ui); color: #2a1300;
  background: linear-gradient(90deg, var(--pumpkin), var(--candle), var(--pumpkin));
  background-size: 200% 100%; animation: riseShimmer 3s linear infinite;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 122, 28, .45);
}
@keyframes riseShimmer { to { background-position: -200% 0; } }
.update-banner__icon { font-size: 26px; line-height: 1; animation: riseBob 1.2s ease-in-out infinite alternate; }
@keyframes riseBob { to { transform: translateY(-3px) rotate(-8deg); } }
.update-banner__text { display: flex; flex-direction: column; min-width: 0; }
.update-banner__text b { font-family: var(--spooky); font-weight: 400; font-size: 20px; letter-spacing: .04em; line-height: 1; }
.update-banner__text small { font-size: 12px; font-weight: 700; opacity: .8; }
.update-banner__go { flex: 0 0 auto; font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--candle); background: #2a1300; border-radius: 999px; padding: 9px 13px; }
.update-banner.is-reloading .update-banner__go { opacity: .6; }
@media (max-width: 480px) { .update-banner__text small { display: none; } .update-banner__go { padding: 8px 10px; font-size: 11px; } }
.is-app .update-banner__tap { padding-top: calc(10px + env(safe-area-inset-top)); }

/* ---- pull down to refresh (installed app only; pwa.js) ---- */
.ptr {
  position: fixed; left: 50%; top: calc(6px + env(safe-area-inset-top)); z-index: 9998;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  font: 900 11px/1 var(--ui); letter-spacing: .16em; color: var(--ink);
  background: rgba(20, 12, 34, .96); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  transform: translate(-50%, -80px); opacity: 0; transition: transform .25s ease, opacity .2s ease;
}
.ptr.is-dragging { transition: none; }
.ptr__icon { font-size: 22px; line-height: 1; display: inline-block; }
.ptr.is-ready { border-color: var(--pumpkin); color: var(--candle); }
.ptr.is-busy .ptr__icon { animation: ptrSpin .7s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .update-banner__tap, .update-banner__icon, .plinko-ball.is-waiting, .is-rattling > .shuffle-cup, .ptr.is-busy .ptr__icon { animation: none; }
}