/* 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;
  /* Chrome on Android inflates font sizes on its own when it decides a text
     block is in a wide container. It ignores the authored size entirely, which
     is why the UI came out larger and overlapping there while iOS was fine.
     iOS already behaves as if this were set once a viewport meta is present,
     so this changes nothing for iPhone users. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  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; overflow-x:hidden;
  touch-action: pan-y;   /* allow only vertical scroll on scrollable pages — never horizontal pan */
}
.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;
}

/* Player's persistent name tag — top of the pack screen, in their tag colour.
   Lives inside #screen-pack so it only shows here (display:none hides it on
   other screens). Set + revealed in submitPlayerName(). */
#playerNametag {
  position: fixed;
  top: 193.5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: none;                /* shown once a name is entered */
  pointer-events: none;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #cfeefb;               /* recoloured to the player's tag colour in JS */
  padding: 3px 14px;
  background: rgba(6, 14, 18, 0.75);
  border: 1px solid currentColor;
  border-radius: 10px;
  text-shadow: 0 0 6px rgba(0,0,0,0.85);
  box-shadow: 0 0 8px -2px currentColor;
}

/* Purchased title, sitting directly under the name tag.
   Quieter than the name on purpose — it is a second line of identity, not a
   competing one. No border or backdrop, so the tag above stays the object the
   eye lands on. Fixed-positioned to match #playerNametag, which is itself
   fixed and therefore out of flow: a sibling in normal flow would render at
   the top of the screen instead of under it. */
#playerTitleTag {
  position: fixed;
  top: 226px;                   /* clear of #playerNametag's border and glow */
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 10px;
  letter-spacing: 0.10em;
  white-space: nowrap;
  color: #f5d67b;
  text-shadow: 0 0 6px rgba(0,0,0,0.9);
  opacity: 0.9;
}

/* Pack type buttons pinned to bottom zone (near thumbs) */
#screen-pack .pack-type-row {
  position: fixed;
  bottom: 34px;
  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;
}
/* These four keyframes animate transform + opacity ONLY.
   They used to also animate filter: brightness()/saturate(), which forces a full
   repaint of the pseudo-element every frame instead of running on the compositor.
   Two infinite ones sat over the live card stage the whole time the ritual pack
   was open. The brightness range was tiny (1.0–1.34) and opacity is already
   animating here, so removing them costs almost nothing visually. */
@keyframes adpackStageSparkleIdle {
  0%,100% { transform: scale(0.98) translateY(0) rotate(0deg);      opacity: 0.2; }
  25%     { transform: scale(1.01) translateY(-1.5px) rotate(1deg); opacity: 0.34; }
  55%     { transform: scale(1.005) translateY(1.2px) rotate(-0.8deg); opacity: 0.28; }
  80%     { transform: scale(1.012) translateY(-0.8px) rotate(0.6deg); opacity: 0.32; }
}
@keyframes adpackStageSparkleIdleB {
  0%,100% { transform: scale(0.99) translateY(0) rotate(0deg);       opacity: 0.23; }
  30%     { transform: scale(1.015) translateY(-1.6px) rotate(-1deg); opacity: 0.36; }
  60%     { transform: scale(1.008) translateY(1.4px) rotate(0.9deg); opacity: 0.29; }
  82%     { transform: scale(1.018) translateY(-0.7px) rotate(-0.6deg); opacity: 0.34; }
}
@keyframes adpackStageSparkleBurst {
  0%   { transform: scale(0.94) translateY(0) rotate(0deg);      opacity: 0; }
  34%  { transform: scale(1.06) translateY(-2.2px) rotate(1.4deg); opacity: 0.48; }
  72%  { transform: scale(1.1) translateY(0.8px) rotate(-1deg);  opacity: 0.24; }
  100% { transform: scale(1.14) translateY(0) rotate(0deg);      opacity: 0; }
}
@keyframes adpackStageSparkleBurstB {
  0%   { transform: scale(0.93) translateY(0) rotate(0deg);       opacity: 0; }
  36%  { transform: scale(1.08) translateY(-2.6px) rotate(-1.6deg); opacity: 0.54; }
  74%  { transform: scale(1.12) translateY(1px) rotate(1deg);      opacity: 0.27; }
  100% { transform: scale(1.16) translateY(0) rotate(0deg);        opacity: 0; }
}

.pack-canvas-wrap {
  position:relative; width:300px; height:400px; cursor:grab; flex-shrink:0;
  z-index: 3;
  transform-origin: center center;
  touch-action: none;          /* drag the 3D pack freely — browser never steals the gesture to pan/scroll */
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; /* no long-press image menu on iOS */
}
.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; display:flex; justify-content:center; }
/* Star balance on the choice grid — so you know what you can afford to buy */
.choice-stars {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 14px;
  border: 1px solid rgba(255,210,90,0.5);
  background: rgba(0,0,0,0.42);
  box-shadow: 0 0 8px rgba(255,210,90,0.12), inset 0 0 6px rgba(0,0,0,0.4);
}
.choice-stars-icon  { font-family:'lo-res', sans-serif; font-size:16px; color:#ffd96b; text-shadow:0 0 6px rgba(255,210,90,0.6); }
.choice-stars-value { font-family:'pf-pixelscript', cursive; font-size:24px; line-height:1; color:#ffd96b; text-shadow:0 0 8px rgba(255,210,90,0.5); }
.choice-stars-label { font-family:'Pixelify Sans','lo-res', sans-serif; font-size:10px; letter-spacing:0.12em; color:rgba(255,235,180,0.6); text-transform:uppercase; }
.choice-stars.choice-stars--bump { animation: coinLandBump 0.26s steps(3); }
.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; }

/* ── Legendary reveal — single centred card from the shop ─────────────────── */
/* NOTE: do NOT set `display` here — the base `.screen` rule already flex-centres,
   and an id-level `display` would beat `.screen.hidden { display:none }`, leaving
   this screen visible everywhere. Only override the gap. */
#screen-legendary { gap: 22px; }
.legendary-header { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.legendary-title {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 30px; letter-spacing: 0.14em;
  color: #f0c860;
  text-shadow: 0 0 14px rgba(240,200,90,0.6), 2px 2px 0 rgba(120,80,10,0.5);
  animation: legendaryPulse 2s steps(4) infinite;
}
.legendary-sub {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 13px; letter-spacing: 0.06em;
  color: rgba(240,200,90,0.65); text-transform: uppercase;
}
.legendary-grid {
  display: flex; justify-content: center; align-items: center;
  width: 62%; max-width: 240px;
}
/* The single 3D card cell fills the centred container */
.legendary-grid .choice-cell-3d { width: 100%; }
.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; transition: filter 0.3s ease, opacity 0.3s ease; }
/* Unaffordable card — greyed out, colour + bloom drained. Affordable cards keep
   their full colour (no filter). The cost badge stays readable (it's a div). */
.choice-cell-3d--locked canvas { filter: grayscale(0.9) brightness(0.5) contrast(0.92); opacity: 0.5; }

/* ── 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;
}

/* ── Pristine "no packs" screen — calm, generous, no ads ────────────────── */
.empty-wrapper {
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 32px 24px; width: 100%; max-width: 320px;
}
.empty-icon {
  font-size: 52px; line-height: 1;
}
.empty-title {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 26px; letter-spacing: 0.06em;
  color: #bfefff;
  text-shadow: 0 0 12px rgba(129,212,250,0.4);
  text-align: center;
}
.empty-sub {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 14px; letter-spacing: 0.03em; line-height: 1.5;
  color: rgba(129,212,250,0.7); text-align: center;
}
.empty-cooldown {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 24px;
  border: 2px solid rgba(129,212,250,0.4);
  border-radius: 14px;
  background: rgba(8,18,26,0.6);
}
.empty-cooldown-label {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(129,212,250,0.55);
}
.empty-cooldown-timer {
  font-family: 'pf-pixelscript', cursive;
  font-size: 36px; line-height: 1;
  color: #bfefff;
  text-shadow: 0 0 10px rgba(129,212,250,0.6);
}
.empty-btn {
  width: 100%; padding: 14px;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 18px; letter-spacing: 0.04em;
  background: rgba(129,212,250,0.14);
  border: 2px solid rgba(129,212,250,0.55);
  border-radius: 14px;
  color: #bfefff;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  box-shadow: 0 0 10px rgba(129,212,250,0.1);
}
.empty-btn:not(:disabled):active { background: rgba(129,212,250,0.3); }
.empty-btn:disabled { opacity: 0.35; cursor: default; }
.empty-shop-btn {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 14px; letter-spacing: 0.04em;
  background: transparent; border: none;
  color: rgba(129,212,250,0.5);
  cursor: pointer; text-decoration: underline;
  padding: 4px 0;
}

/* ── 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;
}

/* Top row: pack counter + stars + shop */
#screen-pack .star-counter-row {
  position: fixed;
  top: 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: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 30px; letter-spacing: 0.12em;
  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:'lo-res', sans-serif; font-size:16px; color:var(--green-lt); }
.shop-balance-value { font-family:'pf-pixelscript', cursive; font-size:24px; color:var(--green-lt); line-height:1; text-shadow:0 0 8px rgba(58,170,58,0.6); }
.shop-balance-label { font-family:'lo-res', sans-serif; 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;
}

/* ── Phase-converting shop ───────────────────────────────────────────────────
   Pristine = generous / non-predatory.  Horror = the predatory ad-hell.
   Driven by the same body.pristine-phase class everything else uses. */
