/* ═══════════════════════════════
   TOKENS & RESET
═══════════════════════════════ */
:root {
  --bg: #1a1210;
  --surface: rgba(36,28,20,0.85);
  --elevated: #2e2418;
  --border: rgba(232,168,56,0.15);
  --border-strong: rgba(232,168,56,0.3);

  --gold: #e8a838;
  --gold-dim: rgba(232,168,56,0.6);
  --copper: #cd7f32;
  --blue: #6bb8d4;
  --green: #5daa68;
  --purple: #a87cc4;
  --red: #c4555a;
  --star: #f0c040;

  --text: #f0e4d4;
  --text-muted: rgba(240,228,212,0.4);
  --text-dim: rgba(240,228,212,0.25);

  --font: 'Inter', sans-serif;
  --font-head: 'Inter', sans-serif;
  --font-title: 'Bebas Neue', 'Impact', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-label: 'Inter', sans-serif;

  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; font-family: var(--font); background: #0a0806; color: var(--text); }

/* ═══════════════════════════════
   LOADING SCREEN
═══════════════════════════════ */
#ld-preloader{position:fixed;inset:0;z-index:9999;background:#0a0806;display:flex;align-items:center;justify-content:center;max-width:430px;margin:0 auto;}
#ld-preloader .dot{width:6px;height:6px;border-radius:50%;background:#e8a838;margin:0 4px;opacity:.2;animation:ldDotP 1.2s ease-in-out infinite;}
#ld-preloader .dot:nth-child(2){animation-delay:.2s;}
#ld-preloader .dot:nth-child(3){animation-delay:.4s;}
@keyframes ldDotP{0%,100%{opacity:.2;transform:scale(.8);}50%{opacity:.8;transform:scale(1.3);}}

#ld-screen{position:fixed;inset:0;z-index:9998;max-width:430px;margin:0 auto;display:none;}
.ld-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}
.ld-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,6,.55) 0%,rgba(10,8,6,.1) 20%,rgba(10,8,6,.05) 40%,rgba(10,8,6,.4) 65%,rgba(10,8,6,.95) 85%,rgba(10,8,6,1) 100%);}
#ldCanvas{position:absolute;inset:0;z-index:1;pointer-events:none;}
.ld-shard-rain-box{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.ld-shard-rain{position:absolute;pointer-events:none;animation:ldShardConfetti var(--dur) ease-in-out infinite;}
.ld-shard-rain img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px rgba(232,168,56,.25));}
@keyframes ldShardConfetti{
  0%{transform:translate(0,-60px) rotate(var(--r0)) scale(var(--sc));opacity:0;}
  10%{opacity:var(--op);}
  50%{transform:translate(var(--dx),calc(50vh + 30px)) rotate(var(--rm)) scale(var(--sc));opacity:var(--op);}
  90%{opacity:var(--op);}
  100%{transform:translate(calc(var(--dx)*-1),calc(100vh + 60px)) rotate(var(--r1)) scale(var(--sc));opacity:0;}
}
.ld-float-shard{position:absolute;z-index:3;pointer-events:none;opacity:0;animation:ldShardDrift 10s ease-in-out infinite;}
.ld-float-shard img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px rgba(232,168,56,.3));}
@keyframes ldShardDrift{0%,100%{opacity:0;transform:translateY(25px) scale(.4) rotate(0);}10%{opacity:.7;transform:translateY(10px) scale(.9) rotate(10deg);}50%{opacity:.4;transform:translateY(-20px) scale(.95) rotate(-8deg);}90%{opacity:.6;transform:translateY(5px) scale(.9) rotate(8deg);}}
.ld-wrap{position:relative;z-index:10;width:100%;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ld-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 20px;margin-top:-5vh;}
.ld-mascot{width:52vw;max-width:260px;aspect-ratio:1;position:relative;opacity:0;animation:ldMascotIn .8s cubic-bezier(.34,1.56,.64,1) .1s forwards;}
@keyframes ldMascotIn{0%{opacity:0;transform:scale(.1) translateY(60px);}70%{opacity:1;transform:scale(1.05) translateY(-5px);}100%{opacity:1;transform:scale(1) translateY(0);}}
.ld-mascot img{width:100%;height:100%;object-fit:contain;animation:ldMascotBreathe 4s ease-in-out infinite;filter:drop-shadow(0 10px 30px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(232,168,56,.15));}
@keyframes ldMascotBreathe{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-8px) scale(1.02);}}
.ld-mascot::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140%;height:140%;border-radius:50%;background:radial-gradient(circle,rgba(232,168,56,.15) 0%,rgba(80,180,240,.08) 35%,transparent 60%);animation:ldGlowPulse 3s ease-in-out infinite;z-index:-1;}
@keyframes ldGlowPulse{0%,100%{transform:translate(-50%,-50%) scale(.8);opacity:.3;}50%{transform:translate(-50%,-50%) scale(1.25);opacity:1;}}
.ld-title{
  font-family:'Bebas Neue','Impact',sans-serif;font-size:52px;letter-spacing:5px;color:#e8a838;
  display:flex;gap:2px;justify-content:center;margin-top:-5px;position:relative;
  text-shadow:
    1px 1px 0 #f5d060,
    -1px -1px 0 #a05a10,
    -2px 3px 0 #4a2000,
    -4px 5px 0 #321500,
    -6px 7px 2px rgba(30,15,0,.6),
    -8px 9px 4px rgba(20,10,0,.3),
    3px 0 15px rgba(232,168,56,.8),
    5px 0 40px rgba(232,168,56,.4),
    0 0 80px rgba(232,168,56,.2);
  -webkit-text-stroke:1px #4a2000;
}
.ld-title .ch{display:inline-block;opacity:0;animation:ldChIn .4s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(var(--i)*.05s + .3s);}
@keyframes ldChIn{0%{opacity:0;transform:translateY(20px) scale(.1);}60%{transform:translateY(-3px) scale(1.1);}100%{opacity:1;transform:translateY(0) scale(1);}}
.ld-title .ch.idle{opacity:1;animation:ldLetterIdle 6s ease-in-out infinite;animation-delay:calc(var(--i)*.4s);}
@keyframes ldLetterIdle{0%,100%{transform:translateY(0);filter:brightness(1);}30%{transform:translateY(-3px);filter:brightness(1.3);}60%{transform:translateY(1px);filter:brightness(1);}}
.ld-sparkle{position:absolute;pointer-events:none;color:#f0c040;opacity:0;animation:ldSparkleLife 2s ease-in-out infinite;z-index:1;}
@keyframes ldSparkleLife{0%,100%{opacity:0;transform:scale(.3) rotate(0);}20%{opacity:1;transform:scale(1) rotate(20deg);}80%{opacity:1;transform:scale(1.1) rotate(60deg);}}
.ld-tagline{font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:rgba(232,168,56,.7);letter-spacing:6px;text-transform:uppercase;margin-top:8px;opacity:0;animation:ldTagIn .6s ease .5s forwards;text-shadow:0 0 12px rgba(232,168,56,.4),0 1px 2px rgba(0,0,0,.6);}
@keyframes ldTagIn{0%{opacity:0;letter-spacing:14px;}100%{opacity:1;letter-spacing:6px;}}
.ld-divider{width:140px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,rgba(232,168,56,.3),rgba(80,180,240,.25),rgba(232,168,56,.3),transparent);opacity:0;animation:ldFadeUp .4s ease .7s forwards;position:relative;}
.ld-divider::after{content:'✦';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8px;color:rgba(232,168,56,.6);animation:ldSparkleRot 4s linear infinite;}
@keyframes ldSparkleRot{0%{transform:translate(-50%,-50%) rotate(0);}100%{transform:translate(-50%,-50%) rotate(360deg);}}
.ld-bottom{width:100%;padding:0 16px;margin-top:20px;text-align:center;}
.ld-prog-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.ld-prog-label{font-family:'Inter',sans-serif;font-size:8px;font-weight:700;color:rgba(240,223,219,.25);letter-spacing:2px;text-transform:uppercase;transition:color .3s;}
.ld-prog-label.done{color:rgba(111,207,151,.6);text-shadow:0 0 10px rgba(111,207,151,.3);}
.ld-prog-num{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:rgba(232,168,56,.5);transition:color .3s;}
.ld-prog-num.done{color:#6fcf97;}
.ld-bar{width:100%;height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;border:1px solid rgba(232,168,56,.1);}
.ld-fill{height:100%;width:0%;background:linear-gradient(90deg,#6a3a08,#a86818,#d49428,#e8a838);border-radius:3px;transition:width .2s ease-out;position:relative;}
.ld-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);animation:ldShimmer 1.5s ease-in-out infinite;}
@keyframes ldShimmer{0%{transform:translateX(-150%);}100%{transform:translateX(250%);}}
.ld-tips-row{margin-top:24px;display:flex;align-items:flex-start;justify-content:center;gap:24px;opacity:0;animation:ldFadeUp .5s ease .8s forwards;}
.ld-tips-item{display:flex;flex-direction:column;align-items:center;gap:5px;}
.ld-tips-item img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5)) brightness(.65);}
.ld-tips-item img.ld-ico-big{width:36px;height:36px;}
/* Pickaxe — swinging hits */
.ld-tips-item:nth-child(1) img{animation:ldPickHit 1.8s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes ldPickHit{0%,100%{transform:rotate(0deg);}20%{transform:rotate(-20deg);}30%{transform:rotate(15deg) scale(1.05);}40%{transform:rotate(0deg);}}
/* Bandit — subtle idle sway */
.ld-tips-item:nth-child(2) img{animation:ldBanditIdle 3s ease-in-out infinite;}
@keyframes ldBanditIdle{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.03);}}
/* Crate — shaking about to explode */
.ld-tips-item:nth-child(3) img{animation:ldCrateShake 2s ease-in-out infinite;}
@keyframes ldCrateShake{
  0%,100%{transform:rotate(0) scale(1);}
  10%{transform:rotate(-3deg) scale(1.02);}
  20%{transform:rotate(3deg) scale(1.04);}
  30%{transform:rotate(-2deg) scale(1.02);}
  40%{transform:rotate(2deg) scale(1.05);}
  45%{transform:rotate(0) scale(1.08);}
  50%{transform:rotate(0) scale(1);}
}
.ld-tips-label{font-family:'Inter',sans-serif;font-size:7px;font-weight:800;color:rgba(232,168,56,.35);letter-spacing:1.5px;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.ld-pick{position:absolute;z-index:4;pointer-events:none;width:64px;height:64px;opacity:0;}
.ld-pick img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 12px rgba(0,0,0,.8));}
.ld-pick.left{left:3%;bottom:38%;transform-origin:70% 90%;animation:ldPickL 2s ease-in-out .8s infinite;}
.ld-pick.right{right:3%;bottom:38%;transform-origin:30% 90%;animation:ldPickR 2s ease-in-out 1.3s infinite;}
.ld-pick.right img{transform:scaleX(-1);}
@keyframes ldPickL{0%,100%{opacity:.35;transform:rotate(25deg);}10%{opacity:.8;transform:rotate(-40deg);}15%{opacity:.7;transform:rotate(-32deg);}30%{opacity:.35;transform:rotate(25deg);}}
@keyframes ldPickR{0%,100%{opacity:.35;transform:rotate(-25deg);}10%{opacity:.8;transform:rotate(40deg);}15%{opacity:.7;transform:rotate(32deg);}30%{opacity:.35;transform:rotate(-25deg);}}
/* Burst */
.ld-burst{position:fixed;inset:0;z-index:30;pointer-events:none;}
.ld-burst-p{position:absolute;opacity:0;}.ld-burst-p.go{animation:ldBurstOut 1s cubic-bezier(.15,.8,.3,1) forwards;}
.ld-burst-p img{width:100%;height:100%;object-fit:contain;}
@keyframes ldBurstOut{0%{opacity:1;transform:translate(0,0) scale(.2) rotate(0);}25%{opacity:1;}100%{opacity:0;transform:translate(var(--bx),var(--by)) scale(1.2) rotate(var(--br));}}
/* Iris wipe — JS radial gradient overlay */
.ld-iris{position:fixed;inset:0;z-index:40;pointer-events:none;max-width:430px;margin:0 auto;}
/* Transition: everything fades, iris closes */
#ld-screen.wash{animation:ldScreenOut 1s ease-in forwards;}
@keyframes ldScreenOut{0%{opacity:1;}100%{opacity:0;}}
.ld-ver{position:absolute;bottom:6px;right:10px;z-index:10;font-family:'JetBrains Mono',monospace;font-size:7px;color:rgba(232,168,56,.06);}
@keyframes ldFadeUp{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:translateY(0);}}

/* ═══════════════════════════════
   APP SHELL
═══════════════════════════════ */
#app {
  position: fixed; inset: 0;
  max-width: 430px; margin: 0 auto;
  display: flex; flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 30%, rgba(232,168,56,0.05) 0%, transparent 70%),
    linear-gradient(180deg, rgba(26,18,16,0.78) 0%, rgba(18,8,10,0.74) 40%, rgba(14,6,24,0.78) 100%),
    url('shaft-bg-app.webp') center/cover;
  visibility: hidden;
}

/* Stone texture overlay */
#app::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════
   HUD — Compact Pills (Variant A)
