@@ Line 1: / Line 1: @@
-/* ============================================================
+/* ============================================================================
-    SpiritVale Wiki – Site CSS
+    SpiritVale Wiki — Common.css
-    ============================================================ */
+    Sitewide base + shared SpiritVale components (all skins)
+   - No Citizen skin selectors
+   - No mobile-only (@media max-width:500) rules (those live in Mobile.css)
+============================================================================ */
-/* ============================================================
+/* ----------------------------------------------------------------------------
-    LEGACY (KEEP FOR SAFETY)
+) SpiritVale tokens (fallback defaults)
-    - This section is preserved as-is to avoid breaking pages.
+    - Citizen.css exports will override these where appropriate.
-   - New unified theme overrides are appended at the bottom.
+---------------------------------------------------------------------------- */
-   ============================================================ */
-/* ------------------------------------------------------------
+:root {
-    Global additions (hardened)
+    /* SV UI tokens (fallback) */
-    --------------------------------------------------------- */
+    --sv-ui-bg0: #0f172a;
+    --sv-ui-bg1: #1f2937;
+    --sv-ui-bg2: #273449;
+    --sv-ui-bg3: #2e3f59;
+    --sv-ui-line1: #3b4b63;
+    --sv-ui-line2: #4b6388;
+    --sv-ui-text1: #f5f9ff;
+    --sv-ui-text2: #d7e2f4;
+    --sv-ui-text3: #b6c6e0;
+    --sv-ui-accent: #6aa6ff;
+    --sv-ui-accent2: #8cbcff;
+    --sv-ui-rad-sm: 10px;
+    --sv-ui-rad-md: 14px;
+    --sv-ui-rad-lg: 18px;
+    --sv-ui-rad-pill: 999px;
+    --sv-ui-shadow1: 0 10px 28px rgba(0, 0, 0, 0.40);
+    /* Legacy hero infobox variables (mapped to SV UI tokens) */
+    --sv-skill-width: 660px;
+    --sv-passive-width: 540px;
+    --sv-base: var(--sv-ui-bg0);
+    --sv-surface: var(--sv-ui-bg2);
+    --sv-card-border: var(--sv-ui-line1);
+    --sv-row-border: var(--sv-ui-line1);
+    --sv-gridline: var(--sv-ui-line2);
+    --sv-pill: var(--sv-ui-bg3);
+    --sv-pill-a: var(--sv-ui-bg3);
+    --sv-pill-b: var(--sv-ui-bg3);
+    --sv-text-soft: var(--sv-ui-text1);
+    --sv-text-outline: 0 1px 0 rgba(0,0,0,0.55),
+-1px 0 rgba(0,0,0,0.55),
+px 0 0 rgba(0,0,0,0.55),
+                       -1px 0 0 rgba(0,0,0,0.55);
+}
+/* If other skins use mw-theme-light, keep SV modules consistent */
+.mw-theme-light {
+    --sv-ui-bg0: #1f2937;
+    --sv-ui-bg1: #273449;
+    --sv-ui-bg2: #2e3f59;
+    --sv-ui-bg3: #364a69;
+    --sv-ui-line1: #4b6388;
+    --sv-ui-line2: #5f7fb4;
+    --sv-ui-text1: #f5f9ff;
+    --sv-ui-text2: #d7e2f4;
+    --sv-ui-text3: #b6c6e0;
+    --sv-ui-accent: #8cbcff;
+    --sv-ui-accent2: #b0d0ff;
+    --sv-base: var(--sv-ui-bg0);
+    --sv-surface: var(--sv-ui-bg2);
+    --sv-card-border: var(--sv-ui-line1);
+    --sv-row-border: var(--sv-ui-line1);
+    --sv-gridline: var(--sv-ui-line2);
+    --sv-pill: var(--sv-ui-bg3);
+    --sv-pill-a: var(--sv-ui-bg3);
+    --sv-pill-b: var(--sv-ui-bg3);
+    --sv-text-soft: var(--sv-ui-text1);
+}
+/* ----------------------------------------------------------------------------
+) Sitewide link visibility (prefer skin vars, fallback to SV vars)
+---------------------------------------------------------------------------- */
+.mw-parser-output a {
+    color: var(--color-link, var(--sv-ui-accent));
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+}
+.mw-parser-output a:visited {
+    color: var(--color-visited, var(--sv-ui-accent2));
+}
+.mw-parser-output a:hover {
+    text-decoration-thickness: 3px;
+}
+.mw-parser-output a:focus-visible {
+    outline: 2px solid var(--sv-ui-accent2);
+    outline-offset: 2px;
+    border-radius: 6px;
+}
+/* ----------------------------------------------------------------------------
+) Shared primitives (opt-in for new modules)
+---------------------------------------------------------------------------- */
+.mw-parser-output .sv-card {
+    background: var(--sv-ui-bg1);
+    border: 1px solid var(--sv-ui-line1);
+    border-radius: var(--sv-ui-rad-md);
+    box-shadow: var(--sv-ui-shadow1);
+    color: var(--color-base, var(--sv-ui-text2));
+}
+.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline) {
+    color: var(--color-emphasized, var(--sv-ui-text1));
+}
+.mw-parser-output .sv-tile {
+    background: var(--sv-ui-bg2);
+    border: 1px solid var(--sv-ui-line2);
+    border-radius: var(--sv-ui-rad-sm);
+    color: var(--color-emphasized, var(--sv-ui-text1));
+}
+.mw-parser-output .sv-pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.18em 0.40em;
+    border-radius: var(--sv-ui-rad-sm);
+    background: var(--sv-ui-bg3);
+    border: 1px solid var(--sv-ui-line2);
+    color: var(--color-emphasized, var(--sv-ui-text1));
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    font-size: 0.72em;
+    line-height: 1.15;
+    white-space: nowrap;
+}
+.mw-parser-output .sv-focus-ring:focus-visible {
+    outline: 2px solid var(--sv-ui-accent2);
+    outline-offset: 2px;
+    border-radius: 8px;
+}
+/* ----------------------------------------------------------------------------
+) Legacy safety blocks (kept, but unified to tokens)
+---------------------------------------------------------------------------- */
 .mw-parser-output .playtest-info-box {
      max-width: 100%;
      margin: 0 0 10px 0;
-     border: 1px solid #ccc;
-     border-radius: 6px;
+     border: 1px solid var(--sv-ui-line1);
-     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+     border-radius: var(--sv-ui-rad-md);
-     background: #f0f2f8;
+     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
+     background: var(--sv-ui-bg1);
      padding: 10px;
      text-align: center;
-     color: #333;
+     color: var(--color-base, var(--sv-ui-text2));
      overflow-wrap: anywhere;
      word-break: break-word;
@@ Line 30: / Line 186: @@
      max-width: 100%;
      margin: 1px;
-     border: 2px solid #372b54;
-     border-radius: 10px;
+     border: 2px solid var(--sv-ui-line2);
+     border-radius: var(--sv-ui-rad-lg);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-     background: #f0f2f8;
+     background: var(--sv-ui-bg1);
 }
 .mw-parser-output .header-container-middle {
-     background: #f0f2f8;
+     background: var(--sv-ui-bg1);
-    color: white;
      text-align: center;
      padding: 1px;
-     border-radius: 8px;
+     border-radius: calc(var(--sv-ui-rad-lg) - 2px);
      overflow-wrap: anywhere;
      word-break: break-word;
@@ Line 47: / Line 204: @@
 .mw-parser-output .header-container-inner {
-     background: linear-gradient(180deg, #5a4e7c, #372b54);
+     background: linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
-     color: white;
+     color: var(--sv-ui-text1);
      text-align: center;
      padding: 1px;
-     border-radius: 8px;
+     border-radius: calc(var(--sv-ui-rad-lg) - 2px);
      overflow-wrap: anywhere;
      word-break: break-word;
@@ Line 59: / Line 216: @@
 .mw-parser-output table.custom-table {
      float: none;
-     border: 2px solid #372b54;
-     border-radius: 10px;
+     border: 2px solid var(--sv-ui-line2);
+     border-radius: var(--sv-ui-rad-lg);
      padding: 2px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
      margin: 1em auto;
      text-align: center;
      border-collapse: separate;
      border-spacing: 0;
      overflow: hidden;
      -webkit-user-select: text;
      user-select: text;
+    background: var(--sv-ui-bg1);
+    color: var(--color-base, var(--sv-ui-text2));
 }
-.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th {
+.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
-     background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
+.mw-parser-output table.custom-table > tbody > tr.middle-header > th {
-     color: white;
+     background: linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
+     color: var(--sv-ui-text1);
      text-align: center;
      padding: 6px;
-    font-size: 120%;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
@@ Line 84: / Line 249: @@
 }
-.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th {
+.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th {
-     text-align: center;
+     font-size: 120%;
-    padding: 4px;
-    border-bottom: 1px solid #555;
-}
-.mw-parser-output table.custom-table > tbody > tr > td {
-    text-align: center;
-    padding: 4px;
-    border-bottom: 1px solid #555;
 }
 .mw-parser-output table.custom-table > tbody > tr.middle-header > th {
-    background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
-    color: white;
-    text-align: center;
-    padding: 6px;
      font-size: 110%;
 }
-/* Keep here for safety; can move to Citizen.css later */
+.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
-.citizen-search-trigger {
+.mw-parser-output table.custom-table > tbody > tr > td {
-     transition: transform 0.15s ease-in-out;
+     text-align: center;
+    padding: 4px;
+    border-bottom: 1px solid var(--sv-ui-line1);
 }
-.citizen-search-trigger:hover {
+/* ----------------------------------------------------------------------------
-    transform: translateY(-2px);
+) Hero Infobox System (Skills + Passives) — legacy table infobox
-}
+---------------------------------------------------------------------------- */
-/* ------------------------------------------------------------
-   Hero Infobox System (Skills + Passives)
-   --------------------------------------------------------- */
-:root {
-    --sv-skill-width: 660px;
-    --sv-passive-width: 540px;
-    --sv-card-border: rgba(75, 81, 96, 0.55);
-    --sv-row-border: rgba(148, 163, 184, 0.35);
-    --sv-base: #0F172B;
-    --sv-surface: #1b2336;
-    --sv-hero-a: var(--sv-base);
-    --sv-hero-b: var(--sv-base);
-    --sv-tile-a: var(--sv-surface);
-    --sv-tile-b: var(--sv-surface);
-    --sv-gridline: rgba(255, 255, 255, 0.14);
-    --sv-pill: #4B5160;
-    --sv-pill-a: var(--sv-pill);
-    --sv-pill-b: var(--sv-pill);
-    --sv-text-soft: rgba(255, 255, 255, 0.92);
-    --sv-text-outline: 0 1px 0 rgba(0,0,0,0.55), 0 -1px 0 rgba(0,0,0,0.55), 1px 0 0 rgba(0,0,0,0.55), -1px 0 0 rgba(0,0,0,0.55);
-}
 /* Base infobox */
@@ Line 141: / Line 273: @@
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      margin: 1.25em auto;
-     border-radius: 12px;
+     border-radius: var(--sv-ui-rad-lg);
      overflow: hidden;
      border: 1px solid var(--sv-card-border);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
      font-size: 0.95em;
      background: var(--sv-base);
+    color: var(--sv-ui-text1);
 }
@@ Line 180: / Line 317: @@
 table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
 table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
-     background-color: rgba(148, 163, 184, 0.05);
+     background-color: var(--sv-ui-bg1);
 }
@@ Line 193: / Line 330: @@
 table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
      background: var(--sv-base);
-     color: #fff;
+     color: var(--sv-ui-text1);
      padding: 0.9em 1.1em;
      text-align: center;
@@ Line 199: / Line 336: @@
 }
-table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
-    border-bottom: none !important;
-}
-table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
-    padding-bottom: 0.55em;
-}
-table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
-    padding: 0.55em 1.1em;
-}
 table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
      border-bottom: none !important;
 }
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
 table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
      padding-bottom: 0.55em;
 }
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
 table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
      padding: 0.55em 1.1em;