body.pristine-phase   .shop-items-horror   { display: none; }
body:not(.pristine-phase) .shop-items-pristine { display: none; }

/* Generous "FREE" price tag — calm green, no scarcity */
.shop-item-stars.shop-item-stars--free {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 18px;
  color: #6fe886;
  text-shadow: 0 0 8px rgba(111,232,134,0.6);
  letter-spacing: 0.06em;
}
/* Gift items — soft green frame, a quiet offering */
.shop-item--gift {
  border-color: rgba(111,232,134,0.5);
  background: rgba(20,40,24,0.45);
}
/* Guaranteed-legendary — the one premium pull, gold-framed */
.shop-item--legendary {
  border-color: rgba(200,144,48,0.6);
  background: rgba(200,144,48,0.06);
  box-shadow: 0 0 10px rgba(200,144,48,0.15);
}
.shop-item--legendary .shop-item-stars {
  color: var(--legendary);
  text-shadow: 0 0 10px rgba(200,144,48,0.6);
}

/* ── Prismatic name-tag shop item ─────────────────────────────────────────── */
.shop-item--prismatic {
  border-color: rgba(200,160,255,0.55);
  background: rgba(28,14,44,0.55);
}
.shop-item--prismatic .shop-item-icon {
  background: rgba(200,160,255,0.14);
  border-color: rgba(200,160,255,0.5);
}
.shop-item-name--prismatic {
  background: linear-gradient(90deg,#ff9fd9,#a78bfa,#67e8f9,#86efac,#fcd34d,#fb923c,#ff9fd9);
  background-size: 200% auto;
  
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: prismaticText 3s linear infinite;
}
.shop-items-pristine .shop-item--prismatic .shop-btn {
  background: linear-gradient(90deg,#a78bfa,#67e8f9,#86efac);
  color: #0a100a;
}
/* ── Prismatic name tag on the pack screen ────────────────────────────────── */
#playerNametag.prismatic {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg,#ff9fd9,#a78bfa,#67e8f9,#86efac,#fcd34d,#fb923c,#ff9fd9);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  border: 1px solid transparent;
  border-radius: 10px;
  animation: prismaticText 2.5s linear infinite, prismaticGlow 2.5s linear infinite;
}
@keyframes prismaticText {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes prismaticGlow {
  0%   { box-shadow: 0 0 0 1px rgba(255,159,217,0.9), 0 0 10px rgba(255,159,217,0.6), 0 0 20px rgba(255,159,217,0.2); }
  25%  { box-shadow: 0 0 0 1px rgba(103,232,249,0.9),  0 0 10px rgba(103,232,249,0.6),  0 0 20px rgba(103,232,249,0.2); }
  50%  { box-shadow: 0 0 0 1px rgba(167,139,250,0.9),  0 0 10px rgba(167,139,250,0.6),  0 0 20px rgba(167,139,250,0.2); }
  75%  { box-shadow: 0 0 0 1px rgba(134,239,172,0.9),  0 0 10px rgba(134,239,172,0.6),  0 0 20px rgba(134,239,172,0.2); }
  100% { box-shadow: 0 0 0 1px rgba(255,159,217,0.9),  0 0 10px rgba(255,159,217,0.6),  0 0 20px rgba(255,159,217,0.2); }
}

/* ── Pristine shop — cozy & friendly (Animal-Crossing-ish), nature palette ───
   Rounded shelves, soft cream-on-blue, chunky friendly buttons. Applies only
   while in pristine-phase — the horror shop keeps its harsh predatory look. */

/* Header — warm friendly blue instead of predatory orange */
body.pristine-phase .shop-header {
  border-bottom: 3px solid rgba(129,212,250,0.7);
  background: rgba(14,30,34,0.6);
}
body.pristine-phase .shop-title {
  color: #bfefff;
  text-shadow: 2px 2px 0 rgba(40,90,110,0.55), 0 0 16px rgba(129,212,250,0.4);
}
body.pristine-phase .shop-balance {
  border: 2px solid rgba(129,212,250,0.55);
  border-radius: 12px;
}
body.pristine-phase .shop-balance-icon,
body.pristine-phase .shop-balance-value {
  color: #bfefff;
  text-shadow: 0 0 8px rgba(129,212,250,0.6);
}

/* Cozy rounded shelf rows */
.shop-items-pristine {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0;
}
.shop-items-pristine .shop-item {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  padding: 12px 14px;
  border: 3px solid rgba(129,212,250,0.4);
  border-radius: 18px;
  background: rgba(20,42,46,0.6);
  box-shadow: 0 3px 0 rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.05);
  image-rendering: pixelated;
}

/* Friendly icon chip (emoji placeholder — swap for Aseprite sprites later) */
.shop-item-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: rgba(129,212,250,0.12);
  border: 2px solid rgba(129,212,250,0.4);
  border-radius: 14px;
}
.shop-item-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.shop-items-pristine .shop-item-name {
  font-size: 17px; letter-spacing: 0.04em; color: #eaf7ff;
}
.shop-items-pristine .shop-item-stars { font-size: 18px; }

/* Chunky friendly buttons */
.shop-items-pristine .shop-btn {
  align-self: center;
  flex-shrink: 0;
  margin-top: 0;
  padding: 9px 16px;
  border-radius: 14px;
  font-size: 14px; letter-spacing: 0.08em;
  color: #08130c;
  background: #6fe886;
  opacity: 1;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4);
}
.shop-items-pristine .shop-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

/* Gift rows — green; legendary row — gold. Both in the cozy frame. */
body.pristine-phase .shop-item--gift {
  border-color: rgba(111,232,134,0.55);
  background: rgba(22,44,28,0.6);
}
body.pristine-phase .shop-item--gift .shop-item-icon {
  background: rgba(111,232,134,0.14);
  border-color: rgba(111,232,134,0.5);
}
body.pristine-phase .shop-item--legendary {
  border-color: rgba(240,200,90,0.6);
  background: rgba(54,42,16,0.55);
}
body.pristine-phase .shop-item--legendary .shop-item-icon {
  background: rgba(240,200,90,0.14);
  border-color: rgba(240,200,90,0.5);
}
body.pristine-phase .shop-items-pristine .shop-item--legendary .shop-btn {
  background: #f0c860;
}

/* Drop the predatory T&C footnote in the friendly shop; round the close button */
body.pristine-phase .shop-footnote { display: none; }
body.pristine-phase .shop-close-btn {
  border-radius: 14px;
  border-color: rgba(129,212,250,0.6);
}

.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: 'pf-pixelscript', cursive;
  font-size: 26px; 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: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 20px; letter-spacing: 0.04em;
  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: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 16px; letter-spacing: 0.04em;
  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: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 19px; letter-spacing: 0.08em;
  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;
  bottom: 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;
}

/* ─── NAME PROMPT (terminal) ───────────────────────────────────────────────── */

#screen-name {
  justify-content: center;
  align-items: center;
  padding: 0 24px;
}

.name-term {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 280px;
  padding: 28px 24px;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  border: 2px solid #81d4fa;
  background: rgba(8,14,20,0.97);
  box-shadow:
    0 0 0 1px rgba(129,212,250,0.18),
    0 0 24px rgba(129,212,250,0.22),
    inset 0 0 20px rgba(129,212,250,0.05);
  image-rendering: pixelated;
}

.name-term-logo {
  font-size: 30px;
  color: var(--cream);
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(129,212,250,0.45);
  line-height: 1;
  text-align: center;
}

.name-term-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.name-term-label {
  font-size: 18px;
  color: #81d4fa;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
}

.name-term-input {
  background: rgba(129,212,250,0.07);
  border: 1px solid #81d4fa;
  color: var(--cream);
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 24px;
  width: 100%;
  outline: none;
  text-transform: uppercase;
  caret-color: #81d4fa;
  padding: 4px 8px;
  letter-spacing: 0.06em;
  text-align: center;
}

.name-term-input:focus {
  border-color: #aee6ff;
  background: rgba(129,212,250,0.13);
}

@keyframes nameInputShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}

.name-input-shake {
  animation: nameInputShake 0.28s steps(4) forwards;
  border-color: var(--orange) !important;
}

.name-term-btn {
  background: transparent;
  border: 1px solid #81d4fa;
  color: #81d4fa;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  padding: 5px 24px 6px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(129,212,250,0.5);
  box-shadow: 0 0 8px rgba(129,212,250,0.12);
  line-height: 1;
}

.name-term-btn:active {
  background: #81d4fa;
  color: var(--bg);
  text-shadow: none;
}

/* ── Tag colour swatches on the username screen ───────────────────────── */
.name-color-swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
.name-color-swatch {
  width: 30px;
  height: 30px;
  background: var(--c);
  border: 2px solid rgba(8, 18, 8, 0.8);
  cursor: pointer;
  padding: 0;
  image-rendering: pixelated;
  /* Pixel-art raised look: bright top/left, dark bottom/right */
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.32),
    inset -2px -2px 0 rgba(0, 0, 0, 0.32),
    0 0 6px 1px rgba(255, 255, 255, 0.18);
  transition: transform 0.08s steps(2), box-shadow 0.12s;
}
.name-color-swatch:active {
  transform: scale(0.9);
}
.name-color-swatch.selected {
  border-color: var(--cream);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, 0.55),
    inset -2px -2px 0 rgba(0, 0, 0, 0.35),
    0 0 12px 3px var(--c),
    0 0 0 2px rgba(255, 255, 230, 0.85);
}
.name-term-hint {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 14px;
  color: rgba(180, 200, 170, 0.5);
  letter-spacing: 0.05em;
  margin-top: 4px;
}

