:root{
  --bg0:#050712;
  --bg1:#070a1a;
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);

  --common:#9aa4b2;
  --rare:#4aa3ff;
  --epic:#b86bff;
  --mythical:#ff5fd7;
  --legendary:#ffcc33;
  --cosmic:#52fff0;
  --interstellar:#9b6bff;

  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --cardBack: url("cards/card.png");
}

*{box-sizing:border-box}

html{
  background-color:#050712;
}

html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;

  /* Premium, eye-catchy space backdrop (no extra assets required) */
  background:
    radial-gradient(1200px 820px at 18% 12%, rgba(184,107,255,.20), transparent 60%),
    radial-gradient(1100px 760px at 86% 86%, rgba(82,255,240,.18), transparent 62%),
    radial-gradient(900px 520px at 55% 48%, rgba(255,204,51,.10), transparent 66%),
    linear-gradient(180deg, #040512 0%, var(--bg1) 55%, #040512 100%);
  background-attachment: fixed;
  position:relative;
  isolation:isolate;
}

/* Starfield + nebula layers (subtle parallax drift) */
body::before{
  content:"";
  position:fixed;
  inset:-10%;
  pointer-events:none;
  z-index:-2;
  opacity:.70;

  background:
    /* soft nebula haze */
    radial-gradient(900px 520px at 30% 25%, rgba(184,107,255,.14), transparent 60%),
    radial-gradient(820px 520px at 70% 70%, rgba(82,255,240,.12), transparent 62%),
    radial-gradient(760px 460px at 60% 25%, rgba(255,204,51,.08), transparent 65%),

    /* tiny stars */
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.55), transparent 45%),
    radial-gradient(1px 1px at 18% 76%, rgba(255,255,255,.45), transparent 45%),
    radial-gradient(1px 1px at 24% 40%, rgba(255,255,255,.40), transparent 45%),
    radial-gradient(1px 1px at 32% 12%, rgba(255,255,255,.50), transparent 45%),
    radial-gradient(1px 1px at 44% 66%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(1px 1px at 56% 18%, rgba(255,255,255,.52), transparent 45%),
    radial-gradient(1px 1px at 62% 52%, rgba(255,255,255,.38), transparent 45%),
    radial-gradient(1px 1px at 74% 34%, rgba(255,255,255,.44), transparent 45%),
    radial-gradient(1px 1px at 82% 14%, rgba(255,255,255,.52), transparent 45%),
    radial-gradient(1px 1px at 86% 58%, rgba(255,255,255,.36), transparent 45%),
    radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,.46), transparent 45%),
    radial-gradient(1px 1px at 6% 92%, rgba(255,255,255,.40), transparent 45%),

    /* a few bigger stars */
    radial-gradient(2px 2px at 22% 28%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(2px 2px at 66% 44%, rgba(255,255,255,.50), transparent 55%),
    radial-gradient(2px 2px at 88% 24%, rgba(255,255,255,.55), transparent 55%);

  filter: saturate(1.08);
  transform: translate3d(0,0,0);
  animation: bgDrift 22s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

/* Premium film grain (kept very subtle) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.10;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grainShift 7s steps(6) infinite;
  mix-blend-mode: overlay;
}

@keyframes bgDrift{
  0%{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); filter: hue-rotate(0deg) saturate(1.06); }
  100%{ transform: translate3d(1.5%, 1%, 0) scale(1.03); filter: hue-rotate(10deg) saturate(1.10); }
}

@keyframes grainShift{
  0%{ transform: translate3d(0,0,0); }
  25%{ transform: translate3d(-1%, .6%, 0); }
  50%{ transform: translate3d(.8%, -1.2%, 0); }
  75%{ transform: translate3d(-.6%, -.8%, 0); }
  100%{ transform: translate3d(1%, .8%, 0); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation: none !important; }
  body{ background-attachment: scroll; }
}


header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(14px);
  background: rgba(5,7,18,.78);
  border-bottom:1px solid var(--stroke);
}

.wrap{
  width:min(1180px,94vw);
  margin:auto;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.brand{display:flex; align-items:center; gap:10px;}
.logo{
  width:34px;height:34px;border-radius:10px;
  background: radial-gradient(circle at 30% 30%, var(--cosmic), transparent 60%), rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}

.small{font-size:12px; color:var(--muted); line-height:1.5;}

.headerActions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.wallet{
  padding:10px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  font-weight:1000;
}


/* ===============================
   PREMIUM GOLD DISPLAY
   =============================== */

.goldWallet{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:16px;
  background:
    linear-gradient(180deg, rgba(255,204,51,.22), rgba(255,153,0,.08)),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,204,51,.35);
  box-shadow:
    0 0 22px rgba(255,204,51,.25),
    inset 0 0 10px rgba(255,255,255,.12);
}

/* Gold coin icon */
.goldIcon{
  width:22px;
  height:22px;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, #fff6c7, #ffcc33 45%, #d99a00 70%);
  box-shadow:
    inset 0 0 6px rgba(255,255,255,.65),
    0 0 12px rgba(255,204,51,.55);
  position:relative;
}

/* Small sparkle */
.goldIcon::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), transparent 65%);
  opacity:.6;
}

/* Gold value text */
.goldValue{
  font-weight:1000;
  font-size:15px;
  letter-spacing:.3px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff7cc, #ffcc33);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(255,204,51,.55);
}

/* Subtle pulse when gold updates */
.goldPulse{
  animation: goldPulse .35s ease-out;
}

@keyframes goldPulse{
  0%{ transform:scale(1); filter:brightness(1); }
  60%{ transform:scale(1.06); filter:brightness(1.25); }
  100%{ transform:scale(1); filter:brightness(1); }
}

.wallet .gold{font-variant-numeric: tabular-nums;}

.invBtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  color: var(--text);
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.invBtn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09); filter: brightness(1.06);}
.invBtn:active{ transform: translateY(0) scale(.995); }

.invIcon{
  width:18px;height:18px;border-radius:6px;
  background: radial-gradient(circle at 30% 30%, rgba(82,255,240,.55), transparent 62%), rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.invBadge{
  margin-left:2px;
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.2px;
  background: rgba(255,204,51,.12);
  border:1px solid rgba(255,204,51,.22);
  color: rgba(255,255,255,.95);
  font-variant-numeric: tabular-nums;
}

/* HERO CARD: only the card */
.heroCard{
  width:100%;
  margin:20px auto 10px;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  display:flex;
  justify-content:center;
}
.heroInner{ display:flex; justify-content:center; }
.heroImgWrap{
  width:210px;
  height:290px;
  padding:0;
  border-radius:28px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.60);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.heroImg{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none;
}

/* SHOP */
.shop{
  width:min(1180px,94vw);
  margin:18px auto;
  height: clamp(440px, 55vh, 520px);
  border-radius:26px;
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.shop::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(760px 260px at 45% 45%, rgba(82,255,240,.12), transparent 65%),
    radial-gradient(700px 260px at 18% 65%, rgba(255,204,51,.10), transparent 68%),
    radial-gradient(800px 320px at 85% 22%, rgba(184,107,255,.14), transparent 62%);
  pointer-events:none;
  opacity:.95;
}
.shop-label{
  position:absolute;
  top:18px; left:18px;
  z-index:5;
  font-size:12px;
  font-weight:1000;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  letter-spacing:.8px;
  text-transform:uppercase;
}
.shop-hint{
  position:absolute;
  bottom:18px; left:18px;
  z-index:5;
  font-size:12px;
  color:var(--muted);
}
.viewport{
  position:absolute;
  left:18px; right:18px;
  top: clamp(58px, 9vh, 72px);
  bottom: clamp(58px, 9vh, 72px);
  overflow:hidden;
  border-radius:18px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.track{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  display:flex;
  gap:22px;
  will-change: transform;
  padding-right:60px;
}

/* CARD */
.card{
  width:210px;
  height:290px;
  border-radius:28px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.60);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .15s ease, filter .15s ease;
  transform: translateZ(0);
  isolation:isolate;
}
.card:hover{ transform: translateY(-8px) scale(1.03); filter: brightness(1.10); }
.aura{ position:absolute; inset:-60px; filter: blur(26px) saturate(1.18); mix-blend-mode:screen; pointer-events:none; }
.cardBack{
  position:absolute;
  inset:16px 16px 62px 16px;
  border-radius:22px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12)), var(--cardBack);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 1px rgba(0,0,0,.20) inset;
  overflow:hidden;
}
.meta{
  position:absolute;
  left:16px; right:16px; bottom:14px;
  padding:12px 14px;
  border-radius:18px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.25px;
  text-transform:uppercase;
  backdrop-filter: blur(10px);
}
.price{ font-variant-numeric: tabular-nums; text-transform:none; opacity:.95; }
.pulse{ animation:pulse .22s ease-out 1; }
@keyframes pulse{ 0%{filter:brightness(1)} 80%{filter:brightness(1.18)} 100%{filter:brightness(1)} }
.restock{ animation: restockIn .55s ease-out 1; }
@keyframes restockIn{ from{opacity:0; transform: translateY(10px) scale(.985);} to{opacity:1; transform: translateY(0) scale(1);} }

