/* ————— カードパック開封（cardfx.js の playCardPack）—————
 * パックの絵は台ごと（packart.js）。表・裏・上下のふた・裏の左右の扉を clip-path で切り分けた部品で組む。
 * 重さ対策：動かすのは transform と opacity だけ。動くぼかし（filter）・背景の合成・backdrop-filter は使わない。
 */
.pk { position: fixed; inset: 0; z-index: 36; overflow: hidden; color: #fff; opacity: 0; transition: opacity 0.3s ease; user-select: none; -webkit-user-select: none; touch-action: none; --cw: min(60vw, 290px, calc(46vh * 0.716)); --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 40%; --leak: rgba(255, 255, 255, 0.95); --nowc: #ffffff; }
.pk.is-on { opacity: 1; }
.pk { background: #03040f; }
.pk.best-holo { --leak: rgba(170, 225, 255, 0.95); }
.pk.best-gold { --leak: rgba(255, 205, 90, 0.95); }
.pk.best-rainbow { --leak: rgba(255, 190, 240, 0.95); }
.pk.best-legend { --leak: rgba(255, 232, 150, 1); }
.pk.now-holo { --nowc: #7fd8ff; }
.pk.now-gold { --nowc: #ffc94d; }
.pk.now-rainbow { --nowc: #ff9ae0; }
.pk.now-legend { --nowc: #ffe27a; }
.pk-morph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; }
/* 3D の変身中：ゲット演出のぬいぐるみをそのまま引き継ぐので、画面は一瞬で出して背景だけをふわっと出す */
.pk.morphing { opacity: 1; transition: none; background: transparent; }
.pk.morphing .pk-bg { animation: pk-fade-in 0.35s ease both; }
@keyframes pk-fade-in { from { opacity: 0; } }

/* 背景（止まった絵。色の変化は重ねた層の opacity で） */
.pk-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--pa) 38%, #1b2263) 0%, #0d1236 48%, #04061a 100%); }
.pk-bg::after { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 78% 12%, #fff 0 1px, transparent 2px), radial-gradient(circle at 64% 72%, #fff 0 1px, transparent 2px), radial-gradient(circle at 24% 82%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 90% 56%, #fff 0 1px, transparent 2px), radial-gradient(circle at 40% 40%, #fff 0 1px, transparent 2px); background-size: 220px 260px; }
.pk-tint { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--nowc) 46%, transparent), transparent 58%); opacity: 0; transition: opacity 0.5s ease; }
.pk[class*="now-"]:not(.now-plain) .pk-tint { opacity: 1; }
.pk.now-rainbow .pk-tint { background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.35), transparent 30%), conic-gradient(from 0deg at 50% 46%, rgba(255, 111, 181, 0.45), rgba(255, 224, 102, 0.45), rgba(126, 224, 129, 0.45), rgba(79, 195, 247, 0.45), rgba(179, 136, 255, 0.45), rgba(255, 111, 181, 0.45)); }
.pk.now-legend .pk-tint { background: radial-gradient(circle at 50% 46%, rgba(255, 226, 122, 0.55), transparent 50%), repeating-linear-gradient(135deg, rgba(90, 64, 0, 0.55) 0 44px, rgba(40, 28, 0, 0.55) 44px 88px); }
.pk.charge .pk-tint { opacity: 0; }
.pk-bg, .pk-tint { transition: opacity 0.5s ease; }
.pk.charge .pk-bg { opacity: 0.35; }
/* 光線：512px のキャンバスを大きく伸ばして回すだけ（キャンバスは描いた解像度のまま合成されるので軽い） */
.pk-rays { position: absolute; left: 50%; top: 46%; width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; opacity: 0; transition: opacity 0.5s ease; animation: pk-spin 22s linear infinite; pointer-events: none; }
.pk.now-gold .pk-rays, .pk.now-rainbow .pk-rays, .pk.now-legend .pk-rays { opacity: 0.7; }
.pk.st-open .pk-rays { opacity: 0.45; animation-duration: 6s; }
.pk.charge .pk-rays { opacity: 0.35; animation-duration: 3s; }
.pk.st-summary .pk-rays { opacity: 0.25; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
.pk-beam { position: absolute; left: 50%; bottom: -10%; width: calc(var(--cw) * 1.8); height: 125%; margin-left: calc(var(--cw) * -0.9); background: radial-gradient(50% 100% at 50% 100%, rgba(255, 236, 160, 0.95), rgba(255, 200, 80, 0.35) 42%, transparent 70%); opacity: 0; transform: scaleX(0.2); transition: opacity 0.6s ease, transform 0.8s ease; pointer-events: none; }
.pk.charge-legend .pk-beam { opacity: 1; transform: scaleX(1); }
.pk.charge-rainbow .pk-beam { opacity: 0.8; transform: scaleX(0.75); background: radial-gradient(50% 100% at 50% 100%, rgba(255, 170, 235, 0.9), rgba(120, 200, 255, 0.3) 42%, transparent 70%); }
.pk-beam.pulse { animation: pk-beat 0.45s ease-out; }
@keyframes pk-beat { 0% { opacity: 1; transform: scaleX(1.15); } }

/* 上：進み具合・スキップ */
.pk-head { position: absolute; left: 0; right: 0; top: calc(var(--safe-t, 0px) + 14px); height: 30px; display: flex; justify-content: center; align-items: center; z-index: 30; pointer-events: none; }
.pk-dots { display: flex; gap: 6px; transition: opacity 0.3s ease; }
.pk-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); transition: background 0.3s ease; }
.pk-dots i.on { background: #fff; }
.pk:not(.st-cards) .pk-dots { opacity: 0; }
.pk-skip { position: absolute; right: calc(var(--safe-r, 0px) + 14px); pointer-events: auto; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(10, 14, 40, 0.65); color: #dfe5ff; font-weight: 800; font-size: 12px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.pk.st-summary .pk-skip { display: none; }

/* 舞台（パックとカードの中心） */
.pk-stage { position: absolute; left: 50%; top: 46%; width: var(--cw); aspect-ratio: 63 / 88; transform: translate(-50%, -50%); perspective: 1300px; }

/* ————— パック ————— */
.pk-pack { position: absolute; left: 50%; top: 50%; width: calc(var(--cw) * 1.04); aspect-ratio: 0.6; z-index: 2; transform-style: preserve-3d; transform: translate(-50%, -50%) translateY(-120vh) rotate(-12deg); transition: transform 0.8s cubic-bezier(0.2, 1.25, 0.35, 1), opacity 0.3s ease; will-change: transform; --po: 0; }
.pk.morphing .pk-pack, .pk.from3d .pk-pack { transform: translate(-50%, -50%); transition: none; }
.pk.morphing .pk-pack { opacity: 0; }
.pk.st-pack .pk-pack, .pk.st-open .pk-pack { transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry)); }
.pk.st-pack.pk-live .pk-pack { transition: transform 0.15s ease-out; }
.pk.st-pack:not(.morphing) .pk-pack { animation: pk-float 3.2s ease-in-out 0.9s infinite; }
@keyframes pk-float { 50% { translate: 0 -8px; } }
.pk-pack.bonk { animation: pk-bonk 0.32s cubic-bezier(0.2, 1.6, 0.4, 1) !important; }
@keyframes pk-bonk { 30% { translate: 0 -16px; scale: 1.04; } 100% { translate: 0 0; scale: 1; } }
.pk.st-open .pk-pack { animation: pk-jolt 0.38s ease-out; }
@keyframes pk-jolt { 30% { translate: 0 7px; scale: 1.03; } 100% { translate: 0 0; scale: 1; } }
.pk.open-flick.st-open .pk-pack { animation: pk-jump 0.5s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes pk-jump { 30% { translate: 0 -30px; rotate: -4deg; } 100% { translate: 0 0; rotate: 0deg; } }
/* 開いたあと：切った向きの反対へ抜ける */
.pk.st-out .pk-pack, .pk.st-cards .pk-pack, .pk.st-summary .pk-pack { transform: translate(-50%, -50%) translateY(115vh) rotate(7deg); transition: transform 0.7s cubic-bezier(0.55, 0, 0.8, 0.3); }
.pk.open-bottom.st-out .pk-pack, .pk.open-bottom.st-cards .pk-pack, .pk.open-bottom.st-summary .pk-pack { transform: translate(-50%, -50%) translateY(-115vh) rotate(-7deg); }
.pk.open-party.st-out .pk-pack, .pk.open-party.st-cards .pk-pack, .pk.open-party.st-summary .pk-pack { transform: translate(-50%, -50%) translateY(20vh) scale(0.7); opacity: 0; transition: transform 0.6s ease-in, opacity 0.5s ease; }
.pk-shadow { position: absolute; left: 8%; right: 8%; bottom: -9%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); transform: translateZ(-20px); }

