/* Google Fonts removed — using pf-pixelscript via Adobe Fonts */

:root {
  --bg:       #0a100a;
  --bg2:      #0f160f;
  --panel:    rgba(10,14,10,0.55);
  --border:   #1e2e1e;
  --orange:   #cc1515;
  --orange2:  #e02020;
  --green:    #2a7a2a;
  --green-lt: #3aaa3a;
  --green-dim:#1a4a1a;
  --cream:    #e8e0c8;
  --muted:    rgba(232,224,200,0.45);
  --dim:      rgba(232,224,200,0.2);
  --rare:     #9a6ab8;
  --uncommon: #4a8aaa;
  --common:   #607060;
  --legendary:#c89030;

  --scanline: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 4px
  );
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  height:100%; width:100%; overflow:hidden;
  background: #0a100a;
  font-family:'lo-res', sans-serif;
  color:var(--cream);
  image-rendering:pixelated;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(42,122,42,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,122,42,0.08) 1px, transparent 1px);
  background-size:24px 24px;
  pointer-events:none; z-index:0;
  transition: opacity 0.6s ease;
}

.bg-grid {
  position:fixed; inset:0;
  background: #0a100a url('../assets/nature-web-bg.png') no-repeat center center / cover;
  pointer-events:none; z-index:0;
  transition: filter 0.7s ease;
}
.bg-grid::before {
  content: '';
  position: absolute; inset: 0;
  background: url('../assets/flesh-bg.png') no-repeat center center / cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}
body:not(.pristine-phase) .bg-grid::before {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   BACKGROUND TINT — 6 pack states
   filter: hue-rotate() shifts the green-toned base image toward each theme
   colour. Adjust hue-rotate, saturate, brightness freely per state.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. NATURE  — sky blue  #81d4fa */
body.nature-active .bg-grid {
  filter: hue-rotate(0deg) saturate(0.85) brightness(0.95);
}
/* 2. FLESH   — orange-red  #e85c1a  (flesh-bg.png fades in automatically) */
body.flesh-active .bg-grid {
  filter: hue-rotate(0deg) saturate(1.0) brightness(1.0);
}
/* 3. CRITTER — pastel pink  #f0b8d0 */
body.critter-active .bg-grid {
  filter: hue-rotate(130deg) saturate(0.65) brightness(1.1);
}
/* 4. SCOURGE — lime green  #8bc820  (flesh-bg.png fades in automatically) */
body.scourge-active .bg-grid {
  filter: hue-rotate(90deg) saturate(1.2) brightness(1.1);
}
/* 5. FUNGI   — earthy amber  #d4a870 */
body.fungi-active .bg-grid {
  filter: hue-rotate(250deg) saturate(1.95) brightness(1.05);
}
/* 6. RITUAL  — purple  #b060e8  (flesh-bg.png fades in automatically) */
body.ritual-active .bg-grid {
  filter: hue-rotate(280deg) saturate(1.6) brightness(0.9);
}

body::after {
  content:'';
  position:fixed; inset:0;
  background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.75) 100%);
  pointer-events:none; z-index:0;
}

/* ── FLASH ───────────────────────────────────────── */
.flash-overlay {
  position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center,
    rgba(255,200,80,0.9) 0%,
    rgba(200,20,20,0.5) 40%,
    transparent 70%
  );
}
.flash-overlay.flashing { animation:flashBurst 0.8s ease-out forwards; }
@keyframes flashBurst { 0%{opacity:0} 8%{opacity:1} 100%{opacity:0} }

/* ── SHELL ───────────────────────────────────────── */
.shell {
  height:100dvh;
  display:flex; flex-direction:column; align-items:center;
  position:relative; z-index:1; overflow:hidden;
}

/* ── STATUS BAR ──────────────────────────────────── */
.status-bar {
  width:100%; display:flex; align-items:center; justify-content:flex-end;
  padding:10px 12px 0; flex-shrink:0; gap:8px;
}
.wordmark {
  font-family:'lo-res', sans-serif;
  font-size:18px; letter-spacing:0.12em;
  color:var(--orange);
  text-shadow:2px 2px 0 rgba(200,20,20,0.3);
  line-height:1; flex-shrink:0;
}

/* ── COUNTER ROW — packs + coal side by side ─────── */
.counter-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 240px;      /* matches pack canvas width exactly */
  flex-shrink: 0;
}

/* Each counter takes equal half */
.counter-row .pack-counter,
.counter-row .coal-counter {
  flex: 1;
  min-width: 0;
}

/* Coal counter — mirrors pack-counter but green */
.coal-counter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--green-lt);
  background: rgba(0,0,0,0.6);
  position: relative;
  flex-shrink: 0;
  min-width: 90px;
  box-shadow: 0 0 8px rgba(58,170,58,0.2);
}
.coal-counter::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--scanline);
  pointer-events: none; opacity: 0.4;
}
.coal-star {
  font-family: 'lo-res', sans-serif;
  font-size: 28px;
  line-height: 1;
  color: var(--green-lt);
  text-shadow:
    0 0 6px rgba(58,170,58,0.9),
    0 0 14px rgba(58,170,58,0.5);
  animation: coalLedIdle 3s steps(2) infinite;
  flex-shrink: 0;
}

.coal-counter-value {
  font-family: 'pf-pixelscript', cursive;
  font-size: 36px;
  line-height: 1;
  color: var(--green-lt);
  text-shadow:
    0 0 6px rgba(58,170,58,0.9),
    0 0 12px rgba(58,170,58,0.5),
    2px 2px 0 rgba(0,0,0,0.8);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  animation: coalLedIdle 3s steps(2) infinite;
}
@keyframes coalLedIdle { 0%,100%{opacity:1} 97%{opacity:0.85} }

@keyframes coalPulse {
  0%  { box-shadow: 0 0 8px rgba(120,30,180,0.2); }
  50% { box-shadow: 0 0 20px rgba(120,30,180,0.8), 0 0 40px rgba(120,30,180,0.3); }
  100%{ box-shadow: 0 0 8px rgba(120,30,180,0.2); }
}
.coal-pulse { animation: coalPulse 0.4s ease-out; }

.ws-indicator {
  display:flex; align-items:center; gap:5px;
  font-family:'lo-res', sans-serif; font-size:9px; color:var(--muted);
  flex-shrink:0;
}
.ws-dot {
  width:8px; height:8px; border-radius:1px;
  background:#3a1a1a; transition:background 0.3s; image-rendering:pixelated;
}
.ws-dot.live {
  background:var(--orange);
  box-shadow:0 0 4px var(--orange), 0 0 0 1px rgba(200,20,20,0.3);
}
@keyframes pixelBlink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── TICKER ──────────────────────────────────────── */
.ticker-wrap {
  width:100%; overflow:hidden; flex-shrink:0;
  padding:7px 0;
  border-top:2px solid var(--orange);
  border-bottom:2px solid var(--orange);
  background:rgba(200,20,20,0.08);
  position:relative; margin-top:12px;
}
.ticker-wrap::before,
.ticker-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:32px; z-index:2; pointer-events:none;
}
.ticker-wrap::before { left:0;  background:linear-gradient(to right, rgba(8,4,4,0.95), transparent); }
.ticker-wrap::after  { right:0; background:linear-gradient(to left,  rgba(8,4,4,0.95), transparent); }
.ticker-track {
  display:flex; width:max-content; white-space:nowrap;
  animation:tickerScroll 30s linear infinite;
}
.ticker-track:hover { animation-play-state:paused; }
@keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-msg {
  font-family:'lo-res', sans-serif;
  font-size:16px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--orange); text-shadow:1px 1px 0 rgba(200,20,20,0.4); padding:0 28px;
}
.ticker-sep { font-family:'lo-res', sans-serif; font-size:16px; color:var(--green-lt); padding:0 6px; }

