/* Booster box: meerdere tickets tegelijk op Done. */

.cel-booster-scene { position: absolute; inset: 0; }

.cel-booster-title {
  position: absolute; left: 0; right: 0; top: 3vh; display: flex; justify-content: center; align-items: baseline; gap: 2vh;
  font-family: var(--font-brand); color: #fff; text-shadow: 0 .6vh 0 var(--c1), 0 0 3vh var(--glow);
}
.cel-booster-count { font-size: 11vh; line-height: 1; }
.cel-booster-word { font-size: 6vh; }

.cel-box {
  position: absolute; left: 50%; top: 50%; width: 36vh; height: 32vh; margin: -12vh 0 0 -18vh;
  filter: drop-shadow(0 3vh 4vh rgb(0 0 0 / .6)) drop-shadow(0 0 4vh var(--glow));
}
.cel-box-body {
  position: absolute; inset: 7vh 0 0 0; border-radius: 1.2vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vh;
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / .08) 0 1vh, transparent 0 3vh),
    linear-gradient(160deg, #ff9a3c, #ff7800 40%, #7a1f00);
  box-shadow: inset 0 0 0 .5vh #ffd84d, inset 0 -3vh 4vh rgb(0 0 0 / .35);
}
.cel-box-logo { width: 11vh; height: 11vh; object-fit: contain; filter: drop-shadow(0 .6vh .8vh rgb(0 0 0 / .4)); }
.cel-box-times { font-size: 8vh; font-weight: 700; line-height: .9; color: #fff; text-shadow: 0 .5vh 0 #7a1f00; }
.cel-box-label { font-size: 2vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #ffe0b0; }
.cel-box-lid {
  position: absolute; left: -1.5vh; right: -1.5vh; top: 0; height: 8vh; border-radius: 1.2vh; transform-origin: 50% 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #ffd84d, #ff9a3c 60%, #c23200);
  box-shadow: inset 0 0 0 .5vh #fff3c4, 0 1vh 2vh rgb(0 0 0 / .35);
  font-size: 2.6vh; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: #7a1f00;
}
.cel-box-light {
  position: absolute; left: 50%; bottom: 62vh; width: 40vh; height: 110vh; translate: -50% 0; transform-origin: 50% 100%;
  background: linear-gradient(to top, #fff, #ffe0b0 15%, rgb(255 200 80 / .45) 50%, transparent 90%);
  filter: blur(2vh); mix-blend-mode: screen; opacity: 0; scale: 1 0;
  transition: scale .5s cubic-bezier(.2, .9, .3, 1), opacity .3s;
}
.cel-box-light.is-on { opacity: 1; scale: 1 1; }

.cel-fan { position: absolute; left: 50%; top: 18vh; width: 0; height: 0; }
.cel-bcard {
  position: absolute; left: -7.5vh; top: 0; width: 15vh; height: 22vh; opacity: 0;
  padding: .6vh; border-radius: 1.2vh;
  background: linear-gradient(135deg, var(--c3), var(--c2) 35%, var(--c1) 55%, var(--c2) 75%, var(--c3));
  box-shadow: 0 1vh 2.5vh rgb(0 0 0 / .55), 0 0 2vh color-mix(in oklab, var(--glow) 60%, transparent);
  display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff;
  transition: opacity .3s, filter .3s;
}
.cel-bcard::before {
  content: ""; position: absolute; inset: .6vh; border-radius: .8vh; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 25%, color-mix(in oklab, var(--c3) 40%, transparent), transparent 60%),
    linear-gradient(170deg, color-mix(in oklab, var(--c2) 70%, #000), color-mix(in oklab, var(--c1) 85%, #000));
}
.cel-bcard > * { position: relative; z-index: 1; }
.cel-bcard-top { width: 100%; display: flex; justify-content: space-between; align-items: baseline; padding: .6vh .8vh 0; }
.cel-bcard-weight { font-size: 4.2vh; font-weight: 700; line-height: 1; text-shadow: 0 .3vh 0 var(--c1); }
.cel-bcard-rarity { font-size: 1.2vh; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c3); }
.cel-bcard-face { margin-top: .4vh; }
.cel-bcard-avatar { width: 6.5vh; height: 6.5vh; font-size: 2.4vh; box-shadow: 0 0 0 .3vh var(--c3); }
.cel-bcard-name { margin-top: .5vh; font-size: 1.6vh; font-weight: 700; text-transform: uppercase; }
.cel-bcard-title {
  margin: .5vh .8vh 0; font-size: 1.35vh; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-bcard-ref { margin-top: auto; margin-bottom: .8vh; font-size: 1.3vh; font-weight: 700; color: var(--c3); }
.cel-bcard.is-bug { --c1: #052e16; --c2: #16a34a; --c3: #bbf7d0; --glow: rgb(74 222 128 / .7); }
.cel-bcard-more {
  --c1: #222; --c2: #555; --c3: #ddd; --glow: rgb(255 255 255 / .3);
  justify-content: center; font-size: 5vh; font-weight: 700;
}

.cel-booster-scene.is-spotlight .cel-bcard:not(.is-star) { opacity: .3 !important; filter: blur(.3vh) saturate(.5); }
.cel-bcard.is-star { z-index: 5; box-shadow: 0 2vh 5vh rgb(0 0 0 / .6), 0 0 6vh var(--glow); }

.cel-booster-totals {
  position: absolute; left: 50%; top: 74vh; width: min(72vw, 110vh); translate: -50% 0; visibility: hidden;
  padding: 2vh 3vh; border-radius: 2vh; background: rgb(0 0 0 / .55); border: .25vh solid rgb(255 255 255 / .2);
}
.cel-booster-sum { font-size: 3vh; font-weight: 700; color: var(--c3); }
.cel-booster-points { font-size: 5vh; color: #fff; text-shadow: 0 0 2vh var(--glow); font-variant-numeric: tabular-nums; }
.cel-booster-bar { margin-top: 1.2vh; display: flex; height: 2.6vh; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .1); }
.cel-booster-seg { flex: 0 0 0; transition: flex-basis 1s cubic-bezier(.2, .8, .3, 1); box-shadow: inset -.3vh 0 0 rgb(0 0 0 / .25); }
.cel-booster-totals.is-filled .cel-booster-seg { flex-basis: calc(var(--share) * 100%); }
.cel-booster-legend { margin-top: 1vh; display: flex; flex-wrap: wrap; gap: .6vh 2.4vh; font-size: 1.9vh; font-weight: 500; }
.cel-booster-item { display: inline-flex; align-items: center; gap: .8vh; }
.cel-booster-item i { width: 1.4vh; height: 1.4vh; border-radius: 50%; }