/* ============================================================
   FULLY — Schermata COLLEZIONE
   Gallery di carte collezionabili, stile videogioco premium.
   Tutte le classi sono prefissate con "col-".
   ============================================================ */

.col-screen {
  min-height: 100%;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(47,143,255,.18), transparent 60%),
    var(--bg, #060a1c);
}

.col {
  max-width: 500px;
  margin: 0 auto;
  padding: 14px 14px 40px;
}

/* ---------- Header ---------- */
.col-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.col-back {
  border: 1px solid var(--border, rgba(255,255,255,.14));
  background: var(--card-2, rgba(255,255,255,.06));
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease;
}
.col-back:active { transform: scale(.95); }
.col-title {
  margin: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .3px;
  color: #fff;
}
.col-coins {
  justify-self: end;
  background: var(--card-2, rgba(255,255,255,.06));
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}
.col-coins b { color: var(--gold, #f7d548); }

/* ---------- Barra bustina ---------- */
.col-packbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  margin-bottom: 22px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(47,143,255,.14), rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.14));
}
.col-count {
  font-size: 15px;
  color: rgba(255,255,255,.82);
  text-align: center;
}
.col-count b { color: var(--gold, #f7d548); font-size: 18px; }
.col-buy {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px 14px;
  font-size: 17px;
  font-weight: 900;
  color: #1a1200;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe98a, var(--gold, #f7d548));
  box-shadow: 0 8px 22px rgba(247,213,72,.28), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .12s ease, filter .2s ease;
}
.col-buy:active { transform: scale(.97); }
.col-buy:disabled { filter: grayscale(.4) brightness(.85); cursor: default; }

/* ---------- Gruppi per personaggio ---------- */
.col-group { margin-bottom: 26px; }
.col-group__title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.col-group__title::before {
  content: "";
  width: 6px; height: 18px;
  border-radius: 4px;
  background: var(--gold, #f7d548);
}

/* ---------- Griglia ---------- */
.col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

/* ---------- Casella carta ---------- */
.col-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.col-tile__art {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-2, rgba(255,255,255,.06));
  border: 2px solid var(--border, rgba(255,255,255,.14));
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.col-tile__badge {
  position: absolute;
  left: 6px; bottom: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}
.col-tile__name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  line-height: 1.2;
  padding: 0 2px;
}
.col-tile:active { transform: scale(.97); }

/* Sagoma bloccata */
.col-tile.is-locked .col-tile__art {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, rgba(255,255,255,.06) 10px 20px), #05081a;
  border-style: dashed;
  border-color: rgba(255,255,255,.18);
}
.col-tile.is-locked .col-tile__lock {
  font-size: 34px;
  opacity: .8;
  filter: grayscale(1);
}
.col-tile.is-locked .col-tile__name { color: rgba(255,255,255,.5); }

/* ---------- Bagliore rarità ---------- */
.col-r-comune .col-tile__art,
.col-r-comune.col-tile .col-tile__art {
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 4px 14px rgba(255,255,255,.08);
}
.col-r-comune .col-tile__badge { background: rgba(120,130,150,.85); }

.col-r-rara .col-tile__art {
  border-color: var(--blue, #2f8fff);
  box-shadow: 0 6px 20px rgba(47,143,255,.4);
}
.col-r-rara .col-tile__badge { background: var(--blue, #2f8fff); }

.col-r-leggendaria .col-tile__art {
  border-color: var(--gold, #f7d548);
  box-shadow: 0 8px 26px rgba(247,213,72,.5);
}
.col-r-leggendaria .col-tile__badge { background: var(--gold, #f7d548); color: #1a1200; }

/* Mitica — la rarità più alta (i "mestieri" e l'Eroe). Rossa/oro, distinta. */
.col-r-mitica .col-tile__art {
  border-color: #ff3d6e;
  box-shadow: 0 8px 30px rgba(255,61,110,.55), 0 0 20px rgba(255,180,60,.45);
}
.col-r-mitica .col-tile__badge { background: linear-gradient(135deg, #ff3d6e, #ff9d2e); color: #2a0010; }
.col-tile.col-r-mitica.is-owned .col-tile__art { animation-duration: 2.3s; }
.col-cardview.col-r-mitica .col-cardview__art { border-color: #ff3d6e; box-shadow: 0 12px 46px rgba(255,61,110,.6); }
.pack-item--card.col-r-mitica .pack-flip__img { border-color: #ff3d6e; box-shadow: 0 16px 56px rgba(255,61,110,.65), 0 0 24px rgba(255,180,60,.4); }
.pack-item--card.col-r-mitica .pack-item__tag { color: #ff5c85; animation: pack-legend 1s ease-in-out infinite; }

/* Animazione idle solo sulle possedute */
.col-tile.is-owned .col-tile__art {
  animation: col-idle 3.6s ease-in-out infinite;
}
.col-tile.col-r-leggendaria.is-owned .col-tile__art {
  animation-duration: 2.8s;
}
@keyframes col-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ---------- Carta ingrandita (modale tap) ---------- */
.col-cardview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 240px;
}
.col-cardview__art {
  width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--border, rgba(255,255,255,.14));
}
.col-cardview__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-cardview__pose { font-size: 19px; font-weight: 900; color: #fff; text-align: center; }
.col-cardview__rarity { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .5px; }
.col-cardview__close {
  margin-top: 6px;
  border: 1px solid var(--border, rgba(255,255,255,.14));
  background: var(--card-2, rgba(255,255,255,.06));
  color: #fff;
  border-radius: 12px;
  padding: 10px 22px;
  font-weight: 800;
  cursor: pointer;
}
/* Bagliore rarità anche in modale */
.col-cardview.col-r-rara .col-cardview__art { border-color: var(--blue, #2f8fff); box-shadow: 0 10px 30px rgba(47,143,255,.5); }
.col-cardview.col-r-leggendaria .col-cardview__art { border-color: var(--gold, #f7d548); box-shadow: 0 12px 40px rgba(247,213,72,.55); }

/* ---------- Rivelazione bustina ---------- */
.col-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  padding: 4px;
}
.col-reveal__spark {
  font-size: 16px;
  font-weight: 900;
  color: var(--gold, #f7d548);
  animation: col-pop-in .4s ease both;
}
.col-reveal__flip {
  perspective: 900px;
}
.col-reveal__art {
  width: 220px;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid var(--gold, #f7d548);
  box-shadow: 0 14px 44px rgba(247,213,72,.5);
  animation: col-reveal-flip .7s cubic-bezier(.2,.8,.25,1) both;
  transform-style: preserve-3d;
}
.col-reveal__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.col-reveal.col-r-rara .col-reveal__art { border-color: var(--blue, #2f8fff); box-shadow: 0 14px 44px rgba(47,143,255,.5); }
.col-reveal.col-r-comune .col-reveal__art { border-color: rgba(255,255,255,.55); box-shadow: 0 14px 40px rgba(255,255,255,.14); }
.col-reveal__pose { font-size: 20px; font-weight: 900; color: #fff; text-align: center; animation: col-pop-in .5s .25s ease both; }
.col-reveal__rarity { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .5px; animation: col-pop-in .5s .3s ease both; }
.col-reveal__ok {
  margin-top: 4px;
  border: none;
  border-radius: 14px;
  padding: 13px 28px;
  font-weight: 900;
  font-size: 16px;
  color: #1a1200;
  background: linear-gradient(180deg, #ffe98a, var(--gold, #f7d548));
  box-shadow: 0 8px 22px rgba(247,213,72,.3);
  cursor: pointer;
  animation: col-pop-in .5s .35s ease both;
}
.col-reveal__ok:active { transform: scale(.96); }

@keyframes col-reveal-flip {
  0%   { transform: rotateY(90deg) scale(.7); opacity: 0; }
  60%  { transform: rotateY(-8deg) scale(1.04); opacity: 1; }
  100% { transform: rotateY(0) scale(1); }
}
@keyframes col-pop-in {
  0%   { transform: translateY(8px) scale(.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* ---------- Due bustine (Argento / Oro) ---------- */
.col-packs { display: flex; flex-direction: column; gap: 10px; }
.col-pack {
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: none; border-radius: 14px; padding: 13px 14px; cursor: pointer; color: #1a1200;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 20px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .2s ease;
}
.col-pack:active { transform: scale(.98); }
.col-pack__emoji { font-size: 30px; line-height: 1; }
.col-pack__txt { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.col-pack__txt b { font-size: 15.5px; font-weight: 900; }
.col-pack__txt small { font-size: 11px; font-weight: 700; opacity: .72; }
.col-pack__price {
  font-size: 15px; font-weight: 900; white-space: nowrap;
  background: rgba(0,0,0,.14); border-radius: 999px; padding: 6px 12px;
}
.col-pack--silver { background: linear-gradient(180deg, #eef2f7, #c3ccda); }
.col-pack--gold   { background: linear-gradient(180deg, #ffe98a, var(--gold, #f7d548)); }

/* ---------- Overlay apertura bustina (reveal a più contenuti) ---------- */
.pack-open { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 260px; padding: 4px; }
.pack-open__head { font-size: 18px; font-weight: 900; color: #fff; }
.pack-open__stage { min-height: 340px; display: flex; align-items: center; justify-content: center; position: relative; }

/* ---- Pacchetto chiuso (fase 1) ---- */
.pk-pack {
  position: relative; border: none; background: none; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: pk-float 2.4s ease-in-out infinite;
}
.pk-pack__img { width: 200px; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(247,213,72,.45)); }
.pk-pack--argento .pk-pack__img { filter: grayscale(1) brightness(1.15) drop-shadow(0 18px 40px rgba(200,210,230,.4)); }
.pk-pack--oro .pk-pack__img { filter: saturate(1.15) drop-shadow(0 18px 40px rgba(247,190,60,.5)); }
.pk-pack__label { font-weight: 900; color: #fff; font-size: 15px; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
.pk-pack__hint { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.78); }
@keyframes pk-float { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
.pk-pack.is-ripping { animation: pk-rip .62s ease forwards; pointer-events: none; }
@keyframes pk-rip {
  0% { transform: scale(1); }
  30% { transform: scale(1.09) rotate(-3deg); }
  100% { transform: scale(1.5); opacity: 0; filter: brightness(2.2); }
}

/* ---- Alone di rarità dietro la carta (fase 2) ---- */
.pk-aura { position: absolute; width: 300px; height: 400px; border-radius: 26px; z-index: 0; filter: blur(34px); animation: pk-aura-in .8s ease both; }
.pk-aura--comune      { background: radial-gradient(circle, rgba(255,255,255,.75), transparent 70%); }
.pk-aura--rara        { background: radial-gradient(circle, rgba(47,143,255,.85), transparent 70%); }
.pk-aura--leggendaria { background: radial-gradient(circle, rgba(247,213,72,.9), transparent 70%); }
.pk-aura--mitica      { background: radial-gradient(circle, rgba(255,61,110,.9), transparent 70%); }
@keyframes pk-aura-in { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pack-open__stage .pack-item { position: relative; z-index: 1; }
.pk-in { animation: pk-cardin .5s cubic-bezier(.2,.8,.25,1) both; }
@keyframes pk-cardin { 0% { transform: translateY(28px) scale(.82); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }

.reduce-motion .pk-pack, .reduce-motion .pk-pack__shine, .reduce-motion .pk-aura, .reduce-motion .pk-in { animation: none !important; }
.pack-open__next {
  border: none; border-radius: 14px; padding: 13px 30px; font-weight: 900; font-size: 16px; color: #1a1200;
  background: linear-gradient(180deg, #ffe98a, var(--gold, #f7d548));
  box-shadow: 0 8px 22px rgba(247,213,72,.3); cursor: pointer;
}
.pack-open__next:active { transform: scale(.96); }

.pack-item { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: col-pop-in .4s ease both; }
.pack-item__tag { font-size: 14px; font-weight: 900; color: var(--gold, #f7d548); text-align: center; }
.pack-item__name { font-size: 19px; font-weight: 900; color: #fff; text-align: center; }
.pack-item__rar { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .5px; }

/* carta */
.pack-flip { perspective: 900px; }
.pack-flip__img {
  width: 210px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; display: block;
  border: 3px solid rgba(255,255,255,.5); box-shadow: 0 14px 40px rgba(255,255,255,.14);
  animation: col-reveal-flip .7s cubic-bezier(.2,.8,.25,1) both;
}
.pack-item--card.col-r-rara .pack-flip__img { border-color: var(--blue, #2f8fff); box-shadow: 0 14px 44px rgba(47,143,255,.5); }
.pack-item--card.col-r-leggendaria .pack-flip__img { border-color: var(--gold, #f7d548); box-shadow: 0 16px 52px rgba(247,213,72,.6); }
.pack-item--card.col-r-leggendaria .pack-item__tag { animation: pack-legend 1s ease-in-out infinite; }
@keyframes pack-legend { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 8px rgba(247,213,72,.85)); } }

/* monete e accessorio */
.pack-coin, .pack-gift { font-size: 74px; line-height: 1; animation: pack-bounce .6s ease both; }
.pack-item--coins .pack-item__name { color: var(--gold, #f7d548); font-size: 30px; }
@keyframes pack-bounce { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

.reduce-motion .pack-flip__img, .reduce-motion .pack-coin, .reduce-motion .pack-gift, .reduce-motion .pack-item { animation: none !important; }

/* ============================================================
   POKÉDEX / ALBUM — progresso, filtri, set numerati
   ============================================================ */
.col-dex {
  background: linear-gradient(180deg, rgba(47,143,255,.14), rgba(255,255,255,.03));
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 16px; padding: 12px 14px; margin-bottom: 12px;
}
.col-dex__top { display: flex; justify-content: space-between; align-items: baseline; }
.col-dex__count { font-size: 15px; color: rgba(255,255,255,.85); }
.col-dex__count b { color: var(--gold, #f7d548); font-size: 20px; }
.col-dex__pct { font-weight: 900; color: var(--gold, #f7d548); }
.col-dex__bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin: 8px 0 10px; }
.col-dex__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #36d399, #f7d548); transition: width .5s ease; }
.col-dex__rar { display: flex; flex-wrap: wrap; gap: 6px; }
.col-rarcount__it { font-size: 12px; font-weight: 800; color: #fff; background: rgba(9,15,38,.7); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 3px 9px; }
.col-rarcount__it b { color: var(--gold, #f7d548); }

/* Filtri */
.col-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.col-tabs, .col-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.col-tabs button, .col-chips button {
  border: 1px solid var(--border, rgba(255,255,255,.16)); background: rgba(255,255,255,.05); color: #fff;
  border-radius: 999px; padding: 7px 14px; font-weight: 800; font-size: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.col-chips button { padding: 7px 11px; }
.col-tabs button.is-active { background: linear-gradient(180deg, #ffe98a, var(--gold, #f7d548)); color: #1a1200; border-color: transparent; }
.col-chips button.is-active { background: rgba(47,143,255,.35); border-color: var(--blue, #2f8fff); }

/* Set (personaggio) */
.col-set { margin-bottom: 22px; }
.col-set__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.col-set__name { margin: 0; font-size: 16px; font-weight: 900; color: #fff; display: flex; align-items: center; gap: 8px; }
.col-set__name::before { content: ""; width: 6px; height: 18px; border-radius: 4px; background: var(--gold, #f7d548); }
.col-set__prog { font-size: 13px; font-weight: 800; color: rgba(255,255,255,.72); background: rgba(9,15,38,.6); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 3px 10px; }

/* Numero carta (angolo) */
.col-tile__num { position: absolute; top: 6px; right: 6px; z-index: 2; font-size: 10px; font-weight: 900; color: #fff; background: rgba(0,0,0,.6); border-radius: 999px; padding: 2px 7px; }
.col-tile.is-locked .col-tile__lock { font-size: 42px; font-weight: 900; color: rgba(255,255,255,.35); }
.col-tile__badge { font-size: 13px; }

.col-empty { text-align: center; color: rgba(255,255,255,.6); padding: 30px 10px; font-weight: 700; }

/* Meta nella carta ingrandita */
.col-cardview__meta { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.col-cardview__num { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.6); }

/* ---------- Reduce motion ---------- */
.reduce-motion .col-tile.is-owned .col-tile__art,
.reduce-motion .col-reveal__art,
.reduce-motion .col-reveal__spark,
.reduce-motion .col-reveal__pose,
.reduce-motion .col-reveal__rarity,
.reduce-motion .col-reveal__ok {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .col-tile.is-owned .col-tile__art,
  .col-reveal__art,
  .col-reveal__spark,
  .col-reveal__pose,
  .col-reveal__rarity,
  .col-reveal__ok {
    animation: none !important;
  }
}

/* ============================================================
   BRAWL SKIN — Album Carte (bordi ciccioni + bevel)
   ============================================================ */
.col-back {
  border: 3px solid #160a2e; border-radius: 13px; box-shadow: 0 4px 0 #160a2e;
  font-family: 'Lilita One', system-ui; font-weight: 400;
}
.col-back:active { transform: translateY(3px); box-shadow: 0 1px 0 #160a2e; }
.col-dex, .col-pack {
  border: 3px solid #160a2e; border-radius: 16px; box-shadow: 0 5px 0 #160a2e, 0 9px 18px rgba(0,0,0,.35);
}
.col-tile {
  border: 3px solid #160a2e; border-radius: 14px; box-shadow: 0 4px 0 #160a2e, 0 7px 14px rgba(0,0,0,.4);
}
.col-tabs button, .col-chips button { border: 2px solid #160a2e; box-shadow: 0 3px 0 #160a2e; font-weight: 800; }
.col-tabs button.is-active { box-shadow: 0 3px 0 #b9740a; border-color: #160a2e; }
.col-set__name { font-family: 'Lilita One', system-ui; font-weight: 400; }

/* ============================================================
   Apertura bustina CINEMATOGRAFICA (stile Supercell)
   ============================================================ */
.pack-open__stage { overflow: hidden; }
.pk-rays {
  position: absolute; left: 50%; top: 50%; width: 230%; aspect-ratio: 1;
  transform: translate(-50%,-50%) scale(.2); opacity: 0; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, var(--rc,#fff) 0 3deg, transparent 3deg 9deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 62%);
  mask: radial-gradient(closest-side, #000 20%, transparent 62%);
}
.pk-rays.is-on { animation: pk-spin 8s linear infinite; }
@keyframes pk-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.pk-ring {
  position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; border-radius: 50%;
  border: 8px solid var(--rc,#fff); opacity: 0; z-index: 1; pointer-events: none; transform: translate(-50%,-50%);
}
.pk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 9; pointer-events: none; }
.pk-p { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; z-index: 3; pointer-events: none; }
.pk-charge { animation: pk-charge var(--dur,1.6s) ease-in forwards; }
@keyframes pk-charge { 0% { transform: scale(1); } 100% { transform: scale(1.25); filter: brightness(2.2); } }
.pack-open__stage .pack-item { position: relative; z-index: 4; }
.pk-reveal { animation: pk-reveal .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes pk-reveal { 0% { transform: scale(.2) rotateY(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ============================================================
   BRAWL v2 — Album "a manetta" (testata, dex, tile bloccate, bustine)
   ============================================================ */

/* Testata */
.col-title {
  font-family: 'Lilita One', system-ui, sans-serif; font-weight: 900;
  font-size: 24px; letter-spacing: .5px;
  color: #fff; -webkit-text-stroke: 1.6px #160a2e; paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.col-coins {
  background: linear-gradient(180deg, #ffe27a, #f0a713);
  border: 2.5px solid #160a2e; box-shadow: 0 4px 0 #160a2e;
  color: #3a2600; font-weight: 900;
}
.col-coins b { color: #3a2600; -webkit-text-stroke: 0; }

/* Barra progresso: più alta, lucida, con riflesso animato */
.col-dex__count b, .col-dex__pct { font-family: 'Lilita One', system-ui; font-weight: 400; }
.col-dex__bar { height: 15px; background: #0a0f26; border: 2.5px solid #160a2e; box-shadow: inset 0 2px 4px rgba(0,0,0,.5); }
.col-dex__bar i {
  background: linear-gradient(90deg, #36d399, #7be86a 60%, #f7d548);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5); position: relative; overflow: hidden;
}
.col-dex__bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%);
  transform: translateX(-120%); animation: col-shine 2.6s ease-in-out infinite;
}
@keyframes col-shine { 0%,60% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }

/* Pip rarità: chip ciccioni colorati per rarità */
.col-rarcount__it {
  border: 2.5px solid #160a2e; box-shadow: 0 3px 0 #160a2e;
  background: #141a38; padding: 4px 11px; font-size: 12.5px;
}
.col-rarcount__it.col-r-comune      { background: linear-gradient(180deg, #e9edf6, #c3ccda); color: #2a3350; }
.col-rarcount__it.col-r-comune b    { color: #10203f; }
.col-rarcount__it.col-r-rara        { background: linear-gradient(180deg, #4f9bff, #2f6fe0); }
.col-rarcount__it.col-r-leggendaria { background: linear-gradient(180deg, #ffe27a, #f0a713); color: #3a2600; }
.col-rarcount__it.col-r-leggendaria b { color: #3a2600; }
.col-rarcount__it.col-r-mitica      { background: linear-gradient(180deg, #ff6a8e, #d63b63); }

/* Bustine: riflesso che passa + prezzo dorato ciccione + emoji su medaglione */
.col-pack { position: relative; overflow: hidden; }
.col-pack::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: col-packshine 3.4s ease-in-out infinite;
}
.col-pack--gold::after { animation-delay: 1.2s; }
@keyframes col-packshine { 0%,72% { left: -60%; } 100% { left: 130%; } }
.col-pack__emoji {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.45); border: 2.5px solid #160a2e; box-shadow: 0 3px 0 #160a2e;
  font-size: 24px; flex: none;
}
.col-pack__txt b { font-family: 'Baloo 2', system-ui; font-weight: 800; }
.col-pack__price {
  background: linear-gradient(180deg, #ffe27a, #f0a713); color: #3a2600;
  border: 2.5px solid #160a2e; box-shadow: 0 3px 0 #160a2e; padding: 6px 12px;
  font-family: 'Lilita One', system-ui; font-weight: 400;
}
.col-pack--gold .col-pack__price { background: linear-gradient(180deg, #fff4c2, #ffd233); }

/* Filtri: pill attivo con bevel colato */
.col-tabs button.is-active { background: linear-gradient(180deg, #ffe27a, #f0a713); color: #3a2600; box-shadow: 0 3px 0 #b9740a; }
.col-chips button.is-active { background: linear-gradient(180deg, #4f9bff, #2f6fe0); border-color: #160a2e; box-shadow: 0 3px 0 #12408f; color: #fff; }
.col-set__prog { border: 2.5px solid #160a2e; box-shadow: 0 3px 0 #160a2e; font-family: 'Lilita One', system-ui; font-weight: 400; }

/* Numero carta: chip dorato ciccione */
.col-tile__num {
  top: 7px; right: 7px; font-family: 'Lilita One', system-ui; font-weight: 400; font-size: 11px;
  background: linear-gradient(180deg, #ffe27a, #f0a713); color: #3a2600;
  border: 2px solid #160a2e; box-shadow: 0 2px 0 #160a2e; padding: 2px 8px;
}
.col-tile.is-locked .col-tile__num { background: #2a3352; color: #cfd8f0; }

/* Carta BLOCCATA in stile Brawl: medaglione "?" + sfondo navy lucido */
.col-tile.is-locked .col-tile__art {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(90,120,200,.28), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 12px, rgba(255,255,255,.075) 12px 24px),
    linear-gradient(180deg, #171f3e, #0c1230);
  border-style: solid; border-color: #160a2e; border-width: 3px;
}
.col-tile.is-locked .col-tile__lock {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  font-size: 34px; font-weight: 900; color: rgba(255,255,255,.6);
  background: radial-gradient(circle at 50% 35%, #2a3560, #141c3c);
  border: 3px solid rgba(255,255,255,.14); box-shadow: inset 0 3px 8px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.4);
  -webkit-text-stroke: 0;
}
.col-tile.is-locked .col-tile__name {
  background: rgba(9,14,34,.7); border: 2px solid #160a2e; border-radius: 999px;
  padding: 2px 0; color: rgba(255,255,255,.55);
}

/* Nome carta posseduta: pill scura ciccia */
.col-tile.is-owned .col-tile__name {
  background: rgba(9,14,34,.6); border: 2px solid #160a2e; border-radius: 999px; padding: 3px 6px;
}

/* Entrata a cascata delle tile */
.col-tile { animation: col-tilein .4s cubic-bezier(.2,.9,.3,1.2) both; }
.col-grid .col-tile:nth-child(1){animation-delay:.02s} .col-grid .col-tile:nth-child(2){animation-delay:.06s}
.col-grid .col-tile:nth-child(3){animation-delay:.10s} .col-grid .col-tile:nth-child(4){animation-delay:.14s}
.col-grid .col-tile:nth-child(5){animation-delay:.18s} .col-grid .col-tile:nth-child(6){animation-delay:.22s}
@keyframes col-tilein { 0% { transform: translateY(14px) scale(.9); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }

.reduce-motion .col-tile, .reduce-motion .col-dex__bar i::after, .reduce-motion .col-pack::after { animation: none !important; }

/* Scritte più marcate (grassetto) dove risultavano sottili */
.col-dex__count { font-weight: 800; color: #fff; }
.col-pack__txt small { font-weight: 800; opacity: .85; }
.col-tile__name { font-weight: 800 !important; }
.col-tile.is-locked .col-tile__name,
.col-tile.is-owned .col-tile__name { font-weight: 800; color: rgba(255,255,255,.72); }
.col-cardview__rarity, .col-cardview__num { font-weight: 800; }
.col-pack__txt b { font-weight: 900; }

/* ============================================================
   CARTE DIVINE (BOSS) — rarità top, look olografico animato
   ============================================================ */

/* Tab "Boss" */
.col-tab--boss.is-active {
  background: linear-gradient(180deg, #c56bff, #7b2ff0) !important;
  border-color: #160a2e !important; box-shadow: 0 3px 0 #4a1a9e !important; color: #fff !important;
}

/* Pip Divina nel contatore rarità: olografico */
.col-rarcount__it.col-r-divina {
  background: linear-gradient(120deg, #ff5edb, #ffd21e, #5efcff, #7b6bff);
  background-size: 300% 100%; animation: col-holo-bg 4s linear infinite;
  color: #21123f; border-color: #160a2e;
}
.col-rarcount__it.col-r-divina b { color: #21123f; }
@keyframes col-holo-bg { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }

/* Tile Divina: bordo olografico rotante + bagliore + luccichio */
.col-r-divina .col-tile__art {
  border: 3px solid transparent;
  background:
    linear-gradient(#0b1030, #0b1030) padding-box,
    linear-gradient(120deg, #ff5edb, #ffd21e 30%, #5efcff 55%, #7b6bff 80%, #ff5edb) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: col-holo 4.5s linear infinite;
  box-shadow: 0 10px 34px rgba(255,110,220,.45), 0 0 26px rgba(120,220,255,.4);
}
@keyframes col-holo {
  0%   { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 300% 50%; }
}
.col-r-divina .col-tile__art::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size: 250% 250%; animation: col-holo-sheen 3.6s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes col-holo-sheen { 0%,65% { background-position: 120% 0; } 100% { background-position: -40% 0; } }
.col-r-divina .col-tile__badge {
  background: linear-gradient(120deg, #ff5edb, #ffd21e, #5efcff); background-size: 200% 100%;
  animation: col-holo-bg 3s linear infinite; color: #21123f;
}
.col-tile.col-r-divina.is-owned .col-tile__art { animation: col-holo 4.5s linear infinite, col-idle 3s ease-in-out infinite; }

/* Carta ingrandita Divina */
.col-cardview.col-r-divina .col-cardview__art {
  border: 4px solid transparent;
  background:
    linear-gradient(#0b1030, #0b1030) padding-box,
    linear-gradient(120deg, #ff5edb, #ffd21e 30%, #5efcff 55%, #7b6bff 80%, #ff5edb) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: col-holo 4.5s linear infinite;
  box-shadow: 0 16px 50px rgba(255,110,220,.55), 0 0 34px rgba(120,220,255,.45);
}
.col-cardview.col-r-divina .col-cardview__rarity {
  background: linear-gradient(120deg, #ff5edb, #ffd21e, #5efcff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: col-holo-bg 3s linear infinite; font-weight: 900;
}

/* Carta Divina nell'apertura bustina / reveal boss */
.pack-item--card.col-r-divina .pack-flip__img {
  border: 3px solid transparent;
  background:
    linear-gradient(#0b1030, #0b1030) padding-box,
    linear-gradient(120deg, #ff5edb, #ffd21e 30%, #5efcff 55%, #7b6bff 80%, #ff5edb) border-box;
  background-size: 100% 100%, 300% 300%;
  animation: col-holo 4.5s linear infinite;
  box-shadow: 0 18px 56px rgba(255,110,220,.6), 0 0 30px rgba(120,220,255,.5);
}
.pack-item--card.col-r-divina .pack-item__tag { color: #ff8be6; animation: pack-legend 1s ease-in-out infinite; }
.pk-aura--divina { background: radial-gradient(circle, rgba(200,120,255,.9), rgba(120,220,255,.4) 55%, transparent 72%); }

/* Sezione Boss: intestazione con corona */
.col-set__name { position: relative; }

.reduce-motion .col-r-divina .col-tile__art,
.reduce-motion .col-r-divina .col-tile__art::after,
.reduce-motion .col-rarcount__it.col-r-divina { animation: none !important; }