/* Gewoelbe (Sammlung): schlanker Kopf, Tab-Leiste mit Guthaben, Intro-Zeile je
   Tab, kompakte Beschwoerungs-Karten und der Shop als eigener Laden.
   Logik: src/app/collection.js, collection-packs.js, collection-shop.js. */

/* ===== Kopf: Eyebrow + Titel, rechts nur im Figuren-Tab die Statistik ===== */
.col-header.vault-head { padding: clamp(8px, 1.2vw, 16px) 2px 18px; }
.vault-head .vh-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.vault-head .col-title {
  margin: 8px 0 0;
  font-size: clamp(36px, 3.4vw, 56px);
  letter-spacing: 5px;
}

/* Statistik als flache Leiste statt 2x2-Kacheln (nicht hoeher als der Titel). */
.vault-head .col-stats.vh-stats {
  display: flex;
  gap: 0;
  border: 1px solid rgba(216, 177, 90, .14);
  background: linear-gradient(180deg, rgba(18, 21, 28, .72), rgba(8, 10, 14, .88));
}
.vh-stats .col-stat {
  min-width: 150px;
  min-height: 0;
  padding: 10px 18px 11px;
  border: 0;
  background: none;
}
.vh-stats .col-stat + .col-stat { border-left: 1px solid rgba(216, 177, 90, .10); }
.vh-stats .cs-v { margin: 5px 0 7px; font-size: 22px; }

/* ===== Tab-Leiste: Tabs links, Guthaben rechts ===== */
.vault-tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(216, 177, 90, .12);
}
.vault-tabbar .collection-tabs {
  margin-bottom: -1px;
  border-bottom: 0;
}
.vault-tabbar .vault-wallet {
  margin: 0 0 8px;
  padding: 6px 12px;
}
.vault-tabbar .vault-wallet b { font-size: 16px; }