.pk-flipper { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
.pk.side-back .pk-flipper { transform: rotateY(180deg); }
.pk-flipper.dragging { transition: none; }
.pk-face { position: absolute; inset: 0; transform-style: preserve-3d; }
.pk-face.front { transform: translateZ(3px); }
.pk-face.back { transform: rotateY(180deg) translateZ(3px); }
.pk-part { position: absolute; inset: 0; background-image: var(--front); background-size: 100% 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.6s ease 0.15s; }
.back .pk-part { background-image: var(--back); }
.pk-part.body { clip-path: inset(var(--cut-t) 0 calc(100% - var(--cut-b)) 0); }
.pk-part.cap-t { clip-path: inset(0 0 calc(100% - var(--cut-t)) 0); transform-origin: 20% var(--cut-t); }
.pk-part.cap-b { clip-path: inset(var(--cut-b) 0 0 0); transform-origin: 80% var(--cut-b); }
/* 裏の扉：外側を軸に手前へ開く。90° を越えると扉の裏（銀の袋の内側）が見える */
.pk-pack { --door: 118deg; }
.pk-part.half-l { clip-path: inset(var(--cut-t) 50% calc(100% - var(--cut-b)) 0); transform-origin: 0 50%; transform: rotateY(calc(var(--po) * var(--door) * -1)); }
.pk-part.half-r { clip-path: inset(var(--cut-t) 0 calc(100% - var(--cut-b)) 50%); transform-origin: 100% 50%; transform: rotateY(calc(var(--po) * var(--door))); }
.pk.st-pack .pk-part.half-l, .pk.st-pack .pk-part.half-r, .pk.st-pack .pk-lining { transition: transform 0.25s ease-out; }
/* 扉の裏の銀の内張り：扉と同じ面を裏返して重ねる（表を向いている間は隠れる） */
.pk-lining { position: absolute; top: var(--cut-t); bottom: calc(100% - var(--cut-b)); width: 50%; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 30%, rgba(255, 255, 255, 0.25) 70%, rgba(0, 0, 0, 0.2)), repeating-linear-gradient(177deg, #8d96a8 0 6px, #eef2f8 10px, #b4bccb 15px, #fbfcfe 19px, #99a2b4 26px); transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.3, 1); }
.pk-lining.l { left: 0; transform-origin: 0 50%; transform: rotateY(calc(var(--po) * var(--door) * -1)) translateX(50%) rotateY(180deg) translateX(-50%); }
.pk-lining.r { left: 50%; transform-origin: 100% 50%; transform: rotateY(calc(var(--po) * var(--door))) translateX(-50%) rotateY(180deg) translateX(50%); }
/* 内張りのきらめき：扉の開き具合で光の帯が走る */
.pk-lining i { position: absolute; top: -10%; bottom: -10%; left: -80%; width: 70%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.95) 45%, color-mix(in srgb, var(--leak) 70%, #fff) 55%, transparent); transform: translateX(calc(var(--po) * 260%)) skewX(-10deg); }
.pk.open-party .pk-lining i { animation: pk-lining-glint 0.9s ease-out 0.1s both; }
@keyframes pk-lining-glint { from { transform: translateX(120%) skewX(-10deg); } to { transform: translateX(300%) skewX(-10deg); } }
.pk.open-top .cap-t { transform: translate(26%, -150%) rotate(-28deg); opacity: 0; }
.pk.open-flick .cap-t { transform: translate(-8%, -320%) rotate(38deg); opacity: 0; transition: transform 0.6s cubic-bezier(0.1, 0.9, 0.3, 1), opacity 0.5s ease 0.2s; }
.pk.open-bottom .cap-b { transform: translate(-24%, 150%) rotate(24deg); opacity: 0; }
/* 中の銀の袋（裏の扉を開くと見える）：しわのあるアルミ・光の帯・きらめき・中身の光 */
.pk-inner { position: absolute; left: 2%; right: 2%; top: var(--cut-t); bottom: calc(100% - var(--cut-b)); overflow: hidden; background: radial-gradient(120% 70% at 50% 50%, transparent 40%, rgba(20, 24, 40, 0.55)), repeating-linear-gradient(94deg, #7d8698 0 8px, #eef2f8 13px, #a9b2c1 19px, #f7f9fc 24px, #8891a3 31px), linear-gradient(180deg, #cfd5df, #8d96a7); }
.pk-inner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side, var(--leak), transparent); opacity: calc(var(--po) * 0.9); }
.pk-foil-sheen { position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.9) 50%, transparent); transform: translateX(calc(var(--po) * 330%)) skewX(-14deg); z-index: 1; }
.pk-inner i { position: absolute; width: 16px; height: 16px; margin: -8px; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); opacity: 0; z-index: 2; }
.pk-inner i:nth-child(2) { left: 22%; top: 20%; }
.pk-inner i:nth-child(3) { left: 70%; top: 32%; animation-delay: 0.25s !important; }
.pk-inner i:nth-child(4) { left: 40%; top: 58%; animation-delay: 0.5s !important; }
.pk-inner i:nth-child(5) { left: 78%; top: 74%; animation-delay: 0.15s !important; }
.pk-inner i:nth-child(6) { left: 18%; top: 82%; animation-delay: 0.4s !important; }
.pk-inner i:nth-child(7) { left: 55%; top: 12%; animation-delay: 0.65s !important; }
.pk.side-back.st-pack .pk-inner i, .pk.open-party .pk-inner i { animation: pk-foil-twinkle 0.9s ease-in-out infinite; }
@keyframes pk-foil-twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.pk.open-party .pk-inner::after { opacity: 1; transition: opacity 0.3s ease; }
.pk.open-party .pk-foil-sheen { animation: pk-foil-run 0.8s ease-out both; }
@keyframes pk-foil-run { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(360%) skewX(-14deg); } }
/* 箔のきらめき（指・傾きで動く）。transform だけで動かす */
.pk-shine { position: absolute; inset: 0; overflow: hidden; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: inset(var(--cut-t) 0 calc(100% - var(--cut-b)) 0); }
.pk-shine i { position: absolute; top: -10%; bottom: -10%; left: -60%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5) 45%, rgba(200, 235, 255, 0.35) 55%, transparent); transform: translateX(calc(var(--mx) * 2.2)) skewX(-12deg); transition: transform 0.2s ease-out; }
.pk.st-pack .pk-shine i { animation: pk-glint 1.4s ease-in-out 0.6s; }
@keyframes pk-glint { from { transform: translateX(0) skewX(-12deg); } to { transform: translateX(260%) skewX(-12deg); } }
/* 裏の合わせ目（光って誘う） */
.pk-seam { position: absolute; left: 46%; width: 8%; top: var(--cut-t); bottom: calc(100% - var(--cut-b)); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); opacity: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
.pk.side-back.guide .pk-seam { animation: pk-seam 1.6s ease-in-out infinite; }
@keyframes pk-seam { 50% { opacity: 1; } }