/* rarity aura */
.r-common{--aura:var(--common)}
.r-rare{--aura:var(--rare)}
.r-epic{--aura:var(--epic)}
.r-mythical{--aura:var(--mythical)}
.r-legendary{--aura:var(--legendary)}
.r-cosmic{--aura:var(--cosmic)}
.r-interstellar{--aura:var(--interstellar)}
.r-common .aura,.r-rare .aura,.r-epic .aura,.r-mythical .aura,.r-legendary .aura,.r-cosmic .aura,.r-interstellar .aura{
  background: radial-gradient(circle, var(--aura), transparent 65%);
}

/* SLOT PANELS */
.slotPanels{
  width:min(1180px,94vw);
  margin:18px auto 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){ .slotPanels{ grid-template-columns:1fr; } }
.slotPanel{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.slotGrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:10px; }
.slot{
  aspect-ratio: 2 / 3;
  border-radius:14px;
  background: rgba(0,0,0,.35);
  border:1px dashed rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
}
.slotPlus{
  width:34px; height:34px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900;
  background: rgba(82,255,240,.18);
  border:1px solid rgba(82,255,240,.35);
}

/* MODALS */
.modalOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:18px;
}
.modalOverlay.show{display:flex;}
.modal{
  width:min(820px,96vw);
  border-radius:22px;
  background: rgba(10,12,24,.88);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.75);
  overflow:hidden;
  position:relative;
}
.modalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.closeBtn{
  border:none;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:white;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:1000;
}
.modalBody{ padding:16px; display:block; }
.invModalTop{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.invModalGrid{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.okRow{ display:flex; justify-content:center; padding: 14px 0 6px; border-top:1px solid rgba(255,255,255,.12); margin-top:14px; }

.btn{
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:white;
  font-weight:1000;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.btnPrimary{ background: rgba(82,255,240,.10); border-color: rgba(82,255,240,.20); }

.invRow{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px;
  border-radius:16px;
  background: rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
}
.invLeft{ display:flex; align-items:center; gap:10px; min-width:0; }
.dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; box-shadow: 0 0 16px rgba(255,255,255,.12); }
.invName{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.invName b{ font-size:12px; letter-spacing:.25px; text-transform:uppercase; }
.invName small{ font-size:12px; color:var(--muted); font-variant-numeric: tabular-nums; }

.actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* REWARD GRID */
.rewardGridWrap{ width:100%; }

/* ===== Rewards modal: always fully visible + scroll when many cards ===== */
.rewardsModal{
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
}
.rewardsModal .modalBody{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.rewardsBody .rewardGridWrap{
  flex:1;
  overflow:auto;
  padding-right: 6px;
}
.rewardsBody .rewardGridWrap::-webkit-scrollbar{ width: 10px; }
.rewardsBody .rewardGridWrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}

.rewardGrid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(110px, 1fr));
  gap:14px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  justify-items:center;
}
.rewardTile{
  width:100%;
  max-width:180px;
  aspect-ratio: 2.75 / 3.85;
  border-radius:16px;
  overflow:hidden;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.98);
  opacity:0;
  animation: rewardPop .35s ease forwards;
}
.rewardTile img{ width:100%; height:100%; object-fit:contain; display:block; padding:10px; }
@keyframes rewardPop{ to{ transform: translateY(0) scale(1); opacity:1; } }

/* CARDS GRID */
.cardsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:12px;
  margin-top:12px;
}
.cardThumb{
  position:relative;
  aspect-ratio:2/3;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  user-select:none;
}
.cardThumb img{ width:100%; height:100%; object-fit:contain; }
.cardThumb:focus{ outline:2px solid rgba(255,255,255,.25); outline-offset:2px; }

/* ================= Mutation glow border (Silver → Rainbow) ================= */
@property --mut-a{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.mutGlow{
  position: relative;
  isolation: isolate;
  --mut-glow: .7;      /* intensity (can be overridden inline) */
  --mut-speed: 3.2s;   /* spin speed */
}

/* Make sure the glow can bleed outside */
.rewardTile.mutGlow,
.cardThumb.mutGlow,
.deckPickItem.mutGlow,
.slot.mutGlow{
  overflow: visible;
}

/* Keep child content above the glow */
.mutGlow > *{
  position: relative;
  z-index: 1;
}

.mutGlow::before,
.mutGlow::after{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: var(--mut-gradient, conic-gradient(from var(--mut-a), #fff, #9bd2ff, #fff));
  animation: mutSpin var(--mut-speed) linear infinite;
  pointer-events: none;
}

/* Outer soft glow */
.mutGlow::before{
  filter: blur(14px);
  opacity: var(--mut-glow);
}

/* Crisp border ring using a mask */
.mutGlow::after{
  inset: -2px;
  padding: 2px;
  opacity: .95;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@keyframes mutSpin{
  to{ --mut-a: 360deg; }
}

/* Gradients per mutation */
.mut-silver{ --mut-gradient: conic-gradient(from var(--mut-a), #ffffff, #b8dcff, #e7f0ff, #ffffff); }
.mut-gold{ --mut-gradient: conic-gradient(from var(--mut-a), #fff2b0, #ffcc33, #ff9a3c, #fff2b0); }
.mut-diamond{ --mut-gradient: conic-gradient(from var(--mut-a), #e8ffff, #88b7ff, #ffffff, #a7fff6, #e8ffff); }
.mut-rainbow{ --mut-gradient: conic-gradient(from var(--mut-a), #ff4d4d, #ffcc33, #6cff6c, #4aa3ff, #b86bff, #ff5fd7, #ff4d4d); }

/* 🌈 NEON */
.mut-neon{
  --mut-gradient: conic-gradient(from var(--mut-a), #00fff7, #00ff88, #00fff7, #00ffcc);
  --mut-glow: 0.9;
  --mut-speed: 2.2s;
}

/* 🌌 GALACTIC */
.mut-galactic{
  --mut-gradient: conic-gradient(from var(--mut-a), #9b6bff, #4aa3ff, #52fff0, #b86bff, #9b6bff);
  --mut-glow: 1.15;
  --mut-speed: 1.8s;
}

/* toast */
.toastWrap{
  position: fixed;
  right: 18px;
  top: 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index: 1000;
  pointer-events:none;
}
.toast{
  width:min(420px, 92vw);
  padding:12px 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  animation: pop .18s ease-out;
  pointer-events:auto;
}
@keyframes pop{ from{ transform: translateY(8px); opacity:0; } to{ transform: translateY(0); opacity:1; } }
.toast b{ color: rgba(255,255,255,.94); }
.toast .tSmall{ color: var(--muted); font-size:12px; margin-top:4px; line-height:1.35; }


/* ===== GOLD PLACEHOLDER (STATIC) ===== */
.goldPlaceholder{
  display:flex;
  justify-content:center;
  margin: 14px 0 2px;
}
.goldPlaceholderInner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,24,.55);
    position: relative;
  overflow: visible;
cursor:pointer;
  user-select:none;
}
.goldPlaceholderCard{
  width:90px;
  height:auto;
  transition: transform .18s ease, filter .18s ease;
}
.goldPlaceholderInner:hover .goldPlaceholderCard{
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(255,215,0,.55));
}
.goldPlaceholderText{
  font-weight:900;
  color: rgba(255,215,0,.95);
  text-shadow: 0 0 10px rgba(255,215,0,.25);
}

.towerPercent{
  position:absolute;
  top:10px;
  right:10px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.03em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  pointer-events:none;
}

/* Tower redeem FX */
.goldPlaceholderInner.collectFx .goldPlaceholderCard{
  animation: towerCollectPulse .65s ease-out;
  filter: drop-shadow(0 0 18px rgba(255,215,0,.75));
}
.goldPlaceholderInner.collectFx::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, rgba(255,215,0,.45), transparent 60%);
  opacity:0;
  pointer-events:none;
  animation: towerCollectGlow .65s ease-out;
}
@keyframes towerCollectPulse{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.12); }
  100%{ transform: scale(1); }
}
@keyframes towerCollectGlow{
  0%{ opacity:0; transform: scale(.92); }
  35%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.08); }
}

/* ===== Coming Soon modal content (Pet Shop placeholder) ===== */
.comingSoonBox{
  padding:18px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  text-align:center;
}
.comingSoonTitle{
  font-size:20px;
  font-weight:1000;
  letter-spacing:.2px;
}

/* ===== PET SHOP / PETS ===== */
.petShopGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
  margin-top: 10px;
}
.petCard{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:18px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
}
.petCard img{
  width:62px;
  height:86px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}
.petMeta{
  flex:1;
}
.petMeta b{display:block; font-size:14px;}
.petMeta .small{opacity:.8; margin-top:2px;}
.petBuyRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
}
.petPrice{
  font-weight:900;
  color: rgba(255,215,0,.95);
}
.petsGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
}
.ownedPet{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:18px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
}
.ownedPet img{
  width:54px;
  height:76px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}
.ownedPet b{display:block; font-size:14px;}
.ownedPet .small{opacity:.8; margin-top:2px;}

/* ===== SUMMONERS ===== */
.summonersModal{ width:min(980px,96vw); }
.summonersLayout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
}
.summonersLeft{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: rgba(255,255,255,.05);
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height: 420px;
}
.summonersList{
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:auto;
  padding-right:6px;
  max-height: 340px;
}
.summonerItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor:pointer;
}
.summonerItem.active{
  border-color: rgba(82,255,240,.45);
  box-shadow: 0 0 0 2px rgba(82,255,240,.15) inset;
}
.summonerItem img{
  width:48px; height:66px; border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}
