/* ===== Deck builder (Meow Battle) — the deck is the hero: framed board with the 15 cards; the collection is a picker on the side ===== */
#deckScr { position: absolute; inset: 0; z-index: 41; pointer-events: auto; opacity: 0; transition: opacity .45s ease; }
#deckScr.on { opacity: 1; }
#deckScr[hidden] { display: none !important; }

/* back: the same quiet round button as CHOOSE YOUR BATTLE */
.dk-back { position: absolute; left: 26px; top: 28px; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: #ecd39a; background: rgba(9, 4, 13, .45); box-shadow: inset 0 0 0 1px rgba(236, 211, 154, .45); transition: color .25s, box-shadow .25s, transform .25s; z-index: 6; }
.dk-back svg { width: 24px; height: 24px; }
.dk-back:hover { color: #fff3d6; box-shadow: inset 0 0 0 1px #ffd98a, 0 0 22px rgba(255, 200, 110, .35); transform: translateX(-3px); }
.dk-back:focus-visible { outline: 2px solid #ffd98a; outline-offset: 4px; }

/* ---------- the deck board ---------- */
.dk-board { position: absolute; left: 96px; top: 22px; width: var(--bw, 1064px); height: calc(1036px + var(--ex, 0px)); }
/* the leather frame of MY DECK, sliced so it can take any size (corners keep their shape); its own layer, so hovering cards never repaints it */
.dk-board::before { content: ""; position: absolute; inset: 0; box-sizing: border-box; border-style: solid; border-width: 180px 161px; border-image: url(dk_board.webp) 290 260 fill / 180px 161px round; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .6)); will-change: transform; pointer-events: none; }
.dk-plaque { position: absolute; left: 50%; top: -20px; width: 350px; height: 151px; transform: translateX(-50%); background: url(dk_plaque.webp) center / contain no-repeat; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55)); z-index: 2; }
.dk-name { position: absolute; left: 50px; top: 56px; width: 250px; height: 52px; padding: 0 8px; border: 0; background: none; text-align: center; font: 900 25px/1 Cinzel, serif; letter-spacing: .04em; color: #4a2508; text-shadow: 0 1px 0 rgba(255, 236, 190, .8); outline: none; border-radius: 8px; }
.dk-name:hover { background: rgba(255, 240, 200, .18); }
.dk-name:focus { background: rgba(255, 240, 200, .3); box-shadow: inset 0 0 0 1.5px rgba(122, 74, 20, .5); }

/* rules, spelled out, big enough to read at a glance */
.dk-rules { position: absolute; left: 50px; right: 50px; top: 134px; display: flex; align-items: flex-end; gap: 14px; z-index: 1; }
.dk-count { flex: none; width: 104px; height: 104px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: baseline; column-gap: 2px; font: 900 20px/1 Cinzel, serif; color: rgba(243, 223, 176, .65); border-radius: 14px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(243, 207, 122, .3); }
.dk-count b { font-size: 50px; color: #f3dfb0; text-shadow: 0 0 14px rgba(255, 210, 120, .35); }
.dk-count small { flex-basis: 100%; text-align: center; margin-top: 6px; font: 800 13px/1 Cinzel, serif; letter-spacing: .26em; color: rgba(243, 223, 176, .65); }
.dk-count.full b { color: #b8ff8a; text-shadow: 0 0 16px rgba(140, 255, 120, .4); }
.dk-rules .rg { min-width: 0; }
.dk-rules .rg:nth-child(2) { flex: 0 0 392px; }
.dk-rules .rg:nth-child(3) { flex: 1; }
.rr-h { margin-bottom: 8px; padding-left: 2px; font: 800 15px/1 Cinzel, serif; letter-spacing: .14em; color: #f3cf7a; white-space: nowrap; }
.rr-h small { margin-left: 8px; font: 700 12px/1 Cinzel, serif; letter-spacing: .1em; color: rgba(243, 223, 176, .6); }
.rr-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 104px; border-radius: 12px; background: rgba(0, 0, 0, .36); box-shadow: inset 0 0 0 1px rgba(243, 207, 122, .2); }
.rc .coin { width: 34px; height: 34px; display: grid; place-items: center; background: url(dk_coin.webp) center / contain no-repeat; font: 900 15px/1 Cinzel, serif; letter-spacing: -.04em; color: #fff; text-shadow: 0 1px 0 #0b2a55, 0 0 4px #0b2a55; }
.rc b { font: 900 30px/1 Cinzel, serif; color: #f3dfb0; }
.rc > small { font: 800 15px/1 Cinzel, serif; color: rgba(243, 223, 176, .78); white-space: nowrap; }
.rc.low b { color: #ffb36b; } .rc.ok b { color: #b8ff8a; } .rc.max b { color: #ffd76a; }
.rc.low { box-shadow: inset 0 0 0 1.5px rgba(255, 160, 90, .55); }
.rc.rar img { height: 36px; width: 40px; object-fit: contain; }
.rc.rar b { font-size: 27px; color: #f3dfb0; }
.rc.rar b i { font-style: normal; }
.rc.rar b small { font-size: 16px; color: rgba(243, 223, 176, .65); }
.rc.rar.max b { color: #ffd76a; }
.rc.rar em { font: 800 11px/1 Cinzel, serif; font-style: normal; letter-spacing: .02em; color: rgba(243, 223, 176, .7); }

/* the 15 cards */
.dk-deck { position: absolute; left: 50px; right: 50px; top: 278px; height: calc(630px + var(--ex, 0px)); display: grid; grid-template-columns: repeat(5, var(--cw, 150px)); grid-auto-rows: calc(var(--cw, 150px) * 1.397); gap: 16px 22px; justify-content: center; align-content: space-evenly; z-index: 1; }
.dk-slot { position: relative; border: 0; padding: 0; background: none; cursor: pointer; }
.dk-slot .ci { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
.dk-dc .ci { transition: transform .2s cubic-bezier(.2, .8, .3, 1.2); will-change: transform; }
.dk-dc::before { content: ""; position: absolute; inset: 3% 4% 1%; border-radius: 12px; box-shadow: 0 12px 22px rgba(0, 0, 0, .55); }
.dk-dc:hover .ci, .dk-dc:focus-visible .ci { transform: translateY(-6px) scale(1.04); }
.dk-dc .rm { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 5px 10px 4px; border-radius: 99px; font: 800 10.5px/1 Cinzel, serif; letter-spacing: .14em; color: #fff; background: linear-gradient(180deg, #e0485a, #9c1a2c); box-shadow: 0 0 0 1.5px #ffcfb0, 0 4px 10px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 3; white-space: nowrap; }
.dk-dc:hover .rm { opacity: 1; }
/* landing flash: a glow ring that only fades (opacity is composited, the card itself is never re-painted) */
.dk-dc::after { content: ""; position: absolute; inset: -5px; border-radius: 14px; box-shadow: 0 0 0 2px #ffe08a, 0 0 30px 8px rgba(255, 210, 120, .7); opacity: 0; will-change: opacity; pointer-events: none; z-index: 2; }
.dk-dc.land::after { animation: dkLand .75s ease .3s both; }
@keyframes dkLand { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.dk-open { position: relative; border-radius: 12px; border: 1.5px dashed rgba(243, 207, 122, .28); background: radial-gradient(closest-side, rgba(243, 207, 122, .06), rgba(0, 0, 0, .22)); }
.dk-open i::before, .dk-open i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 2px; margin: -1px 0 0 -13px; background: rgba(243, 207, 122, .32); border-radius: 2px; }
.dk-open i::after { transform: rotate(90deg); }
.dk-slot:focus-visible { outline: 2px solid #ffd23f; outline-offset: 4px; border-radius: 10px; }

/* message + actions at the foot of the board */
.dk-foot { position: absolute; left: 62px; right: 62px; top: calc(918px + var(--ex, 0px)); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 1; }
.dk-msg { min-height: 22px; display: flex; align-items: baseline; justify-content: center; gap: 10px; text-align: center; font: 700 15px/1.2 Cinzel, serif; letter-spacing: .05em; color: #f3dfb0; white-space: nowrap; }
.dk-msg small { font: 600 12px/1.2 Cinzel, serif; color: rgba(243, 223, 176, .6); }
.dk-msg.ok { color: #b8ff8a; }
.dk-msg.warn { color: #ff9a8a; animation: dkPulse .5s ease; }
@keyframes dkPulse { 0% { transform: scale(1.08); } 100% { transform: none; } }
.dk-actions { display: flex; align-items: center; justify-content: center; gap: 14px; }
/* buttons painted in Seedream (lettering baked in) */
.dk-btn2 { position: relative; width: 190px; height: 45px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .3, 1.3), filter .2s; }
.dk-btn2 img, .dk-save img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.dk-btn2:hover { transform: translateY(-2px); filter: brightness(1.15); }
.dk-btn2:active, .dk-save:not(:disabled):active { transform: translateY(1px) scale(.98); }
.dk-save { position: relative; width: 262px; height: 79px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .3, 1.3), filter .2s; }
.dk-save b { position: absolute; inset: 0; display: grid; place-items: center; font: 900 21px/1 Cinzel, serif; letter-spacing: .16em; color: #d8ffb0; text-shadow: 0 0 10px #4c2, 0 2px 4px #000; opacity: 0; pointer-events: none; }
.dk-save.saved img { filter: brightness(.4) saturate(.5); }
.dk-save.saved b { opacity: 1; }
.dk-save:not(:disabled):hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.12); }
.dk-save:disabled { filter: grayscale(.8) brightness(.55); cursor: not-allowed; }
.dk-btn2:focus-visible, .dk-save:focus-visible, .dk-cta:focus-visible { outline: 2px solid #ffd23f; outline-offset: 3px; border-radius: 24px; }

/* ---------- the collection picker ---------- */
.dk-col { position: absolute; left: calc(96px + var(--bw, 1064px) + 24px); top: 22px; width: calc(1776px - var(--bw, 1064px)); height: calc(1036px + var(--ex, 0px)); box-sizing: border-box; padding: 22px 20px 8px; display: flex; flex-direction: column; gap: 14px; border-radius: 24px; background: linear-gradient(180deg, rgba(34, 13, 40, .9), rgba(14, 6, 18, .94)); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .45), inset 0 0 0 5px rgba(14, 6, 18, .9), inset 0 0 0 6px rgba(243, 207, 122, .14), 0 26px 50px rgba(0, 0, 0, .5); }
.dk-colhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px; }
.dk-colhead .ttl { font: 900 24px/1 Cinzel, serif; letter-spacing: .1em; color: #f3dfb0; }
.dk-colhead .ttl small { display: block; margin-top: 7px; font: 600 13px/1 Barlow, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 223, 176, .62); }
.dk-colhead .ttl small b { color: #ffe08a; font-weight: 800; text-shadow: 0 0 8px rgba(255, 210, 120, .5); }
.dk-colhead .ttl small em { font-style: normal; color: #ff9a8a; }
.dk-search { width: 270px; height: 44px; box-sizing: border-box; padding: 0 18px 0 44px; border-radius: 999px; border: 1.5px solid rgba(243, 207, 122, .5); background: rgba(10, 4, 14, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23f3cf7a' stroke-width='2'/%3E%3Cpath d='M15.5 15.5 21 21' stroke='%23f3cf7a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 16px center / 18px no-repeat; color: #fff4e2; font: 500 16px/1 Barlow, sans-serif; outline: none; }
.dk-search::placeholder { color: rgba(243, 223, 176, .5); }
.dk-search:focus { border-color: #ffd98a; box-shadow: 0 0 0 3px rgba(255, 210, 120, .15); }
.dk-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; padding: 6px 14px 6px 8px; border-radius: 27px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(243, 207, 122, .3); white-space: nowrap; }
.dk-filters .grp { display: flex; align-items: center; gap: 4px; }
.dk-filters .grp + .grp { padding-left: 16px; border-left: 1px solid rgba(243, 207, 122, .25); }
.dk-filters button { border: 0; padding: 0; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.2, .8, .3, 1.3); }
.dk-filters .f-r { width: 44px; height: 42px; display: grid; place-items: center; }
.dk-filters .f-r img { display: block; max-height: 40px; max-width: 46px; filter: saturate(.55) brightness(.7); transition: filter .2s; }
.dk-filters .f-r:hover img { filter: none; }
.dk-filters .f-r.on { transform: translateY(-2px) scale(1.14); }
.dk-filters .f-r.on img { filter: saturate(1.15) brightness(1.12) drop-shadow(0 0 6px #ffe08a); }
.dk-filters .f-c { width: 36px; height: 36px; display: grid; place-items: center; background: url(dk_coin.webp) center / contain no-repeat; filter: saturate(.55) brightness(.7); transition: transform .2s cubic-bezier(.2, .8, .3, 1.3), filter .2s; }
.dk-filters .f-c span { font: 900 16px/1 Cinzel, serif; color: #fff; text-shadow: 0 1px 0 #0b2a55, 0 0 5px #0b2a55; }
.dk-filters .f-c:hover { filter: none; }
.dk-filters .f-c.on { filter: brightness(1.15) drop-shadow(0 0 6px #6cc4ff); transform: translateY(-2px) scale(1.14); }
.f-own { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid rgba(243, 207, 122, .25); font: 700 13px/1 Cinzel, serif; letter-spacing: .12em; color: #f3dfb0; cursor: pointer; }
.f-own input { position: absolute; opacity: 0; pointer-events: none; }
.f-own i { position: relative; width: 44px; height: 24px; border-radius: 99px; background: linear-gradient(180deg, #1a0a1e, #2c1430); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .6), inset 0 2px 4px rgba(0, 0, 0, .6); transition: background .2s; }
.f-own i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4cf, #d9a640 60%, #8a5a14); box-shadow: 0 2px 4px rgba(0, 0, 0, .6); transition: transform .25s cubic-bezier(.2, .8, .3, 1.3); }
.f-own input:checked + i { background: linear-gradient(180deg, #2a6a3a, #184a26); }
.f-own input:checked + i::after { transform: translateX(20px); }
.f-own input:focus-visible + i { outline: 2px solid #ffd23f; outline-offset: 3px; }

.dk-colgrid { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, 118px); grid-auto-rows: 165px; gap: 26px 14px; justify-content: center; align-content: start; padding: 12px 8px 30px; scrollbar-width: thin; scrollbar-color: rgba(243, 207, 122, .55) transparent; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 22px), transparent); }
.dk-pick { } /* no content-visibility here: its paint containment would clip the glow and the ADD tag */
/* every small card is its own layer: hover lifts it and state changes fade overlays, without re-painting the card */
.dk-pick .ci { transition: transform .18s cubic-bezier(.2, .8, .3, 1.2); will-change: transform; }
.dk-pick:hover .ci, .dk-pick:focus-visible .ci { transform: translateY(-4px); }
.dk-pick.no .ci { filter: grayscale(1) brightness(.7) contrast(.9); }
.dk-pick .ring, .dk-pick .veil { position: absolute; pointer-events: none; opacity: 0; will-change: opacity; transition: opacity .18s ease; }
/* fits the deck right now: lit gold frame */
.dk-pick .ring { inset: -6px; border-radius: 14px; box-shadow: 0 0 0 2.5px #ffe9a0, 0 0 22px 7px rgba(255, 205, 100, .75), inset 0 0 14px rgba(255, 225, 150, .35); z-index: 3; }
.dk-pick.fits .ring { opacity: 1; animation: dkBreathe 2.4s ease-in-out infinite; }
@keyframes dkBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.dk-pick.fits:hover .ring { animation: none; opacity: 1; box-shadow: 0 0 0 2.5px #fff1b8, 0 0 24px 7px rgba(255, 215, 120, .85), inset 0 0 14px rgba(255, 225, 150, .4); }
/* in the deck or over a limit: dark veil, with the reason written on it */
.dk-pick .veil { inset: 0; border-radius: 9px; background: rgba(8, 3, 12, .66); z-index: 2; }
.dk-pick.in .veil, .dk-pick.cap .veil { opacity: 1; }
.dk-pick.cap .veil { background: rgba(8, 3, 12, .58); }
.dk-pick .lock { position: absolute; left: 50%; top: 52px; width: 46px; height: 52px; transform: translateX(-50%); background: url(lock.webp) center / contain no-repeat; pointer-events: none; z-index: 2; }
.dk-pick .tick { position: absolute; left: 50%; top: 66px; transform: translateX(-50%) rotate(-8deg); padding: 5px 9px 4px; border-radius: 6px; font: 900 11px/1 Cinzel, serif; letter-spacing: .12em; color: #1d3a12; background: linear-gradient(180deg, #d8ffb0, #7fd04e); box-shadow: 0 0 0 2px #2c5a1a, 0 4px 10px rgba(0, 0, 0, .5); pointer-events: none; white-space: nowrap; z-index: 4; opacity: 0; }
.dk-pick.in .tick { opacity: 1; }
.dk-pick .why { position: absolute; left: 6px; right: 6px; top: 58px; padding: 6px 4px; border-radius: 6px; font: 800 10px/1.2 Cinzel, serif; letter-spacing: .03em; color: #ffd0c4; text-align: center; background: rgba(70, 10, 20, .9); box-shadow: 0 0 0 1px rgba(255, 140, 120, .55); pointer-events: none; z-index: 4; opacity: 0; }
.dk-pick.cap .why { opacity: 1; }
.dk-pick .add { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); padding: 5px 11px 4px; border-radius: 99px; font: 900 11px/1 Cinzel, serif; letter-spacing: .12em; color: #3a1d04; background: linear-gradient(180deg, #fff2c2, #e8b54e 55%, #b9832a); box-shadow: 0 0 0 1.5px #5a3608, 0 0 12px rgba(255, 210, 110, .7), 0 3px 8px rgba(0, 0, 0, .5); white-space: nowrap; pointer-events: none; z-index: 5; opacity: 0; will-change: opacity; transition: opacity .18s; }
.dk-pick.fits .add { opacity: 1; }
.dk-pick .nw { position: absolute; right: -6px; top: -8px; padding: 4px 7px 3px; border-radius: 99px; font: 900 10px/1 Cinzel, serif; letter-spacing: .1em; color: #fff; background: linear-gradient(180deg, #ff5a8a, #c8184a); box-shadow: 0 0 0 1.5px #ffd8a0; z-index: 3; }
.dk-slot.shake .ci { animation: dkShake .42s ease; }
@keyframes dkShake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(2deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.dk-empty { grid-column: 1 / -1; padding: 60px 30px; text-align: center; font: 700 16px/1.5 Cinzel, serif; color: rgba(243, 223, 176, .6); }

/* shop call to action at the foot of the picker: Seedream button (ruby enamel, same set as SAVE DECK) */
.dk-cta { flex: none; position: relative; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 10px; border: 0; padding: 0; background: none; cursor: pointer; transition: transform .25s cubic-bezier(.2, .8, .3, 1.3), filter .25s; }
.dk-cta img { display: block; width: 330px; height: 83px; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); }
.dk-cta small { font: 800 12px/1 Cinzel, serif; letter-spacing: .2em; text-transform: uppercase; color: #f3cf7a; text-shadow: 0 1px 2px #000; }
.dk-cta small::before, .dk-cta small::after { content: ""; display: inline-block; width: 34px; height: 1px; margin: 0 10px; vertical-align: middle; background: linear-gradient(90deg, transparent, rgba(243, 207, 122, .7)); }
.dk-cta small::after { background: linear-gradient(90deg, rgba(243, 207, 122, .7), transparent); }
.dk-cta:hover { transform: translateY(-2px); filter: brightness(1.12); }
.dk-cta:active { transform: translateY(1px) scale(.98); }
.dk-cta:focus-visible { outline: 2px solid #ffd23f; outline-offset: 3px; border-radius: 24px; }

/* big preview: one picture, swapped; a light sweep crosses it when it changes (transform only) */
.dk-prevs { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 30; pointer-events: none; }
.dk-pv { position: absolute; left: 0; top: 0; width: 300px; height: 419px; opacity: 0; will-change: transform, opacity; transition: opacity .12s ease; border-radius: 16px; }
.dk-pv.on { opacity: 1; }
.dk-pv::before { content: ""; position: absolute; inset: 2% 3%; border-radius: 18px; box-shadow: 0 26px 44px 6px rgba(0, 0, 0, .7); z-index: -1; }
.dk-pv img { display: block; width: 100%; height: 100%; }
.dk-pv.no img { filter: grayscale(1) brightness(.75); }
.dk-pv .sh { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; pointer-events: none; }
.dk-pv .sh::after { content: ""; position: absolute; top: -20%; left: -60%; width: 45%; height: 140%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 246, 220, .38), rgba(255, 255, 255, 0)); transform: translateX(-120%) rotate(8deg); will-change: transform; }
.dk-pv.on.sw .sh::after { animation: dkSweep .9s cubic-bezier(.3, .6, .3, 1) .05s both; }
@keyframes dkSweep { to { transform: translateX(520%) rotate(8deg); } }
.dk-ghost { position: fixed; z-index: 9999; pointer-events: none; transform-origin: 50% 50%; }

/* the home footer stays hidden under the builder */
body.mb-frozen #shFoot, body.mb-frozen .sh-copy { opacity: 0 !important; pointer-events: none !important; transition: opacity .2s !important; }
/* opened from CHOOSE YOUR BATTLE: its buttons must not show through */
body.mb-deck #plScr .pl-cvs { visibility: hidden; }

/* deck full: a notice floats over the collection (the cards themselves stay untouched) */
.dk-col { isolation: isolate; }
.dk-full { position: absolute; left: 50%; top: 46%; z-index: 30; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 34px; border-radius: 18px; pointer-events: none; opacity: 0; scale: .92; transition: opacity .25s ease, scale .3s cubic-bezier(.2, 1.4, .4, 1); text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(46, 16, 52, .96), rgba(18, 7, 22, .97)); box-shadow: inset 0 0 0 1.5px rgba(243, 207, 122, .7), inset 0 0 0 5px rgba(18, 7, 22, .9), inset 0 0 0 6px rgba(243, 207, 122, .2), 0 24px 50px rgba(0, 0, 0, .7); }
.dk-full.on { opacity: 1; scale: 1; }
.dk-full b { font: 700 24px/1 Cinzel, serif; letter-spacing: .06em; color: #ffe7b0; }
.dk-full span { font: 600 16px/1.2 Barlow, sans-serif; color: rgba(246, 231, 200, .8); }