/* ═══════════════════════════════════════════════════════════
   IDLEFORGE GAME CENTER + BLOODFORGE (monster slayer)
   Loaded alongside game.css. Scoped under .sl-theme / .hub-shell.
═══════════════════════════════════════════════════════════ */

:root {
  --sl-bg:      #0a0608;
  --sl-bg2:     #160b10;
  --sl-card:    #1c0e15;
  --sl-accent:  #c81e3a;
  --sl-ember:   #ff7a1a;
  --sl-soul:    #5ad1ff;
  --sl-stone:   #ff2e63;
  --sl-text:    #e8dfe2;
  --sl-text2:   #9a8a90;
  --sl-gold:    #ffd23c;
}

/* ══════════════ HUB LAUNCHER ══════════════ */
.hub-shell {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 480px; margin: 0 auto;
  background:
    radial-gradient(ellipse at 50% -10%, #2a0d16 0%, transparent 60%),
    linear-gradient(180deg, #0a0608 0%, #05030a 100%);
  color: var(--sl-text);
  overflow-y: auto;
}

.hub-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 6px;
}
.hub-brand { display: flex; align-items: center; gap: 10px; }
.hub-logo {
  font-size: 30px;
  filter: drop-shadow(0 0 10px var(--sl-ember));
}
.hub-brand-name {
  font-size: 20px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(90deg, #fff, var(--sl-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hub-brand-sub {
  font-size: 9px; letter-spacing: 4px; color: var(--sl-text2); margin-top: -2px;
}
.hub-tagline {
  text-align: center; color: var(--sl-text2);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  padding: 4px 0 14px;
}

.hub-grid {
  display: flex; flex-direction: column; gap: 14px;
  padding: 0 16px 16px;
  flex: 1;
}

.hub-card {
  position: relative;
  border: none; text-align: left; cursor: pointer;
  border-radius: 18px; overflow: hidden;
  background: var(--sl-card);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
  padding: 0;
  transition: transform .15s, box-shadow .15s;
  flex: 1; min-height: 150px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hub-card:not(.locked):active { transform: scale(0.98); }
.hub-card:not(.locked):hover {
  box-shadow: 0 10px 40px color-mix(in srgb, var(--card-accent) 45%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--card-accent) 60%, transparent);
}
.hub-card.locked { opacity: 0.55; cursor: default; }

.hub-card-art { position: absolute; inset: 0; z-index: 0; }
.hub-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hub-card-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 96px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--card-accent) 55%, #201018) 0%, transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,122,26,0.06) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #2a1620 0%, #0c0810 100%);
}
.hub-card.no-art .hub-card-fallback span {
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--card-accent) 90%, transparent));
  animation: hubLogoFloat 4s ease-in-out infinite;
}
@keyframes hubLogoFloat { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-8px) rotate(4deg)} }
.hub-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,4,8,0.05) 0%, rgba(6,4,8,0.5) 52%, rgba(6,4,8,0.96) 100%);
}

