/* Okno před zápasem: vybraný balíček leží ve 3D na stole pod reflektorem (deck3d.js), vedle něj odznaky
   v objímkách a pod tím řada ostatních balíčků. Rozměry balíčku: --w šířka, --h výška, --t tloušťka. */
.pick-stage { --tx: 0; --ty: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; min-height: clamp(220px, 34dvh, 290px);
  margin: 0 -6px; padding: 0 10px 0 0; border-radius: 18px; isolation: isolate;
  background:
    radial-gradient(ellipse 55% 60% at 36% 30%, rgba(255, 220, 140, .16), transparent 70%),
    radial-gradient(ellipse 90% 60% at 40% 115%, #4a1236, transparent 70%),
    linear-gradient(180deg, #14050f, #26091d);
  box-shadow: inset 0 0 0 1.5px rgba(255, 204, 77, .3), inset 0 -40px 60px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .45); }
.pick-stage.thud { animation: ps-thud .38s ease-out; }
@keyframes ps-thud { 18% { transform: translateY(3px); } 42% { transform: translateY(-1.5px); } 70% { transform: translateY(.5px); } }
/* Kužel světla nad balíčkem a stůl pod ním */
.pick-stage::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: 6%; width: calc(100% - 150px - 12%); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 232, 170, .2), rgba(255, 232, 170, .04) 70%, transparent); clip-path: polygon(38% 0, 62% 0, 96% 100%, 4% 100%);
  opacity: .35; transition: opacity .5s; }
.pick-stage.landed::before { opacity: 1; }
.ps-table { position: absolute; z-index: -1; left: 4%; width: calc(100% - 150px - 8%); bottom: 6%; height: 50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 204, 77, .13), rgba(140, 40, 100, .16) 62%, transparent); }
.ps-deck { grid-area: 1 / 1; min-width: 0; display: grid; place-items: center; }
.deck-picker .modal-box > * { min-width: 0; }
.pick-stage.bad .d3-box { filter: saturate(.45) brightness(.8); }

/* 3D balíček */
.d3 { --w: clamp(92px, 26vw, 132px); --h: calc(var(--w) * 1.4); --t: calc(var(--w) * .22); --edge: #f3e4c0;
  position: relative; width: min(100%, calc(var(--w) * 1.9)); height: calc(var(--w) * 1.75); display: grid; place-items: center; perspective: 820px; perspective-origin: 50% -10%; }
.d3-fall { transform-style: preserve-3d; }
.d3-box { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: rotateX(calc(54deg - var(--ty) * 14deg)) rotateZ(calc(-26deg + var(--tx) * 20deg)); transition: transform .3s ease-out; }
.d3-face { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; }
.d3-top, .d3-bottom { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); border-radius: 4px; }
.d3-top { transform: translateZ(calc(var(--t) / 2)); overflow: hidden;
  background: linear-gradient(160deg, #6b2a5a, #2a0b1c) center 22% / cover; }
/* Rámeček a ztmavení dole leží nad obrázkem obálky */
.d3-top::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 50%, rgba(20, 6, 16, .75));
  box-shadow: inset 0 0 0 3px #d8a94a, inset 0 0 0 5px #2a0b1c, inset 0 0 0 6.5px rgba(255, 214, 128, .75); }
.d3-bottom { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: #2a1240; }
/* Boky jsou hrany karet: světlé proužky papíru s tenkými tmavými mezerami */
.d3-front, .d3-back { width: var(--w); height: var(--t); margin: calc(var(--t) / -2) 0 0 calc(var(--w) / -2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), repeating-linear-gradient(180deg, var(--edge) 0 1.6px, #b8925a 1.6px 2.1px, #4a1a3a 2.1px 2.6px); }
.d3-front { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); filter: brightness(.82); }
.d3-back { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.d3-left, .d3-right { width: var(--t); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--t) / -2);
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)), repeating-linear-gradient(90deg, #4a1a3a 0 .5px, #b8925a .5px 1px, var(--edge) 1px 2.6px); }
.d3-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); filter: brightness(1.05); }
.d3-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); filter: brightness(.6); }
.d3-plate { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 7%; padding: 5px 4px; border-radius: 5px; text-align: center;
  font: 800 calc(var(--w) * .085)/1.15 var(--font-display); color: #4a2c0a; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  background: linear-gradient(180deg, #f8eed2, #e0c992); box-shadow: 0 0 0 1.5px #a07a3c, 0 3px 6px rgba(0, 0, 0, .5); }
.d3-sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 48%, transparent 58%) 100% 0 / 250% 100% no-repeat; }
.pick-stage.landed .d3-sheen { animation: d3-sheen 5s .1s ease-in-out infinite; }
@keyframes d3-sheen { 0% { background-position: 100% 0; } 32%, 100% { background-position: 0% 0; } }
.d3-shadow { position: absolute; left: 50%; top: 57%; width: calc(var(--w) * 1.75); height: calc(var(--w) * .95); border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .75), rgba(0, 0, 0, .4) 55%, transparent); }
/* Obláček prachu a vlna po dopadu, zploštělé do roviny stolu */
.d3-dust { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform: scaleY(.42); pointer-events: none; }
.d3-dust i { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255, 238, 200, .95), rgba(255, 204, 77, .35) 45%, transparent 70%); }
.d3-dust::before { content: ''; position: absolute; width: calc(var(--w) * 1.2); height: calc(var(--w) * 1.2); margin: calc(var(--w) * -.6); border-radius: 50%;
  border: 3px solid rgba(255, 220, 150, .7); opacity: 0; }
