@import url('./factions-preview.css');
/* Shared borderless game skin. Keep focus outlines; artwork and SVG strokes stay intact. */
body:has(#app .workspace){
 --game-popup-bg:#122e3b;
 --game-popup-raised:#1c4355;
 --game-health-track:#172c30bf;
 --game-health-fill:#c9344b;
 --game-health-text:#ffe6ad;
 --bg:#102631;
 --panel:#1b3743;
 --panel2:#254651;
 --surface:#1b3743;
 --surface-inner:#193640;
 --surface-input:#15303b;
 --surface-raised:#1c4355;
 --surface-hover:#2c5260;
 --surface-edge:transparent;
 --border:transparent;
 --game-sheet:#122e3b;
 --game-card:#1c4355;
 --game-card-alt:#284b56;
 --game-inset:#14303b;
 --game-control:#1c4355;
 --gather-card-fill:linear-gradient(145deg,#24434e 0%,#1d3945 58%,#1a3440 100%);
 --gather-work-fill:linear-gradient(112deg,#16303a,#0e202b 80%);
 --gather-tile-fill:linear-gradient(145deg,#294b56,#1e3a45 88%);
 --muted:#acc0c6;
 --text:#e8f0f0;
}
body:has(#app .workspace) :is(#app,#modal,#toast,#low-health-warning,#objective-notice) *,
body:has(#app .workspace)>:not(script){border-width:0!important}
body:has(#modal) #modal *{border-width:0!important}

/* Cards lift from the canvas with a surface change instead of a hairline. */
#app:has(.workspace) :is(.panel,.activity-card,.gather-card,.craft-card,.quest-card,.skill-card,.skill-row,.equipment-slot,.inventory-item,.storage-view,.trader-item-card,.route-card,.achievement-card,.pet-card,.event-card,.daily-card,.building-card,.survivor-card){
 background-color:var(--game-card)!important;
 border-width:0!important;
}
#app:has(.workspace) #skills-content #gather-page .gather-card{box-shadow:0 5px 16px #06182130!important}
#app:has(.workspace) :is(.panel,.activity-card,.quest-card,.skill-card,.skill-row,.equipment-slot,.inventory-item,.building-card,.survivor-card){box-shadow:0 5px 16px #06182124,inset 0 1px #d6f0ed0b!important}
#app:has(.workspace) :is(.inventory-item,.equipment-slot,.skill-row,.quest-card,.pet-card):hover{background-color:var(--game-card-alt)!important}
#app:has(.workspace) :is(.storage-view,.inventory-grid,.storage-items,.storage-filters,.skills-tabs,.journal-toolbar,.journal-content){border-width:0!important}
#app:has(.workspace) .storage-view{background:transparent!important}
#app:has(.workspace) .storage-view .inventory-item{background:var(--gather-tile-fill)!important;box-shadow:inset 0 1px #d6f0ed0c!important}
#app:has(.workspace) .storage-view .inventory-item.has-storage-durability{background:var(--gather-tile-fill)!important;box-shadow:inset 0 1px #d6f0ed0c!important}
#app:has(.workspace) .storage-view .inventory-item.is-selected,
#app:has(.workspace) .storage-view .inventory-item[aria-selected="true"]{background:#315665!important;box-shadow:inset 0 0 0 2px #d6ad61!important}
#app:has(.workspace) :is(.leaderboard-panel,.record-board,.quest-roadmap,.trophy-room-banner,.pet-roster-banner){background:var(--gather-card-fill)!important;box-shadow:none!important}
#app:has(.workspace) :is(.gather-daily,.score-table th,.score-table .board-empty,.assignment-current,.resident-needs){background:var(--gather-tile-fill)!important;box-shadow:none!important}
#app:has(.workspace) :is(.beta-event,.news-page .news-empty,.news-page .news-editor){background:var(--gather-card-fill)!important;box-shadow:none!important}
#app:has(.workspace) :is(.victory-reward,.trader-shop .trader-offer-item){background:var(--gather-tile-fill)!important;box-shadow:none!important}
#app:has(.workspace) .trader-shop .trader-offer{background:var(--gather-card-fill)!important}

/* Available idle expeditions need a visible secondary action across every tier. */
body:has(#modal) #modal .expedition-tier-actions button[data-action="adventure-auto"]:not(:disabled){background:var(--surface-hover,#2c5260)!important;color:#e8f0f0!important;opacity:1;box-shadow:none!important}

/* Controls remain obvious against the lighter panels. */
#app:has(.workspace) :is(button,input,select,textarea,summary){border-width:0!important}
#app:has(.workspace) :is(input,select,textarea){background-color:var(--game-inset)!important}
#app:has(.workspace) button:not(.primary):not(.danger):not(.craft-preview-name):not(.work-item-name):not(.inventory-item):not(.garden-plot):not(.scene-facility){border-width:0!important}

/* Recommended and daily cards use filled labels, not outlined cards. */
#app:has(.workspace) #skills-content .activity-card.is-recommended,
#app:has(.workspace) #skills-content #gather-page .gather-card.is-daily{
 border-width:0!important;
 background:var(--gather-card-fill)!important;
 box-shadow:none!important;
}
/* A running gathering task needs its own clear state, even on a daily card. */
#app:has(.workspace) #skills-content #gather-page .gather-card.is-current{
 box-shadow:0 8px 24px #06182138!important;
}
#app:has(.workspace) #skills-content #gather-page .gather-card.is-current::after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 border:2px solid #91efb9;border-radius:inherit;
 box-shadow:inset 0 0 14px #4add9870;
 animation:gather-active-arrive .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes gather-active-arrive{from{opacity:0;transform:scale(.985);box-shadow:inset 0 0 0 #4add9800}to{opacity:1;transform:scale(1);box-shadow:inset 0 0 14px #4add9870}}
#app:has(.workspace) #skills-content :is(.recommendation-banner,.daily-quest-banner){
 display:inline-flex!important;
 align-items:center;
 width:max-content;
 max-width:calc(100% - 48px);
 padding:5px 9px!important;
 border-width:0!important;
 border-radius:6px!important;
 background:linear-gradient(135deg,#ffe084,#ffc85f)!important;
 color:#283239!important;
 box-shadow:0 2px 7px #0004!important;
 font-size:8px!important;
 font-weight:850!important;
 letter-spacing:.8px!important;
 line-height:1.15!important;
 transform:translateY(-50%)!important;
}
#app:has(.workspace) #skills-content #gather-page .gather-card :is(.recommendation-banner,.daily-quest-banner),
#app:has(.workspace) #skills-content #craft-page .craft-card .recommendation-banner{position:absolute!important;top:0!important;left:24px!important;right:auto!important;margin:0!important;z-index:7}
#app:has(.workspace) #skills-content #gather-page .gather-card .daily-quest-banner{background:linear-gradient(135deg,#a3f5be,#65daa1)!important;color:#123e30!important;box-shadow:0 2px 8px #3cc88a70,0 0 14px #63e5a555!important}
#app:has(.workspace) #skills-content #gather-page .gather-card:is(.is-recommended,.is-daily),
#app:has(.workspace) #skills-content #craft-page .craft-card.is-recommended{overflow:visible!important}
#app:has(.workspace) #skills-content #craft-page .craft-card.is-recommended{padding-top:20px!important}
#app:has(.workspace) #skills-content #gather-page .gather-list:has(.is-recommended,.is-daily),
#app:has(.workspace) #skills-content #craft-page .craft-list:has(.is-recommended){padding-top:14px!important}
#app:has(.workspace) #skills-content #gather-page .gather-list:has(.is-daily){padding-top:12px!important}
#app:has(.workspace) #skills-content #gather-page .gather-card.is-daily::before{inset:0;border-radius:inherit;opacity:.32}

/* Sheets and their internal sections share the Skills palette. */
#modal [role="dialog"][tabindex="-1"]:focus{outline:none}
body:has(#modal) #modal .modal{background:var(--game-sheet,#16313c)!important;border-width:0!important;box-shadow:0 22px 55px #020b1299!important}

body:has(#modal) #modal .loot-report .compact-expedition-report .expedition-result-actions{background:transparent!important}
body:has(#modal) #modal :is(.modal-fixed-head,.modal-scroll-body,.equipment-drawer,.storage-item-modal,.tonic-replace-dialog,.sale-sheet,.stats-dossier,.pet-roster){border-width:0!important}
body:has(#modal) #modal :is(.modal-scroll-shell,.modal-fixed-head,.modal-scroll-body,.equipment-drawer,.storage-item-modal,.tonic-replace-dialog,.sale-sheet,.stats-dossier,.pet-roster,.character-skills-drawer,.tool-detail-drawer){background:var(--game-sheet,#16313c)!important}
body:has(#modal) #modal .loadout-picker{background:transparent!important}
body:has(#modal) #modal :is(.panel,.equipment-slot,.item-popup-stock,.item-popup-art,.stats-card,.stats-stat,.loadout-item,.pet-card,.buff-card,.buff-empty,.supply-row,.modal-card,.pet-roster-banner,.craft-preview-facts>div,.armour-contributions>div){background:var(--gather-card-fill)!important;border-width:0!important;box-shadow:0 7px 18px #0003!important}
body:has(#modal) #modal :is(.stats-metric,.stats-set-card,.stats-amulet,.manual-supply,.pet-portrait){background:var(--gather-card-fill)!important;border-width:0!important;box-shadow:0 7px 18px #0003!important}
body:has(#modal) #modal .set-perk{background:var(--game-inset,#14303b)!important;border-width:0!important}
body:has(#modal) #modal :is(.resource-picker-slot:not([aria-pressed="true"]),.resource-picker-item:not([aria-pressed="true"]),.picker-current,.picker-unoccupied,.sale-total,.item-popup .durability,.food-popup-automatic,.smelt-item-detail){background:var(--gather-card-fill)!important;border-width:0!important}
body:has(#modal) #modal .storage-item-modal .item-popup :is(.item-popup-stock,.item-popup-copy>.durability){background:none!important;box-shadow:none!important;border-width:0!important}
body:has(#modal) #modal .return-loot .rewards>span{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
body:has(#modal) #modal :is(input,select,textarea){background-color:var(--game-inset,#14303b)!important;border-width:0!important}
body:has(#modal) #modal button{border-width:0!important}
body:has(#modal) #modal .modal-close{background:var(--game-sheet-close,#24424d)!important;color:#d4e2e2!important;border-width:0!important;box-shadow:none!important}
body:has(#modal) #modal .item-popup.craft-item-preview .item-popup-head{background:transparent!important;box-shadow:none!important;padding:0!important;margin-bottom:16px!important;border-radius:0!important;overflow:visible;align-items:center}
body:has(#modal) #modal .item-popup.craft-item-preview .item-popup-art{background:var(--gather-tile-fill)!important;box-shadow:inset 0 1px #d6f0ed0c!important;border-radius:13px}
@media(max-width:800px){body:has(#modal) #modal .item-popup.craft-item-preview .item-popup-art{height:64px}}
body:has(#modal) #modal .modal-close:hover{background:#2b4d59!important}
body:has(#modal) #modal .modal-close{display:grid!important;place-items:center!important;padding:0!important}
body:has(#modal) #modal .modal-close>svg{display:block;flex:none;width:18px;height:18px}
/* Bottom sheets use their normal close control; never show a top grab handle. */
body:has(#modal) #modal .app-sheet-handle{display:none!important}
body:has(#modal) #modal .modal:has(> .app-sheet-handle) .tools-drawer-grid .equipment-visual .item-art{background:var(--gather-tile-fill)!important;border-width:0!important;box-shadow:inset 0 1px #d6f0ed0c!important}
body:has(#modal) #modal :is(button,.modal-close):focus-visible,
#app:has(.workspace) :is(button,input,select,textarea):focus-visible{outline:2px solid #ffd36d!important;outline-offset:2px}
#app:has(.workspace) input[type="search"]:focus-visible,
#modal input[type="search"]:focus-visible{outline:none!important;box-shadow:none!important}
/* Wrapped search fields use one surface, including while the input is focused. */
#app:has(.workspace) :is(.work-search,.storage-search){min-height:44px;padding:0 12px;border:0!important;border-radius:12px;background:var(--game-popup-raised,#1c4355)!important;outline:none!important;box-shadow:none!important;transition:background-color .15s ease,box-shadow .15s ease}
#app:has(.workspace) :is(.work-search,.storage-search):focus-within{background:#285365!important;outline:none!important;box-shadow:0 4px 14px #06151d40!important}
#app:has(.workspace) :is(.work-search,.storage-search) input,
#app:has(.workspace) :is(.work-search,.storage-search) input:focus-visible{background:transparent!important;border:0!important;border-radius:0;outline:none!important;box-shadow:none!important;color:#e8f0f0;caret-color:#ffd166}

/* Loose notification panels also sit on the same surface family. */
body:has(#app .workspace) :is(#low-health-warning,#objective-notice,#toast,.account-sync-status){border-width:0!important}

/* The entry and account screens use the same borderless controls. */
body:has(.public-site) .public-site{--ink:#0d202b;background-color:#0d202b}
body:has(#app .public-site) #app .public-site *{border-width:0!important}
body:has(.public-site) .public-site :is(button,input,select,textarea,.account-card,.discovery-card,.leaderboard-panel,.record-board,.preview-badge){border-width:0!important}
body:has(.public-site) .public-site :is(.account-card,.discovery-card,.leaderboard-panel,.record-board){background-color:#1b3743!important;box-shadow:none!important}
body:has(.public-site) .public-site :is(input,select,textarea){background-color:#142e39!important}
body:has(.public-site) .public-site .account-switch .selected{background:#294b58;border-radius:8px;padding:8px 10px;margin:-8px -10px 4px}

/* Craft and My skills use the same dark work-card surface as Gather. */
#app:has(.workspace) #skills-content #craft-page .craft-card,
#app:has(.workspace) #skills-content #craft-page .craft-card.is-recommended{
 background:radial-gradient(ellipse at 20% 0%,#4b727944,transparent 55%),linear-gradient(112deg,#244550 0%,#1b3944 58%,#132c37 100%)!important;
 box-shadow:inset 0 1px #d8f1ed16,0 7px 20px #0618212b!important;
}
#app:has(.workspace) #skills-content #craft-page .craft-card:hover{
 background:radial-gradient(ellipse at 20% 0%,#5c858b50,transparent 55%),linear-gradient(112deg,#2b4c56 0%,#20404b 58%,#17313c 100%)!important;
}
#app:has(.workspace) #skills-content #craft-page .craft-card:is(.craft-needs-materials,.craft-locked),
#app:has(.workspace) #skills-content #craft-page .craft-card:is(.craft-needs-materials,.craft-locked).is-recommended{
 background:radial-gradient(ellipse at 90% 50%,#9f55573b,transparent 62%),linear-gradient(112deg,#213d47 0%,#22353e 58%,#302e37 100%)!important;
}
#app:has(.workspace) #skills-content #craft-page .craft-card:is(.craft-needs-materials,.craft-locked):hover{
 background:radial-gradient(ellipse at 90% 50%,#ad5d604a,transparent 62%),linear-gradient(112deg,#28444e 0%,#2a3a43 58%,#393039 100%)!important;
}
#app:has(.workspace) #skills-content #craft-page .craft-item-art{background:var(--gather-tile-fill)!important;box-shadow:inset 0 1px #d6f0ed0c!important}
@media(max-width:800px){#app:has(.workspace) #skills-content #craft-page .craft-card .craft-copy{padding-left:10px!important;box-sizing:border-box}}

/* Keep the work overview grouped without lighter blocks interrupting the page. */
#app:has(.workspace) :is(.skill-total-card,.skill-overview-compact .skill-group>div){background:#203d49!important;box-shadow:none!important}
#app:has(.workspace) .skill-overview-compact .skill-row-icon{background:#18343f!important}
#app:has(.workspace) .trader-shop .trader-offer{background:var(--gather-card-fill)!important;box-shadow:none!important}
#app:has(.workspace) .skill-overview-compact .skill-row{background:transparent!important;box-shadow:none!important}
#app:has(.workspace) .trader-shop .trader-offer-item{background:transparent!important;box-shadow:none!important}
/* The character Skills popup uses the same grouped rows as the Skills overview. */
body:has(#modal) #modal .character-skills-drawer .skill-overview-compact{gap:16px;padding:0 2px 22px}
body:has(#modal) #modal .character-skills-drawer :is(.skill-total-card,.skill-group>div){background:#203d49!important;box-shadow:none!important}
body:has(#modal) #modal .character-skills-drawer .skill-group>h2{margin:0 0 7px;color:#e6cc92;font-size:14px;line-height:1.2}
body:has(#modal) #modal .character-skills-drawer .skill-group>div{display:grid;gap:2px;padding:4px 0}
body:has(#modal) #modal .character-skills-drawer .skill-row{border:0!important;background:transparent!important;box-shadow:none!important}
body:has(#modal) #modal .character-skills-drawer .skill-row:hover{background:#1c3b47!important}
body:has(#modal) #modal .character-skills-drawer .skill-row-icon{flex:0 0 37px;background:#18343f!important}
body:has(#modal) #modal .character-skills-drawer .skill-row-main .progress{background:#09222c}
body:has(#modal) #modal .character-skills-drawer .skill-row-main .progress>i{background:#ffd16a}

/* One quiet canvas, raised cards and a restrained gold highlight across the game. */
body:has(#app .workspace){background-color:var(--bg)!important}
#app:has(.workspace) :is(.workspace,.main-content,.storage-view,.journal-content){background-color:transparent!important}
/* Fade the shared forest header into the page canvas before its image ends. */
#app:has(.workspace) .main-content:not(:has(.base-explore)){
 background-image:linear-gradient(180deg,#0b1c25c9 0,#0b1c25e8 145px,#0e222ddf 225px,var(--bg) 310px),url('assets/Current/ui/shelter/backgrounds/header-forest.png')!important;
}
#app:has(.workspace) :is(.equipment-slot,.skill-card,.quest-card,.achievement-card,.building-card,.pet-card,.trader-item-card){background:var(--gather-card-fill)!important}
#app:has(.workspace) :is(.equipment-slot,.skill-card,.quest-card,.achievement-card,.building-card,.pet-card,.trader-item-card):hover{background:var(--gather-tile-fill)!important}

/* Trophy art and tier labels carry the colour on the shared blue surfaces. */
#app:has(.workspace) .trophy-room-grid .achievement-card.earned,
#app:has(.workspace) .trophy-room-grid .achievement-card.earned:hover{background:var(--game-popup-raised,#1c4355)!important}
#app:has(.workspace) .trophy-room-grid .achievement-card:not(.earned),
#app:has(.workspace) .trophy-room-grid .achievement-card:not(.earned):hover{background:var(--game-inset,#14303b)!important}
#app:has(.workspace) .trophy-room-grid .achievement-title>.trophy-art{width:88px!important;height:88px!important;min-width:88px;min-height:88px;background:none!important;filter:none!important;margin:0 auto 6px}
#app:has(.workspace) .trophy-room-grid .achievement-title>.trophy-art>img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;image-rendering:auto}
#app:has(.workspace) .trophy-room-grid [data-action="claim-achievement"]{background:var(--accent,#ffc34d)!important;color:#142c37!important;box-shadow:none!important}
#app:has(.workspace) .trophy-claim-dot{background:var(--accent,#ffc34d)}
@media(min-width:760px){#app:has(.workspace) .trophy-room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#app:has(.workspace) .trophy-room-grid .achievement-title>.trophy-art{width:104px!important;height:104px!important}}
@media(min-width:1150px){#app:has(.workspace) .trophy-room-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Open survivor spaces feel welcoming while capacity-locked spaces recede. */
#app:has(.workspace) .survivor-grid .empty-resident.available{background:radial-gradient(ellipse at 50% 33%,#d2aa6026,transparent 54%),linear-gradient(155deg,#294b55,#1b3945 72%,#142d39)!important;box-shadow:inset 0 1px #e3efed16,0 9px 25px #06161f30!important}
#app:has(.workspace) .survivor-grid .empty-resident.locked-slot{background:linear-gradient(155deg,#1a3540,#102631 86%)!important;box-shadow:inset 0 1px #d6f0ed0a,0 7px 20px #06161f24!important}
#app:has(.workspace) .survivor-grid .empty-resident.available p{color:#c1d0cd}

/* Companion portraits should read as part of the card, not as a dark inset tile. */
#app:has(.workspace) .pet-roster .pet-card,
body:has(#modal) #modal .pet-roster .pet-card{background:linear-gradient(150deg,#24434e 0%,#1d3945 58%,#193440 100%)!important;box-shadow:inset 0 1px #d6f0ed10,0 8px 20px #06151c35!important}
#app:has(.workspace) .pet-roster .pet-card:hover,
body:has(#modal) #modal .pet-roster .pet-card:hover{background:linear-gradient(150deg,#2b4e58 0%,#23434e 58%,#1b3944 100%)!important}
#app:has(.workspace) .pet-roster .active-pet,
body:has(#modal) #modal .pet-roster .active-pet{background:linear-gradient(150deg,#2b4c50,#213e47 65%,#19343f)!important;box-shadow:inset 0 0 0 2px #d6b05d,0 8px 20px #06151c35!important}
#app:has(.workspace) .pet-roster .boss-pet-card:not(.active-pet),
body:has(#modal) #modal .pet-roster .boss-pet-card:not(.active-pet){background:linear-gradient(150deg,#28434b 0%,#1c3742 60%,#17303b 100%)!important}
body:has(#modal) #modal .modal:has(> .app-sheet-handle) .pet-roster .pet-card:not(.active-pet):not(.boss-pet-card){background:linear-gradient(150deg,#24434e 0%,#1d3945 58%,#193440 100%)!important}
body:has(#modal) #modal .modal:has(> .app-sheet-handle) .pet-roster .pet-card:not(.active-pet):not(.boss-pet-card):hover{background:linear-gradient(150deg,#2b4e58 0%,#23434e 58%,#1b3944 100%)!important}
body:has(#modal) #modal .modal:has(> .app-sheet-handle) .pet-roster .active-pet{background:linear-gradient(150deg,#2b4c50,#213e47 65%,#19343f)!important}
body:has(#modal) #modal .modal:has(> .app-sheet-handle) .pet-roster .boss-pet-card:not(.active-pet){background:linear-gradient(150deg,#28434b 0%,#1c3742 60%,#17303b 100%)!important}
#app:has(.workspace) .pet-roster .pet-portrait,
body:has(#modal) #modal .pet-roster .pet-portrait{isolation:isolate;background:transparent!important;box-shadow:none!important;opacity:1}
.pet-roster .pet-portrait::before{content:"";position:absolute;inset:4% 0 0;border-radius:50%;background:radial-gradient(ellipse at center,#42615f 0%,#2a4a50 39%,transparent 72%);opacity:.35;pointer-events:none}
.pet-roster .pet-portrait>.pet-model{position:relative;z-index:1;filter:drop-shadow(1px 0 0 #080a0b) drop-shadow(-1px 0 0 #080a0b) drop-shadow(0 1px 0 #080a0b) drop-shadow(0 -1px 0 #080a0b)}
.pet-roster .undiscovered .pet-portrait image{image-rendering:auto!important;filter:brightness(0) saturate(100%) invert(52%) sepia(10%) saturate(590%) hue-rotate(137deg) brightness(86%) contrast(88%) blur(.75px)!important}
.pet-roster .undiscovered{border-style:solid;border-color:#2e4b61}
.pet-roster .undiscovered h3{color:#e4e9de}
.pet-roster .pet-card>small{border-top:0;padding-top:6px}
@media(max-width:500px){.pet-roster .pet-card h3{font-size:16px;line-height:1.25;margin:5px 0 8px}.pet-roster .pet-card p{min-height:0;font-size:10px;line-height:1.45}.pet-roster .pet-card>.meta,.pet-roster .pet-card>small{font-size:8px}}
#app:has(.workspace) :is(.character-display-picker,.character-menu,.more-menu,.supplies-menu){background:#1b3743!important;box-shadow:0 14px 36px #04131c70!important}
#app:has(.workspace) .character-display-picker :is(.character-display-options>button:hover,.character-display-options>button[aria-pressed="true"]){background:#2b4d57!important}
#app:has(.workspace) .character-display-picker .character-display-all{background:#24434e!important}

/* Highscores: one calm surface, clear rank hierarchy, and compact rows. */
#app:has(.workspace) .main-content[data-page="highscores"]{background:var(--game-popup-bg,#122e3b)!important}
body:has(.main-content[data-page="highscores"])::after{display:none}
#app:has(.workspace) .public-site.highscores-page{background:transparent!important;color:#e8f0ed}
#app:has(.workspace) .public-site.highscores-page .leaderboard-section{width:min(100%,980px);max-width:980px;margin:0 auto;padding:12px 0 90px;border:0}
#app:has(.workspace) .public-site.highscores-page .ladder-tabs{gap:8px;margin:0 0 14px;padding:2px 2px 9px}
#app:has(.workspace) .public-site.highscores-page .ladder-tabs button,
#app:has(.workspace) .public-site.highscores-page .ladder-picks button{border:0;border-radius:999px;background:#1b3945;color:#c2d3d5;box-shadow:none;font-weight:650}
#app:has(.workspace) .public-site.highscores-page .ladder-tabs button{font-family:"Segoe UI",system-ui,-apple-system,sans-serif;font-weight:700}
#app:has(.workspace) .public-site.highscores-page .ladder-tabs button[aria-pressed="true"],
#app:has(.workspace) .public-site.highscores-page .ladder-picks button[aria-pressed="true"]{background:#315763;color:#ffe0a0;box-shadow:inset 0 -2px #d5ae61!important}
#app:has(.workspace) .public-site.highscores-page .ladder-picks{margin:0 0 14px;padding:8px;border:0;border-radius:13px;background:#16313c}
#app:has(.workspace) .public-site.highscores-page .single-ladder{overflow:hidden;border:0;border-radius:20px;background:linear-gradient(160deg,#1e3b47,#142d38 72%);box-shadow:0 16px 34px #06172045}
#app:has(.workspace) .public-site.highscores-page .ladder-title{padding:22px 24px 12px;border:0;background:transparent}
#app:has(.workspace) .public-site.highscores-page .ladder-title h3{margin-top:5px;color:#f6e2b2;font:700 clamp(23px,3vw,30px)/1.1 "Segoe UI",system-ui,-apple-system,sans-serif}
#app:has(.workspace) .public-site.highscores-page .ladder-refresh{display:grid;justify-items:end;gap:6px;white-space:nowrap}
#app:has(.workspace) .public-site.highscores-page .ladder-count{padding:0;border:0;color:#ebc578;font-weight:800}
#app:has(.workspace) .public-site.highscores-page .ladder-refresh small{color:#a6bec4;font-size:10px}
#app:has(.workspace) .public-site.highscores-page .score-table{width:100%;border-spacing:0 8px;padding:0 12px 12px;table-layout:auto}
#app:has(.workspace) .public-site.highscores-page .score-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#app:has(.workspace) .public-site.highscores-page .score-table td{height:74px;padding:8px 14px;border:0;background:linear-gradient(120deg,#24434f,#1c3945);box-shadow:inset 0 1px #d4e8e80b;vertical-align:middle}
#app:has(.workspace) .public-site.highscores-page .score-table tbody tr:is(:hover,:focus-within)>td{background:#2a4d59}
#app:has(.workspace) .public-site.highscores-page .score-table td:first-child{width:58px;border-radius:13px 0 0 13px}
#app:has(.workspace) .public-site.highscores-page .score-table td:last-child{border-radius:0 13px 13px 0;text-align:right}
#app:has(.workspace) .public-site.highscores-page .score-table .rank{color:#e4bd70;font-size:17px;font-weight:800}
#app:has(.workspace) .public-site.highscores-page .board-player{gap:12px}
#app:has(.workspace) .public-site.highscores-page .leaderboard-avatar{width:48px;height:56px;border:0;border-radius:10px;background:#315361}
#app:has(.workspace) .public-site.highscores-page .profile-link{color:#eff4f0;font-size:13px;font-weight:700}
#app:has(.workspace) .public-site.highscores-page .score-table td:nth-child(3){width:105px;color:#f4d68f;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
#app:has(.workspace) .public-site.highscores-page .score-table td.score-xp{width:115px;color:#b8cbd3;font-size:11px;font-weight:500}
#app:has(.workspace) .public-site.highscores-page #personal-board .personal-ranking{margin-top:20px;padding:17px 0 2px;border:0;border-radius:18px;background:linear-gradient(140deg,#203e48,#17313c);box-shadow:inset 4px 0 #d9b36a,0 10px 28px #06172030}
#app:has(.workspace) .public-site.highscores-page .personal-ranking>header{padding:0 24px}
#app:has(.workspace) .public-site.highscores-page .personal-ranking h3{margin:5px 0 10px;color:#f0e5c8;font-size:18px}
#app:has(.workspace) .public-site.highscores-page #leaderboard-search{max-width:none;margin:24px 0 12px;padding:18px;border-radius:16px;background:#193541}
#app:has(.workspace) .public-site.highscores-page #leaderboard-search>div{gap:9px}
#app:has(.workspace) .public-site.highscores-page #leaderboard-search input{border:0;background:#112b36;color:#eaf0ed}
#app:has(.workspace) .public-site.highscores-page #leaderboard-search button{border:0;background:#e5bc69;color:#18272a}
#app:has(.workspace) .public-site.highscores-page .leaderboard-search-matches{border:0;border-radius:16px;background:#193541}
@media(max-width:600px){
 #app:has(.workspace) .public-site.highscores-page .leaderboard-section{padding-top:4px}
 #app:has(.workspace) .public-site.highscores-page .ladder-title{padding:19px 17px 8px}
 #app:has(.workspace) .public-site.highscores-page .ladder-title h3{font-size:24px}
 #app:has(.workspace) .public-site.highscores-page .score-table{padding:0 8px 9px;border-spacing:0 7px}
 #app:has(.workspace) .public-site.highscores-page .score-table td{height:68px;padding:7px 8px}
 #app:has(.workspace) .public-site.highscores-page .score-table td:first-child{width:43px}
 #app:has(.workspace) .public-site.highscores-page .score-table td:nth-child(3){width:82px;font-size:15px;white-space:nowrap}
 #app:has(.workspace) .public-site.highscores-page .board-player{width:100%;gap:8px;overflow-wrap:anywhere}
 #app:has(.workspace) .public-site.highscores-page .board-player .profile-link{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2}
 #app:has(.workspace) .public-site.highscores-page .leaderboard-avatar{width:42px;height:49px}
 #app:has(.workspace) .public-site.highscores-page .profile-link{font-size:12px}
 #app:has(.workspace) .public-site.highscores-page .personal-ranking>header{padding:0 17px}
}

/* A survivor record slides in as a full-screen page with one natural scroll. */
dialog.player-profile-dialog.public-site{position:fixed!important;inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:#102631!important;color:#edf2ef!important;box-shadow:none!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none}
dialog.player-profile-dialog.public-site[open]{display:block!important;height:100dvh!important;animation:profile-page-enter .3s cubic-bezier(.18,.82,.24,1) both}
dialog.player-profile-dialog.public-site.is-closing[open]{animation:profile-page-exit .24s ease-in both}
@keyframes profile-page-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes profile-page-exit{from{transform:translateX(0)}to{transform:translateX(100%)}}
dialog.player-profile-dialog.public-site::backdrop{background:#061119b8;backdrop-filter:blur(3px)}
dialog.player-profile-dialog.public-site .player-profile-navigation{position:sticky;top:0;z-index:10;display:flex;align-items:center;height:calc(62px + env(safe-area-inset-top,0px));margin-bottom:calc(-62px - env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:transparent;backdrop-filter:none;pointer-events:none}
dialog.player-profile-dialog.public-site .player-profile-close{position:static;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:12px;background:#17313dd9;color:#f2d38b;font-size:26px!important;line-height:1;box-shadow:0 3px 12px #06151d66;cursor:pointer;pointer-events:auto}
dialog.player-profile-dialog.public-site .player-profile-close:hover{background:#315562}
dialog.player-profile-dialog.public-site .player-profile-close:focus-visible{outline:2px solid #e5bc69;outline-offset:3px}
dialog.player-profile-dialog.public-site .player-profile-body{display:block;width:100%;max-width:none;min-height:0;margin:0;padding:0 0 calc(70px + env(safe-area-inset-bottom,0px));touch-action:pan-y}
dialog.player-profile-dialog.public-site .player-profile-scene{height:clamp(340px,56dvh,520px);border-radius:0;background:none}
dialog.player-profile-dialog.public-site .player-profile-scene:after{display:none}
dialog.player-profile-dialog.public-site .player-profile-scene:before{display:none}
dialog.player-profile-dialog.public-site .public-character-three,dialog.player-profile-dialog.public-site .public-character-three .creator-three{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto}
dialog.player-profile-dialog.public-site .player-profile-portrait{z-index:3;bottom:0;height:calc(100% - 24px);width:100%;max-width:540px;aspect-ratio:auto;display:block;pointer-events:none}
dialog.player-profile-dialog.public-site .player-profile-portrait>:is(.male-rive-profile,.female-rive-profile){width:100%;height:100%}
dialog.player-profile-dialog.public-site .player-profile-portrait>:is(.male-rive-profile,.female-rive-profile) canvas{display:block;width:100%;height:100%;transform:none;touch-action:pan-y}
dialog.player-profile-dialog.public-site .player-profile-identity{max-width:940px;margin:0 auto;padding:10px 20px 7px}
dialog.player-profile-dialog.public-site .player-profile-heading h2{font-size:clamp(28px,5vw,42px)}
dialog.player-profile-dialog.public-site .player-profile-vitals{margin-top:11px;gap:8px}
dialog.player-profile-dialog.public-site .player-profile-collectibles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:940px;margin:15px auto 4px;padding:0 20px}
dialog.player-profile-dialog.public-site .player-profile-collectibles>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:150px;padding:14px 10px;border-radius:12px;background:#203d49;text-align:center}
dialog.player-profile-dialog.public-site .player-profile-collectibles>div>svg,dialog.player-profile-dialog.public-site .player-profile-collectibles>div>img{width:78px;height:78px;max-width:100%;object-fit:contain}
dialog.player-profile-dialog.public-site .player-profile-collectibles>div>.profile-empty-art{display:grid;place-items:center;width:78px;height:78px;font-size:54px}
dialog.player-profile-dialog.public-site .player-profile-collectibles>div>span:last-child{display:grid;justify-items:center;gap:3px}
dialog.player-profile-dialog.public-site .player-profile-collectibles b{font-size:13px}
dialog.player-profile-dialog.public-site .player-profile-section{max-width:940px;margin:30px auto 0;padding:0 20px}
dialog.player-profile-dialog.public-site .player-profile-section>h3{margin:0 0 12px;color:#f1dfb8;font:700 20px/1.2 Segoe UI,system-ui,sans-serif}
dialog.player-profile-dialog.public-site .player-profile-skills{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
dialog.player-profile-dialog.public-site .player-profile-skill,
dialog.player-profile-dialog.public-site .player-profile-stats>div{border:0;border-radius:0;background:transparent;box-shadow:none}
dialog.player-profile-dialog.public-site .player-profile-skill{position:relative;display:block;height:80px;min-height:80px;padding:0;border-radius:12px;overflow:hidden;background:linear-gradient(155deg,#1c3943 0%,#16313b 60%,#122a34 100%)}


dialog.player-profile-dialog.public-site .player-profile-skill>strong{position:absolute;top:9px;right:9px;z-index:1;display:block;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#f3dfb5;font-size:18px;font-weight:600;line-height:1;letter-spacing:-.3px;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #071b24}
dialog.player-profile-dialog.public-site .player-profile-skill-name{position:absolute;left:10px;right:8px;bottom:16px;z-index:1;color:#c4d5d8;font-size:clamp(9.5px,2.8vw,11px);font-weight:600;line-height:1.08;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:clip;text-shadow:0 1px 3px #071b24}
dialog.player-profile-dialog.public-site .player-profile-skill-progress{position:absolute;left:9px;right:9px;bottom:7px;width:auto;height:4px;background:#081e28}
dialog.player-profile-dialog.public-site .player-profile-skill-total{background:linear-gradient(110deg,#2c403d,#203840 60%,#18313b)}

dialog.player-profile-dialog.public-site .player-profile-skill-total .player-profile-skill-name{color:#f0dfb5}
@media(max-width:350px){dialog.player-profile-dialog.public-site .player-profile-skill>strong{top:8px;right:8px;font-size:17px}dialog.player-profile-dialog.public-site .player-profile-skill-name{font-size:9px}}
dialog.player-profile-dialog.public-site .player-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;padding:9px 18px;margin:0;border-radius:13px;background:#203d49}
dialog.player-profile-dialog.public-site .player-profile-stats>div{min-height:38px;padding:6px 0;border-bottom:0;font-size:12px}
dialog.player-profile-dialog.public-site .player-profile-loadout{gap:10px}
dialog.player-profile-dialog.public-site .player-profile-slot{min-height:60px;padding:9px 10px;gap:10px;border:0;border-radius:12px;background:color-mix(in srgb,var(--gear-colour) 13%,#142d39);box-shadow:none}
dialog.player-profile-dialog.public-site .player-profile-slot-art{width:38px;height:38px;flex-basis:38px;border-radius:9px;background:color-mix(in srgb,var(--gear-colour) 22%,#102732)}
dialog.player-profile-dialog.public-site .player-profile-slot-copy strong{font-size:12px;line-height:1.35;color:#ecf1ee}
dialog.player-profile-dialog.public-site::-webkit-scrollbar{display:none}
dialog.player-profile-dialog.public-site footer{max-width:940px;margin:0 auto;padding:10px 20px 0;color:#a1b6bd}
@media(max-width:600px){
 dialog.player-profile-dialog.public-site .player-profile-navigation{height:calc(56px + env(safe-area-inset-top,0px));margin-bottom:calc(-56px - env(safe-area-inset-top,0px));padding:calc(7px + env(safe-area-inset-top,0px)) 12px 7px}
 dialog.player-profile-dialog.public-site .player-profile-scene{height:56dvh;min-height:340px;max-height:520px}
 dialog.player-profile-dialog.public-site .player-profile-identity{padding:10px 16px 7px}
 dialog.player-profile-dialog.public-site .player-profile-collectibles{padding:0 16px}
 dialog.player-profile-dialog.public-site .player-profile-collectibles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 dialog.player-profile-dialog.public-site .player-profile-skills{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 dialog.player-profile-dialog.public-site .player-profile-stats{grid-template-columns:1fr;gap:0}
 dialog.player-profile-dialog.public-site .player-profile-loadout{grid-template-columns:1fr;gap:7px}
 dialog.player-profile-dialog.public-site .player-profile-section{margin-top:26px;padding:0 16px}
}
@media(prefers-reduced-motion:reduce){dialog.player-profile-dialog.public-site[open],dialog.player-profile-dialog.public-site.is-closing[open]{animation:none!important}}
/* Keep the trader's wares on a deeper surface against the darkened forest. */
#app:has(.workspace) .trader-shop{background:transparent!important}
#app:has(.workspace) .trader-shop .trader-offer{background:linear-gradient(150deg,#19333d,#102833 90%)!important}
#app:has(.workspace) .trader-shop .trader-offer-item,
#app:has(.workspace) .trader-shop .trader-offer-item:hover{background:transparent!important}

/* The fixed Skills page should blend into the space below a running queue. */
@media(max-width:800px){
 body:has(#app .workspace):has(.header-shell .activity-bar) #app:has(.workspace) .main-content[data-page="activities"]:has(>.skills-tabs[aria-label="Skills sections"]){
  top:calc(env(safe-area-inset-top,0px) + 52px)!important;
  padding:16px 12px 8px!important;
  background-image:linear-gradient(180deg,var(--bg) 0,#0b1c25e8 145px,#0e222ddf 225px,var(--bg) 310px),url('assets/Current/ui/shelter/backgrounds/header-forest.png')!important;
 }
 body:has(.main-content[data-page="activities"]) .header-shell .activity-bar{box-shadow:0 4px 12px #0004!important}
}

/* Facility sheets: lift the building details off the sheet without a near-black block. */
body:has(#modal) #modal .facility-sheet .building-card.clean-facility:not(.damaged){
 background:var(--gather-card-fill)!important;
 box-shadow:0 8px 22px #04151d35!important;
}
/* Text-led building popups share a clear title, benefit and materials layout. */
#modal .facility-sheet .building-card.clean-facility{border:0;box-shadow:0 8px 22px #04151d35!important}
#modal .modal:has(.facility-sheet) .modal-fixed-head h2{font-size:24px;line-height:1.25}
#modal .facility-sheet .clean-facility .facility-heading{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px 14px;padding:18px;border:0}
#modal .facility-sheet .facility-heading h3{margin:0 0 9px;font-size:22px;line-height:1.2;font-weight:600;overflow-wrap:anywhere}
#modal .facility-sheet .facility-heading .meta{font-size:10px;letter-spacing:.08em}
#modal .facility-sheet .facility-level-pips{gap:4px;margin-top:10px}
#modal .facility-sheet .facility-heading .facility-upgrade-description{padding:0;margin:0;font-size:13px;line-height:1.6;color:#c7d8df}
#modal .facility-sheet .facility-badge{border:0;border-radius:12px;min-width:76px;max-width:112px;padding:11px 10px}
#modal .facility-sheet .clean-facility .facility-card-content{padding:0 18px 18px}
#modal .facility-sheet .clean-facility .facility-body{border:0;padding-top:10px;gap:3px}
#modal .facility-sheet .facility-label{font-family:inherit;font-size:9px;letter-spacing:.1em;margin-bottom:10px}
#modal .facility-sheet .costs{row-gap:10px}
body:has(#modal) #modal .facility-sheet .facility-badge:not(.warning){background:#1a3642!important}
body:has(#modal) #modal .facility-sheet .build-material-help{background:var(--gather-card-fill)!important}
body:has(#modal) #modal .facility-sheet .costs>.missing-material{background:#344149!important}

/* Journal lists share one navy palette, including expanded quest details. */
#app:has(.workspace) .quest-journey .quest-roadmap{padding:14px 13px 16px!important;border:1px solid #3b5f6a!important;background:linear-gradient(160deg,#203f4b,#173340 68%,#122b38)!important;box-shadow:inset 0 1px #d6edf010!important}
.quest-journey .quest-roadmap>header{margin:0 2px 11px;padding:0}
.quest-journey .quest-roadmap-list{gap:9px}
.quest-journey .quest-roadmap-row{background:linear-gradient(115deg,#1b3b48,#173340);box-shadow:inset 0 1px #c5dfe90d}
.quest-journey .quest-roadmap-row[open]{background:linear-gradient(115deg,#214849,#1a3946)}
.quest-journey .quest-roadmap-row summary:hover{background:#26505a}
.quest-journey .quest-roadmap-detail{padding-top:11px;padding-right:14px;border-top:1px solid #c8e5ef12;background:linear-gradient(180deg,#1b414a,#173440)}
.quest-journey .quest-roadmap-detail>p{color:#d0e0e6}

/* The opening tutorial uses the same panel and row rhythm as the quest list. */
#app:has(.workspace) .tutorial-chapters{max-width:740px;padding:13px 12px 19px;border:0;border-radius:18px;background:linear-gradient(145deg,#1d3946,#142e3c 65%,#102632);box-shadow:0 9px 28px #06182130}
#app:has(.workspace) .tutorial-chapters.is-complete{background:radial-gradient(ellipse at 85% 0,#70c79c13,transparent 45%),linear-gradient(145deg,#1d3946,#142e3c 65%,#102632)}
#app:has(.workspace) .tutorial-chapters>header{margin:0 0 7px;padding:8px 8px 13px;border:0;border-radius:0;background:transparent}
#app:has(.workspace) .tutorial-chapters>header h2{color:#f4e1b6}
#app:has(.workspace) .tutorial-chapters>header p{color:#bdd0d2}
.tutorial-chapters .tutorial-rewards span{background:#193642;color:#dfe9e1;box-shadow:inset 0 0 0 1px #91b4ad16}
.tutorial-chapters.is-complete .tutorial-rewards strong{color:#a7ddbd}
#app:has(.workspace) .tutorial-chapter{min-height:58px;margin:7px 0;padding:9px 12px;border:0;background:#152f3d;box-shadow:inset 0 1px #c5dfe90a;color:#d0dfe3}
#app:has(.workspace) .tutorial-chapter.is-current{background:linear-gradient(110deg,#244553,#193744);box-shadow:inset 3px 0 #efc768,inset 0 1px #d6edf012;color:#f6e7c4}
#app:has(.workspace) .tutorial-chapter.is-done{opacity:1;background:#193642}
.tutorial-chapter.is-done .tutorial-chapter-number{background:#2a584c;color:#a9e7bf}
.tutorial-chapters.is-complete .tutorial-chapter.is-done h3{color:#c0d2cf;text-decoration:line-through;text-decoration-color:#a9e7bf88;text-decoration-thickness:1px;text-underline-offset:3px}
.tutorial-chapter:not(.is-done):not(.is-current) .tutorial-chapter-number{background:#26495a;color:#e8ca85}
.tutorial-chapter.is-current .tutorial-chapter-number{background:#315568;color:#ffe09b}
.tutorial-current-label{padding:4px 7px;border-radius:6px;background:#493e2b;color:#f9d887}
#app:has(.workspace) .tutorial-complete-footer{background:#193942;box-shadow:none;color:#cfecd9}
.journal-primary-tabs .tutorial-finished-tab{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.journal-primary-tabs .tutorial-finished-tab>span{text-decoration:line-through;text-decoration-color:#a9e7bf;text-decoration-thickness:1px;color:#b4c7c7}
.journal-primary-tabs .tutorial-finished-tab>b{font-size:13px;line-height:1;color:#9be5b6}

/* The featured daily uses the same right-side illustration as Recommended. */
#app:has(.workspace) #skills-content #gather-page .gather-card:is(.is-daily,.is-recommended)>.gather-art{
 overflow:hidden;border-radius:0 14px 14px 0;
 mask-image:radial-gradient(ellipse 105% 62% at 93% 47%,#000 16%,#000b 47%,transparent 89%)!important;
 -webkit-mask-image:radial-gradient(ellipse 105% 62% at 93% 47%,#000 16%,#000b 47%,transparent 89%)!important;
}
#app:has(.workspace) #skills-content #gather-page .gather-card.is-daily>.gather-art{
 position:absolute!important;inset:0 0 0 auto!important;width:145px!important;z-index:0!important;
 opacity:.36!important;pointer-events:none;
}
#app:has(.workspace) #skills-content #gather-page .gather-card.is-daily>.gather-art img{width:100%;height:100%;object-fit:cover;object-position:center}
#app:has(.workspace) #skills-content #gather-page .gather-card.is-daily>.gather-card-body{position:relative;z-index:1}
@media(max-width:600px){#app:has(.workspace) #skills-content #gather-page .gather-card.is-daily{margin-bottom:8px}}
@keyframes dock-page-out{from{opacity:1}to{opacity:0}}
@keyframes dock-page-in{from{opacity:0}to{opacity:1}}
/* Swap keeps its place while the two navigation sets change. */
@media(max-width:800px){
 body:has(.main-content[data-page="collections"]){overflow:hidden;overscroll-behavior:none}
 #app:has(.workspace) .main-content[data-page="collections"]{position:fixed;inset:max(env(safe-area-inset-top,0px),var(--queue-clearance,0px)) 0 var(--app-dock-height,0px);display:flex;flex-direction:column;gap:8px;width:100%;height:auto;min-height:0;overflow:hidden;padding:8px 12px!important}
 .main-content[data-page="collections"]>.app-page-heading{display:none}
 .main-content[data-page="collections"]>.journal-page-heading,.main-content[data-page="collections"]>.journal-toolbar{flex:none;margin:0}
 .main-content[data-page="collections"]>.collections-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:18px}
 .main-content[data-page="collections"] .collections-primary-tabs{touch-action:pan-y}
}
@media(max-width:800px){
 .main-content[data-page="activities"]{overflow-x:clip;touch-action:pan-y}
 .main-content[data-page="activities"] #skills-content{max-width:100%;overflow-x:clip;touch-action:pan-y}
 .main-content[data-page="activities"] #gather-page{max-width:100%;overflow-x:clip;touch-action:pan-y}
 .main-content[data-page="activities"]>.skills-tabs{overflow-x:hidden;touch-action:pan-y}
 .collections-primary-tabs button:not(.selected):hover{background:transparent!important;color:#b5c2bf!important}
 .collections-primary-tabs button.selected:hover{background:#285061!important;color:#f3e7c8!important}
}
@media(prefers-reduced-motion:reduce){#app:has(.workspace) #skills-content #gather-page .gather-card.is-current::after{animation:none}}
.sidebar .nav-swap{color:#ffd071}
/* Profile actions stay against the quiet upper backdrop. */
@keyframes character-rail-enter{from{translate:100% 0;opacity:0}to{translate:0 0;opacity:1}}
@media(max-width:800px){
 .character-rpg .mobile-character-actions{right:6px!important;top:calc(max(env(safe-area-inset-top,0px),var(--queue-clearance,0px)) + 16px)!important;bottom:auto!important;transform:none!important;width:auto;flex-direction:row;padding:5px;gap:2px!important;max-height:none!important;border:0;border-radius:16px;background:#102835ed;box-shadow:0 5px 16px #0003;backdrop-filter:none;animation:character-rail-enter .42s cubic-bezier(.2,.8,.2,1) both}
 .mobile-character-actions .character-shortcut{flex:0 0 auto!important;--action-accent:#ebcc8c}
 .mobile-character-actions .character-action-stats{--action-accent:#96d6dd}
 .mobile-character-actions .character-action-buffs{--action-accent:#98e5b6}
 .mobile-character-actions .character-action-skills{--action-accent:#d4b6ed}
 .mobile-character-actions .character-shortcut>button{width:52px!important;height:58px!important;max-height:none!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center;justify-content:center;gap:5px!important;padding:5px 1px!important;border:0!important;border-radius:13px!important;background:transparent!important;box-shadow:none!important;color:#e6f0ee!important;transition:background .18s ease,transform .18s ease}
 .mobile-character-actions .character-shortcut>button:hover{background:#ffffff12!important}
 .mobile-character-actions .character-shortcut>button:active{transform:scale(.96);background:#ffffff1c!important}
 .mobile-character-actions .character-shortcut-art{display:grid!important;place-items:center;width:34px!important;height:34px!important;max-height:none!important;border-radius:11px;background:#142d38;filter:none!important;box-shadow:none}
 .mobile-character-actions .character-action-glyph{width:24px;height:24px;color:var(--action-accent);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--action-accent) 30%,transparent))}
 .mobile-character-actions .character-action-label{font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:8px;font-weight:600;letter-spacing:0;line-height:1.1;text-align:center;text-transform:none;white-space:nowrap;text-shadow:none}
 
}
@media(max-width:800px) and (max-height:700px){
 .character-rpg .mobile-character-actions{top:calc(max(env(safe-area-inset-top,0px),var(--queue-clearance,0px)) + 16px)!important;bottom:auto!important;transform:none!important;gap:4px!important;padding:0;max-height:none!important}
 .mobile-character-actions .character-shortcut>button{width:52px!important;height:54px!important;gap:3px!important}
 .mobile-character-actions .character-shortcut-art{width:31px!important;height:31px!important}
 .mobile-character-actions .character-action-glyph{width:22px;height:22px}
}
@media(max-width:360px){.mobile-character-actions .character-action-label{font-size:7px}}
@media(prefers-reduced-motion:reduce){.character-rpg .mobile-character-actions{animation:none!important}}
@media(max-width:800px){
 body:has(.survivor-stage) #app:has(.workspace) .main-content:has(.survivor-stage)::before{background-color:#102631!important;background-image:linear-gradient(180deg,transparent 76%,#10263120 91%,#102631b8 100%),linear-gradient(90deg,#040c13b8 0%,#040c137a 12%,transparent 32%,transparent 68%,#040c136b 88%,#040c13a6 100%)!important}
}
@keyframes character-menu-panel-enter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@media(max-width:800px){
 body:has(.survivor-stage) #modal .modal-backdrop:has(> .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"])){align-items:stretch!important;justify-content:flex-end!important;padding:0!important}
 body:has(.survivor-stage) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]){position:fixed!important;inset:0!important;width:100%!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;animation:character-menu-panel-enter .3s cubic-bezier(.2,.8,.2,1) both!important}
 body:has(.survivor-stage) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]) .modal-fixed-head{flex:none;padding:calc(18px + env(safe-area-inset-top,0px)) 18px 14px!important;border:0!important;border-radius:0!important}
 body:has(.survivor-stage) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]) .modal-scroll-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px calc(24px + env(safe-area-inset-bottom,0px))!important}
 body:has(.survivor-stage) #modal .modal.is-swipe-closing{animation:none!important}
}
@media(prefers-reduced-motion:reduce){body:has(.survivor-stage) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]){animation:none!important}}
body.reduce-motion:has(.survivor-stage) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]){animation:none!important}
.desktop-character-buffs .character-action-glyph{width:34px;height:34px;color:#efce87}
.desktop-character-buffs .character-skills-button .character-action-glyph{color:#d4b6ed}
#modal .character-loadout-sheet{display:grid;gap:30px}
#modal .character-loadout-section{min-width:0;scroll-margin-top:20px}
#modal .character-loadout-section>h2,#modal .equipment-heading-row>h2{display:flex;align-items:center;gap:9px;margin:0 0 14px;color:#f6d991;font-size:13px;font-weight:850;letter-spacing:.12em}
#modal .character-loadout-section>h2::before,#modal .equipment-heading-row>h2::before{content:'';display:block;flex:0 0 4px;height:15px;border-radius:4px;background:#e7ba65;box-shadow:0 0 12px #e7ba6540}
#modal .character-loadout-section+.character-loadout-section{padding-top:0;background:none}
#modal .character-active-pet{display:grid;gap:13px;padding:14px;border-radius:15px;background:#1d3945}
#modal .character-active-pet-card{display:flex;align-items:center;gap:14px;min-width:0}
#modal .character-active-pet-art{display:grid;place-items:center;flex:0 0 68px;height:68px;border-radius:13px;background:#102b36}
#modal .character-active-pet-art img{max-width:64px;max-height:64px;object-fit:contain}
#modal .character-active-pet-info{display:grid;gap:5px;min-width:0}
#modal .character-active-pet-info strong{color:#f2e5c6;font-size:14px}
#modal .character-active-pet-info small{color:#afc6c7;line-height:1.4}
#modal .character-pet-picker{display:grid;gap:6px;color:#9fb9bf;font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
#modal .character-pet-picker select{width:100%;min-height:43px;padding:9px 12px;border:0;border-radius:10px;background:#102b36;color:#eef5ef;font-size:13px}
#modal .character-pet-picker .choice-trigger{border:0!important;border-radius:10px;background:#102b36!important;box-shadow:none!important;color:#eef5ef}
.choice-panel.character-pet-choice-panel{border:0!important;border-radius:14px;background:#142e3b;box-shadow:0 22px 65px #031019b3}
.choice-panel.character-pet-choice-panel .choice-close{border:0!important;border-radius:11px;background:#254653;color:#e9f4f1;box-shadow:none!important}
.choice-panel.character-pet-choice-panel .choice-close:hover{background:#315867}
.choice-panel.character-pet-choice-panel .choice-options>button:not(.tier-choice){border:0!important;border-radius:9px;background:#1d3a47;color:#e9f2ef;box-shadow:none!important}
.choice-panel.character-pet-choice-panel .choice-options>button.selected:not(.tier-choice){background:#2d5360;color:#ffe2a2}
.choice-panel.character-pet-choice-panel>.primary{border:0!important;box-shadow:0 3px #b77c20!important}
.quest-card.quest-ready [data-action="claim"],.quest-roadmap-row.is-ready [data-action="claim"],.next-goal [data-action="claim"]{color:#073723!important;background:linear-gradient(110deg,#52dc89,#a2ffbe,#48dca0,#52dc89)!important;background-size:250% 100%!important;box-shadow:0 0 17px #67f3a04d!important;font-weight:800!important;animation:daily-claim-glow 3.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.quest-card.quest-ready [data-action="claim"],.quest-roadmap-row.is-ready [data-action="claim"],.next-goal [data-action="claim"]{animation:none}}

/* Settings follows the compact account-menu pattern across mobile and desktop. */
.main-content[data-page="settings"]>.app-page-heading{display:none!important}
.settings-flow{width:min(650px,100%);margin:0 auto 28px;padding-bottom:calc(max(var(--activity-bottom-clearance,0px),58px) + 16px);color:#eaf0e9}
.settings-profile{text-align:center;padding:24px 12px 8px}
.settings-profile-avatar{position:relative;display:grid;place-items:center;width:70px;height:70px;margin:0 auto 10px;overflow:hidden;border:2px solid #d2ae61;border-radius:50%;background:#203d4a;color:#fbd37b;box-shadow:0 0 0 5px #152c36}
.settings-profile-avatar .dock-base-art,.settings-profile-avatar :is(.male-rive-dock,.female-rive-dock){position:absolute;inset:0;width:100%;height:100%}
.settings-profile-avatar .male-rive-status{display:none}
.settings-profile-avatar :is(.male-rive-dock,.female-rive-dock) canvas{width:100%!important;height:100%!important;transform:translateX(8%) scale(2.55);transform-origin:50% 0;pointer-events:none}
.settings-profile h1{margin:0;color:#f4e9cf;font-size:25px;line-height:1.2}
.settings-profile p{margin:5px 0 13px;color:#d6b772;font-size:13px}
.settings-profile-actions{display:flex;justify-content:center;gap:8px}
.settings-profile-actions button{min-height:34px;padding:6px 13px;border:0;border-radius:18px;background:#25414e;color:#f7dda0;font-size:12px;font-weight:700;cursor:pointer}
.settings-profile .admin-mode-toggle{width:min(244px,100%);min-height:42px;margin:14px auto 8px;padding:9px 13px;border:0;border-radius:12px;background:#1b3a47;box-shadow:0 5px 14px #06192355;text-align:left}
.settings-profile .admin-mode-toggle:has(.admin-mode-switch[aria-checked="true"]){background:#254756}
.admin-mode-link:not(:disabled)::after{content:'›';margin-left:8px;color:#ffd277;font-size:17px;line-height:0}
.settings-menu-group{margin:22px 0 0}
.settings-menu-group h2{margin:0 3px 9px;color:#d4c9ae;font-size:13px;font-weight:750;letter-spacing:.03em}
.settings-menu-list{overflow:hidden;border:1px solid #34515a;border-radius:16px;background:#172f3a;box-shadow:inset 0 1px #ffffff0a}
.settings-menu-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 14px;border:0;border-bottom:1px solid #ffffff0c;background:transparent;color:#ecede6;text-align:left;cursor:pointer}
.settings-menu-row:last-child{border-bottom:0}
.settings-menu-row:hover,.settings-menu-row:focus-visible{background:#244654}
.settings-menu-row:focus-visible,.settings-detail-heading button:focus-visible,.settings-profile-actions button:focus-visible{outline:2px solid #ffd176;outline-offset:-2px}
.settings-menu-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:#274551;color:#f4cd80;font-size:18px;font-weight:800}
.settings-menu-copy{flex:1;min-width:0;font-size:14px}
.settings-menu-chevron{color:#aac1c5;font-size:25px;line-height:1}
.settings-menu-row.is-danger{color:#ff9790}
.settings-menu-row.is-danger .settings-menu-icon{background:#52353b;color:#ff918b}
.settings-version{margin:28px 0 0;color:#899fa4;font-size:10px;letter-spacing:.13em;line-height:2;text-align:center}
.settings-version strong{color:#b8c8c9;font-size:12px;font-weight:650;letter-spacing:0}
.settings-flow.is-detail{animation:settings-fade-in .2s ease-out}
.settings-detail-heading{display:flex;align-items:center;gap:12px;margin:8px 0 18px}
.settings-detail-heading button{display:grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:14px;background:#203d49;color:#ffd174;box-shadow:0 4px 12px #07182055;cursor:pointer}
.settings-detail-heading button:hover{background:#2b5060}

.settings-detail-heading h1{margin:0;color:#f6ebd2;font-size:23px;line-height:1.2}
.settings-detail-content{display:grid;gap:13px;min-width:0}
.settings-detail-card{min-width:0;padding:18px;border:1px solid #34515a;border-radius:16px;background:#183440;color:#d7e2e0}
.settings-detail-card h2{margin:0 0 12px;color:#f5e4bf;font-size:18px}
.settings-detail-card p{color:#bfd0d1;line-height:1.55}
.settings-detail-card a{color:#ffcd70}
.settings-detail-card .settings-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:63px;padding:11px 0;border-top:0;cursor:pointer}
.settings-detail-card .settings-choice span{display:grid;gap:3px}
.settings-detail-card .settings-choice b{font-size:13px}
.settings-detail-card .settings-choice small{color:#9db9bd;font-size:11px;line-height:1.4}
.settings-detail-card .settings-choice input{flex:none;accent-color:#ffc65c}
.settings-detail-card .volume-control{display:grid;gap:7px;margin-top:13px}
.settings-detail-card .volume-control span{display:flex;justify-content:space-between;gap:12px}
.settings-detail-card .volume-control input{width:100%;accent-color:#ffc65c}
.settings-language-select{display:grid;gap:8px;color:#bfd0d1;font-size:12px}
.settings-language-select select{width:100%;min-height:42px;border:1px solid #46616a;border-radius:9px;background:#102a35;color:#edf1ea}
.settings-action-link,.settings-danger-link{display:inline-flex;align-items:center;min-height:42px;margin-top:8px;padding:10px 16px;border-radius:9px;background:#efc25e;color:#1a2a30!important;font-weight:800;text-decoration:none}
.settings-danger-link{justify-content:center;border:0;background:#65353a;color:#ffe8e4!important;font-family:inherit;font-size:13px;font-weight:800;line-height:1.25;text-align:center;box-shadow:none;cursor:pointer}
.settings-placeholder{text-align:center;padding:40px 20px}
.settings-placeholder>span{font-size:35px;color:#ffcf71}
.settings-customise-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:10px;padding:10px 22px;border:0;border-radius:12px;background:linear-gradient(180deg,#ffd46b,#ffb932);color:#221a09;font-weight:800;box-shadow:0 3px 0 #a57223;cursor:pointer}
button.settings-customise-button:hover:not(:disabled){background:linear-gradient(180deg,#ffd46b,#ffb932);color:#221a09;filter:brightness(1.07)}
.settings-detail-content:has(>.settings-delete-card){gap:18px}
.settings-delete-card{display:grid;justify-items:start;gap:12px;padding:20px 18px;border:0;background:#362832;box-shadow:0 8px 22px #07151c3b}
.settings-deletion-request-card{background:#332730}
.settings-delete-card h2{margin:0;color:#ffaaa1}
.settings-delete-card p{margin:0;color:#efd5d3;font-size:12px;line-height:1.55}
.settings-delete-card .settings-danger-link{margin-top:3px}
.settings-detail-card>button[data-action="logout"]{margin-top:16px}
.settings-legal h2{margin:22px 0 4px;color:#ffcf71;font-size:17px}
.settings-legal p{margin:7px 0 14px}
.settings-legal .legal-date{color:#9db9bd;font-size:12px}
@keyframes settings-fade-in{from{opacity:.5}to{opacity:1}}
@media(max-width:800px){
 .main-content[data-page="settings"]{padding:14px 15px 100px!important}
 .settings-flow{margin-bottom:8px}
 .settings-menu-group{margin-top:21px}
}
@media(prefers-reduced-motion:reduce){.settings-flow.is-detail{animation:none}}
.reduce-motion .settings-flow.is-detail{animation:none}

/* Quests sets the mobile page rhythm: left heading, short context, then tabs. */
@media(max-width:800px){
 #app:has(.workspace) .main-content:is([data-page="highscores"],[data-page="guild"],[data-page="news"],[data-page="support"],[data-page="feedback"],[data-page="shelter-pass"],[data-page="admin"])>.app-page-heading{display:flex;justify-content:flex-start;align-items:baseline;gap:12px;min-height:28px;margin:0 0 10px;padding:0}
 #app:has(.workspace) .main-content>.app-page-heading h1{margin:0;color:#f0e3bc;font-family:inherit;font-size:23px;font-weight:700;line-height:1.2;text-align:left;letter-spacing:0}
 #app:has(.workspace) .main-content>.app-page-heading>span{color:#a9c3cf;font-size:11px;line-height:1.4}
 #app:has(.workspace) .main-content[data-page="guild"]:not(:has(.faction-preview[data-faction-screen="member"])){padding-top:calc(max(env(safe-area-inset-top,0px),calc(var(--queue-clearance,0px) - 10px)) + 14px)!important}
 #app:has(.workspace) .main-content[data-page="activities"]:has(>.skills-page-heading){padding-top:calc(max(env(safe-area-inset-top,0px),var(--queue-clearance,0px)) + 8px)!important}
 #app:has(.workspace) .main-content[data-page="collections"]{padding-top:14px!important}
 #app:has(.workspace) .main-content>.skills-page-heading,
 #app:has(.workspace) .main-content[data-page="collections"]>.journal-page-heading{margin:0 0 2px!important}
 #app:has(.workspace) .main-content[data-page="storage"] .storage-view .storage-controls{margin-top:6px}
 #app:has(.workspace) .public-site.highscores-page .leaderboard-section{padding-top:0}
 #app:has(.workspace) .public-site.highscores-page .ladder-tabs{display:flex;align-items:stretch;gap:6px;width:100%;min-height:52px;box-sizing:border-box;margin:0 0 14px;padding:5px;border-radius:15px;background:#102a36;overflow-x:auto}
 #app:has(.workspace) .public-site.highscores-page .ladder-tabs button{flex:0 0 auto;min-height:44px;padding:7px 13px;border:0;border-radius:11px;background:#1c4355;color:#dce9eb;box-shadow:none;font-size:11px}
 #app:has(.workspace) .public-site.highscores-page .ladder-tabs button[aria-pressed="true"]{background:#ffd166;color:#122e3b;box-shadow:0 3px 10px #06151d40!important}
#app:has(.workspace) .public-site.highscores-page .ladder-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
#app:has(.workspace) .public-site.highscores-page .ladder-tabs button{min-width:0;padding-inline:5px}
}

/* Keep the Trader's cards distinct from a continuous deep-blue shop surface. */
#app:has(.workspace) .main-content[data-page="survivors"]:has(.trader-shop),
#app:has(.workspace) .main-content[data-page="survivors"] .trader-shop{background:#0b2531!important}
#app:has(.workspace) .trader-shop .trader-section-title{text-transform:none!important;letter-spacing:0!important;max-width:290px}
#app:has(.workspace) .trader-shop .trader-offer{border:1px solid #355665!important;background:#1b3946!important;box-shadow:inset 0 1px #d4e8e810!important}
#app:has(.workspace) .trader-shop .trader-offer-item,
#app:has(.workspace) .trader-shop .trader-offer-item:hover{border-color:#496977!important;background:#14313d!important}
@media(max-width:800px){#app:has(.workspace) .trader-shop .trader-section-title{max-width:190px}}

/* Keep rarity and equipment comparisons readable without looping item-frame effects. */
.rarity-item.rarity-7,.rarity-item.rarity-8,.rarity-item.rarity-9,
.rarity-badge.rarity-9{animation:none!important;translate:none!important}
.rarity-power-8::before,.rarity-power-9::before{content:none!important}

/* Give the four character popup headers depth without hairline separators. */
body:has(#modal) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]) .modal-fixed-head{background:#0d2733!important;border:0!important}
body:has(#modal) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]) .modal-fixed-head .modal-close{background:#1d3b48!important;border:0!important;box-shadow:none!important}
body:has(#modal) #modal .modal:is([aria-label="Loadout"],[aria-label="Stats"],[aria-label="Buffs"],[aria-label="Skills"]) .modal-fixed-head .modal-close:hover{background:#294c59!important}

/* A soft contact shadow anchors the animated visitor to the courtyard. */
dialog.player-profile-dialog.public-site .player-profile-portrait:has(.is-rive-ready)::before{content:"";position:absolute;left:50%;bottom:1%;width:42%;height:7%;transform:translateX(-50%);background:radial-gradient(ellipse,#070f157d 12%,#070f153d 42%,transparent 72%);pointer-events:none}

/* Account dialogs share the login card's dark teal and gold palette. */
body:has(.public-site) .auth-site .account-card{background:#142e39!important;color:#eaf0e8}
body:has(.public-site) .auth-site .signed-in-note{color:#eaf0e8}
body:has(.public-site) .auth-site .signed-in-note [data-account-signout]{color:#ffc64a}
body:has(#modal) #modal .modal:has(.guest-signout-sheet){--game-sheet:#142e39;background:var(--game-sheet)!important;color:#eaf0e8}
#modal .guest-signout-sheet p{color:#b6c9cd}
#modal .guest-signout-sheet>[data-action="guest-leave"]{color:#ffc64a}
#modal .guest-signout-sheet>[data-action="close"]{background:#1b3743;color:#eaf0e8}

/* Inputs retain a quiet blue focus cue without the gold keyboard highlight. */
#app:has(.workspace) :is(input,select,textarea):focus-visible,
#app .public-site :is(input,select,textarea):focus-visible,
#modal :is(input,select,textarea):focus-visible{outline:none!important;border:0!important;box-shadow:0 0 0 2px #7aaeb654,0 4px 14px #06151d55!important}
#app :is(input,textarea):-webkit-autofill,
#modal :is(input,textarea):-webkit-autofill{-webkit-box-shadow:0 0 0 100px #142e39 inset!important;-webkit-text-fill-color:#eaf0e8!important;caret-color:#eaf0e8}

#app .feedback-choices input:focus-visible+span,
#app .feedback-topics input:focus-visible+span,
#app .generator-switch input:focus-visible+.generator-switch-track,
#app .creator-journey-stage .auth-methods [data-google-option]:focus-within{outline:none!important;box-shadow:0 0 0 2px #7aaeb654!important}
#app .feedback-message textarea:focus,
#app .feedback-email input:focus{outline:none!important;box-shadow:0 0 0 2px #7aaeb654,0 4px 14px #06151d55!important}

dialog.player-profile-dialog.public-site .player-profile-skill-total{grid-column:auto}

dialog.player-profile-dialog.public-site #player-profile-stats-panel{margin-top:22px}

.dock-character .dock-base-ready-dot{display:none!important}
/* Keep the recommendation highlight inside the card so mobile overflow clipping cannot trim its sides. */
#app:has(.workspace) #skills-content #gather-page .activity-card.is-recommended:not(.is-current)::after,
#app:has(.workspace) #skills-content #craft-page .activity-card.is-recommended:not(.is-current)::after{
 content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
 border:2px solid #dab75ecc;border-radius:inherit;
 box-shadow:inset 0 0 14px #edbc4926;
}

.public-site .leaderboard-avatar:has(.female-rive-headshot){border:0;box-shadow:0 3px 12px #06151b33}.leaderboard-avatar>.female-rive-headshot{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}.leaderboard-avatar>.female-rive-headshot canvas{display:block;width:100%!important;height:100%!important;transform:translateX(8%) scale(2.55);transform-origin:50% 0;pointer-events:none}

/* Keep other survivors hidden until their own saved Rive choices have loaded. */
dialog.player-profile-dialog.public-site .player-profile-portrait>:is(.male-rive-profile,.female-rive-profile) canvas{visibility:hidden}
dialog.player-profile-dialog.public-site .player-profile-portrait>:is(.male-rive-profile,.female-rive-profile).is-rive-ready canvas{visibility:visible}

/* Shared header back controls: centred artwork, no font-dependent arrow baseline. */
:is(button,a).game-back-control{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:none;width:42px;height:42px;min-height:42px;padding:0!important;border:0!important;border-radius:12px;line-height:1!important}
svg.game-back-arrow{display:block!important;flex:none;width:22px!important;height:22px!important;margin:0!important;fill:none!important;stroke:currentColor!important;stroke-width:2.5!important;stroke-linecap:round;stroke-linejoin:round;transform:none!important;pointer-events:none}
:is(.text-button,.garden-back,.creator-back):has(>.game-back-arrow){display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;line-height:1.2}

/* Public survivor records use the same type as the game. */
dialog.player-profile-dialog.public-site,dialog.player-profile-dialog.public-site button{font-family:Segoe UI,system-ui,sans-serif}
dialog.player-profile-dialog.public-site .player-profile-heading h2{font-family:Segoe UI,system-ui,sans-serif;font-size:clamp(24px,6vw,32px);font-weight:750;line-height:1.2;color:#f1dfb8;letter-spacing:-.4px}
dialog.player-profile-dialog.public-site .player-profile-clan{display:flex;align-items:center;gap:6px;margin:9px 0 13px;padding:7px 10px;border:0;border-radius:8px;background:#203e49;color:#b8cdd1;font:500 12px/1.3 Segoe UI,system-ui,sans-serif;cursor:pointer}
.player-profile-clan strong{color:#ffcf77}.player-profile-clan-chevron{display:block;flex:none;width:16px;height:16px;margin-left:4px;color:#ffcf77;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* The profile diorama supplies the backdrop on both screen sizes. */
.main-content:has([data-character-three]){background:#142633!important}
@media(max-width:380px){
 .character-rpg .mobile-character-actions{right:5px!important;padding:3px!important}
 .mobile-character-actions .character-shortcut>button{width:43px!important}
 .character-rpg .survivor-stage .dossier-level{max-width:calc(100vw - 155px)}
}
.character-rpg:has([data-character-three]) :is(.equipment-slot,.desktop-character-buffs>button){border:0!important;box-shadow:0 5px 16px #0002!important}


#modal .equipment-heading-row>h2{margin:0}

/* Shared dialog rhythm: plain blue surfaces, one warm accent, and useful spacing. */
#modal{--popup-yellow:#ffd166;--popup-yellow-soft:#ffe6ac;--popup-yellow-line:#ffd166;--popup-yellow-shadow:#c89439}
body:has(#modal) #modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"]){position:relative;background:var(--game-popup-bg,#122e3b)!important;border:0!important;border-radius:20px;box-shadow:0 22px 55px #020b1299!important}
#modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"])::before{content:"";position:absolute;inset:0 0 auto;z-index:3;height:5px;background:var(--popup-yellow-line);pointer-events:none}
body:has(#modal) #modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"]) .modal-fixed-head{min-height:64px;padding:18px 21px 10px!important;border:0!important;background:var(--game-popup-bg,#122e3b)!important}
#modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"]) .modal-fixed-head h2{margin:0;color:var(--popup-yellow-soft);font:700 24px/1.2 Georgia,serif;letter-spacing:0}
body:has(#modal) #modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"]) .modal-scroll-body:not(:has(.item-popup)){padding:10px 21px 21px!important;background:var(--game-popup-bg,#122e3b)!important}
#modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer) .modal-scroll-body>p:first-child{margin-top:0}
#modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer) .modal-scroll-body>p+p{margin-top:9px}
@media(max-width:600px){body:has(#modal) #modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"]) .modal-fixed-head{padding:16px 16px 9px!important}body:has(#modal) #modal .modal.modal-scroll-shell:not(.base3d-workshop-modal):not(.base3d-shelter-modal):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen):not(.equipment-drawer):not(.more-panel):not(.smelter-drawer):not([aria-label="Loadout"]):not([aria-label="Stats"]):not([aria-label="Buffs"]):not([aria-label="Skills"]) .modal-scroll-body:not(:has(.item-popup)){padding:7px 16px 17px!important}}
body:has(#modal) #modal .modal:not(.modal-scroll-shell):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen){position:relative;background:var(--game-popup-bg,#122e3b)!important;border:0!important;border-radius:20px;box-shadow:0 22px 55px #020b1299!important}
#modal .modal:not(.modal-scroll-shell):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen)::before{content:"";position:absolute;inset:0 0 auto;z-index:3;height:5px;background:var(--popup-yellow-line);pointer-events:none}
#modal .modal:not(.modal-scroll-shell):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen)>h2{margin:0 36px 12px 0;color:var(--popup-yellow-soft);font:700 24px/1.2 Georgia,serif;letter-spacing:0}
#modal .modal:not(.modal-scroll-shell):not(.loot-report):not(.reward-reveal-modal):not(.survivor-discovery-fullscreen)>p{margin:0 0 12px;line-height:1.5}

/* Compact event overview: the trophy and primary action stay above the details. */
.beta-event.is-compact{display:block;border:0;border-radius:18px;background:var(--game-popup-raised,#1c4355);box-shadow:none}
.beta-event.is-compact .beta-event-header{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;padding:16px 16px 0}
.beta-event.is-compact .beta-event-icon{display:grid;place-items:center}
.beta-event.is-compact .beta-event-icon .trophy-art{width:48px;height:56px;object-fit:contain;filter:drop-shadow(0 0 12px #ffbd5329)}
.beta-event.is-compact .beta-event-heading{min-width:0}
.beta-event-kicker{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.beta-event.is-compact .beta-event-heading .eyebrow{display:block;font-size:7px;letter-spacing:.13em;color:#ffd166;line-height:1.5}
.beta-event.is-compact .beta-event-heading h2{margin:0;color:#ffebbd;font:700 18px/1.25 Georgia,serif;text-align:left;text-wrap:balance}
.beta-event.is-compact .beta-event-action{display:flex;width:100%}.beta-event.is-compact .beta-event-action>button{width:100%}
.beta-event.is-compact .beta-event-action button{min-height:42px;padding:10px 12px;border:0;border-radius:10px;font-size:11px;line-height:1.3;white-space:normal}
.beta-event.is-compact .beta-event-joined{color:#ffd166;font-size:10px;line-height:1.5;white-space:nowrap}
.beta-event.is-compact .beta-event-body{padding:14px 16px 16px;gap:14px}
.beta-event.is-compact .beta-event-body>p{margin:0;font-size:11px;line-height:1.55;color:#b7ced2}
.beta-event.is-compact .event-objectives{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;width:100%;margin:0}
.beta-event.is-compact .event-objectives>div{min-width:0;padding:10px;gap:8px;border:0;background:var(--game-popup-bg,#122e3b);box-shadow:none;font-size:10px}
.beta-event.is-compact .event-objectives>div span{font-size:10px;line-height:1.4}
.beta-event.is-compact .event-objectives>div b{color:#ffd166;font-size:11px}
.beta-event.is-compact .event-prize{justify-content:space-between;gap:8px;padding:0!important;background:transparent;font-size:10px}
.beta-event.is-compact .event-prize strong{color:#ffd166}
.beta-event.is-compact .button-row{width:100%;display:flex;gap:8px;margin:0}
.beta-event.is-compact .button-row>button{flex:1;min-height:40px;font-size:11px;border:0}
@media(max-width:360px){.beta-event.is-compact .beta-event-header{grid-template-columns:40px minmax(0,1fr);gap:10px}.beta-event.is-compact .beta-event-icon .trophy-art{width:40px;height:48px}.beta-event.is-compact .beta-event-heading h2{font-size:17px}}

/* Filter dialogs keep their existing dimensions and sit in the viewport centre. */
#modal .modal-backdrop:has(> .work-filter-modal){align-items:center!important;justify-content:center!important}
.choice-backdrop{align-items:center!important}

/* Trophy details, the event honour, and reward reveals share a centered dialog. */
#modal .modal-backdrop.trophy-dialog-backdrop{align-items:center!important;justify-content:center!important;padding:14px!important;background:#06131bdc}
body:has(#modal) #modal .modal:is(.trophy-details-modal,.event-trophy-modal){position:relative!important;inset:auto!important;width:min(440px,100%)!important;max-width:440px!important;height:auto!important;max-height:calc(100dvh - 28px)!important;margin:auto!important;border:0!important;border-radius:20px!important;background:var(--game-popup-bg,#122e3b)!important;box-shadow:0 22px 55px #020b1299!important}
#modal .modal.trophy-details-modal{overflow:hidden!important}
#modal .modal.trophy-details-modal .modal-fixed-head{min-height:60px;padding:16px 18px 9px!important}
#modal .modal.trophy-details-modal .modal-scroll-body{min-height:0;overflow-y:auto;padding:5px 16px 16px!important;background:var(--game-popup-bg,#122e3b)!important}
#modal .trophy-details{display:flex;flex-direction:column;min-height:0}
#modal .trophy-details-hero{gap:5px;padding:14px 12px;background:radial-gradient(ellipse at 50% 8%,#ffd16629,transparent 68%),#204351}
#modal .trophy-details-hero h2{color:#fff0ce;font-size:18px;line-height:1.2}
#modal .trophy-details-hero p{margin:0;color:#e0c891;font-size:11px}
#modal .trophy-details-hero small{color:#c0d1d5;font-size:10px}
#modal .trophy-details-actions{margin-top:11px}
#modal .trophy-details-tiers{max-height:min(32dvh,260px);min-height:0;margin:12px 0 0;padding:0 2px 0 0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#52717b transparent}
#modal .trophy-details-tiers li{min-height:48px;padding:8px 11px;background:#204250;color:#cedfe0}
#modal .trophy-details-tiers li.earned{background:#2b5362;color:#f1f3e8}
#modal .trophy-details-tiers li.earned>span{background:#ffd166;color:var(--game-popup-bg,#122e3b)}
#modal .trophy-details-tiers b{font-size:12px}
#modal .trophy-details-tiers small{margin-top:2px;color:#c0d0d3;font-size:10px}
#modal .trophy-details [data-action="claim-achievement"]{margin-top:12px;background:#ffd166!important;color:var(--game-popup-bg,#122e3b)!important;box-shadow:0 4px 0 #b88131!important;animation:none!important}
body:has(#modal) #modal .modal.event-trophy-modal{padding:21px 18px 17px!important;overflow-y:auto!important}
#modal .event-trophy-modal>.modal-close{position:absolute;top:12px;right:12px;z-index:4}
#modal .event-trophy-unlock{gap:10px;padding:13px 4px 2px}
#modal .event-trophy-unlock>.eyebrow{margin:0;color:#ffd166;font-size:9px}
#modal .event-trophy-unlock h2{color:#fff0ce;font-size:20px}
#modal .event-trophy-unlock p{color:#c9dadd;font-size:12px}
#modal .event-trophy-actions{margin-top:5px;gap:8px}
#modal .event-trophy-actions button:not(.primary){border:0;background:#204250;color:#d9e7e8}
body:has(#modal) #modal .modal.trophy-claim-modal{overflow:hidden!important;background:var(--game-popup-bg,#122e3b)!important}
#modal .trophy-claim-modal .achievement-claim-moment{background:radial-gradient(ellipse at 50% 14%,#ffd16629,transparent 62%),var(--game-popup-bg,#122e3b)!important}
#modal .trophy-claim-modal .eyebrow{color:#ffd166}
@media(max-height:530px){#modal .trophy-details-tiers{max-height:120px}#modal .event-trophy-unlock{gap:6px}#modal .event-trophy-hero{height:104px}}

/* Companion details use compact, centered cards; discoveries have their own reveal. */
body:has(#modal) #modal .modal.pet-detail-modal{position:relative!important;inset:auto!important;width:min(430px,100%)!important;max-width:430px!important;height:auto!important;max-height:calc(100dvh - 28px)!important;margin:auto!important;padding:22px 18px 18px!important;overflow-y:auto!important;border:0!important;border-radius:20px!important;background:var(--game-popup-bg,#122e3b)!important;box-shadow:0 22px 55px #020b1299!important}
#modal .modal.pet-detail-modal>.modal-close{position:absolute;top:12px;right:12px;z-index:4}
body:has(#modal) #modal .modal.pet-detail-modal{display:flex!important;flex-direction:column;overflow:hidden!important}
#modal .pet-detail{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;gap:12px}
#modal .pet-detail-hero{display:grid;justify-items:center;align-content:start;flex:1 1 auto;min-height:0;gap:7px;padding:17px 15px 15px;overflow-y:auto;overscroll-behavior:contain;border-radius:15px;background:radial-gradient(ellipse at 50% 18%,#ffd16623,transparent 68%),#204351;text-align:center}
#modal .pet-detail-kicker{color:#ffd166;font-size:9px;font-weight:850;letter-spacing:.14em}
#modal .pet-modal-art{display:grid;place-items:center;width:168px;height:156px;max-width:100%;overflow:hidden}
#modal .pet-modal-art .pet-model{display:block;max-width:156px;max-height:156px}
#modal .pet-detail-hero h2{margin:0;color:#fff0ce;font:700 23px/1.2 Georgia,serif}
#modal .pet-detail-hero p{max-width:35ch;margin:0;color:#c9dadd;font-size:12px;line-height:1.45}
#modal .pet-detail-bonus{flex:none;margin:0;padding:10px 12px;border-radius:10px;background:#204250;color:#d2e1e2;font-size:11px;line-height:1.4;text-align:center}
#modal .pet-detail-actions{flex:none;margin:0}
@media(max-height:530px){#modal .pet-detail-hero{gap:4px;padding:8px 12px}#modal .pet-modal-art{width:98px;height:84px}#modal .pet-modal-art .pet-model{width:84px!important;height:84px!important;max-width:84px;max-height:84px}#modal .pet-detail-hero h2{font-size:20px}#modal .pet-detail-hero p{font-size:11px;line-height:1.3}#modal .pet-detail-bonus{padding:7px 9px;font-size:10px;line-height:1.25}}

/* Character stats use the compact centred game popup, even on phones. */
body:has(.survivor-stage) #modal .modal-backdrop:has(> .modal.character-stats-dialog){display:grid!important;place-items:center!important;justify-content:center!important;align-content:center!important;padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important}
body:has(.survivor-stage) #modal .modal.character-stats-dialog[aria-label="Stats"]{position:relative!important;inset:auto!important;width:min(470px,100%)!important;max-width:470px!important;height:min(var(--stats-dialog-height,520px),calc(100dvh - 14px))!important;min-height:0!important;max-height:calc(100dvh - 14px)!important;margin:auto!important;padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border:0!important;border-radius:20px!important;background:#122e3b!important;box-shadow:0 22px 55px #020b1299!important;animation:none!important}
#modal .modal.character-stats-dialog::before{content:"";position:absolute;inset:0 0 auto;z-index:3;height:5px;background:#ffd166;pointer-events:none}
body:has(.survivor-stage) #modal .modal.character-stats-dialog .modal-fixed-head{flex:none;min-height:68px;padding:16px 13px 9px 18px!important;border:0!important;border-radius:0!important;background:#122e3b!important}
#modal .modal.character-stats-dialog .modal-fixed-head h2{margin:0;color:#ffebbd;font:700 27px/1.1 Georgia,serif;letter-spacing:0}
body:has(.survivor-stage) #modal .modal.character-stats-dialog .modal-scroll-body{flex:1 1 auto;min-height:0;max-height:none;overflow:hidden;overscroll-behavior:contain;padding:4px 12px 12px!important;background:#122e3b!important}
#modal .modal.character-stats-dialog .stats-dossier{gap:9px}
#modal .modal.character-stats-dialog .stats-metric{padding:10px 6px}
#modal .modal.character-stats-dialog .stats-metric>strong{font-size:26px}
body:has(#modal) #modal .character-stats-dialog :is(.stats-metric,.stats-amulet,.stats-details-link,.stats-effect-row){background:#1c4355!important;box-shadow:0 5px 18px #071e2838!important}
body:has(#modal) #modal .character-stats-dialog .stats-details-content{background:transparent!important}

/* Equipped-item popups use the same blue and amber surfaces as Daily Goal. */
body:has(.survivor-stage) #modal .modal-backdrop:has(> .modal.character-equipped-dialog){display:grid!important;place-items:center!important;justify-content:center!important;padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important}
body:has(.survivor-stage) #modal .modal.character-equipped-dialog{position:relative!important;inset:auto!important;width:min(470px,calc(100vw - 14px))!important;max-width:470px!important;height:auto!important;max-height:calc(100dvh - 14px)!important;margin:auto!important;padding:0!important;border:0!important;border-radius:20px!important;overflow:hidden!important;background:#122e3b!important;box-shadow:0 22px 55px #020b1299!important;animation:none!important}
#modal .modal.character-equipped-dialog::before{content:"";position:absolute;inset:0 0 auto;z-index:3;height:4px;background:#ffd16b;pointer-events:none}
body:has(.survivor-stage) #modal .modal.character-equipped-dialog .modal-fixed-head{min-height:68px;padding:16px 13px 9px 18px!important;background:#122e3b!important}
#modal .modal.character-equipped-dialog .modal-fixed-head h2{margin:0;color:#ffebbd;font:700 27px/1.1 Georgia,serif;letter-spacing:0}
#modal .modal.character-equipped-dialog .modal-close{background:#2c5260!important;color:#e8f0ed!important}
body:has(.survivor-stage) #modal .modal.character-equipped-dialog .modal-scroll-body{padding:4px 12px 13px!important;background:#122e3b!important}
#modal .character-equipped-view{display:grid;gap:9px;min-width:0}
#modal .character-equipped-label{color:#b9cdd1;font-size:9px;font-weight:800;letter-spacing:.12em}
#modal .character-equipped-card,#modal .character-equipped-empty{border:0;border-radius:13px;background:#1c4355;box-shadow:0 5px 18px #071e2838}
#modal .character-equipped-card{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:start;gap:11px 12px;padding:13px}
#modal .character-equipped-art{display:grid;place-items:center;width:68px;height:68px;background:transparent}
#modal .character-equipped-empty>:is(svg,img),#modal .picker-unoccupied>:is(svg,img){display:block;flex:none;width:32px;height:32px;margin:0 8px;object-fit:contain;background:transparent;border:0;border-radius:0;box-shadow:none}
#modal .character-equipped-art :is(svg,img){display:block;max-width:64px;max-height:64px;object-fit:contain}
#modal .character-equipped-copy{display:grid;gap:7px;min-width:0}
#modal .character-equipped-copy h3{margin:0;color:#ffebbd;font:700 16px/1.2 Georgia,serif;overflow-wrap:anywhere}
#modal .character-equipped-effects{display:grid;gap:4px;color:#d7e5e5;font-size:11px;line-height:1.4;overflow-wrap:anywhere}
#modal .character-equipped-warning{margin:0;color:#ffc0ae;font-size:10px;font-weight:750}
#modal .character-equipped-durability{grid-column:1/-1;display:grid;gap:6px}
#modal .character-equipped-durability>span{display:flex;justify-content:space-between;color:#b9cdd1;font-size:10px}
#modal .character-equipped-durability b{color:#ffdc8c;font-variant-numeric:tabular-nums}
#modal .character-equipped-durability>[role=progressbar]{height:7px;overflow:hidden;border-radius:5px;background:#315768}
#modal .character-equipped-durability i{display:block;height:100%;border-radius:5px;background:#ffd16b}
#modal .character-equipped-card.is-broken .character-equipped-durability i{background:#ed8f92}
#modal .character-equipped-unequip{grid-column:1/-1;justify-self:end;min-height:36px;padding:8px 14px;border:0;border-radius:8px;background:#315768!important;color:#f2f5ee!important;font-size:11px;font-weight:800}
#modal .character-equipped-unequip:hover:not(:disabled){background:#3c687b!important}
#modal .character-equipped-empty{display:flex;align-items:center;gap:12px;min-height:94px;padding:12px;color:#e8f0ed}
#modal .character-equipped-empty strong{font-size:13px}
#modal .character-equipped-empty .character-empty-equip{flex:none;min-height:36px;margin-left:auto;padding:7px 13px;border:0;border-radius:9px;background:#ffd166!important;color:#102a37!important;font-size:11px;font-weight:800;box-shadow:0 3px 0 #b88735;cursor:pointer}
#modal .character-equipped-empty .character-empty-equip:hover{background:#ffe08b!important}
#modal .character-equipped-empty .character-empty-equip:focus-visible{outline:2px solid #fff0bf;outline-offset:2px}
#modal .character-slot-picker{display:grid;gap:10px;min-width:0}
#modal .character-slot-picker>p{margin:0;color:#acc0c6;font-size:12px}
#modal .character-slot-picker-list{display:grid;gap:8px;max-height:min(52dvh,480px);min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#modal .character-slot-picker-list::-webkit-scrollbar{display:none}
#modal .character-slot-choice{display:flex;align-items:center;gap:11px;width:100%;min-height:68px;padding:9px 12px;border:0;border-radius:11px;background:var(--game-popup-raised,#1c4355)!important;color:#e8f0f0;text-align:left;box-shadow:none;cursor:pointer}
#modal .character-slot-choice:hover:not(:disabled),#modal .character-slot-choice:focus-visible{background:#2c5260!important}
#modal .character-slot-choice:focus-visible{outline:2px solid #ffd166;outline-offset:-2px}
#modal .character-slot-choice:disabled{opacity:.65;cursor:not-allowed}
#modal .character-slot-choice.is-broken,#modal .character-slot-choice.is-broken:is(:hover,:focus-visible,:active){background:#5a3036!important}
#modal .character-slot-choice.is-broken .character-slot-choice-art{filter:grayscale(1) brightness(.55);opacity:.82}
#modal .character-slot-choice-art{display:grid;place-items:center;flex:none;width:44px;height:44px}
#modal .character-slot-choice-art :is(svg,img){display:block;width:44px;height:44px;object-fit:contain}
#modal .character-slot-choice-copy{display:grid;gap:4px;flex:1;min-width:0}
#modal .character-slot-choice-copy strong{overflow-wrap:anywhere;font-size:12px;line-height:1.2}
#modal .character-slot-choice-copy small{color:#bfd0d8;font-size:10px;line-height:1.3}
#modal .character-slot-choice-arrow{color:#ffd166;font-size:22px;line-height:1}
#modal .character-slot-picker-empty{margin:0;padding:18px 12px;border-radius:11px;background:var(--game-popup-raised,#1c4355);color:#acc0c6;font-size:12px}
@media(max-width:360px){#modal .character-equipped-card{grid-template-columns:58px minmax(0,1fr);gap:9px;padding:11px}#modal .character-equipped-art{width:58px;height:58px}#modal .character-equipped-art :is(svg,img){max-width:55px;max-height:55px}}

/* Settings controls use the same blue/amber palette as the game. */
.settings-choice{min-height:44px;gap:16px}
.settings-choice input[type=checkbox]{appearance:none;flex:none;width:38px;height:22px;border:0;border-radius:20px;background:var(--game-popup-raised);position:relative;cursor:pointer;box-shadow:none}
.settings-choice input[type=checkbox]::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#acc0c6}
.settings-choice input[type=checkbox]:checked{background:#ffd166}
.settings-choice input[type=checkbox]:checked::before{left:19px;background:#122e3b}
.settings-choice input:focus-visible,.volume-control input:focus-visible{outline:2px solid #ffd166;outline-offset:4px}
.volume-control input[type=range]{accent-color:#ffd166;cursor:pointer;min-height:32px;background:transparent}
.base3d-build-icon{object-fit:contain}

.settings-detail-card .volume-control input[type=range]{appearance:none;border:0;border-radius:0;box-shadow:none;background:transparent}
.settings-detail-card .volume-control input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:6px;background:#2c5260}
.settings-detail-card .volume-control input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;margin-top:-6px;border:0;border-radius:50%;background:#ffd166;box-shadow:none}
.settings-detail-card .volume-control input[type=range]::-moz-range-track{height:6px;border:0;border-radius:6px;background:#2c5260}
.settings-detail-card .volume-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border:0;border-radius:50%;background:#ffd166}

/* Trader details use the same compact storage header, without the old rarity wash. */
body:has(#modal) #modal .trader-item-popup .item-popup-head{background:none!important;box-shadow:none!important}
body:has(#modal) #modal .trader-item-popup .item-popup-art{background:var(--game-popup-raised,#1c4355)!important;box-shadow:none!important}
body:has(#modal) #modal .trader-item-popup .item-popup-actions>button.primary{background:#ffd166!important;color:#122e3b!important;box-shadow:none!important;min-height:46px}
body:has(#modal) #modal .trader-item-popup .item-popup-actions>button.primary:hover:not(:disabled){background:#ffdf91!important}
body:has(#modal) #modal .trader-item-popup .item-popup-actions>button.primary:disabled{background:#1c4355!important;color:#acc0c6!important;opacity:1}