.hub-card-body { position: relative; z-index: 1; padding: 14px 16px 10px; }
.hub-card-title {
  font-size: 24px; font-weight: 900; letter-spacing: 1px;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.95);
}
.hub-card-tag {
  font-size: 12px; color: #d8ccd0; margin-top: 2px; letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.hub-card-progress {
  font-size: 11px; color: var(--card-accent); font-weight: 700; margin-top: 7px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.95);
}
.hub-card-play {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: color-mix(in srgb, var(--card-accent) 88%, black);
  color: #fff; font-weight: 900; font-size: 11px; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 20px;
  box-shadow: 0 2px 14px color-mix(in srgb, var(--card-accent) 65%, transparent);
}
.hub-card.locked .hub-card-play { background: #333; box-shadow: none; }
.hub-footer {
  text-align: center; color: var(--sl-text2); font-size: 11px;
  letter-spacing: 2px; padding: 4px 0 20px;
}

.hub-back-btn {
  background: rgba(255,255,255,0.06); border: none; color: var(--sl-text);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.hub-back-btn:hover { background: rgba(255,255,255,0.15); }

/* ══════════════ SLAYER THEME OVERRIDES ══════════════ */
.sl-theme {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, #22090f 0%, transparent 55%),
    linear-gradient(180deg, var(--sl-bg) 0%, #05030a 100%) !important;
}
/* Atmospheric arena haze behind content — kills dead black space on short tabs */
.sl-theme .tab-content::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../img/slayer/bg_cathedral.jpg');
  background-size: cover; background-position: center;
  opacity: 0.16;
  filter: saturate(0.85) blur(1px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}
.sl-header { background: rgba(22,11,16,0.9) !important; border-bottom: 1px solid rgba(200,30,58,0.25) !important; }
.sl-title {
  color: var(--sl-accent) !important;
  text-shadow: 0 0 14px var(--sl-accent) !important;
}
.sl-cps { background: rgba(22,11,16,0.8) !important; color: var(--sl-text2) !important; }
.sl-cps span { color: var(--sl-soul) !important; }
.sl-boost { color: var(--sl-ember) !important; }
.sl-tabbar { background: rgba(22,11,16,0.95) !important; border-top: 1px solid rgba(200,30,58,0.25) !important; }
.sl-theme .tab-btn.active { color: var(--sl-accent) !important; }
.sl-theme .tab-btn.active::after { background: var(--sl-accent) !important; }
.sl-theme .tab-icon { display: inline-flex; align-items: center; justify-content: center; }
.tab-icon-img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.sl-theme .tab-btn.active .tab-icon-img { filter: drop-shadow(0 0 6px var(--sl-accent)); }
.sl-cat-icon { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: 6px; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)); }
.sl-upgrade-img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.sl-upgrade-fallback { width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 26px; }

.currency-pill.sl-souls  { border-color: var(--sl-soul) !important; color: var(--sl-soul) !important; }
.currency-pill.sl-stones { border-color: var(--sl-stone) !important; color: var(--sl-stone) !important; }
.cur-icon { width: 16px; height: 16px; object-fit: contain; }

.text-ember { color: var(--sl-ember); }

/* ── BATTLE TAB (full-bleed boss scene = arena) ── */
/* Battle never scrolls; clip so the tap screen-shake can't spawn a transient scrollbar. */
.sl-theme .tab-content:has(.battle-tab) { overflow: hidden !important; }
.battle-tab {
  display: flex; flex-direction: column;
  height: 100%; position: relative; overflow: hidden;
}
.battle-scene {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 42%;
  transform-origin: center 45%;
  animation: sceneBreathe 7s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes sceneBreathe { 0%,100%{transform:scale(1.02)} 50%{transform:scale(1.06)} }
.battle-scene.bf-recoil { animation: sceneRecoil .13s ease-out !important; }
@keyframes sceneRecoil { 0%{transform:scale(1.04)} 45%{transform:scale(1.09)} 100%{transform:scale(1.04)} }
.battle-scene.bf-flash { animation: sceneFlash .16s ease-out; }
@keyframes sceneFlash {
  0%{filter:brightness(2.1) saturate(1.4) contrast(1.1)}
  100%{filter:brightness(1) saturate(1) contrast(1)}
}
.battle-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 34%, rgba(5,3,8,0.35) 72%, rgba(5,3,8,0.7) 100%),
    linear-gradient(180deg, rgba(5,3,8,0.75) 0%, transparent 22%, transparent 48%, rgba(5,3,8,0.92) 100%);
}
.battle-tab > .boss-hp-wrap,
.battle-tab > .battle-bottom { position: relative; z-index: 3; }

.boss-hp-wrap { width: 100%; padding: 10px 12px 0; }
.boss-hp-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; padding: 0 2px;
}
.boss-name {
  font-size: 17px; font-weight: 900; color: #fff; letter-spacing: 1px;
  text-shadow: 0 2px 8px #000, 0 0 16px var(--sl-accent);
}
.boss-tier {
  font-size: 10px; font-weight: 800; color: var(--sl-gold);
  background: rgba(0,0,0,0.55); padding: 3px 9px; border-radius: 10px;
  border: 1px solid rgba(255,210,60,0.4);
}
.boss-hp-track {
  position: relative; height: 24px; border-radius: 7px;
  background: rgba(0,0,0,0.6); overflow: hidden;
  border: 1px solid rgba(200,30,58,0.45);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.6);
}
.boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #8a1020, var(--sl-accent) 55%, #ff5a75);
  box-shadow: 0 0 14px var(--sl-accent);
  transition: width .25s ease;
}
.boss-hp-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000;
}