.summonerItem b{display:block; font-size:14px;}
.summonerItem .small{opacity:.75; margin-top:2px;}
.summonersLeftBottom{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
}
.summonersRight{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: rgba(255,255,255,.05);
  padding:14px;
}
.summonerTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.detailDivider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}
.detailStats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.detailStats .stat{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.muted{ opacity:.75; }


/* ================= Deck Picker ================= */
.deckModal{max-width: 980px}
.deckBody{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
.deckPickLeft{min-height:420px}
.deckHint{color:var(--muted); font-size:13px; margin-bottom:10px}
.deckPickGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
  max-height: 420px;
  overflow:auto;
  padding-right: 6px;
}
.deckPickItem{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding:10px;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.deckPickItem:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.22)}
.deckPickItem.sel{outline: 2px solid rgba(255,255,255,.28)}
.deckPickItem img{width:100%; aspect-ratio: 3/4; border-radius: 12px; object-fit: cover; display:block}
.deckPickMeta{margin-top:8px; display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted)}
.deckPickName{color:var(--text); font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.deckPickTag{font-weight:800; text-transform:uppercase; letter-spacing:.06em; opacity:.9}

.deckPickRight{
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 14px;
}
.deckDetailsTitle{font-weight:900; letter-spacing:.08em; font-size:12px; color:var(--muted); margin-bottom:10px}
.deckDetailsCard{display:flex; gap:12px; align-items:flex-start}
.deckDetailsCard img{width:140px; aspect-ratio: 3/4; border-radius: 14px; object-fit: cover; border:1px solid var(--stroke)}
.deckDetailsName{font-size:18px; font-weight:900; margin-bottom:6px}
.deckDetailsLine{font-size:13px; color:var(--muted); margin:3px 0}
.primaryBtn{
  width:100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.10);
  color: var(--text);
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.primaryBtn:disabled{opacity:.55; cursor:not-allowed}
.primaryBtn:not(:disabled):hover{transform: translateY(-1px); background: rgba(255,255,255,.14)}

/* ================= Deck slot: assigned card ================= */
.slot.assigned{padding:0; overflow:hidden; position:relative}

/* Allow mutation glow to extend outside deck slots */
.slot.assigned.mutGlow{
  overflow: visible;
}
.slot.assigned.mutGlow img{
  border-radius: inherit;
}

.slot.assigned img{width:100%; height:100%; object-fit:cover; display:block}
.slotBadge{
  position:absolute; left:8px; top:8px;
  padding:4px 8px;
  border-radius: 999px;
  font-size:11px;
  font-weight:900;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}


/* ===== Deck card inline overlay (details + actions on the card itself) ===== */
.slot.assigned{ cursor:pointer; }
.slot.assigned.selected::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.42));
  pointer-events:none;
}
.slotOverlay{
  position:absolute;
  left:8px; right:8px; bottom:8px;
  padding: 8px 8px 9px;
  border-radius: 14px;
  background: rgba(10, 14, 24, 0.62);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  font-size: 11px;
  line-height: 1.2;
  transform: translateY(6px);
  opacity: 0;
  animation: slotOverlayIn .16s ease forwards;
}
@keyframes slotOverlayIn{
  to{ transform: translateY(0); opacity: 1; }
}
.slotOverlayTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 8px;
}
.slotOverlayName{
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slotOverlayBadges{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pillMini{
  display:inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .05em;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}
.slotOverlayLine{ margin-top: 6px; opacity: .92; }
.slotOverlayBtns{
  display:flex;
  gap: 8px;
  margin-top: 8px;
}
.slotBtn{
  flex: 1;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.95);
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
}
.slotBtn:hover{ background: rgba(255,255,255,0.12); transform: translateY(-1px); }
.slotBtn.danger{
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.12);
}
.slotBtn.danger:hover{ background: rgba(255,80,80,0.16); }

@media (max-width: 720px){
  .slotOverlay{ left:6px; right:6px; bottom:6px; padding:7px; }
  .slotOverlayBtns{ gap:6px; }
  .slotBtn{ padding:7px 8px; font-size:10.5px; }
}

.cardThumb{position:relative}
.cardThumbMeta{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--muted);
}
.ctName{color:var(--text); font-weight:900}
.ctInfo{opacity:.9}

/* ===== Card hover tooltip ===== */
.cardTooltip{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(10, 14, 24, 0.92);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  transform: translate3d(0,0,0);
  opacity: 0;
  transition: opacity .12s ease;
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
}
.cardTooltip.show{ opacity: 1; }
.cardTooltip .ttName{ font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.cardTooltip .ttRow{ opacity: .92; margin-top: 2px; }
.cardTooltip .ttBadge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  margin-right: 6px;
}

/* ===== Deck card actions panel (right side) ===== */
.deckCardActions{
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 320px;
  max-width: calc(100vw - 36px);
  background: rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  border-radius: 16px;
  z-index: 10050;
}
.deckCardActions.hidden{ display:none; }
.deckCardActions .dcaHead{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 12px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.deckCardActions .dcaHead .closeBtn{
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color:#fff;
  cursor:pointer;
}
.deckCardActions .dcaBody{ padding: 12px 14px 14px; }
.deckCardActions .dcaMeta{ font-size: 12px; opacity: .92; }
.deckCardActions .dcaBtns{ display:flex; gap: 10px; margin-top: 12px; }
.deckCardActions .primaryBtn, .deckCardActions .dangerBtn{
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
}
.deckCardActions .dangerBtn{
  border-color: rgba(255,80,80,0.35);
  background: rgba(255,80,80,0.12);
}

/* ===== Locked deck slots (when you own fewer cards) ===== */
.slot.locked{
  opacity: .45;
  cursor: not-allowed;
  position: relative;
}
.slot.locked::after{
  content: "LOCKED";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  opacity: .75;
}
.towersSub{ opacity:.85; margin-left:6px; font-size: 12px; }


/* ===== Deck Slot Unlock visuals ===== */
.slot.purchasable{
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.05);
}
.slotLock{
  font-weight: 800;
  font-size: 12px;
  opacity: .75;
  letter-spacing: .08em;
}
.slotUnlock{
  text-align:center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1.1;
}
.slotUnlock span{
  display:inline-block;
  margin-top: 6px;
  font-size: 11px;
  opacity: .85;
}

/* ===== Summoner Bonus Gold Popup ===== */
.goldPop{
  position: fixed;
  transform: translate(-50%, -50%);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  pointer-events: none;
  opacity: 0;
  z-index: 1200;
}
.goldPop.show{
  animation: goldPopUp 1.1s ease forwards;
}
@keyframes goldPopUp{
  0%{ opacity: 0; transform: translate(-50%, -50%) translateY(8px) scale(.98); }
  15%{ opacity: 1; transform: translate(-50%, -50%) translateY(0) scale(1.02); }
  100%{ opacity: 0; transform: translate(-50%, -50%) translateY(-42px) scale(1); }
}