.pick-stage.thud .d3-dust i { animation: d3-dust .75s ease-out; }
.pick-stage.thud .d3-dust::before { animation: d3-wave .6s ease-out; }
@keyframes d3-dust {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(calc(var(--w) * .45)) scale(.6); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--w) * (.6 + var(--d)))) scale(2.4); }
}
@keyframes d3-wave { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.9); border-width: 1px; } }

/* Pád: balíček letí shora čelem k hráči, ve vzduchu se položí naplocho, dopadne a dvakrát poskočí */
.d3.landing .d3-fall { animation: d3-fall .9s backwards; }
.d3.landing .d3-box { animation: d3-lay .9s backwards; }
.d3.landing .d3-shadow { animation: d3-shadow .9s backwards; }
@keyframes d3-fall {
  0% { transform: translateY(-190%) scale(1.4); opacity: 0; animation-timing-function: cubic-bezier(.55, 0, .9, .45); }
  14% { opacity: 1; }
  62% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  75% { transform: translateY(-8%) scale(1); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  86% { transform: translateY(0); animation-timing-function: ease-out; }
  93% { transform: translateY(-2%); }
  100% { transform: none; }
}
@keyframes d3-lay {
  0% { transform: rotateX(-10deg) rotateY(-24deg) rotateZ(10deg); animation-timing-function: cubic-bezier(.4, 0, .8, .6); }
  62% { transform: rotateX(60deg) rotateZ(-30deg); animation-timing-function: ease-out; }
  78% { transform: rotateX(50deg) rotateZ(-24deg); }
  100% { transform: rotateX(54deg) rotateZ(-26deg); }
}
@keyframes d3-shadow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25); animation-timing-function: ease-in; }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  75% { opacity: .75; transform: translate(-50%, -50%) scale(.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Objímky na odznaky: po dopadu balíčku do nich odznaky zapadnou */
.ps-badges { grid-area: 1 / 2; display: grid; gap: 10px; }
.ps-badge { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 9px; align-items: center; padding: 7px 8px 7px 7px; border: 0; border-radius: 14px;
  cursor: pointer; text-align: left; color: var(--paper); background: rgba(10, 4, 16, .55); box-shadow: inset 0 0 0 1px rgba(255, 214, 128, .28); transition: background .15s, transform .12s; }
@media (hover: hover) { .ps-badge:hover { background: rgba(255, 204, 77, .1); } }
.ps-badge:active { transform: scale(.96); }
.ps-socket { grid-row: span 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #1d0716, #0a0310 70%);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .85), 0 0 0 2px #8a6a2a, 0 0 0 3.5px #2a0b1c, 0 0 0 4.5px rgba(255, 214, 128, .5); }
.ps-socket .ability-emblem { width: 46px; }
.ps-socket i { font: 900 20px/1 var(--font-display); font-style: normal; color: var(--gold); opacity: .55; }
.ps-badge small { align-self: end; font: 800 9.5px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ps-badge b { align-self: start; margin-top: 3px; font: 700 12.5px/1.15 var(--font-body); }
.ps-badge.empty b { color: var(--muted); }
.ps-badge.pop .ability-emblem { animation: ps-drop .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.ps-badge.pop .ps-socket { animation: ps-flash .7s ease-out; }
.ps-badge.pop small, .ps-badge.pop b { animation: ps-text .35s .2s ease-out backwards; }
.ps-badge.pop.passive .ability-emblem, .ps-badge.pop.passive .ps-socket { animation-delay: .14s; }
.ps-badge.pop.passive small, .ps-badge.pop.passive b { animation-delay: .34s; }
@keyframes ps-drop { 0% { opacity: 0; transform: translateY(-34px) scale(1.9) rotate(-20deg); } 55% { opacity: 1; } }
@keyframes ps-flash { 45% { box-shadow: inset 0 3px 8px rgba(0, 0, 0, .85), 0 0 0 2px var(--gold), 0 0 0 3.5px #2a0b1c, 0 0 0 4.5px var(--gold), 0 0 24px 6px rgba(255, 204, 77, .7); } }
@keyframes ps-text { from { opacity: 0; transform: translateX(-6px); } }

.ps-info { position: absolute; left: 0; right: 150px; bottom: 10px; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .3s; }
.pick-stage.landed .ps-info { opacity: 1; }
.ps-count, .ps-problem { padding: 4px 10px; border-radius: 999px; font: 700 12px/1.2 var(--font-body); background: rgba(0, 0, 0, .45); color: var(--muted); }
.ps-problem { color: #fff; background: #b3263a; text-align: center; }

/* Řada ostatních balíčků: malé hromádky karet, vybraná se nadzvedne a rozzáří */
.pick-decks { display: flex; gap: 10px; overflow-x: auto; margin: 0 -6px; padding: 8px 6px 4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.pick-deck { flex: 0 0 72px; display: grid; justify-items: center; gap: 9px; padding: 0; border: 0; background: none; color: var(--paper); cursor: pointer; scroll-snap-align: start; }
.pd-stack { --stack: 0 2px 0 #eadbb4, 0 3px 0 #6a4a2a, 0 5px 0 #eadbb4, 0 6px 0 #6a4a2a, 0 8px 0 #eadbb4, 0 9px 0 #4a2a1a, 0 12px 14px rgba(0, 0, 0, .55);
  position: relative; width: 50px; height: 68px; border-radius: 5px; box-shadow: var(--stack); transform: perspective(300px) rotateX(22deg); transition: transform .2s, box-shadow .2s; }
.pd-art { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, #6b2a5a, #2a0b1c) center 22% / cover;
  box-shadow: inset 0 0 0 2px #d8a94a, inset 0 0 0 3.5px #2a0b1c; }
.pick-deck b { max-width: 72px; font: 700 11.5px/1.15 var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .pick-deck:hover .pd-stack { transform: perspective(300px) rotateX(22deg) translateY(-3px); } }
.pick-deck[aria-selected="true"] .pd-stack { transform: perspective(300px) rotateX(22deg) translateY(-6px); box-shadow: var(--stack), 0 0 0 2px var(--gold), 0 0 18px rgba(255, 204, 77, .55); }
.pick-deck[aria-selected="true"] b { color: var(--gold); }
.pick-deck.bad b { color: #ff8a9a; }

@media (max-width: 440px) {
  .d3 { --w: clamp(84px, 26vw, 108px); }
  .pick-stage { grid-template-columns: minmax(0, 1fr) 124px; padding-right: 8px; }
  .pick-stage::before, .ps-table { width: calc(100% - 124px - 8%); }
  .ps-info { right: 124px; }
  .ps-badge { grid-template-columns: 42px minmax(0, 1fr); column-gap: 7px; padding: 6px; }
  .ps-socket { width: 42px; height: 42px; }
  .ps-socket .ability-emblem { width: 37px; }
  .ps-badge b { font-size: 11.5px; }
}