═══════════════════════════════ */
.hud {
  flex-shrink: 0;
  padding: 6px 12px 6px;
  padding-top: calc(6px + var(--tg-safe-top, 0px));
  background: linear-gradient(180deg, rgba(16,12,8,0.97) 0%, rgba(16,12,8,0.90) 100%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative; z-index: 50;
}
/* Row 1: Logo + Stars + Settings */
.hud-row1 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.hud-logo {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.hud-logo-img { width: 44px; height: 44px; object-fit: contain; transform: rotate(-25deg); filter: drop-shadow(0 2px 6px rgba(232,168,56,0.3)); }
.hud-logo-text { display: flex; flex-direction: column; }
.hud-title {
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--gold);
  letter-spacing: 1px;
  line-height: 1;
}
.hud-sub { display: none; /* moved to hud-row2 */ }
.hud-sub img { vertical-align: middle; }
.hud-spacer { flex: 1; }
/* Stars — prominent */
.hud-stars {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: linear-gradient(135deg, rgba(245,200,66,0.1), rgba(245,200,66,0.04));
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 10px;
  cursor: pointer;
}
.hud-stars-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 800;
  color: var(--star);
}
.hud-stars-icon { font-size: 14px; }
.hud-stars-buy {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--star), #e8a020);
  border-radius: 8px;
  font-size: 16px; font-weight: 800;
  color: #1a1200;
  cursor: pointer;
  transition: all 0.15s;
}
.hud-stars-buy:active { transform: scale(0.92); }
.hud-btn-ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.hud-btn-ico svg { width: 14px; height: 14px; stroke: var(--text-dim); fill: none; stroke-width: 1.5; }
.hud-btn-ico:active { transform: scale(0.92); background: rgba(255,255,255,0.08); }
/* Row 2: Ore + Gems + XP bar */
.hud-row2 {
  display: flex; align-items: center; gap: 10px;
}
.hud-res {
  display: flex; align-items: center; gap: 4px; cursor: pointer;
}
.hud-res-img { width: 25px; height: 25px; object-fit: contain; }
.hud-res-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.hud-gems-val { color: var(--text) !important; }
/* Passive info — centered mini line */
.hud-passive-line {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 3px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.hud-passive-line img { width: 10px; height: 10px; object-fit: contain; opacity: 0.6; }
.hud-xp-mini {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 2px;
  overflow: hidden;
}
.hud-xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--copper));
  border-radius: 2px;
  transition: width 0.3s;
}
/* legacy — ore/gem icon classes still used elsewhere */
.ore-icon { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; margin: 0 2px; }
.ore-icon-sm { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; margin: 0 1px; }
.ore-icon-vein { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
.gem-icon { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; margin: 0 1px; }
.gem-icon-sm { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin: 0 1px; }
/* hidden — old mine-info-bar replaced by hud-sub */
.mine-info-bar { display: none !important; }

/* ═══════════════════════════════
   EVENT BANNER (replaces ticker)
═══════════════════════════════ */
.event-banner {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 12px;
  padding: 5px 10px;
  background: linear-gradient(90deg, rgba(232,168,56,0.06), rgba(187,134,252,0.03));
  border: 1px solid rgba(232,168,56,0.08);
  border-radius: 8px;
  position: relative; z-index: 40;
  cursor: pointer;
  transition: all 0.3s;
}
.event-banner.dismissed { display: none; }
.event-banner-dot {
  width: 5px; height: 5px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: tickerDot 2s infinite;
}
@keyframes tickerDot { 0%,100%{opacity:1} 50%{opacity:0.3} }
.event-banner-text {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-banner-close {
  font-size: 10px;
  color: var(--text-dim);
  padding: 2px;
}
/* hide old ticker */
.ticker { display: none !important; }
@keyframes tickerScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ═══════════════════════════════
   BOOM PROMO BANNER
═══════════════════════════════ */
.boom-promo {
  margin:8px 12px;
  background:linear-gradient(135deg,rgba(232,168,56,0.08),rgba(187,134,252,0.04));
  border:1.5px solid rgba(232,168,56,0.2);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.boom-promo::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(232,168,56,0.06) 50%,transparent 100%);
  animation:promoShimmer 3s ease-in-out infinite;
}
@keyframes promoShimmer {
  0%,100%{transform:translateX(-100%);}
  50%{transform:translateX(100%);}
}
.promo-gifts { display:flex; gap:4px; flex-shrink:0; }
.promo-gifts img { width:32px; height:32px; object-fit:contain; border-radius:6px; border:1px solid rgba(232,168,56,0.15); }
.promo-text { flex:1; z-index:1; }
.promo-text .promo-title { font-family:var(--font-head); font-size:11px; color:var(--gold); letter-spacing:1px; }
.promo-text .promo-sub { font-size:8px; color:var(--text-muted); margin-top:1px; }
.promo-arrow { font-size:12px; color:rgba(232,168,56,0.6); z-index:1; }

/* ═══════════════════════════════
   EVENTS TABS
═══════════════════════════════ */
.events-tabs {
  display:flex;
  gap:0;
  padding:0 12px;
  border-bottom:1.5px solid var(--border);
  overflow-x:auto;
  scrollbar-width:none;
}
.events-tabs::-webkit-scrollbar { display:none; }
.ev-tab {
  padding:8px 12px;
  font-family:var(--font-head);
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:1px;
  cursor:pointer;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:all .2s;
}
.ev-tab.active {
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.ev-tab .ev-badge {
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:7px;
  font-family:var(--font-mono);
  padding:1px 4px;
  border-radius:4px;
  margin-left:4px;
  vertical-align:middle;
}
.ev-content { display:none; padding:10px 12px; }
.ev-content.active { display:block; }
.ev-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:8px;
}
.ev-card-title {
  font-family:var(--font-head);
  font-size:10px;
  color:var(--gold);
  letter-spacing:1px;
  margin-bottom:6px;
}

/* ═══════════════════════════════
   SCREEN SYSTEM
═══════════════════════════════ */
.screens {
  flex: 1;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.screen.active { display: flex; }
.screen-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen-scroll::-webkit-scrollbar { display: none; }
.screen-pad { padding: 12px; }

/* ═══════════════════════════════
   WINNERS TICKER BAR
═══════════════════════════════ */
.winners-bar {
  flex-shrink: 0;
  height: 24px;
  overflow: hidden;
  background: rgba(20,16,12,0.92);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 49;
}
.wb-track {
  display: flex;
  align-items: center;
  height: 24px;
  white-space: nowrap;
  animation: wbScroll 30s linear infinite;
}
.wb-item {
  display: inline-block;
  font-size: 10px;
  color: var(--gold-dim);
  padding: 0 18px;
  letter-spacing: 0.3px;
}
.wb-item b {
  color: var(--gold);
  font-weight: 600;
}
@keyframes wbScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════
   NAVBAR — Warm Glow + Floating Mine
═══════════════════════════════ */
.navbar {
  flex-shrink: 0;
  display: flex; align-items: flex-end; justify-content: space-around;
  min-height: 66px;
  padding: 0 4px calc(10px + var(--tg-safe-bottom, 0px));
  background: linear-gradient(180deg, rgba(30,22,16,0.9) 0%, rgba(20,16,12,0.92) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  position: relative; z-index: 50;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.nav-item:active { transform: scale(0.9); }
.nav-item .nav-icon {
  font-size: 20px;
  line-height: 1;
  opacity: 0.35;
  transition: all 0.25s;
}
.nav-item .nav-label {
  font-family: var(--font-head);
  font-size: 8px;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  transition: all 0.25s;
}
/* Active state — amber pill + top glow */
.nav-item.active {
  background: rgba(232,168,56,0.12);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gold);
  box-shadow: 0 4px 12px rgba(232,168,56,0.4);
}
.nav-item.active .nav-icon {
  opacity: 1;
}
.nav-item.active .nav-label {
  color: var(--gold);
}
/* Center MINE tab — floating */
.nav-item.center {
  margin-top: -22px;
  padding: 0;
}
.nav-item.center .nav-icon-wrap {
  width: 50px; height: 50px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--gold), #c88820);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(232,168,56,0.35), 0 0 0 3px rgba(232,168,56,0.1);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nav-item.center .nav-icon-wrap:active {
  transform: scale(0.95);
}
.nav-item.center .nav-icon {
  font-size: 24px;
  opacity: 1;
}
.nav-item.center .nav-label {
  color: var(--gold);
  margin-top: 4px;
  font-size: 9px;
}
/* Badge */
.nav-badge {
  position: absolute;
  top: 2px; right: 4px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  background: var(--red);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid #14100c;
}

/* ═══════════════════════════════
   MINE SCREEN — Crate Bar (CR-style)
═══════════════════════════════ */
/* ═══ CRATE BAR v3 — Slots + Transform ═══ */
.cb3{margin:6px 10px;padding:10px 12px;background:var(--surface);border:1.5px solid var(--border);border-radius:14px;transition:border-color .3s,box-shadow .3s;}
.cb3.has-ready{border-color:rgba(93,170,104,.35);box-shadow:0 0 20px rgba(93,170,104,.08);animation:cb3Glow 3s ease-in-out infinite;}
@keyframes cb3Glow{0%,100%{box-shadow:0 0 12px rgba(93,170,104,.06);}50%{box-shadow:0 0 24px rgba(93,170,104,.12);}}
.cb3-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cb3-hdr-left{display:flex;align-items:center;gap:6px;}
.cb3-hdr-icon{font-size:15px;}
.cb3-hdr-title{font-family:var(--font-head);font-size:11px;color:var(--gold);letter-spacing:.5px;}
.cb3-hdr-title.ready{color:var(--green);}
.cb3-vault{padding:3px 10px;border-radius:6px;background:rgba(232,168,56,.1);border:1px solid var(--border);font-family:var(--font-head);font-size:9px;color:var(--gold);cursor:pointer;display:flex;align-items:center;gap:4px;}
.cb3-vault-n{background:var(--gold);color:var(--bg);padding:1px 5px;border-radius:8px;font-size:8px;font-weight:800;}
.cb3-slots{display:flex;gap:5px;margin-bottom:6px;}
.cb3-s{flex:1;aspect-ratio:1;border-radius:10px;border:1.5px dashed var(--border);background:rgba(255,255,255,.01);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;overflow:hidden;}
.cb3-s.has{border-style:solid;}
.cb3-s.silver{border-color:rgba(160,168,184,.3);background:rgba(160,168,184,.03);box-shadow:0 0 8px rgba(160,168,184,.06);}
.cb3-s.gold{border-color:rgba(232,168,56,.4);background:rgba(232,168,56,.04);box-shadow:0 0 12px rgba(232,168,56,.1);animation:cb3GlowGold 6s ease-in-out infinite;}
.cb3-s.epic{border-color:rgba(176,96,224,.4);background:rgba(176,96,224,.04);box-shadow:0 0 16px rgba(176,96,224,.15);animation:cb3GlowEpic 5s ease-in-out infinite;}
.cb3-s.legend{border-color:rgba(255,68,85,.5);background:rgba(255,68,85,.05);box-shadow:0 0 20px rgba(255,68,85,.18);animation:cb3GlowLeg 4s ease-in-out infinite;}
.cb3-s.locked{border:1.5px dashed var(--border);background:rgba(232,168,56,.02);}
.cb3-s.ready-s{border-color:var(--green)!important;background:rgba(93,170,104,.07)!important;animation:cb3SlotPulse 2s ease-in-out infinite!important;}
@keyframes cb3SlotPulse{0%,100%{box-shadow:0 0 0 rgba(93,170,104,0);}50%{box-shadow:0 0 14px rgba(93,170,104,.25);}}
@keyframes cb3GlowGold{0%,100%{box-shadow:0 0 10px rgba(232,168,56,.08);}50%{box-shadow:0 0 20px rgba(232,168,56,.18);}}
@keyframes cb3GlowEpic{0%,100%{box-shadow:0 0 12px rgba(176,96,224,.12);}50%{box-shadow:0 0 22px rgba(176,96,224,.25);}}
@keyframes cb3GlowLeg{0%,100%{box-shadow:0 0 16px rgba(255,68,85,.15);}50%{box-shadow:0 0 26px rgba(255,68,85,.3);}}
.cb3-img{width:80%;max-width:38px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));position:relative;z-index:1;}
.cb3-s.gold .cb3-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(232,168,56,.2));}
.cb3-s.epic .cb3-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(176,96,224,.25));}
.cb3-s.legend .cb3-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,68,85,.3));}
.cb3-s.ready-s .cb3-img{animation:cb3Bounce 1.5s ease-in-out infinite;}
@keyframes cb3Bounce{0%,100%{transform:translateY(0) rotate(0);}25%{transform:translateY(-4px) rotate(-3deg);}75%{transform:translateY(-2px) rotate(2deg);}}
.cb3-s:not(.cb3-empty):not(.locked) .cb3-img{animation:cb3Wobble 4s ease-in-out infinite;}
@keyframes cb3Wobble{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-2px) rotate(1deg);}}
.cb3-rar{font-size:7px;font-weight:800;letter-spacing:.3px;text-transform:uppercase;margin-top:2px;z-index:1;}
.cb3-s.gold .cb3-rar{color:var(--gold);}.cb3-s.silver .cb3-rar{color:rgba(160,168,184,.6);}.cb3-s.epic .cb3-rar{color:var(--purple);}.cb3-s.legend .cb3-rar{color:var(--red);}
.cb3-s.ready-s .cb3-rar{color:var(--green)!important;}
.cb3-time{font-family:var(--font-mono);font-size:7px;color:var(--text-dim);margin-top:1px;z-index:1;}
.cb3-s.ready-s .cb3-time{color:var(--green)!important;font-weight:700;}
.cb3-ring{position:absolute;top:2px;right:2px;width:20px;height:20px;z-index:2;}
.cb3-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.cb3-ring circle{fill:none;stroke-width:2.5;}
.cb3-ring .bg{stroke:rgba(255,255,255,.06);}.cb3-ring .fg{stroke:var(--green);stroke-linecap:round;transition:stroke-dashoffset .5s linear;}
/* Progress bar */
.cb3-prog{display:flex;align-items:center;gap:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.03);}
.cb3-prog-pick{font-size:11px;flex-shrink:0;animation:cb3PickSwing 1.8s ease-in-out infinite;filter:drop-shadow(0 0 2px rgba(232,168,56,.3));transform-origin:60% 70%;}
@keyframes cb3PickSwing{0%,100%{transform:rotate(0deg);}30%{transform:rotate(-20deg);}50%{transform:rotate(8deg);}60%{transform:rotate(0deg);}}
.cb3-prog-lbl{font-size:8px;color:var(--text-dim);white-space:nowrap;}
.cb3-prog-wrap{flex:1;height:8px;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden;position:relative;}
.cb3-prog-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--copper),var(--gold));position:relative;transition:width .5s;overflow:hidden;}
.cb3-prog-fill::after{content:'';position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:cb3Shimmer 3.5s ease-in-out infinite;}
@keyframes cb3Shimmer{0%{left:-40%;}100%{left:100%;}}
.cb3-prog-glow{position:absolute;right:-2px;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--gold);filter:blur(5px);opacity:.4;animation:cb3PGlow 2.5s ease-in-out infinite;}
@keyframes cb3PGlow{0%,100%{opacity:.2;transform:scale(.7);}50%{opacity:.6;transform:scale(1.2);}}
.cb3-prog-time{font-family:var(--font-mono);font-size:9px;color:var(--gold);white-space:nowrap;}
/* Ready info + CTA */
.cb3-ready-info{display:flex;gap:6px;margin-top:8px;}
.cb3-ri{flex:1;padding:5px;border-radius:8px;background:rgba(255,255,255,.02);text-align:center;}
.cb3-ri-val{font-family:var(--font-mono);font-size:11px;font-weight:700;}
.cb3-ri-lbl{font-size:7px;color:var(--text-dim);text-transform:uppercase;margin-top:1px;letter-spacing:.3px;}
.cb3-cta{margin-top:8px;padding:11px;border-radius:10px;text-align:center;background:linear-gradient(135deg,var(--green),#3a8a48);font-family:var(--font-head);font-size:13px;color:#fff;cursor:pointer;box-shadow:0 4px 16px rgba(93,170,104,.25);}
.cb3-cta:active{transform:scale(.98);}
/* Empty slot */
.cb3-add{font-size:14px;color:var(--text-dim);}.cb3-add-txt{font-size:7px;color:var(--text-dim);}
.cv2-timer{font-size:9px;font-family:var(--font-mono);color:var(--green);line-height:1.2;font-weight:700;}
.cv2-ready{font-size:9px;font-weight:800;color:var(--gold);letter-spacing:.5px;animation:cv2ReadyPulse 1s ease-in-out infinite;}
@keyframes cv2ReadyPulse{0%,100%{text-shadow:none;}50%{text-shadow:0 0 8px rgba(232,168,56,.6);}}
.cv2-count{font-size:8px;color:var(--gold-dim);font-weight:800;}
.cv2-rarity{font-size:7px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-family:var(--font-mono);}
.cv2-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 5px rgba(93,170,104,.7);animation:cv2Dot 1.2s ease-in-out infinite;}
@keyframes cv2Dot{0%,100%{opacity:1;}50%{opacity:.3;}}
.cv2-empty-icon{font-size:16px;opacity:.15;}
.cv2-full{margin:4px 0 0;padding:3px 8px;background:rgba(196,85,90,.07);border:1px solid rgba(196,85,90,.2);border-radius:var(--radius-xs);font-size:8px;color:var(--red);display:flex;align-items:center;gap:4px;}

/* ── Crate Vault Overlay ── */
#crate-vault-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);align-items:flex-end;justify-content:center;}
#crate-vault-overlay.visible{display:flex;}
#crate-vault-panel{width:100%;max-width:430px;max-height:90vh;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#1a1210;border-radius:var(--radius) var(--radius) 0 0;padding:0 0 calc(20px + var(--tg-safe-bottom, 0px));animation:cvSlideUp .25s ease;}
@keyframes cvSlideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.csv-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;background:var(--elevated);border-bottom:1px solid var(--border);flex-shrink:0;}
.csv-back{width:28px;height:28px;border-radius:var(--radius-xs);background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--gold-dim);font-size:14px;cursor:pointer;}
.csv-title{font-family:var(--font-title);font-size:18px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);}
.csv-sub{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);}
.csv-drop{margin:10px 10px 0;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.csv-drop-lbl{font-size:8px;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;display:flex;align-items:center;gap:4px;}
.csv-drop-timer{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--gold);}
.csv-drop-bar{height:3px;background:rgba(255,255,255,.05);border-radius:2px;margin-top:4px;overflow:hidden;width:80px;}
.csv-drop-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--copper),var(--gold));}
.csv-sec{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px;}
.csv-sec-lbl{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold-dim);display:flex;align-items:center;gap:5px;font-family:var(--font-label);}
.csv-sec-cnt{font-size:10px;color:var(--text-muted);font-family:var(--font-mono);}
.csv-oc{margin:0 10px;padding:12px;background:var(--surface);border-radius:var(--radius-sm);display:flex;gap:10px;align-items:center;position:relative;}
.csv-oc.silver{border:2px solid rgba(180,180,210,.35);}
.csv-oc.gold{border:2px solid rgba(232,168,56,.4);box-shadow:0 3px 16px rgba(232,168,56,.08);}
.csv-oc.epic{border:2px solid rgba(168,124,196,.4);box-shadow:0 3px 16px rgba(168,124,196,.08);}
.csv-oc.legend{border:2px solid rgba(196,85,90,.4);box-shadow:0 3px 16px rgba(196,85,90,.08);}
.csv-oc-badge{position:absolute;top:7px;right:8px;padding:2px 6px;border-radius:5px;font-size:7px;font-weight:700;letter-spacing:1px;}
.csv-oc-badge.opening{background:rgba(93,170,104,.12);border:1px solid rgba(93,170,104,.3);color:var(--green);}
.csv-oc-badge.ready{background:rgba(232,168,56,.12);border:1px solid rgba(232,168,56,.3);color:var(--gold);}
.csv-oc-img{width:58px;height:58px;object-fit:contain;flex-shrink:0;}
.csv-oc-info{flex:1;}
.csv-oc-rar{font-size:8px;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:2px;}
.csv-oc-name{font-family:var(--font-head);font-size:15px;color:var(--text);line-height:1;margin-bottom:5px;}
.csv-oc-timer{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--green);}
.csv-oc-ready{font-family:var(--font-head);font-size:16px;color:var(--gold);}
.csv-oc-prog{height:4px;background:rgba(255,255,255,.06);border-radius:3px;margin-top:5px;overflow:hidden;}
.csv-oc-prog-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),#7ae898);}
.csv-actions{padding:6px 10px 0;}
.csv-open-btn{display:block;width:100%;padding:12px;background:linear-gradient(180deg,var(--gold),var(--copper));border:none;border-top:1.5px solid rgba(255,220,100,.35);border-radius:var(--radius-xs);color:#fff;font-size:13px;font-weight:800;letter-spacing:3px;text-transform:uppercase;font-family:var(--font-head);cursor:pointer;box-shadow:0 5px 0 #3a2000,inset 0 2px 0 rgba(255,220,100,.3);}
.csv-skip-hdr{display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.csv-skip-lbl{font-size:8px;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;}
.csv-skip-row{display:flex;gap:6px;}
.csv-skip-btn{flex:1;padding:7px;border-radius:var(--radius-xs);border:none;font-size:9px;font-weight:700;font-family:var(--font-label);letter-spacing:1px;text-transform:uppercase;cursor:pointer;}
.csv-skip-gems{background:rgba(107,184,212,.08);border:1px solid rgba(107,184,212,.2);color:var(--blue);}
.csv-skip-stars{background:rgba(240,192,64,.08);border:1px solid rgba(240,192,64,.2);color:var(--star);}
.csv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:4px 10px 8px;}
.csv-sg{border-radius:var(--radius-xs);padding:8px 4px 6px;text-align:center;background:var(--surface);display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;cursor:pointer;transition:all .15s;border:2px solid var(--border);min-height:76px;justify-content:center;}
.csv-sg:active{transform:scale(.96);}
.csv-sg.silver{border-color:rgba(160,168,184,.35);box-shadow:0 0 8px rgba(160,168,184,.08);}
.csv-sg.gold{border-color:rgba(232,168,56,.45);box-shadow:0 0 12px rgba(232,168,56,.12);animation:cv2Glow 6s ease-in-out infinite;}
.csv-sg.epic{border-color:rgba(176,96,224,.5);box-shadow:0 0 16px rgba(176,96,224,.18);animation:cv2GlowEpic 5s ease-in-out infinite;}
.csv-sg.legend{border-color:rgba(255,68,85,.55);box-shadow:0 0 20px rgba(255,68,85,.22);animation:cv2GlowLegend 4s ease-in-out infinite;}
.csv-sg .csv-sg-img{position:relative;z-index:1;}
.csv-sg.gold .csv-sg-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 0 5px rgba(232,168,56,.15));}
.csv-sg.epic .csv-sg-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 0 7px rgba(176,96,224,.2));}
.csv-sg.legend .csv-sg-img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) drop-shadow(0 0 10px rgba(255,68,85,.25));}
.csv-sg.selected{box-shadow:0 0 0 2px var(--gold),0 0 14px rgba(232,168,56,.35)!important;transform:scale(1.04);}
.csv-sg.empty{opacity:.15;cursor:default;border-style:dashed;}
.csv-sg-img{width:80%;max-width:56px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.csv-sg-rar{font-size:7px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-top:1px;}
.csv-sg-time{font-size:8px;font-family:var(--font-mono);color:var(--text-dim);}
/* Vault open button on Mine screen */
.vault-quick-btn{
  position:absolute;bottom:8px;left:8px;z-index:5;
  display:flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:10px;
  background:rgba(26,18,16,.85);border:1.5px solid var(--border);
  cursor:pointer;transition:all .15s;
  font-family:var(--font-head);font-size:10px;color:var(--gold);letter-spacing:.5px;
  backdrop-filter:blur(6px);
}
.vault-quick-btn:active{transform:scale(.94);}
.vault-quick-btn .vqb-count{
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  background:var(--gold);color:var(--bg);
  min-width:18px;height:18px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.csv-selected{margin:6px 10px 0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(232,168,56,.05);border:1px solid rgba(232,168,56,.2);border-radius:var(--radius-xs);}
.csv-sel-lbl{font-size:9px;letter-spacing:1px;text-transform:uppercase;}
.csv-sel-name{font-family:var(--font-head);font-size:13px;}
.csv-merge-wrap{padding:0 10px;display:flex;flex-direction:column;gap:5px;margin-top:6px;}
.csv-merge-row{display:flex;align-items:center;gap:6px;padding:7px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xs);}
.csv-merge-row.locked{opacity:.45;}
.csv-mr-imgs{display:flex;gap:2px;}
.csv-mr-img{width:20px;height:20px;object-fit:contain;}
.csv-mr-arrow{color:var(--gold-dim);font-size:12px;}
.csv-mr-res{display:flex;align-items:center;gap:4px;flex:1;}
.csv-mr-rimg{width:24px;height:24px;object-fit:contain;}
.csv-mr-info{flex:1;}
.csv-mr-lbl{font-size:9px;color:var(--gold-dim);display:flex;align-items:center;gap:3px;}
.csv-mr-cost{font-size:7px;color:var(--copper);font-weight:700;}
.csv-mr-btn{padding:5px 10px;border-radius:7px;border:none;background:linear-gradient(180deg,var(--gold),var(--copper));color:#fff;font-size:8px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-family:var(--font-head);cursor:pointer;box-shadow:0 2px 0 #3a2000;}
.csv-merge-row.locked .csv-mr-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);box-shadow:none;cursor:default;}
.csv-no-open{margin:0 10px;padding:14px 12px;text-align:center;background:rgba(255,255,255,.02);border:1.5px dashed var(--border);border-radius:var(--radius-sm);}
.csv-no-open-ico{font-size:28px;margin-bottom:6px;opacity:.3;}
.csv-upgrade{margin:8px 10px 0;padding:10px 12px;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:var(--radius-xs);}
.csv-up-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.csv-up-lbl{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:4px;}
.csv-up-cur{font-size:9px;color:var(--text-muted);font-family:var(--font-mono);}
.csv-up-dots{display:flex;gap:3px;margin-bottom:7px;}
.csv-up-dot{width:14px;height:8px;border-radius:3px;}
.csv-up-dot.on{background:var(--gold);}
.csv-up-dot.off{background:rgba(255,255,255,.06);}
.csv-up-tiers{display:flex;gap:5px;}
.csv-up-tier{flex:1;padding:7px 6px;border-radius:var(--radius-xs);text-align:center;background:var(--surface);border:1px solid var(--border);}
.csv-up-tier.active{background:rgba(232,168,56,.08);border-color:var(--border-strong);}
.csv-up-slots{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--gold);}
.csv-up-tier-lbl{font-size:7px;color:var(--text-muted);margin-top:1px;}
.csv-up-cost{font-size:8px;font-weight:700;color:var(--star);margin-top:3px;}
.csv-up-free{font-size:8px;font-weight:700;color:var(--green);margin-top:3px;}
.csv-up-owned{font-size:7px;color:var(--text-muted);margin-top:5px;}
.csv-up-btn{margin-top:5px;padding:4px 6px;border-radius:5px;border:none;background:linear-gradient(180deg,var(--gold),var(--copper));color:#fff;font-size:7px;font-weight:800;letter-spacing:1px;font-family:var(--font-head);cursor:pointer;box-shadow:0 2px 0 #3a2000;display:block;width:100%;}
.csv-info{margin:8px 10px 0;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:var(--radius-xs);overflow:hidden;}
.csv-info-hdr{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;}
.csv-info-lbl{font-size:8px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);}
.csv-ir{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;border-bottom:1px solid var(--border);}
.csv-ir:last-child{border-bottom:none;}
.csv-ir-l{display:flex;align-items:center;gap:6px;}
.csv-ir-ico{width:20px;height:20px;object-fit:contain;}
.csv-ir-name{font-size:9px;font-weight:700;}
.csv-ir-r{text-align:right;}
.csv-ir-time{font-size:9px;font-family:var(--font-mono);color:var(--text-muted);}
.csv-ir-loot{font-size:7px;color:var(--text-dim);}
.csv-full-warn{margin:6px 10px 0;padding:6px 10px;background:rgba(196,85,90,.07);border:1px solid rgba(196,85,90,.2);border-radius:var(--radius-xs);font-size:9px;color:var(--red);display:flex;align-items:center;justify-content:space-between;gap:6px;}