.cardsBody{ max-height:min(70vh,560px); overflow:auto; }

.btnGhost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  padding: 10px 14px;
  border-radius: 12px;
}
.btnGhost:hover{ background: rgba(255,255,255,.12); }


/* ===== Cards modal scrolling (for many cards) ===== */
.cardsBody{
  max-height: 62vh;
  overflow: auto;
  padding-right: 6px;
}
.cardsBody::-webkit-scrollbar{ width: 10px; }
.cardsBody::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}

/* ===== Deck picker scrolling (for many cards) ===== */
.deckPickGrid{
  max-height: 54vh;
  overflow: auto;
  padding-right: 6px;
}
.deckPickGrid::-webkit-scrollbar{ width: 10px; }
.deckPickGrid::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}


/* ===== Summoner requirements block ===== */
.summonerReq{ margin-top: 12px; }
.summonerReqTitle{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .35px;
  text-transform: uppercase;
  opacity: .92;
  margin-bottom: 6px;
}
#summonerReqText{
  line-height: 1.55;
}
#summonerReqText .reqRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  margin: 8px 0;
}
#summonerReqText .reqLeft{display:flex; align-items:center; gap:10px; min-width:0;}
#summonerReqText .reqDot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
#summonerReqText .reqName{ font-weight: 900; font-size: 12px; }
#summonerReqText .reqMeta{ color: var(--muted); font-size: 12px; white-space:nowrap; }


/* ================= Gallery Modal ================= */
.galleryModal{
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
}
.galleryModal .modalBody{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.galleryTop{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.gallerySearch{
  flex:1;
  min-width: 220px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;
}
.gallerySearch::placeholder{ color: rgba(255,255,255,.55); }

.galleryGridWrap{
  flex:1;
  overflow:auto;
  padding-right: 6px;
}
.galleryGridWrap::-webkit-scrollbar{ width: 10px; }
.galleryGridWrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}

.galleryGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.gCard{
  position:relative;
  aspect-ratio: 2 / 3;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  cursor:default;
  user-select:none;
  box-shadow: 0 12px 30px rgba(0,0,0,.30);
  transition: transform .12s ease, filter .12s ease;
}
.gCard:hover{ transform: translateY(-3px); filter: brightness(1.06); }
.gCard img{ width:100%; height:100%; object-fit:contain; display:block; }

.gTip{
  position:absolute;
  left:50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
  transform-origin: bottom center;
  z-index: 20;
}
.gTip b{ display:block; font-size:12px; letter-spacing:.2px; }
.gTip .tLine{ font-size:12px; color: rgba(255,255,255,.82); margin-top:4px; }
.gTip::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform: translateX(-50%);
  border:8px solid transparent;
  border-top-color: rgba(0,0,0,.75);
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,.12));
}

.gCard:hover .gTip{
  opacity:1;
  transform: translateX(-50%) translateY(-2px);
}



/* Cards modal tools: search + counts */
.cardsTools{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.cardsSearch{
  flex:1;
  max-width:360px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  outline:none;
}
.cardsSearch::placeholder{ color: rgba(255,255,255,.55); }
.cardsCounts{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.cardsCounts b{ font-weight:800; }

/* Favorite (heart) button on cards — top right */
.cardFavBtn{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.90);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  z-index:3;
}
.cardFavBtn:hover{ transform: translateY(-1px); }
.cardFavBtn.isOn{
  color: rgba(255,85,135,1);
  border-color: rgba(255,85,135,.35);
  background: rgba(255,85,135,.10);
}


/* ================= Weather System (premium UI) ================= */
.weatherWrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  position:relative;
  isolation:isolate;
}

.weatherChip{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
    /* allow tooltip to render outside the chip */
  overflow: visible;
  isolation:isolate;
}
.weatherChip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); filter: brightness(1.06); }
.weatherChip:active{ transform: translateY(0) scale(.995); }

/* Animated premium edge-glow (no rotating square, angle animates instead of element transform) */
@property --wx { syntax: "<angle>"; inherits: false; initial-value: 180deg; }

.weatherChip::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  clip-path: inset(0 round 18px);
  padding:2px;
  background: conic-gradient(from var(--wx), rgba(82,255,240,.85), rgba(184,107,255,.75), rgba(255,204,51,.55), rgba(82,255,240,.85));
  /* show only the border ring */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.85;
  pointer-events:none;
  z-index:0;
  filter: blur(.2px) saturate(1.15);
  animation: weatherSheen 3.2s linear infinite;
}

.weatherChip::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  clip-path: inset(0 round 18px);
  /* soft inner glow so it feels “alive”, still confined */
  background: radial-gradient(140px 70px at 25% 20%, rgba(82,255,240,.18), transparent 60%),
              radial-gradient(160px 90px at 80% 35%, rgba(184,107,255,.14), transparent 62%);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}

.weatherChip > *{ position:relative; z-index:1; }

@keyframes weatherSheen{
  to{ --wx: 540deg; }
}

.weatherIconBox{
  width:42px; height:42px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.weatherIconBox::after{
  content:"";
  position:absolute;
  inset:-40px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%);
  opacity:.9;
  pointer-events:none;
}

.weatherIcon{
  font-size:16px;
  line-height:1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  position:relative;
  z-index:1;
}

.weatherTimer{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.2px;
  font-variant-numeric: tabular-nums;
  opacity:.95;
  position:relative;
  z-index:1;
}

.weatherMini{ display:flex; flex-direction:column; line-height:1.05; }
.weatherMiniLabel{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.95;
}
.weatherMiniCountdown{
  font-size:12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* Weather icon colorways */
.weather-normal{ background: radial-gradient(circle at 30% 30%, rgba(82,255,240,.35), transparent 60%), rgba(255,255,255,.08); }
.weather-spacestorm{ background: radial-gradient(circle at 30% 30%, rgba(74,163,255,.55), transparent 60%), rgba(255,255,255,.08); }
.weather-antigravity{ background: radial-gradient(circle at 30% 30%, rgba(155,107,255,.55), transparent 60%), rgba(255,255,255,.08); }
.weather-ascension{ background: radial-gradient(circle at 30% 30%, rgba(255,204,51,.55), transparent 60%), rgba(255,255,255,.08); }
.weather-multiverse{ background: radial-gradient(circle at 30% 30%, rgba(255,95,215,.55), transparent 60%), rgba(255,255,255,.08); }


/* ================= Tower hover tooltip ================= */
.goldPlaceholderInner{ position:relative; }

/* Right-side tooltip to avoid getting cut off at the bottom */
.towerTooltip{
  position:absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%);
  width: min(360px, 92vw);
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(10,12,24,0.92);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 30px 120px rgba(0,0,0,0.70);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 1001;
}

/* Show on hover/focus */
.goldPlaceholderInner:hover .towerTooltip,
.goldPlaceholderInner:focus-within .towerTooltip{
  opacity: 1;
  pointer-events: auto;
}

/* Tooltip inner styles (kept) */
.towerTooltip .ttTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.towerTooltip .ttTitle b{ font-size:13px; }
.towerTooltip .ttPill{
  font-size:11px;
  padding:4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  white-space:nowrap;
}
.towerTooltip .ttLine{
  font-size:12px;
  color: var(--muted);
  line-height:1.5;
}
.towerTooltip .ttLine b{ color: rgba(255,255,255,0.90); font-weight:1000; }

/* Tooltip */
.weatherTooltip{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(340px, 92vw);
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(10,12,24,.92);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 120px rgba(0,0,0,.70);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 1001;
}
.weatherTooltip .wtTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.weatherTooltip .wtTitle b{ font-size:13px; }
.weatherTooltip .wtPill{
  font-size:11px;
  padding:4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}
.weatherTooltip .wtLine{
  font-size:12px;
  color: var(--muted);
  line-height:1.5;
}
.weatherTooltip .wtLine b{ color: rgba(255,255,255,.90); font-weight:1000; }

.weatherChip:hover .weatherTooltip,
.weatherChip:focus-within .weatherTooltip{
  display:block;
}

