/* The foundry's control surfaces. Layout and simulation live in style.css;
   this layer gives the surrounding interface the same authored materials as the scene. */
:root {
  --ui-brass: #ad8260;
  --ui-seam: #61506f;
  --ui-face: linear-gradient(145deg, #342b46, #241e36 65%);
  --ui-inset: inset 0 1px 0 #fff0cc12, inset 0 -2px 0 #100d2080;
  --ui-shadow: 0 5px 12px #0b081b38;
}

/* 01. Identity, broadcast, and save status */
#topbar {
  background: linear-gradient(100deg, #30233c, #1f1a31 40%, #262037);
  border-bottom: 1px solid #83644f;
  box-shadow: inset 0 1px 0 #fff0cc14, 0 3px 16px #08061355;
}
.logo { letter-spacing: 3px; }
.tagline { color: #c2a8b8; }
.brand-mark { filter: drop-shadow(0 2px 4px #0b081b88); }
#ticker { color: #beaec9; }
#ticker-text::before { content: '✦'; color: var(--gold); margin-right: 12px; }
.topbar-actions { gap: 8px; }
#save-dot { border-radius: 50%; transform: none; box-shadow: 0 0 0 4px #74ded30a; }
#starnet-discovery {
  background: linear-gradient(90deg, #192831, #201b32 55%);
  border-bottom-color: #4b435b;
}
#starnet-save-status { display: flex; align-items: center; gap: 8px; }
#starnet-save-status::before {
  content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--plasma); box-shadow: 0 0 0 3px #74ded312;
}
.needs-attention #starnet-save-status::before { background: var(--bad); }
#starnet-open { border-color: #42676e; background: linear-gradient(#29404a, #1d2a38); }
#starnet-reminder { border-top-color: #74ded31c; }
#starnet-reminder-title { color: #b0eee1; }

/* 02. Five illustrated destinations, with a recessed secondary rail */
#content-panel {
  background: radial-gradient(ellipse at 100% 0, #46314c35, transparent 60%), #1b172c;
  border-left: 1px solid #6d51674d;
}
#tabs {
  padding: 10px 14px 9px; gap: 6px; overflow: visible;
  background: linear-gradient(#322a42, #241e35);
  border-bottom: 1px solid #796071;
  box-shadow: inset 0 1px 0 #fff0cc0c, 0 3px 8px #0c091c40;
}
.tab {
  flex: 1 1 0; min-width: 0; min-height: 76px; padding: 6px 3px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px;
  border: 1px solid transparent; border-radius: 9px; font-size: 12px;
  white-space: normal; color: #c8b9d5; clip-path: none;
}
.tab-emblem { width: 36px; height: 36px; opacity: .73; filter: saturate(.7); transition: filter .18s, opacity .18s, transform .18s; }
.tab.on {
  background: radial-gradient(ellipse at 50% 0, #ffcd7324, transparent 90%), linear-gradient(#463344, #30253b);
  border: 1px solid #b28a66; color: var(--hot); box-shadow: var(--ui-inset), 0 2px 4px #100d2055;
}
.tab.on::after {
  content: ''; position: absolute; bottom: -5px; left: calc(50% - 3px); width: 6px; height: 6px;
  transform: rotate(45deg); background: var(--gold); border: 1px solid #76563f;
}
.tab.on .tab-emblem { opacity: 1; filter: drop-shadow(0 2px 4px #ffb45124); }
#subtabs {
  padding: 8px 16px; gap: 5px; background: linear-gradient(#171426, #201a30);
  border-bottom: 1px solid #51405f; box-shadow: inset 0 2px 5px #09071255;
}
.subtab {
  padding: 7px 12px; border: 1px solid transparent; border-radius: 5px;
  font-size: 12px; color: #bbadca; transition: background .16s, color .16s, border-color .16s;
}
.subtab[aria-current=page] {
  color: var(--gold); border-color: #746076; background: linear-gradient(#42344b, #30283e);
  box-shadow: var(--ui-inset);
}
.subtab[aria-current=page]::before { content: '◆'; font-size: 7px; margin-right: 7px; vertical-align: 2px; }

/* 03. Engraved page plates. Art is decorative; every heading stays live text. */
.page { padding-top: 20px; }
.page-intro {
  --intro-art: url('../assets/ui/build.svg'); --intro-glow: #f6a454;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 24px 110px 20px 22px; margin-bottom: 24px;
  border: 1px solid #81627a; border-top-color: #b58c78; border-radius: 3px 18px 3px 18px;
  background: radial-gradient(ellipse at 100% 10%, color-mix(in srgb, var(--intro-glow) 13%, transparent), transparent 70%),
    url('../assets/ui/orbits.svg') right center / auto 230px no-repeat, linear-gradient(115deg, #32273e, #211d34);
  box-shadow: var(--ui-inset), var(--ui-shadow);
}
.page-intro::before {
  content: ''; position: absolute; z-index: -1; right: 10px; top: 30px; width: 90px; height: 90px;
  background: var(--intro-art) center / contain no-repeat; transform: rotate(-8deg);
  filter: drop-shadow(0 10px 12px #0d091b88);
}
.page-intro::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--intro-glow), transparent 75%);
}
.page-intro h2 { font-size: clamp(25px, 2.1vw, 32px); line-height: 1.15; color: #fff0d8; text-wrap: balance; }
.page-intro p { font-size: 13px; line-height: 1.6; color: #c9b9cf; }
.eyebrow { font-size: 8px; line-height: 1.7; letter-spacing: 1.7px; color: var(--gold); margin-bottom: 12px; }
.intro-index { display: block; font: 8px/1.6 var(--font-num); letter-spacing: 1px; color: #b098b3; margin-top: 20px; }
.intro-collection { --intro-art: url('../assets/ui/collection.svg'); --intro-glow: #74ded3; }
.intro-cosmos { --intro-art: url('../assets/ui/cosmos.svg'); --intro-glow: #b4a0f5; }
.intro-ledger, .intro-settings { --intro-art: url('../assets/ui/ledger.svg'); --intro-glow: #b4a0f5; }
.intro-starnet { --intro-art: url('../assets/ui/cosmos.svg'); --intro-glow: #74ded3; }
.shelf-head h2, .shop-title { color: #ead4b8; letter-spacing: 1.8px; font-size: 11px; }
.shelf-head h2::before, .shop-title::before {
  content: ''; display: inline-block; position: static; width: 5px; height: 5px;
  margin: 0 9px 2px 1px; background: var(--gold); transform: rotate(45deg); border: 0;
}
.shelf-head h2 span { color: var(--plasma); }

/* 04. Tactile buttons, selector tracks, and visible keyboard focus */
.action, .icon-btn, .toggle, .net-chip {
  background: linear-gradient(#42354c, #2a233b); border: 1px solid #806780;
  border-bottom-color: #a57e83; border-radius: 6px; box-shadow: var(--ui-inset), 0 2px 3px #09061650;
  color: #ffdfaa; letter-spacing: .7px;
  transition: background .16s, border-color .16s, box-shadow .16s, color .16s;
}
.action { padding: 9px 14px; text-decoration: none; }
.icon-btn { background: linear-gradient(#372e45, #211c31); color: #dac7dd; }
.action:disabled, .icon-btn:disabled, .net-chip:disabled { opacity: .5; box-shadow: none; }
.action:active:not(:disabled), .icon-btn:active:not(:disabled), .subtab:active, #buy-modes button:active {
  box-shadow: inset 0 2px 5px #0b071a90; background: #241d32;
}
#buy-modes { padding: 3px; gap: 3px; border: 1px solid #68516d; border-radius: 7px; background: #171322; box-shadow: inset 0 2px 3px #0004; }
#buy-modes button { min-width: 38px; border-radius: 4px; color: #bcacc8; }
#buy-modes button.on { color: #fff0cd; background: linear-gradient(#88614e, #533747); border-color: #c99b6a; box-shadow: inset 0 1px 0 #ffe8b144, 0 2px 4px #0005; }
.filters { padding: 5px; gap: 5px; background: #151222; border: 1px solid #51415f; border-radius: 8px; box-shadow: inset 0 2px 5px #09061255; }
.filters .action { flex: 1 1 auto; padding: 5px 8px; font-size: 11px; letter-spacing: 0; background: transparent; border: 1px solid transparent; box-shadow: none; color: #c5b5cd; }
.filters [aria-pressed=true] { background: linear-gradient(#4d3c50, #32283e); border-color: #937083; color: #ffe0a8; box-shadow: var(--ui-inset); }
button:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--plasma); outline-offset: 3px;
}
#tabs .tab:focus-visible, #bottomnav .navbtn:focus-visible { outline-offset: -3px; }

/* 05. Foundry machine cards: display bay, serial number, output, purchase lever */
#buildings { counter-reset: machine; gap: 14px; }
.b-row {
  counter-increment: machine; padding: 16px; border-radius: 4px 14px 4px 14px;
  border: 1px solid #775d75; border-top-color: #95717c;
  background: linear-gradient(90deg, #ffcd731c var(--income-share, 0%), transparent 0), radial-gradient(ellipse at 0 0, #ffcd7310, transparent 65%), var(--ui-face);
  box-shadow: var(--ui-inset), var(--ui-shadow);
}
.b-row:hover { background: linear-gradient(90deg, #ffcd7324 var(--income-share, 0%), transparent 0), radial-gradient(ellipse at 0 0, #ffcd7318, transparent 65%), var(--ui-face) !important; }
.b-row::after {
  content: ''; position: absolute; pointer-events: none; right: 6px; top: 6px; width: 3px; height: 3px;
  border-radius: 50%; background: #b99791; box-shadow: -1px 1px 0 #151023;
}
.b-icon {
  position: relative; height: 100%; min-height: 95px; border-radius: 8px;
  background: radial-gradient(ellipse at 50% 40%, #ffb76222, transparent 70%), linear-gradient(#191626, #2a2338);
  border: 1px solid #57465e; box-shadow: inset 0 2px 7px #100b2270;
}
.b-icon::after { content: 'MK / ' counter(machine, decimal-leading-zero); position: absolute; bottom: 7px; left: 0; right: 0; font: 7px var(--font-num); color: #a28aad; letter-spacing: .8px; text-align: center; }
.b-icon .art { padding-bottom: 12px; filter: drop-shadow(0 6px 4px #0c081a55); }
.b-name { color: #fce8cc; }
.b-count { padding: 3px 5px; border: 1px solid #95725266; border-radius: 4px; background: #ffcd7310; font-size: 10px; vertical-align: 1px; }
.b-sub { font-size: 11px; color: #c3b1c9; }
.b-milestone .bar { height: 5px; border: 1px solid #685064; background: #120f1d; overflow: hidden; border-radius: 3px; }
.b-milestone .bar i { background: linear-gradient(90deg, #b57348, #ffda8f); box-shadow: 0 0 7px #ffd48466; }
.bar-label { color: #bca6c7; }
.b-cost { background: linear-gradient(#6b493f, #443040); border-color: #c39465; border-bottom-color: #e4ac71; border-radius: 5px; box-shadow: var(--ui-inset), 0 2px 3px #0003; }
.b-cost strong { color: #ffe6b6; }
.b-cost:not(:disabled) .cost-num { color: #fff0cc; }
.b-cost:disabled { background: linear-gradient(#241e34, #1c182a); border-color: #56465f; box-shadow: inset 0 1px 3px #0a061b66; }
.b-row.mystery { border-color: #4e405d; }
.b-row.mystery .b-icon { filter: none; }
.b-row.mystery .b-icon .art { filter: brightness(0) opacity(.4); }

/* 06. Tempering sockets, collection displays, and collapsible drawers */
.inventory-section { border-top: 1px solid #7c5b70; }
.inventory-section summary, #forge-drawer > summary, #forge-effects > summary, #active-charts > summary {
  color: #e9d6bb; letter-spacing: 1px; font-weight: 600;
}
.inventory-section summary { padding: 8px 10px; background: linear-gradient(90deg, #58405255, transparent); border-left: 2px solid #d4a172; }
#temper-queue { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 10px 0 16px; }
#temper-queue .queue-slot { margin: 0; }
.queue-slot { border-color: #5b4969; border-radius: 5px; background: linear-gradient(#191525, #241c33); box-shadow: inset 0 2px 6px #0b071a66; }
.queue-slot b { font-size: 11px; color: #d4c1d9; }
.queue-slot small { font-size: 8px; letter-spacing: .6px; margin-bottom: 3px; }
.active-slot { border: 1px solid #b28a67; background: radial-gradient(ellipse at 0 50%, #ffbc7022, transparent), #2a2036; }
.active-slot small { color: var(--gold); }
.empty-slot { font-size: 26px; color: #695575; text-shadow: 0 2px 0 #100c1c; }
.u-tile, .v-tile {
  position: relative; border-radius: 5px 12px 5px 12px; padding: 15px 10px 12px;
  background: radial-gradient(circle at 50% 33px, #b4a0f514, transparent 75px), linear-gradient(#30253f, #221b32);
  border-color: #796084; box-shadow: var(--ui-inset), 0 3px 8px #0d091b44;
}
.u-tile .u-icon { width: 88px; height: 78px; }
.u-tile .art, .v-tile .art { filter: drop-shadow(0 5px 4px #0c081b80); }
.u-tile .tile-name { color: #f0ddc8; }
.u-tile .u-cost { border-top: 1px solid #b4907355; width: 100%; padding-top: 8px; }
.u-tile.afford { border-color: #bd956a; background: radial-gradient(circle at 50% 35px, #ffc77924, transparent 85px), linear-gradient(#3b2b42, #291e35); }
.u-tile:disabled { opacity: .78; }
.v-tile.q-masterwork, .v-tile.alloy.r-2 { background: radial-gradient(ellipse at 50% 0, #74ded320, transparent 80%), #211e32; }
.v-tile.q-mythic, .v-tile.alloy.r-3 { background: radial-gradient(ellipse at 50% 0, #b4a0f530, transparent 80%), #2c203c; }
.v-q { padding: 3px 6px; border-radius: 4px; background: #0f0b1c66; letter-spacing: .8px; }
#forge-drawer, #forge-effects, #active-charts { border-color: #715671; border-radius: 6px; background: linear-gradient(#30253e, #211a30); box-shadow: var(--ui-inset); }

/* 07. Celestial atlas and prestige instruments */
.sky-region { border-radius: 4px 16px 4px 16px; border-color: #7a608d; background: url('../assets/ui/orbits.svg') top right / 280px auto no-repeat, linear-gradient(130deg, #30243f, #191a30); box-shadow: var(--ui-inset); }
.sky-region h3 { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #ecdcbd; }
.sky-region h3::before { content: '✦'; color: var(--violet); }
.sky-region[data-region=foundry] h3::before { color: var(--gold); }
.sky-region[data-region=encounters] h3::before { color: var(--plasma); }
.ach { border-color: #65547933; background: #19142755; }
.ach.unlocked { background: radial-gradient(ellipse at 50% 20%, #ffcd7322, transparent 85%), #34253e; border-color: #c09365; box-shadow: inset 0 1px 0 #ffe1a322; }
.ach-name { color: #d9c9e2; }
.prestige-hero { border-radius: 5px 20px 5px 20px; border-color: #8e75a7; background: url('../assets/ui/orbits.svg') center top / 360px auto no-repeat, radial-gradient(ellipse at 50% 10%, #745f9c44, transparent 70%), #251e36; box-shadow: var(--ui-inset), var(--ui-shadow); }
.nova-hero { border-top-color: #c6a575; }
.sing-hero { background-color: #1e192f; }
.prestige-art { width: 160px; height: 160px; filter: drop-shadow(0 0 16px #b6a0ef22); }
.prestige-hero h2 { letter-spacing: 4px; color: #f3e4cf; }
.prestige-numbers { flex-wrap: wrap; }
.prestige-numbers > div { background: linear-gradient(#191423, #30233b); border: 1px solid #635173; border-radius: 5px; box-shadow: inset 0 2px 6px #0b081b66; }
.prestige-numbers label { color: #c8b5d1; }
.hold-btn { border-radius: 6px; border: 1px solid #ad84bf; background: repeating-linear-gradient(120deg, #b4a0f506 0 8px, transparent 8px 16px), linear-gradient(#4a345e, #30243f); box-shadow: var(--ui-inset); }
.hold-btn .hold-fill { border-right: 2px solid #fff0cc88; }
.nova-btn { border-color: #c29573; background: linear-gradient(#624251, #3d2a42); }
.shop-card { border-radius: 5px 12px 5px 12px; background: var(--ui-face); border-color: #6c557e; box-shadow: var(--ui-inset); }
.shop-card.afford { border-color: #b297cd; background: radial-gradient(ellipse at 0 0, #b4a0f51c, transparent 70%), var(--ui-face); }
.shop-card.maxed { border-color: #659f97; background: linear-gradient(130deg, #263c3c, #251f36); }
.sc-lvl { background: #120e2044; border: 1px solid #7b6587; border-radius: 4px; padding: 3px 6px; }
.sc-cost { padding-top: 10px; border-top: 1px solid #a284ba33; }
#cosmos-teaser { padding: 20px; border: 1px solid #69557d; border-radius: 8px; background: #2d233e; color: #dcccdf; text-align: center; line-height: 1.8; }

/* 08. Settings: labeled instrument groups and readable physical switches */
#settings-body { gap: 16px; }
.settings-group { padding: 0 16px; border: 1px solid #705774; border-radius: 5px 14px 5px 14px; background: var(--ui-face); box-shadow: var(--ui-inset), var(--ui-shadow); }
.settings-heading { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid #7f64805c; }
.settings-emblem { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #816381; border-radius: 10px; background: linear-gradient(#1a1528, #3a2942); box-shadow: inset 0 2px 5px #10091d66; }
.settings-emblem img { width: 34px; height: 34px; }
.settings-heading h3 { font-size: 16px; font-weight: 600; color: #f5dfbf; }
.settings-heading p { font-size: 12px; color: #bdaac7; margin-top: 2px; }
.settings-group .setting-row { padding: 14px 0; gap: 12px; border-bottom: 1px solid #b895be19; }
.settings-group .setting-row:last-child { border: 0; }
.settings-group .setting-row > label { flex-basis: 130px; font-size: 13px; }
.setting-row label small { display: block; font-size: 11px; line-height: 1.5; color: #b8a5c3; margin-top: 4px; }
.toggle { flex: none; min-width: 84px; padding: 8px 10px 8px 36px; position: relative; font: 10px var(--font-num); color: #a9ede0; border-color: #619a90; background: linear-gradient(#264440, #203137); box-shadow: inset 0 2px 5px #0b171d66; }
.toggle::before { content: ''; position: absolute; left: 10px; top: calc(50% - 8px); width: 16px; height: 16px; border: 1px solid #d0ffea; border-radius: 4px; background: linear-gradient(#bdffdf, #69bca9); box-shadow: 0 0 10px #74ded325, 0 2px 3px #0005; }
.toggle.off { color: #baadc7; background: linear-gradient(#1c1729, #2c2239); border-color: #6d567b; text-decoration: none; }
.toggle.off::before { background: linear-gradient(#82728e, #4a3c58); border-color: #9b88aa; box-shadow: 0 2px 3px #0005; }
.settings-danger { border-color: #ad6c7155; background: linear-gradient(120deg, #452a3933, #241c32); }
.wipe-btn { color: #ffc3b7; border-color: #ab737a; background: repeating-linear-gradient(120deg, #f28d8308 0 7px, transparent 7px 14px), #3b2535; }
.settings-danger label { color: #efb7af; }
.privacy-links { font-size: 11px; gap: 10px 16px; color: #b9a5c4; padding: 4px 0; }
.privacy-links a { text-underline-offset: 4px; }
.credits { border-top: 1px solid #584465; padding-top: 16px; color: #a48baf; line-height: 1.7; }
textarea, .net-input, #net-url, #net-addcode, #import-text { background: linear-gradient(#151122, #221b30); border: 1px solid #81698e; border-radius: 6px; color: var(--text); box-shadow: inset 0 2px 6px #07031055; }
textarea::placeholder, input::placeholder { color: #a891b5; }

/* 09. Ledger and network records */
#forge-foot { max-width: none; width: 100%; gap: 8px; margin-bottom: 20px; border: 0; padding: 0; }
#forge-foot .mini-stat { flex: 1; padding: 14px 6px; border: 1px solid #765d7a; border-radius: 6px; background: linear-gradient(#3a2d43, #211b31); box-shadow: var(--ui-inset); }
#forge-foot .mini-stat span { color: var(--gold); font-size: 14px; }
#stats-list { border: 1px solid #66516f; border-radius: 8px; overflow: hidden; }
.stat-row { padding: 12px 14px; border-bottom: 1px solid #a48daf15; }
.stat-row:nth-child(odd) { background: #b4a0f508; }
.stat-row:last-child { border: 0; }
.stat-row label { color: #c4b0ce; font-size: 12px; }
.stat-row span { font-size: 11px; color: #eddbc5; }
#page-stats > details { padding: 12px; margin-top: 16px; border: 1px solid #5c4769; border-radius: 6px; background: #292036; }
#page-stats > details summary { display: flex; align-items: center; font-size: 11px; letter-spacing: 1px; color: var(--gold); cursor: pointer; }
#session-log small { color: var(--plasma); }
#performance-profiler, .net-card { border: 1px solid #756080; border-radius: 5px 14px 5px 14px; background: var(--ui-face); box-shadow: var(--ui-inset); }
.net-sync-guide { border-color: #56857e; background: linear-gradient(130deg, #23403e77, #211b33); border-radius: 8px; }
.net-sync-guide b { color: #b0e8da; }
.net-tabs { gap: 5px; padding: 5px; border-radius: 6px; background: #171221; }
.net-chip.on { background: linear-gradient(#415652, #293b41); border-color: #75afa0; color: #c1f2de; }
.net-row { padding: 12px; border-bottom: 1px solid #76618444; }
.net-row.me { background: #74ded312; border-left: 2px solid var(--plasma); }
.net-rank { color: #cca878; }
.net-conflict { border-radius: 8px; background: #402736; border-color: #bf7e7e; }

/* 10. Dialogs, tutorial cards, and reward messages */
#modal-root { background: #0c091dcc; backdrop-filter: blur(7px); }
.modal {
  border: 1px solid #b68b80; border-top-color: #e4bb8e; border-radius: 6px 22px 6px 22px;
  background: url('../assets/ui/orbits.svg') right top / 250px auto no-repeat, linear-gradient(145deg, #3c2c48, #211a32 70%);
  box-shadow: inset 0 1px 0 #fff0cc24, 0 24px 100px #05020bc9, 0 0 0 5px #a4829e0c;
}
.modal h2 { color: #ffe5bc; letter-spacing: 1.5px; }
.modal p { color: #ccbad6; }
.modal .modal-dim { color: #b7a3c2; }
.detail-sheet > .art { padding: 10px; width: 144px; height: 144px; border: 1px solid #9f7f9455; border-radius: 50%; background: radial-gradient(#ffce7822, #18132388 70%); box-shadow: inset 0 0 0 5px #d2afd208, 0 8px 18px #0c081c66; }
.detail-close, .modal-btn { background: linear-gradient(#785044, #503344); border-color: #bd936b; color: #ffe6b9; }
.draft-card, .t-offer { border-radius: 6px 12px 6px 12px; background: linear-gradient(#332741, #20192e); border-color: #80628e; box-shadow: var(--ui-inset); }
.draft-card > .art { filter: drop-shadow(0 5px 6px #0c081b77); }
.t-main span { display: block; margin-top: 4px; }
.primer-entry { padding: 16px; margin: 12px 0; background: #18132577; border: 1px solid #6f557e; border-radius: 6px; }
.primer-entry > b { color: #f6daab; }
#tut-card { border-color: #af8867; background: radial-gradient(ellipse at 0 0, #ffcd7317, transparent 80%), linear-gradient(#3b2b42, #241c33); box-shadow: var(--ui-inset); }
.tut-tag { color: var(--gold); }
.toast { border: 1px solid #947389; border-left: 3px solid var(--accent, var(--gold)); border-radius: 4px 12px 4px 12px; background: linear-gradient(120deg, #3e2e48, #251c35); box-shadow: inset 0 1px 0 #ffe5b21c, 0 8px 30px #07031180; }
.toast b { font-size: 13px; color: #ffe6bc; }
.toast span { color: #d0bdd7; }
.toast-close { color: #d8bbd8; }
.privacy-dialog { font-family: var(--font-body); border-color: #b48c89; border-radius: 6px 22px 6px 22px; background: linear-gradient(140deg, #382940, #211a32); }
.privacy-dialog h2 { font-family: var(--font-display); color: #ffe0ae; }
.privacy-dialog button { font-family: var(--font-body); border-color: #a27c8c; background: linear-gradient(#514057, #32243f); color: #ffe5bc; }

/* SVG fittings are nine-sliced: corners never stretch, and every size of card
   or button shares real illustrated metalwork. Overlays cannot intercept input.
   State colors remain on the live surface underneath the transparent center. */
:where(.b-row, .settings-group, .u-tile, .v-tile, .sky-region, .shop-card,
    .prestige-hero, .modal, .draft-card, .t-offer, .net-card, #tut-card) {
  --frame-art: url('../assets/ui/panel-violet.svg');
}
:is(.b-row, .settings-group, .u-tile, .v-tile, .sky-region, .shop-card,
    .prestige-hero, .modal, .draft-card, .t-offer, .net-card, #tut-card) {
  position: relative; isolation: isolate; border-color: transparent;
  border-radius: 10px;
}
:is(.b-row, .settings-group, .u-tile, .v-tile, .sky-region, .shop-card,
    .prestige-hero, .modal, .draft-card, .t-offer, .net-card, #tut-card)::before {
  content: ''; display: block; position: absolute; inset: -1px; z-index: -1;
  border: 16px solid transparent; border-image: var(--frame-art) 28 / 16px / 0 stretch;
  background: none; border-radius: 0; clip-path: none; pointer-events: none;
}
.b-row { --frame-art: url('../assets/ui/panel-brass.svg'); padding: 18px; }
.b-row::after { display: none; }
.b-row.mystery, .u-tile:disabled { --frame-art: url('../assets/ui/panel-muted.svg'); }
.u-tile.afford, .modal, #tut-card { --frame-art: url('../assets/ui/panel-brass.svg'); }
.v-tile.q-masterwork, .v-tile.alloy.r-2, .net-card, .shop-card.maxed { --frame-art: url('../assets/ui/panel-coolant.svg'); }
.settings-danger { --frame-art: url('../assets/ui/panel-danger.svg'); }
.u-tile, .v-tile { padding: 18px 12px 16px; }
.v-tile.q-crude::before, .v-tile.alloy.r-0::before { opacity: .55; }
.v-tile.q-mythic::before, .v-tile.alloy.r-3::before { filter: brightness(1.3); }
#vault .v-tile.q-mythic, #vault .v-tile.alloy.r-3 { border: 3px double #bba2ee; }
.sky-region { padding: 20px 14px; }
.page-intro { border-color: transparent; border-radius: 10px; }
.page-intro::after {
  inset: -1px; z-index: -1; height: auto; background: none; pointer-events: none;
  border: 16px solid transparent; border-image: url('../assets/ui/panel-brass.svg') 28 / 16px / 0 stretch;
}
.intro-collection::after, .intro-starnet::after { border-image-source: url('../assets/ui/panel-coolant.svg'); }
.intro-cosmos::after, .intro-settings::after, .intro-ledger::after { border-image-source: url('../assets/ui/panel-violet.svg'); }
:where(.action, .icon-btn, .b-cost, .hold-btn, .tab, .navbtn, .subtab, #buy-modes button, .toggle) {
  --button-art: url('../assets/ui/button-violet.svg');
}
:is(.action, .icon-btn, .b-cost, .hold-btn, .tab, .navbtn, .subtab, #buy-modes button, .toggle) {
  position: relative; isolation: isolate;
}
:is(.action, .icon-btn, .b-cost, .hold-btn, #buy-modes button.on, .tab.on, .navbtn.on, .subtab[aria-current=page])::before,
.toggle::after {
  content: ''; display: block; position: absolute; inset: -2px; z-index: -1; pointer-events: none;
  width: auto; height: auto; margin: 0; transform: none; background: none;
  border: 10px solid transparent; border-image: var(--button-art) 16 / 10px / 0 stretch;
  clip-path: none; border-radius: 0;
}
.action, .icon-btn, .b-cost, .hold-btn, .toggle { border-color: transparent; border-radius: 7px; }
.b-cost, .detail-close, .modal-btn, .nova-btn, #buy-modes button.on, .tab.on, .navbtn.on, .subtab[aria-current=page] { --button-art: url('../assets/ui/button-brass.svg'); }
.b-cost:disabled { --button-art: url('../assets/ui/button-muted.svg'); }
.toggle, #starnet-open, #net-register { --button-art: url('../assets/ui/button-coolant.svg'); }
.toggle.off { --button-art: url('../assets/ui/button-muted.svg'); }
.wipe-btn { --button-art: url('../assets/ui/button-danger.svg'); }
#content-panel .filters .action::before { display: none; }
#content-panel .filters .action[aria-pressed=true]::before { display: block; --button-art: url('../assets/ui/button-brass.svg'); }
.subtab[aria-current=page]::before { vertical-align: initial; }
.empty-slot { background: url('../assets/ui/socket.svg') center / contain no-repeat; color: transparent; text-shadow: none; }
.queue-slot { border-radius: 7px; border: 1px solid #665077; }
.active-slot { border-color: #c2956a; }
.settings-group { padding: 2px 18px; }
html.cap-native .settings-group:has(.apk-row) { display: none; }

@media (hover: hover) {
  .tab:hover .tab-emblem { opacity: 1; filter: saturate(1); transform: translateY(-2px); }
  .tab:hover:not(.on) { background: #6b52642a; border-color: #8d6b7755; }
  .subtab:hover:not([aria-current=page]) { color: #ffe5bc; background: #49354d55; }
  .action:hover:not(:disabled), .icon-btn:hover:not(:disabled) { background: linear-gradient(#624751, #3b2c43); border-color: #d4a676; box-shadow: inset 0 1px 0 #fff0cc24, 0 3px 8px #10091966; }
  .toggle:hover { border-color: #b3e7d0; background: #33544d; }
  .toggle.off:hover { border-color: #c0a0cb; background: #3b2d48; }
  .b-cost:hover:not(:disabled) { background: linear-gradient(#875d4c, #533747); border-color: #ffcd8b; }
  .u-tile.afford:hover, .v-tile:hover, .draft-card:hover { border-color: var(--gold); background-color: #48314e; box-shadow: inset 0 1px 0 #fff0cc22, 0 4px 12px #0b071e66; }
  .ach:hover { border-color: #b49ec5; background-color: #b4a0f519; }
  .shop-card.afford:hover { border-color: #d6c0ef; filter: brightness(1.07); }
}

/* Phone controls retain generous hit areas without stealing scene height. */
@media (max-width: 950px) {
  #content-panel { border-left: 0; }
  #tabs { display: none; }
  #subtabs { padding: 6px 10px; gap: 3px; }
  .subtab { padding: 6px 9px; font-size: 11px; }
  .subtab[aria-current=page]::before { font-size: 6px; margin-right: 5px; }
  #bottomnav { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 3px; background: linear-gradient(#3c2d45, #211a31); border-top: 1px solid #b08776; box-shadow: 0 -4px 18px #09051666, inset 0 1px 0 #ffe1ac15; }
  .navbtn { flex: 1 1 0; border: 1px solid transparent; border-radius: 7px; clip-path: none; gap: 2px; padding: 3px 0; min-height: 56px; }
  .nav-ico { display: flex; }
  .nav-ico img { width: 28px; height: 28px; opacity: .75; filter: saturate(.7); }
  .nav-lab { font-size: 9px; color: #c7b6d1; }
  .navbtn.on { background: radial-gradient(ellipse at 50% 0, #ffcd732a, transparent), linear-gradient(#513b4d, #322539); border-color: #ab8367; box-shadow: var(--ui-inset); }
  .navbtn.on .nav-ico img { opacity: 1; filter: none; }
  .navbtn.on .nav-lab { color: #ffe2ac; }
  #bottomnav .navbtn.on::before { display: block; }
  .mobile-balance { background: linear-gradient(100deg, #35283e, #211c32); box-shadow: inset 0 1px 0 #fff0cc0c; border-bottom: 1px solid #766076; }
  #mobile-stardust { color: #ffdf9d; }
  .page { padding: 16px 14px 28px; }
  .page-intro { padding: 20px 85px 18px 16px; margin-bottom: 20px; background-size: auto, auto 195px, auto; }
  .page-intro::before { width: 72px; height: 72px; right: 7px; top: 38px; }
  .page-intro h2 { font-size: 26px; }
  .page-intro p { font-size: 12px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.2px; }
  .intro-index { margin-top: 16px; font-size: 7px; letter-spacing: .7px; }
  .b-row { padding: 16px; }
  .b-count { font-size: 9px; }
  .b-sub { font-size: 11px; }
  .settings-group { padding: 2px 16px; }
  .settings-heading { gap: 10px; }
  .settings-heading h3 { font-size: 15px; }
  .settings-group .setting-row > label { font-size: 13px; }
  .privacy-links { justify-content: flex-start; }
  .prestige-hero { padding: 20px 14px; }
  .toast { padding-top: 12px; padding-bottom: 12px; }
}
@media (max-width: 350px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .page-intro { padding-right: 70px; }
  .page-intro::before { width: 60px; height: 60px; right: 4px; }
  .page-intro h2 { font-size: 23px; }
  .subtab { font-size: 10px; padding: 6px; }
  .nav-lab { font-size: 8px; }
  .queue-slot { gap: 5px; padding: 6px; }
  .queue-slot img, .queue-slot .empty-slot { width: 28px; height: 28px; }
  .queue-slot small { font-size: 7px; }
  .settings-group .setting-row > label { flex-basis: 105px; }
  .toggle { min-width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .tab-emblem, .tab, .navbtn, .action, .toggle, .icon-btn, .subtab { transition: none; }
  .tab:hover .tab-emblem { transform: none; }
}