@@ Line 268: / Line 396: @@
      padding: 0 !important;
      background: var(--sv-base) !important;
-     color: #fff;
+     color: var(--sv-ui-text1);
 }
@@ Line 276: / Line 404: @@
      grid-auto-flow: row dense;
      gap: 0.55em;
      width: 100%;
      box-sizing: border-box;
      background: var(--sv-base);
      padding: 0.80em;
@@ Line 286: / Line 416: @@
      display: flex;
      box-sizing: border-box;
      background: var(--sv-surface) !important;
-     color: #fff !important;
+     color: var(--sv-ui-text1) !important;
      border: 1px solid var(--sv-gridline);
-     border-radius: 8px;
+     border-radius: var(--sv-ui-rad-md);
 }
@@ Line 303: / Line 435: @@
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.85em;
      box-sizing: border-box;
 }
+/* Hero bar layout */
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-1-wrap {
      display: flex;
@@ Line 325: / Line 460: @@
      vertical-align: middle;
 }
-/* -------------------------------------------------------------------------
-   DE-DUPE / CONFLICT FIX:
-   Tooltip + button styles were previously GLOBAL (.sv-tip-pop/.sv-tip-btn/etc),
-   which conflicts with GameInfo.Skills TemplateStyles using the same class names.
-   These are now scoped ONLY to the legacy table infobox system.
-   ------------------------------------------------------------------------- */
 /* Tooltip scopes + triggers (legacy infobox only) */
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-content { display: none; }
+:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-content {
+    display: none;
+}
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop {
      position: fixed;
      z-index: 99999;
      max-width: min(380px, calc(100vw - 16px));
      max-height: 60vh;
      overflow: auto;
      padding: 10px 12px;
-     border-radius: 10px;
-     border: 1px solid rgba(255,255,255,.12);
+     border-radius: var(--sv-ui-rad-md);
-     background: rgba(20, 24, 30, .98);
+     border: 1px solid var(--sv-ui-line2);
-     color: #e9eef6;
-     box-shadow: 0 10px 30px rgba(0,0,0,.35);
+     background: var(--sv-ui-bg0);
+     color: var(--sv-ui-text1);
+     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
      font-size: 13px;
      line-height: 1.35;
@@ Line 365: / Line 501: @@
      display: block;
      margin-bottom: 2px;
-     opacity: .95;
+     opacity: 0.95;
 }
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope { position: relative; }
+:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope {
+    position: relative;
+}
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn {
@@ Line 380: / Line 518: @@
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn:focus-visible {
-     outline: 2px solid rgba(255,255,255,.25);
+     outline: 2px solid rgba(255, 255, 255, 0.25);
      outline-offset: 2px;
 }
+/* Module: icon + name layout */
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap {
      display: grid;
@@ Line 399: / Line 538: @@
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 0;
 }
@@ Line 416: / Line 557: @@
      grid-column: 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
@@ Line 435: / Line 577: @@
 }