/* "Next weather" ticker (shows briefly every minute after an event) */
.weatherTicker{
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  font-size:12px;
  color: rgba(255,255,255,.92);
  font-variant-numeric: tabular-nums;
  max-width: min(520px, 92vw);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.weatherTicker.pulseIn{ animation: wtPulse .35s ease-out 1; }
@keyframes wtPulse{ from{ transform: translateY(6px); opacity:0; } to{ transform: translateY(0); opacity:1; } }



/* ================= Weather Strike FX (premium) =================
   Applied to deck slots when a special weather successfully triggers a strike.
   Class added by JS: .wxStrike + .wx-<weatherKey> (e.g., wx-spacestorm)
*/
.slot.wxStrike{
  position: relative;
  transform: translateZ(0);
}
.slot.wxStrike::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 18px;
  pointer-events:none;
  z-index: 4;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 35% 25%, rgba(120,220,255,.45), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 70%, rgba(140,90,255,.35), rgba(0,0,0,0) 60%);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  animation: wxRing .95s ease-out 1;
}
.slot.wxStrike::after{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width: 160px;
  height: 160px;
  transform: translateX(-50%) rotate(-10deg);
  pointer-events:none;
  z-index: 5;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.95) 0 3px,
      rgba(255,255,255,0) 3px 10px);
  clip-path: polygon(55% 0%, 62% 18%, 53% 18%, 68% 46%, 56% 46%, 73% 78%, 40% 52%, 52% 52%, 38% 26%, 49% 26%);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)) drop-shadow(0 0 24px rgba(140,220,255,.45));
  opacity: 0;
  animation: wxBolt .95s ease-out 1;
}

/* Theme variants */
.slot.wxStrike{ --wx1: rgba(120,220,255,.55); --wx2: rgba(255,255,255,.85); --wxGlow: rgba(120,220,255,.55); }
.slot.wxStrike.wx-spacestorm{ --wx1: rgba(120,220,255,.65); --wxGlow: rgba(90,170,255,.70); }
.slot.wxStrike.wx-antigravity{ --wx1: rgba(175,120,255,.60); --wxGlow: rgba(175,120,255,.70); }
.slot.wxStrike.wx-ascension{ --wx1: rgba(255,210,120,.60); --wxGlow: rgba(255,210,120,.72); }
.slot.wxStrike.wx-multiverse{ --wx1: rgba(255,110,220,.55); --wxGlow: rgba(185,120,255,.70); }

.slot.wxStrike::before{
  background:
    radial-gradient(closest-side, var(--wx2), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 35% 25%, var(--wx1), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 70%, var(--wxGlow), rgba(0,0,0,0) 60%);
}
.slot.wxStrike::after{
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)) drop-shadow(0 0 28px var(--wxGlow));
}

@keyframes wxRing{
  0%{ opacity:0; transform: scale(.92); }
  25%{ opacity:1; transform: scale(1.02); }
  100%{ opacity:0; transform: scale(1.14); }
}
@keyframes wxBolt{
  0%{ opacity:0; transform: translateX(-50%) translateY(10px) rotate(-12deg) scale(.9); }
  18%{ opacity:1; }
  60%{ opacity:.85; transform: translateX(-50%) translateY(0) rotate(-8deg) scale(1); }
  100%{ opacity:0; transform: translateX(-50%) translateY(-6px) rotate(-6deg) scale(1.05); }
}