/* ── Crate Open Overlay ── */
.cr-open-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;z-index:300;flex-direction:column;align-items:center;justify-content:center;}
.cr-open-overlay.visible{display:flex;}
.cr-open-crate{font-size:72px;animation:crShake .5s ease-in-out;}
@keyframes crShake{0%,100%{transform:rotate(0);}25%{transform:rotate(-10deg);}75%{transform:rotate(10deg);}}
.cr-open-label{font-size:13px;color:var(--text-muted);margin-top:10px;}
.cr-rewards{display:none;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:visible;background:var(--surface);border:2px solid var(--gold);border-radius:var(--radius);padding:30px 16px 16px;margin-top:90px;box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 40px rgba(232,168,56,0.15);animation:popIn .4s cubic-bezier(0.34,1.56,0.64,1);}
.cr-rewards.visible{display:flex;}
.cr-rewards-title{font-size:16px;font-weight:700;color:var(--text);font-family:var(--font-head);}
.cr-rewards-grid{display:flex;flex-direction:column;gap:8px;align-items:center;width:100%;}
.cr-reward{background:var(--surface);border:2px solid var(--border-strong);border-radius:var(--radius-xs);padding:10px 14px;text-align:center;min-width:70px;animation:crRewardPop .4s ease backwards;}
@keyframes crRewardPop{from{opacity:0;transform:scale(0) rotate(-15deg);}to{opacity:1;transform:scale(1) rotate(0);}}
.cr-reward:nth-child(1){animation-delay:.1s;}.cr-reward:nth-child(2){animation-delay:.3s;}.cr-reward:nth-child(3){animation-delay:.5s;}.cr-reward:nth-child(4){animation-delay:.7s;}
.cr-reward .cr-ri{font-size:24px;}.cr-reward .cr-rv{font-size:13px;font-weight:700;margin-top:3px;}.cr-reward .cr-rl{font-size:8px;color:var(--text-muted);margin-top:1px;}
.cr-reward.r1{border-color:var(--green);}.cr-reward.r2{border-color:var(--blue);}.cr-reward.r3{border-color:var(--purple);box-shadow:0 0 10px rgba(168,124,196,.2);}.cr-reward.r4{border-color:var(--star);box-shadow:0 0 12px rgba(240,192,64,.2);}
.cr-close-btn{margin-top:16px;padding:10px 28px;background:linear-gradient(135deg,var(--gold),var(--copper));color:#fff;border:none;border-radius:var(--radius-xs);font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-head);}
.cr-confetti{position:fixed;inset:0;pointer-events:none;z-index:400;}
.cr-conf{position:absolute;border-radius:2px;animation:crConfFall 2s ease-out forwards;}
@keyframes crConfFall{0%{opacity:1;transform:translateY(0) rotate(0);}100%{opacity:0;transform:translateY(500px) rotate(1080deg);}}

/* ═══════════════════════════════
   MINE SCREEN — Action Buttons
═══════════════════════════════ */
.mine-actions {
  display: flex; gap: 8px;
  padding: 8px 10px;
  flex-shrink: 0;
}
.mine-btn {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s;
}
.mine-btn:active { transform: scale(0.97); }
.mine-btn .btn-icon-area {
  width: 36px; height: 36px;
  border-radius: var(--radius-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.mine-btn.elevator .btn-icon-area { background: rgba(232,168,56,0.12); }
.mine-btn.manager .btn-icon-area { background: rgba(107,184,212,0.12); }
.mine-btn .btn-title {
  font-family: var(--font-head);
  font-size: 12px;
  color: var(--text);
}
.mine-btn .btn-sub {
  font-size: 10px;
  color: var(--text-muted);
}

/* ═══════════════════════════════
   MINE SCREEN — Shaft + Veins
═══════════════════════════════ */
.shaft-area {
  position: relative;
  overflow: hidden;
}
.shaft-area::-webkit-scrollbar { display: none; }
.shaft-inner {
  display: flex;
  min-height: min-content;
  position: relative;
}
.shaft-col {
  width: 62px;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  overflow: visible;
  z-index: 8;
  margin-left: 4px;
}
/* No rails — clean wall, cabin rides on chains only */
.rail { display: none; }
/* Center chain — HIDDEN, replaced by cabin chains */
.chain { display: none; }

/* Embedded crystals in shaft wall */
.shaft-crystal {
  position: absolute;
  z-index: 1;
  width: 0; height: 0;
}
.shaft-crystal::before {
  content: '';
  display: block;
  width: 5px; height: 8px;
  background: linear-gradient(180deg, var(--cr-color, #50c8e8), rgba(0,0,0,0.3));
  clip-path: polygon(50% 0%, 100% 40%, 80% 100%, 20% 100%, 0% 40%);
  box-shadow: 0 0 4px 1px var(--cr-glow, rgba(80,200,232,0.4));
  transform: rotate(var(--cr-rot, 0deg));
}
.shaft-crystal.big::before {
  width: 7px; height: 11px;
}
.shaft-crystal.sm::before {
  width: 3px; height: 5px;
}

/* Cross beams — wooden plank dividers with rivets */
.beam {
  position: absolute;
  left: 0;
  width: 100%;
  height: 6px;
  background:
    /* Wood grain — tight horizontal lines */
    repeating-linear-gradient(90deg,
      rgba(160,110,55,0.0) 0px,
      rgba(160,110,55,0.35) 1px,
      rgba(100,65,30,0.0) 2px,
      rgba(100,65,30,0.0) 4px,
      rgba(130,85,40,0.25) 5px,
      rgba(130,85,40,0.0) 6px,
      rgba(130,85,40,0.0) 9px,
      rgba(110,75,35,0.3) 10px,
      rgba(110,75,35,0.0) 11px,
      rgba(110,75,35,0.0) 16px
    ),
    /* Base wood gradient */
    linear-gradient(180deg,
      #9a7540 0%, #7a5a2a 25%, #6a4a22 50%, #5a3a1a 75%, #4a2a12 100%
    );
  border-top: 1px solid rgba(200,160,90,0.35);
  border-bottom: 1px solid rgba(0,0,0,0.8);
  z-index: 15;
  box-shadow: 0 2px 5px rgba(0,0,0,0.6), inset 0 1px 0 rgba(200,160,90,0.12);
}
/* Top wood highlight + grain detail */
.beam::before {
  content: '';
  position: absolute;
  top: 1px; left: 0; right: 0; height: 2px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 7px,
      rgba(220,180,100,0.15) 7px, rgba(220,180,100,0.15) 9px,
      transparent 9px, transparent 20px
    ),
    linear-gradient(180deg, rgba(200,160,90,0.1), transparent);
}
/* Rivets / bolts */
.beam::after {
  content: '';
  position: absolute;
  top: 1px;
  width: 4px; height: 4px;
  left: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a09080, #5a4a38);
  box-shadow:
    80px 0 0 0 #5a4a38,
    160px 0 0 0 #5a4a38,
    240px 0 0 0 #5a4a38,
    320px 0 0 0 #5a4a38,
    0 0 1px rgba(0,0,0,0.6),
    80px 0 1px rgba(0,0,0,0.6),
    160px 0 1px rgba(0,0,0,0.6),
    240px 0 1px rgba(0,0,0,0.6),
    320px 0 1px rgba(0,0,0,0.6);
}

.shaft-glow { display: none; }
@keyframes glowPulse {
  0% { opacity: 0.12; }
  100% { opacity: 0.25; }
}

/* Lanterns — bigger, with bracket and animated flicker */
.shaft-lantern {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 10px; height: 16px;
  z-index: 5;
}
/* Bracket arm */
.shaft-lantern::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 2px; height: 5px;
  background: #5a4a3a;
  border-radius: 1px;
}
/* Lantern body + glow */
.shaft-lantern::before {
  content: '';
  display: block;
  width: 7px; height: 9px;
  margin: 5px auto 0;
  background: radial-gradient(circle at 50% 40%, #ffe090, #e8a838 40%, #c07020 80%);
  border-radius: 2px 2px 3px 3px;
  border: 1px solid rgba(180,120,40,0.3);
  box-shadow:
    0 0 6px 3px rgba(232,168,56,0.5),
    0 0 14px 6px rgba(232,168,56,0.2),
    0 0 28px 10px rgba(232,168,56,0.08);
  animation: lanternFlicker 2s ease-in-out infinite alternate;
}
@keyframes lanternFlicker {
  0% { box-shadow: 0 0 6px 3px rgba(232,168,56,0.5), 0 0 14px 6px rgba(232,168,56,0.2), 0 0 28px 10px rgba(232,168,56,0.08); }
  50% { box-shadow: 0 0 8px 4px rgba(232,168,56,0.6), 0 0 18px 8px rgba(232,168,56,0.25), 0 0 32px 12px rgba(232,168,56,0.1); }
  100% { box-shadow: 0 0 5px 2px rgba(232,168,56,0.4), 0 0 12px 5px rgba(232,168,56,0.15), 0 0 24px 8px rgba(232,168,56,0.06); }
}

/* Water drips — animated */
.shaft-drip {
  position: absolute;
  width: 2px; height: 0;
  background: linear-gradient(180deg, transparent, rgba(100,180,220,0.6));
  z-index: 5;
  animation: drip 2.5s ease-in infinite;
  border-radius: 0 0 2px 2px;
}
@keyframes drip {
  0% { height: 0; opacity: 0; }
  10% { opacity: 1; }
  60% { height: 20px; opacity: 0.6; }
  100% { height: 30px; opacity: 0; transform: translateY(15px); }
}

/* Tiny mushrooms growing from wall */
.shaft-shroom {
  position: absolute;
  z-index: 5;
}
.shaft-shroom::before {
  content: '';
  display: block;
  width: 6px; height: 4px;
  background: radial-gradient(ellipse, #40e8a0, #20a060);
  border-radius: 50% 50% 30% 30%;
  box-shadow: 0 0 4px 1px rgba(64,232,160,0.3);
}
.shaft-shroom::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 3px;
  background: #306040;
  border-radius: 1px;
}

/* Cracks in wall */
.shaft-crack {
  position: absolute;
  z-index: 1;
  width: 15px; height: 1px;
  background: rgba(20,10,5,0.6);
  transform-origin: left;
}
.shaft-crack::before {
  content: '';
  position: absolute;
  right: 0; top: -3px;
  width: 8px; height: 1px;
  background: rgba(20,10,5,0.4);
  transform: rotate(30deg);
}

/* Depth gradient — stronger */
.shaft-depth {
  display: none; /* no shadow needed — vein bgs show through */
}

/* ═══ ELEVATOR CABIN ═══ */
.shaft-car {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 120px; height: 135px;
  z-index: 20;
  top: 0px;
  transition: top 2.8s cubic-bezier(0.4,0,0.2,1);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.9));
}
.shaft-car img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* no bob — stays connected to chains */
}
/* CSS chains from cabin top going UP */
.shaft-car::before,
.shaft-car::after {
  content: '';
  position: absolute;
  bottom: 100%;
  margin-bottom: -4px;
  width: 4px;
  height: 2000px;
  background: repeating-linear-gradient(180deg,
    #8a7a60 0px, #8a7a60 4px,
    #4a3a25 4px, #4a3a25 5px,
    #9a8a6a 5px, #9a8a6a 8px,
    #3a2a18 8px, #3a2a18 10px
  );
  border-radius: 2px;
  z-index: -1;
  opacity: 0.8;
  box-shadow: 1px 0 2px rgba(0,0,0,0.5), -1px 0 2px rgba(0,0,0,0.5);
}
.shaft-car::before {
  left: 41px;
}
.shaft-car::after {
  right: 42px;
}
/* Rivets at chain-cabin connection points */
.elevator-rivet {
  position: absolute;
  width: 14px; height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7a6a55, #4a3a28 40%, #5a4a38 60%, #3a2a18);
  border: 1.5px solid rgba(80,65,45,0.6);
  border-top-color: rgba(140,120,90,0.4);
  box-shadow:
    0 2px 3px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(180,160,130,0.2);
  z-index: 12;
  top: 2px;
}
.elevator-rivet.left { left: 35px; }
.elevator-rivet.right { right: 36px; }
.elevator-rivet::before,
.elevator-rivet::after {
  content: '';
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9a8a78, #4a3a28);
  top: 50%; transform: translateY(-50%);
}
.elevator-rivet::before { left: 1px; }
.elevator-rivet::after { right: 1px; }

/* Veins container */
.veins-col {
  flex: 1;
  position: relative;
}
.veins-col::-webkit-scrollbar { display: none; }
/* No separate fade needed — shaft overlays veins directly */

/* ═══ VEIN CARD ═══ */
.vein {
  position: relative;
  height: calc((100vh - 232px) / 4);
  min-height: 90px;
  max-height: 160px;
  flex-shrink: 0;
  overflow: visible;
  clip-path: inset(0 0 0 -66px);
  cursor: pointer;
  transition: transform 0.13s;
}
.vein:active:not(.locked) { transform: scale(0.985); }
/* Wooden beam divider — CSS, always attached to vein bottom */
.vein::after {
  content: '';
  position: absolute;
  bottom: -3px; left: -66px; right: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg,
      rgba(160,110,55,0.0) 0px,
      rgba(160,110,55,0.35) 1px, rgba(100,65,30,0.0) 2px,
      rgba(100,65,30,0.0) 4px, rgba(130,85,40,0.25) 5px,
      rgba(130,85,40,0.0) 6px, rgba(130,85,40,0.0) 9px,
      rgba(110,75,35,0.3) 10px, rgba(110,75,35,0.0) 11px,
      rgba(110,75,35,0.0) 16px
    ),
    linear-gradient(180deg, #9a7540 0%, #7a5a2a 25%, #6a4a22 50%, #5a3a1a 100%);
  border-top: 1px solid rgba(200,160,90,0.35);
  border-bottom: 1px solid rgba(0,0,0,0.8);
  z-index: 15;
  box-shadow: 0 2px 5px rgba(0,0,0,0.6), inset 0 1px 0 rgba(200,160,90,0.12);
}
.vein.locked::after { display: none; }
/* Shimmer canvas overlay */
.vein-canvas {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
}
/* Combo counter */
.tap-combo {
  position: fixed; pointer-events: none; z-index: 1001;
  font-family: var(--font-head); font-size: 22px; font-weight: 900;
  color: #ffd700; text-shadow: 0 0 15px rgba(255,215,0,0.8), 0 2px 4px rgba(0,0,0,0.9);
  transform: translate(-50%,-50%) scale(0);
  animation: comboIn 0.3s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes comboIn {
  0% { transform: translate(-50%,-50%) scale(0) rotate(-10deg); }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
}

.vein-bg {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  left: -66px;
  background-size: cover; background-position: center;
  transition: transform 0.5s;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 15%, black 30%, black 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.4) 15%, black 30%, black 100%);
}
.vein:hover .vein-bg { transform: scale(1.04); }
.vein-vig { position: absolute; inset: 0; }