/* ── Sound toggle on the username screen — minimal borderless [x] sound ────── */
.name-sound-toggle {
  background: transparent;
  border: none;
  color: #81d4fa;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  opacity: 0.85;
  text-shadow: 0 0 6px rgba(129, 212, 250, 0.35);
  transition: transform 0.08s steps(2), opacity 0.12s;
}
.name-sound-toggle .name-sound-box { font-family: 'VT323', 'Courier New', monospace; }
.name-sound-toggle:active { transform: scale(0.94); }
/* OFF state — dimmed */
.name-sound-toggle:not(.name-sound-toggle--on) {
  opacity: 0.4;
  text-shadow: none;
}

/* ── AD PACK canvas glow — active state ──────────── */
/* box-shadow, NOT drop-shadow.

   This rule wraps the live WebGL card stage, whose contents already change every
   frame (three.js re-render + a 256x384 canvas rebuilt per animated card). An
   ANIMATED drop-shadow on top of that forced the browser to read the element's
   alpha channel and blur it twice, at a radius that changed every frame — so the
   result could never be cached, and on mobile GPUs it drops off the composited
   fast path entirely. It was the single biggest cause of the ritual pack lag.

   box-shadow follows the element's box rather than the card silhouette, but it's
   GPU-composited and effectively free. If the silhouette glow is worth having
   back, do it as a STATIC drop-shadow and pulse opacity on a separate layer —
   opacity animates on the compositor, filter does not. */
#screen-pack.adpack-active .pack-carousel-stage {
  box-shadow: 0 0 8px rgba(120,30,180,0.35), 0 0 18px rgba(120,30,180,0.14);
  animation: adpackCanvasGlow 2s ease-in-out infinite;
}
@keyframes adpackCanvasGlow {
  0%,100% { box-shadow: 0 0 8px rgba(120,30,180,0.32), 0 0 18px rgba(120,30,180,0.12); }
  50%     { box-shadow: 0 0 13px rgba(120,30,180,0.5), 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;
}

/* ── Unselected pristine tabs — each keeps its OWN pristine accent (dimmed),
   regardless of which tab is currently selected. Gated on body.pristine-phase,
   which is present for the whole pristine phase, so the horror-phase button
   colours are never touched. Without this an unselected tab falls back to its
   permanent default (e.g. the adpack purple) and reads as its horror colour.
   !important beats that adpack-purple default + the legacy amber/pink rules. ── */
body.pristine-phase #packTypeGarbage:not(.active) { border-color: rgba(129,212,250,0.40) !important; }
body.pristine-phase #packTypeGarbage:not(.active) .pack-type-label,
body.pristine-phase #packTypeGarbage:not(.active) .pack-type-icon { color: #4a8fb0 !important; }

body.pristine-phase #packTypeEwaste:not(.active) { border-color: rgba(240,184,208,0.40) !important; }
body.pristine-phase #packTypeEwaste:not(.active) .pack-type-label,
body.pristine-phase #packTypeEwaste:not(.active) .pack-type-icon { color: #c490a8 !important; }

body.pristine-phase #packTypeAdpack:not(.active) { border-color: rgba(109,187,85,0.40) !important; }
body.pristine-phase #packTypeAdpack:not(.active) .pack-type-label,
body.pristine-phase #packTypeAdpack:not(.active) .pack-type-icon { color: rgba(109,187,85,0.70) !important; }

/* ── DEBUG: collapsible dropdown (temporary) ─────────────────────────────── */

/* Off unless the page was opened with ?debug — see index.html.
   display:none rather than opacity or visibility, so the cogwheel cannot be
   found by a curious thumb hunting for an invisible tap target. */
#debug-menu.debug-hidden { display: none !important; }

#debug-menu {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  opacity: 0.35;
  transition: opacity 0.2s ease;
}
#debug-menu:hover,
#debug-menu.open { opacity: 0.85; }

#debug-menu-trigger {
  display: block;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(200, 200, 200, 0.2);
  color: rgba(200, 200, 200, 0.5);
  font-family: inherit;
  font-size: 11px;
  padding: 3px 7px;
  cursor: pointer;
  line-height: 1;
}
#debug-menu.open #debug-menu-trigger {
  border-color: rgba(200, 200, 200, 0.45);
  color: rgba(220, 220, 220, 0.9);
}

#debug-menu-items {
  display: none;
  flex-direction: column;
  gap: 2px;
  margin-top: 3px;
}
#debug-menu.open #debug-menu-items { display: flex; }

#debug-menu-items button {
  background: rgba(10, 10, 10, 0.75);
  border: 1px solid rgba(200, 200, 200, 0.18);
  color: rgba(210, 210, 210, 0.75);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s;
}
#debug-menu-items button:active {
  background: rgba(40, 40, 40, 0.9);
}
/* Phase-toggle: tint red when horror is active */
#debugPhaseBtn[data-phase="horror"] {
  border-color: rgba(204, 17, 17, 0.5);
  color: rgba(220, 80, 80, 0.9);
}

/* ── 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);
}

/* ── STAR COST BADGES on choice cards ──────────────────────────────────────── */
/* .choice-cell-3d already has position:relative — badge positions over canvas  */
.choice-cost-badge {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 215, 0, 0.45);
  color: #ffe7a0;
  font-family: 'VT323', monospace;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 1px 8px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.choice-cost-badge--locked {
  border-color: rgba(255, 80, 80, 0.5);
  color: #ff8888;
  background: rgba(50, 0, 0, 0.82);
}

/* ── SHAKE animations ────────────────────────────────────────────────────────── */
@keyframes choice-cell-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.choice-cell-shake { animation: choice-cell-shake 0.4s ease; }