/* Weather mutations (visuals) */
.mut-thunder{
  --mut-gradient: conic-gradient(from var(--mut-a), #bfe7ff, #4aa3ff, #ffffff, #4aa3ff, #bfe7ff);
  --mut-glow: 0.95;
  --mut-speed: 2.1s;
}
.mut-blackhole{
  --mut-gradient: conic-gradient(from var(--mut-a), #0b0f2a, #9b6bff, #000000, #4aa3ff, #0b0f2a);
  --mut-glow: 1.05;
  --mut-speed: 1.6s;
}
.mut-godly{
  --mut-gradient: conic-gradient(from var(--mut-a), #fff7c7, #ffcc33, #ffffff, #ff9a3c, #fff7c7);
  --mut-glow: 1.10;
  --mut-speed: 1.4s;
}
.mut-heavenly{
  --mut-gradient: conic-gradient(from var(--mut-a), #ffffff, #52fff0, #b86bff, #ff5fd7, #ffffff);
  --mut-glow: 1.18;
  --mut-speed: 1.2s;
}

/* ================= Notifications System ================= */
.notifBtn{
  position:relative;
  /* Match the rest of the header buttons (icon + text) */
  width:auto;
  justify-content:flex-start;
}
.notifBtn .notifBell{
  font-size:18px;
  line-height:1;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.notifBtn .btnLabel{
  font-size:13px;
  letter-spacing:.2px;
}
.notifBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 1000;
  background: rgba(255,85,135,.92);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.95);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  pointer-events:none;
}

.notifModal{
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
}
.notifBody{ flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ================= Inventory tabs layout (like Notifications) ================= */
.invModal{
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
}
.invModal .modalBody{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.invLayout{
  flex:1;
  display:flex;
  gap:12px;
  overflow:hidden;
}
.invTabs{
  width: 240px;
  min-width: 220px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:auto;
}
.invTabs::-webkit-scrollbar{ width: 10px; }
.invTabs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.invTab{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:16px;
  background: rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-weight:1000;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, background .12s ease, filter .12s ease;
}
.invTab:hover{ transform: translateY(-1px); background: rgba(0,0,0,.30); filter: brightness(1.05); }
.invTab.isActive{
  background: rgba(82,255,240,.10);
  border-color: rgba(82,255,240,.20);
}
.invPanel{
  flex:1;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:auto;
  padding:12px;
}
.invPanel::-webkit-scrollbar{ width: 10px; }
.invPanel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.invTabBadge{ margin-left:8px; }
@media (max-width: 900px){
  .invLayout{ flex-direction:column; }
  .invTabs{ width:100%; min-width:0; flex-direction:row; overflow:auto; }
  .invTab{ justify-content:center; }
}
.notifLayout{
  flex:1;
  display:flex;
  gap:12px;
  overflow:hidden;
}
.notifTabs{
  width: 240px;
  min-width: 220px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  overflow:auto;
}
.notifTabs::-webkit-scrollbar{ width: 10px; }
.notifTabs::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.notifTab{
  width:100%;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.90);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.notifTab:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.notifTab.isActive{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}
.notifTab .muted{ font-size: 12px; }

.notifTabBadge{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(255,85,135,.12);
  border: 1px solid rgba(255,85,135,.35);
  color: rgba(255,255,255,.92);
  font-variant-numeric: tabular-nums;
}

.notifPanel{
  flex:1;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:auto;
}
.notifPanel::-webkit-scrollbar{ width: 10px; }
.notifPanel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.notifPanel h3{
  margin:0 0 10px;
  font-size: 14px;
  letter-spacing: .2px;
}
.notifPanel .muted{ color: var(--muted); }

.missionList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.missionItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}
.missionLeft{ min-width:0; }
.missionTitle{
  font-weight: 1000;
  font-size: 12.5px;
  line-height: 1.3;
}
.missionReward{ font-size:12px; color: rgba(255,255,255,.84); margin-top:6px; }
.missionRight{ display:flex; align-items:center; gap:10px; flex: 0 0 auto; }
.missionStatus{
  font-size:11px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.86);
}
.missionStatus.done{
  background: rgba(80,255,160,.10);
  border-color: rgba(80,255,160,.30);
}
.missionStatus.claimed{
  background: rgba(120,190,255,.10);
  border-color: rgba(120,190,255,.30);
}
.claimBtn{
  padding:8px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.94);
  font-weight: 900;
  cursor:pointer;
}
.claimBtn:hover{ transform: translateY(-1px); filter: brightness(1.06); }

.luckyBox{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.luckyTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.luckyTickets{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  font-variant-numeric: tabular-nums;
}
.luckyActions{ display:flex; gap:10px; flex-wrap:wrap; }
.luckyActions .btn{ min-width: 180px; }

.luckyOdds{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding:12px;
}
.luckyOddsRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.luckyOddsRow:last-child{ border-bottom:none; }
.luckyOddsRow b{ font-weight: 1000; }

.luckyResultModal{
  width:min(440px, 94vw);
  max-width:440px;
  max-height: calc(100vh - 60px);
  display:flex;
  flex-direction:column;
}
.luckyResultBody{
  text-align:center;
  padding:12px;
  overflow:auto;
}
.luckyResultCard{
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.luckyResultName{
  font-size:16px;
  font-weight:1000;
  margin-bottom:8px;
  letter-spacing:.2px;
}
.luckyResultImgWrap{
  width: 100%;
  /* Match the real card art ratio used across the game (prevents any cropping) */
  aspect-ratio: 2.75 / 3.85;
  max-width: 260px;
  margin: 0 auto 8px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0; /* padding goes on the image so the full card always fits */
}
.luckyResultImgWrap img{
  width:100%;
  height:100%;
  display:block;
  object-fit: contain !important;
  padding: 10px;
}

/* Lucky Draw — Flip reveal stage (ensures reward image never crops) */
.flipStage,
.flipCard,
.flipInner,
.flipFace{
  width:100%;
  height:100%;
}
.flipStage{ position:relative; display:flex; align-items:center; justify-content:center; }
.flipCard{ perspective: 1200px; }
.flipInner{
  position:relative;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.2,.85,.15,1);
}
.flipCard.isRevealed .flipInner{ transform: rotateY(180deg); }

.flipFace{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius: 14px;
  overflow:hidden;
}
.flipFace img{
  width:100%;
  height:100%;
  object-fit: contain !important;
  display:block;
  padding: 10px;
}
.flipBack{ transform: rotateY(0deg); }
.flipFront{ transform: rotateY(180deg); }

.flipScanLine{
  position:absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  top: 18%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(82,255,240,.9), rgba(255,255,255,0));
  filter: drop-shadow(0 0 18px rgba(82,255,240,.55));
  pointer-events:none;
}
.flipGlow{
  position:absolute;
  inset: -14px;
  border-radius: 18px;
  opacity: 0;
  background: radial-gradient(circle at 50% 40%, rgba(82,255,240,.18), rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.flipStage.isCharging .flipGlow{ opacity: 1; }
.flipStage.isReady .flipScanLine{
  opacity: 1;
  animation: luckyScan 1.05s ease-in-out infinite;
}

/*
  Fix: occasional “glitch line” during/after the flip.
  Some renderers keep the scanline (or a thin seam where it was) visible
  when the back/front faces swap. We only want the scanline during the
  charging phase, so force-hide it once the card is revealed.
*/
.flipCard.isRevealed ~ .flipScanLine{
  opacity: 0 !important;
  animation: none !important;
}

/* Extra anti-seam hardening for 3D flips */
.flipInner{ will-change: transform; transform: translateZ(0); }
.flipFace{ -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flipBack{ transform: rotateY(0deg) translateZ(0.1px); }
.flipFront{ transform: rotateY(180deg) translateZ(0.1px); }
@keyframes luckyScan{
  0%{ transform: translateY(-34px); opacity:0; }
  25%{ opacity:1; }
  100%{ transform: translateY(240px); opacity:0; }
}

/* Allow mutation glow to bleed in Lucky Draw result */
.luckyResultImgWrap.mutGlow{ overflow: visible; }

.luckyResultBody .okRow{ margin-top:10px; padding:10px 0 2px; }


/* ===============================
   HOW TO PLAY (BEGINNER GUIDE)
   =============================== */

.howtoBtn .howtoIcon{ margin-right: 6px; }

.howtoModal{
  width: min(980px, 96vw);
  max-width: 980px;
}

.howtoBody{ padding: 12px; }

.howtoLayout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  align-items: start;
}

.howtoTabs{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.howtoTab{
  text-align: left;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.howtoTab:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }

.howtoTab.isActive{
  border-color: rgba(82,255,240,.28);
  box-shadow: 0 0 0 1px rgba(82,255,240,.15), 0 16px 40px rgba(0,0,0,.45);
}

.howtoTabTop{
  display: flex;
  align-items: center;
  gap: 10px;
}

.howtoTabIcon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.howtoTabTitle{ font-weight: 900; letter-spacing: .2px; }

.howtoTabHint{ margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.70); line-height: 1.35; }

.howtoRight{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: 12px;
}

.howtoTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.howtoStepTitle{ font-size: 18px; font-weight: 1000; letter-spacing: .2px; }

.howtoDots{ display: flex; gap: 6px; }
.howtoDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
}
.howtoDot.on{ background: rgba(82,255,240,.75); }

.howtoContent{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.86);
  line-height: 1.55;
}

.howtoContent h4{ margin: 0 0 6px; font-size: 14px; letter-spacing: .2px; }
.howtoContent ul{ margin: 8px 0 0 18px; }
.howtoContent li{ margin: 6px 0; }
.howtoContent .howtoCallout{
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
}

.howtoFooter{
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.howtoDontShow{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

.howtoDontShow input{
  width: 16px;
  height: 16px;
}

.howtoNav{ display:flex; gap: 8px; }

@media (max-width: 720px){
  .howtoLayout{ grid-template-columns: 1fr; }
  .howtoTabs{
    flex-direction: row;
    overflow: auto;
    padding-bottom: 6px;
  }
  .howtoTab{ min-width: 220px; }
  .howtoFooter{ flex-direction: column; align-items: stretch; }
  .howtoNav{ justify-content: flex-end; }
}


/* ===============================
   MOBILE QUALITY-OF-LIFE
   - Better tap/scroll behavior
   - Less accidental selection/callouts
   =============================== */
:root{ color-scheme: dark; }

/* Disable iOS callout + text selection on key interactive UI */
button, .invBtn, .btn, .card, .cardThumb, .rewardTile, .slot, .deckCard, .deckPickItem, .heroInner, img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* More responsive taps */
button, .invBtn, .btn, .card, .cardThumb, .rewardTile, .slot, .deckCard, .deckPickItem, .heroInner{
  touch-action: manipulation;
}

/* Prevent rubber-band + accidental horizontal pan */
html, body{
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* Make modals fit better on small screens */
@media (max-width: 600px){
  .wrap{ width: min(1180px, 96vw); padding: 12px; }
  .headerActions{ gap: 8px; }
  .wallet{ padding: 9px 12px; border-radius: 14px; }
  .invBtn{ padding: 9px 12px; border-radius: 14px; }

  .shop{
    height: clamp(360px, 56vh, 460px);
    border-radius: 22px;
  }
  .viewport{ left: 14px; right: 14px; }

  /* Smaller shop cards on mobile so you can actually see everything */
  .card{
    width: 160px;
    height: 220px;
    border-radius: 22px;
  }
  .cardBack{ inset: 12px 12px 52px 12px; border-radius: 18px; }
  .meta{ left: 12px; right: 12px; bottom: 10px; padding: 10px 12px; border-radius: 16px; font-size: 11px; }

  .slotGrid{ gap: 10px; }

  /* Modal padding + max height */
  .modalOverlay{ padding: 12px; }
  .modal{ width: min(920px, 98vw); border-radius: 18px; }
  .modalBody{ padding: 14px; }

  /* Reward cards grid becomes more friendly */
  .rewardGrid{ gap: 12px; padding: 12px; --cols: 3; }
}

/* Ultra small phones */
@media (max-width: 420px){
  .rewardGrid{ --cols: 2; }
}


/* ===============================
   MOBILE ROTATE OVERLAY
   - Shows a full-screen message on mobile portrait
   =============================== */
.rotateOverlay{
  position: fixed;
  inset: 0;
  z-index: 100000; /* above everything */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(12px);
}
.rotateOverlay.show{ display:flex; }

.rotateCard{
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10,12,24,.90);
  box-shadow: 0 30px 120px rgba(0,0,0,.75);
  padding: 18px 18px 16px;
  text-align: center;
}
.rotateIcon{
  font-size: 40px;
  line-height: 1;
  margin: 6px 0 10px;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
.rotateTitle{
  font-weight: 1000;
  letter-spacing: .2px;
  font-size: 18px;
  margin-bottom: 6px;
}
.rotateText{
  color: rgba(255,255,255,.86);
  font-size: 13px;
  line-height: 1.45;
  margin: 0 auto;
}
.rotateHint{
  margin-top: 10px;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

/* When rotate overlay is visible, prevent accidental background scrolling */
body.rotateLock{ overflow: hidden; }

/* ===============================
   MOBILE MODAL FIT PATCH (2026-02-02)
   - Makes ALL modals fit within the viewport (no cut-off content on phones)
   - Adds internal scrolling for long modal content
   - Improves Deck "Select a Card" modal layout on small screens
   =============================== */

/* All screens: keep modal header visible and body scrollable */
.modal{
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
}
.modalHead{ flex: 0 0 auto; }
.modalBody{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Small screens: tighter padding + stack complex modal layouts */
@media (max-width: 600px){
  .modalOverlay{
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-top: max(12px, env(safe-area-inset-top));
  }

  .modal{
    max-height: calc(100vh - 18px);
  }

  /* Deck Picker: stack left/right, reduce grid columns, keep details visible */
  .deckBody{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .deckPickLeft{ min-height: 0; }
  .deckPickGrid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 38vh;
  }
  .deckPickRight{
    padding: 12px;
  }
  .deckDetailsCard img{
    width: 110px;
  }
  .deckDetailsName{
    font-size: 16px;
  }

  /* Inventory / Summoners / Notifications: prevent side-panels from causing cut-off */
  .invLayout{ flex-direction: column; }
  .invTabs{
    width: 100%;
    min-width: 0;
    flex-direction: row;
    gap: 8px;
    overflow: auto;
    padding-right: 6px;
  }
  .invTabs::-webkit-scrollbar{ height: 10px; }
  .invTabs::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
  }

  .summonersLayout{ flex-direction: column; }
  .summonersLeft{ min-width: 0; }
  .summonersRight{ padding: 12px; }

  .notifLayout{ flex-direction: column; }
  .notifTabs{
    width: 100%;
    min-width: 0;
    flex-direction: row;
    gap: 8px;
    overflow: auto;
    padding-right: 6px;
  }
  .notifTabs::-webkit-scrollbar{ height: 10px; }
  .notifTabs::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.14);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
  }
}

/* ===============================
   CLEAN GALAXY MODE (NO HARD BORDERS)
   =============================== */

/* Remove visible container borders that can look like "background frames" */
header,
.shop,
.slotPanel,
.viewport,
.heroImgWrap,
.goldPlaceholderInner,
.modal,
.modalOverlay{
  border: none !important;
}

/* Replace hard borders with a soft edge + deep shadow */
.shop,
.slotPanel,
.heroImgWrap,
.goldPlaceholderInner,
.modal{
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 25px 80px rgba(0,0,0,0.65);
}

/* Make header blend into space */
header{
  background: linear-gradient(
    180deg,
    rgba(5,7,18,0.88),
    rgba(5,7,18,0.55)
  ) !important;
  backdrop-filter: blur(16px);
}

/* Remove inner framing feel */
.viewport{
  background: transparent !important;
}

/* Optional: smoother section edges */
.shop,
.slotPanel,
.modal,
.heroImgWrap{
  border-radius: 26px;
}


/* ===============================
   BACKGROUND MOTION (SAFE)
   =============================== */
@keyframes bgDrift{
  0%{
    background-position:
      0 0, 0 0, 0 0, 0 0, 0 0,
      0 0, 0 0, 0 0,
      0 0, 0 0, 0 0,
      0 0, 0 0,
      0 0,
      0 0;
  }
  100%{
    background-position:
      0 -520px, 0 -420px, 0 -340px, 0 -260px, 0 -180px,
      0 -80px, 0 -60px, 0 -40px,
      0 0, 0 0, 0 0,
      0 0, 0 0,
      0 0,
      0 0;
  }
}
@keyframes bgTwinkle{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.06); }
}



/* ===========================
   PERFORMANCE PATCH (FAST)
   - Removes fixed/animated background layers
   - Disables expensive backdrop-filter blurs
   =========================== */

body{
  background-attachment: scroll !important;
}

/* Lightweight starfield (static, GPU-friendly) */
body::before{
  position:absolute !important;
  inset:0 !important;
  opacity:.55 !important;
  pointer-events:none;
  z-index:-2;

  /* No parallax, no blend, no heavy filters */
  animation:none !important;
  mix-blend-mode: normal !important;
  filter:none !important;
  transform:none !important;

  background:
    radial-gradient(900px 520px at 28% 22%, rgba(184,107,255,.14), transparent 62%),
    radial-gradient(820px 520px at 78% 76%, rgba(82,255,240,.12), transparent 64%),
    radial-gradient(760px 460px at 60% 24%, rgba(255,204,51,.08), transparent 66%),

    /* Simple star sprinkle using repeating gradients (cheap) */
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,.40), transparent 55%),
    radial-gradient(1px 1px at 36% 38%, rgba(255,255,255,.38), transparent 55%),
    radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,.52), transparent 55%),
    radial-gradient(1px 1px at 58% 62%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(1px 1px at 72% 34%, rgba(255,255,255,.42), transparent 55%),
    radial-gradient(1px 1px at 86% 14%, rgba(255,255,255,.52), transparent 55%),
    radial-gradient(1px 1px at 92% 78%, rgba(255,255,255,.36), transparent 55%),

    radial-gradient(2px 2px at 18% 28%, rgba(255,255,255,.50), transparent 60%),
    radial-gradient(2px 2px at 66% 44%, rgba(255,255,255,.48), transparent 60%),
    radial-gradient(2px 2px at 88% 22%, rgba(255,255,255,.52), transparent 60%);
}