/* GNOME — in bottom row flex container */
.vein-gnome-wrap {
  pointer-events: none;
  margin-bottom: -4px;
}
.vein-gnome-wrap.w2 .vein-gnome { filter: drop-shadow(0 0 12px var(--vglow, rgba(255,200,80,.55))) hue-rotate(180deg) saturate(1.2); }
.vein-gnome-wrap.w3 .vein-gnome { filter: drop-shadow(0 0 12px var(--vglow, rgba(255,200,80,.55))) hue-rotate(90deg) saturate(1.3); }
.vein-gnome {
  display: block;
  height: 95px;
  width: auto;
  object-fit: contain;
  transform-origin: bottom center;
  filter: drop-shadow(0 0 12px var(--vglow, rgba(255,200,80,.55)));
  animation: vgnomeIdle 2.4s ease-in-out infinite;
}
@keyframes vgnomeIdle {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-2px); }
  50% { transform: rotate(2deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-1px); }
}
.vein-gnome.striking {
  animation: vgnomeStrike 0.35s ease-out 1 !important;
}
@keyframes vgnomeStrike {
  0% { transform: rotate(0deg) translateX(0); }
  20% { transform: rotate(-15deg) translateX(4px) translateY(-3px); }
  45% { transform: rotate(18deg) translateX(-8px) translateY(0); }
  70% { transform: rotate(-3deg) translateX(2px); }
  100% { transform: rotate(0deg) translateX(0); }
}