/* Ticker states */
.ticker-wrap[data-state="legendary"] { background:rgba(200,144,48,0.12); border-color:var(--legendary); }
.ticker-wrap[data-state="legendary"] .ticker-msg { color:var(--legendary); }
.ticker-wrap[data-state="legendary"] .ticker-sep { color:var(--legendary); }
.ticker-wrap[data-state="active"] .ticker-msg { color:var(--green-lt); }
.ticker-wrap[data-state="active"] .ticker-sep { color:var(--orange); }
.ticker-wrap[data-state="godpack"] { border-color:#fff; animation:godTickerBorder 0.6s steps(2) infinite; }
.ticker-wrap[data-state="godpack"] .ticker-msg {
  background:linear-gradient(90deg,hsl(0,100%,65%),hsl(120,100%,65%),hsl(240,100%,65%),hsl(360,100%,65%));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  background-size:200% auto; animation:godRainbow 1s linear infinite;
}
.ticker-wrap[data-state="godpack"] .ticker-sep { color:#fff; }
@keyframes godTickerBorder { 0%,100%{border-color:#fff} 50%{border-color:rgba(255,255,255,0.4)} }

/* ── NAV ─────────────────────────────────────────── */
.nav-bar {
  display:flex; gap:0; border:2px solid var(--orange);
  margin:12px 0 0; flex-shrink:0; background:var(--panel); overflow:hidden;
}
.nav-btn {
  font-family:'lo-res', sans-serif; font-size:16px;
  letter-spacing:0.15em; color:var(--muted);
  background:none; border:none; border-right:1px solid var(--orange);
  padding:6px 24px; cursor:pointer;
  transition:color 0.1s, background 0.1s; line-height:1.2;
}
.nav-btn:last-child { border-right:none; }
.nav-btn.active { color:var(--bg); background:var(--orange); }

/* ── PAGES ───────────────────────────────────────── */
.page {
  flex:1; width:100%; max-width:420px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0 16px 16px; overflow-y:auto;
}
.page.hidden { display:none; }
.screen { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; position:relative; }
.screen.hidden { display:none; }

/* ── PACK SCREEN ─────────────────────────────────── */
.pack-stack-behind {
  position:absolute; width:200px; height:288px; pointer-events:none; z-index:0;
}
#screen-pack {
  position:relative;
  align-items:center;
  justify-content:center;
  flex: 1;
}

/* Pack type buttons pinned to top zone */
#screen-pack .pack-type-row {
  position: fixed;
  top: 37px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.pack-stack-behind .peek-card { position:absolute; left:50%; top:50%; transform-origin:center center; }
.pack-stack-behind .peek-card:nth-child(1) { transform:translate(-50%,-50%) translateY(16px) rotate(-4deg) scale(0.93); z-index:1; }
.pack-stack-behind .peek-card:nth-child(2) { transform:translate(-50%,-50%) translateY(10px) rotate(-2.5deg) scale(0.96); z-index:2; }
.pack-stack-behind .peek-card:nth-child(3) { transform:translate(-50%,-50%) translateY(5px) rotate(-1deg) scale(0.98); z-index:3; }

.peek-card {
  position:absolute; width:200px; height:288px;
  border:2px solid var(--border); opacity:0; transition:opacity 0.3s, transform 0.3s; image-rendering:pixelated;
}
.pack-stack.stack-reveal .peek-card,
.reveal-peek-stack.stack-reveal .peek-card { opacity:1; }
.peek-card[data-rarity="legendary"] { background:#1a1408; border-color:rgba(200,144,48,0.5); transform:translateY(16px) rotate(-4deg) scale(0.93); box-shadow:0 0 16px rgba(200,144,48,0.2); z-index:1; }
.peek-card[data-rarity="rare"]      { background:#130e1a; border-color:rgba(154,106,184,0.35); transform:translateY(10px) rotate(-2.5deg) scale(0.96); z-index:2; }
.peek-card[data-rarity="uncommon"]  { background:#0c1218; border-color:rgba(74,138,170,0.3); transform:translateY(5px) rotate(-1deg) scale(0.98); z-index:3; }
.peek-card[data-rarity="common"]    { background:var(--panel); border-color:var(--border); transform:translateY(2px) rotate(-0.5deg) scale(0.99); z-index:4; }
.peek-card.peek-dismiss { animation:peekDismiss 0.28s ease-out forwards; }
@keyframes peekDismiss { to{opacity:0;transform:translateY(-18px) scale(0.88);} }

.pack-carousel-stage {
  position: relative;
  width: 264px;
  height: 352px;
  flex-shrink: 0;
  overflow: visible;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-carousel-stage::after {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 29% 34%, rgba(255,160,80,0.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 74% 32%, rgba(220,100,30,0.85) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 24% 64%, rgba(220,100,30,0.8) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 78% 66%, rgba(255,160,80,0.92) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 50%, rgba(200,80,20,0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 50%, rgba(200,80,20,0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 34%, rgba(120,30,180,0.22) 0 16px, transparent 30px),
    radial-gradient(circle at 76% 66%, rgba(120,30,180,0.2) 0 14px, transparent 26px);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: scale(0.98);
  transform-origin: 50% 50%;
  image-rendering: pixelated;
}

.pack-carousel-stage::before {
  content: '';
  position: absolute;
  inset: -8px;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,180,100,1) 0 2px, transparent 3.2px),
    radial-gradient(circle at 80% 30%, rgba(220,110,40,0.96) 0 1.8px, transparent 3px),
    radial-gradient(circle at 18% 70%, rgba(220,110,40,0.9) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 82% 72%, rgba(255,180,100,0.98) 0 2px, transparent 3.2px),
    radial-gradient(circle at 50% 24%, rgba(200,90,20,0.82) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 50% 76%, rgba(200,90,20,0.82) 0 1.6px, transparent 2.8px),
    radial-gradient(circle at 22% 28%, rgba(120,30,180,0.34) 0 20px, transparent 34px),
    radial-gradient(circle at 82% 72%, rgba(120,30,180,0.3) 0 18px, transparent 30px);
  background-repeat: no-repeat;
  transform: scale(0.98);
  transform-origin: 50% 50%;
  image-rendering: pixelated;
}

.pack-carousel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  transform-origin: center center;
}

.carousel-pack {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180px;
  height: 258px;
  border: 2px solid var(--border);
  background: rgba(15,22,15,0.36);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: transform 0.72s cubic-bezier(0.2, 0.82, 0.18, 1), opacity 0.5s ease-out, filter 0.5s ease-out;
  filter: saturate(0.72) brightness(0.62);
  image-rendering: pixelated;
  box-shadow: 0 0 18px rgba(0,0,0,0.38);
}
.carousel-pack::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanline);
  opacity: 0.35;
}
.carousel-pack[data-pack="garbage"] { border-color: rgba(200,20,20,0.42);  background: rgba(20,12,8,0.42); }
.carousel-pack[data-pack="ewaste"]  { border-color: rgba(40,140,255,0.42); background: rgba(8,12,24,0.42); }
.carousel-pack[data-pack="adpack"]  { border-color: rgba(120,30,180,0.42); background: rgba(12,4,20,0.42); }

.carousel-pack.carousel-left {
  opacity: 0.4;
  transform: translate(-102%, -47%) rotate(-17deg) scale(0.76);
  z-index: 1;
}
.carousel-pack.carousel-center {
  opacity: 0.18;
  transform: translate(-50%, -50%) rotate(0deg) scale(0.7);
  filter: saturate(0.6) brightness(0.56);
  z-index: 2;
}
.carousel-pack.carousel-right {
  opacity: 0.4;
  transform: translate(2%, -53%) rotate(17deg) scale(0.76);
  z-index: 1;
}

/* Carousel-stage nudge to make switching read as an arc path */
.pack-carousel-stage.carousel-arc-right .pack-carousel-bg {
  animation: carouselArcRight 0.66s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.pack-carousel-stage.carousel-arc-left .pack-carousel-bg {
  animation: carouselArcLeft 0.66s cubic-bezier(0.2, 0.85, 0.2, 1);
}
@keyframes carouselArcRight {
  0%   { transform: translate(0, 0) rotate(0deg); }
  45%  { transform: translate(8px, -12px) rotate(2.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes carouselArcLeft {
  0%   { transform: translate(0, 0) rotate(0deg); }
  45%  { transform: translate(-8px, -12px) rotate(-2.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Ad-pack shimmer sweep */
#screen-pack.adpack-active .pack-carousel-stage::after {
  opacity: 0.4;
  animation: adpackStageSparkleIdle 4.8s ease-in-out infinite;
}
#screen-pack.adpack-active .pack-carousel-stage::before {
  opacity: 0.46;
  animation: adpackStageSparkleIdleB 5.4s ease-in-out infinite;
}
.pack-carousel-stage.adpack-shimmer-burst::after {
  opacity: 0.62;
  animation: adpackStageSparkleBurst 1.8s ease-out;
}
.pack-carousel-stage.adpack-shimmer-burst::before {
  opacity: 0.72;
  animation: adpackStageSparkleBurstB 2s ease-out;
}
@keyframes adpackStageSparkleIdle {
  0%,100% { transform: scale(0.98) translateY(0) rotate(0deg);      opacity: 0.2;  filter: brightness(1) saturate(1); }
  25%     { transform: scale(1.01) translateY(-1.5px) rotate(1deg); opacity: 0.34; filter: brightness(1.16) saturate(1.05); }
  55%     { transform: scale(1.005) translateY(1.2px) rotate(-0.8deg); opacity: 0.28; filter: brightness(1.08) saturate(1.03); }
  80%     { transform: scale(1.012) translateY(-0.8px) rotate(0.6deg); opacity: 0.32; filter: brightness(1.12) saturate(1.04); }
}
@keyframes adpackStageSparkleIdleB {
  0%,100% { transform: scale(0.99) translateY(0) rotate(0deg);       opacity: 0.23; filter: brightness(1) saturate(1); }
  30%     { transform: scale(1.015) translateY(-1.6px) rotate(-1deg); opacity: 0.36; filter: brightness(1.18) saturate(1.06); }
  60%     { transform: scale(1.008) translateY(1.4px) rotate(0.9deg); opacity: 0.29; filter: brightness(1.1) saturate(1.03); }
  82%     { transform: scale(1.018) translateY(-0.7px) rotate(-0.6deg); opacity: 0.34; filter: brightness(1.14) saturate(1.04); }
}
@keyframes adpackStageSparkleBurst {
  0%   { transform: scale(0.94) translateY(0) rotate(0deg);      opacity: 0;    filter: brightness(1) saturate(1); }
  34%  { transform: scale(1.06) translateY(-2.2px) rotate(1.4deg); opacity: 0.48; filter: brightness(1.28) saturate(1.08); }
  72%  { transform: scale(1.1) translateY(0.8px) rotate(-1deg);  opacity: 0.24; filter: brightness(1.14) saturate(1.04); }
  100% { transform: scale(1.14) translateY(0) rotate(0deg);      opacity: 0;    filter: brightness(1) saturate(1); }
}
@keyframes adpackStageSparkleBurstB {
  0%   { transform: scale(0.93) translateY(0) rotate(0deg);       opacity: 0;    filter: brightness(1) saturate(1); }
  36%  { transform: scale(1.08) translateY(-2.6px) rotate(-1.6deg); opacity: 0.54; filter: brightness(1.34) saturate(1.1); }
  74%  { transform: scale(1.12) translateY(1px) rotate(1deg);      opacity: 0.27; filter: brightness(1.16) saturate(1.05); }
  100% { transform: scale(1.16) translateY(0) rotate(0deg);        opacity: 0;    filter: brightness(1) saturate(1); }
}

.pack-canvas-wrap {
  position:relative; width:300px; height:400px; cursor:grab; flex-shrink:0;
  z-index: 3;
  transform-origin: center center;
}
.pack-canvas-wrap:active { cursor:grabbing; }
.pack-canvas-wrap canvas { display:block; width:100%!important; height:100%!important; image-rendering:pixelated; }

/* ── GOD RAYS — pristine phase only, white, breathing + slow rotation ──────── */

/* Primary rays — long, soft-edged streaks, slow clockwise spin */
body.pristine-phase .pack-canvas-wrap::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  filter: blur(5px);
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255,255,255,0.00)  0deg,
    rgba(255,255,255,0.75)  2deg,
    rgba(255,255,255,0.30)  5deg,
    transparent              6deg  22deg,
    rgba(255,255,255,0.24)  22deg,
    rgba(255,255,255,0.10)  25deg,
    transparent              27deg 48deg
  );
  -webkit-mask-image: radial-gradient(ellipse 50% 56% at 50% 50%, black 0%, transparent 85%);
          mask-image: radial-gradient(ellipse 50% 56% at 50% 50%, black 0%, transparent 85%);
  animation: godRayBreathe 5s ease-in-out infinite,
             godRaySpin 65s linear infinite;
}

/* Secondary rays — shorter, soft streaks, slow counter-clockwise spin */
body.pristine-phase .pack-canvas-wrap::after {
  content: '';
  position: absolute;
  inset: -16%;
  z-index: -1;
  pointer-events: none;
  filter: blur(4px);
  background: repeating-conic-gradient(
    from 11deg at 50% 50%,
    rgba(255,255,255,0.00)  0deg,
    rgba(255,255,255,0.55)  1.5deg,
    rgba(255,255,255,0.22)  4deg,
    transparent              5deg  20deg,
    rgba(255,255,255,0.18)  20deg,
    rgba(255,255,255,0.08)  22deg,
    transparent              23deg 40deg
  );
  -webkit-mask-image: radial-gradient(ellipse 46% 52% at 50% 50%, black 0%, transparent 82%);
          mask-image: radial-gradient(ellipse 46% 52% at 50% 50%, black 0%, transparent 82%);
  animation: godRayBreathe 5s ease-in-out infinite 1.4s,
             godRaySpin 65s linear infinite reverse;
}

@keyframes godRayBreathe {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 1.00; }
}
@keyframes godRaySpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Collapse rays inward when pack dissolves */
body.pristine-phase.pack-dissolving .pack-canvas-wrap::before {
  animation: godRayCollapse 0.7s ease-in forwards;
}
body.pristine-phase.pack-dissolving .pack-canvas-wrap::after {
  animation: godRayCollapse 0.7s ease-in forwards 0.05s;
}
@keyframes godRayCollapse {
  from { opacity: 1; transform: rotate(0deg)  scale(1);    }
  to   { opacity: 0; transform: rotate(12deg) scale(0.08); }
}

/* ── Corruption glitch transition ────────────────────────────────────────── */
/* Pixel-nudge on the Three.js pack canvas — integer pixel shifts only       */
body.glitch-active .pack-canvas-wrap canvas {
  animation: packPixelNudge 0.10s steps(1) infinite;
}
@keyframes packPixelNudge {
  0%   { transform: translate(0,  0);  }
  25%  { transform: translate(-5px, 2px); }
  50%  { transform: translate(5px,  0);  }
  75%  { transform: translate(-3px,-3px); }
  100% { transform: translate(0,  0);  }
}
/* UI rows nudge independently — reinforces that the whole screen is affected */
body.glitch-active .pack-type-row {
  animation: uiRowNudge 0.13s steps(1) infinite;
}
body.glitch-active .star-counter-row {
  animation: uiRowNudge 0.11s steps(1) infinite reverse;
}
@keyframes uiRowNudge {
  0%   { transform: translateX(calc(-50% + 0px));  }
  33%  { transform: translateX(calc(-50% - 4px));  }
  66%  { transform: translateX(calc(-50% + 3px));  }
  100% { transform: translateX(calc(-50% + 0px));  }
}
.pack-canvas-wrap.fly-left  { animation:flyLeft  0.4s ease-in forwards; }
.pack-canvas-wrap.fly-right { animation:flyRight 0.4s ease-in forwards; }
@keyframes flyLeft  { to{transform:translateX(-160%) rotate(-15deg);opacity:0;} }
@keyframes flyRight { to{transform:translateX(160%)  rotate(15deg); opacity:0;} }

.pack-canvas-wrap.pack-swap-out-left  { animation: packSwapOutLeft 0.2s ease-in forwards; }
.pack-canvas-wrap.pack-swap-out-right { animation: packSwapOutRight 0.2s ease-in forwards; }
.pack-canvas-wrap.pack-swap-in-left   { animation: packSwapInLeft 0.34s cubic-bezier(0.18, 0.85, 0.2, 1) forwards; }
.pack-canvas-wrap.pack-swap-in-right  { animation: packSwapInRight 0.34s cubic-bezier(0.18, 0.85, 0.2, 1) forwards; }

@keyframes packSwapOutLeft {
  from { transform: translateX(0) rotate(0deg) scale(1); opacity:1; }
  to   { transform: translate(-34px, -12px) rotate(-14deg) scale(0.93); opacity:0.04; }
}
@keyframes packSwapOutRight {
  from { transform: translateX(0) rotate(0deg) scale(1); opacity:1; }
  to   { transform: translate(34px, -12px) rotate(14deg) scale(0.93); opacity:0.04; }
}
@keyframes packSwapInLeft {
  0%   { transform: translate(38px, 12px) rotate(14deg) scale(0.93); opacity:0.04; }
  58%  { transform: translate(-7px, -10px) rotate(-6deg) scale(1.01); opacity:0.92; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity:1; }
}
@keyframes packSwapInRight {
  0%   { transform: translate(-38px, 12px) rotate(-14deg) scale(0.93); opacity:0.04; }
  58%  { transform: translate(7px, -10px) rotate(6deg) scale(1.01); opacity:0.92; }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity:1; }
}

.pack-hint { font-family:'lo-res', sans-serif; font-size:8px; letter-spacing:0.12em; color:var(--dim); text-transform:uppercase; }

/* LED Pack Counter */
.pack-counter {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 10px; border:1px solid rgba(200,20,20,0.78); background:#000;
  position:relative; flex-shrink:0; min-width:90px;
  box-shadow: 0 0 8px rgba(200,20,20,0.16);
  min-height: 62px;
}
.pack-counter::after { content:''; position:absolute; inset:0; background:var(--scanline); pointer-events:none; opacity:0.4; }
.counter-led-wrap { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; }
.counter-packs {
  font-family:'pf-pixelscript', cursive; font-size:32px; line-height:1; color:var(--orange);
  text-shadow:0 0 6px rgba(200,20,20,0.85), 0 0 12px rgba(200,20,20,0.42), 2px 2px 0 rgba(0,0,0,0.8);
  letter-spacing:0.06em; font-variant-numeric:tabular-nums;
  animation:ledIdle 3s steps(2) infinite;
}
@keyframes ledIdle { 0%,100%{opacity:1} 97%{opacity:0.85} }
.counter-meta { display:flex; flex-direction:column; align-items:flex-start; gap:0; min-width:92px; }
.counter-label { font-family:'lo-res', sans-serif; font-size:7px; letter-spacing:0.12em; color:rgba(200,20,20,0.95); text-transform:uppercase; line-height:1.15; }
.counter-sub   { font-family:'lo-res', sans-serif; font-size:6px; letter-spacing:0.08em; color:var(--dim); text-transform:uppercase; line-height:1.15; white-space:nowrap; }
.counter-tag   { font-family:'lo-res', sans-serif; font-size:6px; letter-spacing:0.2em; color:rgba(200,20,20,0.92); opacity:0.82; text-transform:uppercase; line-height:1; }
.pack-counter[data-state="waiting"] { border-color:var(--green); }
.pack-counter[data-state="waiting"] .counter-led-wrap {
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}
.pack-counter[data-state="waiting"] .counter-packs {
  color:var(--green-lt); font-size:18px;
  text-shadow:0 0 6px rgba(58,170,58,0.8), 0 0 12px rgba(58,170,58,0.3);
  animation:ledCountdown 1s steps(2) infinite; letter-spacing:0.04em;
}
.pack-counter[data-state="waiting"] .counter-label { color:var(--orange); }
.pack-counter[data-state="waiting"] .counter-meta {
  min-width: 0;
  align-items: center;
  text-align: center;
}
.pack-counter[data-state="waiting"] .counter-label { font-size: 6px; }
.pack-counter[data-state="waiting"] .counter-sub {
  font-size: 5px;
  letter-spacing: 0.06em;
  white-space: normal;
}
@keyframes ledCountdown { 0%,100%{opacity:1} 50%{opacity:0.6} }
.pack-counter.counter-pulse { animation:counterFlash 0.3s steps(4); }
@keyframes counterFlash { 0%{background:rgba(200,20,20,0.3)} 100%{background:rgba(0,0,0,0.35)} }

/* ── REVEAL SCREEN ───────────────────────────────── */
.reveal-peek-stack {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-54%);
  width:200px; height:288px; pointer-events:none; z-index:0;
}
.reveal-peek-stack .peek-card { position:absolute; left:0; top:0; width:200px; height:288px; }
.reveal-header { position:relative; z-index:2; }
.reveal-counter { font-family:'lo-res', sans-serif; font-size:18px; letter-spacing:0.2em; color:var(--green-lt); line-height:1; }
.rev-card {
  width:216px; min-height:296px; border:3px solid var(--border); background:var(--panel);
  display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer;
  position:relative; z-index:2; opacity:0; box-shadow:4px 4px 0 rgba(0,0,0,0.5); image-rendering:pixelated;
}
.rev-card::after { content:''; position:absolute; inset:0; background:var(--scanline); pointer-events:none; z-index:3; opacity:0.35; }
.rev-card[data-rarity="common"]    { border-color:var(--common); }
.rev-card[data-rarity="uncommon"]  { border-color:var(--uncommon); box-shadow:4px 4px 0 rgba(0,0,0,0.5),0 0 16px rgba(74,138,170,0.15); }
.rev-card[data-rarity="rare"]      { border-color:var(--rare);     box-shadow:4px 4px 0 rgba(0,0,0,0.5),0 0 20px rgba(154,106,184,0.2); }
.rev-card[data-rarity="legendary"] { border-color:var(--legendary);box-shadow:4px 4px 0 rgba(0,0,0,0.5),0 0 28px rgba(200,144,48,0.25); animation:legendaryPulse 2s steps(4) infinite; }
@keyframes legendaryPulse {
  0%,100%{box-shadow:4px 4px 0 rgba(0,0,0,0.5),0 0 20px rgba(200,144,48,0.2)}
  50%    {box-shadow:4px 4px 0 rgba(0,0,0,0.5),0 0 40px rgba(200,144,48,0.5)}
}
.rev-card { cursor:pointer; overflow:hidden; }
.rev-card canvas { display:block; width:100%!important; height:100%!important; }
.reveal-hint {
  font-family:'lo-res', sans-serif; font-size:8px; letter-spacing:0.18em;
  color:var(--green-lt); text-transform:uppercase;
  animation:pixelBlink 1.8s steps(2) infinite; position:relative; z-index:2;
}

/* ── CHOOSE SCREEN ───────────────────────────────── */
.choose-header { text-align:center; }
.choose-title {
  display:block; font-family:'lo-res', sans-serif; font-size:26px; line-height:1;
  letter-spacing:0.15em; color:var(--orange); text-shadow:2px 2px 0 rgba(200,20,20,0.3);
}
.choose-sub { font-family:'lo-res', sans-serif; font-size:8px; color:var(--muted); letter-spacing:0.1em; }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; padding:4px; }
.choice-cell-3d { width:100%; aspect-ratio:2/3; cursor:pointer; position:relative; }
.choice-cell-3d canvas { display:block; width:100%!important; height:100%!important; image-rendering:pixelated; }

/* ── GATE SCREEN ─────────────────────────────────── */
.gate-wrapper {
  display:flex; flex-direction:column; align-items:center; gap:20px;
  padding:24px 20px; width:100%;
}
.gate-header { text-align:center; }
.gate-title {
  display:block; font-family:'lo-res', sans-serif; font-size:32px; letter-spacing:0.15em;
  color:var(--orange); text-shadow:2px 2px 0 rgba(200,20,20,0.3);
}
.gate-sub { font-family:'lo-res', sans-serif; font-size:9px; color:var(--muted); letter-spacing:0.08em; }

.coal-display {
  display:flex; align-items:center; gap:8px; padding:10px 24px;
  border:2px solid var(--orange); background:rgba(0,0,0,0.35);
}
.coal-icon  { font-family:'lo-res', sans-serif; font-size:22px; color:var(--orange); }
.coal-value { font-family:'lo-res', sans-serif; font-size:48px; color:var(--orange); line-height:1; text-shadow:0 0 12px rgba(200,20,20,0.6); }
.coal-label { font-family:'lo-res', sans-serif; font-size:9px; color:var(--muted); letter-spacing:0.15em; }

.gate-options { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }

.gate-btn {
  width:100%; padding:14px 20px; border:2px solid var(--border); background:var(--panel);
  display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(0,0,0,0.5); transition:transform 0.05s, box-shadow 0.05s;
}
.gate-btn:active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,0.5); }
.gate-btn:disabled { cursor:not-allowed; }
.gate-btn--ad   { border-color:var(--orange); }
.gate-btn--coal { border-color:var(--green-lt); }
.gate-btn-title { font-family:'lo-res', sans-serif; font-size:24px; letter-spacing:0.1em; color:var(--cream); }
.gate-btn--ad   .gate-btn-title { color:var(--orange); }
.gate-btn--coal .gate-btn-title { color:var(--green-lt); }
.gate-btn-sub { font-family:'lo-res', sans-serif; font-size:8px; letter-spacing:0.08em; color:var(--muted); }