+/* Notes button: solid (no transparency) */
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 30px;
      height: 30px;
-     border-radius: 999px;
-     border: 1px solid rgba(255,255,255,.18);
+     border-radius: var(--sv-ui-rad-pill);
-     background: rgba(255,255,255,.10);
+     border: 1px solid var(--sv-ui-line2);
+     background: var(--sv-ui-bg2);
      cursor: pointer;
 }
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:hover {
-     background: rgba(255,255,255,.14);
+     background: var(--sv-ui-bg3);
 }
 :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:focus-visible {
-     outline: 2px solid rgba(255,255,255,.28);
+     outline: 2px solid rgba(255, 255, 255, 0.28);
      outline-offset: 2px;
 }
@@ Line 459: / Line 605: @@
      width: 22px;
      height: 22px;
-     border-radius: 999px;
+     border-radius: var(--sv-ui-rad-pill);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 15px;
      line-height: 1;
-     background: var(--sv-ico-bg, #6aa6ff);
-     color: var(--sv-ico-fg, #081018);
+     background: var(--sv-ui-accent2);
+     color: #081018;
 }
@@ Line 500: / Line 649: @@
 }
-/* Shared pill look (all modules) */
+/* Shared pill look (legacy infobox system only) */
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
+:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
+:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
      width: auto;
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      padding: 0.18em 0.35em;
-     border-radius: 6px;
+     border-radius: var(--sv-ui-rad-sm);
      font-weight: 800;
      text-transform: uppercase;