/* VEIN TOP BAR — slim pill with all info in one line */
.vein-bar {
  position: absolute; top: 6px; left: 6px; right: 6px; z-index: 4;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,168,56,0.12);
  border-radius: 14px;
  padding: 4px 10px 4px 5px;
}
.vein-icon {
  width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vein-icon img { width: 24px; height: 24px; object-fit: contain; }
.vein-name {
  font-family: var(--font-head);
  font-size: 12px; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.vein-bar-spacer { flex: 1; }
.vein-rate {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.vein-workers {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  border-radius: 8px; padding: 2px 6px;
  white-space: nowrap;
}

/* Legacy compat — hide old elements */
.vein-header, .vein-header-bg, .vein-accent { display: none; }
.vein-workers-count, .vein-workers-icon { /* merged into vein-bar */ }
.vein-accum-bar { display: none; }

/* ADD WORKER BUTTON — bottom right */
/* Gnomes — absolute left-center area, on beam */
.vein-gnome-group {
  position: absolute; bottom: -2px; right: 75px; z-index: 6;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.vein-gnome-group .vein-gnome-wrap { margin-right: -28px; }
.vein-gnome-group .vein-gnome-wrap:last-child { margin-right: 0; }
/* Action button — always bottom-right */
.vein-action {
  position: absolute; bottom: 10px; right: 8px; z-index: 8;
  padding: 5px 12px; border-radius: 12px;
  font-size: 10px; font-weight: 800;
  border: 1.5px solid; cursor: pointer;
  letter-spacing: 0.3px;
  backdrop-filter: blur(6px);
}
.vact-hire {
  background: rgba(216,168,72,0.18);
  border-color: rgba(216,168,72,0.55);
  color: #f0c840;
  font-size: 10px;
  padding: 4px 10px;
}
.vact-hire:active { transform: scale(0.93); }
.vact-hire.vact-sm { padding: 4px 8px; font-size: 14px; min-width: 0; }
.vact-hire.cant-afford {
  opacity: 0.45;
  border-color: rgba(150,130,100,0.3);
  color: #a09080;
}
.vact-max {
  background: rgba(80,200,100,0.15);
  border-color: rgba(80,200,100,0.4);
  color: #50c870;
  font-size: 10px;
}

/* ═══ ' + t('blackMarket') + ' — floating trader icon ═══ */
/* Trader banner in ITEMS tab */
.trader-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(168,80,200,0.08), rgba(232,168,56,0.06));
  border: 1px solid rgba(168,80,200,0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.trader-banner:active { transform: scale(0.98); background: rgba(168,80,200,0.12); }
.trader-banner-img { width: 36px; height: 36px; object-fit: contain; }
.trader-banner-text { flex: 1; }
.trader-banner-title { font-family: var(--font-head); font-size: 13px; color: var(--purple); letter-spacing: 1px; }
.trader-banner-sub { font-size: 9px; color: var(--text-muted); }
.trader-banner-arrow { font-size: 20px; color: var(--text-dim); }

/* NEW badge on nav tab */
.nav-new-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  animation: badgePulse 1.5s ease-in-out infinite;
}
.bm-float { display: none !important; /* replaced by NEW badge */}
.bm-float-old {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 180;
  cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(168,80,200,0.25)) drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: left 8s ease-in-out, bottom 8s ease-in-out, transform 0.15s, opacity 0.3s;
  animation: bmBob 2.5s ease-in-out infinite;
}
.bm-float:active { transform: scale(0.85) !important; }
.bm-float img { width: 100%; height: 100%; object-fit: contain; }
.bm-float.dismissed { opacity: 0; transform: scale(0.3) rotate(360deg); pointer-events: none; }
@keyframes bmBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
.bm-float-badge { display:none;
  position: absolute; top: -4px; right: -4px;
  background: var(--red); color: #fff;
  font-family: var(--font-mono); font-size: 8px; font-weight: 900;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 8px rgba(196,85,90,0.5);
  animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
/* BM popup */
.bm-popup-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
  overflow: visible;
}
.bm-popup {
  background: linear-gradient(160deg, #1e1228 0%, #2a1430 40%, #1a1018 100%);
  border: 2px solid rgba(168,80,200,0.5);
  border-radius: var(--radius);
  padding: 16px 12px;
  width: 340px; max-width: 92vw;
  animation: popIn 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 40px rgba(168,80,200,0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}
.bm-popup::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(168,80,200,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(232,168,56,0.04) 0%, transparent 50%);
  animation: bmBgShift 8s ease-in-out infinite alternate;
}
@keyframes bmBgShift {
  0% { opacity:0.5; transform:scale(1); }
  100% { opacity:1; transform:scale(1.1); }
}
.bm-popup::after {
  content:'✦ ⭐ 💎 ✦ ⭐'; position:absolute; inset:0; pointer-events:none; z-index:0;
  font-size:10px; letter-spacing:20px; line-height:40px; word-spacing:30px;
  color:rgba(168,80,200,0.08); overflow:hidden;
  animation: bmSparkleScroll 20s linear infinite;
}
@keyframes bmSparkleScroll {
  0% { transform:translateY(0); }
  100% { transform:translateY(-50px); }
}
.bm-embers{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;}
@keyframes bmEmber{
  0%{transform:translateY(0) scale(1);opacity:0;}
  10%{opacity:0.6;}
  50%{opacity:0.4;transform:translateY(-120px) translateX(10px) scale(0.8);}
  100%{opacity:0;transform:translateY(-250px) translateX(-15px) scale(0.3);}
}
.bm-popup > * { position:relative; z-index:1; }
/* Trader hero — sits ON top border, half above popup */
.bm-popup { position:relative; margin-top:90px; /* room for hero overflow */ }
.bm-hero {
  position:absolute; top:-90px; left:50%; transform:translateX(-50%);
  width:175px; height:175px; z-index:10;
}
.bm-hero img {
  width:175px; height:175px; object-fit:contain;
  filter:drop-shadow(0 4px 20px rgba(168,80,200,0.5));
  animation: bmHeroFloat 3s ease-in-out infinite;
}
@keyframes bmHeroFloat { 0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.03);} }
.bm-hero-subtitle {
  position:absolute; top:105px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font);font-size:9px;font-weight:700;color:rgba(168,80,200,0.5);letter-spacing:2px;text-transform:uppercase;
}
.bm-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.bm-title { font-family: var(--font-head); font-size: 16px; color: var(--purple); display: flex; align-items: center; gap: 6px; text-shadow:0 0 12px rgba(168,80,200,0.3); }
.bm-timer { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); background: rgba(168,80,200,0.1); border: 1px solid rgba(168,80,200,0.2); border-radius: 8px; padding: 3px 8px; }
.bm-close { font-size: 20px; color: var(--text-dim); cursor: pointer; padding: 0 4px; }
.bm-items { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.bm-item { position: relative; background: linear-gradient(145deg,rgba(168,80,200,0.06),rgba(255,255,255,0.02)); border: 1.5px solid rgba(168,80,200,0.25); border-radius: var(--radius-xs); padding: 12px 8px; text-align: center; cursor: pointer; transition: all 0.15s; }
.bm-item:active { transform: scale(0.95); background: rgba(168,80,200,0.12); }
.bm-item-icon { font-size: 28px; height: 48px; display: flex; align-items: center; justify-content: center; }
.bm-item-icon img { width: 44px; height: 44px; object-fit: contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.bm-item-name { font-size: 11px; font-weight: 700; color: var(--text); margin: 6px 0 3px; }
.bm-item-old { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-decoration: line-through; }
.bm-item-price { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--star); }
.bm-item.sold { opacity: 0.3; pointer-events: none; }
.bm-item.sold::after { content: "SOLD"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 12px; color: var(--red); background: rgba(0,0,0,0.5); border-radius: var(--radius-xs); }

/* LOCKED VEIN */
.vein.locked { height: 55px; min-height: 55px; flex-shrink: 0; opacity: 0.65; cursor: pointer; overflow: visible; clip-path: inset(0 0 0 -66px); }
.vein.locked .vein-bg { filter: brightness(0.35) saturate(0.5); }
.vein-lock-overlay {
  position: absolute; top: 0; bottom: 0; left: 6px; right: 0; z-index: 4;
  display: flex; align-items: center; padding: 0 14px; gap: 10px;
}
.vlo-em { font-size: 20px; filter: grayscale(1); opacity: 0.45; }
.vlo-info { flex: 1; }
.vlo-nm { font-size: 13px; font-weight: 800; color: #907860; }
.vlo-hint { font-size: 10px; color: #604830; margin-top: 2px; }
.vlo-tag {
  background: rgba(90,70,40,0.18);
  border: 1.5px solid rgba(90,70,40,0.35);
  border-radius: 12px; padding: 5px 12px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  color: #906850; white-space: nowrap;
}

/* ═══ SUB-TAB BACK BUTTON ═══ */
.subtab-back {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
}
.subtab-back svg { opacity: 0.7; }
.subtab-back:active { opacity: 0.6; transform: translateX(-2px); }

/* ═══ POPUP CLOSE BUTTON (universal) ═══ */
.popup-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s;
}
.popup-close:active { transform: scale(0.9); background: rgba(255,255,255,0.15); }
.popup-close::before, .popup-close::after {
  content: '';
  position: absolute;
  width: 14px; height: 1.5px;
  background: var(--text-muted);
  border-radius: 1px;
}
.popup-close::before { transform: rotate(45deg); }
.popup-close::after { transform: rotate(-45deg); }

/* ═══ COACH MARKS ═══ */
.coach-spotlight{position:fixed;z-index:8999;border-radius:12px;box-shadow:0 0 0 4000px rgba(0,0,0,0.75),0 0 20px rgba(232,168,56,0.3);pointer-events:none;animation:coachSpot 2s ease-in-out infinite;}
@keyframes coachSpot{0%,100%{box-shadow:0 0 0 4000px rgba(0,0,0,0.75),0 0 15px rgba(232,168,56,0.2);}50%{box-shadow:0 0 0 4000px rgba(0,0,0,0.75),0 0 25px rgba(232,168,56,0.4);}}
.coach-overlay{position:fixed;inset:0;z-index:9000;}
.coach-bubble{position:fixed;z-index:9001;max-width:280px;background:linear-gradient(135deg,#2e2418,#1e1810);border:1.5px solid rgba(232,168,56,0.4);border-radius:14px;padding:14px 16px;box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 20px rgba(232,168,56,0.1);animation:coachPop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes coachPop{0%{transform:scale(0.7);opacity:0;}100%{transform:scale(1);opacity:1;}}
.coach-arrow{position:absolute;width:0;height:0;}
.coach-arrow.up{top:-8px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid rgba(232,168,56,0.4);}
.coach-arrow.down{bottom:-8px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid rgba(232,168,56,0.4);}
.coach-icon{font-size:28px;margin-bottom:6px;}
.coach-title{font-family:var(--font-head);font-size:14px;color:var(--gold);margin-bottom:4px;}
.coach-text{font-size:12px;color:rgba(240,228,212,0.8);line-height:1.5;margin-bottom:10px;}
.coach-btn{display:inline-block;padding:6px 20px;background:linear-gradient(135deg,var(--gold),#c87a20);border-radius:10px;font-family:var(--font-head);font-size:12px;color:#1a1210;cursor:pointer;}
.coach-btn:active{transform:scale(0.95);}
.coach-step{font-family:var(--font-mono);font-size:8px;color:rgba(232,168,56,0.3);margin-top:8px;}
/* ═══ LOCKED VEIN POPUP ═══ */
.locked-vein-popup-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s;
}
.locked-vein-popup {
  background: var(--elevated);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 24px 20px;
  width: 280px;
  text-align: center;
  position: relative;
  animation: popIn 0.25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.lvp-close { /* legacy — use .popup-close instead */
  position: absolute; top: 8px; right: 12px;
  font-size: 22px; color: var(--text-muted); cursor: pointer;
  display: none; /* hidden — replaced by .popup-close */
}
.lvp-icon { margin-bottom: 8px; }
.lvp-icon img { width: 48px; height: 48px; object-fit: contain; }
.lvp-name { font-family: var(--font-head); font-size: 18px; margin-bottom: 4px; }
.lvp-rate { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.lvp-divider { height: 1px; background: var(--border); margin: 0 -20px 12px; }
.lvp-req-title { font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.lvp-req {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--red);
  padding: 6px 0;
}
.lvp-req.met { color: var(--green); }
.lvp-unlock-btn {
  margin-top: 16px; padding: 10px 20px;
  background: linear-gradient(135deg, var(--gold), var(--copper));
  border-radius: 12px;
  font-family: var(--font-head); font-size: 14px; color: #1a1210;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(232,168,56,0.3);
}
.lvp-unlock-btn:active { transform: scale(0.96); }
.lvp-hint { margin-top: 12px; font-size: 12px; color: var(--text-dim); }

/* ═══ TAP REWARDS ═══ */
.tap-fly {
  position: fixed; pointer-events: none; z-index: 999;
  font-family: var(--font-mono); font-size: 22px; font-weight: 900;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(232,168,56,0.8), 0 0 16px rgba(232,168,56,0.4), 0 2px 4px rgba(0,0,0,0.9);
  display: flex; align-items: center; gap: 4px;
}
.tap-fly img {
  width: 28px; height: 28px;
  filter: drop-shadow(0 0 6px rgba(232,168,56,0.7)) drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
.ore-particle {
  position: fixed;
  width: 28px; height: 28px;
  object-fit: contain;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 0 8px rgba(232,168,56,0.8)) drop-shadow(0 0 16px rgba(232,168,56,0.4));
}
.tap-ripple {
  position: absolute; width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid rgba(232,168,56,0.5);
  transform: translate(-50%,-50%) scale(0);
  animation: rippleOut 0.4s ease-out forwards;
  pointer-events: none; z-index: 8;
}
@keyframes rippleOut {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2); opacity: 0; }
}
.tap-gem-flash {
  position: fixed; inset: 0; pointer-events: none; z-index: 997;
  background: radial-gradient(circle at var(--fx) var(--fy), rgba(107,184,212,0.5), rgba(168,85,247,0.15) 40%, transparent 70%);
  animation: gemFlash 0.8s ease-out forwards;
}
@keyframes gemFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.tap-gem-hold {
  position: fixed; pointer-events: none; z-index: 1000;
  font-size: 28px; font-weight: 900; font-family: var(--font-head);
  color: #7ec8e8;
  text-shadow: 0 0 20px rgba(107,184,212,0.9), 0 0 40px rgba(107,184,212,0.5), 0 2px 6px rgba(0,0,0,0.9);
  white-space: nowrap;
  transform: translate(-50%,-50%) scale(0);
  animation: gemHold 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes gemHold {
  0% { transform: translate(-50%,-50%) scale(0); }
  100% { transform: translate(-50%,-50%) scale(1.15); }
}
.hud-coin.pulse {
  animation: hudPulse 0.4s ease-out;
}
@keyframes hudPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ═══════════════════════════════
   BOOM SCREEN
═══════════════════════════════ */
.boom-screen.active { display: flex; flex-direction: column; overflow: hidden; }
.boom-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background:var(--bg); }
.boom-scroll::-webkit-scrollbar { display: none; }

/* Sub-tabs */
.boom-tabs {
  display: flex; gap: 6px;
  padding: 10px 12px 6px;
}
.boom-tab {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.boom-tab-icon { width:16px; height:16px; object-fit:contain; vertical-align:middle; }
.boom-tab.active {
  background: rgba(232,168,56,0.15);
  border-color: var(--gold);
  color: var(--gold);
}
.boom-tab .lock { font-size: 9px; opacity: 0.5; }

/* ═══ BANDIT WHEEL ═══ */
.bandit-content { display:none; flex-direction:column; flex:1; overflow:hidden; }
.bandit-content.show { display:flex; }
.bd-topbar { display:flex; align-items:center; gap:8px; padding:6px 10px; background:transparent; flex-shrink:0; }
.bd-back { font-family:var(--font-head); font-size:16px; color:var(--gold); cursor:pointer; padding:2px 10px; border:1px solid var(--border); border-radius:8px; background:rgba(0,0,0,0.3); flex-shrink:0; line-height:28px; }
.bd-back:active { opacity:0.6; }
.bd-fuse { flex:1; height:30px; position:relative; background:rgba(10,8,6,0.3); border-radius:15px; overflow:visible; border:1px solid rgba(200,160,80,0.08); }
.bd-fuse canvas { position:absolute; left:-4px; top:-8px; width:calc(100% + 8px); height:46px; display:block; pointer-events:none; }
.bd-fuse-status { text-align:center; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); height:14px; line-height:14px; }
.bd-fuse-status.bet { color:rgba(112,192,48,0.6); }
.bd-fuse-status.locked { color:rgba(255,104,48,0.6); }
.bd-fuse-status.spin { color:rgba(232,168,56,0.6); }
.bd-fuse.hidden { opacity:0; pointer-events:none; transition:opacity .3s; }
.bd-wheel-zone { flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:0; width:100%; filter:drop-shadow(0 0 28px rgba(180,120,20,0.25)); }
.bd-wheel-wrap { position:relative; display:inline-flex; }
#bd-wheel { width:min(88vw, calc(100dvh - 340px), 360px); height:min(88vw, calc(100dvh - 340px), 360px); display:block; }
.bd-result { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:rgba(26,18,16,0.97); border-radius:14px; padding:12px 24px; text-align:center; pointer-events:none; transition:transform .3s cubic-bezier(0.34,1.5,0.64,1); z-index:10; min-width:130px; border:1.5px solid var(--border-strong); box-shadow:0 8px 40px rgba(0,0,0,0.8); }
.bd-result.show { transform:translate(-50%,-50%) scale(1); }
.bd-result .rlabel { font-size:9px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.bd-result .rbig { font-size:36px; font-weight:700; line-height:1; text-shadow:0 2px 14px currentColor; }
.bd-result .rsub { font-size:13px; color:var(--text-dim); margin-top:10px; line-height:2; font-weight:700; }
.bd-controls { width:100%; flex-shrink:0; display:flex; flex-direction:column; gap:5px; padding:7px 12px 10px; background:rgba(26,18,16,0.82); border-top:1px solid var(--border); }
.bd-picks { display:flex; gap:5px; }
.bd-pick {
  position:relative; flex:1; height:50px; border-radius:9px; border:2px solid transparent;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:transform .12s,border-color .12s; font-family:var(--font-head);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.15),inset 0 -2px 0 rgba(0,0,0,0.3),0 2px 6px rgba(0,0,0,0.4);
}
.bd-pick:active { transform:scale(0.92)!important; }
.bd-pick::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:7px; background:repeating-linear-gradient(125deg,transparent 0,transparent 4px,rgba(0,0,0,0.07) 4px,rgba(0,0,0,0.07) 5px); }
.bd-pick .pmult { font-size:20px; font-weight:700; line-height:1; letter-spacing:1px; }
.bd-pick.has-bet { border-color:var(--gold)!important; box-shadow:0 0 12px rgba(232,168,56,0.45),inset 0 2px 0 rgba(255,255,255,0.15); transform:scale(1.05); }
.bd-pick .badge { position:absolute; top:-6px; right:-6px; background:var(--gold); color:#120e00; font-size:8px; font-weight:700; font-family:var(--font-mono); border-radius:8px; padding:2px 5px; display:none; box-shadow:0 1px 4px rgba(0,0,0,0.5); }
.bd-pick.has-bet .badge { display:block; }
.bd-pc-1  { background:linear-gradient(145deg,#ddd060,#a09020); color:#1a1600; }
.bd-pc-3  { background:linear-gradient(145deg,#70c048,#4a8828); color:#0a1a04; }
.bd-pc-5  { background:linear-gradient(145deg,#5898d0,#2c5888); color:#040c18; }
.bd-pc-10 { background:linear-gradient(145deg,#b878d0,#784898); color:#0e0416; }
.bd-pc-20 { background:linear-gradient(145deg,#d85020,#902810); color:#1a0404; }
.bd-hint { font-size:9px; color:var(--text-muted); letter-spacing:1px; text-transform:uppercase; text-align:center; min-height:13px; }
.bd-hint.active { color:var(--gold); }
.bd-amount-row { display:flex; align-items:stretch; gap:5px; }
.bd-qchips { display:flex; gap:4px; flex:1; }
.bd-qc { flex:1; padding:9px 0; text-align:center; background:var(--surface); border:1.5px solid var(--border); border-radius:7px; color:var(--gold); font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-mono); transition:background .1s; }
.bd-qc:active { background:rgba(232,168,56,0.18); transform:scale(0.94); }
.bd-qc.sel { background:rgba(232,168,56,0.18); border-color:var(--border-strong); }
.bd-input-wrap { display:flex; align-items:center; gap:6px; background:rgba(0,0,0,0.5); border:1.5px solid var(--border); border-radius:7px; padding:4px 10px; min-width:90px; }
.bd-input-wrap span { font-size:11px; color:var(--text-muted); }
.bd-input-wrap input { background:transparent; border:none; outline:none; color:var(--gold); font-size:18px; font-weight:700; font-family:var(--font-mono); width:50px; text-align:right; -moz-appearance:textfield; }
.bd-input-wrap input::-webkit-outer-spin-button,
.bd-input-wrap input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bd-phase { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:6px; border:1px solid; font-family:var(--font-mono); }
.bd-phase.open { color:#88d040; border-color:rgba(80,160,30,.4); background:rgba(20,40,4,0.6); }
.bd-phase.closed { color:var(--red); border-color:rgba(160,30,20,.4); background:rgba(60,10,5,0.6); }
.bd-phase.spinning { color:var(--gold); border-color:rgba(200,150,30,.35); background:rgba(50,35,4,0.6); }
.bd-history { display:flex; flex-direction:column; gap:3px; max-height:80px; overflow-y:auto; scrollbar-width:none; }
.bd-history::-webkit-scrollbar { display:none; }
.bd-hist-label { font-size:8px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; font-family:var(--font-mono); }

/* ═══ HOOK GAME ═══ */
#hook-content { display:none; position:relative; overflow:hidden; }
#hook-content.show { display:block !important; height:calc(100dvh - 92px); /* viewport - tab bar 56px - boom tabs 36px */ }
#hook-content canvas { display:block; }
.hk-overlay.hidden{display:none !important;}
@keyframes hkPulse{0%,100%{opacity:.3;transform:translateX(-50%) translateY(0);}50%{opacity:.8;transform:translateX(-50%) translateY(-5px);}}

/* ═══ MINES GAME ═══ */
.mines-content { display:none; flex-direction:column; flex:1; background:var(--bg); }
.mines-content.show { display:flex; }
.boom-main-content { display:flex; flex-direction:column; }
.boom-main-content.hide { display:none; }

.mg-top { display:flex; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--border); }
.mg-top-block { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; }
.mg-top-block:first-child { border-right:1px solid var(--border); }
.mg-top-val { font-family:var(--font-mono); font-size:20px; font-weight:900; color:var(--text); }
.mg-top-val.gold { color:var(--gold); text-shadow:0 0 8px rgba(232,168,56,0.35); }
.mg-top-lbl { font-size:7px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); }

.mg-game { flex:1; display:flex; flex-direction:column; padding:10px; overflow:hidden; }
.mg-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; aspect-ratio:1; max-width:320px; margin:0 auto; width:100%; }
.mg-cell {
  aspect-ratio:1; border-radius:10px;
  background:linear-gradient(135deg,var(--elevated),var(--surface));
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s; font-size:18px; position:relative;
}
.mg-cell:active { transform:scale(.9); }
.mg-cell.revealed { cursor:default; pointer-events:none; }
.mg-cell.safe { background:linear-gradient(135deg,rgba(232,168,56,.15),rgba(232,168,56,.05)); border-color:rgba(232,168,56,.3); animation:mgCellReveal .3s ease-out; }
.mg-cell.mine { background:linear-gradient(135deg,rgba(232,64,64,.2),rgba(232,64,64,.08)); border-color:rgba(232,64,64,.4); animation:mgCellReveal .3s ease-out; }
.mg-cell.mine-dim { background:rgba(232,64,64,.08); border-color:rgba(232,64,64,.15); opacity:.5; }
.mg-cell.pulsing { animation:mgCellPulse 1.5s infinite; }
@keyframes mgCellReveal { from{transform:scale(.7) rotateY(90deg);opacity:0} to{transform:scale(1) rotateY(0);opacity:1} }
@keyframes mgCellPulse { 0%,100%{border-color:var(--border)} 50%{border-color:rgba(232,168,56,.4);box-shadow:0 0 10px rgba(232,168,56,.1)} }
@keyframes mgShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }
.mg-shake { animation:mgShake .4s ease-in-out; }

.mg-road { display:flex; gap:3px; padding:6px 10px; overflow-x:auto; scrollbar-width:none; }
.mg-road::-webkit-scrollbar { display:none; }
.mr-step { padding:3px 6px; border-radius:6px; background:var(--surface); border:1px solid var(--border); font-family:var(--font-mono); font-size:9px; font-weight:700; color:var(--text-muted); text-align:center; white-space:nowrap; transition:all .2s; flex-shrink:0; }
.mr-step.current { background:rgba(232,168,56,.12); border-color:var(--gold); color:var(--gold); box-shadow:0 0 8px rgba(232,168,56,.2); }
.mr-step.reached { background:rgba(111,207,151,.1); border-color:rgba(111,207,151,.3); color:#6fcf97; }

.mg-result { position:absolute; inset:0; background:rgba(26,18,16,.92); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:12px; opacity:0; pointer-events:none; transition:opacity .3s; z-index:10; }
.mg-result.show { opacity:1; pointer-events:auto; }
.mg-res-emoji { font-size:48px; margin-bottom:6px; }
.mg-res-title { font-family:var(--font-head); font-size:20px; color:var(--red); margin-bottom:4px; }
.mg-res-title.win { color:#6fcf97; }
.mg-res-val { font-family:var(--font-mono); font-size:18px; font-weight:900; }
.mg-res-sub { font-size:11px; color:var(--text-muted); }

.mg-action { background:linear-gradient(0deg,var(--bg) 0%,var(--surface) 100%); border-top:1px solid var(--border); padding:8px 12px 12px; }
.mg-bet-label { font-size:8px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.mg-bet-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.mg-adj { width:36px; height:36px; border-radius:10px; background:rgba(232,168,56,.12); border:1px solid rgba(232,168,56,.25); color:var(--gold); font-size:18px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.mg-adj:active { transform:scale(.9); background:rgba(232,168,56,.25); }
.mg-bet-input { flex:1; width:60px; padding:8px; background:rgba(26,18,16,.8); border:1.5px solid rgba(232,168,56,.2); border-radius:10px; text-align:center; font-family:var(--font-mono); font-size:20px; font-weight:900; color:var(--gold); -moz-appearance:textfield; outline:none; }
.mg-bet-input::-webkit-outer-spin-button,.mg-bet-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.mg-bet-input:focus { border-color:var(--gold); box-shadow:0 0 8px rgba(232,168,56,.3); }
.mg-bet-star { font-size:18px; margin-left:-4px; }
.mg-chips { display:flex; gap:4px; margin-bottom:8px; }
.mg-chip { flex:1; padding:6px 2px; background:var(--surface); border:1px solid var(--border); border-radius:8px; text-align:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-dim); cursor:pointer; transition:all .15s; }
.mg-chip:active { transform:scale(.93); }
.mg-chip.on { background:rgba(232,168,56,.12); border-color:var(--gold); color:var(--gold); }
.mg-mines-row { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.mg-mines-label { font-size:8px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.mg-mine-chips { display:flex; gap:4px; flex:1; }
.mg-mchip { flex:1; padding:6px 2px; background:var(--surface); border:1px solid var(--border); border-radius:8px; text-align:center; font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--text-dim); cursor:pointer; transition:all .15s; }
.mg-mchip:active { transform:scale(.93); }
.mg-mchip.on { background:rgba(232,64,64,.1); border-color:rgba(232,64,64,.4); color:var(--red); }
.mg-mchip.danger { color:var(--red); font-weight:800; }
.mg-btn { width:100%; padding:14px; border-radius:var(--radius); border:none; font-family:var(--font-head); font-size:15px; letter-spacing:1px; cursor:pointer; transition:all .15s; margin-bottom:6px; }
.mg-btn:active { transform:scale(.97); }
.mg-btn.play { background:linear-gradient(135deg,var(--gold),var(--amber)); color:var(--bg); box-shadow:0 4px 16px rgba(232,168,56,.35); }
.mg-btn.cashout { background:linear-gradient(135deg,#6fcf97,#4caf50); color:#fff; box-shadow:0 4px 16px rgba(111,207,151,.35); animation:mgCashPulse 1.5s infinite; }
@keyframes mgCashPulse { 0%,100%{box-shadow:0 4px 16px rgba(111,207,151,.35)} 50%{box-shadow:0 4px 28px rgba(111,207,151,.6),0 0 0 4px rgba(111,207,151,.1)} }
.mg-extras { display:flex; justify-content:space-between; align-items:center; }
.mg-free { font-size:11px; font-weight:700; color:var(--teal); cursor:pointer; padding:4px 8px; border-radius:8px; background:rgba(141,218,247,.08); }
.mg-welcome-overlay { position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; padding:20px; }
.mg-welcome-card { background:var(--elevated); border:1.5px solid var(--border-strong); border-radius:var(--radius); padding:28px 24px; text-align:center; max-width:320px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.mg-fair { font-size:10px; color:var(--text-muted); cursor:pointer; }
.mg-hist { display:flex; gap:3px; justify-content:center; padding:4px 0; }
.mg-dot { width:8px; height:8px; border-radius:50%; }
.mg-dot.w { background:#6fcf97; }
.mg-dot.l { background:var(--red); }

/* ═══ TOAST NOTIFICATIONS ═══ */
.toast-container {
  position:fixed; top:60px; left:50%; transform:translateX(-50%);
  z-index:500; display:flex; flex-direction:column; gap:6px;
  pointer-events:none; max-width:400px; width:calc(100% - 24px);
}
.toast {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px;
  background:rgba(36,28,20,0.95); backdrop-filter:blur(10px);
  border:1.5px solid var(--border-strong);
  box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(232,168,56,0.1);
  animation:toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1), toastOut 0.3s ease-in forwards;
  pointer-events:auto; cursor:pointer;
}
.toast.warn { border-color:rgba(232,64,64,0.4); box-shadow:0 8px 24px rgba(0,0,0,0.5), 0 0 20px rgba(232,64,64,0.15); }
.toast-icon { font-size:28px; flex-shrink:0; }
.toast-icon img { width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.toast-body { flex:1; }
.toast-title { font-family:var(--font-head); font-size:11px; color:var(--gold); margin-bottom:1px; }
.toast.warn .toast-title { color:var(--red); }
.toast-msg { font-size:10px; color:var(--text-dim); line-height:1.3; }
@keyframes toastIn { from{transform:translateY(-20px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes toastOut { 0%,85%{opacity:1;} 100%{opacity:0;transform:translateY(-10px);} }

/* ═══ BOOM MACHINE ═══ */
.boom-machine {
  margin: 10px 12px;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.boom-machine::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 0%, rgba(232,168,56,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.boom-title {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 0 20px rgba(232,168,56,0.3);
}

/* 5 Astral Shard Drums — LARGE */
.boom-drums {
  display: flex; gap: 6px; justify-content: center;
  padding: 14px 2px;
}
.boom-drum {
  flex: 1;
  max-width: 72px;
  height: 92px;
  background: rgba(0,0,0,0.35);
  border: 2.5px solid rgba(120,80,30,0.25);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.boom-drum img.shard-img {
  width: 60px; height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  transition: transform 0.3s;
}
/* Hidden — face down */
.boom-drum.hidden {
  background: linear-gradient(135deg, rgba(120,80,30,0.2), rgba(80,50,15,0.3));
  border-color: rgba(120,80,30,0.4);
}
.boom-drum.hidden img.shard-img { visibility: hidden; }
.boom-drum.hidden::after {
  content: '?';
  font-family: var(--font-head);
  font-size: 22px;
  color: var(--gold-dim);
  position: absolute;
}
/* Landing */
@keyframes drumLand {
  0% { transform: scale(0.4) rotateY(90deg); opacity: 0; }
  60% { transform: scale(1.12) rotateY(0deg); }
  80% { transform: scale(0.94); }
  100% { transform: scale(1); opacity: 1; }
}
.boom-drum.landing { animation: drumLand 0.4s cubic-bezier(.175,.885,.32,1.275) both; }
/* Ready to pick */
@keyframes drumPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.07);} }
.boom-drum.ready {
  cursor: pointer;
  animation: drumPulse 0.8s ease-in-out infinite;
  border-color: rgba(232,168,56,0.4);
}
.boom-drum.ready:active { transform: scale(0.88); }
/* Chosen — bigger + highlighted */
.boom-drum.chosen {
  cursor: default;
  animation: none;
  transform: scale(1.2);
  z-index: 5;
}
.boom-drum.dimmed {
  opacity: 0.18;
  filter: grayscale(0.8);
  cursor: default;
  animation: none;
  transform: scale(0.85);
}
/* Rarity glows */
.boom-drum.g-common   { border-color:#8899bb; box-shadow:0 0 12px rgba(136,153,187,0.4); }
.boom-drum.g-uncommon { border-color:var(--green); box-shadow:0 0 14px rgba(93,170,104,0.5); }
.boom-drum.g-rare     { border-color:var(--blue); box-shadow:0 0 16px rgba(107,184,212,0.5); }
.boom-drum.g-epic     { border-color:var(--purple); box-shadow:0 0 20px rgba(168,124,196,0.6); }
.boom-drum.g-legendary{ border-color:var(--gold); box-shadow:0 0 24px rgba(232,168,56,0.7),0 0 50px rgba(232,168,56,0.2); }
/* Reveal flash */
@keyframes drumFlash { 0%,100%{background:rgba(0,0,0,0.35);} 50%{background:rgba(232,168,56,0.2);} }
.boom-drum.revealing { animation: drumFlash 0.25s ease-in-out 2; }

/* ═══ SPIN MODE SELECTOR ═══ */
.boom-mode-row {
  display: flex; gap: 8px; padding: 8px 12px;
}
.boom-mode-card {
  flex: 1;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.boom-mode-card.active {
  border-color: var(--gold);
  background: rgba(232,168,56,0.08);
}
.boom-mode-card .mode-icon { font-size: 16px; }
.boom-mode-card .mode-name {
  font-family: var(--font-head);
  font-size: 10px;
}
.boom-mode-card .mode-cost {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ═══ AUTO SELECTOR ═══ */
.boom-auto-section {
  padding: 0 12px 8px;
  display: flex; gap: 6px; align-items: center; justify-content: center;
}
.boom-auto-pill {
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.boom-auto-pill.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(232,168,56,0.1);
}
.boom-auto-pill.custom-input {
  padding: 5px 8px;
  min-width: 50px;
}
.boom-auto-pill input {
  width: 36px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  outline: none;
}
.boom-auto-pill input::placeholder { color: var(--text-dim); }

/* ═══ WIN POPUP — mascot, confetti everywhere ═══ */
.win-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 500;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
}
.win-overlay.show { display: flex; }
.win-popup {
  width: 330px;
  max-height: 82vh;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 30px 16px 16px;
  margin-top: 90px; /* push popup down to make room for mascot above */
  text-align: center;
  position: relative;
  overflow: visible;
  animation: popIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(232,168,56,0.15);
  cursor: default;
}
@keyframes popIn { from{transform:scale(0.5);opacity:0;} to{transform:scale(1);opacity:1;} }

/* Mascot sticker — overlapping popup border, ABOVE confetti and everything */
.win-mascot {
  position: absolute;
  top: -115px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px; height: 140px;
  z-index: 600;
  pointer-events: none;
}
.win-mascot img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.9));
}

/* Confetti — two layers */
/* Background confetti: behind popup, full screen, BEHIND mascot */
.win-confetti-bg {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 199; /* below overlay (200) */
}
/* Popup confetti: subtle on popup surface */
.win-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  border-radius: var(--radius);
  overflow: hidden;
}
.win-content {
  position: relative;
  z-index: 6;
  max-height: calc(82vh - 50px);
  overflow: visible;
}

.win-shard-img {
  width: 56px; height: 56px;
  object-fit: contain;
  margin: 0 auto 4px;
  display: block;
  filter: none; /* no shadow — clean, no overlap with mascot */
  opacity: 0.85;
}
.win-title {
  font-family: var(--font-head);
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 8px;
}
/* Prize list — compact */
.win-prizes {
  text-align: left;
  margin-bottom: 8px;
  max-height: 180px;
  overflow-y: auto;
}
.win-prize-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-xs);
  margin-bottom: 3px;
}
.win-prize-row .wp-icon { font-size: 16px; flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.win-prize-row .wp-icon img { width: 100%; height: 100%; object-fit: contain; }
.win-prize-row .wp-text {
  flex: 1;
  font-family: var(--font);
  font-size: 11px;
}
.win-prize-row .wp-rarity {
  font-family: var(--font-mono);
  font-size: 7px;
  padding: 2px 5px;
  border-radius: 4px;
}
/* Equip prompt — compact */
.win-equip-section {
  background: rgba(93,170,104,0.08);
  border: 1px solid rgba(93,170,104,0.2);
  border-radius: var(--radius-xs);
  padding: 8px;
  margin-bottom: 8px;
  display: none;
}
.win-equip-section.show { display: block; }
.win-equip-name {
  font-family: var(--font-head);
  font-size: 12px;
  margin-bottom: 3px;
}
.win-equip-compare {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--green);
}
.win-equip-btn {
  width: 100%;
  padding: 9px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), #c88820);
  color: #1a1210;
  margin-top: 6px;
}
.win-equip-btn:active { transform: scale(0.97); }
/* Tap to close hint */
.win-tap-hint {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 8px;
  animation: hintBlink 2s ease-in-out infinite;
}
@keyframes hintBlink { 0%,100%{opacity:0.4;} 50%{opacity:1;} }

/* ═══ DOUBLE IT section ═══ */
.win-double-section {
  background: linear-gradient(135deg, rgba(232,168,56,0.12), rgba(200,136,32,0.08));
  border: 1px solid rgba(232,168,56,0.35);
  border-radius: var(--radius-xs);
  padding: 10px;
  margin-bottom: 8px;
  text-align: center;
  animation: doubleGlow 1.5s ease-in-out infinite;
}
@keyframes doubleGlow {
  0%,100% { box-shadow: 0 0 8px rgba(232,168,56,0.15); }
  50% { box-shadow: 0 0 18px rgba(232,168,56,0.35); }
}
.win-double-title {
  font-family: var(--font-head);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 4px;
  text-shadow: 0 0 8px rgba(232,168,56,0.4);
}
.win-double-prize {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}
.win-double-desc {
  font-family: var(--font-label);
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.win-double-btns {
  display: flex;
  gap: 8px;
}
.win-double-btn {
  flex: 1;
  padding: 10px 8px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 12px;
  cursor: pointer;
}
.win-double-btn.btn-double {
  background: linear-gradient(135deg, var(--gold), #c88820);
  color: #1a1210;
  animation: pulseBtn 1.2s ease-in-out infinite;
}
@keyframes pulseBtn {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.win-double-btn.btn-double:active { transform: scale(0.95); }
.win-double-btn.btn-collect {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
}
.win-double-btn.btn-collect:active { transform: scale(0.95); }
.win-double-result {
  font-family: var(--font-head);
  font-size: 14px;
  margin-top: 8px;
  padding: 6px;
  border-radius: var(--radius-xs);
}
.win-double-result.win {
  color: var(--green);
  background: rgba(93,170,104,0.12);
}
.win-double-result.lose {
  color: var(--red, #c4555a);
  background: rgba(196,85,90,0.12);
}

/* ═══ AD SPIN overlay ═══ */
.ad-spin-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn .2s ease;
}
.ad-spin-popup {
  background: var(--card-bg, #1e1a15);
  border: 1px solid rgba(232,168,56,0.3);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  max-width: 300px;
  width: 100%;
}
.ad-spin-title {
  font-family: var(--font-head);
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 6px;
}
.ad-spin-desc {
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 14px;
}
.ad-spin-countdown {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 14px;
  animation: hintBlink 1s ease-in-out infinite;
}
.ad-spin-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.ad-spin-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 13px;
  cursor: pointer;
}
.ad-spin-btn.btn-watch {
  background: linear-gradient(135deg, #4a90d9, #357abd);
  color: #fff;
}
.ad-spin-btn.btn-watch:active { transform: scale(0.95); }
.ad-spin-btn.btn-cancel {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.15);
}
.ad-spin-btn.btn-cancel:active { transform: scale(0.95); }
.ad-spin-limit {
  font-family: var(--font-label);
  font-size: 9px;
  color: var(--text-dim);
}

.win-share-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--gold), var(--copper));
  border: none;
  border-top: 1.5px solid rgba(255,220,100,.35);
  border-radius: 10px;
  color: #1a0800;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  box-shadow: 0 3px 0 #3a2000, inset 0 2px 0 rgba(255,220,100,.3);
}

/* Last win */
.boom-last-win {
  text-align: center;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-xs);
  margin-bottom: 4px;
}
.boom-last-win .label {
  font-family: var(--font-label);
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.boom-last-win .prize {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}

/* Spin buttons */
.boom-buttons {
  display: flex; gap: 8px;
  padding: 10px 12px;
}
.boom-spin-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.boom-spin-btn:active { transform: scale(0.96); }
.boom-spin-btn.free {
  background: linear-gradient(135deg, var(--blue), #5098b0);
  color: #fff;
  box-shadow: 0 4px 16px rgba(107,184,212,0.3);
}
.boom-spin-btn.premium {
  background: linear-gradient(135deg, var(--gold), #c88820);
  color: #1a1210;
  box-shadow: 0 4px 16px rgba(232,168,56,0.3);
}
.boom-spin-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}
/* Auto amount toggle */
.boom-auto-row {
  display: flex; justify-content: center; gap: 6px;
  padding: 0 12px 8px;
}
.auto-pill {
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
}
.auto-pill.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(232,168,56,0.1);
}

/* Prize table */
.boom-prizes-section { padding: 8px 12px; }
.boom-prizes-label {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.boom-prizes-scroll {
  display: flex; gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.boom-prizes-scroll::-webkit-scrollbar { display: none; }
.boom-prize-card {
  flex-shrink: 0;
  width: 65px;
  padding: 6px 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  text-align: center;
}
.boom-prize-card .p-icon { font-size: 16px; }
.boom-prize-card .p-name {
  font-family: var(--font-label);
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 4px;
}
.boom-prize-card .p-tag {
  font-family: var(--font-mono);
  font-size: 7px;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 3px;
}
.p-tag.common { background: rgba(160,160,160,0.15); color: #aaa; }
.p-tag.uncommon { background: rgba(93,170,104,0.15); color: var(--green); }
.p-tag.rare { background: rgba(107,184,212,0.15); color: var(--blue); }
.p-tag.epic { background: rgba(168,124,196,0.15); color: var(--purple); }
.p-tag.legendary { background: rgba(232,168,56,0.15); color: var(--gold); }

/* Recent wins */
.boom-history { padding: 8px 12px 16px; }
.boom-history-label {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.boom-history-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px;
  background: var(--surface);
  border-radius: var(--radius-xs);
  margin-bottom: 4px;
}
.boom-history-item .h-icon { font-size: 16px; }
.boom-history-item .h-text {
  flex: 1;
  font-family: var(--font);
  font-size: 11px;
}
.boom-history-item .h-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}

/* ═══════════════════════════════
   WIN POPUP OVERLAY
═══════════════════════════════ */
.win-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  animation: fadeIn 0.3s;
}
.win-overlay.show { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.win-popup {
  width: 300px;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  position: relative;
  animation: popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(232,168,56,0.15);
}
@keyframes popIn {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* ═══════════════════════════════
   EVENTS SCREEN
═══════════════════════════════ */
/* Daily Streak */
.streak-section { padding: 10px 12px; }
.streak-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.streak-title { font-family: var(--font-head); font-size: 13px; color: var(--gold); }
.streak-bonus { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.streak-days {
  display: flex; gap: 3px;
}
.streak-day {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 1px;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 1.5px solid var(--border);
  transition: all 0.2s;
}
.streak-day.claimed {
  border-color: var(--green);
  background: rgba(93,170,104,0.08);
}
.streak-day.today {
  border-color: var(--gold);
  background: rgba(232,168,56,0.1);
  box-shadow: 0 0 10px rgba(232,168,56,0.15);
}
.streak-day.today.claimable {
  animation: streakPulse 1.5s ease-in-out infinite;
}
@keyframes streakPulse { 0%,100%{box-shadow:0 0 8px rgba(232,168,56,0.15);} 50%{box-shadow:0 0 16px rgba(232,168,56,0.35);} }
.streak-day.locked { opacity: 0.35; }
.streak-day .sd-num { font-family: var(--font-mono); font-size: 7px; color: var(--text-dim); }
.streak-day .sd-icon { font-size: 14px; line-height: 1; }
.streak-day .sd-reward { font-family: var(--font-mono); font-size: 6px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.streak-day .sd-reward .ore-icon { width: 10px; height: 10px; }
.streak-day.claimed .sd-icon::after { content: ' ✓'; font-size: 9px; color: var(--green); }
.streak-day.special { border-color: var(--purple); }
.streak-day.special .sd-icon { font-size: 14px; }

/* Daily Missions */
.missions-section { padding: 6px 12px; }
.missions-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.missions-title { font-family: var(--font-head); font-size: 13px; color: var(--gold); }
.missions-bonus-text { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }

.mission-card {
  background: var(--surface);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
  transition: all 0.2s;
}
.mission-card.completed {
  border-color: rgba(93,170,104,0.3);
  opacity: 0.6;
}
.mission-card .mc-icon { font-size: 22px; flex-shrink: 0; }
.mission-card .mc-info { flex: 1; min-width: 0; }
.mission-card .mc-name { font-family: var(--font); font-size: 12px; font-weight: 600; }
.mission-card .mc-progress {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.mission-card .mc-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--copper));
  transition: width 0.3s;
}
.mission-card .mc-stat {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  margin-top: 2px;
}
.mission-card .mc-reward {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-align: right;
}
.mission-card .mc-check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff;
}

/* All Complete Bonus */
.missions-all-bonus {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
  margin-bottom: 8px;
}
.missions-all-bonus.ready {
  border-color: var(--gold);
  background: rgba(232,168,56,0.08);
}
.missions-all-bonus .mab-text {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text-muted);
}
.missions-all-bonus.ready .mab-text { color: var(--gold); }
.missions-all-bonus .mab-btn {
  margin-top: 6px;
  padding: 8px 20px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), #c88820);
  color: #1a1210;
  display: none;
}
.missions-all-bonus.ready .mab-btn { display: inline-block; }

/* Tournament */
.tournament-section { padding: 6px 12px; }
.tournament-card {
  background: var(--surface);
  border: 2px solid rgba(232,168,56,0.25);
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.tournament-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 10% 50%, rgba(232,168,56,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.tourn-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.tourn-title { font-family: var(--font-head); font-size: 14px; color: var(--gold); }
.tourn-timer { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.tourn-rank {
  text-align: center;
  margin-bottom: 10px;
}
.tourn-rank .rank-num {
  font-family: var(--font-head);
  font-size: 28px;
  color: var(--gold);
}
.tourn-rank .rank-of {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.tourn-prizes {
  display: flex; gap: 6px; justify-content: center;
  margin-bottom: 10px;
}
.tourn-prize {
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: rgba(0,0,0,0.2);
  text-align: center;
}
.tourn-prize .tp-medal { font-size: 14px; }
.tourn-prize .tp-reward { font-family: var(--font-mono); font-size: 9px; color: var(--gold); }
.tourn-btn {
  width: 100%;
  padding: 10px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 12px;
  cursor: pointer;
  background: var(--elevated);
  color: var(--text);
}

/* Permanent Missions */
.perm-section { padding: 6px 12px 16px; }
.perm-title { font-family: var(--font-head); font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.perm-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.perm-card .pc-icon { font-size: 20px; flex-shrink: 0; }
.perm-card .pc-info { flex: 1; }
.perm-card .pc-name { font-family: var(--font); font-size: 11px; font-weight: 600; }
.perm-card .pc-reward { font-family: var(--font-mono); font-size: 9px; color: var(--gold); }
.perm-card .pc-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong);
  background: var(--elevated);
  font-family: var(--font-head);
  font-size: 9px;
  color: var(--gold);
  cursor: pointer;
}

/* ═══════════════════════════════
   ITEMS SCREEN
═══════════════════════════════ */
/* Character + equipment slots */
/* ── Blueprint Schematic ── */
.char-section {
  padding: 12px;
}
.blueprint-panel {
  background: linear-gradient(135deg, rgba(60,48,30,0.5), rgba(40,32,20,0.4));
  border: 1.5px solid rgba(232,168,56,0.25);
  border-radius: var(--radius);
  padding: 12px 10px 8px;
  position: relative;
  overflow: hidden;
}
.blueprint-panel::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(232,168,56,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,168,56,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.blueprint-title {
  font-family: var(--font-head);
  font-size: 10px;
  color: var(--gold);
  text-align: center;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  opacity: 0.7;
}
.blueprint-body {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
/* Center character — fitted within panel */
.char-avatar-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.char-avatar {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.char-avatar img {
  max-width: 88%;
  max-height: 94%;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
}
/* Equipment slots — 4 corners like reference */
.equip-slot-helmet { position: absolute; top: 8px; left: 8px; z-index: 5; }
.equip-slot-pick   { position: absolute; top: 8px; right: 8px; z-index: 5; }
.equip-slot-belt   { position: absolute; bottom: 8px; left: 8px; z-index: 5; }
.equip-slot-boots  { position: absolute; bottom: 8px; right: 8px; z-index: 5; }
/* Solid bg so slots pop over gnome */
[class^="equip-slot-"] > .equip-slot {
  background: rgba(26,18,12,0.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
[class^="equip-slot-"] > .equip-slot.empty { opacity: 0.7; }
/* Dotted connecting lines (SVG overlay on blueprint-body) */
.blueprint-lines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}
/* Equipment slot cards */
.equip-slot {
  width: 140px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.equip-slot:active { transform: scale(0.95); }
.equip-slot .slot-icon {
  font-size: 26px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  overflow: hidden;
}
.equip-slot .slot-icon img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.equip-slot .slot-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.equip-slot .slot-name {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.equip-slot .slot-bonus {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Rarity borders */
.equip-slot.r-common   { border-color: #888; }
.equip-slot.r-uncommon { border-color: var(--green); box-shadow: 0 0 8px rgba(93,170,104,0.25); }
.equip-slot.r-rare     { border-color: var(--blue); box-shadow: 0 0 8px rgba(107,184,212,0.25); }
.equip-slot.r-epic     { border-color: var(--purple); box-shadow: 0 0 10px rgba(168,124,196,0.3); }
.equip-slot.r-legendary{ border-color: var(--gold); box-shadow: 0 0 12px rgba(232,168,56,0.35); }
.equip-slot.empty { border-style: dashed; opacity: 0.45; }
.equip-slot.empty.has-upgrade { opacity: 0.8; }
.equip-slot.empty .slot-name { color: var(--text-dim); }
/* Upgrade arrow — shown when better gear available */
.slot-upgrade {
  position: absolute; top: -7px; right: -5px;
  width: 22px; height: 22px;
  background: var(--green);
  color: #fff;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(93,170,104,0.5);
  animation: upgradeGlow 1.5s ease-in-out infinite;
}
@keyframes upgradeGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(93,170,104,0.4); }
  50% { box-shadow: 0 0 14px rgba(93,170,104,0.7); }
}
.equip-slot.has-upgrade { position: relative; border-color: var(--green) !important; }

/* Equip upgrade popup */
.eup-compare {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px 0;
}
.eup-item { text-align: center; width: 100px; }
.eup-icon {
  width: 52px; height: 52px; margin: 0 auto 6px;
  border-radius: 10px; border: 2px solid var(--border);
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; overflow: hidden;
}
.eup-icon img { width: 100%; height: 100%; object-fit: contain; }
.eup-name { font-size: 10px; font-weight: 700; margin-bottom: 2px; }
.eup-bonus { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.eup-empty .eup-icon { border-style: dashed; opacity: 0.4; }
.eup-empty .eup-name { color: var(--text-dim); }
.eup-arrow { font-size: 24px; color: var(--green); font-weight: 900; }
.eup-diff {
  text-align: center; font-family: var(--font-mono); font-size: 13px;
  color: var(--green); font-weight: 800; margin: 4px 0 12px;
}
.eup-btn {
  text-align: center; padding: 10px 20px;
  background: linear-gradient(135deg, var(--green), #3a8a48);
  border-radius: 12px; font-family: var(--font-head); font-size: 13px;
  color: #fff; cursor: pointer;
  box-shadow: 0 4px 16px rgba(93,170,104,0.3);
}
.eup-btn:active { transform: scale(0.96); }

/* Combat power bar */
.combat-power {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border-radius: var(--radius-sm);
}
.combat-label {
  font-family: var(--font-head);
  font-size: 9px;
  color: var(--copper);
  letter-spacing: 1px;
}
.char-stats {
  display: flex; gap: 8px;
}
.char-stat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
}
.char-stat b { color: var(--gold); }

/* Inventory grid */
.inv-section { padding: 4px 12px; }
.inv-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.inv-title { font-family: var(--font-head); font-size: 13px; color: var(--gold); }
.inv-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.inv-item {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  overflow: hidden;
  padding: 4px;
}
.inv-item img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.inv-item:active { transform: scale(0.92); }
/* Rarity colors */
.inv-item.r-common   { border-color: rgba(136,136,136,0.3); }
.inv-item.r-uncommon { border-color: rgba(93,170,104,0.4); }
.inv-item.r-rare     { border-color: rgba(107,184,212,0.4); }
.inv-item.r-epic     { border-color: rgba(168,124,196,0.5); }
.inv-item.r-legendary{ border-color: rgba(232,168,56,0.5); box-shadow: 0 0 8px rgba(232,168,56,0.2); }
/* Dupe badge */
.inv-item .inv-dupe {
  position: absolute;
  top: 2px; right: 2px;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  background: rgba(0,0,0,0.6);
  color: var(--text);
  padding: 1px 4px;
  border-radius: 4px;
}
/* Type icon */
.inv-item .inv-type {
  position: absolute;
  bottom: 2px; left: 2px;
  font-size: 9px;
  opacity: 0.4;
}
/* Equipped marker */
.inv-item.equipped::after {
  content: '✓';
  position: absolute;
  top: 2px; left: 2px;
  font-size: 10px;
  color: var(--green);
}

/* Smelt section */
.smelt-section { padding: 8px 12px 16px; }
.smelt-header { text-align:center; margin-bottom:8px; }
.smelt-header-icon { font-size:28px; }
.smelt-header-title { font-family:var(--font-head); font-size:14px; color:var(--copper); }
.smelt-header-sub { font-size:9px; color:var(--text-muted); }
.smelt-slots { display:flex; flex-direction:column; gap:6px; }
.smelt-row {
  background:var(--surface); border-radius:12px; border:1px solid var(--border);
  padding:8px 10px; display:flex; align-items:center; gap:8px;
  transition:all .2s; position:relative; overflow:hidden;
}
.smelt-row.ready { border-color:rgba(196,85,90,0.4); box-shadow:0 0 10px rgba(196,85,90,0.1); }
.smelt-row.ready::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(196,85,90,0.05),transparent); pointer-events:none; }
.sr-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; border:1.5px solid; }
.sr-icon.r0 { background:rgba(170,170,170,0.08); border-color:rgba(170,170,170,0.25); }
.sr-icon.r1 { background:rgba(93,170,104,0.08); border-color:rgba(93,170,104,0.25); }
.sr-icon.r2 { background:rgba(107,184,212,0.08); border-color:rgba(107,184,212,0.25); }
.sr-icon.r3 { background:rgba(168,124,196,0.08); border-color:rgba(168,124,196,0.25); }
.sr-info { flex:1; }
.sr-name { font-size:11px; font-weight:700; margin-bottom:2px; }
.sr-rtag { font-family:var(--font-mono); font-size:7px; padding:1px 4px; border-radius:3px; margin-left:3px; font-weight:700; }
.sr-rtag.r0 { background:rgba(170,170,170,0.12); color:#aaa; }
.sr-rtag.r1 { background:rgba(93,170,104,0.12); color:#5daa68; }
.sr-rtag.r2 { background:rgba(107,184,212,0.12); color:#6bb8d4; }
.sr-rtag.r3 { background:rgba(168,124,196,0.12); color:#a87cc4; }
.sr-bar { height:5px; background:rgba(255,255,255,0.05); border-radius:3px; overflow:hidden; }
.sr-bar-fill { height:100%; border-radius:3px; transition:width .3s; }
.sr-bar-fill.r0 { background:#aaa; } .sr-bar-fill.r1 { background:#5daa68; }
.sr-bar-fill.r2 { background:#6bb8d4; } .sr-bar-fill.r3 { background:#a87cc4; }
.sr-count { font-family:var(--font-mono); font-size:10px; font-weight:700; text-align:right; margin-top:1px; }
.sr-count.full { color:#6fcf97; }
.sr-arrow { font-size:12px; color:var(--copper); flex-shrink:0; }
.sr-result-icon { width:24px; height:24px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; border:1px solid; flex-shrink:0; opacity:0.4; }
.smelt-row.ready .sr-result-icon { opacity:1; }
.smelt-btn-wrap { margin-top:8px; }
.smelt-btn {
  width:100%; padding:12px; border-radius:12px; border:none;
  font-family:var(--font-head); font-size:13px; letter-spacing:1px; cursor:pointer; transition:all .15s;
}
.smelt-btn:active { transform:scale(.96); }
.smelt-btn.active { background:linear-gradient(135deg,#c4555a,#a04048); color:#fff; box-shadow:0 4px 12px rgba(196,85,90,0.3); }
.smelt-btn.off { background:var(--elevated); color:var(--text-muted); pointer-events:none; }
.smelt-count { font-family:var(--font-mono); font-size:9px; color:var(--text-muted); text-align:center; margin-top:4px; }
/* Forge animation overlay */
.forge-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(10,6,4,0.92); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.forge-overlay.show { opacity:1; pointer-events:auto; }
.forge-furnace { font-size:72px; margin-bottom:12px; animation:forgeGlow 1s ease-in-out infinite alternate; }
@keyframes forgeGlow { 0%{filter:brightness(1);transform:scale(1)} 100%{filter:brightness(1.3);transform:scale(1.08)} }
.forge-fly-items { display:flex; gap:4px; flex-wrap:wrap; justify-content:center; max-width:260px; min-height:36px; }
.forge-fly {
  width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:14px; border:1px solid rgba(170,170,170,0.3); background:rgba(170,170,170,0.08);
  animation:forgeItemFly .7s ease-in forwards;
}
@keyframes forgeItemFly { 0%{transform:translateY(0) scale(1);opacity:1} 70%{transform:translateY(-35px) scale(.6);opacity:.5} 100%{transform:translateY(-55px) scale(0);opacity:0} }
.forge-sparks { display:flex; gap:3px; margin:8px 0; }
.forge-spark { width:4px; height:4px; border-radius:50%; background:var(--gold); animation:forgeSpark .5s ease-out infinite; }
@keyframes forgeSpark { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-18px) translateX(var(--dx));opacity:0} }
/* Info hints */
.info-hint {
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--text-dim);
  padding: 4px 8px;
  background: rgba(232,168,56,0.06);
  border-left: 2px solid rgba(232,168,56,0.2);
  border-radius: 0 6px 6px 0;
  margin: 4px 12px;
  line-height: 1.4;
}
.info-hint b { color: var(--gold); font-weight: 600; }

.smelt-desc {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.smelt-btn {
  padding: 10px 24px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 13px;
  cursor: pointer;
  background: linear-gradient(135deg, #c4555a, #a04048);
  color: #fff;
  box-shadow: 0 4px 12px rgba(196,85,90,0.3);
}
.smelt-btn:active { transform: scale(0.96); }
.smelt-btn:disabled { opacity: 0.4; pointer-events: none; }
.smelt-ready {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Item detail popup */
.item-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display: none;
  align-items: center; justify-content: center;
}
.item-popup-overlay.show { display: flex; }
.item-popup {
  width: 280px;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
}
.item-popup .ip-icon { font-size: 40px; margin-bottom: 8px; width: 80px; height: 80px; margin-left: auto; margin-right: auto; }
.item-popup .ip-icon img { width: 100%; height: 100%; object-fit: contain; }
.item-popup .ip-name { font-family: var(--font-head); font-size: 15px; margin-bottom: 4px; }
.item-popup .ip-stat { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.item-popup .ip-btns { display: flex; gap: 8px; }
.item-popup .ip-btn {
  flex: 1;
  padding: 9px;
  border-radius: var(--radius-xs);
  border: none;
  font-family: var(--font-head);
  font-size: 11px;
  cursor: pointer;
}
.ip-btn.equip-btn { background: linear-gradient(135deg, var(--gold), #c88820); color: #1a1210; }
.ip-btn.unequip-btn { background: var(--elevated); color: var(--text); }

/* No emoji decorations on popup */
}
.win-prize-stat {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.win-compare {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 10px;
  background: rgba(93,170,104,0.1);
  border: 1px solid rgba(93,170,104,0.2);
  border-radius: var(--radius-xs);
  color: var(--green);
  margin-bottom: 14px;
  display: none;
}
.win-compare.show { display: block; }
.win-equip-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 14px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), #c88820);
  color: #1a1210;
  box-shadow: 0 4px 12px rgba(232,168,56,0.3);
  margin-bottom: 8px;
  display: none;
}
.win-equip-btn.show { display: block; }
.win-equip-btn:active { transform: scale(0.97); }
.win-ok-btn {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  border: none;
  font-family: var(--font-head);
  font-size: 14px;
  cursor: pointer;
  background: var(--elevated);
  color: var(--text);
}
.win-ok-btn:active { transform: scale(0.97); }
.win-dismiss {
  font-family: var(--font-label);
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 8px;
  cursor: pointer;
  display: none;
}
.win-dismiss.show { display: block; }

/* ═══════════════════════════════
   PLACEHOLDER SCREENS
═══════════════════════════════ */
.placeholder {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 12px;
  opacity: 0.3;
}
.placeholder-icon { font-size: 48px; }
.placeholder-text {
  font-family: var(--font-head);
  font-size: 16px;
}

/* ═══ PROFILE ═══ */
.prof-scroll { padding: 12px; overflow-y: auto; flex: 1; }
.prof-card {
  background: var(--surface);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px 16px;
  text-align: center;
  position: relative;
}
.prof-avatar {
  width: 150px; height: 150px;
  margin: 0 auto 8px;
  position: relative;
}
.prof-avatar::before {
  content: '';
  position: absolute; inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,168,56,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.prof-avatar img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(232,168,56,0.25)); }
.prof-level {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold), var(--copper));
  padding: 3px 12px;
  border-radius: 12px;
  font-family: var(--font-head);
  font-size: 11px;
  color: #1a1210;
  margin-bottom: 6px;
}
.prof-name {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--text);
  margin-bottom: 4px;
  cursor: pointer;
}
.prof-name:hover { color: var(--gold); }
.prof-xp-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  margin-bottom: 3px;
}
.prof-xp-bar {
  height: 6px;
  background: rgba(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.prof-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--copper));
  border-radius: 3px;
  transition: width 0.4s;
}
.prof-equip-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.prof-eq-slot {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
/* Stats grid */
.prof-sec-title {
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  margin: 16px 0 8px;
}
.prof-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.prof-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
}
.prof-stat-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.prof-stat-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  margin-top: 2px;
}
.prof-stat-group-title {
  font-family: var(--font-head);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  margin: 10px 0 4px;
  padding-left: 2px;
}
/* Referral */
.prof-ref-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.prof-ref-code {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  cursor: pointer;
}
.prof-ref-stats {
  display: flex;
  gap: 16px;
  margin: 10px 0;
}
.prof-ref-stat { text-align: center; flex: 1; }
.prof-ref-stat-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.prof-ref-stat-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.prof-share-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--gold), var(--copper));
  color: #1a1210;
  font-family: var(--font-head);
  font-size: 13px;
  cursor: pointer;
}
.prof-share-btn:active { transform: scale(0.97); }
/* Stars section */
.prof-stars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1.5px solid rgba(232,168,56,0.2);
  border-radius: var(--radius);
  padding: 14px;
}
.prof-stars-count {
  display: flex; align-items: center; gap: 8px;
}
.prof-stars-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--star);
}
.prof-stars-lbl {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
}
.prof-buy-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--star);
  border-radius: var(--radius-sm);
  background: rgba(232,168,56,0.1);
  color: var(--star);
  font-family: var(--font-head);
  font-size: 11px;
  cursor: pointer;
}
.prof-settings {
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
}
.prof-settings:hover { color: var(--gold); }

/* ═══ Settings Popup ═══ */
.settings-overlay{position:fixed;inset:0;z-index:900;background:rgba(0,0,0,0.6);opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;}
.settings-overlay.open{opacity:1;pointer-events:auto;}
.settings-popup{background:#1a1210;border:1.5px solid var(--border);border-radius:16px;padding:16px;width:260px;transform:translateY(-10px) scale(0.95);transition:transform .2s;box-shadow:0 8px 32px rgba(0,0,0,0.5);}
.settings-overlay.open .settings-popup{transform:translateY(0) scale(1);}
.stp-title{font-family:var(--font-head);font-size:14px;color:var(--text);text-align:center;margin-bottom:14px;}
.stp-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.stp-row:last-child{border-bottom:none;}
.stp-label{font-family:var(--font-body);font-size:12px;color:var(--text-dim);display:flex;align-items:center;gap:6px;}
.stp-toggle{width:42px;height:24px;border-radius:12px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;position:relative;transition:background .2s,border-color .2s;}
.stp-toggle.on{background:rgba(93,170,104,0.25);border-color:var(--green);}
.stp-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-dim);transition:transform .2s,background .2s;}
.stp-toggle.on::after{transform:translateX(18px);background:var(--green);}
.stp-lang{display:flex;gap:4px;}
.stp-lang-btn{padding:5px 10px;border-radius:8px;border:1.5px solid var(--border);background:var(--surface);color:var(--text-dim);font-family:var(--font-body);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.stp-lang-btn.active{border-color:var(--gold);color:var(--gold);background:rgba(232,168,56,0.08);}
.stp-ver{text-align:center;font-size:8px;color:var(--text-dim);margin-top:10px;opacity:0.5;}

/* Currency Info Tooltip */
@keyframes ciTipIn { from { opacity:0; transform:translateY(-6px) scale(0.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.ci-tip-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;}
.ci-tip{position:fixed;z-index:10000;max-width:260px;background:#1a1210;border:1.5px solid var(--gold);border-radius:12px;padding:12px;box-shadow:0 8px 32px rgba(0,0,0,0.6);animation:ciTipIn .2s ease-out;}
.ci-tip-title{font-family:var(--font-head);font-size:14px;color:var(--gold);margin-bottom:6px;}
.ci-tip-lbl{font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-top:6px;margin-bottom:2px;}
.ci-tip-txt{font-size:11px;color:var(--text);line-height:1.5;}
.ci-tip-btn{display:inline-block;margin-top:8px;padding:6px 12px;border:none;border-radius:8px;background:linear-gradient(180deg,var(--gold),var(--copper));color:#fff;font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-family:var(--font-head);cursor:pointer;box-shadow:0 2px 0 #3a2000;}
.ci-tip-rate{font-family:var(--font-mono);font-size:10px;color:var(--green);margin-top:4px;}
.ci-tip-xpbar{height:5px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin:4px 0;}
.ci-tip-xpbar>div{height:100%;background:var(--gold);border-radius:3px;transition:width .3s;}

/* ═══════════════════════════════
   BATTLE PASS — "THE MINE"
═══════════════════════════════ */
.bp-header {
  text-align:center;
  padding:12px 0 8px;
  background:linear-gradient(180deg, rgba(30,20,10,0.95), transparent);
}
.bp-title {
  font-family:var(--font-title);
  font-size:28px;
  color:var(--gold);
  letter-spacing:4px;
  text-shadow:0 2px 12px rgba(232,168,56,0.4);
}
.bp-season {
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-muted);
  letter-spacing:1px;
  margin-top:2px;
}

/* XP progress */
.bp-xp-bar-wrap {
  padding:8px 0 12px;
}
.bp-xp-label {
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--text-muted);
  letter-spacing:1px;
  margin-bottom:4px;
  text-align:center;
}
.bp-xp-bar {
  height:8px;
  background:rgba(255,255,255,0.06);
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--border);
}
.bp-xp-fill {
  height:100%;
  background:linear-gradient(90deg, var(--copper), var(--gold));
  border-radius:4px;
  transition:width 0.4s ease;
  box-shadow:0 0 8px rgba(232,168,56,0.3);
}

/* Level track */
.bp-track {
  display:flex;
  flex-direction:column;
  gap:0;
  padding:4px 0 16px;
}

.bp-row {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 4px;
  border-left:3px solid rgba(232,168,56,0.1);
  margin-left:20px;
  position:relative;
  transition:all 0.2s;
}
.bp-row-current {
  border-left-color:var(--gold);
  background:rgba(232,168,56,0.06);
  border-radius:0 10px 10px 0;
  box-shadow:0 0 16px rgba(232,168,56,0.1);
}
.bp-row-current .bp-depth {
  color:var(--gold);
  text-shadow:0 0 8px rgba(232,168,56,0.5);
  animation:bpPulse 2s ease-in-out infinite;
}
.bp-row-locked {
  opacity:0.4;
}
.bp-row-milestone {
  border-left-width:4px;
  padding:8px 4px;
}

@keyframes bpPulse {
  0%,100% { text-shadow:0 0 8px rgba(232,168,56,0.3); }
  50% { text-shadow:0 0 16px rgba(232,168,56,0.7); }
}

/* Depth label */
.bp-depth {
  font-family:var(--font-title);
  font-size:16px;
  color:var(--text-dim);
  min-width:36px;
  text-align:right;
  letter-spacing:1px;
}

/* Reward boxes */
.bp-reward {
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  flex:1;
  min-height:32px;
  position:relative;
}
.bp-reward-free {
  border-color:rgba(232,168,56,0.2);
}
.bp-reward-prem {
  border-color:rgba(168,124,196,0.3);
  background:rgba(168,124,196,0.06);
}
.bp-locked-prem {
  opacity:0.5;
}
.bp-reward.bp-claimed {
  opacity:0.5;
  background:rgba(255,255,255,0.02);
}
.bp-reward-icon {
  flex-shrink:0;
}
.bp-reward-icon img {
  width:18px;
  height:18px;
  object-fit:contain;
}
.bp-reward-text {
  font-family:var(--font-mono);
  font-size:9px;
  color:var(--text);
  white-space:nowrap;
}
.bp-check {
  font-size:12px;
  color:var(--green);
  margin-left:auto;
}
.bp-lock-icon {
  font-size:10px;
  margin-left:auto;
}

/* Claim button */
.bp-claim-btn {
  margin-left:auto;
  padding:3px 8px;
  border:1.5px solid var(--gold);
  border-radius:6px;
  background:rgba(232,168,56,0.1);
  color:var(--gold);
  font-family:var(--font-head);
  font-size:8px;
  letter-spacing:1px;
  cursor:pointer;
  transition:all 0.2s;
  white-space:nowrap;
}
.bp-claim-btn:active {
  background:rgba(232,168,56,0.3);
  transform:scale(0.95);
}
.bp-claim-prem {
  border-color:var(--purple);
  color:var(--purple);
  background:rgba(168,124,196,0.1);
}
.bp-claim-prem:active {
  background:rgba(168,124,196,0.3);
}

/* Premium banner */
.bp-premium-banner {
  margin:8px 0;
  padding:14px;
  background:linear-gradient(135deg, rgba(168,124,196,0.12), rgba(232,168,56,0.08));
  border:1.5px solid rgba(168,124,196,0.3);
  border-radius:12px;
  text-align:center;
  cursor:pointer;
  transition:all 0.2s;
}
.bp-premium-banner:active {
  transform:scale(0.98);
  border-color:var(--purple);
}
.bp-prem-title {
  font-family:var(--font-head);
  font-size:14px;
  color:var(--purple);
  letter-spacing:2px;
  margin-bottom:4px;
}
.bp-prem-cost {
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--gold);
  margin-bottom:4px;
}
.bp-prem-cost img {
  width:14px;
  height:14px;
  vertical-align:middle;
}
.bp-prem-desc {
  font-size:9px;
  color:var(--text-muted);
}
.bp-premium-active {
  margin:8px 0;
  padding:10px;
  background:rgba(168,124,196,0.08);
  border:1px solid rgba(168,124,196,0.2);
  border-radius:10px;
  text-align:center;
}
.bp-premium-active .bp-prem-title {
  color:var(--purple);
  margin-bottom:0;
}

/* Badge on PASS tab */
.bp-badge {
  background:var(--purple) !important;
}

/* Connector line between rows */
.bp-connector {
  position:absolute;
  left:-3px;
  top:-6px;
  width:3px;
  height:6px;
  background:rgba(232,168,56,0.1);
}
.bp-connector-active {
  background:var(--gold);
}