/* Physical card presentation. One focal card, a quiet stage, no new art payload. */
.pack-stack{position:relative;width:100%;isolation:isolate;perspective:1000px}
.pack-stack-back{position:absolute;inset:0;border-radius:14px;border:1px solid #adc5ca66;background:#162834 url('assets/cards/card-back.webp') center/cover;transform:translate(calc(var(--stack)*5px),calc(var(--stack)*-4px)) rotate(calc(var(--stack)*2deg));box-shadow:0 3px 12px #0004;z-index:-1;pointer-events:none}
.pack-card-surface{transform:translate(var(--swipe-x,0px),var(--swipe-y,0px)) rotate(var(--swipe-turn,0deg)) perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform 280ms cubic-bezier(.16,1,.3,1);will-change:auto}
.pack-card-surface[data-pack-swipe]{touch-action:pan-y;cursor:grab}
.pack-card-surface.card-held{transition:none;cursor:grabbing;will-change:transform}
.pack-card-surface .card-reflection{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,20%),#e2f7ff25,transparent 65%);mix-blend-mode:screen;opacity:.2;transition:opacity .2s}
.pack-card-surface.card-held .card-reflection,.pack-card-surface:hover .card-reflection{opacity:.7}
.special-pull .card-reflection{background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,20%),#fff1c138,transparent 65%)}
.pack-gesture-hint{font-size:10px;letter-spacing:.025em;color:#8da5af}
.pack-pull>.pack-use.is-equipped{color:#a4d7c4;background:#80c4ae0b;border-color:#80c4ae24;font-size:10px!important;line-height:1.25}
.pack-single .pack-pull{width:clamp(170px,calc((100dvh - 226px)*.663),300px)}
.pack-reveal-stage{padding:10px 12px 0}
.pack-single .pack-navigation{gap:10px}
.pack-pull.just-revealed{animation:physicalReveal .46s cubic-bezier(.16,1,.3,1) both}
.pack-pull.just-revealed.special-pull{animation:physicalRareReveal .7s cubic-bezier(.16,1,.3,1) both}
[data-pack-gesture-busy=true] .pack-navigation{pointer-events:none}
@keyframes physicalReveal{from{opacity:.35;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@keyframes physicalRareReveal{0%{opacity:.15;transform:translateY(16px) scale(.92)}55%{opacity:1;transform:translateY(-3px) scale(1.015)}100%{opacity:1;transform:none}}

/* Inspect the real full card, or enter its illustration without losing context. */
.overlay.inspection-overlay{background:#060f18e8;backdrop-filter:blur(14px);z-index:1400}
.modal.card-inspection{width:min(440px,100%);max-width:440px;max-height:calc(100dvh - 24px);padding:42px 22px 20px;overflow-y:auto;background:radial-gradient(ellipse at 50% 35%,#22445144,transparent 70%),#0c1822;border:1px solid #b6dce024;box-shadow:0 20px 80px #0008}
.card-showcase{width:100%;max-width:360px;margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.showcase-stage{width:100%;max-width:clamp(180px,calc((100dvh - 215px)*.663),330px);padding:6px;perspective:1000px}
.showcase-card{width:100%;touch-action:none;box-shadow:0 20px 45px #0008,inset 0 0 0 1px #ffffff20}
.showcase-flipper{position:relative;width:100%;transform-style:preserve-3d;transition:transform 460ms cubic-bezier(.2,.8,.2,1)}
.showcase-flipper>.showcase-card,.showcase-card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.showcase-card-back{position:absolute;inset:0;transform:rotateY(180deg);border:1px solid #c0ccd56b;border-radius:12px;overflow:hidden;background:#132630;box-shadow:0 20px 45px #0008}
.showcase-card-back img{display:block;width:100%;height:100%;object-fit:cover}
[data-card-showcase][data-card-back=true] .showcase-flipper{transform:rotateY(180deg)}
.showcase-buttons{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.showcase-buttons button{min-height:44px}
.showcase-tabs,.showcase-card-label{display:none}.showcase-tabs button{min-height:44px;min-width:74px;border:1px solid #bad6d32b;border-radius:10px;background:#ffffff08;color:#bbcdd5;font-size:12px}.showcase-tabs button[aria-pressed=true]{background:#a8dfd61c;border-color:#a8dfd688;color:#e0fff4}
@media(max-width:600px),(max-height:500px){
 .card-showcase .showcase-tabs{display:flex;gap:8px;justify-content:center;width:100%}
 .card-showcase[data-inspect-panel=card]>.showcase-card-label{display:block;position:absolute;top:12px;left:14px;right:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:20px;margin:0}
 .card-showcase[data-inspect-panel=card]>:is(.showcase-details,.showcase-caption,.showcase-archetypes,.showcase-synergy,.inspect-status-list,.showcase-note){display:none}
 .card-showcase[data-inspect-panel=details]>:is(.showcase-stage,.showcase-tools){display:none}
 .card-inspection:has([data-inspect-panel=card])>.hero-perk{display:none}
 .card-showcase[data-inspect-panel=card] .showcase-stage{max-width:none;width:100%;height:clamp(150px,calc(100dvh - 270px),440px);display:flex;justify-content:center;padding:4px;flex-shrink:1}
 .card-showcase[data-inspect-panel=card] .showcase-flipper{height:100%;width:auto;aspect-ratio:126/190;max-width:100%}
 .card-showcase[data-inspect-panel=card] .showcase-tools{justify-content:center;gap:8px;flex-wrap:wrap}
 .card-showcase[data-inspect-panel=card] .showcase-tools>span{width:100%;text-align:center}
 .card-showcase[data-inspect-panel=card]{gap:8px}.card-inspection:has([data-inspect-panel=card]){padding:42px 12px 12px}
 .exp-modal.inspect:has([data-inspect-panel=card])>.inspect-ownership{display:none}
 .exp-modal.inspect .card-showcase[data-inspect-panel=card] .showcase-stage{height:clamp(140px,calc(100dvh - 355px),400px)}
}
.pack-flipper{position:relative;width:100%}.pack-flipper:after{content:'';position:absolute;inset:0;border-radius:12px;background:#132630 url('assets/cards/card-back.webp') center/cover;visibility:hidden;pointer-events:none;z-index:8}
.pack-single .just-revealed .pack-flipper{animation:packPhysicalFlip 440ms linear both}.pack-single .just-revealed .pack-flipper:after{animation:packPhysicalBack 440ms linear both}
@keyframes packPhysicalFlip{0%{transform:rotateY(0deg) scale(.96);animation-timing-function:cubic-bezier(.4,0,.8,.5)}40%{transform:rotateY(90deg) scale(1.015)}40.01%{transform:rotateY(-90deg) scale(1.015);animation-timing-function:cubic-bezier(.16,1,.3,1)}80%{transform:rotateY(0deg) scale(1.02)}100%{transform:none}}
@keyframes packPhysicalBack{0%,40%{visibility:visible}40.01%,100%{visibility:hidden}}
.game-battle .hand .battle-card{transition:transform 240ms cubic-bezier(.18,1.25,.4,1),box-shadow 180ms,border-color 180ms}
@media(prefers-reduced-motion:reduce){.pack-flipper,.pack-flipper:after{animation:none!important}.showcase-flipper{transition:none!important}.game-battle .hand .battle-card{transition:none!important}}
.calm-motion .pack-flipper,.calm-motion .pack-flipper:after{animation:none!important}.calm-motion .showcase-flipper{transition:none!important}.calm-motion .hand .battle-card{transition:none!important}
.showcase-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;font-size:10px;color:var(--rarity);letter-spacing:.05em}
.showcase-tools button{border:1px solid #b9d4db30;border-radius:9px;background:#d3edf509;color:#cadfe5;min-height:36px;padding:7px 12px;font-size:11px}
.showcase-caption{font-size:10px;line-height:1.4;text-align:center;color:#a4b9c4}
.card-showcase .showcase-note{font-size:11px;line-height:1.5;text-align:center;color:#abbfcb;margin:0!important}
.card-showcase .inspect-status-list{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:0;list-style:none;font-size:10px}
.card-inspection>.end-turn,.exp-modal.inspect>.exp-button{margin:16px auto 0;min-width:150px}
.card-inspection .modal-close{z-index:6;right:8px;top:4px}
.card-showcase .card-copy,.card-showcase .cost,.card-showcase .card-type{transition:opacity .3s ease,translate .3s ease}
.card-showcase .card-portrait .generated-art{transition:transform .7s cubic-bezier(.16,1,.3,1),object-position .7s;object-position:50% 26%}
.card-showcase[data-artwork=true] .card-copy{opacity:0;translate:0 18px;pointer-events:none}
.card-showcase[data-artwork=true] :is(.cost,.card-type){opacity:0;pointer-events:none}
.card-showcase[data-artwork=true] .card-portrait .generated-art{transform:scale(1.035);object-position:50% 50%}
.card-showcase[data-artwork=true] .card-reflection{opacity:.1}
.exp-modal.inspect{display:flex;flex-direction:column;align-items:center;width:min(440px,100%);max-width:440px;height:auto;overflow-y:auto;gap:12px;padding:40px 20px 20px;background:#0c1822}
.exp-modal.inspect .card-showcase{min-width:0;flex:none}
.exp-modal.inspect>.exp-button{flex:none}
.exp-modal.inspect .showcase-stage{max-width:clamp(170px,calc((100dvh - 275px)*.663),310px)}

/* Reserve information and directed movement live inside the battle's layout. */
.hud-resources{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.enemy-card-count{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-height:12px;color:#c1becf;font-size:9px;line-height:1}
.enemy-card-count>span:first-child{display:flex;align-items:center;padding-left:3px}
.enemy-card-count i{display:block;height:12px;width:8px;margin-left:-3px;background:#3c4354 url('assets/cards/card-back.webp') center/cover;border:1px solid #a4a5b674;border-radius:2px;transform:rotate(calc((var(--hand-index) - 2)*3deg))}
.enemy-card-count b{min-width:7px;font-weight:600}
.battle-action-cue{display:block;color:#c2d7df;font-weight:500;line-height:1.35}
.arena[data-phase=enemyPlay] .battle-action-cue{color:#ead3da}
.enemy-card-flight{position:fixed;width:48px;height:72px;border:1px solid var(--flight-color);border-radius:5px;overflow:hidden;background:#172734;pointer-events:none;z-index:95;box-shadow:0 7px 22px #0008}
.enemy-card-flight img,.enemy-card-flight .art{width:100%;height:100%;object-fit:cover}
.energy-mote{position:fixed;z-index:95;width:12px;height:12px;border-radius:50%;background:#fff0b8;box-shadow:0 0 9px #ffd48d,0 0 22px #ffad5566;pointer-events:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-height:480px) and (min-width:600px){
 .pack-single .pack-pull{width:min(190px,calc((100dvh - 130px)*.663))}.pack-single .pack-gesture-hint{grid-column:2;grid-row:3}.pack-reveal-stage{padding-top:6px}
 .modal.card-inspection{width:min(560px,100%);max-width:560px}.card-showcase{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,1fr);align-items:center}.showcase-stage{grid-row:1/5;width:min(180px,100%);justify-self:center}.showcase-tools{flex-direction:column}.card-inspection>.end-turn{position:absolute;right:40px;bottom:24px}.exp-modal.inspect .showcase-stage{max-width:155px}
}
@media(prefers-reduced-motion:reduce){.pack-card-surface,.pack-stack-back{transform:none!important}.card-reflection{display:none}.card-showcase *{transition:none!important}}
body.calm-motion .pack-card-surface,body.calm-motion .pack-stack-back{transform:none!important}body.calm-motion .card-reflection{display:none}body.calm-motion .card-showcase *{transition:none!important}
@media(max-height:500px) and (min-width:601px){
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card]){display:grid;grid-template-columns:minmax(110px,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto;gap:8px 12px;padding:40px 14px 12px;width:min(560px,100%);height:auto}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card])>.card-showcase{display:contents}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card]) .showcase-tabs{grid-column:2;grid-row:1;justify-content:center}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card]) .showcase-stage{grid-column:1;grid-row:1/4;height:clamp(130px,calc(100dvh - 165px),230px);width:100%;max-width:none;display:flex;justify-content:center;align-self:center;padding:3px}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card]) .showcase-flipper{height:100%;width:auto;aspect-ratio:126/190;max-width:100%}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card]) .showcase-tools{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-self:center;justify-content:center;gap:8px}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=card])>:is(.end-turn,.inspect-return){grid-column:2;grid-row:3;position:static;justify-self:stretch;margin:0;max-width:100%;width:100%}
 .exp-modal.inspect:has(.card-showcase[data-inspect-panel=card])>.inspect-ownership{display:none}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=details]){display:flex;flex-direction:column}
 :is(.modal.card-inspection,.exp-modal.inspect):has(.card-showcase[data-inspect-panel=details])>.card-showcase{display:flex;flex-direction:column;width:100%}
}
/* Ghost White is a separate collectible illustration, never a colour filter. */
.ghost-white-art{background:#fff;isolation:isolate}.ghost-white-art .foil-spectrum{opacity:.23;mix-blend-mode:multiply;background:linear-gradient(120deg,transparent 10%,#ffce7924 25%,#f65db52e 37%,#826eff2e 49%,#4be7f72b 61%,transparent 78%);background-size:240% 240%}.ghost-white-art .foil-glints{mix-blend-mode:screen;opacity:.55}.ghost-white-face{background:#fff!important;box-shadow:inset 0 0 0 1px #ddd4f3}.ghost-white-face .card-portrait{background:#fff!important}.ghost-white-face .card-copy{background:linear-gradient(180deg,#ffffff00 0%,#ffffffb8 22%,#fffffff0 52%,#faf7fffa 100%)!important;color:#233247!important;text-shadow:none!important}.ghost-white-face .card-copy strong,.ghost-white-face .card-copy p,.ghost-white-face .card-tribe-line,.ghost-white-face .card-synergy-hint,.ghost-white-face .card-stats{color:#233247!important}.ghost-white-face .cost{background:#fff!important;color:#6c428d!important;box-shadow:1px 1px 0 #ccaae780}.ghost-white-face .card-type{background:#f6efffdd!important;color:#715493!important}.ghost-white-pull{--rarity:#d3b4ff!important}.ghost-white-pull .pack-pull-meta{color:#f0dcff;letter-spacing:.09em}.ghost-white-pull.just-revealed .pack-card-surface{animation:ghostWhiteReveal 700ms cubic-bezier(.2,.8,.2,1) both}.ghost-white-pull .pack-card-surface{box-shadow:0 0 0 1px #eddaff66,0 0 25px #bb9de533,0 18px 40px #0005}@keyframes ghostWhiteReveal{0%{opacity:.2;filter:brightness(1.5);transform:translateY(14px) scale(.92)}55%{opacity:1;filter:brightness(1.15);transform:translateY(-4px) scale(1.025)}100%{filter:brightness(1);transform:none}}@media(prefers-reduced-motion:reduce){.ghost-white-pull .pack-card-surface{animation:none!important}}.calm-motion .ghost-white-pull .pack-card-surface{animation:none!important}

/* Regional packs keep their own colour and set identity throughout the reveal. */
.pack-experience[style*="--box-color"] .pale-booster{border-color:var(--box-color);box-shadow:0 0 24px color-mix(in srgb,var(--box-color) 24%,transparent)}
.pack-experience[style*="--box-color"] .pack-emblem,.pack-experience[style*="--box-color"] .pack-wrapper em{color:var(--box-color)}
.regional-box-preview{border-top:1px solid var(--box-color);padding-top:7px;width:100%;color:var(--box-color);font-size:12px}
.regional-box-preview summary{cursor:pointer;padding:7px 0;color:#eee}
.regional-box-preview details>div{max-height:140px;overflow-y:auto;display:grid;gap:3px}
.regional-box-preview button{font:inherit;text-align:left;background:#171b28;color:#fff;border:1px solid #343948;padding:7px;border-radius:6px}
.regional-box-preview button small{display:block;color:#bac6d5}

/* Permanent collection: pocket-sized pages with readable ownership and finish counts. */
.permanent-binder{display:flex!important;flex-direction:column;min-height:0;gap:10px}
.binder-overview{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 14px;background:#161d2b;border:1px solid #344255;border-radius:12px;font-size:11px;color:#aebbcf}
.binder-overview b{color:#f2eee7;font-size:15px}.binder-overview progress{width:100%;height:4px;accent-color:#9bd9ce}
.binder-filter-bar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex-shrink:0}
.binder-filter-bar input{grid-column:span 3}.binder-filter-bar input,.binder-filter-bar select{min-width:0;width:100%;background:#171e2b;border:1px solid #3b4657;border-radius:7px;color:#eceef5;font:inherit;font-size:11px;padding:9px}
.permanent-binder .exp-journal-grid{flex:1;min-height:0;overflow-y:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(160px,1fr));gap:9px}
.permanent-binder .binder-entry{display:flex;flex-direction:column;min-height:0;padding:7px;border:1px solid color-mix(in srgb,var(--rarity) 45%,#242c39);border-radius:10px;background:linear-gradient(155deg,#202b3c,#101621);overflow:hidden;text-align:left}
.binder-card-art{position:relative;min-height:70px;flex:1;width:100%;overflow:hidden;border-radius:6px}.binder-card-art>.art,.binder-card-art .foil-art,.binder-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.binder-entry.is-missing .binder-card-art img{filter:grayscale(1);opacity:.32}.binder-copy-count{position:absolute;bottom:5px;right:5px;padding:4px 6px;background:#080c16ed;color:#fff;border:1px solid #67748a;border-radius:5px;font-size:10px;font-weight:800;z-index:3}
.permanent-binder .binder-entry b{font-size:11px;line-height:1.2;margin-top:6px;white-space:normal}.permanent-binder .binder-entry small{font-size:9px;margin-top:3px;color:var(--rarity)}.binder-editions{font-size:8px;color:#b9c7d9;margin-top:3px}.binder-inspect-count{font-size:11px;color:#c6d7e8;text-align:center}
@media(min-width:700px){.binder-filter-bar{grid-template-columns:2fr repeat(5,minmax(0,1fr))}.binder-filter-bar input{grid-column:auto}.permanent-binder .exp-journal-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(150px,1fr)}}
@media(max-height:500px){.permanent-binder{gap:5px}.binder-overview{padding:5px 10px}.binder-overview progress{display:none}.binder-filter-bar input,.binder-filter-bar select{padding:5px}.permanent-binder .exp-journal-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:minmax(145px,1fr)}}

/* Full artwork beneath a soft readable scrim, shared by the hand and its
   animated copies. Ghost White uses the same layout with a pale scrim. */
.game-battle .hand .card-face .card-portrait,
.drag-ghost .card-face .card-portrait,
.flying-card .card-face .card-portrait,
.burning-card .card-face .card-portrait{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.game-battle .hand .card-face .card-copy,
.drag-ghost .card-face .card-copy,
.flying-card .card-face .card-copy,
.burning-card .card-face .card-copy{position:absolute;inset:auto 0 0;width:100%;height:auto;min-height:104px;padding:22px 7px 7px;background:linear-gradient(180deg,rgba(8,16,24,0) 0%,rgba(8,16,24,.48) 18%,rgba(8,16,24,.78) 45%,rgba(8,16,24,.9) 100%);color:#f5f8fa;text-shadow:0 1px 2px #000a;border:0;box-shadow:none}
.game-battle .hand .card-face:not(.ghost-white-face) .card-copy strong,
.drag-ghost .card-face:not(.ghost-white-face) .card-copy strong{color:#fff}
.game-battle .hand .card-face:not(.ghost-white-face) .card-copy :is(p,.card-tribe-line,.card-synergy-hint),
.drag-ghost .card-face:not(.ghost-white-face) .card-copy :is(p,.card-tribe-line,.card-synergy-hint){color:#e6edf2}
.game-battle .unit-slot .unit-caption{background:linear-gradient(0deg,rgba(8,16,24,.88),rgba(8,16,24,.5) 55%,rgba(8,16,24,0));text-shadow:0 1px 3px #000b}

/* Ghost editions for every unit retain their recognizable illustration. */
.ghost-white-treatment{position:relative;overflow:hidden;background:#fff}.ghost-white-treatment>.art{filter:grayscale(1) brightness(1.45) contrast(.8)}.ghost-white-treatment::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#ffffff30 0 23%,#b4a0ff48 23% 29%,transparent 29% 62%,#8fe8f540 62% 68%,#fff3 68%);mix-blend-mode:screen}.ghost-white-treatment .foil-spectrum{opacity:.42}