@@ Line 513: / Line 666: @@
      font-size: 0.72em;
      line-height: 1.15;
      background: var(--sv-pill);
+    border: 1px solid var(--sv-ui-line2);
+    color: var(--sv-ui-text1);
 }
@@ Line 529: / Line 685: @@
 }
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-slider input[type="range"] {
+:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
+.module-level-selector .sv-level-slider input[type="range"] {
      width: 90%;
      box-sizing: border-box;
@@ Line 535: / Line 692: @@
 }
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui-single .sv-level-slider-single {
+:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
+.module-level-selector .sv-level-ui-single .sv-level-slider-single {
      min-height: 0.45em;
 }
-/* ============================================================
+/* Skill Type (Hero Bar Slot 2) */
-   Skill Type (Hero Bar Slot 2)
-   ============================================================ */
 table.spiritvale-skill-infobox .hero-bar-module-2 .hero-bar-module-body,
 table.spiritvale-skill-infobox .hero-bar-module-2 .module-skill-type {
@@ Line 552: / Line 707: @@
      margin: 0 !important;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.50em;
      padding: 0.40em;
      justify-items: center;
      align-items: center;
@@ Line 565: / Line 722: @@
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0.20em 0.35em;
      gap: 0.50em;
      min-width: 0;
@@ Line 575: / Line 734: @@
      font-size: 1.02em;
      line-height: 1.25;
      white-space: normal;
      overflow-wrap: anywhere;
@@ Line 583: / Line 743: @@
 table.spiritvale-skill-infobox .module-skill-type .sv-type-damage { order: 1; }
 table.spiritvale-skill-infobox .module-skill-type .sv-type-element { order: 2; }
-table.spiritvale-skill-infobox .module-skill-type .sv-type-hits { order: 3; }
+table.spiritvale-skill-infobox .module-skill-type .sv-type-hits    { order: 3; }
-table.spiritvale-skill-infobox .module-skill-type .sv-type-target { order: 4; }
+table.spiritvale-skill-infobox .module-skill-type .sv-type-target  { order: 4; }
-table.spiritvale-skill-infobox .module-skill-type .sv-type-cast { order: 5; }
+table.spiritvale-skill-infobox .module-skill-type .sv-type-cast    { order: 5; }
-table.spiritvale-skill-infobox .module-skill-type .sv-type-combo { order: 6; }
+table.spiritvale-skill-infobox .module-skill-type .sv-type-combo   { order: 6; }
-/* ============================================================
-   Special Mechanics (Flags + Mechanics)
-   ============================================================ */
+/* Special Mechanics (Flags + Mechanics) */
 table.spiritvale-skill-infobox .sv-slot.module-special-mechanics .sv-slot__body {
      width: 100%;
@@ Line 628: / Line 785: @@
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      gap: 0.40em;
 }
@@ Line 639: / Line 799: @@
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      text-align: center;
      gap: 0.50em;
 }
@@ Line 650: / Line 813: @@
      width: 100%;
      text-align: center;
      font-weight: 500;
      font-size: 0.98em;
      line-height: 1.2;
      opacity: 0.98;
      white-space: normal;
      overflow-wrap: anywhere;
@@ Line 678: / Line 843: @@
          width: 100%;
      }
-}
-/* Mobile (<=500) */
-@media (max-width: 500px) {
-    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid {
-        grid-template-columns: 1fr;
-        gap: 0.50em;
-        padding: 0.70em;
-    }
-    :is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) :where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req) {
-        width: auto !important;
-        display: inline-block !important;
-        max-width: 100%;
-        white-space: nowrap;
-        padding: 0.22em 0.45em;
-    }
-    table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2 {
-        grid-template-columns: 1fr;
-    }
-}
-/* ============================================================
-   NEW UNIFIED THEME (BLUE SYSTEM)
-   - Forward-looking replacement layer
-   - Updated to be compatible with Citizen.css export
-   ============================================================ */
-/* ------------------------------------------------------------
-   Tokens (fallback defaults)
-   - Citizen.css will override these via :root.skin-theme-* exports.
-   ------------------------------------------------------------ */
-:root{
---sv-ui-bg0:#0f172a;
---sv-ui-bg1:#1f2937;
---sv-ui-bg2:#273449;
---sv-ui-bg3:#2e3f59;
---sv-ui-line1:#3b4b63;
---sv-ui-line2:#4b6388;
---sv-ui-text1:#f5f9ff;
---sv-ui-text2:#d7e2f4;
---sv-ui-text3:#b6c6e0;
---sv-ui-accent:#6aa6ff;
---sv-ui-accent2:#8cbcff;
---sv-ui-rad-sm:10px;
---sv-ui-rad-md:14px;
---sv-ui-rad-lg:18px;
---sv-ui-rad-pill:999px;
---sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
---sv-base:var(--sv-ui-bg0);
---sv-surface:var(--sv-ui-bg2);
---sv-card-border:var(--sv-ui-line1);
---sv-row-border:var(--sv-ui-line1);
---sv-gridline:var(--sv-ui-line2);
---sv-pill:var(--sv-ui-bg3);
---sv-pill-a:var(--sv-ui-bg3);
---sv-pill-b:var(--sv-ui-bg3);
---sv-text-soft:var(--sv-ui-text1);
-}
-/* If other skins use mw-theme-light, keep it consistent (still dark-ish canvas) */
-.mw-theme-light{
---sv-ui-bg0:#1f2937;
---sv-ui-bg1:#273449;
---sv-ui-bg2:#2e3f59;
---sv-ui-bg3:#364a69;
---sv-ui-line1:#4b6388;
---sv-ui-line2:#5f7fb4;
---sv-ui-text1:#f5f9ff;
---sv-ui-text2:#d7e2f4;
---sv-ui-text3:#b6c6e0;
---sv-ui-accent:#8cbcff;
---sv-ui-accent2:#b0d0ff;
---sv-base:var(--sv-ui-bg0);
---sv-surface:var(--sv-ui-bg2);
---sv-card-border:var(--sv-ui-line1);
---sv-row-border:var(--sv-ui-line1);
---sv-gridline:var(--sv-ui-line2);
---sv-pill:var(--sv-ui-bg3);
---sv-pill-a:var(--sv-ui-bg3);
---sv-pill-b:var(--sv-ui-bg3);
---sv-text-soft:var(--sv-ui-text1);
-}
-/* ------------------------------------------------------------
-   Sitewide link visibility (blue-only, obvious)
-   ------------------------------------------------------------ */
-.mw-parser-output a{
-color:var(--sv-ui-accent);
-text-decoration:underline;
-text-decoration-thickness:2px;
-text-underline-offset:2px;
-}
-.mw-parser-output a:visited{
-color:var(--sv-ui-accent2);
-}
-.mw-parser-output a:hover{
-text-decoration-thickness:3px;
-}
-.mw-parser-output a:focus-visible{
-outline:2px solid var(--sv-ui-accent2);
-outline-offset:2px;
-border-radius:6px;
-}
-/* ------------------------------------------------------------
-   Shared primitives (opt-in for new modules)
-   - IMPORTANT: set foreground color so text is readable in all modes
-   ------------------------------------------------------------ */
-.mw-parser-output .sv-card{
-background:var(--sv-ui-bg1);
-border:1px solid var(--sv-ui-line1);
-border-radius:var(--sv-ui-rad-md);
-box-shadow:var(--sv-ui-shadow1);
-color:var(--sv-ui-text2);
-}
-.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
-color:var(--sv-ui-text1);
-}
-.mw-parser-output .sv-tile{
-background:var(--sv-ui-bg2);
-border:1px solid var(--sv-ui-line2);
-border-radius:var(--sv-ui-rad-sm);
-color:var(--sv-ui-text1);
-}
-.mw-parser-output .sv-pill{
-display:inline-flex;
-align-items:center;
-justify-content:center;
-padding:0.18em 0.40em;
-border-radius:var(--sv-ui-rad-sm);
-background:var(--sv-ui-bg3);
-border:1px solid var(--sv-ui-line2);
-color:var(--sv-ui-text1);
-font-weight:800;
-text-transform:uppercase;
-letter-spacing:0.03em;
-font-size:0.72em;
-line-height:1.15;
-white-space:nowrap;
-}
-.mw-parser-output .sv-focus-ring:focus-visible{
-outline:2px solid var(--sv-ui-accent2);
-outline-offset:2px;
-border-radius:8px;
-}
-/* ------------------------------------------------------------
-   Legacy component “replacement” overrides (safe cascade)
-   - Keep old selectors; update look to match tokens.
-   ------------------------------------------------------------ */
-.mw-parser-output .playtest-info-box{
-border:1px solid var(--sv-ui-line1);
-border-radius:var(--sv-ui-rad-md);
-background:var(--sv-ui-bg1);
-color:var(--sv-ui-text2);
-}
-.mw-parser-output .header-container-outer{
-border:2px solid var(--sv-ui-line2);
-border-radius:var(--sv-ui-rad-lg);
-background:var(--sv-ui-bg1);
-}
-.mw-parser-output .header-container-middle{
-background:var(--sv-ui-bg1);
-}
-.mw-parser-output .header-container-inner{
-border-radius:calc(var(--sv-ui-rad-lg) - 4px);
-background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
-color:var(--sv-ui-text1);
-}
-.mw-parser-output table.custom-table{
-border:2px solid var(--sv-ui-line2);
-border-radius:var(--sv-ui-rad-lg);
-background:var(--sv-ui-bg1);
-}
-.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
-.mw-parser-output table.custom-table > tbody > tr.middle-header > th{
-background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
-color:var(--sv-ui-text1);
-}
-.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
-.mw-parser-output table.custom-table > tbody > tr > td{
-border-bottom:1px solid var(--sv-ui-line1);
-}
-/* Infobox overall */
-table.spiritvale-skill-infobox,
-table.spiritvale-passive-infobox{
-border-radius:var(--sv-ui-rad-lg);
-border:1px solid var(--sv-card-border);
-box-shadow:var(--sv-ui-shadow1);
-background:var(--sv-base);
-color:var(--sv-ui-text1);
-}
-table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
-table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
-table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
-table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header){
-background-color:var(--sv-ui-bg1);
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot{
-border-radius:var(--sv-ui-rad-md);
-border:1px solid var(--sv-gridline);
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
-:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req){
-border-radius:var(--sv-ui-rad-sm);
-background:var(--sv-ui-bg3);
-border:1px solid var(--sv-ui-line2);
-color:var(--sv-ui-text1);
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{
-border-radius:var(--sv-ui-rad-md);
-border:1px solid var(--sv-ui-line2);
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
-.module-icon-name .sv-tip-btn--notes{
-border-radius:var(--sv-ui-rad-pill);
-border:1px solid var(--sv-ui-line2);
-background:rgba(255,255,255,0.08);
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
-.module-icon-name .sv-ico--info{
-background:var(--sv-ui-accent2);
-color:#081018;
-}
-/* ------------------------------------------------------------
-   Mobile rule (keep in Common for now)
-   - Enforce “no transparency” for legacy tooltip/button UI
-   ------------------------------------------------------------ */
-@media (max-width: 500px){
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop{
-background:#14181e;
-border:1px solid #30394b;
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
-.module-icon-name .sv-tip-btn--notes{
-background:#27324a;
-border:1px solid #3a4b6b;
-}
-:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
-.module-icon-name .sv-tip-btn--notes:hover{
-background:#2f3a54;
-}
 }