/* The Pale Maw — presentation pass. This layer adds depth without crowding the art. */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-settle:cubic-bezier(.2,.8,.2,1);--rim:#cbe2e51c;--depth:0 16px 48px #02091250,0 2px 8px #02091238;--surface-top:#23313c;--surface-bottom:#141d27}
:is(button,a,input,select){-webkit-tap-highlight-color:transparent}
:is(button,a){touch-action:manipulation}
:is(.exp-button,.exp-menu-item,.end-turn,.ghost,.icon-button,.exp-icon-button,.pack-primary,.pack-use,.workshop-primary,.preference-toggle){transition:background-color 160ms,border-color 160ms,color 160ms,box-shadow 180ms,opacity 160ms;backface-visibility:hidden}
:is(.exp-button,.end-turn,.pack-primary,.workshop-primary):not(:disabled){box-shadow:inset 0 1px #ffffff26,0 3px 0 #020b1226,0 5px 14px #0002}
:is(.exp-button.primary,.end-turn,.pack-primary,.workshop-primary):not(:disabled){background:linear-gradient(170deg,#b2eee2,#94dcd2);border:1px solid #c9fff055;color:#102e33;text-shadow:0 1px #ffffff26}
:is(.exp-button.primary,.end-turn,.pack-primary,.workshop-primary):disabled{box-shadow:none}
:is(.exp-button.secondary,.ghost,.exp-menu-item,.preference-toggle,.exp-icon-button,.icon-button){background:linear-gradient(155deg,#23303b,#18212b);border-color:#b9d1d328;box-shadow:inset 0 1px #ffffff06,0 3px 12px #0002}
:is(.exp-button,.ghost,.end-turn,.pack-primary,.workshop-primary):active:not(:disabled){box-shadow:inset 0 1px 4px #0a1c2528}
:is(button,a,input,select):focus-visible{outline:2px solid #c6fff0;outline-offset:3px;box-shadow:0 0 0 5px #91dccc22}
:is(.exp-pager,.legacy-pager) button:disabled{opacity:.3}
button:disabled{filter:none}
@media(hover:hover) and (pointer:fine){
 :is(.exp-button,.ghost,.exp-menu-item,.icon-button,.exp-icon-button,.pack-use,.preference-toggle):hover:not(:disabled){border-color:#b4e4dc70;box-shadow:inset 0 1px #ffffff13,0 5px 18px #0003}
 :is(.exp-button.primary,.end-turn,.pack-primary,.workshop-primary):hover:not(:disabled){background:linear-gradient(170deg,#caf7e9,#aae9dd);box-shadow:0 5px 20px #86d6c51c,inset 0 1px #fff5}
 .exp-menu-item:hover .exp-icon{color:var(--mint);translate:0 -2px}
 .exp-hero-option:hover img,.exp-journal-card:hover img{scale:1.04}
}
.exp-menu-item .exp-icon,.exp-hero-option img,.exp-journal-card img{transition:scale 280ms var(--ease-out),translate 220ms var(--ease-out),color 160ms}

/* Ship: two broad light fields, one slow movement, no new visual clutter. */
.exp-hub{isolation:isolate;position:relative}
.exp-hub:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 12% 38%,#07162112,transparent 65%),linear-gradient(90deg,#07131c70,transparent 75%)}
.exp-hub:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 77% 21%,#dddeb018,transparent 43%);animation:havenLight 12s ease-in-out infinite alternate}
.exp-title-scene h1{text-shadow:0 4px 0 #06131b18,0 12px 48px #06131b80;letter-spacing:-.055em}
.exp-title-scene>.exp-eyebrow{color:#b8d4d6}
.exp-main-nav{gap:9px}
.exp-main-nav .exp-menu-item{border-color:#cce3e628;background:linear-gradient(125deg,#162731eb,#101c27e8)}
.exp-cycle{color:#c3d2d1;opacity:.7;letter-spacing:.14em}
.exp-title-actions .primary{position:relative;overflow:hidden}
.exp-title-actions .primary:after{content:"";position:absolute;inset:-100% -60%;background:linear-gradient(100deg,transparent 43%,#ffffff20 50%,transparent 57%);transform:translateX(-60%);animation:journeyShine 8s 2s ease-in-out infinite;pointer-events:none}
@keyframes havenLight{from{opacity:.45}to{opacity:1}}
@keyframes journeyShine{0%,70%{transform:translateX(-60%)}90%,100%{transform:translateX(60%)}}

/* Hero and upgrade stages have one focal point and consistent framing. */
.exp-hero-stage,.practice-hero{border:1px solid var(--rim);background:radial-gradient(ellipse at 28% 40%,color-mix(in srgb,var(--hero-color,#98e1d9) 10%,transparent),transparent 65%),linear-gradient(145deg,#182834d9,#0b1721eb);box-shadow:var(--depth)}
.exp-hero-large,.practice-portrait{position:relative;isolation:isolate}
.exp-hero-large:after,.practice-portrait:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #ebf8f11a;background:linear-gradient(0deg,#08132144,transparent 30%)}
.exp-hero-details h1,.practice-copy h1{text-shadow:0 3px 15px #0003}
.exp-hero-option[aria-pressed=true],.exp-hero-option.selected,.exp-selected-hero{border-color:#aae3d7;box-shadow:0 0 0 2px #9ae0d21a,inset 0 1px #fff2}
.exp-selected-hero img{animation:partyJoin 260ms var(--ease-out)}
@keyframes partyJoin{from{opacity:.2;scale:.82}to{opacity:1;scale:1}}
.exp-upgrade-icon,.exp-summary-emblem{border:1px solid #dac79035;border-radius:28%;background:radial-gradient(circle at 40% 20%,#e6cf9e15,transparent 70%),#11222c;box-shadow:inset 0 1px #fff1,0 12px 45px #0003;color:#e7cf98}
.exp-ranks i{transition:background-color 300ms,box-shadow 300ms}
.exp-ranks i.earned{background:var(--mint);box-shadow:0 0 9px #a2e2d42e}
.exp-summary-party img{box-shadow:0 4px 15px #0004;border:1px solid #dae6e42b}
.exp-summary-stats>span{border-top:1px solid #c1d6d32b;padding-top:12px}
.exp-summary-gems{font-variant-numeric:tabular-nums;text-shadow:0 0 30px #c2b0ee20}

/* Floating map furniture; terrain still runs to every edge underneath. */
.exp-map-heading,.exp-map-dock{background:linear-gradient(150deg,#0e1d27f5,#091720f2);border:1px solid #c0d9da24;box-shadow:inset 0 1px #ffffff05,0 8px 28px #04131e35}
.exp-path-choice{border:1px solid #b7ced32b;background:linear-gradient(145deg,#24313c,#1a2430);transition:border-color 160ms,background-color 160ms}
.exp-path-choice .exp-icon{filter:drop-shadow(0 2px 3px #0002)}
.exp-party-card{border:1px solid #bbd7d512;background:linear-gradient(145deg,#1d2b35,#17212c)}
.exp-party-health{box-shadow:inset 0 1px 3px #0004}
.exp-party-health i{background:linear-gradient(90deg,#77c3b9,#b0e6d9)}
.exp-tile.current{filter:drop-shadow(0 3px 8px #07283050)}
.exp-map-tools .exp-icon-button{box-shadow:0 4px 15px #04131e30,inset 0 1px #ffffff08}

/* Dialog depth, calm illustration framing, and legible, responsive controls. */
.exp-modal:not(.modal-reward):not(.modal-shopPack),.utility-modal,.modal.inspection,.modal.collection-modal,.modal.expansion-modal{border-color:#c4dbdf2b;box-shadow:inset 0 1px #ffffff0d,0 24px 70px #0208108c;background-color:#111d27}
.exp-illustrated .exp-dialog-body{background:linear-gradient(160deg,#18252e,#101820)}
.exp-dialogue-box p{text-wrap:pretty;line-height:1.55}
.overlay:not(.pack-overlay){background-color:#050b14c7}
.overlay>.modal:not(.booster-modal):not(.deck-modal){animation:utilityEnter 260ms var(--ease-out) both}
@keyframes utilityEnter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.preference-toggle[aria-pressed=true]{border-color:#9edacf42;background:linear-gradient(145deg,#22383f,#1b2d36)}
.preference-slider{box-shadow:inset 0 2px 8px #0002}
.preference-slider input{height:30px}
.toast,.exp-receipt{border:1px solid #b5e8d754;background:#10262bf5;box-shadow:0 8px 28px #010b164d,inset 0 1px #fff1;white-space:normal;text-wrap:pretty}
.toast{animation:utilityEnter 220ms var(--ease-out) both}

/* Deck workshop: separate outgoing and incoming cards without adding labels. */
.workshop-compare-card{box-shadow:0 5px 20px #0003}
.workshop-comparison .workshop-compare-card:first-child{border-color:#d6979445}
.workshop-comparison .workshop-compare-card:first-child>small:first-child{color:#ddaaa3}
.workshop-comparison .workshop-compare-card:last-child{border-color:#a1dfcd70;background:linear-gradient(160deg,#223d43,#182b37)}
.workshop-tile{box-shadow:0 2px 5px #0002,inset 0 1px #fff1}
.workshop-tile:disabled{opacity:.35;translate:none}
.workshop-footer{background:linear-gradient(0deg,#111d27,transparent);padding-bottom:2px}
.workshop-heroes [aria-pressed=true]{box-shadow:inset 0 1px #d8fff222,0 0 0 2px #b3eee514}
.workshop-incoming{padding:7px 9px;border:1px solid #b2e8d12a;background:#87cbbb09;border-radius:10px}

/* Pack lighting lives behind the full card. Text and controls stay still. */
.pack-reveal-stage{isolation:isolate;position:relative}
.pack-reveal-stage:before{content:"";position:absolute;inset:5% -14% 20%;background:radial-gradient(ellipse,#84c2ba12,transparent 70%);z-index:-1;pointer-events:none}
.pack-pull{position:relative}
.pack-card-surface{box-shadow:0 18px 40px #0006,0 2px 6px #0005,inset 0 0 0 1px #ffffff20}
.pack-pull.special-pull .pack-card-surface{box-shadow:0 18px 40px #0006,0 0 22px color-mix(in srgb,var(--rarity) 13%,transparent)}
.pack-pull.just-revealed{animation:polishedReveal 470ms var(--ease-out) both}
.pack-pull.just-revealed.special-pull{animation:polishedRareReveal 700ms var(--ease-out) both}
.pack-pull.just-revealed .pack-card-surface:after{content:"";position:absolute;inset:-30% -70%;background:linear-gradient(112deg,transparent 40%,#f0fff42b 49%,transparent 58%);pointer-events:none;transform:translateX(-65%);animation:revealLight 650ms 120ms ease-out both;z-index:3}
.pack-pull-meta{font-weight:600;text-shadow:0 2px 8px #0003}
.pack-card-surface .card-copy{background:linear-gradient(180deg,transparent,#142330f2 22%,#101d2bf7 100%)}
.pack-use{transition:background-color 180ms,border-color 180ms}
.pack-summary .pack-heading h2{letter-spacing:-.025em}
.pale-booster{box-shadow:0 22px 38px #0006,0 3px 7px #0005;transition:rotate 250ms var(--ease-out),box-shadow 250ms}
.pale-booster:active{rotate:-1deg}
@keyframes polishedReveal{from{opacity:0;translate:0 18px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes polishedRareReveal{0%{opacity:0;translate:0 22px;scale:.92}60%{opacity:1;translate:0 -3px;scale:1.015}100%{translate:0 0;scale:1}}
@keyframes revealLight{from{transform:translateX(-65%)}to{transform:translateX(65%)}}

/* Combat is retained in the DOM: these transitions now survive every event. */
.arena{box-shadow:inset 0 1px #e0f6ff12,0 12px 30px #0003}
.arena.boss-arena{border-color:#c4a1ba50;box-shadow:inset 0 0 0 1px #4f253e20,0 10px 35px #0004}
.unit-slot{box-shadow:inset 0 1px #e5f5fa12,0 3px 8px #0002;transition:border-color 150ms,box-shadow 160ms}
.unit-slot.occupied{border-color:#c8d9e837}
.unit-portrait:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#fff04,transparent 20%,transparent 75%,#00162320)}
.unit-caption{text-shadow:0 2px 6px #030b13}
.unit-slot .mini-health{height:3px;background:#1d2234}
.unit-slot .mini-health i{transition:width 280ms var(--ease-out);background:linear-gradient(90deg,#6fceba,#c1edcf)}
.hero-health .health{position:relative;isolation:isolate;box-shadow:inset 0 1px 3px #0004}
.hero-health .health i{position:relative;z-index:1;transition:width 280ms var(--ease-out)}
.hero-health .health .health-echo{position:absolute;inset:0 auto 0 0;background:#f5d7ad90;z-index:0;transition:width 650ms 100ms var(--ease-out)}
.support-slot{transition:background-color 180ms,border-color 180ms,color 180ms}
.support-slot.armed{box-shadow:inset 0 1px #bdfff014,0 1px 7px #0002}
.flame{transition:color 180ms,opacity 180ms,scale 220ms var(--ease-out)}
.flame.lit{filter:drop-shadow(0 0 3px #9be3d025)}
.combat-phase-rail li{transition:color 180ms,border-color 180ms,background-color 180ms}
.battle-divider{border-radius:8px;position:relative;z-index:3;isolation:isolate}
.battle-divider>div{padding-block:1px}
.arena[data-phase=enemyAttack] .battle-divider,.arena[data-phase=enemyPlay] .battle-divider{background:linear-gradient(90deg,transparent,#5d314315,transparent)}
.arena[data-phase=play] #phase-label{color:#c1e8d7}
.arena[data-phase=enemyPlay] #phase-label,.arena[data-phase=enemyAttack] #phase-label{color:#f0b9c8}
.unit-slot.stunned .unit-portrait{filter:saturate(.6)}
.game-battle .hand .battle-card{box-shadow:0 7px 16px #0006;transition:border-color 160ms,box-shadow 160ms}
.game-battle .hand .battle-card.selected{box-shadow:0 0 0 2px #c6fff060,0 10px 24px #0007}
.game-battle .selection-help{transition:background-color 180ms}
.game-battle .end-turn:disabled{background:#263940;color:#b4c5c880}
.phase-banner{background:linear-gradient(90deg,transparent,#0c1b27f2 12%,#0c1b27f2 88%,transparent);box-shadow:0 12px 45px #0002}
.float-text{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.float-text.buff,.float-text.block,.float-text.trigger{border:1px solid #d1e5e233;box-shadow:0 3px 10px #0003}
.result{background:radial-gradient(ellipse at 50% 0,#cab28418,transparent 65%),#101b24}
.result h1{color:#efd8a5;text-shadow:0 3px 0 #6d50382b,0 0 40px #f5d49718}
.battle-intro .intro-fighter>div{box-shadow:inset 0 1px #fff3,0 15px 35px #0005}
.battle-intro .intro-fighter img{animation:introPortrait 2.4s ease-out both}
.battle-intro.boss{background:radial-gradient(ellipse at 78% 38%,#39202e80,transparent 60%),#0a1524fa}
.coin-flip{background:radial-gradient(ellipse at 50% 42%,#23404755,transparent 55%),#080e18f5}
.coin-flip.landed .coin-result{animation:coinVerdict 280ms var(--ease-out) both}
@keyframes introPortrait{from{scale:1.04}to{scale:1}}
@keyframes coinVerdict{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.juice-layer{position:fixed;inset:0;z-index:1300;pointer-events:none;overflow:hidden;contain:strict}
.juice-mote{position:absolute;display:block;width:4px;height:4px;background:var(--mote);border-radius:1px;box-shadow:0 0 5px var(--mote);pointer-events:none}
/* Pause decoration off-screen. Calm keeps the same hierarchy without spatial motion. */
body.is-paused *,body.is-paused *:before,body.is-paused *:after{animation-play-state:paused!important}
body.calm-motion *,body.calm-motion *:before,body.calm-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-height:550px){.exp-title-scene{gap:10px}.exp-summary-stats>span{padding-top:5px}.workshop-incoming{padding:3px 7px}.exp-summary-emblem{box-shadow:none}.juice-mote{width:3px;height:3px}}

.ui-departure,.ui-departure *{pointer-events:none!important;animation:none!important;transition:none!important}
@media(hover:none){.workshop-tile:hover{translate:0}.exp-journal-card:hover{transform:none}}
.supply-button{position:relative;min-width:44px;min-height:44px}
.supply-button small{position:absolute;right:0;bottom:0;background:#71f6c6;color:#10202a;border-radius:8px;min-width:14px;font:700 10px/14px system-ui}
.satchel-items{display:grid;gap:12px;margin-top:16px}
.satchel-item{padding:14px;border:1px solid #c4dbdf2b;border-radius:12px;background:#09151b}
.satchel-item h3{display:flex;align-items:center;gap:8px;margin:0;font-size:17px}
.satchel-item h3 svg{width:22px;height:22px}
.satchel-item .exp-button{width:100%;min-height:44px}
.satchel-item small{display:block;margin-top:8px;color:#c0ced6}
.exp-shop-item .exp-button{min-height:44px}
.blood-ritual{margin-top:20px;padding:16px;border:1px solid #9b4e55;border-radius:14px;background:linear-gradient(145deg,#301820,#101820);text-align:left}
.blood-ritual h3{color:#f1b2b0;font-size:19px}
.blood-ritual .exp-button{width:100%;min-height:44px;margin-top:8px}
.dread-active .arena{border-color:#9b4e55;box-shadow:inset 0 0 45px #65152433}
.dread-active #phase-hint{color:#f1b2b0}
.event-hero-label{display:grid;gap:8px;text-align:left;font-size:13px;margin:16px 0;color:#d7e1e8}
.event-hero-label select{width:100%;min-height:44px;padding:10px;border:1px solid #c4dbdf44;border-radius:10px;background:#111d27;color:#eaf1f6}
.traveller-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.traveller-offer{min-width:0;padding:12px;border:1px solid #d0a6c244;border-radius:14px;background:#101b25;display:flex;flex-direction:column;align-items:stretch}
.traveller-card-art{height:140px;width:100%;border-radius:9px;overflow:hidden;background:#14212c;margin-bottom:10px}
.traveller-card-art img,.traveller-card-art svg,.traveller-card-art .foil-art{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:cover}
.traveller-offer>small{font-size:9px;letter-spacing:1px;color:#d6b4e8}
.traveller-offer h3{font-size:15px;margin:8px 0 0;overflow-wrap:anywhere}
.traveller-offer p{font-size:11px!important;line-height:1.5!important;margin:8px 0 12px!important;flex:1}
.traveller-offer .exp-button{min-height:44px;width:100%;padding:10px 5px}
.traveller-offer .exp-link{min-height:40px}
.boss-card-prize{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:14px;border:1px solid #d6b4e866;border-radius:14px;background:linear-gradient(120deg,#33233e,#15222d);width:100%;text-align:left}
.boss-card-prize>span{color:#e5c7ff}.boss-card-prize>div{flex:1;min-width:160px}
.boss-card-prize small{font-size:9px;letter-spacing:1px;color:#e5c7ff}.boss-card-prize h3{font-size:17px;margin:4px 0}
.boss-card-prize p{font-size:11px;margin:0!important}.boss-card-prize .exp-button{min-height:44px}
.exp-modal.modal-boss-card-prize{overflow-y:auto;overflow-x:hidden;max-height:100%;justify-content:flex-start}
.exp-modal.modal-boss-card-prize>.exp-button{min-height:44px;flex-shrink:0}
.exp-modal.exp-illustrated:is(.modal-traveller,.modal-whiteout,.modal-toll,.modal-cursed-cache,.modal-bone-orchard){grid-template-rows:clamp(70px,16dvh,120px) minmax(0,1fr);align-items:stretch}
.exp-modal:is(.modal-traveller,.modal-whiteout,.modal-toll,.modal-cursed-cache,.modal-bone-orchard)>.exp-dialog-body{align-self:stretch;height:100%;align-items:stretch;justify-content:flex-start;overflow-y:auto;overflow-x:hidden}
.exp-modal:is(.modal-traveller,.modal-whiteout,.modal-toll,.modal-cursed-cache,.modal-bone-orchard)>.exp-location-art{align-self:stretch;height:100%}
.exp-modal:is(.modal-traveller,.modal-whiteout,.modal-toll,.modal-cursed-cache,.modal-bone-orchard) .exp-dialog-body>.exp-button{min-height:44px}
@media(max-width:400px){.traveller-offers{gap:8px}.traveller-offer{padding:9px}.traveller-card-art{height:110px}.traveller-offer h3{font-size:13px}}