.gate-divider { font-family:'lo-res', sans-serif; font-size:9px; color:var(--dim); letter-spacing:0.2em; }

.gate-footnote {
  font-family:'lo-res', sans-serif; font-size:8px; color:var(--dim);
  letter-spacing:0.06em; text-align:center; line-height:1.6; max-width:280px;
}

/* ── AD SCREEN ───────────────────────────────────── */
.ad-wrapper { display:flex; flex-direction:column; width:100%; height:100%; }

.ad-content {
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  background:#050a05; border:2px solid var(--orange); overflow:hidden;
}
.ad-scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.25) 2px,rgba(0,0,0,0.25) 4px);
}
.ad-inner {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:32px 24px; text-align:center; position:relative; z-index:3;
}
.ad-brand {
  font-family:'lo-res', sans-serif; font-size:10px; letter-spacing:0.3em;
  color:var(--muted); text-transform:uppercase;
}
.ad-headline {
  font-family:'lo-res', sans-serif; font-size:52px; line-height:1; letter-spacing:0.05em;
  color:var(--orange); text-shadow:2px 2px 0 rgba(200,20,20,0.4), 0 0 24px rgba(200,20,20,0.3);
  animation:crtPulse 3s ease-in-out infinite;
}
@keyframes crtPulse {
  0%,100%{ text-shadow:2px 2px 0 rgba(200,20,20,0.4),0 0 20px rgba(200,20,20,0.3); }
  50%    { text-shadow:2px 2px 0 rgba(200,20,20,0.6),0 0 32px rgba(200,20,20,0.5); }
}
.ad-sub {
  font-family:'lo-res', sans-serif; font-size:11px; color:var(--cream);
  letter-spacing:0.06em; line-height:1.8; white-space:pre-line; opacity:0.7;
}
.ad-corner { position:absolute; width:16px; height:16px; border-color:var(--orange); border-style:solid; opacity:0.6; }
.ad-corner.tl { top:8px;    left:8px;    border-width:2px 0 0 2px; }
.ad-corner.tr { top:8px;    right:8px;   border-width:2px 2px 0 0; }
.ad-corner.bl { bottom:8px; left:8px;    border-width:0 0 2px 2px; }
.ad-corner.br { bottom:8px; right:8px;   border-width:0 2px 2px 0; }