@keyframes stars-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  40%     { transform: translateX(5px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
.stars-shake { animation: stars-shake 0.4s ease; }

/* ── TASK PANEL (right-side slide-out) ──────────────────────────────────── */
/* The TRIGGER never moves — it sits permanently at the right screen edge.
   Only the BODY-WRAP is translated:
     Closed: body translateX(+260px) → completely off-screen right.
     Open:   body translateX(0)      → slides left into natural position.
   pointer-events:none on the container so the off-screen body doesn't
   eat taps on the carousel behind it.                                    */
.task-panel {
  position: fixed;
  right: 0;
  top: 148px;   /* moved down — clear of star-counter row + a breathing gap */
  width: 280px; /* 60px trigger + 220px body */
  display: flex;
  flex-direction: row-reverse; /* trigger(first in DOM) → rightmost → right edge */
  align-items: flex-start;     /* trigger stays compact; body can be taller */
  z-index: 20;
  pointer-events: none;        /* re-enabled individually on trigger + open body */
}

/* ── Trigger — chunky pixel-art button, locked to right screen edge ── */
/* ~60x70px button. Cyan + gold bloom border for whimsy. Always-on idle
   pulse glow keeps it feeling alive.                                   */
.task-panel-trigger {
  pointer-events: auto;
  flex: 0 0 60px;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(8, 18, 22, 0.95);
  /* Cyan pixel-art raised-edge: bright cyan top/left, deep teal bottom/right */
  border-top:    2px solid rgba(140, 230, 255, 0.7);
  border-left:   2px solid rgba(140, 230, 255, 0.7);
  border-bottom: 2px solid rgba(20, 65, 80, 0.85);
  border-right:  2px solid rgba(15, 45, 60, 0.7);
  /* Bloom: layered cyan + gold halo */
  box-shadow:
    0 0 8px 1px rgba(120, 230, 255, 0.45),
    0 0 4px rgba(255, 215, 100, 0.3),
    inset 0 0 6px rgba(120, 240, 220, 0.15);
  color: rgba(220, 245, 255, 0.95);
  font-family: 'VT323', monospace;
  cursor: pointer;
  padding: 8px 4px;
  box-sizing: border-box;
  animation: task-tab-idle 2.8s ease-in-out infinite;
}
.task-panel-trigger:active {
  /* Pressed: invert pixel-edges + dim glow */
  border-top-color:    rgba(20, 65, 80, 0.85);
  border-left-color:   rgba(20, 65, 80, 0.85);
  border-bottom-color: rgba(140, 230, 255, 0.7);
  border-right-color:  rgba(140, 230, 255, 0.7);
  background: rgba(12, 28, 32, 0.98);
}
.task-panel--open .task-panel-trigger {
  /* Open: warmer, brighter — gold dominant */
  border-top-color:    rgba(255, 230, 130, 0.8);
  border-left-color:   rgba(255, 230, 130, 0.8);
  background: rgba(14, 24, 28, 0.97);
  color: rgba(255, 245, 220, 1);
  box-shadow:
    0 0 12px 2px rgba(255, 215, 100, 0.5),
    0 0 6px rgba(120, 230, 255, 0.35),
    inset 0 0 8px rgba(255, 220, 130, 0.2);
}

/* Label: top line — small cream text */
.task-trigger-label {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  width: 100%;
  color: rgba(255, 240, 200, 0.85);
  text-shadow: 0 0 4px rgba(255, 220, 130, 0.4);
}

/* Count: prominent middle line — bright cyan */
.task-trigger-count {
  font-size: 20px;
  color: rgba(150, 240, 255, 1);
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 0 6px rgba(120, 230, 255, 0.75),
    0 0 12px rgba(120, 200, 255, 0.35);
}
.task-panel--open .task-trigger-count {
  color: rgba(255, 235, 150, 1);
  text-shadow:
    0 0 6px rgba(255, 215, 100, 0.75),
    0 0 12px rgba(255, 200, 120, 0.4);
}

/* Mini progress bar: bottom line — block characters with glow */
.task-trigger-bar {
  font-size: 10px;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.task-trigger-bar-fill {
  color: rgba(120, 240, 160, 0.95);
  text-shadow: 0 0 4px rgba(120, 255, 160, 0.7), 0 0 8px rgba(100, 240, 140, 0.4);
}
.task-trigger-bar-empty {
  color: rgba(40, 70, 55, 0.85);
}

/* ── Idle glow: always-on gentle breathing pulse for whimsy ── */
@keyframes task-tab-idle {
  0%, 100% {
    box-shadow:
      0 0 8px 1px rgba(120, 230, 255, 0.40),
      0 0 4px rgba(255, 215, 100, 0.28),
      inset 0 0 6px rgba(120, 240, 220, 0.15);
  }
  50% {
    box-shadow:
      0 0 14px 2px rgba(120, 230, 255, 0.6),
      0 0 8px rgba(255, 215, 100, 0.45),
      inset 0 0 10px rgba(160, 245, 230, 0.22);
  }
}

/* ── Progress ping — bright pixel blink when a task actually updates ── */
@keyframes task-tab-ping {
  0%, 50%, 100% { filter: none; transform: scale(1); }
  25%, 75%      { filter: brightness(1.6) saturate(1.4); transform: scale(1.06); }
}
.task-panel-trigger--ping {
  animation: task-tab-idle 2.8s ease-in-out infinite, task-tab-ping 0.55s steps(1) 1;
}

/* ── Panel body — slides in/out independently of trigger ── */
/* Closed: translateX(+260px) = body width(220) + trigger width(40) → off-screen right.
   Open:   translateX(0)      = natural flex position (left of trigger).  */
.task-panel-body-wrap {
  pointer-events: none;  /* disabled while off-screen */
  flex: 0 0 220px;
  width: 220px;
  height: 270px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(3, 8, 3, 0.97);
  background-image: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px
  );
  border-top:    2px solid rgba(90, 160, 90, 0.45);
  border-left:   2px solid rgba(90, 160, 90, 0.45);
  border-bottom: 2px solid rgba(20, 50, 20, 0.7);
  border-right:  none;
  box-sizing: border-box;
  transform: translateX(280px);          /* closed: 60px trigger + 220px body */
  transition: transform 0.22s steps(6); /* chunky pixel-art slide */
}
.task-panel--open .task-panel-body-wrap {
  pointer-events: auto;
  transform: translateX(0);             /* open state */
}

/* Pixel-thin scrollbar */
.task-panel-body-wrap::-webkit-scrollbar       { width: 3px; }
.task-panel-body-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.task-panel-body-wrap::-webkit-scrollbar-thumb { background: rgba(80, 140, 80, 0.35); }

/* ── Section headers ── */
.task-section-hdr {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(80, 130, 80, 0.7);
  padding: 8px 10px 4px;
  border-bottom: 1px solid rgba(80, 130, 80, 0.12);
}
.task-section-hdr--community { color: rgba(70, 130, 120, 0.7); }

/* ── Task rows ── */
.task-row {
  display: flex;
  align-items: flex-start;   /* items hug top — works with multi-line labels */
  gap: 4px;
  padding: 6px 10px 5px;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 15px;
  color: rgba(175, 210, 165, 0.72);
  border-bottom: 1px solid rgba(80, 130, 80, 0.08);
  line-height: 1.1;
}
.task-row--done {
  color: rgba(70, 190, 90, 0.58);
}
.task-icon {
  font-size: 14px;
  min-width: 30px;
  color: rgba(100, 150, 100, 0.6);
  flex-shrink: 0;
  letter-spacing: 0;
}
.task-row--done .task-icon { color: rgba(70, 190, 90, 0.75); }

/* Column to the right of the icon — stacks the label line + progress line */
.task-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Top line: label (grows) + reward (pinned right) */
.task-toprow {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
/* Bottom line: progress bar + count, indented under the label */
.task-progrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.task-lbl {
  flex: 1;
  font-size: 15px;
  letter-spacing: 0.02em;
  min-width: 0;
  /* Full sentence visible — wrap onto multiple lines as needed */
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.15;
}
/* Block-character progress bar — fill glows green for whimsy */
.task-bar {
  font-size: 13px;
  letter-spacing: -1px;
  flex-shrink: 0;
  line-height: 1;
}
.task-bar-fill  {
  color: rgba(120, 240, 150, 1);
  text-shadow:
    0 0 4px rgba(120, 255, 160, 0.7),
    0 0 8px rgba(100, 240, 140, 0.4);
}
.task-bar-empty { color: rgba(30, 55, 30, 1); }
.task-prog {
  font-size: 12px;
  color: rgba(150, 200, 140, 0.7);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0;
}
/* Reward stars — bloom gold for whimsy */
.task-rwd {
  font-size: 14px;
  color: #ffd96b;
  min-width: 36px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0;
  text-shadow:
    0 0 4px rgba(255, 215, 80, 0.8),
    0 0 8px rgba(255, 200, 100, 0.5),
    0 0 12px rgba(255, 180, 80, 0.25);
}
.task-row--done .task-rwd {
  color: rgba(120, 240, 150, 0.9);
  text-shadow: 0 0 4px rgba(120, 255, 160, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════════
   STAR FX — juicy pixel-star collection (see js/starFx.js)
   Gold ★ sprites swirl around the earn point, then spiral into the counter.
   ══════════════════════════════════════════════════════════════════════════ */

/* Flying star — position driven by JS (left/top); twinkles in place */
.starfx-star {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-family: 'lo-res', sans-serif;
  line-height: 1;
  color: #ffd96b;
  text-shadow:
    0 0 5px rgba(255, 215, 90, 0.95),
    0 0 11px rgba(255, 195, 70, 0.55),
    0 0 18px rgba(255, 170, 50, 0.3);
  image-rendering: pixelated;
  animation: starfxTwinkle 0.34s steps(2) infinite;
}
/* Chunky twinkle — scale + tiny rotate, stepped for a pixel shimmer */
@keyframes starfxTwinkle {
  0%   { transform: scale(0.82) rotate(-6deg); }
  50%  { transform: scale(1.12) rotate(6deg);  }
  100% { transform: scale(0.82) rotate(-6deg); }
}

/* "Star get" hero pop at the source */
.starfx-hero {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-family: 'lo-res', sans-serif;
  font-size: 54px;
  line-height: 1;
  color: #ffe18a;
  text-shadow:
    0 0 14px rgba(255, 215, 90, 0.95),
    0 0 28px rgba(255, 185, 50, 0.55);
  transform: translate(-50%, -50%);
  animation: starfxHeroPop 0.6s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
}
@keyframes starfxHeroPop {
  0%   { transform: translate(-50%, -50%) scale(0)    rotate(-14deg); opacity: 0; }
  40%  { transform: translate(-50%, -50%) scale(1.3)  rotate(6deg);   opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1)    rotate(0deg);   opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.7)  rotate(0deg);   opacity: 0; }
}

/* Floating "+N" reward number */
.starfx-plus {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-family: 'pf-pixelscript', cursive;
  font-size: 58px;
  color: #ffd96b;
  text-shadow: 0 0 8px rgba(255, 210, 80, 0.9), 2px 2px 0 #7a4e06;
  transform: translate(-50%, -50%);
  animation: starfxPlus 0.92s ease-out forwards;
}
@keyframes starfxPlus {
  0%   { opacity: 0; transform: translate(-50%, -50%)  scale(0.6); }
  25%  { opacity: 1; transform: translate(-50%, -90%)  scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -165%) scale(1);   }
}

/* Sparkle ring on landing */
.starfx-ring {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border: 2px solid #ffe48a;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 210, 90, 0.9);
  animation: starfxRing 0.4s ease-out forwards;
}
@keyframes starfxRing {
  0%   { opacity: 0.9; width: 8px;  height: 8px;  }
  100% { opacity: 0;   width: 48px; height: 48px; }
}

/* Counter squash-bump when a star lands */
.star-counter.star-land-bump {
  animation: starLandBump 0.26s steps(3);
}
@keyframes starLandBump {
  0%   { transform: scale(1);          }
  40%  { transform: scale(1.18, 0.86); }
  70%  { transform: scale(0.96, 1.06); }
  100% { transform: scale(1);          }
}

/* ── QUEST REWARD TOAST ─────────────────────────────────────────────────────── */
.quest-toast {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: #ffe7a0;
  font-family: 'VT323', monospace;
  font-size: 19px;
  letter-spacing: 2px;
  padding: 8px 22px;
  z-index: 9998;
  pointer-events: none;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   COLLECTION PANEL — left-side slide-out "dex" (see js/collection.js)
   Mirror of the right-side task panel: the TRIGGER is pinned to the LEFT
   screen edge and never moves; only the BODY-WRAP translates.
     Closed: body translateX(-328px) → completely off-screen left.
     Open:   body translateX(0)      → slides right into natural position.
   Violet accent distinguishes it from the cyan/gold task tab. Slightly
   bigger body than the task panel, with a 2-column card grid.
   ══════════════════════════════════════════════════════════════════════════ */
.coll-panel {
  position: fixed;
  left: 0;
  top: 148px;          /* aligned with the task panel on the opposite edge */
  width: 328px;        /* 60px trigger + 268px body */
  display: flex;
  flex-direction: row; /* trigger(first in DOM) → leftmost → left edge */
  align-items: flex-start;
  z-index: 20;
  pointer-events: none;
}

/* ── Trigger — chunky pixel-art button, locked to left screen edge ── */
.coll-panel-trigger {
  pointer-events: auto;
  flex: 0 0 60px;
  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: rgba(14, 8, 22, 0.95);
  /* Violet pixel-art raised-edge: bright violet top/left, deep plum bottom/right */
  border-top:    2px solid rgba(200, 150, 255, 0.7);
  border-right:  2px solid rgba(200, 150, 255, 0.7);
  border-bottom: 2px solid rgba(55, 25, 80, 0.85);
  border-left:   2px solid rgba(45, 20, 65, 0.7);
  box-shadow:
    0 0 8px 1px rgba(190, 130, 255, 0.45),
    0 0 4px rgba(255, 215, 100, 0.25),
    inset 0 0 6px rgba(200, 150, 255, 0.15);
  color: rgba(238, 225, 255, 0.95);
  font-family: 'VT323', monospace;
  cursor: pointer;
  padding: 8px 4px;
  box-sizing: border-box;
  animation: coll-tab-idle 2.8s ease-in-out infinite;
}
.coll-panel-trigger:active {
  border-top-color:    rgba(55, 25, 80, 0.85);
  border-right-color:  rgba(55, 25, 80, 0.85);
  border-bottom-color: rgba(200, 150, 255, 0.7);
  border-left-color:   rgba(200, 150, 255, 0.7);
  background: rgba(20, 12, 30, 0.98);
}
.coll-panel--open .coll-panel-trigger {
  border-top-color:    rgba(255, 230, 130, 0.8);
  border-right-color:  rgba(255, 230, 130, 0.8);
  background: rgba(22, 14, 30, 0.97);
  color: rgba(255, 245, 220, 1);
  box-shadow:
    0 0 12px 2px rgba(255, 215, 100, 0.5),
    0 0 6px rgba(190, 130, 255, 0.4),
    inset 0 0 8px rgba(255, 220, 130, 0.2);
}

.coll-trigger-label {
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  width: 100%;
  color: rgba(248, 235, 255, 0.85);
  text-shadow: 0 0 4px rgba(200, 150, 255, 0.4);
}
.coll-trigger-count {
  font-size: 20px;
  color: rgba(210, 170, 255, 1);
  line-height: 1;
  text-align: center;
  text-shadow:
    0 0 6px rgba(190, 130, 255, 0.75),
    0 0 12px rgba(170, 110, 255, 0.35);
}
.coll-panel--open .coll-trigger-count {
  color: rgba(255, 235, 150, 1);
  text-shadow:
    0 0 6px rgba(255, 215, 100, 0.75),
    0 0 12px rgba(255, 200, 120, 0.4);
}
.coll-trigger-bar {
  font-size: 10px;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.coll-trigger-bar-fill {
  color: rgba(200, 150, 255, 0.95);
  text-shadow: 0 0 4px rgba(190, 130, 255, 0.7), 0 0 8px rgba(170, 110, 255, 0.4);
}
.coll-trigger-bar-empty { color: rgba(60, 45, 75, 0.85); }

@keyframes coll-tab-idle {
  0%, 100% {
    box-shadow:
      0 0 8px 1px rgba(190, 130, 255, 0.40),
      0 0 4px rgba(255, 215, 100, 0.22),
      inset 0 0 6px rgba(200, 150, 255, 0.15);
  }
  50% {
    box-shadow:
      0 0 14px 2px rgba(190, 130, 255, 0.6),
      0 0 8px rgba(255, 215, 100, 0.4),
      inset 0 0 10px rgba(215, 175, 255, 0.22);
  }
}
@keyframes coll-tab-ping {
  0%, 50%, 100% { filter: none; transform: scale(1); }
  25%, 75%      { filter: brightness(1.6) saturate(1.4); transform: scale(1.06); }
}
.coll-panel-trigger--ping {
  animation: coll-tab-idle 2.8s ease-in-out infinite, coll-tab-ping 0.55s steps(1) 1;
}

/* ── Panel body — slides in/out independently of the trigger ── */
.coll-panel-body-wrap {
  pointer-events: none;
  flex: 0 0 268px;
  width: 268px;
  height: 340px;       /* slightly bigger than the task panel (220×270) */
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(8, 4, 12, 0.97);
  background-image: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0, 0, 0, 0.18) 3px, rgba(0, 0, 0, 0.18) 4px
  );
  border-top:    2px solid rgba(150, 100, 200, 0.45);
  border-right:  2px solid rgba(150, 100, 200, 0.45);
  border-bottom: 2px solid rgba(45, 20, 65, 0.7);
  border-left:   none;
  box-sizing: border-box;
  transform: translateX(-328px);          /* closed: 60px trigger + 268px body */
  transition: transform 0.22s steps(6);   /* chunky pixel-art slide */
}
.coll-panel--open .coll-panel-body-wrap {
  pointer-events: auto;
  transform: translateX(0);
}
.coll-panel-body-wrap::-webkit-scrollbar       { width: 3px; }
.coll-panel-body-wrap::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); }
.coll-panel-body-wrap::-webkit-scrollbar-thumb { background: rgba(140, 90, 200, 0.35); }

