/* Traits share site primitives; branch accents are separate from loot rarity. */
.ps-traits {
  --ps-trait-warfighter: #f06c76;
  --ps-trait-scout: #e3bc55;
  --ps-trait-survivalist: #69d8e3;
  --ps-trait-color: var(--ps-muted);
  --ps-trait-face: 48px;
  --ps-trait-stage-height: 64px;
  --ps-trait-major-height: 86px;
  --ps-trait-stone: url('../images/trait-stone.webp?v=24f98af2');
  --ps-trait-flow-duration: 3s;
  --ps-trait-cut-duration: 240ms;
  --ps-trait-connection-duration: 280ms;
  --ps-trait-rim-duration: 650ms;
  --ps-trait-surface-raised: linear-gradient(145deg, #1b252e, #080d12 75%);
  --ps-trait-elevation: 0 20px 36px -16px #000f, 0 4px 12px -4px #000a, inset 0 1px 0 #ffffff08, inset 0 -2px 5px #0008;
  --ps-trait-slab-outline: #ffffff12;
  --ps-trait-slab-top: #ffffff29;
  --ps-trait-slab-left: #ffffff1c;
  --ps-trait-slab-shadow: 0 20px 36px -22px #000e, 0 6px 12px -6px #0009;
  color: var(--ps-text-body);
}
.ps-traits h1, .ps-traits h2, .ps-traits h3 { margin: 0; color: var(--ps-text-heading); }
.ps-traits h1 { font-size: var(--ps-title-page); }
.ps-traits h2 { font-size: var(--ps-title-section); }
.ps-traits h3 { font-size: var(--ps-title-subsection); }
.ps-traits-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--ps-gap); margin-bottom: var(--ps-gap); }
.ps-traits-heading p { margin: .4rem 0 0; }
.ps-traits-heading > a { font-size: .9rem; white-space: nowrap; }
.ps-trait-planner { border-block: 0; padding-block: var(--ps-gap); }
.ps-trait-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--ps-gap); }
.ps-trait-toolbar p { margin: .2rem 0 0; font-variant-numeric: tabular-nums; }
.ps-trait-toolbar [data-trait-remaining] { color: var(--ps-lime); }
.ps-trait-actions { display: flex; gap: var(--ps-gap-tight); }
.ps-traits button { font: inherit; font-size: .875rem; }
.ps-trait-actions button, .ps-trait-tree footer button { min-height: var(--ps-control-height); padding: .35rem .7rem; border: 1px solid #66778340; border-radius: var(--ps-radius); background: var(--ps-trait-surface-raised); color: var(--ps-text); box-shadow: inset 0 1px 0 #ffffff0c, 0 2px 4px #0005; cursor: pointer; }
.ps-trait-actions button:hover, .ps-trait-tree footer button:hover { border-color: var(--ps-muted); }
.ps-traits button:focus-visible, .ps-traits a:focus-visible { outline: 2px solid var(--ps-pink); outline-offset: 4px; }
.ps-traits button:disabled { opacity: .42; cursor: default; }
.ps-trait-note { margin: .75rem 0 var(--ps-gap); color: var(--ps-muted); font-size: .875rem; }
.ps-trait-mobile-switch { display: none; }
.ps-trait-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-gap); }
.ps-trait-tree--warfighter { --ps-trait-color: var(--ps-trait-warfighter); }
.ps-trait-tree--scout { --ps-trait-color: var(--ps-trait-scout); }
.ps-trait-tree--survivalist { --ps-trait-color: var(--ps-trait-survivalist); }
.ps-trait-tree, .ps-trait-card { border: 1px solid var(--ps-trait-slab-outline); border-top-color: var(--ps-trait-slab-top); border-left-color: var(--ps-trait-slab-left); border-right-color: #020406c9; border-bottom-color: #000d; }
.ps-trait-tree::before, .ps-trait-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--ps-trait-color), transparent); opacity: .42; pointer-events: none; }
.ps-trait-tree { position: relative; min-width: 0; border-radius: var(--ps-radius-lg); overflow: hidden; background: linear-gradient(135deg, #cfdae016, transparent 28%, transparent 56%, #b4c2d008 64%, transparent 78%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--ps-trait-color) 7%, transparent), transparent 65%), linear-gradient(110deg, #02050840, #02050880), var(--ps-trait-stone) center / cover no-repeat, #070a0e; box-shadow: inset 0 1px 0 #ffffff0c, inset 0 -2px 6px #0009, inset -1px 0 4px #0006, var(--ps-trait-slab-shadow); }
.ps-trait-tree[hidden] { display: none; }
.ps-trait-tree > header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 var(--ps-gap-compact); padding: var(--ps-gap-compact) 0; border-bottom: 1px solid var(--ps-line); }
.ps-trait-tree > header h3 { color: var(--ps-trait-color); letter-spacing: .025em; text-shadow: 0 1px 2px #000; }
.ps-trait-tree > header p { margin: .15rem 0 0; font-size: .8rem; color: var(--ps-muted); }
.ps-trait-tree > header > strong { color: var(--ps-trait-color); font-size: .9rem; font-variant-numeric: tabular-nums; }
.ps-trait-stages { position: relative; display: flex; flex-direction: column-reverse; padding: .75rem .65rem .2rem; }
.ps-trait-paths { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ps-trait-paths path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ps-trait-bevel, .ps-trait-channel { stroke-dasharray: 1; stroke-dashoffset: 0; }
/* A real stroke keeps the cut's lower lip crisp at phone pixel densities. */
.ps-trait-bevel { stroke: #8295a1; stroke-opacity: .42; stroke-width: 5.8; transform: translateY(.8px); }
.ps-trait-channel { stroke: #020407; stroke-width: 4.8; }
.ps-trait-energy { stroke: var(--ps-trait-metal, var(--ps-trait-color)); stroke-width: 3; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 -.4px 0 #fff5) drop-shadow(0 .7px .2px #000c); }
.ps-trait-core { stroke: var(--ps-trait-metal, var(--ps-trait-color)); stroke-width: .65; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; filter: brightness(1.65); }
.ps-trait-spark { stroke: #fff; stroke-width: 1.35; opacity: 0; stroke-dasharray: .06 1; filter: drop-shadow(0 0 1.2px #fff9) drop-shadow(0 0 4px color-mix(in srgb, var(--ps-trait-color) 35%, transparent)); }
.ps-trait-paths g[data-phase="engraving"] > :is(.ps-trait-bevel, .ps-trait-channel) { animation: ps-trait-cut var(--ps-trait-cut-duration) ease-out both; }
.ps-trait-paths g[data-phase="energizing"] > :is(.ps-trait-energy, .ps-trait-core) { animation: ps-trait-connect var(--ps-trait-connection-duration) ease-out both; }
.ps-trait-paths g[data-phase="lit"] > :is(.ps-trait-energy, .ps-trait-core) { opacity: .95; stroke-dashoffset: 0; }
.ps-trait-paths g[data-pulse="active"] > .ps-trait-spark { animation: ps-trait-flow var(--ps-trait-flow-duration) linear infinite both; }
@keyframes ps-trait-cut { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes ps-trait-connect { from { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; } to { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: .95; } }
@keyframes ps-trait-flow { 0% { stroke-dashoffset: .2; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }
.ps-trait-stage { position: relative; min-height: var(--ps-trait-stage-height); }
.ps-trait-stage:has(.ps-trait-node--major) { min-height: var(--ps-trait-major-height); }
.ps-trait-stage > div { position: relative; display: flex; justify-content: space-evenly; align-items: stretch; gap: .3rem; }
.ps-trait-stage-number { display: none; }
.ps-trait-node { position: relative; width: 74px; min-height: 48px; padding: 0; background: transparent; border: 0; color: var(--ps-muted); cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: .2rem; }
.ps-trait-node { touch-action: manipulation; }
.ps-trait-node.ps-trait-node--major { flex: 1; width: auto; min-width: 0; }
.ps-traits .ps-trait-node:is(:hover, :focus, :active) { background: transparent; color: var(--ps-trait-color); }
.ps-trait-node-face { position: relative; isolation: isolate; display: grid; place-items: center; width: var(--ps-trait-face); height: var(--ps-trait-face); background: transparent; border-radius: 3px; }
.ps-trait-tree--warfighter .ps-trait-node-face { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.ps-trait-tree--scout .ps-trait-node-face { border-radius: 50%; }
.ps-trait-node-face img { width: 36px; height: 36px; box-sizing: border-box; padding: 1px; object-fit: contain; mix-blend-mode: screen; opacity: .95; filter: contrast(1.4); }
.ps-trait-tree--scout .ps-trait-node-face img { clip-path: circle(20px); }
/* Show the native glyph centre; its screenshot border must not duplicate our engraved rim. */
.ps-traits .ps-trait-node-face--native img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; max-width: none; padding: 0; clip-path: inset(20%); filter: grayscale(1) contrast(1.4); }
.ps-traits .ps-trait-tree--scout .ps-trait-node-face--native img { clip-path: circle(19.2px); }
.ps-traits .ps-trait-node.is-selected .ps-trait-node-face--native img { filter: contrast(1.4) brightness(1.18); }
.ps-trait-node-face > span { font: 650 1.35rem var(--ps-display); color: #778188; text-shadow: -.7px -.7px 0 #000f, .7px .7px 0 #ffffff12; }
.ps-trait-node-label { position: relative; background: transparent; color: var(--ps-muted-2); font-size: .68rem; line-height: 1.1; white-space: nowrap; text-wrap: nowrap; -webkit-text-stroke: 3px #070a0e; paint-order: stroke fill; }
.ps-trait-node.is-available { color: var(--ps-trait-color); }
.ps-trait-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ps-trait-rim path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ps-trait-rim-bevel { stroke: #8295a1; stroke-opacity: .36; stroke-width: 2.7; transform: translateY(.6px); }
.ps-trait-rim-groove { stroke: #020407; stroke-width: 2.3; }
.ps-trait-rim-energy { stroke: var(--ps-trait-color); stroke-width: 1.1; filter: drop-shadow(0 0 1.4px color-mix(in srgb, var(--ps-trait-color) 50%, transparent)); }
.ps-trait-rim-core { stroke: color-mix(in srgb, var(--ps-trait-color), white 75%); stroke-width: .4; }
.ps-trait-rim-energy path, .ps-trait-rim-core path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.ps-trait-node.is-selected.is-charged .ps-trait-rim-energy path, .ps-trait-node.is-selected.is-charged .ps-trait-rim-core path { stroke-dashoffset: 0; opacity: 1; animation: ps-trait-rim-charge var(--ps-trait-rim-duration) ease-out both; }
@keyframes ps-trait-rim-charge { from { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
.ps-trait-node.is-selected .ps-trait-node-label { color: var(--ps-text); }
.ps-trait-node.is-selected .ps-trait-node-face img { opacity: 1; filter: contrast(1.4) brightness(1.18); }
.ps-trait-node.is-selected .ps-trait-node-face > span { color: #f6f1e7; text-shadow: 0 0 2px color-mix(in srgb, var(--ps-trait-color) 40%, transparent); }
.ps-trait-tree footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 var(--ps-gap-compact); padding: .6rem 0; border-top: 1px solid var(--ps-line); font-size: .8rem; }
.ps-trait-tree footer > span { color: var(--ps-trait-color); }
.ps-trait-tree footer button { min-height: 32px; padding: .2rem .45rem; font-size: .75rem; }
.ps-trait-card { position: fixed; inset: auto; z-index: 100; box-sizing: border-box; width: min(236px, calc(100vw - 24px)); margin: 0; padding: 0; overflow: auto; border-radius: var(--ps-radius); background: linear-gradient(135deg, #ffffff07, transparent 34%), linear-gradient(115deg, #071018e8, #04080df5), var(--ps-trait-stone) center / cover no-repeat, #070b10; color: var(--ps-text-body); box-shadow: var(--ps-trait-elevation); }
.ps-trait-card[hidden] { display: none; }
.ps-trait-card::backdrop { background: transparent; pointer-events: none; }
.ps-traits .ps-trait-card-detail { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px; color: var(--ps-text); text-decoration: none; }
.ps-traits .ps-trait-card-detail[href] { cursor: pointer; }
.ps-trait-card:has(.ps-trait-card-detail[href]:hover), .ps-trait-card:has(.ps-trait-card-detail[href]:focus-visible) { border-top-color: color-mix(in srgb, var(--ps-trait-color) 30%, #a2acb780); border-left-color: #c0c8ce40; }
.ps-trait-card-detail strong { display: block; margin-bottom: 4px; font-family: var(--ps-display); font-size: .875rem; line-height: 1.2; font-weight: 650; color: var(--ps-trait-color); text-shadow: 0 1px 1px #0008; }
.ps-trait-card-detail[href] strong { text-decoration: underline; text-underline-offset: 3px; }
.ps-trait-card-detail[href] strong::after { content: ' →'; text-decoration: none; }
.ps-trait-card-effect { display: block; font-size: .78rem; line-height: 1.35; }
.ps-trait-card-notice { display: block; margin-top: 4px; color: var(--ps-trait-color); font-size: .78rem; line-height: 1.3; font-weight: 600; }
.ps-trait-card-notice[hidden] { display: none; }
.ps-trait-card-icon { display: grid; place-items: center; min-width: 0; border-radius: 3px; background: #04090d80; box-shadow: inset 0 1px 4px #000c, 0 1px 0 #ffffff0a; color: var(--ps-trait-color); font-size: 2.5rem; }
.ps-trait-card-icon img { width: 56px; height: 56px; object-fit: contain; mix-blend-mode: screen; }
.ps-trait-status { min-height: 1.5em; margin: .5rem 0; font-size: .85rem; color: var(--ps-lime); }
.ps-trait-share-link { display: grid; gap: .3rem; font-size: .85rem; max-width: 680px; margin: .5rem 0; }
.ps-trait-share-link[hidden] { display: none; }
.ps-trait-share-link input { width: 100%; background: var(--ps-panel-bg); color: var(--ps-text); border: 1px solid var(--ps-line); border-radius: var(--ps-radius); font-size: .85rem; }
.ps-trait-rules { font-size: .875rem; color: var(--ps-muted-2); }
.ps-trait-rules summary { width: fit-content; cursor: pointer; color: var(--ps-text); }
.ps-trait-rules ul { margin: .75rem 0 .75rem 1.25rem; }
.ps-trait-rules p { margin-bottom: 0; max-width: 850px; }
.ps-traits-known, .ps-traits-native, .ps-trait-progression { margin-top: var(--ps-section-gap); scroll-margin-top: var(--ps-section-anchor-offset); }
.ps-traits-known-trees { margin-top: var(--ps-gap); }
.ps-traits-known-tree h3 { color: var(--ps-trait-color); padding-bottom: .5rem; border-bottom: 1px solid var(--ps-line); }
.ps-traits-known-tree ul { list-style: none; margin: 0; }
.ps-traits-known-tree li { padding: .65rem 0; border-bottom: 1px solid var(--ps-line); }
.ps-traits-known-tree :is(h3, li) a { color: var(--ps-trait-color); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ps-trait-color) 45%, transparent); text-underline-offset: 3px; }
.ps-traits-known-tree li a { font-weight: 600; }
.ps-traits-known-tree :is(h3, li) a:hover { text-decoration-color: currentColor; }
.ps-traits-known-tree li p { margin: .2rem 0 0; font-size: .9rem; }
.ps-traits-native > p { margin: .4rem 0 var(--ps-gap); }
.ps-traits-native > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ps-gap); }
.ps-traits-native figure { margin: 0; background: var(--ps-panel-bg); text-align: center; border-radius: var(--ps-radius); overflow: hidden; }
.ps-traits-native figure > a { display: block; padding: var(--ps-gap-compact); }
.ps-traits-native figure img { width: auto; height: 370px; max-width: 100%; object-fit: contain; }
.ps-traits-native figcaption { padding: 0 .5rem .6rem; font-size: .875rem; }
.ps-traits-native > small { display: block; margin-top: .25rem; color: var(--ps-muted); font-size: var(--ps-media-credit-size); }
.ps-trait-progression { max-width: 850px; }
.ps-trait-progression p { margin: .65rem 0 0; }
@media (max-width: 900px) {
  .ps-trait-stage[data-trait-card-placement="below"] { margin-bottom: var(--ps-trait-card-space); }
  .ps-trait-stage[data-trait-card-placement="above"] { margin-top: var(--ps-trait-card-space); }
  .ps-trait-mobile-switch { display: flex; position: sticky; top: var(--ps-trait-sticky-top, var(--ps-header-height)); z-index: 6; background: var(--ps-panel-bg); border-bottom: 1px solid var(--ps-line); margin: 0 0 var(--ps-gap-compact); }
  .ps-trait-mobile-switch button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .65rem .2rem; background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none; color: var(--ps-muted-2); cursor: pointer; font-size: .85rem; }
  .ps-trait-mobile-switch button[data-trait-tab="warfighter"] { --ps-trait-color: var(--ps-trait-warfighter); color: var(--ps-trait-color); }
  .ps-trait-mobile-switch button[data-trait-tab="scout"] { --ps-trait-color: var(--ps-trait-scout); color: var(--ps-trait-color); }
  .ps-trait-mobile-switch button[data-trait-tab="survivalist"] { --ps-trait-color: var(--ps-trait-survivalist); color: var(--ps-trait-color); }
  .ps-trait-mobile-switch button[aria-pressed="true"] { border-bottom-color: var(--ps-trait-color); }
  .ps-trait-mobile-switch span { display: block; font-size: .7rem; color: var(--ps-muted); }
  .ps-trait-trees { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; }
  .ps-trait-tree > header { margin-inline: 1rem; }
  .ps-trait-node { width: 90px; }
  .ps-traits-known-trees { grid-template-columns: 1fr; }
  .ps-traits-heading { align-items: flex-start; }
  .ps-traits-heading > a { white-space: normal; max-width: 120px; text-align: right; }
}
@media (max-width: 480px) {
  .ps-traits-heading { display: block; }
  .ps-traits-heading > a { display: inline-block; max-width: none; text-align: left; margin-top: .5rem; }
  .ps-trait-toolbar { align-items: flex-start; gap: .5rem; }
  .ps-trait-actions { gap: .3rem; }
  .ps-trait-actions button { padding: .35rem .45rem; font-size: .75rem; }
  .ps-trait-toolbar h2 { font-size: 1.125rem; }
  .ps-trait-toolbar p { font-size: .8rem; }
  .ps-trait-note { font-size: .8rem; }
  .ps-trait-node { width: 70px; }
  .ps-traits-native > div { grid-template-columns: 1fr; }
  .ps-traits-native figure img { height: 430px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-trait-node-face { transition: none; }
  .ps-trait-paths path { animation: none !important; }
  .ps-trait-rim path { animation: none !important; }
  .ps-trait-spark { display: none; }
}

/* Native-frame-free glyphs; the animated SVG owns every outer engraving. */
.ps-traits .ps-trait-node-face--illustrated img { position: absolute; inset: 15%; width: 70%; height: 70%; padding: 0; object-fit: contain; clip-path: none; border-radius: 0; mix-blend-mode: normal; }
.ps-trait-node-face--illustrated { background: transparent; }
.ps-trait-node-face > .ps-trait-node-question { position: absolute; inset: 0; display: grid; place-items: center; color: #899294; text-shadow: 0 1px 0 #c9d4d426, 0 -1px 1px #000; }
.ps-trait-node-question[hidden] { display: none; }
.ps-trait-node.is-unrevealed .ps-trait-node-face img,
.ps-trait-node.is-unrevealed .ps-trait-node-label { visibility: hidden; }
.ps-trait-node.is-selected .ps-trait-node-face--illustrated img { filter: brightness(1.2); }

/* Allocation is useful state, separate from the animated stone conduits. */
.ps-trait-allocation, .ps-trait-tree-meter { display: flex; overflow: hidden; background: #02060b; box-shadow: inset 0 1px 2px #000, 0 1px 0 #ffffff0b; border-radius: 2px; }
.ps-trait-allocation { height: 5px; margin-top: 12px; }
.ps-trait-allocation > span { width: 0; background: var(--ps-trait-color); transition: width .16s ease-out; }
.ps-trait-tree-meter { height: 3px; margin: -6px var(--ps-gap-compact) 12px; }
.ps-trait-tree-meter > span { width: 0; background: var(--ps-trait-color); transition: width .16s ease-out; }
.ps-trait-node-initials { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1rem !important; letter-spacing: .02em; }
.ps-trait-node-initials[hidden] { display: none; }
.ps-trait-node.is-unrevealed .ps-trait-node-question { opacity: .4; }
.ps-trait-node.is-available .ps-trait-node-question { color: color-mix(in srgb, var(--ps-trait-color) 75%, #9aa4aa); }
.ps-trait-node.is-selected .ps-trait-node-question { opacity: 1; }
.ps-trait-mobile-switch .ps-trait-tab-meter { display: block; width: calc(100% - 16px); height: 3px; margin-top: 3px; overflow: hidden; background: #02060b; border-radius: 2px; }
.ps-trait-tab-meter > i { display: block; height: 100%; width: 0; background: var(--ps-trait-color); }
@media (min-width: 901px) {
  .ps-trait-card, .ps-traits .ps-trait-card-detail { pointer-events: none; }
  .ps-trait-card-detail[href] strong { pointer-events: auto; cursor: pointer; }
}
.ps-trait-roll-picker { width: min(640px, calc(100vw - 24px)); max-height: min(80dvh, 720px); padding: 0; margin: auto; overflow: hidden; color: var(--ps-text); background: linear-gradient(135deg, #ffffff05, transparent 30%), var(--ps-panel-bg); border: 1px solid var(--ps-line); border-top-color: #ffffff26; border-radius: var(--ps-radius); box-shadow: 0 20px 70px #000b, inset 0 1px 0 #ffffff05; }
.ps-trait-roll-picker[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.ps-trait-roll-picker::backdrop { background: #02060bb3; }
.ps-trait-roll-picker header { padding: 14px 16px 4px; }
.ps-trait-roll-picker header > span { color: var(--ps-trait-color); font-size: .75rem; }
.ps-trait-roll-picker h2 { margin: 4px 0; font-size: 1.15rem; }
.ps-trait-roll-picker header p { margin: 6px 0; font-size: .8rem; color: var(--ps-muted-2); line-height: 1.4; }
.ps-trait-roll-search { display: grid; gap: 4px; padding: 6px 16px 12px; font-size: .75rem; }
.ps-trait-roll-search input { width: 100%; padding: 8px 10px; min-height: 40px; background: #050a11; color: var(--ps-text); border: 1px solid var(--ps-line); border-radius: 5px; }
.ps-trait-roll-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-height: 0; max-height: 48dvh; padding: 0 12px 12px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #3d4a55 #080e15; }
.ps-trait-roll-options { grid-auto-rows: minmax(76px, auto); align-content: start; }
.ps-traits .ps-trait-roll-options button { height: auto; min-height: 76px; }
.ps-traits .ps-trait-roll-picker input[type="search"] { background-color: #050a11; color: var(--ps-text); border-color: var(--ps-line); }
.ps-traits .ps-trait-roll-picker input[type="search"]:focus { background-color: #050a11; border-color: var(--ps-trait-color); box-shadow: 0 0 0 1px var(--ps-trait-color); }
.ps-traits .ps-trait-roll-picker .ps-trait-roll-search input[type="search"]:focus-visible { outline: 2px solid var(--ps-trait-color); outline-offset: 2px; box-shadow: none; }
.ps-traits .ps-trait-roll-picker footer button { color: var(--ps-text); background: #0c141d; border: 1px solid color-mix(in srgb, var(--ps-trait-color) 45%, #ffffff15); }
.ps-traits .ps-trait-roll-picker footer [data-trait-roll-remove] { color: var(--ps-muted-2); background: transparent; border-color: var(--ps-line); }
.ps-trait-roll-options button { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; text-align: left; color: var(--ps-text); background: #080e15; border: 1px solid #ffffff10; border-radius: 6px; cursor: pointer; }
.ps-trait-roll-options button[hidden] { display: none; }
.ps-trait-roll-options button:is(:hover, :focus-visible, [aria-pressed="true"]) { border-color: var(--ps-trait-color); background: color-mix(in srgb, var(--ps-trait-color) 6%, #080e15); }
.ps-trait-roll-options strong { display: block; font-size: .82rem; line-height: 1.25; }
.ps-trait-roll-options button > span > span { display: block; margin-top: 4px; font-size: .73rem; line-height: 1.35; font-weight: 400; color: var(--ps-muted-2); }
.ps-trait-roll-options small, .ps-traits-known small { display: block; margin-top: 4px; font-size: .68rem; font-weight: 400; color: var(--ps-muted-2); }
.ps-trait-roll-icon, .ps-trait-entry-icon { display: grid; place-items: center; width: 40px; height: 40px; font-weight: 650; color: #a4b3be; }
.ps-trait-roll-icon img, .ps-trait-entry-icon img { display: block; width: 40px; height: 40px; object-fit: contain; }
.ps-trait-roll-picker footer { display: flex; justify-content: space-between; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--ps-line); }
.ps-trait-roll-picker footer button { min-height: 40px; padding: 6px 12px; font-size: .8rem; }
.ps-trait-roll-picker > p { margin: 0; padding: 12px 16px; }
.ps-trait-roll-picker > p[hidden] { display: none; }
.ps-trait-catalogue-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.ps-trait-catalogue-tools label { display: grid; gap: 4px; font-size: .8rem; }
.ps-trait-catalogue-tools input, .ps-trait-catalogue-tools select { min-height: 40px; padding: 6px 9px; background: #080e15; color: var(--ps-text); border: 1px solid var(--ps-line); border-radius: 5px; }
.ps-trait-catalogue-tools output { padding-bottom: 8px; font-size: .8rem; color: var(--ps-muted-2); }
.ps-traits .ps-trait-catalogue-tools label input[type="search"], .ps-traits .ps-trait-catalogue-tools label select { background-color: #080e15; color: var(--ps-text); }
.ps-traits-known [data-trait-entry] > a { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; color: inherit; text-decoration: none; }
.ps-traits-known [data-trait-entry] strong { display: block; color: var(--ps-trait-color, var(--ps-text)); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.ps-trait-entry-effect { display: block; margin-top: 4px; font-size: .8rem; line-height: 1.4; }
.ps-traits-minor-catalogue { margin-top: 24px; }
.ps-traits-minor-catalogue > p { margin: 8px 0 12px; font-size: .85rem; color: var(--ps-muted-2); }
.ps-traits-minor-catalogue > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; list-style: none; margin: 0; }
.ps-traits-minor-catalogue li { padding: 12px 0; border-bottom: 1px solid var(--ps-line); }
.ps-traits-known [hidden] { display: none; }
@media (max-width: 900px) { .ps-traits-minor-catalogue > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ps-trait-roll-options, .ps-traits-minor-catalogue > ul { grid-template-columns: 1fr; } .ps-trait-roll-picker { max-height: 88dvh; } .ps-trait-roll-options { max-height: 50dvh; } }
@media (prefers-reduced-motion: reduce) { .ps-trait-allocation > span, .ps-trait-tree-meter > span { transition: none; } }

.ps-traits-known-tree h4 { font-size: .82rem; color: var(--ps-muted-2); margin: 20px 0 4px; font-weight: 600; }

.ps-trait-catalogue-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--ps-line); }
.ps-trait-catalogue-tabs button { min-width: 0; padding: 12px 5px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; box-shadow: none; background: transparent; color: var(--ps-trait-color); font: 600 .9rem var(--ps-display); cursor: pointer; }
.ps-trait-catalogue-tabs button[aria-selected="true"] { border-bottom-color: var(--ps-trait-color); background: transparent; }
.ps-trait-catalogue-tabs button:focus-visible { outline: 2px solid var(--ps-trait-color); outline-offset: -3px; }
.ps-traits-known-tree[hidden], .ps-traits-known-tree [hidden] { display: none; }
.ps-traits-known-tree ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
@media (max-width: 600px) { .ps-traits-known-tree ul { grid-template-columns: 1fr; } .ps-trait-catalogue-tabs button { font-size: .8rem; } }

.ps-traits :is(.ps-trait-mobile-switch, .ps-trait-catalogue-tabs) button:is(:hover, :focus, :active) { background: transparent; box-shadow: none; border-radius: 0; }