.ad-progress { height:4px; background:var(--border); width:100%; flex-shrink:0; }
.ad-progress-fill {
  height:100%; width:0%; background:var(--orange); transition:width 0.1s linear;
  box-shadow:0 0 6px rgba(200,20,20,0.6);
}

.ad-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; background:var(--panel); border:2px solid var(--border);
  border-top:none; flex-shrink:0;
}
.ad-time  { font-family:'lo-res', sans-serif; font-size:22px; color:var(--muted); min-width:36px; }
.ad-label { font-family:'lo-res', sans-serif; font-size:8px; letter-spacing:0.2em; color:var(--dim); }
.ad-skip-btn {
  font-family:'lo-res', sans-serif; font-size:16px; letter-spacing:0.1em;
  color:var(--bg); background:var(--orange); border:none; padding:6px 14px;
  cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,0.5); transition:transform 0.05s, opacity 0.2s;
}
.ad-skip-btn:active { transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(0,0,0,0.5); }
.ad-skip-btn:disabled { opacity:0.35; cursor:not-allowed; }

/* ── DEBUG PAGE ──────────────────────────────────── */
#page-debug { justify-content:flex-start; padding-top:20px; gap:18px; }
.debug-header { text-align:center; width:100%; }
.debug-title { display:block; font-family:'lo-res', sans-serif; font-size:24px; line-height:1; letter-spacing:0.15em; color:var(--orange); text-shadow:2px 2px 0 rgba(200,20,20,0.3); }
.debug-sub   { font-family:'lo-res', sans-serif; font-size:8px; color:var(--muted); letter-spacing:0.1em; }
.debug-grid  { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.debug-card {
  border:2px solid var(--border); background:var(--panel); padding:16px 10px 12px;
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
  box-shadow:3px 3px 0 rgba(0,0,0,0.5); transition:transform 0.05s, box-shadow 0.05s;
}
.debug-card:active { transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,0.5); }
.debug-card[data-rarity="common"]    { border-color:var(--common); }
.debug-card[data-rarity="uncommon"]  { border-color:var(--uncommon); }
.debug-card[data-rarity="rare"]      { border-color:var(--rare); }
.debug-card[data-rarity="legendary"] { border-color:var(--legendary); }
.debug-card.spawned { animation:debugFlash 0.3s steps(4); }
@keyframes debugFlash { 0%{background:rgba(200,20,20,0.25)} 100%{background:var(--panel)} }
.debug-shape-wrap { width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
.debug-card-name  { font-family:'lo-res', sans-serif; font-size:16px; line-height:1; letter-spacing:0.06em; color:var(--cream); }
.debug-card-rarity { font-family:'lo-res', sans-serif; font-size:7px; letter-spacing:0.1em; text-transform:uppercase; }
.debug-card[data-rarity="common"]    .debug-card-rarity { color:var(--common); }
.debug-card[data-rarity="uncommon"]  .debug-card-rarity { color:var(--uncommon); }
.debug-card[data-rarity="rare"]      .debug-card-rarity { color:var(--rare); }
.debug-card[data-rarity="legendary"] .debug-card-rarity { color:var(--legendary); }
.debug-log-wrap { width:100%; }
.debug-log-label { font-family:'lo-res', sans-serif; font-size:8px; letter-spacing:0.18em; color:var(--muted); margin-bottom:6px; text-transform:uppercase; }
.debug-log {
  width:100%; min-height:70px; max-height:120px; overflow-y:auto;
  background:rgba(0,0,0,0.35); border:2px solid var(--green); padding:8px 10px;
  display:flex; flex-direction:column; gap:3px;
}
.debug-log-empty { font-family:'lo-res', sans-serif; font-size:14px; color:var(--dim); letter-spacing:0.08em; }
.debug-log-entry { font-family:'lo-res', sans-serif; font-size:14px; letter-spacing:0.06em; color:var(--orange); opacity:0; animation:logIn 0.1s steps(2) forwards; }
@keyframes logIn { to{opacity:0.85;} }
.debug-log-entry .log-time { color:var(--green-lt); margin-right:8px; }

/* ── SHAPES ──────────────────────────────────────── */
.debug-shape-el.shape-small-cube { width:22px; height:22px; background:var(--common); box-shadow:2px 2px 0 rgba(0,0,0,0.4); }
.debug-shape-el.shape-large-cube { width:44px; height:44px; background:var(--uncommon); box-shadow:2px 2px 0 rgba(0,0,0,0.4); }
.debug-shape-el.shape-sphere     { width:40px; height:40px; background:var(--rare); clip-path:polygon(15% 0%,85% 0%,100% 15%,100% 85%,85% 100%,15% 100%,0% 85%,0% 15%); box-shadow:2px 2px 0 rgba(0,0,0,0.4); }
.debug-shape-el.shape-triangle   { width:0; height:0; border-left:22px solid transparent; border-right:22px solid transparent; border-bottom:40px solid var(--legendary); filter:drop-shadow(2px 2px 0 rgba(0,0,0,0.4)); }

/* ── GOD-PACK BANNER ─────────────────────────────── */
.god-pack-banner {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:300;
  display:flex; align-items:center; gap:16px; padding:18px 36px;
  background:rgba(0,0,0,0.92); border:2px solid rgba(255,255,255,0.8);
  pointer-events:none; animation:godBannerIn 0.25s steps(5) forwards;
}
.god-pack-banner.hidden { display:none; }
@keyframes godBannerIn {
  from{opacity:0;transform:translate(-50%,-50%) scale(0.85);}
  to  {opacity:1;transform:translate(-50%,-50%) scale(1);}
}
.god-banner-text {
  font-family:'lo-res', sans-serif; font-size:52px; line-height:1; letter-spacing:0.2em;
  background:linear-gradient(90deg,hsl(0,100%,65%),hsl(60,100%,65%),hsl(120,100%,65%),hsl(180,100%,65%),hsl(240,100%,65%),hsl(300,100%,65%),hsl(360,100%,65%));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:godRainbow 0.8s linear infinite; background-size:200% auto;
}
@keyframes godRainbow { 0%{background-position:0% center} 100%{background-position:200% center} }
.god-banner-star {
  font-family:'lo-res', sans-serif; font-size:40px; color:#fff; animation:godSpin 1s steps(4) infinite;
}
@keyframes godSpin {
  0%  {transform:rotate(0deg);  opacity:1}
  25% {transform:rotate(90deg); opacity:0.5}
  50% {transform:rotate(180deg);opacity:1}
  75% {transform:rotate(270deg);opacity:0.5}
  100%{transform:rotate(360deg);opacity:1}
}

/* ── AD LED MATRIX — full ad surface ─────────────── */
.ad-led-wrap {
  width: 100%;
  flex: 1;
  position: relative;
  background: #000;
  border: 2px solid rgba(240,240,240,0.9);
  overflow: hidden;
  /* CRT screen perspective warp */
  perspective: 600px;
}

.ad-led-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  /* CRT curvature — slight barrel distortion feel via transform */
  transform: rotateX(2deg) scaleX(0.97);
  transform-origin: center center;
}