/* ── Tier headers (one per rarity) ── */
.coll-tier-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 4px;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(140, 90, 200, 0.12);
}
.coll-tier-name {
  flex: 0 0 auto;
  color: var(--tier, #c28bff);
  text-shadow: 0 0 5px color-mix(in srgb, var(--tier, #c28bff) 55%, transparent);
}
.coll-tier-prog {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
}
.coll-bar { font-size: 12px; letter-spacing: -1px; line-height: 1; flex-shrink: 0; }
.coll-bar-fill {
  color: rgba(200, 150, 255, 1);
  text-shadow: 0 0 4px rgba(190, 130, 255, 0.7);
}
.coll-bar-empty { color: rgba(50, 38, 65, 1); }
.coll-tier-count {
  font-size: 12px;
  color: rgba(190, 165, 215, 0.7);
  min-width: 26px;
  text-align: right;
}
.coll-tier-rwd {
  flex: 0 0 auto;
  font-size: 14px;
  color: #ffd96b;
  min-width: 34px;
  text-align: right;
  text-shadow:
    0 0 4px rgba(255, 215, 80, 0.8),
    0 0 8px rgba(255, 200, 100, 0.5);
}
.coll-tier-rwd--done {
  color: rgba(150, 240, 170, 0.95);
  text-shadow: 0 0 5px rgba(120, 255, 160, 0.7);
}
.coll-tier-hdr--done .coll-tier-name { opacity: 0.75; }

/* ── Card grid — 3 columns ── */
/* 3 across fits the pristine trio on one row (no awkward blank cell) and the
   horror six on two rows, all within the same panel width. */
.coll-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 6px 8px 10px;
}
.coll-card { position: relative; min-width: 0; }
.coll-card-face {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  animation: coll-card-pop 0.32s steps(4) 1;
}
@keyframes coll-card-pop {
  0%   { transform: scale(0.82); filter: brightness(1.8); }
  100% { transform: scale(1);    filter: none; }
}
/* Uncollected — near-black slab marked with a faint pixel "?" */
.coll-card-locked {
  width: 100%;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #07090c;
  border: 1px solid rgba(36, 40, 52, 0.45);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
}
.coll-card-locked::after {
  content: "?";
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 26px;
  line-height: 1;
  color: rgba(150, 135, 180, 0.4);
  text-shadow: 0 0 6px rgba(120, 100, 160, 0.25);
}

/* Holographic finish — owned-in-holo slot: foil glow + a ✦ badge. */
.coll-card--holo .coll-card-face {
  box-shadow: 0 0 8px rgba(180, 140, 255, 0.6), 0 0 14px rgba(120, 200, 255, 0.35);
}
.coll-holo-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 5px #b98cff, 0 0 9px #7be3ff, 0 1px 1px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BANNER + BOSS HUD (see js/announce.js)
   Drop-down push-notification banners for shared moments (boss spawn/slain,
   god pack). The boss-spawn banner minimises into the compact live HP bar.
   ══════════════════════════════════════════════════════════════════════════ */

/* Banner — pinned to the top, drops in like an in-game alert (not a native push). */
.announce-banner {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -130%);   /* hidden above the screen */
  width: min(92vw, 400px);
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px 16px;
  z-index: 10050;
  background: rgba(10, 8, 14, 0.96);
  border: 2px solid rgba(255, 90, 122, 0.6);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 90, 122, 0.3);
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  pointer-events: none;
  cursor: pointer;
  overflow: hidden;                       /* clip the scanlines + glitch jitter */
  transition: transform 0.34s steps(8);   /* chunky pixel-art drop */
}
.announce-banner--open {
  transform: translate(-50%, 0);
  pointer-events: auto;
}
/* CRT scanline overlay — instantly reads as a screen, not an OS notification. */
.announce-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 3px);
  opacity: 0.55;
}
/* Inner wrapper centres the content AND carries the glitch jitter, so the
   shell's positioning transform is never disturbed. */