/* Remove film grain (it’s surprisingly expensive on some GPUs) */
body::after{
  display:none !important;
}

/* Backdrop blur is a top source of lag in browsers */
*{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Reduce motion for everyone a bit (keeps UI snappy) */
@media (prefers-reduced-motion: no-preference){
  /* If some components animate heavily, this helps without killing all flair */
  *{
    scroll-behavior: auto;
  }
}


/* ================= Inventory -> Cards tab header ================= */
.cardsHeaderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 6px 2px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  margin-bottom: 10px;
}
.cardsHeaderRow .cardsTitle{
  font-size: 16px;
  letter-spacing: .2px;
}
@media (max-width: 600px){
  .cardsHeaderRow{
    flex-direction: column;
    align-items: flex-start;
  }
  .cardsHeaderRow #sellAllCardsBtn{
    width: 100%;
  }
}


/* ===============================
   MUTATION MACHINE (Notifications)
   =============================== */
.mmMachine{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mmTopRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.mmTitle{
  font-weight: 1000;
  letter-spacing:.2px;
}
.mmSub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.mmSlotRow{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
}
.mmSlot{
  width: 160px;
  aspect-ratio: 2/3;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, filter .12s ease, background .12s ease;
}
.mmSlot:hover{ transform: translateY(-1px); filter: brightness(1.06); background: rgba(255,255,255,0.06); }
.mmSlotImg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  display:block;
}
.mmSlotEmpty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  padding: 14px;
  color: rgba(255,255,255,0.86);
}
.mmSlotEmpty .plus{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.22);
  display:flex; align-items:center; justify-content:center;
  font-weight: 1000;
  font-size: 24px;
}
.mmSlotMeta{
  flex: 1;
  min-width: 220px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  padding: 12px;
}
.mmStatGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.mmStat{
  padding:10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.mmStat .k{ font-size: 11px; color: var(--muted); }
.mmStat .v{ font-weight: 1000; margin-top: 2px; }

.mmProgress{
  margin-top: 12px;
}
.mmProgressBar{
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  overflow:hidden;
}
.mmProgressFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(82,255,240,0.35), rgba(255,85,135,0.35));
  filter: saturate(1.2);
  transition: width .25s linear;
}
.mmProgressText{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.86);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.mmControls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top: 8px;
}

.mmRadioGroup{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
}
.mmRadioOpt{
  position:relative;
  cursor:pointer;
  user-select:none;
}
.mmRadioOpt input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.mmRadioBox{
  min-width: 170px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.mmRadioBox .t{
  font-weight: 1000;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.95);
}
.mmRadioBox .s{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
}
.mmRadioOpt:hover .mmRadioBox{
  transform: translateY(-1px);
  border-color: rgba(82,255,240,0.28);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.mmRadioOpt input:checked + .mmRadioBox{
  border-color: rgba(82,255,240,0.55);
  background: linear-gradient(180deg, rgba(82,255,240,0.18), rgba(0,0,0,0.22));
  box-shadow: 0 18px 46px rgba(0,0,0,0.55);
}
.mmRadioOpt input:disabled + .mmRadioBox{
  opacity: .55;
  cursor:not-allowed;
  filter: grayscale(.2);
}
@media (max-width: 520px){
  .mmRadioBox{ min-width: 100%; }
}

.mmSelect{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  cursor: pointer;
  outline: none;
}
.mmSelect:focus{ box-shadow: 0 0 0 3px rgba(82,255,240,0.22); }
.mmStartBtn{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(82,255,240,0.35);
  background: rgba(82,255,240,0.14);
  color: rgba(255,255,255,0.95);
  font-weight: 1000;
  cursor:pointer;
}
.mmStartBtn:disabled{
  opacity: .45;
  cursor:not-allowed;
  filter: grayscale(.2);
}

/* Slightly larger result card image for Mutation Result, but still comfy on mobile */
.mmResultModal .luckyResultImgWrap{
  max-width: 300px;
}


/* ===============================
   MUTATION MACHINE — REVEAL ANIMATION
   Card flip + energy charge + crack burst
   Back image uses cards/card.png
   =============================== */
.mmFlipCard{
  width:100%;
  height:100%;
  position:relative;
  perspective: 1200px;
}
.mmFlipInner{
  width:100%;
  height:100%;
  position:relative;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.2,.85,.15,1);
}
.mmFlipCard.revealed .mmFlipInner{
  transform: rotateY(180deg);
}
.mmFlipFace{
  position:absolute;
  inset:0;
  border-radius: inherit;
  backface-visibility: hidden;
  overflow:hidden;
}
.mmFlipBack{
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.15);
}
.mmFlipBack img,
.mmFlipFront img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}
.mmFlipFront{
  transform: rotateY(180deg);
  position:relative;
}