/* whole scene is the tap target */
.boss-strikezone {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: none; cursor: pointer; padding: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  /* Tap = strike, hold = auto-strike — never let a long press select or show the callout. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}

.battle-bottom {
  margin-top: auto; padding: 0 10px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.battle-hero {
  display: flex; align-items: center; gap: 10px;
  background: rgba(22,11,16,0.82); backdrop-filter: blur(4px);
  border: 1px solid rgba(200,30,58,0.3); border-radius: 12px;
  padding: 6px 10px; width: 100%;
}
.battle-hero-img {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover;
  border: 1px solid rgba(255,210,60,0.4);
}
.battle-hero-info { flex: 1; min-width: 0; }
.battle-hero-name { font-size: 13px; font-weight: 800; color: #fff; }
.battle-hero-bonus { font-size: 10px; color: var(--sl-text2); }
.battle-strike-hint {
  font-size: 11px; font-weight: 900; letter-spacing: 1px; color: var(--sl-ember);
  text-align: center; line-height: 1.1; text-shadow: 0 0 10px rgba(255,122,26,0.6);
  animation: hintPulse 1.6s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100%{opacity:.55} 50%{opacity:1} }

.sl-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.sl-stat {
  background: rgba(22,11,16,0.85); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 6px 2px; text-align: center;
}
.sl-stat-val { font-size: 13px; font-weight: 900; color: var(--sl-accent); }
.sl-stat-lbl { font-size: 8px; color: var(--sl-text2); letter-spacing: .5px; margin-top: 1px; }

/* Floating damage numbers + sparks */
.bf-dmg {
  position: absolute; pointer-events: none; z-index: 50;
  font-size: 26px; font-weight: 900; color: #ffe8cc;
  text-shadow: 0 2px 4px #000, 0 0 6px #000, 0 0 14px var(--sl-ember);
  -webkit-text-stroke: 1px rgba(0,0,0,0.55);
  transform: translate(-50%,-50%);
  animation: bfDmgFloat .9s cubic-bezier(.2,1,.3,1) forwards;
}
.bf-dmg.crit {
  font-size: 46px; color: var(--sl-gold);
  text-shadow: 0 2px 6px #000, 0 0 10px #000, 0 0 22px var(--sl-ember);
  -webkit-text-stroke: 1.5px rgba(90,10,20,0.8);
}
@keyframes bfDmgFloat {
  0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
  18%{opacity:1;transform:translate(-50%,-64%) scale(1.35)}
  32%{transform:translate(-50%,-72%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-160%) scale(.95)}
}
.bf-spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sl-ember); pointer-events: none; z-index: 49;
  box-shadow: 0 0 10px var(--sl-ember);
  transform: translate(-50%,-50%);
  animation: bfSpark .6s ease-out forwards;
}
.bf-spark.crit { background: #fff; box-shadow: 0 0 12px var(--sl-accent), 0 0 4px #fff; width: 9px; height: 9px; }
@keyframes bfSpark {
  0%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3)}
}
/* Radial impact ring */
.bf-ring {
  position: absolute; z-index: 48; pointer-events: none;
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid rgba(255,122,26,0.9);
  transform: translate(-50%,-50%);
  animation: bfRing .5s ease-out forwards;
}
.bf-ring.crit { border-color: rgba(255,90,117,0.95); border-width: 4px; }
@keyframes bfRing {
  0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(4.5)}
}
.bf-shake { animation: bfShake .16s ease-in-out; }
@keyframes bfShake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 75%{transform:translate(3px,-2px)} }
.bf-shake-hard { animation: bfShakeHard .26s ease-in-out; }
@keyframes bfShakeHard {
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-7px,4px)} 35%{transform:translate(6px,-5px)}
  55%{transform:translate(-5px,-3px)} 75%{transform:translate(4px,4px)}
}