.announce-inner {
  position: relative;
  z-index: 1;                  /* above the scanline overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}
.announce-icon {
  font-size: 24px;
  line-height: 1;
}
.announce-text { width: 100%; }
.announce-title {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 3px;
}
.announce-body {
  font-size: 13px;
  line-height: 1.25;
  color: rgba(230, 225, 235, 0.85);
}
.announce-name { font-weight: 700; }

/* ── Type accents ── */
.announce-banner--boss {
  border-color: rgba(255, 90, 122, 0.7);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(200, 40, 80, 0.4);
}
.announce-banner--boss .announce-title {
  color: #ff6a8a;
  text-shadow: 0 0 8px rgba(255, 80, 110, 0.6);
  animation: announceTitleGlitch 1.3s steps(1) infinite;
}
/* Subtle whole-banner glitch — content holds still, then briefly tears with a
   horizontal jolt + chromatic shift every few seconds. Boss banner only. */
.announce-banner--boss .announce-inner {
  animation: announceGlitch 2.8s steps(1) infinite;
}
@keyframes announceGlitch {
  0%, 88%, 100% { transform: translate(0, 0);                 filter: none; }
  89%           { transform: translate(-3px, 0) skewX(-3deg); filter: hue-rotate(25deg) saturate(1.4); }
  90%           { transform: translate(3px, 1px);             filter: none; }
  91%           { transform: translate(-2px, -1px);           filter: hue-rotate(-20deg); }
  92%           { transform: translate(2px, 0) skewX(2deg);   filter: none; }
  93%           { transform: translate(0, 0);                 filter: none; }
}
@keyframes announceTitleGlitch {
  0%, 46%, 54%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 80, 110, 0.6); }
  50%                { opacity: 0.7; text-shadow: 2px 0 #00fff0, -2px 0 #ff004c; }
}
.announce-banner--slain {
  border-color: rgba(101, 255, 76, 0.6);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(101, 255, 76, 0.3);
}
.announce-banner--slain .announce-title {
  color: #8aff7a;
  text-shadow: 0 0 8px rgba(101, 255, 76, 0.5);
}
.announce-banner--godpack {
  border-color: rgba(255, 215, 107, 0.7);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(255, 200, 80, 0.4);
}
.announce-banner--godpack .announce-title {
  color: #ffd96b;
  text-shadow: 0 0 8px rgba(255, 200, 80, 0.6);
}

