@font-face {font-family: Oxanium; src: url('assets/fonts/oxanium.ttf') format('truetype'); font-weight: 200 800; font-display: swap;}
@font-face {font-family: Rajdhani; src: url('assets/fonts/rajdhani.ttf') format('truetype'); font-weight: 400; font-display: swap;}
@font-face {font-family: Rajdhani; src: url('assets/fonts/rajdhani-bold.ttf') format('truetype'); font-weight: 600 800; font-display: swap;}
:root {--ui-font: Oxanium, system-ui, sans-serif; --panel-art: url('assets/ui/nine/frame-salvage.png'); --button-art: url('assets/ui/nine/button-jade.png');}
/* Boss reward cards are a separate surface from the site's skinnable controls. */
.boss-reward-arena{position:relative;height:364px;overflow:hidden;isolation:isolate;margin:18px 0;}
.boss-reward-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:332px;gap:12px;align-content:start;height:100%;overflow:auto;scrollbar-gutter:stable;padding:4px;box-sizing:border-box;}
.reward-resolution{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3;}
.reward-flight,.reward-debris{position:absolute;pointer-events:none;}
.reward-debris{overflow:hidden;box-shadow:0 0 8px #ffc36a;}
html #card-offer button.boss-reward {
 display:flex;flex-direction:column;align-items:center;gap:12px;box-sizing:border-box;
 width:100%;min-width:0;height:332px;min-height:0;margin:0;padding:14px 10px;overflow:hidden;
 border:2px solid #a99165 !important;border-image:none !important;border-radius:8px !important;
 background:radial-gradient(ellipse at 50% 20%,#35617066,transparent 65%),linear-gradient(150deg,#223342,#101b28) !important;
 box-shadow:inset 0 0 0 5px #08111b,inset 0 0 0 6px #b8a27866,0 8px 16px #0007 !important;
 color:#d8e9ea;text-align:center;white-space:normal;line-height:1.4;
 animation:none !important;backdrop-filter:none !important;transform:none !important;
 transition:border-color .15s,filter .15s;
}
html #card-offer button.boss-reward::before,html #card-offer button.boss-reward::after {display:none !important;content:none !important;}
html #card-offer button.boss-reward:hover:not(:disabled),html #card-offer button.boss-reward:focus-visible {border-color:#ffe3a1 !important;filter:brightness(1.12);}
html #card-offer button.boss-reward:disabled {opacity:.65;filter:none;cursor:default;}
html #card-offer button.boss-reward.selected-card {opacity:1;border-color:#c6ffbf !important;box-shadow:inset 0 0 0 5px #08111b,inset 0 0 0 6px #b3f7a8,0 0 20px #81f7a533 !important;}
.reward-edition {font-size:9px;letter-spacing:.14em;color:#a1b7c2;}
.reward-emblem {display:grid;place-items:center;width:60px;height:60px;border:1px solid #bb9c69;border-radius:50%;color:#ffe3a1;font-size:38px;text-shadow:0 0 18px #ffc26288;background:#071520;}
.reward-name {font-size:16px;color:#ffe0a2;overflow-wrap:anywhere;}
.reward-mechanic {font-size:13px;overflow-wrap:anywhere;overflow-y:auto;min-height:0;}
.reward-choice {margin-top:auto;padding-top:12px;width:100%;border-top:1px solid #73879366;font-size:12px;color:#b7dbe1;}
.selected-card .reward-choice {color:#c6ffbf;}
@media(max-width:600px){.boss-reward-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(260px,90%);scroll-snap-type:x mandatory;}.boss-reward{scroll-snap-align:center;}}
html[data-ui-font='rajdhani'] {--ui-font: Rajdhani, system-ui, sans-serif;}
html[data-ui-font='system'] {--ui-font: system-ui, sans-serif;}
body, button, input, select, textarea, h1, h2, h3, h4, p, label, small, summary, a, span, b, strong, th, td, text, #tree-tooltip {
  font-family: var(--ui-font) !important;
}
.character-copy h3, .character-copy p, .ability-card h3, .page-heading h2 {font-style: normal;}
html[data-ui-frame='reactor'] {--panel-art: url('assets/ui/nine/frame-reactor.png');}
html[data-ui-frame='relic'] {--panel-art: url('assets/ui/nine/frame-relic.png');}
/* Real nine-slice artwork: corner regions remain fixed; narrow edge profiles repeat with subtle periodic plasma grain.
   No image centre fill: the CSS panel surface remains independently controllable. */
html:not([data-ui-frame='classic']) :is(.character-panel,.diagram-panel,.ability-card,.station-controls,.profile-picker,.loadout-panel,.narrative-copy,.result-card,.audio-panel,#skill-detail,#ui-audition,dialog,.settings-card,#mission-story,.mission-card) {
  border: 18px solid transparent;
  border-image-source: var(--panel-art);
  border-image-slice: 32;
  border-image-width: 18px;
  border-image-repeat: round;
  border-radius: 0;
  box-shadow: 0 8px 22px #0007;
}
html[data-ui-button='amber'] {--button-art: url('assets/ui/nine/button-amber.png');}
html:not([data-ui-frame='classic']) :is(.concourse-panorama,.hud,.wallet,input,select,textarea,.shop-services) {
  border:8px solid transparent;
  border-image:var(--panel-art) 32 / 8px round;
  border-radius:0;
}
html[data-ui-button='amethyst'] {--button-art: url('assets/ui/nine/button-amethyst.png');}
html[data-ui-button='metal'] {--button-art: var(--panel-art);}
html:not([data-ui-button='classic']) button {
  border: 11px solid transparent !important;
  border-image-source: var(--button-art) !important;
  border-image-slice: 32 fill !important;
  border-image-width: 11px !important;
  border-image-repeat: round !important;
  border-radius: 13px;
  background: linear-gradient(160deg,#88e8ef24,#172c4366 48%,#05122188) !important;
  background-clip: padding-box !important;
  backdrop-filter: blur(5px);
  color: #eefaff;
  text-shadow: 0 -1px 0 #ffffff40, 0 1px 1px #000, 0 2px 2px #000b;
  box-shadow: inset 0 1px 9px #b7ffff15, 0 3px 7px #0006;
  transition: filter .15s ease, transform .15s ease;
}
html:not([data-ui-button='classic']) button:hover:not(:disabled) {filter: brightness(1.25);}
html:not([data-ui-button='classic']) button:active:not(:disabled) {transform: translateY(2px);filter:brightness(.9);}
html:not([data-ui-button='classic']) button.active {background-color:#53bdbd55 !important;filter:brightness(1.2);}
html:not([data-ui-button='classic']) button:disabled {filter:grayscale(.8);opacity:.48;cursor:not-allowed;}
html:not([data-ui-button='classic']) .station-controls #launch {
  color:#ffe7a5;
  text-shadow:0 2px 3px #000;
  box-shadow:0 0 18px #77dfd633,inset 0 0 18px #e8bb5b18;
}
button:focus-visible,select:focus-visible,input:focus-visible {outline:2px solid #f8d88b;outline-offset:3px;}
#ui-audition {margin-top:24px;background:#0b1824;padding:14px;}
#ui-audition summary {cursor:pointer;color:#d2e6ec;font-size:13px;}
.ui-audition-controls {display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;align-items:end;}
.ui-audition-controls label {display:grid;gap:6px;font-size:13px;flex:1;min-width:155px;}
.ui-audition-controls select {width:100%;min-height:36px;}
.ui-skin-samples {display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;align-items:center;}
.ui-skin-samples button {min-width:130px;}
#ui-skin-status {font-size:12px;color:#b0c4ca;}
@media(max-width:600px) {
  html:not([data-ui-frame='classic']) :is(.character-panel,.diagram-panel,.ability-card,.station-controls,.profile-picker,.loadout-panel,.narrative-copy,.result-card,.audio-panel,#skill-detail,#ui-audition,dialog) {border-width:12px;border-image-width:12px;}
}
@media(prefers-reduced-motion:reduce) {html:not([data-ui-button='classic']) button {transition:none;}}

/* Station-service nav buttons (Concourse etc.) use the nine-slice button art
   instead of the gel frame, mirroring every other framed control. */
html:not([data-ui-button='classic']) .shop-services button {
  border:9px solid transparent !important;
  border-image-source:var(--button-art) !important;
  border-image-slice:32 fill !important;
  border-image-width:9px !important;
  border-image-repeat:round !important;
  border-radius:10px;
  background:linear-gradient(160deg,#88e8ef24,#172c4366 48%,#05122188) !important;
  background-clip:padding-box !important;
  box-shadow:inset 0 1px 9px #b7ffff15,0 3px 7px #0006;
  padding:9px 10px;
  animation:none;
}
html:not([data-ui-button='classic']) .shop-services button.active {background-color:#53bdbd55 !important;}
html:not([data-ui-button='classic']) button:disabled {animation:none;}
.skill-node .node-shell {fill:url(#node-metal) !important;stroke-width:3;}
.skill-node .node-gel {pointer-events:none;stroke:#03101b;stroke-width:1.5;}
.skill-node .node-glyph {pointer-events:none;paint-order:stroke;stroke:#06111c;stroke-width:1;filter:drop-shadow(0 2px 1px #000) drop-shadow(0 -1px 1px #d9ffff66);}
.skill-node:active .node-gel {filter:brightness(.7);}
.skill-node:active .node-glyph {transform:translateY(2px);}
@media(prefers-reduced-motion:reduce) {
  html:not([data-ui-button='classic']) button {animation:none !important;}
}

.settings-controls {display:flex;flex-wrap:wrap;gap:20px;padding:16px;background:#0b1824;}
.settings-controls label {display:grid;gap:8px;min-width:180px;flex:1;}
#settings-panel {margin:0 0 12px;}
#settings-panel summary {cursor:pointer;font-size:13px;padding:7px;}
.debug-unlocks {display:flex;flex-wrap:wrap;gap:24px;margin:16px 0;}
#ui-audition .audio-controls {margin:16px 0;}
/* Two optically separated surfaces: rear rim, translucent gel body and front
   specular streaks. Refraction is approximated with backdrop blur/saturation. */
html[data-ui-button='ruby'] button,
html[data-ui-button='ice'] button,
html[data-ui-button='smoke'] button {
  background:
    linear-gradient(115deg,transparent 13%,#ffffff66 14%,#ffffff08 19%,transparent 24%,transparent 75%,#ffffff30 77%,transparent 81%),
    radial-gradient(ellipse at 30% 0%,#ffffff66,transparent 60%),
    linear-gradient(175deg,var(--gel-mid),var(--gel-dark) 58%,var(--gel-mid)) !important;
  background-size:200% 100%,160% 160%,100% 100% !important;
  backdrop-filter:blur(3px) saturate(1.65);
  box-shadow:inset 0 2px 1px #ffffffaa,inset 2px 0 4px #ffffff44,
    inset 0 -7px 9px #0006,inset 0 -2px 1px #ffffff77,
    0 5px 0 -1px var(--gel-dark),0 6px 0 0 var(--gel-light),0 10px 16px #0007 !important;
}
html[data-ui-button='ruby'] button:active:not(:disabled),
html[data-ui-button='ice'] button:active:not(:disabled),
html[data-ui-button='smoke'] button:active:not(:disabled) {
  box-shadow:inset 0 5px 8px #0008,inset 0 -2px 2px #ffffff77,0 1px 0 var(--gel-light) !important;
}
html[data-graphics-quality='1'] button,
html[data-graphics-quality='2'] button {animation:none !important;backdrop-filter:none !important;}
#ui-audition .audio-panel {position:static;width:100%;max-width:100%;box-sizing:border-box;min-width:0;}
#ui-audition .audio-panel label {min-width:0;max-width:100%;}
#ui-audition .audio-panel select {width:100%;min-width:0;max-width:100%;}
html[data-ui-button='ruby'] button {
  background:
    linear-gradient(115deg,transparent 13%,#ffd5db55 14%,#ff102508 19%,transparent 24%,transparent 75%,#ffb0ba40 77%,transparent 81%),
    radial-gradient(ellipse at 30% 0%,#ffb9c144,transparent 60%),
    linear-gradient(175deg,var(--gel-mid),var(--gel-dark) 58%,var(--gel-mid)) !important;
  background-size:200% 100%,160% 160%,100% 100% !important;
}
#flight-ticker {overflow:hidden;height:30px;max-width:100%;background:#07111b;color:#b8d9c6;font:12px/30px monospace;white-space:nowrap;border-top:1px solid #344554;}
#flight-ticker-tape {display:flex;width:max-content;animation:flight-tape 24s linear infinite;}
#flight-ticker-tape span {display:block;flex-shrink:0;padding:0 40px;}
@keyframes flight-tape {from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){#flight-ticker-tape{animation:none;}#flight-ticker-repeat{display:none;}}
#telemetry-status {display:block;margin:8px 0;color:#91a2ae;}
body {background-color:color-mix(in srgb,var(--theme-ink,#082d3e) 28%,#050a12);}
:is(.station-controls,.character-panel,.diagram-panel,.ability-card,.narrative-copy,.audio-panel,#curator-wardrobe) {
 background-color:color-mix(in srgb,var(--theme-ink,#082d3e) 32%,#0b1520);
}
#curator-wardrobe {padding:16px;margin:0 0 20px;border:1px solid var(--theme-light,#597987);}
#relic-options {display:flex;flex-wrap:wrap;gap:12px;}
#relic-options label {display:grid;gap:6px;}
#relic-readout {display:block;color:#cfa9ea;margin:8px 0;}
html[data-ui-button='metal'] {--button-art:url('assets/ui/nine/matched-metal.png');}
html[data-ui-background] {
 background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--theme-light) 14%,#060c15),#050a12 75%);
}
body {background-image:radial-gradient(ellipse at top,color-mix(in srgb,var(--theme-light) 9%,transparent),transparent 70%);}
html[data-ui-background] :is(.station-controls,.character-panel,.diagram-panel,.ability-card,.narrative-copy,.audio-panel,#curator-wardrobe) {
 background-image:linear-gradient(160deg,color-mix(in srgb,var(--theme-light) 8%,transparent),transparent 70%);
}
#emporium .vex-icon-bezel {
 align-self:center;padding:8px;margin:4px 0 12px;border-radius:50%;
 background:linear-gradient(145deg,#d9e7e9,#647985 22%,#101d2a 65%,#7c929b);
 box-shadow:0 6px 9px #0008,inset 0 2px 1px #fff9,inset 0 -3px 2px #000b;
 border:2px solid var(--accent);
}
#emporium .vex-icon-bezel .vex-icon {
 margin:0;border-radius:50%;
 background-color:#102334;
 box-shadow:inset 0 5px 10px #9fe7ff33,inset 0 -8px 12px #000a;
}
#emporium .ability-card {
 box-shadow:inset 0 2px 1px #c9efff22,inset 0 -5px 12px #0008,0 7px 14px #0007;
}
#emporium .ability-card.owned .vex-icon-bezel {box-shadow:0 0 16px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 2px 1px #fff9,inset 0 -3px 2px #000b;}
.vex-embossed-icon {paint-order:stroke;stroke:#06111c;stroke-width:1;filter:drop-shadow(0 2px 1px #000) drop-shadow(0 -1px 1px #d9ffff66);}
.vex-circuit-node:active .vex-embossed-icon {transform:translateY(2px);}
#debug-locks {margin-top:18px;border:1px solid #597080;display:flex;gap:12px;flex-wrap:wrap;}
#debug-locks p {flex-basis:100%;font-size:12px;margin:0;}
#debug-locks label {display:flex;align-items:center;gap:5px;min-width:180px;}
.purchase-marker {display:block;align-self:flex-start;margin:8px 0 12px;padding:5px 9px;border:1px solid #b8d8c477;border-radius:12px;background:#152a31;color:#c5ead7;font-size:11px;letter-spacing:.04em;}
#legendary .ability-card {display:flex;flex-direction:column;}
#legendary .ability-card button {margin-top:auto;}
#debug-notice {display:block;margin:8px 0;color:#a7b7c5;}
#arena-setup #arena-bestiary {margin:6px 0;font-size:11px;line-height:1.45;color:#a7b7c5;max-width:420px;}
.npc-idle-portrait {display:block;position:relative;line-height:0;width:100%;}
.npc-idle-portrait>img {display:block;width:100%;height:auto;}
.character-panel img,.npc-portrait,.npc-idle-portrait>img,.mission-heading img,.mission-transmission-body img,#briefing-portrait,#result-story-portrait{image-rendering:auto;}
.npc-idle-portrait>.npc-idle-canvas {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border:0;background:transparent;opacity:0;}
.npc-idle-portrait>.npc-sequence-canvas {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border:0;background:transparent;opacity:0;}
#npc-idle-debug {display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;border:1px solid #526778;}
#npc-idle-debug label {display:flex;align-items:center;gap:8px;font-size:12px;}
@media(prefers-reduced-motion:reduce){.npc-idle-canvas{display:none;}.npc-sequence-canvas{display:none;}}
.npc-idle-portrait>.npc-idle-canvas {image-rendering:auto;}
.npc-local-controls {position:absolute;bottom:5px;left:5px;right:5px;z-index:2;display:flex;gap:4px;align-items:center;opacity:.78;line-height:normal;}
.npc-local-controls:hover,.npc-local-controls:focus-within {opacity:1;}
.npc-local-controls select {min-width:0;width:55%;font-size:10px;padding:3px;background:#08121fe8;color:#dbe6ee;border:1px solid #526979;}
html .npc-local-controls button {font-size:10px;padding:4px 7px;min-width:0;margin:0;flex:1;white-space:nowrap;border-width:1px !important;animation:none !important;}
.npc-idle-portrait>.npc-sequence-canvas {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border:0;background:transparent;opacity:0;image-rendering:auto;}
@media(prefers-reduced-motion:reduce){.npc-sequence-canvas{display:none;}}
.npc-sequence-canvas.npc-cross-fade {transition:opacity 3s linear;}
.npc-sequence-canvas.npc-cross-fade[data-playing="1"] {transition:none;}
@media(prefers-reduced-motion:reduce){.npc-sequence-canvas.npc-cross-fade {transition:none;}}