/* HP bar chunk-flash on hit */
.bf-hp-hit { animation: bfHpHit .2s ease-out; }
@keyframes bfHpHit {
  0%{filter:brightness(2.4) saturate(1.6)} 100%{filter:brightness(1) saturate(1)}
}

/* Hitstop zoom punch on the scene (crit only) */
.battle-scene.bf-hitstop { animation: bfHitstop .28s cubic-bezier(.2,.9,.2,1) !important; }
@keyframes bfHitstop {
  0%{transform:scale(1.04)} 30%{transform:scale(1.12)} 100%{transform:scale(1.04)}
}

/* CRITICAL banner slash */
.bf-crit-banner {
  position: absolute; left: 50%; top: 24%; z-index: 52; pointer-events: none;
  transform: translate(-50%,-50%) rotate(-7deg);
  font-size: 34px; font-weight: 900; letter-spacing: 4px;
  background: linear-gradient(180deg, #fff 0%, var(--sl-gold) 55%, #ff7a1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px rgba(90,10,25,0.9);
  filter: drop-shadow(0 0 18px var(--sl-accent)) drop-shadow(0 3px 6px #000);
  animation: bfCritBanner .5s cubic-bezier(.2,1.3,.4,1) forwards;
}
@keyframes bfCritBanner {
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-7deg) scale(.4)}
  25%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1.18)}
  70%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}
  100%{opacity:0;transform:translate(-50%,-56%) rotate(-7deg) scale(1)}
}

/* Ember slay-burst + flash (global) */
.bf-ember {
  position: fixed; width: 9px; height: 9px; border-radius: 50%;
  pointer-events: none; z-index: 9999;
  box-shadow: 0 0 8px currentColor;
  animation: bfEmber 1.3s ease-out forwards;
}
@keyframes bfEmber {
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--ex),var(--ey)) scale(.3)}
}
.bf-slayflash {
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  background: radial-gradient(circle at 50% 45%, rgba(200,30,58,0.4), transparent 60%);
  animation: bfFlash .5s ease-out forwards;
}
@keyframes bfFlash { 0%{opacity:0} 25%{opacity:1} 100%{opacity:0} }