/* Energy charge glow */
.mmFlipCard.energyCharge::before{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: calc(22px + 18px);
  background:
    radial-gradient(140px 180px at 50% 55%, rgba(82,255,240,.48), transparent 68%),
    radial-gradient(160px 220px at 50% 50%, rgba(184,107,255,.22), transparent 70%);
  filter: blur(18px) saturate(1.15);
  opacity: 0;
  pointer-events:none;
  animation: mmChargeUp 1.05s ease-out forwards;
}
@keyframes mmChargeUp{
  0%{ opacity:0; transform: scale(.86); }
  55%{ opacity:.95; transform: scale(1.04); }
  100%{ opacity:0; transform: scale(1.18); }
}

/* Crack/burst */
.mmMutationBurst{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.mmFlipCard.revealed .mmMutationBurst::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), transparent 58%),
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(circle at 62% 60%, rgba(255,255,255,.45), transparent 64%);
  mix-blend-mode: screen;
  animation: mmBurst .45s ease-out forwards;
}
@keyframes mmBurst{
  0%{ opacity:0; transform: scale(.65); }
  70%{ opacity:1; transform: scale(1.12); }
  100%{ opacity:0; transform: scale(1.38); }
}


/* ===============================
   WEATHER STRIKE VISUAL EFFECT
   =============================== */
.weatherStrike {
  position: absolute;
  inset: -8px;
  pointer-events: none;
  border-radius: inherit;
  z-index: 5;
  animation: strikeFlash 1.2s ease-out forwards;
}
.weatherStrike::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: blur(14px);
  opacity: .85;
}
.weatherStrike.thunder::before {
  background: radial-gradient(circle at 50% 50%, rgba(120,180,255,.9), transparent 65%);
  box-shadow: 0 0 35px rgba(120,180,255,.95), inset 0 0 25px rgba(160,220,255,.85);
}
.weatherStrike.blackhole::before {
  background: radial-gradient(circle at center, rgba(30,30,60,.95), transparent 70%);
  box-shadow: 0 0 45px rgba(80,80,160,.9);
  animation: blackholePulse 1.2s ease-out forwards;
}
.weatherStrike.godly::before {
  background: radial-gradient(circle, rgba(255,220,120,.95), transparent 65%);
  box-shadow: 0 0 45px rgba(255,220,120,1);
}
.weatherStrike.heavenly::before {
  background: conic-gradient(from 0deg, #9b6bff, #52fff0, #ffcc33, #9b6bff);
  filter: blur(18px);
  opacity: .9;
}
@keyframes strikeFlash {
  0% { opacity: 0; transform: scale(.85); }
  15% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.25); }
}
@keyframes blackholePulse {
  0% { transform: scale(.9); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}


/* ================= WEATHER STRIKE FX (OVERRIDE: more obvious + sound) =================
   Applied by JS: .wxStrike plus optional .wx-<weatherKey>
   Works on: .slot.assigned and .cardThumb
*/
#wxFlash{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index: 2000;
  opacity:0;
  background:
    radial-gradient(900px 520px at 50% 40%, rgba(255,255,255,.22), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(120,220,255,.10), rgba(140,90,255,.08));
  mix-blend-mode: screen;
}
#wxFlash.on{ animation: wxFlash .52s ease-out 1; }
@keyframes wxFlash{
  0%{ opacity:0; }
  22%{ opacity:1; }
  100%{ opacity:0; }
}

/* Base accent per weather key (fallbacks are fine) */
.wx-spacestorm{ --wxA: rgba(120,220,255,.92); --wxB: rgba(255,255,255,.85); }
.wx-antigravity{ --wxA: rgba(180,120,255,.90); --wxB: rgba(255,255,255,.80); }
.wx-ascension{ --wxA: rgba(82,255,240,.92); --wxB: rgba(255,255,255,.82); }
.wx-multiverse{ --wxA: rgba(255,95,215,.88); --wxB: rgba(255,255,255,.78); }
.wxStrike{ --wxA: rgba(255,255,255,.85); --wxB: rgba(120,220,255,.65); }

/* Strike animation target */
.slot.wxStrike,
.cardThumb.wxStrike{
  position: relative;
  transform: translateZ(0);
  animation: wxJolt .38s ease-out 1;
}
@keyframes wxJolt{
  0%{ transform: translateZ(0) scale(1); filter: brightness(1); }
  20%{ transform: translateZ(0) scale(1.04) rotate(-0.6deg); filter: brightness(1.45); }
  55%{ transform: translateZ(0) scale(1.02) rotate(0.6deg); filter: brightness(1.20); }
  100%{ transform: translateZ(0) scale(1) rotate(0deg); filter: brightness(1); }
}

/* Ring burst */
.slot.wxStrike::before,
.cardThumb.wxStrike::before{
  content:"";
  position:absolute;
  inset:-14px;
  border-radius: inherit;
  pointer-events:none;
  z-index: 8;
  background:
    radial-gradient(closest-side, var(--wxB), rgba(0,0,0,0) 70%),
    radial-gradient(circle at 35% 25%, var(--wxA), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 70%, rgba(140,90,255,.45), rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  filter: blur(0.6px) saturate(1.25);
  animation: wxRing2 1.05s ease-out 1;
}
@keyframes wxRing2{
  0%{ opacity:0; transform: scale(.88); }
  18%{ opacity:1; transform: scale(1); }
  100%{ opacity:0; transform: scale(1.25); }
}

/* Lightning bolt slash */
.slot.wxStrike::after,
.cardThumb.wxStrike::after{
  content:"";
  position:absolute;
  left:50%;
  top:-22px;
  width: 200px;
  height: 220px;
  transform: translateX(-50%) rotate(-14deg);
  pointer-events:none;
  z-index: 9;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0),
      var(--wxA),
      rgba(255,255,255,.95),
      var(--wxA),
      rgba(0,0,0,0)
    );
  filter: blur(0.4px);
  mix-blend-mode: screen;
  clip-path: polygon(50% 0%, 62% 18%, 56% 22%, 74% 42%, 52% 56%, 62% 66%, 40% 86%, 48% 100%, 26% 78%, 42% 62%, 34% 52%, 46% 38%, 38% 28%);
  animation: wxBolt2 1.05s ease-out 1;
}
@keyframes wxBolt2{
  0%{ opacity:0; transform: translateX(-50%) translateY(-10px) rotate(-14deg) scale(.88); }
  16%{ opacity:1; transform: translateX(-50%) translateY(0) rotate(-14deg) scale(1); }
  100%{ opacity:0; transform: translateX(-50%) translateY(18px) rotate(-14deg) scale(1.12); }
}


/* ===============================
   FLOATING / SCROLL-FOLLOW TOWER (CENTERED)
   - Stays bottom-center (never bottom-right)
   - Scroll UP: rises into view (.isShown)
   - Scroll DOWN: drops out of view (still fixed, but hidden)
   =============================== */

.goldPlaceholder.isFloating{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%) translateY(18px) scale(.98);
  width: auto !important;
  margin: 0 !important;
  z-index: 20;
  pointer-events: none; /* prevents blocking UI behind except inner */
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}

/* allow clicking the tower itself */
.goldPlaceholder.isFloating .goldPlaceholderInner{
  pointer-events: auto;
}

/* shown (rises) */
.goldPlaceholder.isFloating.isShown{
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* instant toggle helper (prevents jank on mode switch) */
.goldPlaceholder.isFloating.isInstant{
  transition: none !important;
}

/* mobile tuning */
@media (max-width:768px){
  .goldPlaceholder.isFloating{
    bottom: 12px;
    transform: translateX(-50%) translateY(18px) scale(.92);
  }
  .goldPlaceholder.isFloating.isShown{
    transform: translateX(-50%) translateY(0) scale(.92);
  }
}