.ad-led-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  /* Tight scanlines over the LED */
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.22) 3px,
    rgba(0,0,0,0.22) 4px
  );
}

/* CRT vignette — darkens edges */
.ad-led-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 48%,
    rgba(0,0,0,0.72) 100%
  );
}

/* Corner brackets sit over the LED */
.ad-led-wrap .ad-corner { position: absolute; width: 16px; height: 16px; border-color: var(--orange); border-style: solid; opacity: 0.7; z-index: 5; }
.ad-led-wrap .ad-corner { border-color: rgba(255,255,255,0.85); opacity: 0.85; }
.ad-led-wrap .ad-corner.tl { top: 8px;    left: 8px;    border-width: 2px 0 0 2px; }
.ad-led-wrap .ad-corner.tr { top: 8px;    right: 8px;   border-width: 2px 2px 0 0; }
.ad-led-wrap .ad-corner.bl { bottom: 8px; left: 8px;    border-width: 0 0 2px 2px; }
.ad-led-wrap .ad-corner.br { bottom: 8px; right: 8px;   border-width: 0 2px 2px 0; }

/* ── PACK TYPE SELECTOR ──────────────────────────────── */
.pack-type-row {
  display: flex;
  gap: 6px;
  width: 30px;
  flex-shrink: 0;
  align-items: stretch;
  margin-bottom: 2px;
}

.pack-type-btn {
  flex: 1 1 0;
  display: flex;
 
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  gap: 4px;
  padding: 12px 6px;
  background: #0a0e0a;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, transform 0.12s, box-shadow 0.14s;
  font-family: inherit;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.pack-type-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.pack-type-btn.active {
  border-color: var(--orange);
  background: #130303;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(200,20,20,0.2);
  transform: translateY(-1px);
}
.pack-type-btn.active .pack-type-label { color: var(--orange); }

.pack-type-icon  { font-size: 24px; line-height: 1; color: var(--muted); }
.pack-type-label {
  font-family: 'lo-res', sans-serif;
  font-size: 9px; letter-spacing: 0.16em;
  color: var(--dim); text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.pack-type-btn.active .pack-type-icon { color: var(--orange); }

/* ── Fungi phase: earthy amber button override ──────────────────────────── */
.pack-type-btn.fungi-mode.active {
  border-color: #d4a870;
  background: #100e08;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(212,168,112,0.25);
}
.pack-type-btn.fungi-mode.active .pack-type-label,
.pack-type-btn.fungi-mode.active .pack-type-icon { color: #d4a870; }
.pack-type-btn.fungi-mode:not(.active) .pack-type-label,
.pack-type-btn.fungi-mode:not(.active) .pack-type-icon { color: #a07848; }

/* ── Critter phase: pastel pink button override ─────────────────────────── */
.pack-type-btn.critter-mode.active {
  border-color: #f0b8d0;
  background: #130b10;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(240,184,208,0.25);
}
.pack-type-btn.critter-mode.active .pack-type-label,
.pack-type-btn.critter-mode.active .pack-type-icon { color: #f0b8d0; }
.pack-type-btn.critter-mode:not(.active) .pack-type-label,
.pack-type-btn.critter-mode:not(.active) .pack-type-icon { color: #c490a8; }

/* ── STAR COUNTER — below pack canvas ───────────────── */
.star-counter {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "icon value"
    "meta meta";
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  row-gap: 1px;
  padding: 3px 8px;
  border: 1px solid rgba(200,20,20,0.75);
  background: #000;
  position: relative;
  box-shadow: 0 0 8px rgba(200,20,20,0.16);
  width: 240px;
  min-height: 62px;
}
.star-counter::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--scanline);
  pointer-events: none; opacity: 0.35;
}
/* Star counter row — counter + shop button side by side */
.star-counter-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 240px;
  flex-shrink: 0;
  margin: 0 auto;
}
.star-counter-row .star-counter {
  flex: 0 0 33.333%;
  width: 33.333%;
  min-width: 0;
}

/* Shop button — attached to star counter */
.star-shop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 10px;
  border: 1px solid rgba(200,20,20,0.85);
  background: #130303;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(200,20,20,0.18);
  flex: 0 0 33.333%;
  width: 33.333%;
  min-width: 0;
  min-height: 52px;
  transition: box-shadow 0.1s;
  position: relative;
  overflow: hidden;
}
.star-shop-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--scanline);
  pointer-events: none; opacity: 0.3;
}
.star-shop-btn::before {
  content: none;
}
.star-shop-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
.star-shop-btn:hover  { box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(200,20,20,0.34); background: #1a0404; }

.star-shop-btn-icon {
  font-family: 'lo-res', sans-serif;
  font-size: 24px; line-height: 1;
  color: #cc1515;
  text-shadow: 0 0 10px rgba(200,20,20,0.95), 0 0 20px rgba(200,20,20,0.45);
  animation: starIconIdle 2.5s steps(2) infinite;
}
.star-shop-btn-label {
  font-family: 'lo-res', sans-serif;
  font-size: 8px; letter-spacing: 0.18em;
  color: #e04040; text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 0 8px rgba(200,20,20,0.82);
}

/* Star counter — gold */
.star-counter-icon {
  font-family: 'lo-res', sans-serif;
  font-size: 20px; line-height: 1;
  color: #cc1515;
  text-shadow: 0 0 8px rgba(200,20,20,0.9), 0 0 18px rgba(200,20,20,0.5);
  animation: starIconIdle 2.5s steps(2) infinite;
  flex-shrink: 0;
  grid-area: icon;
}
@keyframes starIconIdle { 0%,100%{opacity:1} 92%{opacity:0.75} }

.star-counter-value {
  font-family: 'pf-pixelscript', cursive;
  font-size: 30px; line-height: 1;
  color: #cc1515;
  text-shadow:
    0 0 8px rgba(200,20,20,0.95),
    0 0 18px rgba(200,20,20,0.5),
    2px 2px 0 rgba(0,0,0,0.8);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  animation: starIconIdle 2.5s steps(2) infinite;
  grid-area: value;
}
.star-counter-meta {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-align: center;
  grid-area: meta;
}
.star-counter-label {
  font-family: 'lo-res', sans-serif;
  font-size: 8px; letter-spacing: 0.15em;
  color: rgba(200,20,20,0.95); text-transform: uppercase; line-height: 1.2;
}
.star-counter-sub {
  font-family: 'lo-res', sans-serif;
  font-size: 6px; letter-spacing: 0.08em;
  color: var(--dim); text-transform: uppercase; line-height: 1.2;
  white-space: nowrap;
}

/* Bottom row: pack counter + stars + shop */
#screen-pack .star-counter-row {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 300px;
}

