/* Destination colour lives in banners and actions, leaving card art and reading
   surfaces intact. Bright gradients use dark ink in either appearance mode. */
:root {
 --section-a: #56e8d0;
 --section-b: #32cbe9;
 --section-ink: #102d40;
 --section-banner: linear-gradient(112deg,var(--section-a),var(--section-b));
}
.permanent-binder { --section-a:#58c9ff; --section-b:#829aff; }
.party-system { --section-a:#69e7b6; --section-b:#36d9cf; }
.workshop-system { --section-a:#c7b2ff; --section-b:#8fc6ff; }
.progression-system { --section-a:#ffe19a; --section-b:#ffb984; }
.profile-app { --section-a:#a3f0df; --section-b:#c7b9f5; }
.modal-shop { --section-a:#91ec77; --section-b:#31ddb2; }
.modal-camp { --section-a:#ffdb94; --section-b:#ffae96; }
.modal-traveller { --section-a:#bcb1ff; --section-b:#83d9f2; }
:is(.modal-relic,.modal-shrine,.modal-relics,.modal-reward) { --section-a:#e6b4ff; --section-b:#a5b8ff; }
:is(.modal-well,.modal-moonwell) { --section-a:#a5c6ff; --section-b:#71e6e3; }
.secondary-commissions { --section-a:#70f0c2; --section-b:#40cfdf; }
.pause-system { --section-a:#aecbfb; --section-b:#bdb8e7; }
:is(.permanent-binder,.party-system,.workshop-system,.progression-system,.profile-app,.exp-modal,.secondary-commissions,.pause-system) {
 --section-banner:linear-gradient(112deg,var(--section-a),var(--section-b));
}

/* Slanted light ribbons echo the collectible presentation without adding
   decoration over rules or borrowing another game's visual assets. */
:is(.permanent-binder,.party-system,.progression-system) > .exp-screen-heading,
.workshop-system .workshop-header,
.pause-system > header,
.secondary-commissions > h2 {
 background:linear-gradient(168deg,transparent 70%,#ffffff30 70.3%),var(--section-banner);
 color:var(--section-ink); border:1px solid #ffffff55; border-radius:20px;
 padding:12px; box-shadow:0 5px 18px var(--pm-ui-shadow);
}
:is(.permanent-binder,.party-system,.progression-system) > .exp-screen-heading :is(h2,small,.exp-money,.exp-money b),
.workshop-system .workshop-header h2,
.pause-system > header :is(h2,.exp-eyebrow),
.secondary-commissions > h2 { color:var(--section-ink); }
/* The older party owner marks muted subtitles important. Keep banner copy
   dark over the bright mint surface instead of inheriting pale night text. */
.shell .party-system .exp-screen-heading small { color:var(--section-ink)!important; }
:is(.permanent-binder,.party-system,.progression-system) > .exp-screen-heading > .exp-icon-button {
 background:#ffffff88; color:var(--section-ink); border-color:#ffffff88;
}
.workshop-system .workshop-header { padding-right:52px; }

.home-system .home-tableau {
 background:linear-gradient(168deg,transparent 73%,var(--pm-ui-surface-soft) 73.3%),linear-gradient(110deg,#77dacf40,#779feb55,#c2a4ed40);
 border-radius:28px; box-shadow:inset 0 1px #ffffff40;
}
.home-destination[data-exp-action="journal"] { --destination:#82b7ff; }
.home-destination[data-exp-action="hero-shop"] { --destination:#c5a4ff; }
.home-destination[data-exp-action="upgrades"] { --destination:#edbe68; }
.home-destination[data-exp-action="arena"] { --destination:#f59aab; }
.home-system .home-destination > .exp-icon {
 color:var(--destination); filter:drop-shadow(0 2px 5px color-mix(in srgb,var(--destination) 25%,transparent));
}
html[data-theme="light"] .home-system .home-destination > .exp-icon { color:color-mix(in srgb,var(--destination) 60%,#18335c); }
.profile-overview-mode .profile-identity { background:var(--section-banner); }
.profile-overview-mode .profile-identity-scene > img { opacity:.15; filter:saturate(1); }
.profile-overview-mode .profile-identity-scene:after { background:linear-gradient(165deg,transparent 65%,#ffffff50 65.3%); }
.profile-overview-mode .profile-identity :is(h2,.exp-eyebrow) { color:var(--section-ink); }
.profile-overview-mode .profile-identity > .profile-avatar { border:3px solid #eaffff; box-shadow:0 0 0 4px #39cebd80,0 5px 16px #273d6740; }

/* Keep the location illustration visible; a coloured horizon identifies stops. */
.shell .exp-modal:has([data-stop-heading],[data-stop-shop]) > .exp-location-art {
 background:var(--section-banner); border-bottom:3px solid var(--section-a);
}
.shell .exp-modal:has([data-stop-heading],[data-stop-shop]) > .exp-location-art:after {
 background:linear-gradient(180deg,transparent 15%,color-mix(in srgb,var(--section-a) 28%,transparent) 65%,var(--pm-ui-surface));
}
.pack-experience.reward-view-relics .pack-heading {
 background:linear-gradient(168deg,transparent 70%,#ffffff38 70.3%),var(--section-banner);
 padding:14px; border-radius:18px; color:var(--section-ink);
}
.pack-experience.reward-view-relics .pack-heading :is(h2,.exp-eyebrow) { color:var(--section-ink); }
.pack-experience .reward-step-navigation .reward-step[aria-pressed=true] {
 background:var(--section-banner); color:var(--section-ink); font-weight:650;
}
.shell :is(.exp-page,.exp-modal,.home-system,.profile-app) .exp-button.primary:not(:disabled),
.shell .exp-modal.modal-shop .exp-shop-grid .exp-shop-item .exp-button[data-exp-action="buy-shop"]:not(:disabled),
.shell .exp-modal:has([data-stop-heading],[data-stop-shop]) .exp-button.primary:not(:disabled) {
 background:var(--section-banner); color:var(--section-ink);
 border:1px solid #ffffff70;
 box-shadow:inset 0 1px #ffffff70,0 5px 14px color-mix(in srgb,var(--section-b) 20%,transparent);
}
.permanent-binder .binder-ownership-shortcuts [aria-pressed=true] {
 background:var(--section-banner); color:var(--section-ink); border-color:transparent;
}
.progression-system .ship-catalogue-tabs [aria-pressed=true] { border-color:var(--section-b); }
:is(.pack-relics,.modal-relic,.modal-shrine,.modal-relics) .exp-relic-choice.selected {
 border-color:var(--section-a);
 background:linear-gradient(115deg,color-mix(in srgb,var(--section-a) 17%,var(--pm-ui-surface)),var(--pm-ui-surface));
 box-shadow:inset 3px 0 var(--section-a),0 3px 12px var(--pm-ui-shadow);
}
.secondary-commissions .commission-list > article:has(.primary:not(:disabled)) {
 background:linear-gradient(115deg,color-mix(in srgb,var(--section-a) 17%,var(--pm-ui-surface)),var(--pm-ui-surface));
 padding:12px; border-radius:18px; border:1px solid var(--section-a);
}
@media (max-width:359px), (max-height:500px) and (orientation:landscape) {
 :is(.permanent-binder,.party-system,.progression-system) > .exp-screen-heading { padding:8px; border-radius:16px; gap:8px; }
 :is(.permanent-binder,.party-system,.progression-system) > .exp-screen-heading h2 { font-size:22px; }
 .pack-experience.reward-view-relics .pack-heading { padding:10px; }
}
@media (max-width:500px) {
 .progression-system > .exp-screen-heading { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; }
 .progression-system > .exp-screen-heading > div { grid-column:2; grid-row:1; }
 .progression-system > .exp-screen-heading > .exp-icon-button:last-child { grid-column:3; grid-row:1; }
 .progression-system > .exp-screen-heading > .ship-heading-bank { grid-column:2; grid-row:2; display:flex; align-items:center; gap:6px; justify-content:flex-start; }
 .progression-system > .exp-screen-heading > .ship-heading-bank > small { display:none; }
 .progression-system > .exp-screen-heading h2 { word-break:normal; overflow-wrap:normal; }
}