.pack-main { max-width: 1100px; margin: 0 auto; padding: 8px 14px 30px; }
.row.nowrap { flex-wrap: nowrap; }
.row.center { justify-content: center; }
.center { text-align: center; }
.btn.primary.inline { width: auto; margin-top: 0; }
.arena { position: relative; min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 10px; }
.arena-hint { color: #fff; font-weight: 700; margin: 14px 0 4px; text-align: center; text-shadow: 0 2px 6px #000; }

/* ---- パック ---- */
.pack-wrap { display: flex; flex-direction: column; align-items: center; perspective: 1000px; }
.pack {
  --w: min(64vw, 280px); --cut: 0; --glow: #ffcc4d;
  position: relative; width: var(--w); aspect-ratio: 5 / 8; border-radius: 10px 10px 14px 14px; outline: none; touch-action: none; cursor: pointer;
  animation: pack-float 3.2s ease-in-out infinite; filter: drop-shadow(0 18px 30px #000a) drop-shadow(0 0 22px color-mix(in srgb, var(--glow) 55%, transparent));
  -webkit-user-select: none; user-select: none;
}
@keyframes pack-float { 0%, 100% { transform: translateY(0) rotate(-2.5deg) rotateY(-8deg); } 50% { transform: translateY(-14px) rotate(2.5deg) rotateY(8deg); } }
.pack:focus-visible { box-shadow: 0 0 0 3px #fff; }
.pack-top, .pack-body { position: absolute; left: 0; right: 0; overflow: hidden;
  background:
    linear-gradient(115deg, transparent 20%, #ffffff55 32%, transparent 44%, transparent 60%, #ffffff33 70%, transparent 80%),
    repeating-linear-gradient(90deg, #ffffff08 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #2b145e, #6a2bd0 40%, #d0407a 75%, #ffb547);
  background-size: 300% 100%, auto, auto; animation: foil 4s linear infinite; }
@keyframes foil { from { background-position: 150% 0, 0 0, 0 0; } to { background-position: -150% 0, 0 0, 0 0; } }
.pack-top { top: 0; height: 15%; border-radius: 10px 10px 0 0; border-bottom: 2px dashed #ffffffaa;
  background-image: linear-gradient(115deg, transparent 20%, #ffffff55 32%, transparent 44%), repeating-linear-gradient(90deg, #00000033 0 3px, transparent 3px 7px), linear-gradient(160deg, #e8c25a, #fff2b0 50%, #b8892a); }
.pack-top::before, .pack-body::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(90deg, #0000 0 6px, #0004 6px 8px); }
.pack-top::before { top: 0; }
.cut-guide { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #3a2400; letter-spacing: .05em; animation: guide 1.6s ease-in-out infinite; }
@keyframes guide { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.pack-body { top: 15%; bottom: 0; border-radius: 0 0 14px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pack-body::after { bottom: 0; }
.pack-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--sx, 30%) var(--sy, 20%), #ffffff66, transparent 40%); mix-blend-mode: overlay; }
.cut-line { position: absolute; left: 0; top: 15%; height: 4px; margin-top: -2px; width: calc(var(--cut) * 100%); background: linear-gradient(90deg, #fff0, #fff 30%, #fffbe0); box-shadow: 0 0 12px #fff, 0 0 24px #ffe08a; border-radius: 2px; pointer-events: none; }
.pack.cutting { animation-play-state: paused; cursor: grabbing; }
.pack.cutting .pack-top { transform: translateY(calc(var(--cut) * -3px)) rotate(calc(var(--cut) * -2deg)); transform-origin: left bottom; }
.pack.torn { animation: none; transform: none; }
.pack.torn .pack-top { animation: top-fly .8s cubic-bezier(.3, .1, .4, 1) forwards; transform-origin: left bottom; }
@keyframes top-fly { 0% { transform: none; } 30% { transform: translate(10px, -30px) rotate(-12deg); } 100% { transform: translate(260px, -160px) rotate(40deg); opacity: 0; } }
.pack.torn .cut-line { width: 100%; animation: line-out .5s ease-out forwards; }
@keyframes line-out { to { opacity: 0; } }
.pack.torn .pack-body { animation: body-down .9s .45s cubic-bezier(.5, 0, .7, .3) forwards; }
@keyframes body-down { to { transform: translateY(70%); opacity: 0; } }
.pack.torn::after { content: ""; position: absolute; left: -20%; right: -20%; top: 8%; height: 30%; background: radial-gradient(ellipse at 50% 50%, #fff, #ffe08a88 30%, transparent 70%); animation: burst-light .9s ease-out forwards; pointer-events: none; }
@keyframes burst-light { 0% { opacity: 0; transform: scaleY(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1.6); } }

/* ---- カードの山 ---- */
.stack-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
.stack { position: relative; width: min(74vw, 330px); aspect-ratio: 590 / 860; perspective: 1400px; touch-action: none; cursor: pointer; }
.slot { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2, .9, .3, 1), opacity .5s; transform: translateY(calc(var(--depth) * 6px)) scale(calc(1 - var(--depth) * .02)); }
.stack.rise .slot { animation: rise .9s cubic-bezier(.2, .9, .3, 1.05) both; animation-delay: calc(var(--i) * .07s); }
@keyframes rise { 0% { transform: translateY(70%) scale(.85); opacity: 0; } 100% { transform: translateY(calc(var(--depth) * 6px)) scale(calc(1 - var(--depth) * .02)); opacity: 1; } }
.flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.3, .5, 1); }
.slot.open .flip { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; container-type: inline-size; }
.face.front { transform: rotateY(180deg); }
.face .card { width: 100%; }
.slot.gone-l { transform: translate(-130%, -6%) rotate(-24deg); opacity: 0; }
.slot.gone-r { transform: translate(130%, -6%) rotate(24deg); opacity: 0; }
.slot.drag { transition: none; }
/* 裏面が光る予兆 */
.slot.omen .face.back::after { content: ""; position: absolute; inset: -6%; border-radius: 6%; pointer-events: none; background: radial-gradient(circle, var(--omen, #ffe08a) 0, transparent 70%); animation: omen .9s ease-in-out infinite; mix-blend-mode: screen; }
.slot.omen .face.back .card { animation: omen-shake .12s linear infinite; box-shadow: 0 0 30px var(--omen, #ffe08a), 0 0 60px var(--omen, #ffe08a); }
.slot.omen.t2 { --omen: #c9a6ff; } .slot.omen.t3 { --omen: #ff6bd6; }
.slot.omen.t3 .face.back::after { background: conic-gradient(from 0deg, #ff6b8b, #ffd36b, #8bff9b, #6be4ff, #b78bff, #ff6b8b); filter: blur(18px); opacity: .9; animation: omen-spin 1s linear infinite; border-radius: 50%; }
@keyframes omen { 0%, 100% { opacity: .45; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes omen-spin { to { transform: rotate(360deg); } }
@keyframes omen-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
.counter { color: var(--muted); font-size: 13px; margin-right: 8px; }

/* ---- 結果 ---- */
.result { width: 100%; }
.result-title { text-align: center; font-family: var(--serif); font-size: clamp(20px, 5vw, 30px); margin: 0 0 12px; }
.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 760px) { .result-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.result-grid .cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.result-grid .card-stage { width: 100%; }
.result-grid .cap { font-size: 12px; text-align: center; color: #fff; }
.result-grid .cap.hi { color: #ffe08a; font-weight: 800; }
.result .actions { margin-top: 16px; }
.result-grid .cap small { display: block; color: #ddd; font-weight: 400; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 裏面は模様だけにする（engine/card.css の「ORICA MAKER」「FAN MADE」の文字をパック開封では出さない） */

/* ================= 本物のブースターパック版 ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.view[hidden] { display: none !important; }
.finder { position: sticky; top: 6px; z-index: 5; margin: 0 auto 14px; max-width: 980px; backdrop-filter: blur(8px); background: linear-gradient(180deg, #221c38ee, #1a1530ee); }
.search { position: relative; }
.search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); pointer-events: none; }
.search input { width: 100%; box-sizing: border-box; padding: 11px 14px 11px 38px; font: inherit; font-size: 16px; color: var(--text, #f3eefe); background: #0f0c1ccc; border: 1px solid #ffffff2e; border-radius: 999px; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--muted, #a99fc4); }
.search input:focus { border-color: #ffd36b; box-shadow: 0 0 0 3px #ffd36b33; }
.search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.periods { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.periods button { flex: none; border: 1px solid #ffffff2a; background: #ffffff0d; color: #fff; border-radius: 999px; padding: 7px 13px; font-weight: 800; font-size: 13px; cursor: pointer; transition: background .2s, transform .2s; }
.periods button:hover { transform: translateY(-1px); }
.periods button[aria-selected="true"] { background: linear-gradient(135deg, #ffcc4d, #ff7ab8); color: #2a1030; border-color: transparent; box-shadow: 0 4px 14px #ff7ab855; }
.shelf { margin: 0 auto 26px; max-width: 1100px; }
.shelf h3 { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid #ffffff22; padding-bottom: 6px; }
.shelf h3 small { font-family: inherit; font-size: 12px; color: var(--muted); font-weight: 400; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 10px; } .tile .t-sub { font-size: 10px; } }
.tile { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: stretch; text-align: left; border-radius: 12px; padding: 6px; transition: background .2s;
  animation: tile-in .55s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(min(var(--k), 12) * 40ms); }
@keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.tile:hover, .tile:focus-visible { background: #ffffff10; }
.tile:focus-visible { outline: 2px solid #ffe08a; }
.tile:hover .pk { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 14px 30px #000a, 0 0 22px color-mix(in srgb, var(--b) 50%, transparent); }
.tile .t-name { font-weight: 800; font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile .t-sub { font-size: 11px; color: var(--muted); }
.tile .t-sub b { color: #ffe08a; }
.tile .t-hit { font-size: 11px; color: #9be8b0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* オリジナルのパック絵（CSS と SVG だけ） */
.pk { --a: #2b145e; --b: #ffb547; position: relative; aspect-ratio: 5 / 8; border-radius: 6px 6px 8px 8px; overflow: hidden; container-type: inline-size; color: #fff;
  background: radial-gradient(120% 70% at 50% 38%, color-mix(in srgb, var(--b) 70%, #fff 10%) 0, var(--b) 18%, var(--a) 62%, color-mix(in srgb, var(--a) 60%, #000) 100%);
  box-shadow: 0 8px 20px #0008, inset 0 0 0 1px #ffffff30; transition: transform .35s cubic-bezier(.2, .9, .3, 1.2), box-shadow .35s; }
.pk::before, .pk::after { content: ""; position: absolute; left: 0; right: 0; height: 5%; background: repeating-linear-gradient(90deg, #ffffff55 0 3px, #0000 3px 6px), linear-gradient(#0000004d, #0000004d); z-index: 3; }
.pk::before { top: 0; } .pk::after { bottom: 0; }
.pk-foil { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 25%, #ffffff66 38%, transparent 50%, transparent 62%, #ffffff33 70%, transparent 80%), repeating-linear-gradient(45deg, #ffffff0a 0 2px, transparent 2px 7px);
  background-size: 300% 100%, auto; animation: foil 5s linear infinite; mix-blend-mode: overlay; z-index: 1; }
.pk-emblem { position: absolute; left: 50%; top: 46%; width: 92%; translate: -50% -50%; color: color-mix(in srgb, var(--b) 60%, #fff); opacity: .55; animation: emblem 18s linear infinite; z-index: 0; }
@keyframes emblem { to { rotate: 360deg; } }
.pk-top, .pk-bottom { position: absolute; left: 7%; right: 7%; display: flex; justify-content: space-between; font-size: 6.5cqw; font-weight: 800; letter-spacing: .08em; z-index: 2; text-shadow: 0 1px 2px #000a; }
.pk-top { top: 8%; } .pk-bottom { bottom: 8%; font-size: 5.5cqw; opacity: .9; }
.pk-top span:first-child { background: #0008; border: 1px solid #ffffff55; border-radius: 99px; padding: .2em .6em; }
.pk-title { position: absolute; left: 5%; right: 5%; top: 50%; translate: 0 -50%; text-align: center; z-index: 2; }
.pk-title b { display: block; font-family: var(--serif); font-weight: 900; font-size: calc(var(--fs) * 100cqw); line-height: 1.08; letter-spacing: .02em; word-break: break-word;
  background: linear-gradient(180deg, #fff 0%, #fff6d0 40%, color-mix(in srgb, var(--b) 60%, #ffd36b) 60%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000c) drop-shadow(0 0 6px color-mix(in srgb, var(--b) 80%, transparent)); }
.pk-title small { display: block; margin-top: 4%; font-size: 8cqw; font-weight: 800; text-shadow: 0 1px 3px #000; }
.still-mode .pk-foil, .still-mode .pk-emblem { animation: none; }

/* 詳細 */
.back { margin: 0 0 12px; }
.detail { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 26px; align-items: start; max-width: 1000px; margin: 0 auto 16px; }
@media (max-width: 680px) { .detail { grid-template-columns: 1fr; gap: 16px; } .detail-art { width: min(62vw, 240px); margin: 0 auto; } }
.detail-art .pk { animation: pack-float 3.2s ease-in-out infinite; }
.d-period { margin: 0; color: #ffe08a; font-weight: 800; letter-spacing: .1em; font-size: 13px; }
.detail-info h2 { font-family: var(--serif); font-size: clamp(22px, 4.6vw, 34px); margin: 4px 0 12px; line-height: 1.2; }
.d-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0 0 12px; }
.d-meta div { background: #ffffff0a; border-radius: 10px; padding: 6px 10px; }
.d-meta dt { font-size: 11px; color: var(--muted); } .d-meta dd { margin: 0; font-weight: 800; font-size: 14px; }
.d-rar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: #ffffff14; border: 1px solid #ffffff22; font-style: normal; }
.rchip b { background: #0006; border-radius: 99px; padding: 0 7px; }
.rchip.sm { font-size: 10px; padding: 1px 6px; }
.rc-R { color: #e3e9f0; } .rc-SR { color: #8fe3ff; } .rc-UR { color: #ffd76b; } .rc-UL { color: #f3c98a; background: #6b4a1a55; } .rc-SE { color: #fff; background: linear-gradient(135deg, #8fa3c955, #f0f4ff44); }
.rc-HR { color: #fff; background: linear-gradient(90deg, #ff6b8b66, #ffd36b66, #6be4ff66, #b78bff66); } .rc-20thSE { color: #fff; background: linear-gradient(135deg, #d81b2a88, #ffffff44); } .rc-10000SE { color: #fff; background: linear-gradient(135deg, #d81b2a, #ffd36b); }
.rc-UPR, .rc-SPR { color: #fff; background: linear-gradient(135deg, #ff9be855, #9bd0ff55, #fff6a055); } .rc-NR { color: #cfd6e0; } .rc-N { color: #aab; }
.d-actions { gap: 10px; flex-wrap: wrap; }
.d-actions .btn.primary { width: auto; margin: 0; padding-inline: 26px; animation: cta 2.4s ease-in-out infinite; }
@keyframes cta { 0%, 100% { box-shadow: 0 0 0 0 #ffcc4d66; } 50% { box-shadow: 0 0 0 10px #ffcc4d00, 0 0 26px #ffcc4d88; } }
.d-coll { font-size: 13px; color: var(--muted); } .d-coll b { color: #fff; }
details.panel { max-width: 1000px; margin: 0 auto 12px; }
details.panel summary { cursor: pointer; font-weight: 800; }
.tbl-wrap, .odds div { overflow-x: auto; }
.otable { width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0; }
.otable th, .otable td { padding: 6px 8px; border-bottom: 1px solid #ffffff18; text-align: left; vertical-align: top; }
.otable thead th { color: var(--muted); font-size: 11px; font-weight: 400; }
.otable td:nth-child(n+2) { white-space: nowrap; }
.about .otable td:last-child { white-space: normal; }
.list-tools { font-size: 13px; margin: 8px 0; color: var(--muted); }
.clist { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: 20px; font-size: 13px; }
.clist li { display: flex; gap: 8px; align-items: center; padding: 4px 2px; border-bottom: 1px solid #ffffff10; break-inside: avoid; opacity: .7; }
.clist li.got { opacity: 1; }
.clist li.got .nm { color: #fff; font-weight: 700; }
.clist .no { color: var(--muted); font-size: 11px; min-width: 6.5em; font-variant-numeric: tabular-nums; }
.clist .nm { flex: 1; min-width: 0; }
.clist .rs { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.clist .cnt { color: #9be8b0; font-weight: 800; font-size: 12px; }
.about { max-width: 1000px; margin: 30px auto 0; font-size: 14px; line-height: 1.7; }

/* 開封：パックの絵を大きく使う */
.pack-body > .pk { position: absolute; inset: 0; border-radius: 0 0 14px 14px; box-shadow: none; aspect-ratio: auto; }
.pack-body > .pk::before { display: none; }
.pack-body { background: none !important; animation: none !important; }
.pack.multi::before, .pack.multi::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, #3a2a6a, #1a1030); z-index: -1; transform: translate(10px, 8px) rotate(3deg); box-shadow: 0 10px 20px #0008; }
.pack.multi::after { transform: translate(-9px, 10px) rotate(-4deg); }
.pack.multi.torn::before, .pack.multi.torn::after { animation: body-down .9s .45s forwards; }
.slot-tag { position: absolute; left: 50%; bottom: -30px; translate: -50% 0; font-size: 12px; font-weight: 800; color: #fff; opacity: 0; transition: opacity .4s .3s; white-space: nowrap; text-shadow: 0 1px 4px #000; }
.slot.open .slot-tag { opacity: 1; }
.slot.open.tier1 .slot-tag { color: #8fe3ff; } .slot.open.tier2 .slot-tag { color: #ffd76b; } .slot.open.tier3 .slot-tag { color: #ff9be8; }
.slot.gone-l .slot-tag, .slot.gone-r .slot-tag { opacity: 0; }
/* めくった後の光（高いレアほど強く） */
.slot.open.tier1 .face.front { filter: drop-shadow(0 0 14px #8fe3ffaa); }
.slot.open.tier2 .face.front { filter: drop-shadow(0 0 22px #ffd76bcc) drop-shadow(0 0 40px #ffb54766); animation: glow2 1.8s ease-in-out infinite; }
.slot.open.tier3 .face.front { animation: glow3 1.6s linear infinite; }
@keyframes glow2 { 50% { filter: drop-shadow(0 0 30px #ffe08a) drop-shadow(0 0 60px #ffb54788); } }
@keyframes glow3 { 0% { filter: drop-shadow(0 0 26px #ff6b8b) drop-shadow(0 0 50px #ffd36b88); } 33% { filter: drop-shadow(0 0 26px #6be4ff) drop-shadow(0 0 50px #8bff9b88); } 66% { filter: drop-shadow(0 0 26px #b78bff) drop-shadow(0 0 50px #ff6bd688); } 100% { filter: drop-shadow(0 0 26px #ff6b8b) drop-shadow(0 0 50px #ffd36b88); } }
.result-grid .cell.tier1 .card-stage { filter: drop-shadow(0 0 10px #8fe3ff99); }
.result-grid .cell.tier2 .card-stage { filter: drop-shadow(0 0 16px #ffd76bcc); }
.result-grid .cell.tier3 .card-stage { animation: glow3 1.6s linear infinite; }
.result-grid.three { grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; }
.result-grid.many { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
@media (max-width: 760px) { .result-grid.three { grid-template-columns: repeat(3, 1fr); } .result-grid.many { grid-template-columns: repeat(4, 1fr); } }
.result .actions { flex-wrap: wrap; gap: 8px; }
.pop-in { animation: pop-in .5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.85) rotateY(70deg); } }

/* 画像が無いときのカード（名前とレアリティだけ） */
.rp-fallback { aspect-ratio: 590 / 860; border-radius: 4.5%; background: linear-gradient(160deg, #6b4a2a, #3a2414); padding: 6%; box-sizing: border-box; container-type: inline-size; }
.rp-fallback .fb-inner { height: 100%; border-radius: 3%; background: linear-gradient(180deg, #c98a4a, #8a4f1b); display: flex; flex-direction: column; gap: 4%; padding: 5%; box-sizing: border-box; color: #1a1008; }
.rp-fallback .fb-name { background: #f5eedb; border-radius: 2px; padding: 3% 4%; font-weight: 900; font-size: 7cqw; line-height: 1.2; }
.rp-fallback .fb-art { flex: 1; background: #0d0b10; display: grid; place-items: center; color: #ffe08a66; }
.rp-fallback .fb-art svg { width: 50%; }
.rp-fallback .fb-rar { text-align: center; font-weight: 900; font-size: 7cqw; color: #fff; text-shadow: 0 1px 2px #000; }
.rp-fallback .fb-no, .rp-fallback .fb-msg { text-align: center; font-size: 4.5cqw; }

@media (prefers-reduced-motion: reduce) {
  .tile, .pk-foil, .pk-emblem, .detail-art .pk, .d-actions .btn.primary, .slot.open .face.front, .result-grid .cell .card-stage, .pop-in { animation: none !important; }
}

/* 画像なしのカードも、マスの幅からはみ出さない */
.result-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .result-grid.many { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.result-grid .cell { min-width: 0; }
.card.rp-fallback { width: 100%; height: auto; overflow: hidden; overflow-wrap: anywhere; }
/* めくったカードのレアリティ名と、下の案内が重ならないように */
#stack-hint { margin-top: 40px; }
.arena { padding-top: 24px; }
.result-grid .cap { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.result-grid .cap small { max-width: 100%; }

/* 実際のパッケージ画像（packs/<id>.webp。縦横比 1:2） */
.pk { aspect-ratio: 1 / 2; }
.pk.real { background: #0d0a14; }
.pk.real::before, .pk.real::after { display: none; }
.pk.real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.pk.real .pk-foil { opacity: .55; z-index: 1; }
.detail-art .pk.real { width: min(100%, 240px); margin-inline: auto; }
/* 開封：上の切り取る部分にも同じ画像の上端を出して、1枚の袋に見せる */
.pack.real { --w: min(54vw, 250px); aspect-ratio: 1 / 2; }
.pack.real .pack-top { background: #0d0a14 var(--art) center top / 100% 666.667% no-repeat; animation: none; }
.pack.real .pack-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 20%, #ffffff40 32%, transparent 44%); background-size: 300% 100%; animation: foil 4s linear infinite; mix-blend-mode: overlay; }
.pack.real .cut-guide { color: #fff; text-shadow: 0 1px 3px #000, 0 0 8px #000; z-index: 1; }
.pack-body > .pk.real { border-radius: 0 0 14px 14px; }
.pack-body > .pk.real img { top: -17.647%; height: 117.647%; }
@media (prefers-reduced-motion: reduce) { .pack.real .pack-top::after { animation: none; } }
.pack.real .cut-guide { inset: auto; left: 50%; top: 52%; translate: -50% -50%; background: #000b; border: 1px solid #ffffff55; border-radius: 99px; padding: .25em .8em; white-space: nowrap; font-size: 11px; }

/* ================= 本物の OCG のレアリティ加工（foil.js が足す層） ================= */
.rcard.ocg .art-fx, .rcard.ocg .card-fx { display: none; }
.rcard .of { position: absolute; pointer-events: none; }
.rcard .of i { position: absolute; inset: 0; display: block; }
.rcard .of-art { left: calc(var(--u)*66); top: calc(var(--u)*152); width: calc(var(--u)*458); height: calc(var(--u)*458); overflow: hidden; z-index: 3; }
.rcard.rc-pend .of-art { left: calc(var(--u)*22); width: calc(var(--u)*546); height: calc(var(--u)*383); }
.rcard .of-name { left: calc(var(--u)*34); top: calc(var(--u)*36); width: calc(var(--u)*456); height: calc(var(--u)*66); z-index: 4;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.rcard .of-surf { inset: 0; z-index: 5; border-radius: inherit; overflow: hidden; }
/* 光の位置（--px/--py はマウス・指・傾き、または待機中のゆっくりした動き） */
.rcard .of-bar { background: linear-gradient(115deg, transparent 30%, #ffffff8c 47%, #ffffffd0 50%, #ffffff8c 53%, transparent 70%); background-size: 260% 260%; background-position: var(--px) var(--py); mix-blend-mode: overlay; }

/* スーパー・ウルトラ：イラストのホロ（虹色の帯＋細かい粒） */
.of-holo .of-rain { background: repeating-linear-gradient(110deg, #ff3d7f 0%, #ffd43d 3.5%, #3dff8b 7%, #3dc8ff 10.5%, #b43dff 14%, #ff3d7f 17.5%); background-size: 320% 320%; background-position: var(--px) var(--py); mix-blend-mode: color-dodge; opacity: .24; }
.of-holo .of-fleck { background: var(--ocg-grain) 0 0 / calc(var(--u)*150) calc(var(--u)*150); background-position: calc(var(--px) * .3) calc(var(--py) * .3); mix-blend-mode: overlay; opacity: .8; }
/* シークレット：斜めの細い線と、平行な点の模様（Duelist Revolution から細かく） */
.of-secret .of-rain, .of-name .of-rain, .of-surf.of-secret .of-rain { background: linear-gradient(135deg, #ff4d7d, #ffc84d 16%, #5dff8b 32%, #4dd2ff 48%, #a77bff 64%, #ff4dd2 80%, #ff4d7d); background-size: 300% 300%; background-position: var(--px) var(--py); mix-blend-mode: color-dodge; opacity: .3; }
.of-secret .of-diag, .of-name .of-diag, .of-surf.of-secret .of-diag { --g: calc(var(--u)*5.2); background: repeating-linear-gradient(45deg, #ffffffb0 0 calc(var(--u)*1), transparent calc(var(--u)*1) var(--g)); mix-blend-mode: overlay; opacity: .9; }
.of-secret.fine .of-diag, .of-surf.of-secret.fine .of-diag { --g: calc(var(--u)*3.4); }
.of-secret .of-dots { background: radial-gradient(circle, #ffffffc8 0 calc(var(--u)*.8), transparent calc(var(--u)*1.3)) 0 0 / calc(var(--u)*6) calc(var(--u)*6); mix-blend-mode: overlay; opacity: .75; }
.of-secret.fine .of-dots { background-size: calc(var(--u)*4) calc(var(--u)*4); }
.of-surf.of-secret .of-rain { opacity: .12; mix-blend-mode: soft-light; }
.of-surf.of-secret .of-diag { opacity: .28; }
/* アルティメット：浮き彫り（光る側と影の側を光の向きでずらす）＋金色 */
.of-relief .of-gold { background: radial-gradient(circle at var(--px) var(--py), #fff3c4 0, #e0b04a 30%, #7a5212 75%); mix-blend-mode: soft-light; opacity: .85; }
.of-relief .of-hi, .of-relief .of-lo { position: absolute; inset: -2%; }
.of-relief canvas { width: 100%; height: 100%; display: block; }
.of-relief .of-hi { mix-blend-mode: screen; opacity: .9; translate: calc((50% - var(--px)) * .03) calc((50% - var(--py)) * .03); }
.of-relief .of-lo { mix-blend-mode: multiply; opacity: .85; translate: calc((var(--px) - 50%) * .03) calc((var(--py) - 50%) * .03); }
.of-relief .of-rim { box-shadow: inset calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*2) #fff6d6cc, inset calc(var(--u)*-2) calc(var(--u)*-2) calc(var(--u)*2) #3a2600cc, inset 0 0 0 calc(var(--u)*3) #d8a83a66; }
.rcard .of-relief-top { left: calc(var(--u)*490); top: calc(var(--u)*30); width: calc(var(--u)*76); height: calc(var(--u)*76); border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at var(--px) var(--py), #fff6d0aa, transparent 60%); mix-blend-mode: overlay; box-shadow: inset 2px 2px 2px #fff8, inset -2px -2px 2px #0007; }
.rcard .of-relief-frame { inset: 0; z-index: 4; border-radius: inherit; box-shadow: inset calc(var(--u)*5) calc(var(--u)*5) calc(var(--u)*4) #fff3c488, inset calc(var(--u)*-5) calc(var(--u)*-5) calc(var(--u)*4) #2a1a0088; }
.rcard .of-relief-text { left: calc(var(--u)*36); top: calc(var(--u)*638); width: calc(var(--u)*518); height: calc(var(--u)*176); z-index: 4; box-shadow: inset calc(var(--u)*2) calc(var(--u)*2) calc(var(--u)*2) #0006, inset calc(var(--u)*-2) calc(var(--u)*-2) calc(var(--u)*2) #fff8; }
/* ホログラフィック：単色のイラストを奥と手前の面に分けて、傾きでずらす（CRIMSON CRISIS からは3面） */
.of-hr .of-plane { position: absolute; inset: -6%; }
.of-hr .of-plane canvas { width: 100%; height: 100%; display: block; }
.of-hr .of-bg { translate: calc((50% - var(--px)) * .05) calc((50% - var(--py)) * .05); filter: brightness(.85) blur(.4px); }
.of-hr .of-mid { -webkit-mask: radial-gradient(ellipse 46% 50% at 50% 54%, #000 55%, transparent 72%); mask: radial-gradient(ellipse 46% 50% at 50% 54%, #000 55%, transparent 72%); translate: calc((var(--px) - 50%) * .035) calc((var(--py) - 50%) * .035); scale: 1.03; }
.of-hr .of-fg { -webkit-mask: radial-gradient(ellipse 34% 40% at 50% 52%, #000 50%, transparent 70%); mask: radial-gradient(ellipse 34% 40% at 50% 52%, #000 50%, transparent 70%); translate: calc((var(--px) - 50%) * .08) calc((var(--py) - 50%) * .08); scale: 1.06; filter: drop-shadow(0 0 4px #0008); }
.of-hr .of-rain { background: linear-gradient(120deg, #ff6b8b, #ffd36b, #8bff9b, #6be4ff, #b78bff, #ff6b8b); background-size: 300% 300%; background-position: var(--px) var(--py); mix-blend-mode: color; opacity: .55; }
.of-hr .of-rings { background: repeating-radial-gradient(circle at var(--px) var(--py), #ffffff00 0, #ffffff55 calc(var(--u)*2), #ffffff00 calc(var(--u)*6)); mix-blend-mode: overlay; opacity: .8; }
/* プリズマティックシークレット：菱形の格子に虹色が流れる（イラスト＋カード全面） */
.of-prism .of-rain, .of-surf.of-prism .of-rain { background: conic-gradient(from calc(var(--px) * 3.6deg) at var(--px) var(--py), #ff4d7d, #ffc84d, #5dff8b, #4dd2ff, #a77bff, #ff4dd2, #ff4d7d); mix-blend-mode: color-dodge; opacity: .34; }
.of-prism .of-lattice, .of-surf.of-prism .of-lattice { --g: calc(var(--u)*7); background:
  repeating-linear-gradient(60deg, #ffffffa0 0 calc(var(--u)*.9), transparent calc(var(--u)*.9) var(--g)),
  repeating-linear-gradient(-60deg, #ffffffa0 0 calc(var(--u)*.9), transparent calc(var(--u)*.9) var(--g));
  background-position: calc(var(--px) * .2) calc(var(--py) * .2); mix-blend-mode: overlay; opacity: .85; }
.of-prism .of-dots { background: var(--ocg-grain) 0 0 / calc(var(--u)*110) calc(var(--u)*110); mix-blend-mode: color-dodge; opacity: .5; animation: of-twinkle 5s linear infinite; }
.of-surf.of-prism .of-rain { opacity: .16; mix-blend-mode: soft-light; }
.of-surf.of-prism .of-lattice { opacity: .3; }
/* クォーターセンチュリーシークレット：銀と金の斜めの線＋同心円の透かし（25周年の模様の代わり） */
.of-qc .of-rain, .of-surf.of-qc .of-rain { background: linear-gradient(125deg, #fff1b8, #d8a520 14%, #f2f5f8 28%, #ff7ab0 42%, #7ad8ff 56%, #f2f5f8 70%, #ffe58a 84%, #fff); background-size: 300% 300%; background-position: var(--px) var(--py); mix-blend-mode: color-dodge; opacity: .32; }
.of-qc .of-diag, .of-surf.of-qc .of-diag { --g: calc(var(--u)*3.4); background: repeating-linear-gradient(45deg, #ffffffb0 0 calc(var(--u)*1), transparent calc(var(--u)*1) var(--g)); mix-blend-mode: overlay; opacity: .85; }
.of-qc .of-mark, .of-surf.of-qc .of-mark { background: repeating-radial-gradient(circle at 50% 46%, transparent 0 calc(var(--u)*9), #ffffff66 calc(var(--u)*10), transparent calc(var(--u)*11) calc(var(--u)*22));
  -webkit-mask: radial-gradient(circle at var(--px) var(--py), #000 0, transparent 55%); mask: radial-gradient(circle at var(--px) var(--py), #000 0, transparent 55%); mix-blend-mode: overlay; opacity: .9; }
.of-surf.of-qc .of-rain { opacity: .14; mix-blend-mode: soft-light; }
.of-surf.of-qc .of-diag { opacity: .26; }
.of-n-qc .of-metal { background-image: linear-gradient(100deg, #9aa3ad, #ffffff 16%, #fff1b8 30%, #d8a520 44%, #ffffff 58%, #c9d1d9 74%, #ffe58a 88%, #fff); }
/* オーバーフレーム：イラスト枠の上の縁から光がはみ出す */
.rcard .of-ovf { left: calc(var(--u)*50); top: calc(var(--u)*96); width: calc(var(--u)*490); height: calc(var(--u)*530); z-index: 4; border-radius: calc(var(--u)*6);
  box-shadow: 0 0 0 calc(var(--u)*2) #fff6d6aa, 0 0 calc(var(--u)*22) #ffffff66; background: linear-gradient(180deg, #ffffff30, transparent 18%);
  translate: calc((var(--px) - 50%) * .02) calc((var(--py) - 50%) * .02); mix-blend-mode: screen; }
/* カード名：文字の形だけに金属色（mask は foil.js が文字から作る） */
.of-name .of-metal { background-size: 260% 100%; background-position: var(--px) 50%; }
.of-n-silver .of-metal { background-image: linear-gradient(100deg, #8e98a3, #ffffff 18%, #c9d1d9 34%, #6d7784 50%, #ffffff 64%, #aeb6c0 82%, #eef3f7); }
.of-n-bronze .of-metal { background-image: linear-gradient(100deg, #6b3d1a, #f3c38a 18%, #b06a2c 36%, #5a3012 50%, #ffe0b8 64%, #a5642a 82%, #e8b07a); }
.of-n-gold .of-metal { background-image: linear-gradient(100deg, #9a6a0a, #fff6c8 18%, #f5cf55 34%, #a8740e 50%, #ffe58a 64%, #c8941e 82%, #fff2b0); }
.of-n-secret .of-metal { background-image: linear-gradient(100deg, #b8c2cc, #ffffff 20%, #d8e0ea 40%, #8f9aa8 55%, #ffffff 72%, #c8d2dc); }
.of-n-bluesilver .of-metal { background-image: linear-gradient(100deg, #7d94b8, #f0f6ff 18%, #a9c0e6 36%, #5f7aa8 52%, #ffffff 66%, #9fb6dc 84%, #e6efff); }
.of-n-red .of-metal { background-image: var(--ocg-grain), linear-gradient(100deg, #b0101e, #ffd0d0 18%, #ff3b3b 36%, #8a0a14 52%, #ffffff 64%, #e01e2e 82%, #ffb0b0); background-size: calc(var(--u)*90) calc(var(--u)*90), 260% 100%; background-position: 0 0, var(--px) 50%; }
.of-name .of-rain { opacity: .6; }
.of-name .of-sweep { background: linear-gradient(100deg, transparent 40%, #ffffffee 50%, transparent 60%); background-size: 300% 100%; animation: of-sweep 3.6s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes of-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
/* パラレル：カード全面の細かい粒が光る（2枚の粒を少しずつずらして瞬かせる） */
.of-parallel .of-spk { background: linear-gradient(115deg, #ff9be8, #9bd0ff 20%, #fff6a0 40%, #a0ffcf 60%, #c9a6ff 80%, #ff9be8); background-size: 260% 260%; background-position: var(--px) var(--py);
  -webkit-mask: var(--ocg-grain) 0 0 / calc(var(--u)*120) calc(var(--u)*120); mask: var(--ocg-grain) 0 0 / calc(var(--u)*120) calc(var(--u)*120); mix-blend-mode: color-dodge; opacity: .6; animation: of-twinkle 4.5s linear infinite; }
.of-parallel .of-spk.b { -webkit-mask-size: calc(var(--u)*170) calc(var(--u)*170); mask-size: calc(var(--u)*170) calc(var(--u)*170); opacity: .35; animation-duration: 7s; animation-direction: reverse; mix-blend-mode: screen; }
.of-parallel .of-haze { background: linear-gradient(115deg, transparent 30%, #ffffff40 46%, #e8f4ff5c 50%, #ffffff40 54%, transparent 70%); background-size: 260% 260%; background-position: var(--px) var(--py); mix-blend-mode: overlay; }
@keyframes of-twinkle { to { -webkit-mask-position: calc(var(--u)*120) calc(var(--u)*60); mask-position: calc(var(--u)*120) calc(var(--u)*60); } }
.rcard.still .of-name .of-sweep, .rcard.still .of-spk { animation: none; }
@media (prefers-reduced-motion: reduce) { .rcard .of-sweep, .rcard .of-spk { animation: none !important; } }

/* ---- 最後の1枚（レア枠）の予兆：裏のままふちが光る。中身の色は出さず、強さだけ ---- */
.slot.last .ant { position: absolute; inset: -3%; border-radius: 7%; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: conic-gradient(from var(--ang, 0deg), #fff0, #fff6d6 12%, #fff0 25%, #fff0 50%, #fff6d6 62%, #fff0 75%); filter: blur(6px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4%; }
.slot.last.cur:not(.open) .ant { opacity: var(--ant); animation: ant-spin calc(3.2s - var(--ant) * 1.6s) linear infinite; }
.slot.last.cur:not(.open) .face.back .card { box-shadow: 0 0 calc(var(--ant) * 34px) #fff3c4, 0 0 calc(var(--ant) * 70px) #ffe08a88; animation: ant-breath 1.4s ease-in-out infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ant-spin { to { --ang: 360deg; } }
@keyframes ant-breath { 50% { transform: translateY(-3px) scale(1.01); } }
.slot-tag .setno { display: block; font-weight: 400; font-size: 11px; color: #d8d2ea; letter-spacing: .04em; text-align: center; }
.setno { font-variant-numeric: tabular-nums; }
.result-grid .cap small.setno { color: #b9b2d0; font-size: 10px; letter-spacing: .04em; }
@media (prefers-reduced-motion: reduce) { .slot.last .ant, .slot.last .face.back .card { animation: none !important; } }

/* ---- BOX ---- */
.box-btn svg, .coll-open svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.d-box { font-size: 12px; margin: 0 0 6px; }
.box-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }
.box-title { font-family: var(--serif); font-size: clamp(18px, 4.4vw, 26px); text-align: center; margin: 0 0 10px; }
.box-title small { display: block; font-family: var(--sans); font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.box-case { position: relative; width: min(100%, 880px); padding: 16px 14px 14px; border-radius: 14px; background: linear-gradient(180deg, #2b2240, #15101f); box-shadow: inset 0 0 0 2px #ffffff1c, 0 20px 40px #000a; perspective: 900px; }
.box-lid { position: absolute; left: 0; right: 0; top: -10px; height: 22px; border-radius: 12px 12px 4px 4px; background: linear-gradient(90deg, #ffcc4d, #ff7ab8, #8fe3ff, #ffcc4d); background-size: 300% 100%; animation: foil 6s linear infinite; opacity: .85; transform-origin: top; }
.box-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; }
@media (max-width: 640px) { .box-grid { grid-template-columns: repeat(6, 1fr); gap: 6px; } }
.bpack { all: unset; position: relative; cursor: pointer; border-radius: 6px; transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), filter .3s, opacity .4s; }
.bpack .pk { box-shadow: 0 6px 12px #0009; }
.bpack:hover:not(.done), .bpack:focus-visible { transform: translateY(-10px) rotate(-2deg); filter: drop-shadow(0 0 10px #ffe08a); }
.bpack:focus-visible { outline: 2px solid #ffe08a; }
.bpack .bno { position: absolute; left: 50%; bottom: 4px; translate: -50% 0; font-size: 10px; font-weight: 800; background: #000b; border-radius: 99px; padding: 0 6px; color: #fff; }
.bpack.done { opacity: .28; filter: grayscale(.8); cursor: default; transform: translateY(6px) scale(.94); }
.bpack.rip { animation: bp-rip .55s cubic-bezier(.3, .1, .4, 1); }
@keyframes bp-rip { 0% { transform: none; opacity: 1; filter: none; } 30% { transform: translateY(-26px) rotate(-6deg) scale(1.08); filter: brightness(1.6) drop-shadow(0 0 14px #fff); } 100% { transform: translateY(6px) scale(.94); } }
.box-grid.deal .bpack { animation: bp-in .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--k) * 22ms); }
@keyframes bp-in { from { opacity: 0; transform: translateY(-60px) rotateX(60deg); } }
.boxsum { width: 100%; }
.bs-sec { margin: 0 auto 18px; max-width: 1000px; animation: tile-in .5s both; }
.bs-h { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 0 0 8px; border-bottom: 1px solid #ffffff22; padding-bottom: 6px; }
.bs-h b { color: #fff; }
.bs-h.t3 .rchip { animation: glow3 1.6s linear infinite; }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.bs-grid .cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-grid .card-stage { width: 100%; }
.bs-grid .cap { font-size: 11px; text-align: center; color: #fff; overflow-wrap: anywhere; }
.bs-grid .cap small { display: block; color: #b9b2d0; font-size: 10px; }
.bs-grid .cell.tier1 .card-stage { filter: drop-shadow(0 0 8px #8fe3ff99); }
.bs-grid .cell.tier2 .card-stage { filter: drop-shadow(0 0 12px #ffd76bcc); }
.bs-grid .cell.tier3 .card-stage { animation: glow3 1.6s linear infinite; }
.bs-list { columns: 3 220px; }
#boxsum-check { margin: -4px 0 14px; }

/* ---- コレクション（バインダー） ---- */
.coll-open { display: flex; align-items: center; gap: 4px; margin: 10px auto 0; width: fit-content; }
.coll-open small { color: #ffe08a; margin-left: 8px; font-weight: 400; }
.coll-h { font-family: var(--serif); font-size: clamp(22px, 5vw, 32px); margin: 0 0 4px; }
.coll-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; max-width: 1000px; margin: 10px auto 14px; }
.coll-tools label { font-size: 12px; color: var(--muted); }
.coll-tools select { font: inherit; font-size: 15px; color: #fff; background: #0f0c1c; border: 1px solid #ffffff33; border-radius: 10px; padding: 8px 10px; max-width: 100%; min-width: 0; flex: 1 1 260px; }
.coll-rar, .coll-own { display: flex; flex-wrap: wrap; gap: 6px; }
.coll-rar button, .coll-own button { border: 1px solid #ffffff2a; background: #ffffff0d; color: #fff; border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s; }
.coll-rar button:hover, .coll-own button:hover { transform: translateY(-1px); }
.coll-rar button[aria-pressed="true"], .coll-own button[aria-pressed="true"] { background: linear-gradient(135deg, #ffcc4d, #ff7ab8); color: #2a1030; border-color: transparent; }
.coll-own[hidden] { display: none; }
.coll-over { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 520px) { .coll-over { grid-template-columns: repeat(3, 1fr); gap: 8px; } }
.co-tile { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 6px; border-radius: 10px; transition: background .2s, transform .3s; animation: tile-in .5s both; animation-delay: calc(var(--k) * 25ms); }
.co-tile:hover, .co-tile:focus-visible { background: #ffffff10; transform: translateY(-3px); }
.co-tile.none .pk { filter: grayscale(.85) brightness(.6); }
.co-name { font-size: 12px; font-weight: 800; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.co-bar { height: 6px; border-radius: 99px; background: #ffffff18; overflow: hidden; }
.co-bar i { display: block; height: 100%; width: calc(var(--p) * 1%); background: linear-gradient(90deg, #8fe3ff, #ffe08a, #ff7ab8); animation: bar-in 1s cubic-bezier(.2, .9, .3, 1) both; transform-origin: left; }
@keyframes bar-in { from { transform: scaleX(0); } }
.co-sub { font-size: 10px; color: var(--muted); }
.binder { max-width: 1060px; margin: 0 auto; }
.binder-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.binder-head h3 { font-family: var(--serif); font-size: 22px; margin: 0; }
.ring { position: relative; width: 64px; height: 64px; flex: none; }
.ring svg { width: 100%; height: 100%; rotate: -90deg; }
.ring .rg-bg { fill: none; stroke: #ffffff1c; stroke-width: 7; }
.ring .rg-fg { fill: none; stroke: #ffe08a; stroke-width: 7; stroke-linecap: round; stroke-dasharray: var(--dash) var(--c); animation: ring-in 1.1s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ring-in { from { stroke-dasharray: 0 var(--c); } }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; }
.binder-book { display: grid; gap: 14px; perspective: 1600px; }
.binder-book.spread { grid-template-columns: 1fr 1fr; }
.page { position: relative; padding: 14px 14px 26px; border-radius: 10px; background: linear-gradient(180deg, #2a2236, #1a1424); box-shadow: inset 0 0 0 1px #ffffff1a, 0 14px 30px #000a; transform-origin: left center; }
.binder-book.spread .page:first-child { border-radius: 10px 2px 2px 10px; box-shadow: inset -12px 0 18px -10px #000c, inset 0 0 0 1px #ffffff1a, 0 14px 30px #000a; }
.binder-book.spread .page:nth-child(2) { border-radius: 2px 10px 10px 2px; box-shadow: inset 12px 0 18px -10px #000c, inset 0 0 0 1px #ffffff1a, 0 14px 30px #000a; }
.binder-book.turn-f .page { animation: turn-f .55s cubic-bezier(.3, .7, .3, 1) both; }
.binder-book.turn-b .page { animation: turn-b .55s cubic-bezier(.3, .7, .3, 1) both; }
.binder-book.turn-n .page { animation: tile-in .5s both; }
@keyframes turn-f { from { transform: rotateY(-70deg); opacity: 0; } }
@keyframes turn-b { from { transform: rotateY(70deg); opacity: 0; } }
.pockets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pocket { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; animation: tile-in .45s both; animation-delay: calc(var(--k, 0) * 30ms); }
.pocket.blank { aspect-ratio: 59 / 86; border-radius: 6px; background: #ffffff06; box-shadow: inset 0 0 0 1px #ffffff12; }
.pocket .sil, .pocket .pc-img { position: relative; aspect-ratio: 59 / 86; border-radius: 5px; overflow: hidden; }
.pocket .sil { background: linear-gradient(160deg, #ffffff0c, #ffffff04); box-shadow: inset 0 0 0 1px #ffffff1e; }
.pocket .sil svg { width: 100%; height: 100%; display: block; }
.sil .s-card { fill: #ffffff08; stroke: #ffffff2a; stroke-width: 1; }
.sil .s-bar, .sil .s-txt { fill: #ffffff10; }
.sil .s-art { fill: #00000040; stroke: #ffffff18; }
.sil .s-q { fill: #ffffff38; font: 900 22px var(--serif); }
.pocket .pc-img { background: #0d0a14; box-shadow: 0 6px 14px #0009, inset 0 0 0 1px #ffffff22; transition: transform .3s; }
.pocket.got:hover .pc-img { transform: translateY(-4px) rotate(-1deg); }
.pocket .pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pocket .pc-foil { position: absolute; inset: 0; pointer-events: none; }
/* 袋（スリーブ）の光沢 */
.pocket .pc-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, #ffffff30 46%, transparent 56%); background-size: 300% 100%; animation: foil 6s linear infinite; pointer-events: none; }
.pocket.t1 .pc-foil, .pocket.t2 .pc-foil, .pocket.t3 .pc-foil { background: repeating-linear-gradient(110deg, #ff3d7f 0%, #ffd43d 4%, #3dff8b 8%, #3dc8ff 12%, #b43dff 16%, #ff3d7f 20%); background-size: 300% 300%; mix-blend-mode: color-dodge; opacity: .22; animation: hue-slide 6s linear infinite; }
.pocket.t3 .pc-foil { opacity: .38; }
.pocket.noimg .pc-img { background: linear-gradient(160deg, #6b4a2a, #3a2414); }
.pocket .p-cnt { position: absolute; right: 4px; top: 4px; background: #000c; color: #9be8b0; font-size: 11px; font-weight: 800; border-radius: 99px; padding: 0 7px; z-index: 2; }
.pocket .p-no { font-size: 10px; color: #b9b2d0; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.pocket .p-nm { font-size: 11px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pocket.miss .p-nm { color: #8f88a8; }
.pocket .p-r { display: flex; flex-wrap: wrap; gap: 2px; }
.pg-foot { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
.binder-nav { margin-top: 12px; gap: 10px; align-items: center; }
.binder-nav .btn svg { width: 18px; height: 18px; display: block; }
.binder-nav .btn:disabled { opacity: .35; }
.coll-reset { margin-top: 22px; gap: 10px; }
.btn.danger { color: #ffb0b8; border-color: #ff6b8b66; }
.btn.primary.danger { background: linear-gradient(135deg, #ff6b8b, #d81b4a); color: #fff; }
.confirm { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #0008; backdrop-filter: blur(4px); }
.confirm[hidden] { display: none; }
.confirm-box { max-width: 420px; margin: 16px; text-align: center; animation: pop-in .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.confirm-box svg { width: 40px; height: 40px; color: #ffb0b8; }
.confirm-box p { margin: 8px 0 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .box-lid, .bpack, .box-grid.deal .bpack, .bs-sec, .co-tile, .co-bar i, .ring .rg-fg, .binder-book .page, .pocket, .pocket .pc-img::after, .pocket .pc-foil, .confirm-box { animation: none !important; }
}