/* Moje karty: záložky, kolekce podle sad, balíček a obchod. Samotné balíčky karet jsou v pack.css. */
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 999px; width: min(420px, 100%); margin: 0 auto;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.tabs button { border: 0; border-radius: 999px; padding: 10px 6px; cursor: pointer; background: transparent; color: var(--muted);
  font: 800 13px/1 var(--font-display); letter-spacing: .04em; transition: background .2s, color .2s; }
.tabs button[aria-selected="true"] { color: #2a1400; background: linear-gradient(180deg, #fff1b0, var(--gold) 50%, var(--gold-deep)); box-shadow: 0 4px 14px rgba(255, 204, 77, .3); }

/* Kolekce */
.coll-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip-btn { border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 8px 14px; cursor: pointer; background: transparent; color: #dccff5; font: 600 13px/1 var(--font-body); }
.chip-btn.on { background: rgba(255, 214, 128, .16); border-color: rgba(255, 214, 128, .6); color: #fff2cc; }
.coll-set { display: grid; gap: 12px; margin-top: 8px; }
.coll-set header { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px; }
.coll-set h3 { margin: 0; font: 800 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.set-logo { display: block; height: 26px; width: auto; filter: drop-shadow(0 0 8px rgba(91, 143, 249, .5)); }
.shop-info .set-logo { height: 46px; }
.coll-set.set-clash h3 { font: 800 21px/1 'Barlow Condensed', var(--font-display); letter-spacing: .08em;
  background: linear-gradient(100deg, #c06bff, #5b8ff9 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.coll-set header span { font: 700 13px/1 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.coll-set header i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; position: relative; }
.coll-set header i::after { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.coll-set.set-clash header i::after { background: linear-gradient(90deg, #b54cf5, #5b8ff9, #22d3ee); }
.coll-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 560px) { .coll-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 760px) { .coll-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 940px) { .coll-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* Jeden sloupec pevné šířky: karta (i se zkopírovanými kartami za sebou) a pod ní popisek */
.coll-cell { position: relative; padding: 0; border: 0; background: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr);
  align-content: start; justify-items: center; gap: 8px; }
.coll-cell > .card, .coll-cell > .card-back { --card-w: 100%; width: 100%; grid-area: 1 / 1; }
.coll-cell .card-rays, .coll-cell .card-foil { animation: none; }
@media (hover: hover) { .coll-cell:hover > .card:not(.copy) { transform: perspective(700px) translateY(-4px) scale(1.03); } }
.coll-cell > .card.copy { transform: translate(calc(var(--k) * 5%), calc(var(--k) * -2.5%)) rotate(calc(var(--k) * 2deg)); filter: brightness(.45) saturate(.8); }
.coll-label { grid-area: 2 / 1; min-height: 18px; display: grid; place-items: center; }
.coll-count { padding: 3px 10px; border-radius: 999px; font: 800 12px/1 var(--font-display); color: #2a1400; background: var(--gold); box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.coll-cell.locked .card-back { opacity: .55; }
.coll-cell .card-back.mystery::before { animation: none; }
.coll-cell.locked small { font-size: 11.5px; color: var(--muted); text-align: center; }

/* Rub s otazníkem: kolekce, face-off a odměna */
.card-back.mystery { position: relative; overflow: hidden; }
.card-back.mystery::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(rgba(255, 204, 77, .13) 0 6deg, transparent 6deg 18deg); animation: spin 40s linear infinite; }
.card-back.mystery span { position: relative; width: 50cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font: 900 32cqw/1 var(--font-display);
  background: radial-gradient(circle at 50% 30%, #5a2a90, #1d0b38 70%); box-shadow: 0 0 0 2.5cqw #c98a12, 0 0 0 4.5cqw #3a1460, 0 0 12cqw rgba(255, 204, 77, .45); }
.card-back.mystery.set-clash { background: radial-gradient(circle at 50% 45%, rgba(91, 143, 249, .35), transparent 60%), linear-gradient(170deg, #142454, #0e1430 55%, #0a0a12);
  box-shadow: inset 0 0 0 3cqw #6d8dff, inset 0 0 0 4.5cqw #0e1430, inset 0 0 0 5.5cqw #22d3ee, 0 4cqw 10cqw rgba(0, 0, 0, .55); }
.card-back.mystery.set-clash::before { background: repeating-conic-gradient(rgba(91, 143, 249, .14) 0 6deg, transparent 6deg 18deg); }
.card-back.mystery.set-clash span { color: #fff; text-shadow: 0 0 6cqw rgba(91, 143, 249, .9); background: radial-gradient(circle at 50% 30%, #2b3f8f, #0e1430 70%);
  box-shadow: 0 0 0 2.5cqw #5b8ff9, 0 0 0 4cqw #0e1430, 0 0 12cqw rgba(34, 211, 238, .5); }

/* Balíček: hromádka rubů s počtem, křivka Hype a karty s kopiemi za sebou */
.deck-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px 20px; padding: 18px 18px 16px; border-radius: 22px;
  background: radial-gradient(circle at 12% 30%, rgba(255, 204, 77, .14), transparent 55%), rgba(255, 255, 255, .045); border: 1px solid rgba(255, 214, 128, .2); }
.deck-pile { position: relative; width: 78px; aspect-ratio: 5 / 7; margin: 4px 8px 4px 4px; }
.deck-pile .card-back { position: absolute; inset: 0; width: 100%; }
.deck-pile .card-back:nth-child(1) { transform: rotate(-9deg) translate(-7px, 3px); filter: brightness(.6); }
.deck-pile .card-back:nth-child(2) { transform: rotate(5deg) translate(5px, -1px); filter: brightness(.8); }
.deck-pile b { position: absolute; z-index: 2; right: -12px; bottom: -8px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  font: 900 15px/1 var(--font-display); color: #2a1400; background: radial-gradient(circle at 35% 30%, #fff6cf, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 3px 10px rgba(0, 0, 0, .55); }
.deck-sum { display: grid; gap: 5px; }
.deck-sum small { font: 700 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.deck-sum b { font: 900 clamp(22px, 6vw, 30px)/1 var(--font-display); color: var(--gold); }
.deck-sum span { font-size: 13px; color: #dccff5; }
.deck-head .curve { grid-column: 1 / -1; justify-content: center; }
.curve { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.curve i { width: 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; font-style: normal; }
.curve i::before { content: ''; order: 1; width: 100%; height: calc(var(--h) * 44px + 2px); border-radius: 4px; background: linear-gradient(180deg, #ff7ab8, var(--hot)); }
.curve em { order: 0; font: 700 10px/1 var(--font-display); font-style: normal; color: #ffd1e6; }
.curve span { order: 2; font: 700 10px/1 var(--font-display); color: var(--muted); }
@media (min-width: 640px) { .deck-head { grid-template-columns: auto 1fr auto; } .deck-head .curve { grid-column: auto; } }
.deck-grid { margin-top: 6px; }

/* Obchod */
.shop-note { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.shop-list { display: grid; gap: 18px; }
.shop-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; padding: 22px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); }
.shop-item.featured { background: radial-gradient(circle at 20% 30%, rgba(91, 143, 249, .2), transparent 60%), linear-gradient(160deg, rgba(181, 76, 245, .12), rgba(14, 20, 48, .5));
  border-color: rgba(109, 141, 255, .45); }
.shop-pack { display: grid; place-items: center; }
.shop-item .pack { --pack-w: clamp(120px, 34vw, 210px); }
.shop-item.featured .pack { --pack-w: clamp(150px, 42vw, 250px); }
.shop-info { display: grid; gap: 8px; justify-items: start; }
.shop-info small { font: 700 11px/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.shop-info h3 { margin: 0; font: 900 22px/1.05 var(--font-display); }
.featured .shop-info h3 { font: 800 30px/.95 'Barlow Condensed', var(--font-display); text-transform: uppercase; letter-spacing: .03em;
  background: linear-gradient(100deg, #c06bff, #5b8ff9 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.shop-info p { margin: 0; font-size: 14px; color: #dccff5; }
.shop-info .btn[disabled] { opacity: .65; cursor: default; }
@media (max-width: 520px) {
  .shop-item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .shop-info { justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .card-back.mystery::before { animation: none; }
}