/* 切り取り線 */
.pk-cut { position: absolute; left: 3%; right: 3%; height: 0; --ca: 0%; --cb: 0%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-cut.t { top: var(--cut-t); }
.pk-cut.b { top: var(--cut-b); }
.pk-cut::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; border-top: 2px dashed rgba(255, 255, 255, 0.7); transition: opacity 0.2s ease; }
.pk-cut-trail { position: absolute; top: -2px; height: 4px; left: var(--ca); width: calc(var(--cb) - var(--ca)); border-radius: 2px; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--best) 55%, #fff), #fff); box-shadow: 0 0 10px #fff, 0 0 22px var(--best); }
.pk-cut-head { position: absolute; top: -11px; left: var(--cb); width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, color-mix(in srgb, var(--best) 60%, #fff) 44%, transparent 70%); opacity: 0; transition: opacity 0.15s ease; }
.pk.cutting-t .pk-cut.t .pk-cut-head, .pk.cutting-b .pk-cut.b .pk-cut-head { opacity: 1; }
.pk-cut-guide { position: absolute; top: -8px; left: 0; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #fff, 0 0 26px rgba(160, 200, 255, 0.9); opacity: 0; }
.pk.guide.st-pack:not(.cutting) .pk-cut.t .pk-cut-guide { animation: pk-guide 1.8s ease-in-out infinite; }
@keyframes pk-guide { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(calc(var(--cw) * 0.98)); opacity: 0; } }
.pk:not(.st-pack) .pk-cut::before { opacity: 0; }
.pk.st-out .pk-cut-trail, .pk.st-cards .pk-cut-trail { opacity: 0; transition: opacity 0.3s ease; }
/* 切り口から漏れる光（中身の格で色が変わる） */
.pk-leak { position: absolute; left: 3%; right: 3%; height: 85vh; pointer-events: none; opacity: 0; transform: scaleY(0); transition: transform 0.55s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.4s ease; }
.pk-leak.t { bottom: calc(100% - var(--cut-t)); transform-origin: bottom; background: linear-gradient(0deg, var(--leak), color-mix(in srgb, var(--leak) 30%, transparent) 38%, transparent); }
.pk-leak.b { top: var(--cut-b); transform-origin: top; background: linear-gradient(180deg, var(--leak), color-mix(in srgb, var(--leak) 30%, transparent) 38%, transparent); }
.pk.best-rainbow .pk-leak.t { background: linear-gradient(0deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff); }
.pk.best-rainbow .pk-leak.b { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 50%), linear-gradient(90deg, #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff); }
.pk.st-open.open-top .pk-leak.t, .pk.st-open.open-flick .pk-leak.t, .pk.st-open.open-bottom .pk-leak.b { opacity: 1; transform: scaleY(1); }
.pk.best-legend.st-open .pk-leak { animation: pk-flicker 0.3s steps(2) infinite; }
@keyframes pk-flicker { 50% { opacity: 0.55; } }

/* 操作ボタン */
.pk-tools { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b, 0px) + 3.3rem); display: flex; justify-content: center; z-index: 25; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.pk.st-pack:not(.morphing) .pk-tools { opacity: 1; }
.pk.st-pack:not(.morphing) .pk-turn { pointer-events: auto; }
.pk-turn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(10, 14, 40, 0.7); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; }
.pk-turn svg { width: 16px; height: 16px; fill: currentColor; }
.pk-turn:active { transform: scale(0.94); }

/* ————— カードの束 ————— */
.pk-deck { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.pk.st-open .pk-deck, .pk.st-out .pk-deck, .pk.st-cards .pk-deck { opacity: 1; }
.pk.open-party .pk-deck { z-index: 3; }
.pk.st-summary .pk-deck { opacity: 0; transition: opacity 0.3s ease; }
.pk-card { position: absolute; inset: 0; --k: 0; --i: 0; --n: 1; --drag: 0px; --sc: 1; --lift: 0px; transform: translate(calc(var(--k) * 7px + var(--drag)), calc(var(--k) * -10px + var(--lift))) rotate(calc(var(--k) * 3deg + var(--drag) * 0.05deg)) scale(var(--sc)); transition: transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.3s ease; will-change: transform; }
/* 出てくる：上を切ったら上へ、下を切ったら下へ、弾いたら高く、パーティー開けは扇に広がる */
.pk.st-open .pk-card { transition: transform 0.6s cubic-bezier(0.2, 1.1, 0.35, 1) calc(0.22s + var(--i) * 0.07s); }
.pk.st-open.open-top .pk-card { transform: translateY(calc(-50% - var(--i) * 4%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4deg)); }
.pk.st-open.open-flick .pk-card { transform: translateY(calc(-78% - var(--i) * 5%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 9deg)); transition-duration: 0.45s; transition-delay: calc(0.05s + var(--i) * 0.05s); }
.pk.st-open.open-bottom .pk-card { transform: translateY(calc(50% + var(--i) * 4%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * -4deg)); }
.pk.st-open.open-party .pk-card { transform: translate(calc((var(--i) - (var(--n) - 1) / 2) * 34%), calc(-6% - var(--i) * 1%)) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 12deg)) scale(0.82); transition-delay: calc(0.15s + var(--i) * 0.06s); }
.pk-card.dragging { transition: none; }
.pk-card:not(.is-top) .pk-back { opacity: 0.75; }
.pk-card.gone { transform: translate(calc(var(--gx) * 110vw), -18vh) rotate(calc(var(--gx) * 38deg)); opacity: 0; transition: transform 0.5s cubic-bezier(0.4, 0, 0.8, 0.4), opacity 0.4s ease 0.1s; }
.pk-card.lift { --sc: 1.07; --lift: -16px; }
.pk-card.charge { --sc: 1.1; --lift: -26px; }
.pk-card.showcase { --sc: 1.36; z-index: 60 !important; transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1); }
/* 傾き（.pk-tilt）とめくり（.pk-flip）は別の要素：傾きが変わってもめくりのアニメが途中でやり直しにならない */
.pk-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.14s ease-out; }
.pk-flip { position: absolute; inset: 0; transform-style: preserve-3d; --turn: 180deg; transform: rotateY(var(--turn)); }
.pk-card:not(.is-top) .pk-flip { transform: rotateY(180deg); }
/* 裏向きで開けたとき：カードは表を向いて出てくる */
.pk.faceup .pk-flip { --turn: 0deg; }
.pk.faceup .pk-card:not(.is-top) .pk-flip { transform: rotateY(0deg); }
.pk.faceup .pk-aura { display: none; }
.pk-card.flip .pk-flip, .pk-card.shown .pk-flip { --turn: 0deg; }
.pk-card.flip .pk-flip { transition: transform 0.65s cubic-bezier(0.3, 1.35, 0.5, 1); }
.pk-card.shown .pk-flip { transition: transform 0.3s ease-out; }
.pk-card.lv-rainbow.charge .pk-flip { animation: pk-cspin 1.15s cubic-bezier(0.55, 0, 0.45, 1) forwards; }
.pk-card.lv-legend.charge .pk-flip { animation: pk-tremble 0.07s linear infinite; }
.no-shake .pk-card.lv-legend.charge .pk-flip { animation: none; }
@keyframes pk-cspin { from { transform: rotateY(180deg); } to { transform: rotateY(900deg); } }
@keyframes pk-tremble { 0% { transform: rotateY(180deg) translate(1.5px, 0); } 50% { transform: rotateY(180deg) translate(-1.5px, 1px); } 100% { transform: rotateY(180deg) translate(0, -1px); } }
.pk-back, .pk-front { position: absolute; inset: 0; border-radius: calc(var(--cw) * 0.045); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-back { transform: rotateY(180deg); overflow: hidden; background: radial-gradient(circle at 50% 50%, #4a8ce0 0 26%, #1d4c9e 58%, #0f2c63); border: calc(var(--cw) * 0.042) solid #f2c230; box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.pk-back-ball { width: 46%; aspect-ratio: 1; border-radius: 50%; border: 6px solid #141726; background: linear-gradient(#ee1515 0 46%, #141726 46% 54%, #f7f7f7 54%); position: relative; }
.pk-back-ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #f7f7f7; border: 5px solid #141726; }
.pk-card.lv-rainbow.charge .pk-back { box-shadow: 0 0 26px 6px rgba(255, 154, 224, 0.9), 0 0 60px 18px rgba(120, 200, 255, 0.55); }
.pk-card.lv-legend.charge .pk-back { box-shadow: 0 0 30px 8px rgba(255, 226, 122, 0.95), 0 0 80px 26px rgba(255, 180, 40, 0.6); }
/* 裏の光（めくる前だけ）。ぼかしは止まった box-shadow、動かすのは opacity だけ */
.pk-aura { position: absolute; inset: -6px; border-radius: calc(var(--cw) * 0.07); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.pk-aura::before, .pk-aura::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.pk-card.is-top.lv-holo .pk-aura { opacity: 0.9; box-shadow: 0 0 18px 4px rgba(120, 210, 255, 0.75); }
.pk-card.is-top.lv-gold .pk-aura { opacity: 1; box-shadow: 0 0 20px 7px rgba(255, 205, 90, 0.9), 0 0 48px 14px rgba(255, 170, 40, 0.45); animation: pk-pulse 1.1s ease-in-out infinite; }
.pk-card.is-top.lv-rainbow .pk-aura { opacity: 1; box-shadow: -8px -8px 24px 6px rgba(255, 111, 181, 0.85), 8px 8px 24px 6px rgba(79, 195, 247, 0.85); }
.pk-card.is-top.lv-rainbow .pk-aura::before { box-shadow: 8px -8px 24px 6px rgba(255, 224, 102, 0.9), -8px 8px 24px 6px rgba(126, 224, 129, 0.85); animation: pk-cycle 1.8s ease-in-out infinite; }
.pk-card.is-top.lv-rainbow .pk-aura::after { box-shadow: 0 -10px 24px 6px rgba(179, 136, 255, 0.9), 0 10px 24px 6px rgba(255, 111, 181, 0.85); animation: pk-cycle 1.8s ease-in-out 0.9s infinite; }
.pk-card.is-top.lv-legend .pk-aura { opacity: 1; inset: -10px; box-shadow: 0 0 26px 10px rgba(255, 230, 140, 0.95), 0 0 70px 24px rgba(255, 180, 30, 0.6); animation: pk-flicker 0.6s steps(3) infinite; }
.pk-card.is-top.lv-legend .pk-aura::before { box-shadow: 0 0 0 3px #fff8d8; opacity: 1; }
.pk-card.flip .pk-aura, .pk-card.shown .pk-aura, .pk-card.charge .pk-aura { opacity: 0 !important; animation: none; }
@keyframes pk-pulse { 50% { opacity: 0.55; } }
@keyframes pk-cycle { 50% { opacity: 1; } }
/* 表 */
.pk-front { overflow: hidden; background: #222; box-shadow: 0 22px 44px rgba(0, 0, 0, 0.55); }
.pk-front img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
/* キラ・光沢：背景の位置ではなく、大きめの層を transform で動かす（傾けるたびに描き直さない） */
.pk-holo, .pk-glare { position: absolute; inset: 0; pointer-events: none; transition: transform 0.14s ease-out; }
.pk-glare { inset: -50%; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28), transparent 23%); transform: translate(calc((var(--mx) - 50%) / 2), calc((var(--my) - 50%) / 2)); }
.pk-card.lv-plain .pk-holo { display: none; }
.pk-card.lv-holo .pk-holo, .pk-card.lv-gold .pk-holo { right: auto; width: 250%; transform: translateX(calc((var(--mx) - 100%) * 0.6)); mix-blend-mode: overlay; }
.pk-card.lv-holo .pk-holo { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 60%); }
.pk-card.lv-gold .pk-holo { background: linear-gradient(115deg, transparent 25%, rgba(255, 215, 90, 0.7) 42%, rgba(255, 255, 255, 0.85) 48%, rgba(255, 215, 90, 0.7) 54%, transparent 70%); }
.pk-card.lv-rainbow .pk-holo, .pk-card.lv-legend .pk-holo { right: auto; bottom: auto; width: 300%; height: 300%; transform: translate(calc(var(--mx) * -0.6667), calc(var(--my) * -0.6667)); background: repeating-linear-gradient(115deg, rgba(255, 90, 160, 0.5) 0%, rgba(255, 230, 90, 0.5) 8%, rgba(110, 240, 160, 0.5) 16%, rgba(90, 200, 255, 0.5) 24%, rgba(180, 130, 255, 0.5) 32%, rgba(255, 90, 160, 0.5) 40%); mix-blend-mode: color-dodge; opacity: 0.5; }
.pk-card.lv-legend .pk-holo::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 2px); background-size: 16px 16px; animation: pk-twinkle 1.1s ease-in-out infinite alternate; }
@keyframes pk-twinkle { from { opacity: 0.15; } to { opacity: 0.8; } }
.pk-front::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -70%; width: 60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85) 50%, transparent); opacity: 0; pointer-events: none; }
.pk-card.flip .pk-front::after { animation: pk-sweep 0.8s ease-out 0.25s both; }
@keyframes pk-sweep { from { opacity: 1; transform: translateX(0) skewX(-14deg); } to { opacity: 1; transform: translateX(320%) skewX(-14deg); } }
.pk-card.showcase .pk-front img { animation: pk-pan 2.4s ease-in-out both; }
@keyframes pk-pan { 0% { transform: scale(1); } 22% { transform: scale(1.55) translateY(15%); } 78% { transform: scale(1.55) translateY(-15%); } 100% { transform: scale(1); } }
.pk-newtag { position: absolute; top: 4%; left: 0; padding: 2px 10px 1px 8px; background: linear-gradient(90deg, #ff3d5a, #ff7a2e); color: #fff; font-style: normal; font-family: "Bebas Neue", sans-serif; letter-spacing: 0.14em; font-size: calc(var(--cw) * 0.075); line-height: 1.1; border-radius: 0 6px 6px 0; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transform: translateX(-110%); }
.pk-card.shown .pk-newtag { transform: none; transition: transform 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) 0.1s; }

/* ————— 光・文字 ————— */
.pk-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 28; }
.pk-flash.go { animation: pk-flash 0.6s ease-out; }
@keyframes pk-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.pk.charge-legend .pk-flash { background: #ffe9a0; animation: pk-thunder 0.5s steps(2) infinite; }
@keyframes pk-thunder { 0% { opacity: 0; } 50% { opacity: 0.22; } }
.pk-banner { position: absolute; left: 0; right: 0; top: calc(var(--safe-t, 0px) + 7%); height: 1.1em; text-align: center; font-family: "Bebas Neue", sans-serif; font-size: clamp(2.2rem, 11vw, 4.4rem); letter-spacing: 0.14em; line-height: 1; opacity: 0; pointer-events: none; z-index: 26; }
.pk-banner span { position: absolute; left: 0; right: 0; top: 0; }
.pk-banner .sh { color: rgba(0, 0, 0, 0.55); transform: translateY(5px); }
.pk-banner .tx { background: linear-gradient(90deg, #fff 0%, var(--nowc) 30%, #fff 50%, var(--nowc) 70%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk.now-rainbow .pk-banner .tx { background-image: linear-gradient(90deg, #ff6fb5, #ffe066, #7ee081, #4fc3f7, #b388ff, #ff6fb5); }
.pk-banner.on { animation: pk-banner 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes pk-banner { from { opacity: 0; transform: scale(1.9); } to { opacity: 1; transform: scale(1); } }
.pk-sparks { position: absolute; left: 50%; top: 46%; pointer-events: none; z-index: 24; }
.pk-sparks i { position: absolute; width: calc(12px * var(--s)); height: calc(12px * var(--s)); margin: -6px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, var(--c) 45%, transparent 70%); opacity: 0; animation: pk-spark 1.1s ease-out forwards; }
@keyframes pk-spark { 0% { opacity: 1; transform: translate(0, 0) scale(0.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.4); } }
.pk-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 23; }
.pk-info { position: absolute; left: 50%; bottom: calc(var(--safe-b, 0px) + 3.2rem); width: min(90vw, 380px); margin-left: min(-45vw, -190px); opacity: 0; transform: translateY(20px); text-align: center; transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); pointer-events: none; z-index: 25; }
.pk-info.on { opacity: 1; transform: none; }
.pk-info-top { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pk-info-top b { font-size: 1.05rem; font-weight: 900; letter-spacing: 0.04em; }
.pk-info-sub { margin-top: 5px; font-size: 0.75rem; color: #c7cff5; }
.pk-new, .pk-dup { font-style: normal; padding: 1px 8px; border-radius: 6px; font-size: 0.72rem; font-weight: 900; }
.pk-new { background: linear-gradient(90deg, #ff3d5a, #ff7a2e); font-family: "Bebas Neue", sans-serif; font-size: 1rem; letter-spacing: 0.12em; font-weight: 400; }
.pk-dup { background: rgba(255, 255, 255, 0.14); }
.pk-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b, 0px) + 0.9rem); text-align: center; font-size: 0.84rem; font-weight: 800; color: #e2e7ff; letter-spacing: 0.05em; line-height: 1.35; animation: pk-caret 0.9s ease-in-out infinite alternate; pointer-events: none; z-index: 25; }
.pk-hint small { display: block; font-size: 0.7rem; font-weight: 700; color: #aab4e6; }
.pk-hint.omen { color: #ffe08a; font-size: 0.98rem; }
.pk.morphing .pk-hint { opacity: 0; }
@keyframes pk-caret { from { opacity: 1; } to { opacity: 0.55; } }

/* 今回のカード一覧 */
.pk-summary { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: calc(var(--safe-t, 0px) + 24px) 16px calc(var(--safe-b, 0px) + 56px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 22; }
.pk.st-summary .pk-summary { opacity: 1; }
.pk-summary h2 { margin: 0; font-size: 1.25rem; font-weight: 900; letter-spacing: 0.06em; }
.pk-summary h2 small { font-size: 0.78rem; color: #c7cff5; margin-left: 6px; }
.pk-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 130px)); justify-content: center; gap: 14px 12px; width: min(94vw, 460px); }
.pk-sum-grid.n1 { grid-template-columns: minmax(0, 190px); }
.pk-sum-grid.n2, .pk-sum-grid.n4 { grid-template-columns: repeat(2, minmax(0, 150px)); }
.pk-sum-card { display: flex; flex-direction: column; align-items: center; gap: 7px; animation: pk-sum-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes pk-sum-in { from { opacity: 0; transform: translateY(24px) rotateY(90deg); } to { opacity: 1; transform: none; } }
.pk-sum-img { position: relative; width: 100%; aspect-ratio: 63 / 88; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5); --cw: 130px; }
.pk-sum-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk-sum-card.best .pk-sum-img { box-shadow: 0 0 0 2px var(--tier), 0 0 22px var(--tier), 0 10px 22px rgba(0, 0, 0, 0.5); }
.pk-sum-card .pk-newtag { transform: none; font-size: 13px; }

@media (orientation: landscape) and (max-height: 600px) {
  .pk { --cw: min(27vw, calc(56vh * 0.716)); }
  .pk-stage, .pk-sparks, .pk-rays { left: 36%; top: 52%; }
  .pk-beam { left: 36%; }
  .pk-info { left: 72%; bottom: auto; top: 44%; width: min(42vw, 340px); margin-left: max(-21vw, -170px); }
  .pk-banner { left: 48%; top: 20%; font-size: clamp(2rem, 6vw, 3.6rem); }
  .pk-sum-grid, .pk-sum-grid.n2, .pk-sum-grid.n4 { grid-template-columns: repeat(auto-fit, minmax(0, 104px)); width: min(94vw, 640px); }
  .pk-sum-grid.n1 { grid-template-columns: minmax(0, 130px); }
  .pk-summary { gap: 10px; }
  .pk.st-pack .pk-hint, .pk.st-cards .pk-hint { left: 50%; bottom: calc(var(--safe-b, 0px) + 1.2rem); }
  .pk-tools { left: 50%; bottom: calc(var(--safe-b, 0px) + 4.2rem); }
}