/* ==========================================================================
   PACKS (Phase 7) — shelf, foil pack art, admin odds editor and the opening cinematic.
   100% CSS: no JavaScript, no inline styles (CSP default-src 'self'). The opening cinematic lives in pack-open.css (generated by bin/build-pack-open-css.php).
   Only transform / translate / scale / rotate / opacity are animated, and only while a card is on stage.
   ========================================================================== */

/* ---- rarity colours (--rc) ---------------------------------------------------------------- */
.pr-common, .rv-common { --rc: #d9935a; }
.pr-rare, .rv-rare { --rc: #cfd8e6; }
.pr-epic, .rv-epic { --rc: #b57bff; }
.pr-legendary, .rv-legendary { --rc: #ffd24d; }
.pr-mythic, .rv-mythic { --rc: #ff4d6d; }
.pr-exclusive, .rv-exclusive { --rc: #46d6ff; }
.pr-ultimate, .rv-ultimate { --rc: #ffe08a; }

.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border: 1px solid var(--line2); background: #0b0b0e; color: #cfcfd6; font: 700 .66rem/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.chip[class*="pr-"] { color: var(--rc); border-color: var(--rc); }

/* ---- foil booster pack ---------------------------------------------------------------------- */
.pk { --pa: #7c5cff; --pb: #2fd4ff; position: relative; display: block; width: 100%; aspect-ratio: 5 / 8; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55)); }
@keyframes pkshine { to { transform: translateX(130%); } }

/* ---- the shelf ---------------------------------------------------------------------------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.4rem; }
.pkc { --pa: #7c5cff; position: relative; display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 1.3rem; padding: 1.4rem; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--pa) 45%, var(--line));
    background: radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--pa) 24%, transparent), transparent 60%), var(--panel); transition: transform .3s var(--ease), box-shadow .3s; }
.pkc:hover { transform: translateY(-4px); box-shadow: 0 20px 44px -16px var(--pa); }
.pkc.is-off { opacity: .72; }
.pkc-art { align-self: center; }
.pkc-art .pk { transform: rotate(-3deg); transition: transform .45s var(--ease); }
.pkc:hover .pkc-art .pk { transform: rotate(0) scale(1.06); }
.pkc:hover .dp-sheen { animation-duration: 1.6s; }
.pkc-body { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.pkc-body h2 { margin: 0; font-size: 1.7rem; }
.pkc-body p { margin: 0; }
.pkc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .86rem; color: #cfcfd6; }
.pkc-facts li { display: flex; gap: .5rem; align-items: flex-start; }
.pkc-facts .ico { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; color: var(--muted); }
.pkc-facts li.hot { color: var(--gold2); } .pkc-facts li.hot .ico { color: var(--gold); }
.pkc-buy { margin-top: auto; } .pkc-buy .btn { white-space: nowrap; --px: .9rem; letter-spacing: .1em; gap: .45rem; justify-content: space-between; } .pkc-buy .btn .cost { margin-left: auto; }
.rates summary { cursor: pointer; font: 700 .7rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.rates-t { width: 100%; margin: .6rem 0 .2rem; border-collapse: collapse; font-size: .84rem; }
.rates-t th { text-align: left; width: 5.5rem; font-weight: 700; color: var(--rc); padding: .18rem 0; }
.rates-t td { padding: .18rem 0 .18rem .5rem; }
.rates-t td:last-child { width: 4.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.rates-t progress, .odds-t progress { height: 7px; }
.rates-t progress::-webkit-progress-value, .odds-t progress::-webkit-progress-value { background: var(--rc, var(--gold)); }
.rates-t progress::-moz-progress-bar, .odds-t progress::-moz-progress-bar { background: var(--rc, var(--gold)); }
.recent { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.recent li { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
@media (max-width: 460px) { .pkc { grid-template-columns: 1fr; } .pkc-art { max-width: 150px; margin: 0 auto; } }

/* ---- admin ------------------------------------------------------------------------------- */
.pill-s { display: inline-block; padding: 2px 9px; font: 800 .62rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line2); color: var(--muted); vertical-align: middle; }
.pill-s.st-live { color: var(--green); border-color: var(--green); } .pill-s.st-scheduled { color: var(--cyan); border-color: var(--cyan); }
.pill-s.st-ended, .pill-s.st-archived { color: var(--red); border-color: var(--red); } .pill-s.st-draft { color: var(--gold); border-color: var(--gold); }
.pk-mini { --pa: #7c5cff; --pb: #2fd4ff; display: inline-block; flex: none; width: 26px; height: 40px; border-radius: 3px; background: linear-gradient(165deg, var(--pa), var(--pb)); border: 1px solid rgba(255, 255, 255, .4); }
.oddsmini { display: flex; flex-wrap: wrap; gap: .25rem; }
.oddsmini i { font: 700 .66rem/1.2 var(--body); font-style: normal; padding: 2px 6px; border: 1px solid var(--rc); color: var(--rc); white-space: nowrap; }
.odds-t { width: 100%; }
.odds-t tbody th { text-align: left; }
.odds-in { width: 6rem !important; text-align: right; font-variant-numeric: tabular-nums; }
.odds-total th, .odds-total td { border-top: 2px solid var(--line2); font-size: 1rem; }
.odds-total.ok td { color: var(--green); } .odds-total.bad td { color: #ff8a9b; }
.odds-total progress::-webkit-progress-value { background: var(--green); } .odds-total.bad progress::-webkit-progress-value { background: var(--red); }
.odds-total.ok progress::-moz-progress-bar { background: var(--green); } .odds-total.bad progress::-moz-progress-bar { background: var(--red); }
.warn { color: #ffb04d; }
.notice.ok { border-color: var(--green); background: rgba(61, 220, 132, .08); color: #c9f5da; }
.notice .ico { width: 1rem; height: 1rem; vertical-align: -2px; }
.presets { margin-top: .6rem; }
.pkpv { max-width: 200px; }
.btn[disabled] { pointer-events: none; }

/* ---- the sealed pack art (shelf, cards, opening) ---- */
.dp{position:absolute;inset:0;display:block;overflow:hidden;container-type:inline-size;background:linear-gradient(90deg,#ffffff16,#0000 12%,#0000 84%,#0000008a),linear-gradient(168deg,#211d35 0%,#0d0b17 46%,#171226 100%)}
.dp::before,.dp::after{content:"";position:absolute;left:0;right:0;height:6.4%;background:repeating-linear-gradient(180deg,#ffffff2e 0 1px,#0000004d 1px 3px),linear-gradient(90deg,#ffffff14,#0004);z-index:2}
.dp::before{top:0}
.dp::after{bottom:0}
.dp-edge{position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff22,inset 0 0 8cqw #000}
.dp-frame{position:absolute;inset:8% 7.5%;border:1px solid #ffe08a77}
.dp-top{position:absolute;left:0;right:0;top:12.5%;text-align:center;font:400 9.5cqw/1 var(--display);letter-spacing:.34em;padding-left:.34em;color:#ffe08a;text-shadow:0 0 14px #ffe08a66;text-transform:uppercase}
.dp-emb{position:absolute;left:50%;top:47%;width:50cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.2cqw solid #ffe08acc;box-shadow:0 0 6cqw #ffe08a66,inset 0 0 8cqw color-mix(in srgb,var(--pa) 70%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--pa) 40%,transparent),#0000 70%)}
.dp-emb::before{content:"";position:absolute;inset:-9%;border-radius:50%;border:1px dashed #ffe08a88}
.dp-emb i{position:absolute;inset:22%;rotate:45deg;border:1.2cqw solid #fff;box-shadow:0 0 5cqw #ffe08a,inset 0 0 3cqw #ffe08a}
.dp-emb i::after{content:"";position:absolute;inset:30%;background:#fff;box-shadow:0 0 4cqw 1cqw #ffe08a}
.dp-name{position:absolute;left:0;right:0;top:73.5%;text-align:center;font:700 5.2cqw/1 var(--body);letter-spacing:.28em;padding-left:.28em;text-transform:uppercase;color:#fff;overflow:hidden;white-space:nowrap}
.dp-sub{position:absolute;left:0;right:0;top:81%;text-align:center;font:600 3.2cqw/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#ffffffa0}
.dp-sheen{position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(100deg,#0000,#ffffff30 45%,#fff5 50%,#ffffff30 55%,#0000);rotate:14deg;translate:-160% 0;animation:pksheen 5.5s ease-in-out infinite;mix-blend-mode:screen}
.dp-emb img{position:absolute;inset:6%;width:88%;height:88%;border-radius:50%;object-fit:cover}
.dp-emb:has(img) i{display:none}
@keyframes pksheen{0%,55%{translate:-160% 0}100%{translate:420% 0}}