/* ── Minimized boss HP bar — sits where the banner was ── */
.boss-hud {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -130%);   /* hidden until the banner minimises */
  width: min(92vw, 380px);
  box-sizing: border-box;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  z-index: 10040;
  background: rgba(10, 6, 10, 0.94);
  border: 2px solid rgba(255, 90, 122, 0.55);
  border-radius: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 12px rgba(200, 40, 80, 0.3);
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  pointer-events: none;
  transition: transform 0.3s steps(6);
}
.boss-hud--open { transform: translate(-50%, 0); }
.boss-hud-name {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ff6a8a;
  text-shadow: 0 0 6px rgba(255, 80, 110, 0.5);
  white-space: nowrap;
  flex-shrink: 0;
}
.boss-hud-bar {
  position: relative;      /* anchors the grafted-HP span and its limb dividers */
  flex: 1;
  min-width: 0;
  height: 10px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 90, 122, 0.4);
  border-radius: 5px;
  overflow: hidden;
}
.boss-hud-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 60, 90, 0.95), rgba(255, 120, 90, 0.95));
  box-shadow: 0 0 8px rgba(255, 80, 110, 0.6);
  transition: width 0.25s linear;
}
.boss-hud-hp {
  font-size: 11px;
  color: rgba(255, 180, 190, 0.85);
  min-width: 44px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Boss heal feedback (glitchlings channelling HP back into the boss) ──────
   The bar flashes white-hot and a green "+N" floats up, so players can tell at a
   glance that the boss is REGAINING health and know to clear the glitchlings.  */
.boss-hud-fill--heal {
  animation: bossHealFlash 0.5s steps(4);
}
@keyframes bossHealFlash {
  0%   { background: #ffffff; box-shadow: 0 0 16px rgba(255,255,255,0.95); }
  45%  { background: #d8ffe2; box-shadow: 0 0 12px rgba(150,255,180,0.8); }
  100% { background: linear-gradient(90deg, rgba(255,60,90,0.95), rgba(255,120,90,0.95));
         box-shadow: 0 0 8px rgba(255,80,110,0.6); }
}

/* The whole HUD gets a brief green rim so the flash reads even at a glance */
.boss-hud--heal {
  animation: bossHudHealRim 0.5s steps(4);
}
@keyframes bossHudHealRim {
  0%,45% { border-color: rgba(120, 255, 160, 0.9);
           box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 16px rgba(80, 255, 140, 0.45); }
  100%   { border-color: rgba(255, 90, 122, 0.55);
           box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 12px rgba(200, 40, 80, 0.3); }
}

/* Floating "+N" tick — spawned per heal, removes itself when the animation ends.
   Mirrors the in-world green heal numbers Unity pops above the boss. */
.boss-heal-tick {
  position: absolute;
  right: 10px;
  top: 50%;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 15px;
  color: #4dff7a;
  text-shadow: 0 0 6px rgba(60, 255, 120, 0.8), 1px 1px 0 #000;
  pointer-events: none;
  animation: bossHealTick 1.1s ease-out forwards;
}
@keyframes bossHealTick {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  25%  { opacity: 1; transform: translateY(-10px) scale(1.15); }
  100% { opacity: 0; transform: translateY(-26px) scale(1); }
}
/* Grafted limbs raise MAX HP rather than restoring it, so their "+N" is bone
   rather than heal-green — the same palette as the hatched span it just added. */
.boss-heal-tick--graft {
  color: #ffe2d0;
  text-shadow: 0 0 6px rgba(255, 190, 160, 0.85), 1px 1px 0 #000;
}

/* ── Grafted health (flesh limbs bolted onto the boss) ───────────────────────
   Flesh cards pulled during a fight fuse onto the boss in Unity and push its max
   HP up. The shared bar has to show the pool getting BIGGER, not just refilling,
   or the nature players can't tell why their damage stopped closing the gap.
   The grafted tail is hatched bone against the red core, with one divider per
   limb so the room can count what the horror side has stacked on.             */
.boss-hud-graft {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;                 /* left edge set inline, at baseMaxHP / maxHP */
  pointer-events: none;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 226, 208, 0.22) 0px, rgba(255, 226, 208, 0.22) 2px,
    rgba(255, 226, 208, 0)    2px, rgba(255, 226, 208, 0)    5px);
  border-left: 1px solid rgba(255, 226, 208, 0.8);
}
.boss-hud-tick {
  position: absolute;
  top: 1px;
  bottom: 1px;
  width: 1px;
  pointer-events: none;
  background: rgba(255, 226, 208, 0.5);
}

/* Graft feedback — deliberately parallel to the heal flash but in bone, so the
   two reasons the bar moved the "wrong" way stay tellable apart at a glance. */
.boss-hud-fill--graft { animation: bossGraftFlash 0.55s steps(4); }
@keyframes bossGraftFlash {
  0%   { background: #ffe2d0; box-shadow: 0 0 16px rgba(255, 226, 208, 0.95); }
  45%  { background: #ffb59a; box-shadow: 0 0 12px rgba(255, 180, 150, 0.8); }
  100% { background: linear-gradient(90deg, rgba(255,60,90,0.95), rgba(255,120,90,0.95));
         box-shadow: 0 0 8px rgba(255,80,110,0.6); }
}
.boss-hud--graft { animation: bossHudGraftRim 0.55s steps(4); }
@keyframes bossHudGraftRim {
  0%,45% { border-color: rgba(255, 226, 208, 0.9);
           box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 16px rgba(255, 200, 170, 0.45); }
  100%   { border-color: rgba(255, 90, 122, 0.55);
           box-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 12px rgba(200, 40, 80, 0.3); }
}
/* ── Cross-player combo strip ────────────────────────────────────────────────
   Sits just below the card on the pack screen. Hidden until Unity broadcasts a
   primed synergy. Deliberately a persistent SLOT rather than a dismissible
   banner: in a gallery two strangers have no way to be told about each other, so
   an open question sitting under your card is what actually prompts action.
   Violet = nature (sky blue) + critter (pastel pink), so the colour itself
   teaches which pools combined.                                              */
.combo-strip {
  position: fixed;
  /* Clears the pack-type row, which sits at bottom:34px and is ~70px tall — so
     its top edge is ~104px up. Anything at or below that overlaps the buttons. */
  bottom: 122px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 6;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  /* NEUTRAL while the combo is only primed. Violet is reserved for the moment
     the synergy actually lands, so the colour marks an achievement rather than
     just an open slot. */
  border: 1px solid rgba(190, 200, 215, 0.4);
  border-radius: 10px;
  background: rgba(10, 14, 18, 0.92);
  box-shadow: 0 0 12px -5px rgba(190, 200, 215, 0.6);
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  color: #cfd8e3;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s steps(4), transform 0.25s steps(4);
}
.combo-strip--open {
  display: flex;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* The card already played — solid, showing its actual art, to contrast with the
   empty dashed slot beside it */
.combo-played {
  width: 26px;
  height: 34px;
  border: 2px solid rgba(190, 200, 215, 0.85);
  border-radius: 3px;
  background: rgba(190, 200, 215, 0.12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.combo-played-art {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  opacity: 0.9;
}
.combo-plus { font-size: 13px; opacity: 0.8; }

/* The MISSING card — dashed outline + the symbol being asked for */
.combo-slot {
  position: relative;
  width: 26px;
  height: 34px;
  flex-shrink: 0;
  border: 2px dashed rgba(120, 255, 170, 0.9);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: comboSlotPulse 1.5s steps(3) infinite;
}
.combo-slot-hint {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  opacity: 0.75;
  filter: drop-shadow(0 0 3px rgba(120, 255, 170, 0.8));
}
.combo-slot-q { font-size: 15px; color: rgba(120, 255, 170, 0.9); }
@keyframes comboSlotPulse {
  0%, 100% { border-color: rgba(120, 255, 170, 0.45); }
  50%      { border-color: rgba(120, 255, 170, 1); }
}

/* Cooldown drawn as the strip's OWN border, so it doesn't crowd the slot art.
   The static border underneath acts as the track; this strokes away over the
   window. Sized in JS to match the strip's rendered width. */
.combo-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.combo-border-fill {
  fill: none;
  stroke: #78ffaa;          /* recoloured inline by combo.js as it drains */
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(120, 255, 170, 0.85));
  /* No transition on stroke: it held the rendered colour behind the inline
     value the tick sets, so the urgency colour never actually appeared. A hard
     snap also matches the stepped, pixel-art feel used elsewhere. */
}

.combo-caption { font-size: 10px; letter-spacing: 0.05em; line-height: 1.35; white-space: nowrap; }
.combo-caption b { color: #78ffaa; }
.combo-name { font-weight: bold; }

/* Last few seconds — urgency without shortening the window */
.combo-strip--urgent { border-color: rgba(255, 170, 90, 0.9); }
/* The border stroke colour is driven inline from combo.js's tick (it already
   knows the remaining time), so there's no urgent rule for it here. */
.combo-strip--urgent .combo-slot { border-color: rgba(255, 170, 90, 0.95); animation-duration: 0.5s; }

/* Completed — both players credited */
.combo-strip--complete {
  border-color: rgba(214, 170, 255, 1);
  box-shadow: 0 0 22px -2px rgba(200, 140, 255, 0.9);
  animation: comboComplete 0.5s steps(4);
}
.combo-caption--done { text-align: center; font-size: 10px; }
.combo-caption--done b { color: #e0c0ff; letter-spacing: 0.1em; }
.combo-burst {
  font-size: 20px;
  color: #e8ccff;
  text-shadow: 0 0 10px rgba(210, 150, 255, 0.95);
  animation: comboBurst 0.6s steps(4);
}
@keyframes comboComplete {
  0%   { transform: translateX(-50%) scale(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}
@keyframes comboBurst {
  0%   { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(8deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* ── Earned synergy ability cards ────────────────────────────────────────────
   Violet appears ONLY here — it marks something achieved together, not merely
   an open opportunity. Sits beside the combo strip and persists for the whole
   session until spent.                                                        */
.combo-tray {
  position: fixed;
  bottom: 122px;
  right: 12px;
  z-index: 7;
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.combo-tray--open { display: flex; }

/* Built like the game's other cards: a dark art window with the pixel frame PNG
   laid OVER it, so the border decoration sits on the card's edge. */
.combo-card {
  pointer-events: auto;
  position: relative;
  width: 52px;
  aspect-ratio: 2 / 3;          /* matches combo_card_violet.png */
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  color: #e8d5ff;
  filter: drop-shadow(0 0 7px rgba(190, 130, 255, 0.75));
  animation: comboCardIdle 2.4s steps(4) infinite;
  -webkit-tap-highlight-color: transparent;
}
.combo-card:active { transform: scale(0.94); }

/* Art window — inset so it sits inside the frame's visible border */
.combo-card-window {
  position: absolute;
  inset: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(160deg, rgba(48, 22, 74, 0.97), rgba(20, 10, 34, 0.97));
  border-radius: 2px;
}
/* Frame LAST so it draws on top of the window */
.combo-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.combo-card-sym   { font-size: 16px; line-height: 1; text-shadow: 0 0 8px rgba(220, 160, 255, 0.95); }
.combo-card-label { font-size: 5.5px; letter-spacing: 0.03em; line-height: 1.15; text-align: center; opacity: 0.9; padding: 0 2px; }
@keyframes comboCardIdle {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(190, 130, 255, 0.6)); }
  50%      { filter: drop-shadow(0 0 11px rgba(210, 160, 255, 0.95)); }
}

/* ── Activate / later prompt ─────────────────────────────────────────────────
   The card is a one-shot co-op reward, so spending it is confirmed rather than
   fired on a stray tap.                                                       */
.combo-prompt {
  position: fixed;
  inset: 0;
  z-index: 10070;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 12, 0.8);
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
}
.combo-prompt--open { display: flex; }
.combo-prompt-card {
  width: min(80vw, 290px);
  padding: 20px 18px 16px;
  text-align: center;
  background: linear-gradient(160deg, rgba(44, 20, 70, 0.98), rgba(18, 10, 30, 0.98));
  border: 2px solid rgba(200, 150, 255, 0.75);
  border-radius: 12px;
  box-shadow: 0 0 28px -4px rgba(190, 130, 255, 0.75);
}
/* The card itself, shown large — the player should see what they're spending */
.combo-prompt-art {
  position: relative;
  width: 118px;
  aspect-ratio: 2 / 3;
  margin: 0 auto 12px;
  filter: drop-shadow(0 0 12px rgba(190, 130, 255, 0.8));
}
.combo-prompt-sym   { font-size: 40px; line-height: 1; color: #e8ccff; text-shadow: 0 0 14px rgba(210, 150, 255, 0.95); }
.combo-prompt-title { font-size: 11px; letter-spacing: 0.1em; color: #f0dcff; margin-top: 6px; text-align: center; padding: 0 6px; }
.combo-prompt-sub   { font-size: 10px; letter-spacing: 0.06em; color: rgba(220, 200, 255, 0.7); margin-bottom: 16px; }
.combo-prompt-btn {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 11px 10px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(225, 210, 245, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 150, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.combo-prompt-btn:active { transform: scale(0.98); }
.combo-prompt-btn--go {
  color: #16081f;
  background: linear-gradient(180deg, #e0b8ff, #c084fc);
  border-color: rgba(230, 190, 255, 0.95);
  box-shadow: 0 0 14px -3px rgba(200, 140, 255, 0.9);
}

/* ── Ability path drawing ────────────────────────────────────────────────────
   Opened by ACTIVATE. The player drags the route the spiky sheep will charge
   along. Drawing rather than picking a target is deliberate: it's the most
   active input in the piece, which is what a co-op reward should feel like.  */
.combo-path {
  position: fixed;
  inset: 0;
  z-index: 10075;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 12, 0.88);
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
}
.combo-path--open { display: flex; }

.combo-path-card {
  width: min(90vw, 340px);
  padding: 16px 16px 14px;
  text-align: center;
  background: linear-gradient(160deg, rgba(40, 18, 64, 0.98), rgba(16, 9, 28, 0.98));
  border: 2px solid rgba(200, 150, 255, 0.7);
  border-radius: 12px;
  box-shadow: 0 0 26px -4px rgba(190, 130, 255, 0.7);
}
.combo-path-title {
  font-size: 14px;
  letter-spacing: 0.14em;
  color: #f0dcff;
  margin-bottom: 10px;
}
#comboPathMap {
  width: auto;
  height: min(46vh, 300px);
  aspect-ratio: 162 / 222;
  image-rendering: pixelated;
  border: 2px solid rgba(200, 150, 255, 0.5);
  box-shadow: 0 0 10px rgba(190, 130, 255, 0.25), inset 0 0 10px rgba(0, 0, 0, 0.5);
  background: #0a160e;
  touch-action: none;          /* so a drag draws instead of scrolling */
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.combo-path-hint {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(220, 200, 255, 0.75);
}
.combo-path-btns { display: flex; gap: 8px; margin-top: 12px; }
.combo-path-btn {
  flex: 1;
  padding: 11px 8px;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(225, 210, 245, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 150, 255, 0.4);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.combo-path-btn:active { transform: scale(0.98); }
.combo-path-btn--go {
  color: #16081f;
  background: linear-gradient(180deg, #e0b8ff, #c084fc);
  border-color: rgba(230, 190, 255, 0.95);
  box-shadow: 0 0 14px -3px rgba(200, 140, 255, 0.9);
}
.combo-path-btn--go:disabled {
  color: rgba(225, 210, 245, 0.4);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(200, 150, 255, 0.25);
  box-shadow: none;
  cursor: default;
}
.combo-path-cancel {
  margin-top: 4px;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(200, 180, 230, 0.45);
}

/* ── <WH4Ti5L0VE> HUD tint ────────────────────────────────────────────────────
   Same bar, same layout, different hue — matching how the two bosses are told
   apart in Unity. Applied to the HUD root so the fill and the readout shift
   together. */
.boss-hud--mail .boss-hud-fill {
  background: linear-gradient(90deg, rgba(230, 30, 25, 0.95), rgba(255, 140, 40, 0.95));
  box-shadow: 0 0 8px rgba(255, 90, 30, 0.65);
}
.boss-hud--mail .boss-hud-hp   { color: rgba(255, 190, 150, 0.9); }
.boss-hud--mail .boss-hud-name { color: rgba(255, 150, 110, 0.95); }

/* ── <WH4Ti5L0VE> HP bar ──────────────────────────────────────────────────────
   Its own element, stacked under the glitch boss's rather than replacing it.
   Inherits .boss-hud for layout and slide-in; only the offset and the hue
   differ, so the two read as the same kind of readout. */
.boss-hud--mail {
  /* Sits one bar-height lower, so both are visible if both are ever alive. The
     hidden transform has to be overridden too, or it would slide in from the
     wrong place. */
  transform: translate(-50%, -260%);
  border-color: rgba(255, 110, 60, 0.55);
}
.boss-hud--mail.boss-hud--open { transform: translate(-50%, 46px); }

.boss-hud--mail .boss-hud-fill {
  background: linear-gradient(90deg, rgba(230, 30, 25, 0.95), rgba(255, 140, 40, 0.95));
  box-shadow: 0 0 8px rgba(255, 90, 30, 0.65);
}
.boss-hud--mail .boss-hud-hp   { color: rgba(255, 190, 150, 0.9); }
.boss-hud--mail .boss-hud-name { color: rgba(255, 150, 110, 0.95); }

/* ── Collective buff rail ─────────────────────────────────────────────────────
   Left side, mirroring .combo-tray on the right. The split is meaningful: the
   right holds cards this player can spend, the left holds conditions the room
   is under. Nothing here is tappable. */
.buff-rail {
  position: fixed;
  bottom: 122px;
  left: 12px;
  z-index: 7;
  display: none;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.buff-rail--open { display: flex; }

.buff-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(10, 16, 22, 0.9);
  border: 1px solid rgba(120, 220, 255, 0.45);
  border-radius: 3px;
  font-family: 'lo-res', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(180, 240, 255, 0.92);
  box-shadow: 0 0 10px rgba(80, 200, 255, 0.18);
}
.buff-chip-sym {
  font-size: 12px;
  color: #7be3ff;
  text-shadow: 0 0 6px rgba(123, 227, 255, 0.7);
}
.buff-chip-val { color: #ffffff; }

/* Pulses once when the room earns another step, so a buff climbing is felt on
   the phone as well as in the placement. */
@keyframes buffChipBump {
  0%   { transform: scale(1);    box-shadow: 0 0 10px rgba(80, 200, 255, 0.18); }
  40%  { transform: scale(1.14); box-shadow: 0 0 18px rgba(120, 230, 255, 0.6); }
  100% { transform: scale(1);    box-shadow: 0 0 10px rgba(80, 200, 255, 0.18); }
}
.buff-chip--bump { animation: buffChipBump 0.45s steps(5); }

/* BIG BUFF — warm against the speed chip's cyan, so two stacked chips read as
   two different kinds of thing rather than two of the same. */
.buff-chip--big {
  border-color: rgba(255, 170, 90, 0.5);
  color: rgba(255, 220, 180, 0.92);
  box-shadow: 0 0 10px rgba(255, 150, 60, 0.2);
}
.buff-chip--big .buff-chip-sym {
  color: #ffb056;
  text-shadow: 0 0 6px rgba(255, 176, 86, 0.7);
}

.shop-item--big { border-color: rgba(255, 170, 90, 0.35); }

/* ── Soul recovery console ────────────────────────────────────────────────────
   Terminal register, matching the name screen and the Unity overlay. No
   `display` at the id level — .screen already flex-centres, and an id-level
   display beats `.screen.hidden { display:none }`, which is what made the mail
   window show up on the name screen. */
#screen-soul {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #05060a;
}

/* No panel, no border, no chrome. The screen IS the window — a framed box
   inside a black screen is two containers doing one container's job, and at
   this moment the phone has exactly one thing to say. */
.soul-ask {
  width: 100%;
  max-width: 300px;
  text-align: center;
  font-family: 'lo-res', monospace;
  color: rgba(150, 255, 210, 0.92);
}

.soul-ask-q {
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.12em;
}

.soul-ask-btns {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

/* Explicit, because there is NO generic `.hidden` rule in this stylesheet —
   only `.page.hidden` and `.screen.hidden`. The old console relied on a bare
   `.hidden` for its "RESPONSE LOGGED" line, which meant that line was on
   screen the whole time, before anyone had answered anything. */
.soul-ask-btns.hidden { display: none; }
.soul-ask-sent.hidden { display: none; }

/* Both answers weighted the SAME. A styled-up yes and a muted no is the
   interface answering for the player, and whether the room continues is the
   one decision the piece should not put its thumb on. */
.soul-ask-btn {
  flex: 1;
  padding: 18px 0;
  background: transparent;
  border: 1px solid rgba(120, 255, 190, 0.45);
  color: rgba(150, 255, 210, 0.92);
  font-family: 'lo-res', monospace;
  font-size: 14px;
  letter-spacing: 0.16em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.soul-ask-btn:active { background: rgba(120, 255, 190, 0.15); }

.soul-ask-btn--no {
  border-color: rgba(255, 120, 110, 0.45);
  color: rgba(255, 160, 150, 0.92);
}
.soul-ask-btn--no:active { background: rgba(255, 120, 110, 0.15); }

/* Replaces the buttons once answered, so the screen does not sit there
   offering a choice that has already been made. */
.soul-ask-sent {
  margin-top: 26px;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(120, 255, 190, 0.55);
}

/* ── Main task (Soul Tree objective) ──────────────────────────────────────────
   Top of the TASKS panel. Styled to sit WITH the existing rows, not in a box of
   its own — no border, no panel, same rhythm as the sections below it.

   Prefixed `mission-` on purpose: the established rows already use `.task-main`
   for their inner wrapper, and styling that name put a border around every task
   in the panel. */
.task-section-hdr--mission { color: rgba(140, 200, 255, 0.75); }

.task-mission {
  padding: 6px 10px 8px;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  color: #a8d8ff;
}

.task-mission-title {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #a8d8ff;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.task-mission-count { color: #d8ecff; }

/* 15px to match .task-row / .task-lbl exactly. These were set at 11px, which
   made the one objective a new arrival most needs to read the smallest text in
   the panel. */
.task-mission-stage {
  font-size: 15px;
  color: rgba(168, 216, 255, 0.62);
  margin-top: 2px;
}

.task-mission-line {
  font-size: 15px;
  color: rgba(210, 235, 255, 0.92);
  margin-top: 4px;
  line-height: 1.4;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.task-mission-box { flex: 0 0 auto; color: rgba(168, 216, 255, 0.75); }

/* The objective takes the slack so the reward chip is pushed to the right edge,
   matching the personal task rows. Without this the chip sits immediately after
   the text and the column of ★ values stops lining up. */
.task-mission-text { flex: 1 1 auto; min-width: 0; }
.task-mission-line .task-rwd { align-self: flex-start; }
.task-mission--ready .task-mission-box { color: #9ce8a0; }

.task-mission-bar {
  margin-top: 5px;
  height: 3px;
  background: rgba(168, 216, 255, 0.15);
}
.task-mission-bar > span {
  display: block;
  height: 100%;
  background: #a8d8ff;
  transition: width 0.3s linear;
}
.task-mission--ready .task-mission-line { color: #cfeaff; }

/* Pulsing marker, positioned OUTSIDE the trigger button so the tab keeps its
   exact size. A first-time player has no reason to open a panel they have not
   noticed, so the tab has to ask. */
.task-bang {
  /* Anchored to the BUTTON, not the panel. Absolutely positioned just past its
     left edge, so it rides the tab exactly and stays out of the flex flow. */
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  z-index: 3;
  pointer-events: none;
  font-family: 'Pixelify Sans', 'lo-res', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: #ffd23f;
  text-shadow: 0 0 10px rgba(255, 210, 63, 0.95), 2px 2px 0 rgba(90, 60, 0, 0.8);
  animation: taskBangPulse 1.1s steps(3) infinite;
}
/* The tab needs a positioning context for the badge. It has none of its own, and
   giving it one changes nothing else about its layout. */
.task-panel-trigger { position: relative; }

/* While the badge is up, the tab's own bloom does the work — no new colour, no
   border change, just the halo that is already there breathing harder.
   task-tab-idle is REPLACED rather than layered, because both animate box-shadow
   and two animations on one property fight, with the last declared winning.

   Same 1.1s duration and the same steps(3) as taskBangPulse, so the halo and the
   exclamation mark swell and drop on exactly the same beat. Anything else reads
   as two separate things happening near each other. */
.task-panel-trigger--alert {
  animation: task-tab-alert 1.1s steps(3) infinite;
}
@keyframes task-tab-alert {
  0%, 100% {
    box-shadow:
      0 0 8px 1px rgba(120, 230, 255, 0.40),
      0 0 4px rgba(255, 215, 100, 0.28),
      inset 0 0 6px rgba(120, 240, 220, 0.15);
  }
  50% {
    box-shadow:
      0 0 22px 4px rgba(120, 230, 255, 0.75),
      0 0 14px rgba(255, 215, 100, 0.7),
      inset 0 0 14px rgba(160, 245, 230, 0.3);
  }
}

/* translateY is repeated in every frame — an animation on `transform` replaces
   the rule's own centring transform, so omitting it would drop the badge. */
@keyframes taskBangPulse {
  0%, 100% { opacity: 1;    transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.35; transform: translateY(-50%) scale(1.25); }
}