/* ── ARSENAL / upgrade overrides ── */
.sl-cat-tabs { display: flex; background: rgba(22,11,16,0.9); border-bottom: 1px solid rgba(200,30,58,0.25); }
.sl-cat-btn {
  flex: 1; background: none; border: none; color: var(--sl-text2);
  font-size: 12px; font-weight: 700; padding: 10px 4px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s;
}
.sl-cat-btn.active { color: var(--sl-accent); border-bottom-color: var(--sl-accent); }
.sl-upgrade { background: var(--sl-card) !important; }
.sl-upgrade.can-afford { border-color: var(--sl-accent) !important; }
.sl-upgrade.maxed { border-color: var(--sl-gold) !important; }
.sl-upgrade-icon { background: #0a0608 !important; }
.sl-effect { color: var(--sl-soul) !important; font-size: 12px !important; font-weight: 700 !important; }
.sl-upgrade .upgrade-name { font-size: 15px !important; }
.sl-upgrade .upgrade-desc { font-size: 11.5px !important; color: #b3a1a8 !important; }
.sl-buy .buy-cost, .sl-buy span { color: #fff !important; }
.sl-upgrade { transition: border-color .2s, transform .1s, box-shadow .2s; }
.sl-upgrade.can-afford:active { transform: scale(0.985); }
.sl-upgrade.can-afford {
  border-color: var(--sl-accent) !important;
  box-shadow: 0 0 14px rgba(200,30,58,0.22);
  animation: slAfford 2.2s ease-in-out infinite;
}
@keyframes slAfford {
  0%,100%{ box-shadow: 0 0 10px rgba(200,30,58,0.18); }
  50%{ box-shadow: 0 0 20px rgba(200,30,58,0.4); }
}
.shop-pack { transition: transform .12s, box-shadow .15s; }
.shop-pack:active { transform: scale(0.97); }
.shop-pack.best { animation: slAfford 2.4s ease-in-out infinite; }
.sl-buy {
  background: linear-gradient(180deg, #e63a54 0%, var(--sl-accent) 45%, #7a0f1e 100%) !important;
  box-shadow: 0 2px 0 #4a0912, inset 0 1px 0 rgba(255,255,255,0.25) !important;
  border: 1px solid rgba(0,0,0,0.4) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  /* Press-and-hold buys multiple — never let the browser select text / show the
     callout / magnifier on a long press. */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.sl-buy:not(:disabled):active { transform: translateY(1px) scale(0.97); box-shadow: 0 1px 0 #4a0912 !important; }
.sl-buy:disabled { background: #14090d !important; border: 1px solid rgba(255,255,255,0.06) !important; color: var(--sl-text2) !important; box-shadow: none !important; }
.sl-theme .level-badge { background: rgba(200,30,58,0.2); color: var(--sl-accent); }

/* ── LOOT TAB ── */
.loot-tab { padding: 10px; }
.chest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0 12px; }
.chest-card {
  background: var(--sl-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.chest-card.ready { border-color: var(--sl-accent); box-shadow: 0 0 18px rgba(200,30,58,0.3); }
.chest-card.rare.ready { border-color: var(--sl-gold); box-shadow: 0 0 18px rgba(255,210,60,0.3); }
.chest-img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)); }
.chest-img.rare-tint { filter: drop-shadow(0 4px 12px rgba(255,210,60,0.5)) hue-rotate(-15deg) saturate(1.3); }
.chest-name { font-size: 13px; font-weight: 800; color: #fff; }
.chest-count { font-size: 12px; color: var(--sl-text2); }
.sl-loot-btn {
  width: 100%; justify-content: center; color: #fff; font-weight: 800;
  border: 1px solid rgba(0,0,0,0.4);
}
.sl-loot-btn.common { background: linear-gradient(180deg, #e63a54, #7a0f1e); box-shadow: 0 2px 0 #4a0912, inset 0 1px 0 rgba(255,255,255,0.2); }
.sl-loot-btn.rare   { background: linear-gradient(180deg, #ffd85a, #b8860b); color: #2a1500; box-shadow: 0 2px 0 #6b4e08, inset 0 1px 0 rgba(255,255,255,0.4); }
.sl-loot-btn:not(:disabled):active { transform: translateY(1px) scale(0.98); }
.sl-loot-btn.off { background: #14090d !important; color: #5a4550 !important; box-shadow: none !important; border-color: rgba(255,255,255,0.05) !important; cursor: not-allowed; }
.loot-progress { padding: 12px 14px !important; }
.loot-progress-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--sl-text2); margin-bottom: 6px; font-weight: 600; }
.loot-progress-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.loot-progress-fill.common { background: linear-gradient(90deg, #8a1020, var(--sl-accent)); box-shadow: 0 0 8px var(--sl-accent); }
.loot-progress-fill.rare { background: linear-gradient(90deg, #b8860b, var(--sl-gold)); box-shadow: 0 0 8px var(--sl-gold); }
.loot-odds { padding: 12px 14px !important; }
.loot-odds-title { font-size: 12px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.loot-odds-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--sl-text2); padding: 3px 0; }
.loot-odds-row span:last-child { color: var(--sl-soul); font-weight: 700; }
.loot-hint { font-size: 11px; color: var(--sl-text2); text-align: center; padding: 8px 12px 16px; line-height: 1.5; }
.loot-reveal { text-align: center; }
.loot-reveal-emoji { font-size: 64px; animation: popIn .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes popIn { 0%{transform:scale(0);opacity:0} 100%{transform:scale(1);opacity:1} }

/* ── HEROES TAB ── */
.heroes-tab { padding-bottom: 12px; }
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 10px; }
.hero-card {
  background: var(--sl-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; text-align: center;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.hero-card:active { transform: scale(0.96); }
.hero-card.locked { opacity: 0.6; cursor: default; }
.hero-card.equipped { border-color: var(--sl-gold); box-shadow: 0 0 16px rgba(255,210,60,0.35); }
.hero-card.rarity-rare { border-color: rgba(90,209,255,0.4); }
.hero-card.rarity-epic { border-color: rgba(206,147,216,0.5); }
.hero-card.rarity-legendary { border-color: rgba(255,122,26,0.6); }
.hero-portrait { position: relative; aspect-ratio: 1; background: #0a0608; overflow: hidden; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* framed-art treatment so portraits read as in-theme, not raw cutouts */
.hero-portrait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,6,8,0) 45%, rgba(10,6,8,0.55) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 -18px 20px -10px rgba(10,6,8,0.7);
}
.hero-portrait-fallback { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 40px; }
.hero-lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: rgba(5,3,8,0.72); backdrop-filter: blur(2px); z-index: 2;
  color: #6b5560; text-shadow: 0 0 12px rgba(0,0,0,0.8);
}
.hero-equipped-badge {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  background: linear-gradient(180deg, #ffe27a, var(--sl-gold)); color: #2a1500;
  font-size: 8px; font-weight: 900; letter-spacing: 1px; padding: 3px 0; text-align: center;
  box-shadow: 0 -2px 8px rgba(255,210,60,0.4);
}
.hero-name { font-size: 11px; font-weight: 800; color: #fff; padding: 5px 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-rarity { font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.r-common { color: #b8b0b4; } .r-rare { color: var(--sl-soul); } .r-epic { color: #ce93d8; } .r-legendary { color: var(--sl-ember); }
.hero-bonus { font-size: 9px; color: var(--sl-text2); padding: 2px 4px 8px; }

/* ── ASCENSION TAB ── */
.ascension-tab { padding: 14px 12px; }
.ascend-hero { text-align: center; padding: 8px 0 14px; }
.ascend-icon { font-size: 52px; filter: drop-shadow(0 0 18px var(--sl-ember)); animation: bossPulse 2.6s ease-in-out infinite; }
.ascend-title { font-size: 22px; font-weight: 900; letter-spacing: 3px; color: var(--sl-ember); text-shadow: 0 0 16px rgba(255,122,26,0.6); }
.ascend-sub { font-size: 11px; color: var(--sl-text2); margin-top: 4px; }
.sl-card { background: var(--sl-card) !important; border-color: rgba(200,30,58,0.25) !important; }
.ascend-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; color: var(--sl-text2); }
.ascend-row strong { color: #fff; }
.ascend-progress-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--sl-text2); margin-bottom: 6px; }
.ascend-progress-fill { height: 100%; background: linear-gradient(90deg, var(--sl-ember), var(--sl-gold)); box-shadow: 0 0 10px var(--sl-ember); transition: width .3s; border-radius: 6px; }
.ascend-reward-note { font-size: 11px; color: var(--sl-text2); margin-top: 8px; line-height: 1.5; }
.ascend-btn { background: #2a1017; color: #6b5560; margin: 6px 0; cursor: not-allowed; }
.ascend-btn.ready { background: linear-gradient(135deg, var(--sl-accent), var(--sl-ember)); color: #fff; cursor: pointer; box-shadow: 0 4px 20px rgba(200,30,58,0.5); animation: readyPulse 1.8s ease-in-out infinite; }
@keyframes readyPulse { 0%,100%{box-shadow:0 4px 20px rgba(200,30,58,0.4)} 50%{box-shadow:0 4px 30px rgba(255,122,26,0.7)} }
.ascend-warning { font-size: 10px; color: var(--sl-text2); text-align: center; margin-top: 10px; line-height: 1.5; }

/* ── SHOP TAB ── */
.shop-tab { padding-bottom: 12px; }
.ad-boost { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ad-boost-title { font-size: 14px; font-weight: 800; color: var(--sl-ember); }
.ad-boost-desc { font-size: 11px; color: var(--sl-text2); margin-top: 2px; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 10px; }
.shop-pack {
  position: relative; background: var(--sl-card); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 14px 10px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.shop-pack.best { border-color: var(--sl-gold); box-shadow: 0 0 16px rgba(255,210,60,0.25); }
.best-tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--sl-gold); color: #000; font-size: 8px; font-weight: 900; letter-spacing: 1px; padding: 2px 8px; border-radius: 10px; }
.pack-emoji { font-size: 34px; }
.pack-name { font-size: 12px; font-weight: 800; color: #fff; }
.pack-contents { font-size: 10px; color: var(--sl-text2); display: flex; flex-direction: column; gap: 1px; margin-bottom: 4px; }
.pack-stones { color: var(--sl-stone); }