/* ===== Intro-Zeile: ein Satz, was man hier tut (+ Aktionen rechts) ===== */
.col-root .col-section { padding-top: 0; }
.vault-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  margin: 20px 0 24px;
}
.vault-intro .vi-text {
  max-width: 760px;
  margin: 0;
  color: rgba(232, 222, 197, .74);
  font-family: var(--mp-serif-body);
  font-size: 17.5px;
  line-height: 1.45;
}
.vault-intro .vi-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vault-intro .gpk-grant {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid rgba(216, 177, 90, .32);
  background: rgba(216, 177, 90, .06);
  color: var(--mp-gold-1);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ===== Beschwoerungen: Knopf direkt unter dem Namen ===== */
.gpk.gpk-summons { padding-top: 0; }
.gpk-summons .pack-art { height: 272px; }
.gpk-summons .pack-body { padding: 44px 28px 24px; }
.gpk-summons .pack-body .open { margin-top: 22px; }
.gpk .open.open-ghost {
  color: var(--gold-1);
  background: transparent;
  border-color: rgba(216, 177, 90, .45);
  box-shadow: none;
}
.gpk .open.open-ghost::before { display: none; }
.gpk .open.open-ghost:hover { background: rgba(216, 177, 90, .07); box-shadow: none; }
.gpk .pack.is-empty .pack-art { filter: saturate(.55) brightness(.72); }

/* Drop-Chancen als eine Zeile (Beschwoerung + Shop). */
.gpk .pack-odds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 11px;
  margin-top: 16px;
  color: var(--ink-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.gpk .pack-odds .po-r { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.gpk .pack-odds .gem { width: 7px; height: 7px; transform: rotate(45deg); }
.gpk .pack-odds b { color: var(--ink); font-family: var(--mono); font-weight: 600; letter-spacing: .4px; }
.gpk .pack-odds .r-common { color: var(--rar-common); }
.gpk .pack-odds .r-common .gem { background: var(--rar-common); }
.gpk .pack-odds .r-rare { color: var(--rar-rare); }
.gpk .pack-odds .r-rare .gem { background: var(--rar-rare); }
.gpk .pack-odds .r-epic { color: var(--rar-epic); }
.gpk .pack-odds .r-epic .gem { background: var(--rar-epic); }
.gpk .pack-odds .r-legend { color: var(--rar-legend); }
.gpk .pack-odds .r-legend .gem { background: var(--rar-legend); box-shadow: 0 0 6px rgba(232, 200, 121, .55); }

/* ===== Shop: flache Angebots-Karten ===== */
.gpk.gpk-store { align-items: stretch; padding: 0 0 48px; overflow: visible; }
.gpk-store .offers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 22px;
}
.gpk .offer {
  --fac: #d8b15a;
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  border: 1px solid rgba(216, 177, 90, .3);
  background:
    radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, var(--fac) 9%, transparent), transparent 70%),
    linear-gradient(180deg, #13141a 0%, #08090c 100%);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9);
  transition: border-color 260ms ease, box-shadow 260ms ease;
}
.gpk .offer.tone-teal { --fac: #74c8d6; }
.gpk .offer.tone-moss { --fac: #6fd6a6; }
.gpk .offer:hover {
  border-color: var(--gold-2);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .9), 0 0 48px -24px color-mix(in srgb, var(--fac) 55%, transparent);
}
.gpk .offer-art {
  position: relative;
  min-height: 250px;
  background-size: cover;
  background-position: center 18%;
  filter: saturate(.94);
}
.gpk .offer-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 11, 0) 55%, #0c0d12 100%), linear-gradient(180deg, transparent 70%, rgba(7, 8, 11, .55));
}
.gpk .offer-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 18px;
}
.gpk .offer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fac);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.gpk .offer-kicker .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fac); box-shadow: 0 0 6px var(--fac); }
.gpk .offer-name {
  margin: 0;
  color: var(--bone);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 1.4px;
}
.gpk .offer-what {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 16px;
  font-style: italic;
}
.gpk .offer .pack-odds { justify-content: flex-start; margin: 4px 0 10px; }
.gpk .offer-buy { margin-top: auto; padding: 14px; }
.gpk .offer-buy .buy-price { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.gpk .offer-buy .buy-price .soul-gem { width: 11px; height: 13px; box-shadow: 0 0 5px var(--mp-soul-glow); }
.gpk .offer-foot {
  min-height: 20px;
  margin: 4px 0 0;
  color: var(--ink-dim);
  font-family: var(--serif-body);
  font-size: 14.5px;
  font-style: italic;
  text-align: center;
}
.gpk .offer-link {
  padding: 0 0 0 4px;
  border: 0;
  background: none;
  color: var(--gold-1);
  font: inherit;
  font-style: normal;
  cursor: var(--mp-cur-pointer);
}
.gpk .offer-link:hover { color: var(--gold-hi); }
.gpk .offer-short { color: #e0a17c; }

/* So verdienst du Seelen */
.gpk-store .earn { margin-top: 34px; }
.gpk .earn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--ink-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.gpk .earn-head .soul-gem { width: 9px; height: 11px; }
.gpk .earn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gpk .earn-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 177, 90, .14);
  background: rgba(14, 16, 22, .6);
  color: inherit;
  text-align: left;
  cursor: var(--mp-cur-pointer);
  transition: border-color 200ms ease, background 200ms ease;
}
.gpk .earn-item:hover { border-color: rgba(216, 177, 90, .4); background: rgba(216, 177, 90, .05); }
.gpk .earn-item .ei-title { color: var(--bone); font-family: var(--serif); font-size: 15px; letter-spacing: .8px; }
.gpk .earn-item .ei-detail { grid-column: 1; color: var(--ink); font-family: var(--sans); font-size: 12.5px; }
.gpk .earn-item .ei-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--gold-1);
  opacity: .55;
  transition: transform 200ms ease, opacity 200ms ease;
}
.gpk .earn-item:hover .ei-go { opacity: 1; transform: translateX(3px); }

