#app #life.active #person.nativeDeck .heroCard>#tap{position:absolute!important;top:auto!important;bottom:40px!important;left:22px!important;right:22px!important;transform:none!important;width:calc(100% - 44px)!important;height:42px!important;min-height:42px!important;max-width:none!important;margin:0!important;padding:7px!important;z-index:20!important;font-size:15px!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:5px!important;touch-action:manipulation}
#seasonBanner{order:1;position:relative;display:flex;align-items:center;gap:10px;flex:0 0 48px;min-height:48px;height:48px;margin:0 12px;padding:7px 12px;width:calc(100% - 24px);border:1px solid #9e805a;border-radius:14px;color:#ffe5b0;background:radial-gradient(ellipse at 80% 10%,#71509066,transparent 70%),linear-gradient(115deg,#251d36,#161c2c);text-align:left;overflow:hidden;cursor:pointer}
#seasonBanner small{display:block;font:700 8px/1.4 system-ui;letter-spacing:1.2px;color:#c8abd9}#seasonBanner b{font:700 11px/1.4 system-ui}#seasonBanner strong{margin-left:auto;font-size:25px}.seasonEmblem{font-size:29px;color:#f5cd89}
body:has(#cats.active) #seasonBanner{display:none}
#app #collection.active>.pageTitle{display:none!important}
#app #collection.active #catsGrid{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;grid-template-columns:none!important;padding:0!important;margin:0!important;height:auto!important;overflow:visible!important}
#app #collection.active #catsGrid>.journey,#app #collection.active .exchange{width:100%!important;max-width:none!important;min-width:0!important}
#app #tasks.page.active{display:block!important;position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0 0 20px!important;overflow-y:auto!important;overflow-x:hidden!important}
.journey{font:14px/1.45 system-ui,sans-serif;color:#eeeefa;max-width:720px;margin:0 auto;padding-bottom:14px}.journey *{box-sizing:border-box;min-width:0}.journey h2,.journey h3,.journey p{margin:0}.journey h2{font-size:26px;line-height:1.16;letter-spacing:-.7px}.journey h3{font-size:15px}.journey p{color:#a9b4ce;font-size:12px;margin:6px 0}.journey small{font-size:9px;letter-spacing:1.1px;color:#cbb08c}.journey button{position:static;width:auto;height:auto;min-height:40px;transform:none;border:1px solid #45425a;border-radius:12px;background:#222539;color:#e8e9f5;font:600 12px/1.25 system-ui;padding:10px;cursor:pointer;box-shadow:none;white-space:normal;touch-action:manipulation}.journey button:disabled{opacity:.45;cursor:default}.journey button.primary{background:linear-gradient(120deg,#f3d290,#c69654);color:#201710}.journey button.selected{border-color:#bd97ee;background:#463354;color:#f2dfff}.journey button:focus-visible{outline:2px solid #e1b9ff;outline-offset:2px}
.j-hero,.j-album-head{padding:20px;border:1px solid #65516f;border-radius:22px;background:radial-gradient(circle at 100% 0%,#6f489380,transparent 65%),linear-gradient(130deg,#25213d,#111c2c);position:relative;overflow:hidden}.j-hero h2{margin:10px 0}.j-hero p{max-width:290px}.j-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 10px}.j-stats b{font-size:23px;color:#f5d495}.j-stats span{font-size:10px;color:#b5c2d8}.j-progress{height:6px;border-radius:10px;background:#ffffff13;overflow:hidden}.j-progress i{display:block;height:100%;background:linear-gradient(90deg,#d2a763,#a181ed,#72cecc);border-radius:inherit;transition:width .45s ease}
.j-chests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}.j-chests button{display:flex;flex-direction:column;align-items:center;gap:4px;background:linear-gradient(160deg,#2b2940,#141c2c);opacity:1}.j-chests button:disabled{color:#9297af}.j-chests span{font-size:30px;color:#cfb588}.j-chests b{font-size:11px}.j-chests small{font-size:9px;letter-spacing:0}.j-chests .ready{border-color:#f0ca82}
.j-tabs{display:flex;overflow:auto;gap:6px;padding:8px 0;scrollbar-width:none}.j-tabs button{flex:0 0 auto;min-height:36px;font-size:11px}.j-section{padding:12px 2px}.j-section>b{font-size:15px}.j-list{display:grid;gap:10px}.j-quest{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;background:linear-gradient(125deg,#20263a,#111b2a);border:1px solid #394158;border-radius:18px;padding:15px}.j-quest.ready{border-color:#ac935a}.j-quest.claimed{opacity:.6}.j-icon{display:grid;place-items:center;align-self:start;width:40px;height:44px;border-radius:12px;background:#ffffff08;color:#e2c997;font-size:24px}.j-body h3{margin:4px 0}.j-body .j-progress{margin-top:12px}.j-meta{display:flex;justify-content:space-between;gap:7px;font-size:10px;margin:6px 0 10px;color:#aab6cf}.j-meta b{color:#f4d299}.j-body>button{width:100%;min-height:36px;font-size:11px}.j-lab{border:1px dashed #47506a;border-radius:14px;padding:14px;margin-top:16px;color:#aab6cf}.j-lab summary{cursor:pointer;font-size:12px}.j-lab-actions{display:flex;flex-wrap:wrap;gap:6px}.j-lab-actions button{font-size:10px;flex:1 1 100px}
.j-album-head{margin-bottom:10px}.j-album-head h2{margin-top:7px}.j-album-covers{display:grid;gap:12px}.journey button.j-cover{display:grid;grid-template-columns:95px minmax(0,1fr);width:100%;align-items:center;gap:12px;padding:12px;text-align:left;border-color:var(--accent);background:linear-gradient(120deg,#272a40,#101b29);border-radius:18px}.j-cover img{width:95px;height:126px;object-fit:contain}.j-cover h3{font-size:18px;margin:7px 0;color:#fff}.j-cover small{font-size:8px;color:var(--accent)}.j-cover .j-progress{margin-top:12px}.j-album-detail{border:1px solid var(--accent);background:#151d2eed;border-radius:18px;padding:18px;margin-top:12px}.j-album-detail h2{font-size:24px;margin-top:7px}.j-album-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:16px 0}.j-album-slots>div{padding:10px;border:1px solid #3a435a;border-radius:12px;background:#101727;text-align:center}.j-album-slots img{display:block;width:100%;height:140px;object-fit:contain}.j-album-slots b{font-size:11px}.j-album-slots .locked img{filter:grayscale(1);opacity:.18}.j-album-detail>button{width:100%}
#catsGrid .ex-album-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}#catsGrid .ex-album-grid span{overflow-wrap:anywhere}#catsGrid .ex-album{margin:12px 0}
@media(max-height:720px){#seasonBanner{height:39px;min-height:39px;flex-basis:39px}#seasonBanner b{font-size:10px}.seasonEmblem{font-size:23px}}
@media(prefers-reduced-motion:no-preference){#seasonBanner:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#fff2 50%,transparent 65%);transform:translateX(-120%);animation:season-sheen 8s ease-in-out infinite}.j-chests .ready span{animation:chest-glow 2.4s ease-in-out infinite}@keyframes season-sheen{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}@keyframes chest-glow{50%{filter:drop-shadow(0 0 8px #f4ca83);transform:translateY(-2px)}}}
@media(prefers-reduced-motion:reduce){.j-progress i{transition:none}}

/* v509: compact HUD without a promotional row; the card stage receives the freed height. */
body:has(#life.active,#depot.active,#market.active,#collection.active,#tasks.active) #app {gap:6px!important}
body:has(#life.active,#depot.active,#market.active,#collection.active,#tasks.active) #app>header {flex:0 0 46px!important;height:46px!important;min-height:46px!important;margin:0!important}
#app #life.page.active {gap:6px!important}

/* v510: return 26px of HUD height to the Cats card stage. */
body:has(#life.active) #app > section.money.economy4 {
 flex:0 0 44px!important;height:44px!important;min-height:44px!important;
 padding:4px!important;border-radius:18px!important;
}
body:has(#life.active) #app > section.money.economy4 > .resCell {
 display:flex!important;flex-direction:column!important;justify-content:center!important;gap:2px!important;
 height:100%!important;min-height:0!important;padding:0 3px!important;
}
body:has(#life.active) #app > section.money.economy4 .resLabel {
 font-size:8px!important;line-height:10px!important;letter-spacing:1px!important;margin:0!important;
}
body:has(#life.active) #app > section.money.economy4 .currencyValue {
 height:22px!important;min-height:0!important;line-height:22px!important;margin:0!important;
}
body:has(#life.active) #app > section.money.economy4 .economyIcon {
 width:22px!important;height:22px!important;max-width:22px!important;max-height:22px!important;object-fit:contain!important;
}
#app #life.active > .cardProgress {
 flex:0 0 32px!important;height:32px!important;min-height:32px!important;
 padding:4px 12px!important;border-radius:14px!important;
}
#app #life.active .cardProgress > div:first-child {height:16px!important;min-height:0!important;line-height:16px!important;margin:0 0 4px!important}
#app #life.active .cardProgress > div:first-child b,#app #life.active #cardTapText {font-size:10px!important;line-height:16px!important}
#app #life.active #cardLevelValue {font-size:14px!important;line-height:16px!important}
#app #life.active .cardProgress .cardBar {height:4px!important;min-height:4px!important;margin:0!important}

/* v511: taller showcase and a contained, non-interactive foil finish. */
body:has(#life.active) #app {gap:4px!important}
body:has(#life.active) #app > header {flex-basis:44px!important;height:44px!important;min-height:44px!important}
body:has(#life.active) #app > section.money.economy4 {flex-basis:40px!important;height:40px!important;min-height:40px!important;padding:2px 4px!important}
#app #life.page.active {gap:4px!important}
#app #life.active > .cardProgress {flex-basis:28px!important;height:28px!important;min-height:28px!important;padding:4px 12px!important}
#app #life.active .cardProgress > div:first-child {height:14px!important;line-height:14px!important;margin-bottom:2px!important}
#app #life.active .cardProgress > div:first-child b,#app #life.active #cardTapText,#app #life.active #cardLevelValue {line-height:14px!important}
#app #life.active > .stage {gap:4px!important}
#app #life.active #person.nativeDeck .heroCard {isolation:isolate;--foil:#dfebff}
#app #life.active #person.nativeDeck .heroCard.uncommon {--foil:#8bffc6}
#app #life.active #person.nativeDeck .heroCard.epic {--foil:#d9adff}
#app #life.active #person.nativeDeck .heroCard.legendary {--foil:#ffe8a2}
#app #life.active #person.nativeDeck .heroCard.mythic {--foil:#ffaccc}
#app #life.active #person.nativeDeck .cardFoil {
 position:absolute;inset:4px;border-radius:30px;overflow:hidden;pointer-events:none;z-index:8;
 background:linear-gradient(145deg,#ffffff0b,transparent 25%,transparent 70%,#ffffff06);
}
#app #life.active #person.nativeDeck .cardFoil::after {
 content:'';position:absolute;inset:-25% -60%;pointer-events:none;
 background:linear-gradient(115deg,transparent 36%,#80eaff08 41%,#e3ccff24 44%,#fff8 47%,#fff2 49%,#ffe8b222 52%,transparent 57%);
 transform:translate3d(-70%,0,0);opacity:0;
}
#app #life.active #person.nativeDeck .cardFoilRim {
 position:absolute;inset:4px;border-radius:30px;pointer-events:none;z-index:9;
 border:1px solid var(--foil);opacity:.26;
 box-shadow:inset 0 0 10px -5px var(--foil),0 0 7px -4px var(--foil);
}
#app #life.active #person.nativeDeck .cardStatsTop,
#app #life.active #person.nativeDeck .heroCard>.rarity,
#app #life.active #person.nativeDeck .heroCard>.cardInfo {z-index:12!important}
@media(prefers-reduced-motion:no-preference) {
 #app #life.active #person.nativeDeck .heroCard.active .cardFoil::after {animation:dynasty-foil 7s cubic-bezier(.35,0,.25,1) infinite;will-change:transform,opacity}
 #app #life.active #person.nativeDeck .heroCard.active .cardFoilRim {animation:dynasty-rim 4.6s ease-in-out infinite}
 @keyframes dynasty-foil {0%{transform:translate3d(-70%,0,0);opacity:0}8%{opacity:.8}37%{opacity:.65}48%{transform:translate3d(70%,0,0);opacity:0}100%{transform:translate3d(70%,0,0);opacity:0}}
 @keyframes dynasty-rim {0%,100%{opacity:.22}50%{opacity:.7}}
}