/* ==========================================================================
   Shop panel, player bar, champion cards, sell overlay
   ========================================================================== */

.shop-panel {
  left: 50%;
  bottom: 0.55rem;
  translate: -50% 0;
  width: 63rem;
  padding: 0.35rem 0.55rem 0.55rem;
  animation: riseIn 0.5s var(--ease-out);
  transition: filter 0.3s, box-shadow 0.3s;
}
.shop-panel.locked { box-shadow: 0 0 0 1px rgba(232, 193, 112, 0.5), 0 0 1.6rem rgba(232, 193, 112, 0.18), var(--shadow); }

/* ---------- Player bar -------------------------------------------------- */
.shop-top { padding: 0 0.1rem 0.35rem; }
.player-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; height: 2.2rem; }
.pb-left { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.pb-level { display: flex; align-items: center; gap: 0.55rem; }
.pb-odds { display: flex; gap: 0.35rem; font-size: 0.66rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-odd { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.pb-odd.zero { opacity: 0.3; }
.pb-level-badge {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.12rem 0.55rem;
  border-radius: 0.35rem;
  background: linear-gradient(180deg, #252b56, #12152f);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pb-level-lv { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text-3); text-transform: uppercase; }
.pb-level-num { font-family: var(--font-num); font-weight: 900; font-size: 1.15rem; color: var(--gold-hi); line-height: 1; }
.pb-level.level-up .pb-level-badge { animation: levelUp 0.9s var(--ease-out); }
@keyframes levelUp { 0% { box-shadow: 0 0 0 0 rgba(127, 216, 255, 0.9); transform: scale(1.25); } 100% { box-shadow: 0 0 0 1rem rgba(127, 216, 255, 0); transform: none; } }
.pb-xp { display: flex; align-items: center; gap: 0.5rem; }
.pb-xp-bar { position: relative; width: 6.5rem; height: 0.5rem; border-radius: 999px; background: rgba(0, 0, 0, 0.55); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.pb-xp-fill { position: absolute; inset: 0; transform-origin: left; background: linear-gradient(90deg, #2c6fd6, #5fb1ff 60%, #b9e4ff); box-shadow: 0 0 0.6rem rgba(95, 177, 255, 0.7); transition: transform 0.5s var(--ease-out); }
.pb-level.max .pb-xp-fill { background: linear-gradient(90deg, #b98331, #f3d58a); }
.pb-xp-text { font-size: 0.72rem; font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pb-center { display: flex; justify-content: center; }
.pb-gold {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.12rem 0.9rem 0.12rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 40, 8, 0.8), rgba(24, 16, 4, 0.85));
  border: 1px solid rgba(255, 214, 107, 0.55);
  box-shadow: 0 0 1rem rgba(255, 196, 80, 0.18), inset 0 1px 0 rgba(255, 240, 200, 0.12);
}
.pb-coin { font-size: 1.45rem; filter: drop-shadow(0 0 0.35rem rgba(255, 200, 80, 0.7)); }
.pb-gold-num { font-family: var(--font-num); font-weight: 900; font-size: 1.35rem; color: #ffe08a; min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 0 0.6rem rgba(255, 200, 80, 0.6); }
.pb-gold.gain .pb-gold-num { animation: bump 0.45s var(--ease-back); }
.pb-gold.gain .pb-coin { animation: spin 0.6s var(--ease-out); }
.pb-gold.spend .pb-gold-num { animation: bump 0.3s ease; }
.pb-pips { display: flex; gap: 0.18rem; margin-left: 0.2rem; }
.pb-pip { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); transition: background 0.3s, box-shadow 0.3s; }
.pb-pip.on { background: radial-gradient(circle at 35% 30%, #fff4c4, #f3c44f 60%, #a86a12); box-shadow: 0 0 0.35rem rgba(255, 200, 80, 0.8); }
.pb-float { position: absolute; right: -1.4rem; top: -0.1rem; font-family: var(--font-num); font-weight: 900; font-size: 0.95rem; pointer-events: none; animation: floatUp 1s ease-out forwards; }
.pb-float.up { color: #ffe08a; text-shadow: 0 0 0.5rem rgba(255, 200, 80, 0.9); }
.pb-float.down { color: #ff9aa5; }
.pb-right { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.pb-hp, .pb-board, .pb-streak {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.14rem 0.55rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 800;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}
.pb-hp .ico { color: #ff5d6d; filter: drop-shadow(0 0 0.3rem rgba(255, 77, 94, 0.7)); }
.pb-hp.low { color: #ff8a96; border-color: rgba(255, 77, 94, 0.5); animation: breathe 1.4s ease-in-out infinite; }
.pb-board .ico { color: var(--gold); }
.pb-board.under { border-color: rgba(93, 224, 138, 0.6); color: #b6ffcf; box-shadow: 0 0 0.7rem rgba(93, 224, 138, 0.35); animation: breathe 1.6s ease-in-out infinite; }
.pb-board.over { border-color: rgba(255, 77, 94, 0.6); color: #ffb3bc; }
.pb-streak.win { color: #ffb36b; }
.pb-streak.win .ico { color: #ff8a3d; filter: drop-shadow(0 0 0.3rem rgba(255, 130, 50, 0.8)); }
.pb-streak.loss { color: #bfeaff; }
.pb-streak.loss .ico { color: #7fd8ff; }

/* ---------- Body ------------------------------------------------------ */
.shop-body { display: flex; gap: 0.5rem; align-items: stretch; }
.shop-actions { display: flex; flex-direction: column; gap: 0.45rem; width: 9rem; flex: none; }
.shop-btn {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #1e2455, #10132f);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s var(--ease-out), box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.shop-btn:hover { transform: translateY(-0.1rem); border-color: var(--gold); box-shadow: 0 0 1rem rgba(232, 193, 112, 0.3); }
.shop-btn:active, .shop-btn.pressed { transform: translateY(0.05rem) scale(0.97); filter: brightness(1.25); transition-duration: 0.05s; }
.shop-btn.pressed { animation: btnPress 0.25s ease; }
@keyframes btnPress { 0% { filter: brightness(1.6); } 100% { filter: none; } }
.shop-btn.disabled { opacity: 0.5; filter: grayscale(0.7); }
.shop-btn.disabled:hover { transform: none; box-shadow: none; border-color: var(--line); }
.shop-btn-ico { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.05rem; flex: none; }
.shop-btn.xp .shop-btn-ico { background: radial-gradient(circle at 35% 30%, #b9e4ff, #2c6fd6 70%); color: #fff; box-shadow: 0 0 0.6rem rgba(95, 177, 255, 0.5); }
.shop-btn.reroll .shop-btn-ico { background: radial-gradient(circle at 35% 30%, #fff1c0, #c28b2c 70%); color: #2a1a04; box-shadow: 0 0 0.6rem rgba(232, 193, 112, 0.5); }
.shop-btn.reroll:not(.disabled):hover .shop-btn-ico .ico { animation: spin 0.6s var(--ease-out); }
.shop-btn-text { display: flex; flex-direction: column; line-height: 1.15; }
.shop-btn-label { font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-hi); }
.shop-btn-cost { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; font-weight: 800; color: #ffe08a; }
.shop-btn .kbd { position: absolute; right: 0.4rem; top: 0.35rem; font-size: 0.58rem; }
.shop-btn.free { border-color: #9ff0bb; box-shadow: 0 0 1rem rgba(93, 224, 138, 0.35); }
.shop-btn.free .shop-btn-cost { color: #9ff0bb; }
.pb-gold.max-interest { border-color: #ffe08a; box-shadow: 0 0 1.3rem rgba(255, 200, 80, 0.35), inset 0 1px 0 rgba(255, 240, 200, 0.12); }

.shop-cards { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.45rem; perspective: 60rem; }
.shop-slot {
  position: relative;
  height: 7.8rem;
  border-radius: 0.5rem;
}
.shop-slot.empty {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 0.5rem, transparent 0.5rem 1rem),
    rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0.2rem 0.8rem rgba(0, 0, 0, 0.5);
}
.shop-slot.empty::after {
  content: 'Sold';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.12);
}
.shop-card {
  --cc: #9aa4b1;
  position: absolute;
  inset: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--cc);
  background: #0a0c1c;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0.3rem 0.8rem rgba(0, 0, 0, 0.5), inset 0 0 1.2rem color-mix(in srgb, var(--cc) 25%, transparent);
  transition: transform 0.18s var(--ease-out), box-shadow 0.2s, filter 0.25s;
  transform-style: preserve-3d;
}
.shop-card:hover {
  transform: translateY(-0.35rem) scale(1.02);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1.4rem color-mix(in srgb, var(--cc) 60%, transparent), 0 0.8rem 1.4rem rgba(0, 0, 0, 0.55);
  z-index: 2;
}
.shop-card:active { transform: translateY(-0.15rem) scale(0.98); transition-duration: 0.05s; }
.card-portrait { position: absolute; inset: 0; font-size: 1.55rem; transition: transform 0.4s var(--ease-out); }
.shop-card:hover .card-portrait { transform: scale(1.06); }
.card-portrait .portrait-glyph { font-size: 2.4em; transform: translate(18%, -8%); }
.card-portrait .portrait-art { object-position: 50% 18%; }
.shop-card:hover .card-portrait .portrait-art { filter: brightness(1.08) saturate(1.05); }
.card-portrait .portrait-initials { display: none; }
.card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, transparent 50%, rgba(3, 4, 12, 0.92) 100%); pointer-events: none; }
.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.28) 48%, transparent 60%);
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
  mix-blend-mode: overlay;
}
.shop-card:hover .card-shine { animation: shine 0.8s var(--ease-out); }
.shop-card.cost-4 .card-shine, .shop-card.cost-5 .card-shine { animation: shine 3.5s ease-in-out infinite; }
.card-traits { position: absolute; left: 0.3rem; top: 0.3rem; display: flex; flex-direction: column; gap: 0.16rem; }
.card-trait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(4, 5, 14, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-trait-ico { font-size: 0.95rem; }
.card-owned { position: absolute; right: 0.35rem; top: 0.35rem; display: flex; gap: 0.15rem; }
.own-pip { width: 0.45rem; height: 0.45rem; transform: rotate(45deg); background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.4); }
.own-pip.on { background: #ffd66b; border-color: #fff3c8; box-shadow: 0 0 0.35rem #ffd66b; }
.card-star-hint {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff1c0, #d49a33);
  color: #3a2305;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0.8rem rgba(255, 214, 107, 0.9);
  animation: bump 1.2s ease-in-out infinite;
}
.card-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.3rem 0.45rem 0.32rem;
  border-top: 1px solid color-mix(in srgb, var(--cc) 60%, transparent);
  background: linear-gradient(0deg, color-mix(in srgb, var(--cc) 38%, #04050e) 0%, color-mix(in srgb, var(--cc) 18%, rgba(4, 5, 14, 0.85)) 100%);
}
.card-name { font-family: var(--font-display); font-weight: 700; font-size: 0.74rem; line-height: 1.1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-cost { display: inline-flex; align-items: center; gap: 0.15rem; font-weight: 900; font-size: 0.86rem; color: #ffe08a; flex: none; text-shadow: 0 1px 2px #000; }
.shop-card.unaffordable { filter: grayscale(0.75) brightness(0.55); }
.shop-card.unaffordable .card-cost { color: #ff8a96; }
.shop-card.unaffordable:hover { filter: grayscale(0.5) brightness(0.7); }
.shop-card.cost-5 { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1rem rgba(255, 185, 56, 0.35), inset 0 0 1.4rem rgba(255, 185, 56, 0.25); }
.shop-card.starup {
  border-color: #ffe08a;
  animation: starupGlow 1.4s ease-in-out infinite;
}
.shop-card.starup::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 220, 120, 0.35), transparent 60%);
}
@keyframes starupGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0.8rem rgba(255, 214, 107, 0.55); }
  50% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 1.8rem rgba(255, 214, 107, 0.95); }
}
.shop-card.pair { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0.9rem rgba(255, 214, 107, 0.35); }
.shop-card.flip-in { animation: cardFlip 0.5s var(--ease-out) backwards; }
@keyframes cardFlip {
  0% { transform: rotateY(90deg) translateY(0.6rem); opacity: 0; filter: brightness(2); }
  60% { transform: rotateY(-8deg); opacity: 1; }
  100% { transform: none; filter: none; }
}
.shop-card.starup.flip-in { animation: cardFlip 0.5s var(--ease-out) backwards, starupGlow 1.4s 0.5s ease-in-out infinite; }
.shop-card.buying { animation: cardBuy 0.3s ease-in forwards !important; pointer-events: none; }
@keyframes cardBuy { to { transform: translateY(-2rem) scale(0.9); opacity: 0; filter: brightness(1.8); } }

.shop-lock {
  flex: none;
  width: 2.1rem;
  border-radius: 0.45rem;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.shop-lock:hover { color: var(--gold-hi); border-color: var(--gold); }
.shop-lock.locked { color: #2a1a04; background: linear-gradient(180deg, #f8dc92, #c89540); border-color: #fff0c2; box-shadow: 0 0 1rem rgba(232, 193, 112, 0.55); }

/* ---------- Sell overlay (while dragging a unit) ------------------------------ */
.shop-sell {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 60%, rgba(90, 60, 10, 0.88), rgba(20, 12, 2, 0.92));
  border: 2px dashed rgba(255, 214, 107, 0.55);
  pointer-events: none;
}
.shop-panel.sell-armed .shop-sell { display: flex; animation: fadeIn 0.15s ease; }
.shop-panel.sell-hot .shop-sell {
  border-style: solid;
  border-color: #ffe08a;
  background: radial-gradient(ellipse at 50% 60%, rgba(150, 100, 20, 0.92), rgba(40, 24, 4, 0.94));
  box-shadow: 0 0 2.4rem rgba(255, 200, 80, 0.7), inset 0 0 2rem rgba(255, 214, 107, 0.35);
}
.shop-panel.sell-hot { box-shadow: 0 0 2.4rem rgba(255, 200, 80, 0.5), var(--shadow); }
.shop-sell-inner { display: flex; align-items: center; gap: 1rem; transition: transform 0.2s var(--ease-back); }
.shop-panel.sell-hot .shop-sell-inner { transform: scale(1.08); }
.sell-coin { font-size: 3rem; filter: drop-shadow(0 0 0.8rem rgba(255, 200, 80, 0.9)); }
.shop-panel.sell-hot .sell-coin { animation: spin 1s linear infinite; }
.sell-title { display: flex; align-items: baseline; gap: 0.55rem; text-shadow: 0 0 1rem rgba(255, 200, 80, 0.7); }
.sell-label { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: #ffe08a; text-transform: uppercase; letter-spacing: 0.08em; }
.sell-value { font-family: var(--font-num); font-weight: 900; font-size: 2.3rem; color: #fff6d6; line-height: 1; }
.sell-unit { font-weight: 800; font-size: 1rem; color: #ffe08a; }
.sell-sub { font-size: 0.82rem; color: #e9d3a3; font-weight: 600; }