/* ===== Schmal / Handy ===== */
@media (max-width: 900px) {
  .gpk .earn-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gpk .offer { grid-template-columns: 1fr; }
  .gpk .offer-art { min-height: 150px; background-position: center 20%; }
  .gpk .offer-art::after { background: linear-gradient(180deg, transparent 50%, #0c0d12 100%); }
}
body.mp-phone .vault-tabbar { flex-direction: column-reverse; align-items: stretch; gap: 10px; border-bottom: 0; }
body.mp-phone .vault-tabbar .collection-tabs { border-bottom: 1px solid rgba(216, 177, 90, .12); margin-bottom: 0; }
body.mp-phone .vault-tabbar .vault-wallet { align-self: flex-start; margin: 0; }
body.mp-phone .vault-intro { margin: 14px 0 16px; }
body.mp-phone .vault-intro .vi-text { font-size: 15.5px; }
body.mp-phone .vault-head .col-stats.vh-stats { width: 100%; }
body.mp-phone .vh-stats .col-stat { flex: 1 1 0; min-width: 0; }

/* ===== Tab-Leiste als Weg: Shop > Beschwoerungen > Figuren > Deck ===== */
.vault-tabbar .collection-tabs { align-items: flex-end; gap: 2px; }
.collection-tab .ct-ic { display: inline-grid; place-items: center; opacity: .8; }
.collection-tab.on .ct-ic { opacity: 1; }
.vault-tabbar .ct-sep {
  align-self: center;
  display: inline-grid;
  place-items: center;
  margin: 0 2px;
  color: rgba(216, 177, 90, .38);
}
.collection-tab .ct-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(180deg, #f3dca0, #c89a3e);
  color: #1c1404;
  font-family: var(--mp-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 0 10px rgba(216, 177, 90, .45);
}
.collection-tab .ct-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-gold-1);
  box-shadow: 0 0 8px rgba(216, 177, 90, .7);
}
/* Kein Einblenden per CSS: die Tab-Leiste wird oft neu gezeichnet, das liefe jedes Mal
   neu. Der Punkt springt einmal an, wenn die Figuren aus der Beschwörung landen. */
.collection-tab .ct-dot.vg-pop { animation: vgPop .6s cubic-bezier(.3, 1.6, .5, 1); }

/* ===== Zahl am "Sammlung"-Eintrag (Seitenleiste + Handy-Leiste) ===== */
#navCollection { position: relative; }
#navCollection .vaultCount,
.mtb-btn .vaultCount {
  position: absolute;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: linear-gradient(180deg, #f3dca0, #c89a3e);
  color: #1c1404;
  font-family: var(--mp-mono);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: 0 0 10px rgba(216, 177, 90, .4);
  pointer-events: none;
}
#navCollection .vaultCount { right: 10px; top: 50%; transform: translateY(-50%); }
/* Icon-Leiste: die Kachel schneidet ab (overflow hidden), darum innen an der Ecke,
   kleiner, mit dunklem Ring zum Symbol; der Pop laeuft dort ohne translateY. */
body.side-nav-collapsed #navCollection .vaultCount {
  right: 2px; top: 2px; transform: none;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px; font-size: 8.5px;
  box-shadow: 0 0 0 2px var(--bg, #0b0e14), 0 0 8px rgba(216, 177, 90, .35);
}
body.side-nav-collapsed #navCollection .vaultCount.vg-pop { animation-name: vgPop; }
/* Mit Zahl rueckt das Symbol einen Hauch nach unten links, die Zahl sitzt frei an seiner Ecke. */
body.side-nav-collapsed #navCollection:has(.vaultCount:not([hidden])) .navIcon svg { translate: -2px 2px; }
.mtb-btn .vaultCount { top: 2px; left: calc(50% + 6px); }
#navCollection .vaultCount[hidden],
.mtb-btn .vaultCount[hidden] { display: none; }
.vaultCount.vg-pop,
.collection-tab .ct-count.vg-pop { animation: vgPop .6s cubic-bezier(.3, 1.6, .5, 1); }
#navCollection .vaultCount.vg-pop { animation-name: vgPopMid; }
@keyframes vgPop { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes vgPopMid { 0% { transform: translateY(-50%) scale(.4); } 60% { transform: translateY(-50%) scale(1.25); } 100% { transform: translateY(-50%) scale(1); } }

/* Ziel leuchtet kurz auf, wenn etwas hineinfliegt. */
.vg-hit { animation: vgHit .7s ease-out; }
@keyframes vgHit {
  0% { box-shadow: inset 0 0 0 1px rgba(243, 220, 160, .0), 0 0 0 rgba(216, 177, 90, 0); }
  35% { box-shadow: inset 0 0 0 1px rgba(243, 220, 160, .7), 0 0 22px rgba(216, 177, 90, .55); }
  100% { box-shadow: inset 0 0 0 1px rgba(243, 220, 160, 0), 0 0 0 rgba(216, 177, 90, 0); }
}

/* Siegel-Muenze: neue Gratis-Beschwoerung fliegt in die Sammlung. */
.vg-coin {
  position: fixed;
  z-index: 300;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #271c08;
  background: radial-gradient(circle at 36% 28%, #fbeec2 0%, #e3c074 26%, #b78f38 58%, #6e5320 86%, #4a3815 100%);
  border: 1px solid #f0d693;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6), inset 0 2px 3px rgba(255, 255, 255, .5), inset 0 -5px 9px rgba(60, 42, 12, .6), 0 0 40px rgba(216, 177, 90, .55);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.vg-coin svg { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .4)); }

/* Aufgedeckte Figuren fliegen in den Figuren-Tab (Rand in ihrer Seltenheit, ohne Leuchten). */
.vg-card {
  position: fixed;
  z-index: 300;
  border: 1px solid rgba(216, 177, 90, .7);
  background: #0c0d12 center 30% / contain no-repeat;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body.mp-phone .vault-tabbar .ct-sep { display: none; }
body.mp-phone .collection-tab { flex-direction: column; gap: 4px; padding: 8px 4px 10px; }
body.mp-phone .collection-tab .ct-count,
body.mp-phone .collection-tab .ct-dot { position: absolute; top: 4px; right: 6px; }
body.mp-phone .collection-tab .ct-count { min-width: 16px; height: 16px; font-size: 9px; }