/* Pack counter as flex item inside bottom row */
#screen-pack .star-counter-row .pack-counter {
  position: static;
  transform: none;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 62px;
}

/* Stack value above label in bottom row */
#screen-pack .star-counter-row .pack-counter .counter-led-wrap {
  flex-direction: column;
  gap: 1px;
}
#screen-pack .star-counter-row .pack-counter .counter-meta {
  align-items: center;
  text-align: center;
  min-width: 0;
}
#screen-pack .star-counter-row .pack-counter .counter-sub {
  font-family: 'lo-res', sans-serif;
  font-size: 7px;
  letter-spacing: 0.04em;
  white-space: normal;
  text-align: center;
}
#screen-pack .star-counter-row .pack-counter .counter-tag {
  display: none;
}

#screen-pack .star-counter-row .star-counter,
#screen-pack .star-counter-row .star-shop-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
}

/* Scourge pack type button — green active state */
#packTypeEwaste.active {
  border-color: #5fc05a;
  background: #071203;
}
#packTypeEwaste.active .pack-type-label,
#packTypeEwaste.active .pack-type-icon {
  color: #5fc05a;
}

/* ── SHOP SCREEN ─────────────────────────────────── */
.shop-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  gap: 0;
  padding-bottom: 16px;
}

.shop-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 16px 12px;
  border-bottom: 2px solid var(--orange);
  background: rgba(0,0,0,0.4);
  flex-shrink: 0;
}

.shop-title {
  font-family: 'lo-res', sans-serif;
  font-size: 28px; letter-spacing: 0.2em;
  color: var(--orange);
  text-shadow: 2px 2px 0 rgba(200,20,20,0.4), 0 0 20px rgba(200,20,20,0.3);
}

.shop-sub {
  font-family: 'lo-res', sans-serif;
  font-size: 8px; letter-spacing: 0.12em;
  color: var(--muted);
}

.shop-balance {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--green-lt);
  background: rgba(0,0,0,0.5);
  margin-top: 6px;
}
.shop-balance-icon  { font-family:'VT323',monospace; font-size:16px; color:var(--green-lt); }
.shop-balance-value { font-family:'VT323',monospace; font-size:22px; color:var(--green-lt); line-height:1; text-shadow:0 0 8px rgba(58,170,58,0.6); }
.shop-balance-label { font-family:'Share Tech Mono',monospace; font-size:7px; color:var(--muted); letter-spacing:0.12em; }

.shop-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 12px;
  margin-top: 8px;
}

.shop-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  margin-bottom: 6px;
  position: relative;
}

.shop-item--locked {
  border-color: var(--border);
  opacity: 0.85;
}

.shop-item--whale {
  border-color: var(--legendary) !important;
  background: rgba(200,144,48,0.06) !important;
  opacity: 1 !important;
}

.shop-item-stars {
  font-family: 'lo-res', sans-serif;
  font-size: 24px; line-height: 1;
  color: var(--green-lt);
  text-shadow: 0 0 8px rgba(58,170,58,0.5);
}

.shop-item-stars--whale {
  font-size: 20px;
  color: var(--legendary);
  text-shadow: 0 0 12px rgba(200,144,48,0.6);
  animation: legendaryPulse 2s steps(4) infinite;
}

.shop-item-name {
  font-family: 'lo-res', sans-serif;
  font-size: 20px; letter-spacing: 0.08em;
  color: var(--cream);
}

.shop-item-desc {
  font-family: 'lo-res', sans-serif;
  font-size: 8px; color: var(--muted);
  letter-spacing: 0.06em; line-height: 1.6;
}

.shop-item-price {
  font-family: 'lo-res', sans-serif;
  font-size: 16px; color: var(--orange);
  letter-spacing: 0.1em;
}

.shop-item-time {
  font-family: 'lo-res', sans-serif;
  font-size: 7px; color: var(--dim);
  letter-spacing: 0.06em;
  font-style: italic;
}

.shop-item-fine {
  font-family: 'lo-res', sans-serif;
  font-size: 6px; color: var(--dim);
  letter-spacing: 0.04em; line-height: 1.5;
  opacity: 0.6;
}

.shop-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 16px;
  font-family: 'lo-res', sans-serif;
  font-size: 15px; letter-spacing: 0.12em;
  color: var(--bg); background: var(--border);
  border: none; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  transition: transform 0.05s;
  opacity: 0.45;
}
.shop-btn:active { transform: translate(1px,1px); }

.shop-btn--affordable {
  background: var(--orange);
  color: var(--bg);
  opacity: 1;
}

.shop-btn--whale {
  background: var(--legendary);
  color: var(--bg);
  opacity: 1;
  animation: legendaryPulse 2s steps(4) infinite;
}

.shop-footer {
  padding: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
}

.shop-footnote {
  font-family: 'lo-res', sans-serif;
  font-size: 6px; color: var(--dim);
  letter-spacing: 0.04em; line-height: 1.7;
}

.shop-close-btn {
  align-self: center;
  padding: 8px 24px;
  font-family: 'lo-res', sans-serif;
  font-size: 18px; letter-spacing: 0.15em;
  color: var(--bg); background: var(--orange);
  border: none; cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
}
.shop-close-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,0.5); }

/* Shop nav button in pack type row */
.pack-type-btn--shop {
  border-color: var(--legendary) !important;
}
.pack-type-btn--shop.active,
.pack-type-btn--shop:hover {
  border-color: var(--legendary) !important;
  background: #0c0a02 !important;
}
.pack-type-btn--shop .pack-type-icon,
.pack-type-btn--shop .pack-type-label {
  color: var(--legendary) !important;
}

/* Shop screen needs to scroll */
#screen-shop {
  justify-content: flex-start;
  overflow-y: auto;
  padding-bottom: 0;
}

/* ── AD PACK button — gold/exclusive ─────────────── */
.pack-type-btn--adpack {
  border-color: rgba(120,30,180,0.35) !important;
  background: #0a0312 !important;
  position: relative;
  overflow: hidden;
}
.pack-type-btn--adpack::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(120,30,180,0.04) 4px,
    rgba(120,30,180,0.04) 8px
  );
  pointer-events: none;
}
.pack-type-btn--adpack .pack-type-icon,
.pack-type-btn--adpack .pack-type-label {
  color: #8030c0 !important;
}
.pack-type-btn--adpack.active {
  border-color: #8030c0 !important;
  background: #0e0318 !important;
  box-shadow: 0 0 10px rgba(120,30,180,0.24);
  animation: adpackGlow 2.8s ease-in-out infinite;
}
@keyframes adpackGlow {
  0%,100% { box-shadow: 0 0 8px rgba(120,30,180,0.2); }
  50%      { box-shadow: 0 0 14px rgba(120,30,180,0.34), 0 0 26px rgba(120,30,180,0.16); }
}

/* ── AD PACK gate — different prompt ─────────────── */
.gate-adpack-note {
  font-family: 'lo-res', sans-serif;
  font-size: 8px; color: #8030c0;
  letter-spacing: 0.08em; line-height: 1.7;
  text-align: center; padding: 8px 12px;
  border: 1px solid rgba(120,30,180,0.3);
  background: rgba(120,30,180,0.05);
}

/* ── PACK TYPE ROW — 4 buttons ───────────────────── */
.pack-type-row {
  position: fixed;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 300px;
}
.pack-type-btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Adpack ticker state */
.ticker-wrap[data-state="adpack"] {
  background: rgba(120,30,180,0.1);
  border-color: #8030c0;
  animation: adpackGlow 2s ease-in-out infinite;
}
.ticker-wrap[data-state="adpack"] .ticker-msg {
  color: #8030c0;
  text-shadow: 1px 1px 0 rgba(120,30,180,0.4);
}
.ticker-wrap[data-state="adpack"] .ticker-sep { color: #8030c0; }

/* ── AD PACK PROMPT SCREEN ───────────────────────── */
#screen-adpack-prompt {
  justify-content: center;
  padding: 0 16px;
}

.adpack-prompt-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 320px;
  padding: 24px 20px;
  border: 2px solid #8030c0;
  background: rgba(12,10,4,0.96);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 24px rgba(120,30,180,0.3),
    0 0 60px rgba(120,30,180,0.1),
    inset 0 0 32px rgba(120,30,180,0.04);
  animation: adpackPromptIn 0.3s steps(6) forwards;
}

@keyframes adpackPromptIn {
  from { opacity:0; transform:scale(0.92) translateY(12px); }
  to   { opacity:1; transform:scale(1)    translateY(0); }
}

/* Animated shimmer sweep */
.adpack-prompt-shimmer {
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(120,30,180,0.08) 50%,
    transparent 70%
  );
  animation: adpackShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes adpackShimmer {
  0%   { left: -100%; }
  100% { left: 160%; }
}

/* Diagonal stripe bg */
.adpack-prompt-wrapper::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 6px,
    rgba(120,30,180,0.03) 6px,
    rgba(120,30,180,0.03) 12px
  );
  pointer-events: none;
}

.adpack-prompt-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adpack-prompt-star {
  font-family: 'lo-res', sans-serif;
  font-size: 22px; color: #8030c0;
  text-shadow: 0 0 10px rgba(120,30,180,0.8);
  animation: adpackStarSpin 3s steps(4) infinite;
}
@keyframes adpackStarSpin {
  0%   { opacity:1; }
  25%  { opacity:0.4; }
  50%  { opacity:1; }
  75%  { opacity:0.4; }
  100% { opacity:1; }
}

