@@ Line 1: / Line 1: @@
-/* CSS placed here will be applied to all skins */
+/* ============================================================
+   Global custom additions
+   ========================================================== */
-/*
+/* Playtest info box (supports:
-@media (prefers-color-scheme: dark) {
+) class="playtest-info-box"
-    body, #mw-head {
+) class="playtest info box"  */
-        background-color: #1f2937;
+.playtest-info-box,
-    }
+.playtest.info.box {
+  max-width: 100%;
+  margin: 0 0 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background: #f0f2f8;
+  padding: 10px;
+  text-align: center;
+  color: #333;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
-    a, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a {
+/* Header container band (supports:
-        color: oklch(62.3% 0.214 259.815);
+) class="header-container-outer"
-    }
+) class="header container outer"  */
+.header-container-outer,
-    a:visited, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
+.header.container.outer {
-        color: oklch(54.6% 0.245 262.881);
+  max-width: 100%;
-    }
+  margin: 1px;
+  border: 2px solid #372b54;
-    a:hover, .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:hover {
+  border-radius: 10px;
-        color: oklch(70.7% 0.165 254.624);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-        text-decoration: none;
+  background: #f0f2f8;
-    }
-    a.new {
-        color: oklch(64.5% 0.246 16.439);
-    }
 }
-*/
-/* Custom Additions */
+.header-container-middle,
-.playtest - info - box {
+.header.container.middle {
-    max - width: 100 %; margin - bottom: 10px; border: 1px solid #ccc; border - radius: 6px; box - shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background: #f0f2f8; padding: 10px; text - align: center; color:#333; word - wrap: break-word; overflow - wrap: break-word;
+  background: #f0f2f8;
+  color: white;
+  text-align: center;
+  padding: 1px;
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
-.header - container - outer {
+.header-container-inner,
-    max - width: 100 %; margin: 1 1px; border: 2px solid #372b54; border - radius: 10px; box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25); background: #f0f2f8;
+.header.container.inner {
+  background: linear-gradient(180deg, #5a4e7c, #372b54);
+  color: white;
+  text-align: center;
+  padding: 1px;
+  border-radius: 8px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  font-size: 300%;
 }
-.header - container - middle {
+/* Generic custom table */
-    background: #f0f2f8; color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
+table.custom-table {
+  float: none;
+  border: 2px solid #372b54;
+  border-radius: 10px;
+  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;
 }
-.header - container - inner {
+table.custom-table > tbody > tr:nth-child(1) > th {
-    background: linear - gradient(180deg,#5a4e7c,#372b54); color: white; text - align: center; padding: 1px 1px; border - radius: 8px; word - wrap: break-word; overflow - wrap: break-word; font - size: 300 %;
+  background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
+  color: white;
+  text-align: center;
+  padding: 6px;
+  font-size: 120%;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
-table.custom - table {
+table.custom-table > tbody > tr:nth-child(2) > th {
-    float: none; border: 2px solid #372b54; border - radius: 10px; 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;
+  text-align: center;
+  padding: 4px;
+  border-bottom: 1px solid #555;
 }
-table.custom - table > tbody > tr: nth - child(1) > th {
+table.custom-table > tbody > tr > td {
-    background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 120 %; border - top - left - radius: 8px; border - top - right - radius: 8px; word - wrap: break-word; overflow - wrap: break-word;
+  text-align: center;
+  padding: 4px;
+  border-bottom: 1px solid #555;
 }
-table.custom - table > tbody > tr: nth - child(2) > th {
+table.custom-table > tbody > tr.middle-header > th {
-    text - align: center; padding: 4px; border - bottom: 1px solid #555;
+  background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
+  color: white;
+  text-align: center;
+  padding: 6px;
+  font-size: 110%;
 }
-table.custom - table > tbody > tr > td {
+/* Citizen search hover (transition goes on base state) */
-    text - align: center; padding: 4px; border - bottom: 1px solid #555;
+.citizen-search-trigger {
+  transition: transform 0.15s ease-in-out;
 }
+.citizen-search-trigger:hover {
-table.custom - table > tbody > tr.middle - header > th {
+  transform: translateY(-2px);
-    background: linear - gradient(180deg,#7a6fb0,#5a4e7c); color: white; text - align: center; padding: 6px; font - size: 110 %;
 }
-.citizen - search - trigger:hover {
-    transform: translateY(-2px);
-    transition: transform .15s ease -in -out;
-}
 /* ============================================================
     SpiritVale Infoboxes (Skills + Passives)
-   - Shared styling for both infobox types
-   - Passives: fixed desktop width, centered contents
-   - Skills: fixed desktop max width + list wrapper panel
-   - Skills top band: NESTED TABLE version ONLY
-     (GameSkills outputs .sv-topband-cell > .sv-topband-table > .sv-type-table)
     ========================================================== */
-/* ------------------------------------------------------------
-   Global size knobs (adjust here, everything updates)
-   ------------------------------------------------------------ */
 :root {
-    --sv - passive - width: 540px;
+  --sv-passive-width: 540px;
-    --sv - skill - width: 660px;
+  --sv-skill-width: 660px;
-    --sv - infobox - max: 620px; /* generic fallback if needed */
+  --sv-infobox-max: 620px;
 }
-/* ============================================================
+/* Shared base */
-) Shared base: both Skills + Passives
+table.spiritvale-skill-infobox,
-   ========================================================== */
+table.spiritvale-passive-infobox {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+  max-width: var(--sv-infobox-max);
+  margin: 1.5em auto;
-table.spiritvale - skill - infobox,
+  border-radius: 12px;
-    table.spiritvale - passive - infobox {
+  overflow: hidden;
-    /* Layout */
+  border: 1px solid rgba(55, 43, 84, 0.65);
-    border - collapse: separate;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
-    border - spacing: 0;
-    width: 100 %;
-    max - width: var(--sv - infobox - max);
-    margin: 1.5em auto;
-    /* Shape */
+  font-size: 0.95em;
-    border - radius: 12px;
+}
-    overflow: hidden;
-    border: 1px solid rgba(55, 43, 84, 0.65);
-    box - shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
-    /* Typography */
+/* Hero band background (supports old main row + new split rows for BOTH) */
-    font - size: 0.95em;
+table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
+table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
+table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
+table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
+  background: linear-gradient(135deg, #7a6fb0, #372b54);
+  color: #fff;
+  padding: 0.9em 1.1em;
+  text-align: center;
+  vertical-align: middle;
 }
-/* HERO row (icon+name left, description right) */
+/* Row separators (direct children only) */
-table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
+table.spiritvale-skill-infobox > tbody > tr,
-    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
+table.spiritvale-passive-infobox > tbody > tr {
-    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
+  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
-    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
+}
-    background: linear - gradient(135deg, #7a6fb0, #372b54);
+table.spiritvale-skill-infobox > tbody > tr:last-child,
-    color: #fff;
+table.spiritvale-passive-infobox > tbody > tr:last-child {
-    padding: 0.9em 1.1em;
+  border-bottom: none;
-    text - align: center;
-    vertical - align: middle;
 }
-/* Icon spacing in hero row */
+/* Label/value cells (direct children only) */
-table.spiritvale - skill - infobox > tbody > tr: first - child > th.image,
+table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
-    table.spiritvale - passive - infobox > tbody > tr: first - child > th.image {
+table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header) {
-    margin - right: 0.6em;
+  width: 26%;
-    vertical - align: middle;
+  padding: 0.45em 0.85em;
+  text-align: left;
+  font-weight: 600;
+  white-space: nowrap;
 }
-/* Adds in the description */
+table.spiritvale-skill-infobox > tbody > tr > td,
-table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > th,
+table.spiritvale-passive-infobox > tbody > tr > td {
-    table.spiritvale - skill - infobox > tbody > tr.spiritvale - infobox - main > td,
+  padding: 0.45em 0.85em;
-    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
+  text-align: left;
-    table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
-    background: linear - gradient(135deg, #7a6fb0, #372b54);
-    color: #fff;
-    padding: 0.9em 1.1em;
-    text - align: center;
-    vertical - align: middle;
 }
-/* Row separators (direct children only) */
+/* Zebra striping */
-table.spiritvale - skill - infobox > tbody > tr,
+table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
-    table.spiritvale - passive - infobox > tbody > tr {
+table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
-    border - bottom: 1px solid rgba(148, 163, 184, 0.4);
+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);
 }
-table.spiritvale - skill - infobox > tbody > tr: last - child,
-    table.spiritvale - passive - infobox > tbody > tr: last - child {
+/* Section headers */
-    border - bottom: none;
+.spiritvale-infobox-section-header {
+  background: linear-gradient(135deg, #5a4e7c, #372b54);
+  color: #fff;
+  text-align: left;
+  padding: 0.5em 0.9em;
+  font-size: 0.9em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
-/* Label cells (direct children only; avoids styling nested top-band tables) */
+/* Hero helper classes */
-table.spiritvale - skill - infobox > tbody > tr: not(.spiritvale - infobox - main) > th: not(.spiritvale - infobox - section - header),
+.spiritvale-infobox-main-left-inner {
-    table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th: not(.spiritvale - infobox - section - header) {
+  display: flex;
-    width: 26 %;
+  flex-direction: column;
-    padding: 0.45em 0.85em;
+  align-items: center;
-    text - align: left;
+  justify-content: center;
-    font - weight: 600;
+  gap: 0.35em;
-    white - space: nowrap;
 }
-/* Value cells (direct children only) */
+.spiritvale-infobox-title {
-table.spiritvale - skill - infobox > tbody > tr > td,
+  font-size: 1.25em;
-    table.spiritvale - passive - infobox > tbody > tr > td {
+  font-weight: 600;
-    padding: 0.45em 0.85em;
-    text - align: left;
 }
-/* Zebra striping (direct children only) */
+.spiritvale-infobox-main-right-inner {
-table.spiritvale - skill - infobox > tbody > tr: nth - child(odd) > td,
+  display: flex;
-    table.spiritvale - skill - infobox > tbody > tr: nth - child(odd) > th: not(.spiritvale - infobox - section - header),
+  align-items: center;
-        table.spiritvale - passive - infobox > tbody > tr: nth - child(odd) > td,
+  justify-content: center;
-            table.spiritvale - passive - infobox > tbody > tr: nth - child(odd) > th: not(.spiritvale - infobox - section - header) {
-    background - color: rgba(148, 163, 184, 0.05);
 }
-/* Section headers (Requirements / Mechanics / etc.) */
+.spiritvale-infobox-description {
-.spiritvale - infobox - section - header {
+  font-size: 1.05em;
-    background: linear - gradient(135deg, #5a4e7c, #372b54);
+  font-style: italic;
-    color: #fff;
+  text-align: center;
-    text - align: left;
+  max-width: 42em;
-    padding: 0.5em 0.9em;
+  margin: 0 auto;
-    font - size: 0.9em;
+  opacity: 0.95;
-    text - transform: uppercase;
-    letter - spacing: 0.05em;
 }
-/* Hero content helpers */
-.spiritvale - infobox - main - left - inner {
+/* ============================================================
-    display: flex;
+   Skills: split hero rows (tuned)
-    flex - direction: column;
+   ========================================================== */
-    align - items: center;
-    justify - content: center;
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
-    gap: 0.35em;
+  border-bottom: none !important;
 }
-.spiritvale - infobox - title {
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
-    font - size: 1.25em;
+  padding-bottom: 0.55em;
-    font - weight: 600;
 }
-.spiritvale - infobox - main - right - inner {
+table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
-    display: flex;
+  padding-top: 0.55em;
-    align - items: center;
+  padding-bottom: 0.55em;
-    justify - content: center;
 }
-.spiritvale - infobox - description {
-    font - size: 1.05em;
-    font - style: italic;
-    text - align: center;
-    max - width: 32em;
-    margin: 0 auto;
-}
 /* ============================================================
-) Passives (stable, consistent tooltip layout)
+    Passives
     ========================================================== */
-table.spiritvale - passive - infobox {
+table.spiritvale-passive-infobox {
-    width: var(--sv - passive - width);
+  width: var(--sv-passive-width);
-    max - width: var(--sv - passive - width);
+  max-width: var(--sv-passive-width);
-    margin: 1em auto;
+  margin: 1em auto;
-    table - layout: fixed;
+  table-layout: fixed;
 }
-/* Hero column balance */
+/* Passive split hero rows (match Skills) */
-table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
-    width: 42 %;
+  border-bottom: none !important;
-    white - space: normal;
 }
-table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
-    width: 58 %;
+  padding-bottom: 0.55em;
 }
+table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
-/* Center + wrap all non-hero rows */
+  padding-top: 0.55em;
-table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > th,
+  padding-bottom: 0.55em;
-    table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main) > td {
-    text - align: center;
-    vertical - align: middle;
-    white - space: normal;
-    overflow - wrap: anywhere;
-    word -break: break-word;
 }
-/* Let passive labels wrap */
+/* Center + wrap passive body rows */
-table.spiritvale - passive - infobox > tbody > tr: not(.spiritvale - infobox - main)
+table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
-    > th: not(.spiritvale - infobox - section - header) {
+table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
-    white - space: normal;
+  text-align: center;
+  vertical-align: middle;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
 }
 /* Passive section headers centered */
-table.spiritvale - passive - infobox.spiritvale - infobox - section - header {
+table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
-    text - align: center;
+  text-align: center;
-}
-/* Passive description never forces odd layout */
-table.spiritvale - passive - infobox.spiritvale - infobox - description {
-    max - width: 100 %;
-    overflow - wrap: anywhere;
-    word -break: break-word;
 }
-/* Passive list layout (stacked, centered) */
+/* Passive list layout */
-.spiritvale - passive - list {
+.spiritvale-passive-list {
-    display: flex;
+  display: flex;
-    flex - direction: column;
+  flex-direction: column;
-    align - items: center;
+  align-items: center;
-    gap: 1.25em;
+  gap: 1.25em;
 }
 /* Remove Citizen wrapper borders/spacing around passive tables in lists */
-.spiritvale - passive - list.mw - table - wrapper,
+.spiritvale-passive-list .mw-table-wrapper,
-.spiritvale - passive - list.table - overflow,
+.spiritvale-passive-list .table-overflow,
-.spiritvale - passive - list.table - scroll,
+.spiritvale-passive-list .table-scroll,
-.spiritvale - passive - list.citizen - table {
+.spiritvale-passive-list .citizen-table {
-    border: none!important;
+  border: none !important;
-    box - shadow: none!important;
+  box-shadow: none !important;
-    background: transparent!important;
+  background: transparent !important;
-    padding: 0!important;
+  padding: 0 !important;
-    margin: 0!important;
+  margin: 0 !important;
 }
-/* Mobile/portrait: keep passive hero row side-by-side */
-@media(max - width: 768px) {
-    body.skin - citizen table.spiritvale - passive - infobox {
-        width: 100 %;
-        max - width: 100 %;
-        display: table!important;
-    }
-    body.skin - citizen table.spiritvale - passive - infobox > tbody {
+/* ============================================================
-        display: table - row - group!important;
+   Skills
-    }
+   ========================================================== */
-    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main {
+table.spiritvale-skill-infobox {
-        display: table - row!important;
+  width: 100%;
-    }
+  max-width: var(--sv-skill-width);
+  margin: 1.25em auto;
+  table-layout: fixed;
+}
-    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th,
+/* List wrapper */
-        body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
+.sv-skill-collection {
-        display: table - cell!important;
+  width: 100%;
-        float: none!important;
+  max-width: var(--sv-skill-width);
-        box - sizing: border - box;
+  margin: 0 auto !important;
-        vertical - align: middle;
+  padding: 0 !important;
-        text - align: center;
-        white - space: normal;
+  border: 2px solid #372b54;
-        overflow - wrap: anywhere;
+  border-radius: 10px;
-        word -break: break-word;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-    }
+  background: transparent !important;
-    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th {
+  overflow: hidden;
-        width: 46 % !important;
+  display: block !important;
-        padding: 0.75em 0.75em;
+}
-    }
+/* Neutralize Citizen wrappers inside the skill collection */
+.sv-skill-collection .mw-table-wrapper,
+.sv-skill-collection .table-overflow,
+.sv-skill-collection .table-scroll,
+.sv-skill-collection .citizen-table {
+  border: none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
-    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > td {
+/* In list mode, each skill becomes a “row” inside the wrapper */
-        width: 54 % !important;
+.sv-skill-collection table.spiritvale-skill-infobox {
-        padding: 0.75em 0.75em;
+  width: 100%;
-    }
+  max-width: 100%;
+  margin: 0 !important;
-    body.skin - citizen table.spiritvale - passive - infobox > tbody > tr.spiritvale - infobox - main > th.image img {
+  border: none !important;
-        width: 64px!important;
+  box-shadow: none !important;
-        height: auto!important;
+  border-radius: 0 !important;
-    }
+}
-    body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - title,
+/* Divider between skills */
-        body.skin - citizen table.spiritvale - passive - infobox.spiritvale - infobox - description {
+.sv-skill-collection > * + * {
-        white - space: normal;
+  border-top: 1px solid rgba(148, 163, 184, 0.25);
-        overflow - wrap: anywhere;
-        word -break: break-word;
-    }
 }
 /* ============================================================
-) Skills
+    Skills top band (nested-table)
-   - Single skill: fixed desktop max width
-   - List mode: ONE wrapper panel with dividers
-   - Top band: nested-table version ONLY
     ========================================================== */
-/* Single-skill width */
+table.spiritvale-skill-infobox .sv-topband-cell {
-table.spiritvale - skill - infobox {
+  padding: 0 !important;
-    width: 100 %;
+  background: linear-gradient(
-     max - width: var(--sv - skill - width);
+deg,
-     margin: 1.25em auto;
+     rgba(90, 78, 124, 0.55),
-    table - layout: fixed;
+     rgba(55, 43, 84, 0.55)
+  ) !important;
 }
-/* List wrapper: flush, “pop” border, no background */
+table.spiritvale-skill-infobox .sv-topband-table {
-.sv - skill - collection {
+  width: 100% !important;
-    width: 100 %;
+  max-width: 100% !important;
-    max - width: var(--sv - skill - width);   /* keeps wrapper aligned to skill width */
+  margin: 0 !important;
-    margin: 0 auto!important;          /* remove extra spacing around wrapper */
-    padding: 0!important;
-    border: 2px solid #372b54;
+  border: 0 !important;
-    border - radius: 10px;
+  border-collapse: collapse !important;
-    box - shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+  border-spacing: 0 !important;
-    background: transparent!important;
+  table-layout: fixed;
+  background: transparent !important;
+}
-    overflow: hidden;
+table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
-    display: block!important;
+  width: 50%;
+  padding: 0 !important;
+  vertical-align: middle;
 }
-/* Neutralize Citizen wrappers inside the skill collection */
+table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
-.sv - skill - collection.mw - table - wrapper,
+  border-right: 1px solid rgba(148, 163, 184, 0.25);
-.sv - skill - collection.table - overflow,
-.sv - skill - collection.table - scroll,
-.sv - skill - collection.citizen - table {
-    border: none!important;
-    box - shadow: none!important;
-    background: transparent!important;
-    padding: 0!important;
-    margin: 0!important;
 }
-/* In list mode, each skill becomes a “row” inside the wrapper */
+/* Level Select (tightened) */
-.sv - skill - collection table.spiritvale - skill - infobox {
+table.spiritvale-skill-infobox .sv-level-ui {
-    width: 100 %;
+  width: 100%;
-    max - width: 100 %;
+  margin: 0 !important;
-    margin: 0!important;
+  padding: 0.6em 0.75em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+}
-    border: none!important;
+table.spiritvale-skill-infobox .sv-level-title {
-    box - shadow: none!important;
+  font-weight: 700;
-    border - radius: 0!important;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-size: 0.8em;
+  opacity: 0.95;
 }
-/* Divider between skills */
+table.spiritvale-skill-infobox .sv-level-label {
-.sv - skill - collection > * + * {
+  font-weight: 600;
-    border- top: 1px solid rgba(148, 163, 184, 0.25);
 }
-/* -------------------------
+table.spiritvale-skill-infobox .sv-level-slider input[type="range"] {
-   Skill top band (nested-table)
+  width: 100%;
-   ------------------------- */
+  box-sizing: border-box;
+  margin: 0;
+}
-table.spiritvale - skill - infobox.sv - topband - cell {
-    padding: 0!important;
-    background: linear - gradient(
-deg,
-        rgba(90, 78, 124, 0.55),
-        rgba(55, 43, 84, 0.55)
-    )!important;
-}
-/* Inner 2-column table must fully fill the cell */
+/* ============================================================
-table.spiritvale - skill - infobox.sv - topband - table {
+   Type grid: 4 chunks (2x2), label + value (tightened)
-    width: 100 % !important;
+   ========================================================== */
-    max - width: 100 % !important;
-    margin: 0!important;
-    border: 0!important;
+table.spiritvale-skill-infobox .sv-type-grid {
-    border - collapse: collapse!important;
+  width: 100% !important;
-    border - spacing: 0!important;
+  margin: 0 !important;
-    table - layout: fixed;
+  padding: 0.6em 0.75em;
-    background: transparent!important;
+  box-sizing: border-box;
-}
-/* Two halves of the top band */
+  display: grid;
-table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
+  grid-template-columns: 1fr 1fr;
-    width: 50 %;
+  gap: 0;
-    padding: 0!important; /* padding goes inside the blocks below */
-    vertical - align: middle;
 }
-table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
+table.spiritvale-skill-infobox .sv-type-chunk {
-    border - right: 1px solid rgba(148, 163, 184, 0.25);
+  display: flex;
-}
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
-/* Left: Level Select block fills the entire half */
+  text-align: center;
-table.spiritvale - skill - infobox.sv - level - ui {
+  padding: 0.35em 0.45em;
-    width: 100 %;
-    margin: 0!important;
-    padding: 0.75em 0.9em;
-    display: flex;
+  border-top: 1px solid rgba(148, 163, 184, 0.18);
-    flex - direction: column;
+  border-left: 1px solid rgba(148, 163, 184, 0.18);
-    gap: 0.4em;
 }
-/* (Re-using the same title/label classes is fine) */
+/* grid borders */
-table.spiritvale - skill - infobox.sv - level - title {
+table.spiritvale-skill-infobox .sv-type-chunk:nth-child(-n + 2) {
-    font - weight: 700;
+  border-top: none;
-    text - transform: uppercase;
-    letter - spacing: 0.05em;
-    font - size: 0.85em;
-    opacity: 0.95;
 }
+table.spiritvale-skill-infobox .sv-type-chunk:nth-child(odd) {
+  border-left: none;
+}
+table.spiritvale-skill-infobox .sv-type-label {
+  width: 100%;
+  padding: 0.18em 0.35em;
+  border-radius: 6px;
-table.spiritvale - skill - infobox.sv - level - label {
+  font-weight: 800;
-    font - weight: 600;
+  text-transform: uppercase;
-}
+  letter-spacing: 0.03em;
+  font-size: 0.72em;
+  line-height: 1.15;
-table.spiritvale - skill - infobox.sv - level - slider input[type = "range"] {
+  background: linear-gradient(
-     width: 100 %;
+deg,
-    box - sizing: border - box;
+    rgba(122, 111, 176, 0.35),
+     rgba(90, 78, 124, 0.20)
+  );
 }
-/* Right: Type table fills the entire half */
+table.spiritvale-skill-infobox .sv-type-value {
-table.spiritvale - skill - infobox.sv - type - table {
+  margin-top: 0.2em;
-    width: 100 % !important;
+  font-weight: 600;
-    margin: 0!important;
+  line-height: 1.25;
-    padding: 0.75em 0.9em;
-    border: 0!important;
+  white-space: normal;
-    border - collapse: collapse!important;
+  overflow-wrap: anywhere;
-    background: transparent!important;
+  word-break: break-word;
 }
-table.spiritvale - skill - infobox.sv - type - table th,
+/* Mobile: stack Level + Type, and Type grid becomes 1 column */
-    table.spiritvale - skill - infobox.sv - type - table td {
+@media (max-width: 560px) {
-     background: transparent!important;
+  table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td {
-    padding: 0.2em 0;
+     display: block;
-     text - align: left;
+     width: 100%;
-    vertical - align: top;
+  }
-}
-table.spiritvale - skill - infobox.sv - type - table th {
+  table.spiritvale-skill-infobox .sv-topband-table > tbody > tr > td:first-child {
-     font - weight: 700;
+     border-right: none;
-     white - space: nowrap;
+     border-bottom: 1px solid rgba(148, 163, 184, 0.25);
-    padding - right: 0.9em;
+  }
-}
-/* Mobile: stack Level + Type */
+  table.spiritvale-skill-infobox .sv-type-grid {
-@media(max - width: 560px) {
+    grid-template-columns: 1fr;
-    table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td {
+  }
-        display: block;
-        width: 100 %;
-    }
-     table.spiritvale - skill - infobox.sv - topband - table > tbody > tr > td: first - child {
+  /* simplify borders for 1-col */
-        border - right: none;
+  table.spiritvale-skill-infobox .sv-type-chunk {
-        border - bottom: 1px solid rgba(148, 163, 184, 0.25);
+     border-left: none;
-    }
+  }
+  table.spiritvale-skill-infobox .sv-type-chunk:first-child {
+    border-top: none;
+  }
 }