.adpack-prompt-title {
  font-family: 'lo-res', sans-serif;
  font-size: 30px; letter-spacing: 0.2em;
  color: #8030c0;
  text-shadow:
    2px 2px 0 rgba(120,30,180,0.4),
    0 0 20px rgba(120,30,180,0.5),
    0 0 40px rgba(120,30,180,0.2);
  animation: adpackTitlePulse 2s ease-in-out infinite;
}
@keyframes adpackTitlePulse {
  0%,100% { text-shadow: 2px 2px 0 rgba(120,30,180,0.4), 0 0 20px rgba(120,30,180,0.5); }
  50%     { text-shadow: 2px 2px 0 rgba(120,30,180,0.6), 0 0 32px rgba(120,30,180,0.8), 0 0 60px rgba(120,30,180,0.3); }
}

.adpack-prompt-icon {
  font-family: 'lo-res', sans-serif;
  font-size: 64px; line-height: 1;
  color: #8030c0;
  text-shadow:
    0 0 16px rgba(120,30,180,0.9),
    0 0 32px rgba(120,30,180,0.5),
    0 0 64px rgba(120,30,180,0.2);
  animation: adpackIconPulse 1.8s ease-in-out infinite;
}
@keyframes adpackIconPulse {
  0%,100% { transform: scale(1);    text-shadow: 0 0 16px rgba(120,30,180,0.9), 0 0 32px rgba(120,30,180,0.5); }
  50%     { transform: scale(1.06); text-shadow: 0 0 24px rgba(120,30,180,1),   0 0 48px rgba(120,30,180,0.7), 0 0 80px rgba(120,30,180,0.3); }
}

.adpack-prompt-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.adpack-prompt-main {
  font-family: 'lo-res', sans-serif;
  font-size: 20px; letter-spacing: 0.1em;
  color: var(--cream);
}
.adpack-prompt-sub {
  font-family: 'lo-res', sans-serif;
  font-size: 9px; letter-spacing: 0.08em;
  color: var(--muted); line-height: 1.7;
}

.adpack-prompt-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.adpack-prompt-btn {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
  transition: transform 0.05s, box-shadow 0.05s;
}
.adpack-prompt-btn:active { transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(0,0,0,0.5); }

.adpack-prompt-btn--watch {
  border-color: #8030c0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 12px rgba(120,30,180,0.2);
  animation: adpackBtnGlow 2s ease-in-out infinite;
}
@keyframes adpackBtnGlow {
  0%,100% { box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(120,30,180,0.15); }
  50%     { box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 20px rgba(120,30,180,0.4); }
}
.adpack-prompt-btn--watch .adpack-prompt-btn-title { color: #8030c0; }

.adpack-prompt-btn--skip  { border-color: var(--green-lt); }
.adpack-prompt-btn--skip .adpack-prompt-btn-title  { color: var(--green-lt); }

.adpack-prompt-btn--cancel { border-color: var(--border); opacity: 0.5; }
.adpack-prompt-btn--cancel .adpack-prompt-btn-title { color: var(--dim); }

.adpack-prompt-btn-title {
  font-family: 'lo-res', sans-serif;
  font-size: 20px; letter-spacing: 0.12em;
  color: var(--cream);
}
.adpack-prompt-btn-sub {
  font-family: 'lo-res', sans-serif;
  font-size: 7px; letter-spacing: 0.08em;
  color: var(--muted);
}

.adpack-prompt-footnote {
  font-family: 'lo-res', sans-serif;
  font-size: 7px; color: var(--dim);
  letter-spacing: 0.06em; line-height: 1.7;
  text-align: center;
}

/* ── AD PACK canvas glow — active state ──────────── */
#screen-pack.adpack-active .pack-carousel-stage {
  filter: drop-shadow(0 0 8px rgba(120,30,180,0.35)) drop-shadow(0 0 18px rgba(120,30,180,0.14));
  animation: adpackCanvasGlow 2s ease-in-out infinite;
}
@keyframes adpackCanvasGlow {
  0%,100% { filter: drop-shadow(0 0 8px rgba(120,30,180,0.32)) drop-shadow(0 0 18px rgba(120,30,180,0.12)); }
  50%     { filter: drop-shadow(0 0 13px rgba(120,30,180,0.5)) drop-shadow(0 0 30px rgba(120,30,180,0.2)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTTOM-ROW THEME — 6 pack states
   Each block controls: pack-counter · star-counter · star-shop-btn
   Body class is set exclusively by syncPackThemeClass() in main.js.
   Edit the colour values here freely — one block per state.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. NATURE  (garbage tab · pristine phase) ──────────────────────────── */
body.nature-active .pack-counter {
  border-color: rgba(129,212,250,0.78);
  box-shadow: 0 0 8px rgba(129,212,250,0.16);
}
body.nature-active .counter-packs {
  color: #81d4fa;
  text-shadow: 0 0 6px rgba(129,212,250,0.85), 0 0 12px rgba(129,212,250,0.42), 2px 2px 0 rgba(0,0,0,0.8);
}
body.nature-active .counter-label,
body.nature-active .counter-tag { color: rgba(129,212,250,0.95); }
body.nature-active .star-counter {
  border-color: rgba(129,212,250,0.78);
  box-shadow: 0 0 8px rgba(129,212,250,0.16);
}
body.nature-active .star-counter-icon {
  color: #81d4fa;
  text-shadow: 0 0 6px rgba(129,212,250,0.8), 0 0 12px rgba(129,212,250,0.35);
}
body.nature-active .star-counter-value {
  color: #81d4fa;
  text-shadow: 0 0 6px rgba(129,212,250,0.7);
}
body.nature-active .star-counter-label { color: rgba(129,212,250,0.95); }
body.nature-active .star-shop-btn {
  border-color: rgba(129,212,250,0.85);
  background: #010810;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(129,212,250,0.18);
}
body.nature-active .star-shop-btn:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(129,212,250,0.34);
  background: #031020;
}
body.nature-active .star-shop-btn-icon {
  color: #81d4fa;
  text-shadow: 0 0 8px rgba(129,212,250,0.8);
}
body.nature-active .star-shop-btn-label { color: rgba(129,212,250,0.9); }

/* ── 2. FLESH   (garbage tab · horror phase) ────────────────────────────── */
body.flesh-active .pack-counter {
  border-color: rgba(232,92,26,0.78);
  box-shadow: 0 0 8px rgba(232,92,26,0.16);
}
body.flesh-active .counter-packs {
  color: #e85c1a;
  text-shadow: 0 0 6px rgba(232,92,26,0.85), 0 0 12px rgba(232,92,26,0.42), 2px 2px 0 rgba(0,0,0,0.8);
}
body.flesh-active .counter-label,
body.flesh-active .counter-tag { color: rgba(232,92,26,0.95); }
body.flesh-active .star-counter {
  border-color: rgba(232,92,26,0.78);
  box-shadow: 0 0 8px rgba(232,92,26,0.16);
}
body.flesh-active .star-counter-icon {
  color: #e85c1a;
  text-shadow: 0 0 6px rgba(232,92,26,0.8), 0 0 12px rgba(232,92,26,0.35);
}
body.flesh-active .star-counter-value {
  color: #e85c1a;
  text-shadow: 0 0 6px rgba(232,92,26,0.7);
}
body.flesh-active .star-counter-label { color: rgba(232,92,26,0.95); }
body.flesh-active .star-shop-btn {
  border-color: rgba(232,92,26,0.85);
  background: #120400;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(232,92,26,0.18);
}
body.flesh-active .star-shop-btn:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(232,92,26,0.34);
  background: #1e0700;
}
body.flesh-active .star-shop-btn-icon {
  color: #e85c1a;
  text-shadow: 0 0 8px rgba(232,92,26,0.8);
}
body.flesh-active .star-shop-btn-label { color: rgba(232,92,26,0.9); }

/* ── 3. CRITTER (ewaste tab · pristine phase) ───────────────────────────── */
body.critter-active .pack-counter {
  border-color: rgba(240,184,208,0.78);
  box-shadow: 0 0 8px rgba(240,184,208,0.16);
}
body.critter-active .counter-packs {
  color: #f0b8d0;
  text-shadow: 0 0 6px rgba(240,184,208,0.85), 0 0 12px rgba(240,184,208,0.42), 2px 2px 0 rgba(0,0,0,0.8);
}
body.critter-active .counter-label,
body.critter-active .counter-tag { color: rgba(240,184,208,0.95); }
body.critter-active .star-counter {
  border-color: rgba(240,184,208,0.78);
  box-shadow: 0 0 8px rgba(240,184,208,0.16);
}
body.critter-active .star-counter-icon {
  color: #f0b8d0;
  text-shadow: 0 0 6px rgba(240,184,208,0.8), 0 0 12px rgba(240,184,208,0.35);
}
body.critter-active .star-counter-value {
  color: #f0b8d0;
  text-shadow: 0 0 6px rgba(240,184,208,0.7);
}
body.critter-active .star-counter-label { color: rgba(240,184,208,0.95); }
body.critter-active .star-shop-btn {
  border-color: rgba(240,184,208,0.85);
  background: #120a10;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(240,184,208,0.18);
}
body.critter-active .star-shop-btn:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(240,184,208,0.34);
  background: #1e1018;
}
body.critter-active .star-shop-btn-icon {
  color: #f0b8d0;
  text-shadow: 0 0 8px rgba(240,184,208,0.8);
}
body.critter-active .star-shop-btn-label { color: rgba(240,184,208,0.9); }

/* ── 4. SCOURGE (ewaste tab · horror phase) ─────────────────────────────── */
body.scourge-active .pack-counter {
  border-color: rgba(100,200,20,0.78);
  box-shadow: 0 0 8px rgba(100,200,20,0.16);
}
body.scourge-active .counter-packs {
  color: #8bc820;
  text-shadow: 0 0 6px rgba(100,200,20,0.85), 0 0 12px rgba(100,200,20,0.42), 2px 2px 0 rgba(0,0,0,0.8);
}
body.scourge-active .counter-label,
body.scourge-active .counter-tag { color: rgba(100,200,20,0.95); }
body.scourge-active .star-counter {
  border-color: rgba(100,200,20,0.78);
  box-shadow: 0 0 8px rgba(100,200,20,0.16);
}
body.scourge-active .star-counter-icon {
  color: #8bc820;
  text-shadow: 0 0 6px rgba(100,200,20,0.8), 0 0 12px rgba(100,200,20,0.35);
}
body.scourge-active .star-counter-value {
  color: #8bc820;
  text-shadow: 0 0 6px rgba(100,200,20,0.7);
}
body.scourge-active .star-counter-label { color: rgba(100,200,20,0.95); }
body.scourge-active .star-shop-btn {
  border-color: rgba(100,200,20,0.85);
  background: #031303;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(100,200,20,0.18);
}
body.scourge-active .star-shop-btn:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(100,200,20,0.34);
  background: #041a04;
}
body.scourge-active .star-shop-btn-icon {
  color: #8bc820;
  text-shadow: 0 0 8px rgba(100,200,20,0.8);
}
body.scourge-active .star-shop-btn-label { color: rgba(100,200,20,0.9); }

/* ── 5. FUNGI   (adpack tab · pristine phase) ───────────────────────────── */
body.fungi-active .pack-counter {
  border-color: rgba(120, 198, 96, 0.78);
  box-shadow: 0 0 8px rgba(212,168,112,0.16);
}
body.fungi-active .counter-packs {
  color: rgba(120, 198, 96, 0.78);
  text-shadow: 0 0 6px rgba(120, 198, 96, 0.78), 0 0 12px rgba(212,168,112,0.42), 2px 2px 0 rgba(0,0,0,0.8);
}
body.fungi-active .counter-label,
body.fungi-active .counter-tag { color: rgba(120, 198, 96, 0.78) }
body.fungi-active .star-counter {
  border-color: rgba(120, 198, 96, 0.78);
  box-shadow: 0 0 8px rgba(212,168,112,0.16);
}
body.fungi-active .star-counter-icon {
  color: rgba(120, 198, 96, 0.78);
  text-shadow: 0 0 6px rgba(120, 198, 96, 0.78), 0 0 12px rgba(212,168,112,0.35);
}
body.fungi-active .star-counter-value {
  color: rgba(120, 198, 96, 0.78);
  text-shadow: 0 0 6px rgba(120, 198, 96, 0.78);
}
body.fungi-active .star-counter-label { color: rgba(120, 198, 96, 0.78) }
body.fungi-active .star-shop-btn {
  border-color: rgba(120, 198, 96, 0.78);
  background: #100d04;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(212,168,112,0.18);
}
body.fungi-active .star-shop-btn:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(212,168,112,0.34);
  background: #1a1408;
}
body.fungi-active .star-shop-btn-icon {
  color: rgba(120, 198, 96, 0.78);
  text-shadow: 0 0 8px rgba(120, 198, 96, 0.78);
}
body.fungi-active .star-shop-btn-label { color: rgba(120, 198, 96, 0.78) }

/* ── 6. RITUAL  (adpack tab · horror phase) ─────────────────────────────── */
body.ritual-active .pack-counter {
  border-color: rgba(120,30,180,0.78);
  box-shadow: 0 0 8px rgba(120,30,180,0.16);
}
body.ritual-active .counter-packs {
  color: #b060e8;
  text-shadow: 0 0 6px rgba(120,30,180,0.85), 0 0 12px rgba(120,30,180,0.42), 2px 2px 0 rgba(0,0,0,0.8);
}
body.ritual-active .counter-label,
body.ritual-active .counter-tag { color: rgba(120,30,180,0.95); }
body.ritual-active .star-counter {
  border-color: rgba(120,30,180,0.78);
  box-shadow: 0 0 8px rgba(120,30,180,0.16);
}
body.ritual-active .star-counter-icon {
  color: #b060e8;
  text-shadow: 0 0 6px rgba(120,30,180,0.8), 0 0 12px rgba(120,30,180,0.35);
}
body.ritual-active .star-counter-value {
  color: #b060e8;
  text-shadow: 0 0 6px rgba(120,30,180,0.7);
}
body.ritual-active .star-counter-label { color: rgba(120,30,180,0.95); }
body.ritual-active .star-shop-btn {
  border-color: rgba(120,30,180,0.85);
  background: #08020e;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 8px rgba(120,30,180,0.18);
}
body.ritual-active .star-shop-btn:hover {
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 16px rgba(120,30,180,0.34);
  background: #120420;
}
body.ritual-active .star-shop-btn-icon {
  color: #b060e8;
  text-shadow: 0 0 8px rgba(120,30,180,0.8);
}
body.ritual-active .star-shop-btn-label { color: rgba(120,30,180,0.9); }

/* Canvas stage glow: blue in pristine, red in corrupted */
body.pristine-phase #screen-pack .pack-carousel-stage {
  filter: drop-shadow(0 0 6px rgba(129,212,250,0.25)) drop-shadow(0 0 14px rgba(129,212,250,0.10));
}

/* ══════════════════════════════════════════════════════════════════════════
   TOP-ROW BUTTON THEME — pristine phase states only
   Edit colours here freely. Horror-phase button colours are unchanged.
   These target the active (selected) tab for each pristine pack type.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. NATURE  (garbage tab · pristine)  — sky blue  #81d4fa */
body.nature-active #packTypeGarbage.active {
  border-color: rgba(129,212,250,0.85);
  background: #010810;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(129,212,250,0.2);
}
body.nature-active #packTypeGarbage.active .pack-type-label,
body.nature-active #packTypeGarbage.active .pack-type-icon {
  color: #81d4fa !important;
}
/* Inactive tabs while nature is selected */
body.nature-active #packTypeGarbage:not(.active) .pack-type-label,
body.nature-active #packTypeGarbage:not(.active) .pack-type-icon {
  color: #4a8fb0;
}

/* 3. CRITTER (ewaste tab · pristine)   — pastel pink  #f0b8d0 */
body.critter-active #packTypeEwaste.active {
  border-color: rgba(240,184,208,0.85);
  background: #130b10;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(240,184,208,0.2);
}
body.critter-active #packTypeEwaste.active .pack-type-label,
body.critter-active #packTypeEwaste.active .pack-type-icon {
  color: #f0b8d0 !important;
}
/* Inactive tabs while critter is selected */
body.critter-active #packTypeEwaste:not(.active) .pack-type-label,
body.critter-active #packTypeEwaste:not(.active) .pack-type-icon {
  color: #c490a8;
}

/* 5. FUNGI   (adpack tab · pristine)   — earthy amber  #d4a870
   Uses !important to override the permanent adpack purple defaults. */
body.fungi-active #packTypeAdpack.active {
  border-color: rgba(109, 187, 85, 0.78) !important;
  background: #100e08 !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.5), 0 0 10px rgba(212,168,112,0.25) !important;
  animation: none !important;
}
body.fungi-active #packTypeAdpack.active .pack-type-label,
body.fungi-active #packTypeAdpack.active .pack-type-icon {
  color: rgba(109, 187, 85, 0.78) !important;
}
/* Inactive tabs while fungi is selected */
body.fungi-active #packTypeAdpack:not(.active) .pack-type-label,
body.fungi-active #packTypeAdpack:not(.active) .pack-type-icon {
  color: #a07848 !important;
}

/* ── DEBUG: phase toggle button (temporary) ──────────────────────────────── */

.debug-phase-btn {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(200, 200, 200, 0.25);
  color: rgba(220, 220, 220, 0.6);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 4px 8px;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.debug-phase-btn:active { opacity: 1; }
.debug-phase-btn[data-phase="horror"] {
  border-color: rgba(204, 17, 17, 0.5);
  color: rgba(220, 80, 80, 0.85);
}

/* Stack the secondary debug buttons below the phase toggle */
.debug-boss-btn {
  top: 36px;
  border-color: rgba(204, 17, 17, 0.4);
  color: rgba(220, 80, 80, 0.75);
}
.debug-fleshling-btn {
  top: 64px;
  border-color: rgba(180, 40, 80, 0.4);
  color: rgba(220, 100, 140, 0.75);
}
.debug-blindbox-btn {
  top: 92px;
  border-color: rgba(120, 90, 140, 0.4);
  color: rgba(180, 150, 200, 0.75);
}

/* ── HORROR ROULETTE (Three.js) ──────────────────────────────────────────── */
/* NOTE: never put `display: flex` directly on the ID — `.screen.hidden { display:none }`
   would lose the specificity war and the screen would render on top of every other one. */

#screen-horror-spin:not(.hidden) {
  /* Fully transparent — the bg-grid pixel art behind shows through unobstructed.
     No backdrop blur, no tint, no overlay. */
  background: transparent;
  gap: 24px;
}

/* Suppress the body vignette + grid overlay while the horror spin is active
   so the bg-grid (horror background image) reads cleanly without darkening. */
body:has(#screen-horror-spin:not(.hidden))::after,
body:has(#screen-horror-spin:not(.hidden))::before {
  opacity: 0;
}

/* Pointer — chunky pixel arrow over the top of the orbit */
.roulette-pointer {
  width: 0; height: 0;
  border-left:  9px solid transparent;
  border-right: 9px solid transparent;
  border-top:  14px solid var(--cream);
  margin-bottom: -6px;
  z-index: 3;
  filter: drop-shadow(0 0 4px rgba(232,224,200,0.6));
}

/* 3D canvas container — Three.js renderer is appended here */
.roulette-3d-wrap {
  position: relative;
  width: 280px;
  height: 280px;
}
.roulette-3d-wrap canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
}

/* Spin / confirm button — minimal outline */
.roulette-btn {
  background: none;
  border: 2px solid var(--cream);
  color: var(--cream);
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0.18em;
  padding: 11px 38px;
  cursor: pointer;
  transition: opacity 0.2s, background 0.15s;
}
.roulette-btn:disabled { opacity: 0.35; cursor: default; }
.roulette-btn:not(:disabled):active {
  background: rgba(232,224,200,0.12);
}