Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older edit
No edit summary
No edit summary
Tags: Mobile edit Mobile web edit
 
(70 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ============================================================
/* SpiritVale Wiki — Common.css */
  SpiritVale Wiki – Site CSS
/* Role: shared tokens, primitives, utilities, and interactive anatomy */
   ============================================================
/* Scope: sitewide SpiritVale UI foundations only */
   Split into two safe zones:
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                    */
/* -------------------------------------------------------------------------- */
/* Common.css is the sitewide foundation layer. It owns:                      */
/* - canonical breakpoint definitions and responsive policy comments          */
/* - shared design tokens and utility primitives                              */
/* - reusable interactive anatomy used by multiple modules/templates          */
/* - global parser-output treatments that should behave the same everywhere   */
/*                                                                            */
/* Common.css does NOT own:                                                    */
/* - Citizen skin theme/chrome styling (Citizen.css)                          */
/* - module-specific card/layout rules (GameInfo, PatchHighlights, etc.)      */
/* - template-specific presentation rules (Definitions, ClassInfobox, etc.)  */
/*                                                                            */
/* Responsive cleanup note: this file is the source of truth for breakpoint   */
/* meaning. Its own responsive selectors should model the canonical ladder    */
/* and shared UI should follow that ladder everywhere else.                    */
/* -------------------------------------------------------------------------- */
/* Responsive policy (canonical)                                              */
/* -------------------------------------------------------------------------- */
/* SpiritVale uses a mobile-first six-viewpoint ladder aligned to Tailwind's  */
/* defaults.                                                                  */
/*                                                                            */
/* Viewpoints                                                                  */
/* - default: 0px-639px  (phones / smallest layout)                          */
/* - sm:      640px-767px (large phones / small tablets)                      */
/* - md:      768px-1023px(tablets / narrow landscape)                        */
/* - lg:      1024px-1279px(laptop / desktop start)                            */
/* - xl:      1280px-1535px(wide desktop)                                      */
/* - 2xl:    1536px+      (very wide desktop)                                */
/*                                                                            */
/* Implementation rule: write defaults for the smallest layout whenever        */
/* practical, then layer upward with canonical breakpoints.                    */
/* -------------------------------------------------------------------------- */


  1) Global custom additions (HARDENED)
      - Scoped to .mw-parser-output so it can’t affect Citizen chrome.
      - Uses hyphenated class names to avoid generic collisions.


  2) HERO TEMPLATE (Shared Infobox System)
/* -------------------------------------------------------------------------- */
      - Used by Skills + Passives (and future templates).
/* 1) SpiritVale tokens */
      - Dark mode is the design truth.
/* -------------------------------------------------------------------------- */
      - Modules intentionally stay dark in BOTH themes (for now).
  ========================================================== */


:root{
  /* Surface ladder.
    bg0 = site background only
    bg1 = main component surface
    bg2 = nested/grouped panel surface
    bg3 = deep inset / pill surface
    bg4 = highest emphasis / selected / strong highlight surface
  */
  --sv-ui-bg0:#0f172a;
  --sv-ui-bg1:#1f2937;
  --sv-ui-bg2:#273449;
  --sv-ui-bg3:#2e3f59;
  --sv-ui-bg4:#4e6d97;


/* ============================================================
  /* Border / frame ladder. */
  1) Global custom additions (HARDENED)
  --sv-ui-line1:#3b4b63;
  ========================================================== */
  --sv-ui-line2:#4b6388;
  --sv-ui-line3:#7d93b5;


/* Playtest info box */
  /* Text ladder. */
.mw-parser-output .playtest-info-box {
  --sv-ui-text1:#f5f9ff;
   max-width: 100%;
  --sv-ui-text2:#d7e2f4;
   margin: 0 0 10px 0;
  --sv-ui-text3:#b6c6e0;
   border: 1px solid #ccc;
  --sv-ui-text4:#7f9fcc;
   border-radius: 6px;
 
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  /* Accent ladder. */
   background: #f0f2f8;
  --sv-ui-accent:#6aa6ff;
   padding: 10px;
  --sv-ui-accent2:#8cbcff;
   text-align: center;
  --sv-ui-accent3:#e6f0ff;
   color: #333;
 
   overflow-wrap: anywhere;
  /* Popover tokens. */
   word-break: break-word;
  --sv-ui-pop-bg:var(--sv-ui-bg2);
   --sv-ui-pop-line:var(--sv-ui-line2);
   --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);
 
  /* Radius tokens. */
  --sv-ui-rad-sm:10px;
   --sv-ui-rad-md:14px;
   --sv-ui-rad-lg:18px;
   --sv-ui-rad-pill:999px;
 
  /* Shared shadow tokens. */
  --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
 
  /* Shared pill tokens. */
  --sv-ui-pill-bg:var(--sv-ui-bg3);
  --sv-ui-pill-line:var(--sv-ui-line2);
  --sv-ui-pill-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  --sv-ui-pill-text:var(--sv-ui-text1);
}
 
/* Fallback light skin mapping. */
.mw-theme-light{
  --sv-ui-bg0:#1f2937;
  --sv-ui-bg1:#273449;
  --sv-ui-bg2:#2e3f59;
  --sv-ui-bg3:#364a69;
  --sv-ui-bg4:#6888b4;
 
  --sv-ui-line1:#4b6388;
  --sv-ui-line2:#5f7fb4;
   --sv-ui-line3:#8ea7ca;
 
   --sv-ui-text1:#f5f9ff;
  --sv-ui-text2:#d7e2f4;
   --sv-ui-text3:#b6c6e0;
   --sv-ui-text4:#8ba8d1;
 
   --sv-ui-accent:#8cbcff;
   --sv-ui-accent2:#b0d0ff;
  --sv-ui-accent3:#f2f7ff;
}
}


/* Header container band (custom page header template wrapper) */
/* -------------------------------------------------------------------------- */
.mw-parser-output .header-container-outer {
/* 2) Sitewide link treatment */
   max-width: 100%;
/* -------------------------------------------------------------------------- */
   margin: 1px;
 
   border: 2px solid #372b54;
.mw-parser-output a{
   border-radius: 10px;
  color:var(--color-link, var(--sv-ui-accent));
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
   text-decoration:underline;
  background: #f0f2f8;
   text-decoration-thickness:2px;
   text-underline-offset:2px;
   text-decoration-skip-ink:auto;
   transition:
    color 120ms ease,
    text-decoration-thickness 120ms ease,
    text-underline-offset 120ms ease;
}
}


.mw-parser-output .header-container-middle {
.mw-parser-output a:visited{
   background: #f0f2f8;
   color:var(--color-visited, var(--sv-ui-accent2));
  color: white;
  text-align: center;
  padding: 1px;
  border-radius: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
}


.mw-parser-output .header-container-inner {
.mw-parser-output a:hover{
  background: linear-gradient(180deg, #5a4e7c, #372b54);
   text-decoration-thickness:3px;
  color: white;
   text-underline-offset:3px;
   text-align: center;
  padding: 1px;
  border-radius: 8px;
   overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 300%;
}
}


/* Generic custom table */
.mw-parser-output a:focus-visible{
.mw-parser-output table.custom-table {
   outline:2px solid var(--sv-ui-accent3);
   float: none;
   outline-offset:2px;
   border: 2px solid #372b54;
   border-radius:6px;
   border-radius: 10px;
   box-shadow:0 0 0 3px rgba(230,240,255,0.12);
  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;
}
}


.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th {
/* -------------------------------------------------------------------------- */
   background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
/* 3) Shared primitives */
   color: white;
/* -------------------------------------------------------------------------- */
   text-align: center;
 
   padding: 6px;
.sv-card,
  font-size: 120%;
.mw-parser-output .sv-card{
  border-top-left-radius: 8px;
   background:var(--sv-ui-bg1);
   border-top-right-radius: 8px;
   border:1px solid var(--sv-ui-line1);
  overflow-wrap: anywhere;
   border-radius:var(--sv-ui-rad-md);
  word-break: break-word;
   box-shadow:var(--sv-ui-shadow1);
   color:var(--color-base, var(--sv-ui-text2));
}
}


.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th {
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
   text-align: center;
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
  padding: 4px;
   color:var(--color-emphasized, var(--sv-ui-text1));
  border-bottom: 1px solid #555;
}
}


.mw-parser-output table.custom-table > tbody > tr > td {
.sv-tile,
   text-align: center;
.mw-parser-output .sv-tile{
   padding: 4px;
   background:var(--sv-ui-bg2);
   border-bottom: 1px solid #555;
   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 table.custom-table > tbody > tr.middle-header > th {
.sv-pill,
   background: linear-gradient(180deg, #7a6fb0, #5a4e7c);
.mw-parser-output .sv-pill{
   color: white;
  display:inline-flex;
   text-align: center;
  align-items:center;
   padding: 6px;
  justify-content:center;
   font-size: 110%;
  padding:0.18em 0.40em;
  border-radius:var(--sv-ui-rad-sm);
  background:var(--sv-ui-pill-bg);
  border:1px solid var(--sv-ui-pill-line);
  box-shadow:var(--sv-ui-pill-shadow);
   background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
   color:var(--sv-ui-pill-text);
  font-weight:800;
   text-transform:uppercase;
   letter-spacing:0.03em;
   font-size:0.72em;
  line-height:1.15;
  white-space:nowrap;
}
}


/* Citizen search hover (targets a specific Citizen class) */
.sv-pill--compact,
.citizen-search-trigger {
.mw-parser-output .sv-pill--compact{
   transition: transform 0.15s ease-in-out;
   padding:0.15em 0.38em;
  border-radius:var(--sv-ui-rad-pill);
}
}
.citizen-search-trigger:hover {
 
   transform: translateY(-2px);
.sv-pill--value,
.mw-parser-output .sv-pill--value{
   border-radius:var(--sv-ui-rad-pill);
  font-weight:900;
  text-transform:none;
  letter-spacing:0.01em;
}
}


.sv-focus-ring:focus-visible,
.mw-parser-output .sv-focus-ring:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:var(--sv-ui-rad-sm);
}


/* ============================================================
/* -------------------------------------------------------------------------- */
  2) HERO TEMPLATE (Shared Infobox System)
/* 3a) Hover lift utility */
  ============================================================
/* -------------------------------------------------------------------------- */
  Used by:
    - table.spiritvale-skill-infobox
    - table.spiritvale-passive-infobox


  Theme strategy:
.sv-hover-lift{
    - Dark mode: default styling
  transition:transform 0.15s ease-in-out;
    - Light mode: ONLY adjusts zebra/separators for readability
  will-change:transform;
    - Modules: stay dark in light mode (intentional)
}
  ========================================================== */


/* ------------------------------------------------------------
.sv-hover-lift:hover{
  Global sizing + tokens
   transform:translateY(-2px);
  --------------------------------------------------------- */
}
:root {
   /* Infobox sizing */
  --sv-infobox-max: 620px;
  --sv-skill-width: 660px;
  --sv-passive-width: 540px;


  /* Module palette (kept dark across themes) */
/* -------------------------------------------------------------------------- */
  --sv-module-box-a: #5a4e7c;  /* top */
/* 3b) Right infobox wrapper */
  --sv-module-box-b: #372b54;  /* bottom */
/* -------------------------------------------------------------------------- */
  --sv-module-box:  #5a4e7c;  /* tile fill */
  --sv-module-gridline: rgba(255, 255, 255, 0.10);


  /* Modules band (used by the modules row background) */
.sv-card.sv-infobox-right{
  --sv-modules-band-a: var(--sv-module-box-a);
  float:right !important;
   --sv-modules-band-b: var(--sv-module-box-b);
  width:100%;
  max-width:200px;
  margin:0 0 2em 2em;
  box-sizing:border-box;
   border-radius:var(--sv-ui-rad-lg);
  overflow:hidden;
  clear:right;
}
}


/* ------------------------------------------------------------
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
  Shared base: Skill + Passive tables
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
  --------------------------------------------------------- */
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;


  border-radius: 12px;
/* -------------------------------------------------------------------------- */
  overflow: hidden;
/* 4) Shared utilities */
  border: 1px solid rgba(55, 43, 84, 0.65);
/* -------------------------------------------------------------------------- */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);


   font-size: 0.95em;
.sv-hidden,
.mw-parser-output .sv-hidden{
   display:none !important;
}
}


/* Hero (title + description) band background */
[hidden]{display:none !important;}
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
 
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
.sv-miss,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
.mw-parser-output .sv-miss{
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
  display:inline-flex;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
  align-items:center;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
  justify-content:center;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
  width:18px;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
  height:18px;
  background: linear-gradient(135deg, #7a6fb0, #372b54);
  border-radius:var(--sv-ui-rad-pill);
   color: #fff;
  border:1px solid var(--sv-ui-line2);
   padding: 0.9em 1.1em;
  background:var(--sv-ui-bg3);
  text-align: center;
  color:var(--sv-ui-text1);
   vertical-align: middle;
   font-weight:900;
   font-size:12px;
   line-height:1;
}
}


/* Row separators */
.sv-img,
table.spiritvale-skill-infobox > tbody > tr,
.mw-parser-output .sv-img{
table.spiritvale-passive-infobox > tbody > tr {
   display:inline-flex;
   border-bottom: 1px solid rgba(148, 163, 184, 0.40);
  align-items:center;
  justify-content:center;
}
}
table.spiritvale-skill-infobox > tbody > tr:last-child,
 
table.spiritvale-passive-infobox > tbody > tr:last-child {
.sv-img img,
   border-bottom: none;
.mw-parser-output .sv-img img{
  display:block;
  max-width:100%;
  height:auto;
   border-radius:var(--sv-ui-rad-sm);
}
}


/* Label/value rows (shared default) */
.sv-img--shadow img,
table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
.mw-parser-output .sv-img--shadow img{
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header) {
   box-shadow:0 10px 18px rgba(0,0,0,0.35);
   width: 26%;
  padding: 0.45em 0.85em;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
}


table.spiritvale-skill-infobox > tbody > tr > td,
/* -------------------------------------------------------------------------- */
table.spiritvale-passive-infobox > tbody > tr > td {
/* 5) Shared level selector */
   padding: 0.45em 0.85em;
/* -------------------------------------------------------------------------- */
   text-align: left;
 
.sv-level-ui,
.mw-parser-output .sv-level-ui{
   display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
   text-align:center;
  margin:0;
}
}


/* Zebra striping (subtle by default) */
.sv-level-label,
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.mw-parser-output .sv-level-label{
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
   margin:0;
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);
}
}


/* Hero helpers (icon + title + description) */
.sv-level-label[data-sv-helper-text],
.spiritvale-infobox-main-left-inner {
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
   display: flex;
.mw-parser-output .sv-level-label[data-sv-helper-text],
   flex-direction: column;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
   align-items: center;
   display:inline-block;
   justify-content: center;
   margin:0;
   gap: 0.35em;
   padding:0;
   font-size:0;
   line-height:0;
}
}


.spiritvale-infobox-title {
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
   font-size: 1.25em;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
   font-weight: 600;
   position:static;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
   transform:none;
}
}


.spiritvale-infobox-main-right-inner {
.sv-level-label[data-sv-helper-text]::after,
   display: flex;
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
   align-items: center;
  content:attr(data-sv-helper-text);
   justify-content: center;
   display:inline-block;
  font-weight:900;
  font-size:12px;
   line-height:1.25;
   letter-spacing:0.15px;
  color:var(--sv-ui-text1);
}
}


.spiritvale-infobox-description {
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
   font-size: 1.05em;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
   font-style: italic;
   content:"Slide to set level";
   text-align: center;
  display:inline-block;
   max-width: 42em;
   font-weight:900;
   margin: 0 auto;
   font-size:12px;
   opacity: 0.95;
   line-height:1.25;
   letter-spacing:0.15px;
   color:var(--sv-ui-text1);
}
}


/* Skill hero split-row tuning */
.sv-level-slider,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row {
.mw-parser-output .sv-level-slider{
   border-bottom: none !important;
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:100%;
   flex-wrap:nowrap;
  direction:ltr;
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th {
 
   padding-bottom: 0.55em;
.sv-level-slider input.sv-level-range[type="range"],
.sv-level-slider .sv-level-range--custom,
.sv-level-slider .sv-level-range[data-sv-slider="1"],
.mw-parser-output .sv-level-slider input.sv-level-range[type="range"],
.mw-parser-output .sv-level-slider .sv-level-range--custom,
.mw-parser-output .sv-level-slider .sv-level-range[data-sv-slider="1"]{
   flex:1 1 auto;
  min-width:0;
  width:auto;
  box-sizing:border-box;
  margin:0;
  order:1;
}
}
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td {
 
   padding-top: 0.55em;
.sv-level-endvalue,
   padding-bottom: 0.55em;
.mw-parser-output .sv-level-endvalue{
  flex:0 0 auto;
  order:2;
  min-width:28px;
   padding:1px 7px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-pill-line);
  background:var(--sv-ui-pill-bg);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
   box-shadow:var(--sv-ui-pill-shadow);
  color:var(--sv-ui-text2);
  font-weight:900;
  font-size:12px;
  line-height:1.25;
  letter-spacing:0.15px;
  text-align:center;
  white-space:nowrap;
}
}


 
.sv-level--hide-ticks .sv-level-ticklabels,
/* ------------------------------------------------------------
[data-sv-level-hide-ticks="1"] .sv-level-ticklabels,
  SKILLS: sizing + list wrapper behavior
.mw-parser-output .sv-level--hide-ticks .sv-level-ticklabels,
  --------------------------------------------------------- */
.mw-parser-output [data-sv-level-hide-ticks="1"] .sv-level-ticklabels{
table.spiritvale-skill-infobox {
   display:none;
   max-width: var(--sv-skill-width);
  margin: 1.25em auto;
  table-layout: fixed;
}
}


/* List-mode wrapper */
.sv-level-range--custom,
.sv-skill-collection {
.sv-level-range[data-sv-slider="1"]{
  width: 100%;
   display:block;
  max-width: var(--sv-skill-width);
   position:relative;
   margin: 0 auto !important;
   height:26px;
   padding: 0 !important;
   border-radius:var(--sv-ui-rad-pill);
 
   border:1px solid var(--sv-ui-line2);
   border: 2px solid #372b54;
   background:var(--sv-ui-bg1);
   border-radius: 10px;
   cursor:pointer;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
   box-sizing:border-box;
   background: transparent !important;
 
   overflow: hidden;
   display: block !important;
}
}


/* Neutralize Citizen wrappers inside the collection */
.sv-level-track{
.sv-skill-collection .mw-table-wrapper,
  position:absolute;
.sv-skill-collection .table-overflow,
  left:8px;
.sv-skill-collection .table-scroll,
  right:8px;
.sv-skill-collection .citizen-table {
   top:50%;
   border: none !important;
   margin-top:-4px;
   box-shadow: none !important;
   height:8px;
   background: transparent !important;
   border-radius:var(--sv-ui-rad-pill);
   padding: 0 !important;
  background:var(--sv-ui-bg2);
   margin: 0 !important;
   overflow:hidden;
}
}


/* Remove each skill’s individual border/shadow when inside the list wrapper */
.sv-level-fill{
.sv-skill-collection table.spiritvale-skill-infobox {
   display:block;
   width: 100%;
   height:100%;
   max-width: 100%;
   width:0%;
   margin: 0 !important;
   border-radius:var(--sv-ui-rad-pill);
 
   background:linear-gradient(90deg, var(--sv-ui-accent), rgba(245,249,255,0.22));
   border: none !important;
   box-shadow: none !important;
  border-radius: 0 !important;
}
}


/* Divider between skill entries in list mode */
.sv-level-thumb{
.sv-skill-collection > * + * {
  position:absolute;
   border-top: 1px solid rgba(148, 163, 184, 0.25);
  left:0%;
  top:50%;
  margin-top:-9px;
  margin-left:-9px;
  width:18px;
  height:18px;
   border-radius:var(--sv-ui-rad-pill);
  border:2px solid var(--sv-ui-line3);
  background:rgba(245,249,255,0.92);
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
}
}


 
.sv-level-ticklabels{
/* ------------------------------------------------------------
  display:flex;
  SKILLS: Hero Modules (4-slot scaffold)
  justify-content:space-between;
  - One row contains a 2x2 grid of module tiles.
  gap:10px;
  - Modules intentionally stay dark across themes (for now).
  margin-top:7px;
  --------------------------------------------------------- */
  font-weight:900;
table.spiritvale-skill-infobox tr.hero-modules-row > td.hero-modules-cell {
   font-size:12px;
   padding: 0 !important;
   color:var(--sv-ui-text3);
   background: linear-gradient(135deg, var(--sv-modules-band-a), var(--sv-modules-band-b)) !important;
  line-height:1.1;
   color: #fff;
   min-height:12px;
}
}


/* 2x2 grid of module tiles */
.sv-level-tick{
table.spiritvale-skill-infobox .hero-modules-grid {
   display:inline-flex;
   display: grid;
   align-items:center;
   grid-template-columns: 1fr 1fr;
  justify-content:center;
   gap: 0;
   min-width:18px;
}
}


.mw-parser-output table.spiritvale-skill-infobox .hero-module {
.sv-level-range--custom .sv-level-bubble,
   padding: 0.40em 0.40em;
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
   box-sizing: border-box;
   position:absolute;
 
   top:-45px;
   background: #372b54 !important;
  left:0%;
   color: #fff !important;
   transform:translateX(-50%);
 
   padding:9px 15px;
   border-top: 1px solid var(--sv-module-gridline);
  border-radius:36px;
   border-left: 1px solid var(--sv-module-gridline);
   border:1px solid var(--sv-ui-line3);
   background:var(--sv-ui-bg3);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
  font-weight:900;
  font-size:36px;
  line-height:1;
  color:var(--sv-ui-text1);
  pointer-events:none;
  white-space:nowrap;
}
}


/* Grid borders: remove top border on first row; remove left border on first column */
.sv-level-range--custom .sv-level-bubble:after,
table.spiritvale-skill-infobox .hero-module:nth-child(-n + 2) {
.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
   border-top: none;
  content:"";
}
  position:absolute;
table.spiritvale-skill-infobox .hero-module:nth-child(odd) {
  left:50%;
   border-left: none;
  bottom:-9px;
  width:14px;
  height:14px;
  margin-left:-7px;
  background:var(--sv-ui-bg3);
   border-left:1px solid var(--sv-ui-line3);
  border-bottom:1px solid var(--sv-ui-line3);
   transform:rotate(45deg);
}
}


/* Empty slots still reserve space for future modules */
.sv-level-range--custom:focus-visible,
table.spiritvale-skill-infobox .hero-module-empty .hero-module-body {
.sv-level-range[data-sv-slider="1"]:focus-visible{
   min-height: 3.2em;
   outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:var(--sv-ui-rad-sm);
}
}


/* -------------------------------------------------------------------------- */
/* 6) Shared tabs */
/* -------------------------------------------------------------------------- */


/* ------------------------------------------------------------
.sv-tabs,
  SKILLS: Module 1 – Level Selector (self-contained)
.mw-parser-output .sv-tabs{
  --------------------------------------------------------- */
   margin:10px 0 0;
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui {
  width: 100%;
   margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-title {
.sv-tabs-list,
   font-weight: 700;
.mw-parser-output .sv-tabs-list{
   text-transform: uppercase;
   display:flex;
   letter-spacing: 0.05em;
   gap:8px;
   font-size: 0.8em;
   flex-wrap:wrap;
   opacity: 0.95;
   margin:0 0 10px 0;
   padding:0;
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-label {
.sv-tab,
   font-weight: 600;
.mw-parser-output .sv-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--sv-ui-rad-pill);
  padding:7px 10px;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  color:var(--sv-ui-text1);
   font-weight:900;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
}


table.spiritvale-skill-infobox .module-level-selector .sv-level-slider input[type="range"] {
.sv-tab:hover,
   width: 100%;
.mw-parser-output .sv-tab:hover{
  box-sizing: border-box;
   background:var(--sv-ui-bg3);
  margin: 0;
}
}


/* Single-level skills (no input; keep spacing stable) */
.sv-tab[aria-selected="true"],
table.spiritvale-skill-infobox .module-level-selector .sv-level-ui-single .sv-level-slider-single {
.mw-parser-output .sv-tab[aria-selected="true"]{
   min-height: 0.45em;
  background:var(--sv-ui-bg3);
   border-color:var(--sv-ui-accent);
}
}


/* Slot 1: center selector within the module tile */
.sv-tabpanel,
table.spiritvale-skill-infobox .hero-module.module-level-selector {
.mw-parser-output .sv-tabpanel{
   display: flex;
  padding:10px 12px;
  border-radius:var(--sv-ui-rad-md);
  border:1px solid var(--sv-ui-line1);
   background:var(--sv-ui-bg1);
}
}
table.spiritvale-skill-infobox .hero-module.module-level-selector .hero-module-body {
 
  flex: 1;
.sv-tab:focus-visible,
   display: flex;
.mw-parser-output .sv-tab:focus-visible,
   align-items: center;
.sv-disclose-btn:focus-visible,
   justify-content: center;
.mw-parser-output .sv-disclose-btn:focus-visible{
   outline:2px solid var(--sv-ui-accent3);
   outline-offset:2px;
   border-radius:var(--sv-ui-rad-sm);
}
}


/* -------------------------------------------------------------------------- */
/* 7) Shared tip trigger */
/* -------------------------------------------------------------------------- */


/* ------------------------------------------------------------
.sv-tip,
  SKILLS: Module 2 – Skill Type (2x2 grid)
.mw-parser-output .sv-tip{
  - Centered contents
   position:relative;
  - No divider lines (spacing instead)
   display:inline-flex;
  --------------------------------------------------------- */
   align-items:center;
table.spiritvale-skill-infobox .hero-module.module-skill-type .hero-module-body {
   flex:0 0 auto;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
  width: 100%;
}
}


/* Grid stays 2x2 */
.sv-tip-btn,
table.spiritvale-skill-infobox .module-skill-type .sv-type-grid {
.mw-parser-output .sv-tip-btn{
   width: 100%;
   display:inline-flex;
   margin: 0 !important;
   align-items:center;
   box-sizing: border-box;
   justify-content:center;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  color:var(--sv-ui-text1);
  cursor:pointer;
  user-select:none;
}


  display: grid;
.sv-tip-btn:hover,
  grid-template-columns: 1fr 1fr;
.mw-parser-output .sv-tip-btn:hover{
   gap: 0.5em;
   background:var(--sv-ui-bg3);
  padding: 0.4em;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
.sv-tip-btn:focus-visible,
   display: flex;
.mw-parser-output .sv-tip-btn:focus-visible{
  flex-direction: column;
   outline:2px solid var(--sv-ui-accent3);
  align-items: center;
   outline-offset:2px;
   justify-content: center;
}
  text-align: center;


   border: none !important;
.sv-tip-btn--icon,
   padding: 0.25em 0.45em;
.sv-tip-btn:not(.sv-tip-btn--pill),
   gap: 0.6em;
.mw-parser-output .sv-tip-btn--icon,
.mw-parser-output .sv-tip-btn:not(.sv-tip-btn--pill){
   width:28px;
   height:28px;
   border-radius:var(--sv-ui-rad-pill);
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
.sv-tip-btn--pill,
   width: 100%;
.sv-overcap-btn,
   padding: 0.18em 0.35em;
.mw-parser-output .sv-tip-btn--pill,
   border-radius: 6px;
.mw-parser-output .sv-overcap-btn{
   width:auto;
  height:auto;
  min-width:0;
  min-height:0;
   padding:1px 8px;
  border-radius:var(--sv-ui-rad-pill);
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  white-space:nowrap;
  background:var(--sv-ui-pill-bg);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:var(--sv-ui-pill-shadow);
   border-color:var(--sv-ui-pill-line);
  color:var(--sv-ui-text2);
}


   font-weight: 800;
.sv-ico--info,
   text-transform: uppercase;
.mw-parser-output .sv-ico--info{
   letter-spacing: 0.03em;
   width:18px;
   font-size: 0.72em;
  height:18px;
   line-height: 1.15;
  border-radius:999px;
 
  display:flex;
   background: linear-gradient(
   align-items:center;
    180deg,
   justify-content:center;
    rgba(122, 111, 176, 0.35),
   font-style:normal;
    rgba(90, 78, 124, 0.20)
   font-weight:900;
   );
   font-size:12px;
   line-height:1;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-value {
/* -------------------------------------------------------------------------- */
  margin-top: 0 !important;
/* 8) Shared disclosure */
  font-weight: 400;
/* -------------------------------------------------------------------------- */
  font-size: 1.02em;
  line-height: 1.25;


  white-space: normal;
.sv-disclose,
  overflow-wrap: anywhere;
.mw-parser-output .sv-disclose{
   word-break: break-word;
   position:relative;
}
}


/* ------------------------------------------------------------
.sv-disclose-btn,
  SKILLS: Module 3 – Skill Source (Modifier + Source + Scaling)
.mw-parser-output .sv-disclose-btn{
  - Optional Modifier column (hidden if empty)
  display:flex;
  - Titles aligned (no drifting when scaling list grows)
  align-items:center;
  - Modifier value and Source value match in size/weight
  justify-content:space-between;
  --------------------------------------------------------- */
  gap:12px;
  width:100%;
  padding:10px 12px;
  border-radius:var(--sv-ui-rad-md);
  border:1px solid var(--sv-ui-line1);
  background:var(--sv-ui-bg1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  color:var(--sv-ui-text1);
  font-weight:900;
  cursor:pointer;
  user-select:none;
}


/* Center the entire module contents within the tile */
.sv-disclose-btn:hover,
table.spiritvale-skill-infobox .hero-module.skill-source-module .hero-module-body {
.mw-parser-output .sv-disclose-btn:hover{
   height: 100%;
   background:var(--sv-ui-bg2);
  display: flex;
  align-items: center;      /* vertical center of the grid block */
  justify-content: center; /* horizontal center */
}
}


/* Grid container */
.sv-disclose-btn--compact,
table.spiritvale-skill-infobox .skill-source-module .sv-source-grid {
.mw-parser-output .sv-disclose-btn--compact{
   width: 100%;
   border-radius:var(--sv-ui-rad-pill);
  box-sizing: border-box;
   min-height:36px;
 
   padding:0 12px;
   display: grid;
}
   gap: 0.55em;


   /* Critical: keep pill titles aligned across columns */
.sv-disclose-count,
   align-items: start;
.mw-parser-output .sv-disclose-count{
   justify-items: center;
   font-weight:800;
   font-size:13px;
  color:var(--sv-ui-text3);
   white-space:nowrap;
}
}


/* Layout variants (driven by classes from Lua) */
/* -------------------------------------------------------------------------- */
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-has-mod .sv-source-grid {
/* 9) Universal popups */
  grid-template-columns: 0.85fr 1fr 1fr; /* Modifier | Source | Scaling */
/* -------------------------------------------------------------------------- */
}


table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-no-mod .sv-source-grid {
.sv-tip-btn,
   grid-template-columns: 1fr 1fr;       /* Source | Scaling */
.sv-disclose-btn,
.sv-def,
.sv-uipop-head,
.sv-uipop-title,
.sv-uipop-title-link{
   -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
}


/* Only one content column (Source-only or Scaling-only) */
.sv-tip-btn *,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-no-mod .sv-source-grid,
.sv-disclose-btn *,
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-no-mod .sv-source-grid {
.sv-uipop-head *{
   grid-template-columns: 1fr;
  -webkit-user-select:none;
   user-select:none;
}
}


/* Modifier + only one content column */
.sv-uipop{
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-source.sv-has-mod .sv-source-grid,
  position:fixed;
table.spiritvale-skill-infobox .hero-module.skill-source-module.sv-only-scaling.sv-has-mod .sv-source-grid {
  z-index:9000;
   grid-template-columns: 0.95fr 1.05fr;
  top:0;
  left:0;
  box-sizing:border-box;
  border-radius:var(--sv-ui-rad-lg);
  border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
  background:var(--sv-ui-pop-bg, var(--sv-ui-bg2));
  background-image:
    radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  color:var(--sv-ui-text1);
   box-shadow:
    var(--sv-ui-pop-shadow, 0 10px 30px rgba(0,0,0,0.35)),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
}
}


/* Each column is centered, but pinned to the top for title alignment */
.sv-uipop[aria-hidden="true"]{display:none;}
table.spiritvale-skill-infobox .skill-source-module .sv-source-col {
  width: 100%;
  display: flex;
  flex-direction: column;


  align-items: center;
.sv-uipop--sm,
  justify-content: flex-start; /* keeps pill titles parallel */
.sv-uipop--lg{
   text-align: center;
   width:240px;
 
   max-width:calc(100vw - 20px);
   gap: 0.35em;
}
}


/* Pill styling: match Module 2 label treatment */
.sv-uipop--sm{max-height:min(45vh, 320px);}
table.spiritvale-skill-infobox .skill-source-module .sv-source-pill {
.sv-uipop--lg{max-height:min(70vh, 560px);}
  width: 100%;
  padding: 0.18em 0.35em;
  border-radius: 6px;


   font-weight: 800;
.sv-uipop-head{
   text-transform: uppercase;
   display:flex;
   letter-spacing: 0.03em;
   align-items:center;
   font-size: 0.72em;
   justify-content:center;
   line-height: 1.15;
   padding:12px 12px;
 
   border-bottom:1px solid var(--sv-ui-line2);
   background: linear-gradient(
   background:var(--sv-ui-bg3);
    180deg,
    rgba(122, 111, 176, 0.35),
    rgba(90, 78, 124, 0.20)
  );
}
}


/* Modifier value + Source value (MATCHED) */
.sv-uipop-head--clickable{cursor:pointer;}
table.spiritvale-skill-infobox .skill-source-module .sv-modifier-value,
table.spiritvale-skill-infobox .skill-source-module .sv-source-value {
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(1.05em, 2.2vw, 1.35em);


   /* Wrap “Magic Attack” nicely */
.sv-uipop-title{
   white-space: normal;
   width:100%;
   overflow-wrap: anywhere;
   text-align:center;
   word-break: break-word;
   font-weight:900;
   font-size:16px;
  letter-spacing:0.02em;
  color:var(--color-emphasized, var(--sv-ui-text1));
}


   opacity: 0.98;
.sv-uipop-title a.sv-uipop-title-link{
   color:inherit;
  text-decoration:none;
}
}


/* Scaling list (smaller than the big values, centered) */
.sv-uipop-title a.sv-uipop-title-link:hover{
table.spiritvale-skill-infobox .skill-source-module .sv-scaling-list {
   text-decoration:underline;
   display: flex;
   text-decoration-thickness:2px;
   flex-direction: column;
   text-underline-offset:2px;
   gap: 0.22em;
  align-items: center;
}
}


table.spiritvale-skill-infobox .skill-source-module .sv-scaling-item {
.sv-uipop-body{
   font-weight: 500;
   padding:10px 12px 12px;
   font-size: 0.88em;
   font-size:13px;
   line-height: 1.15;
   line-height:1.4;
   opacity: 0.95;
  color:var(--sv-ui-text2);
  overflow:auto;
   overflow-wrap:anywhere;
  word-break:break-word;
  -webkit-user-select:text;
  user-select:text;
}
}


.sv-uipop-body--pre{white-space:pre-line;}


.sv-uipop-body p,
.sv-uipop-body ul,
.sv-uipop-body ol{margin:0;}


/* ------------------------------------------------------------
.sv-uipop-body ul,
  Mobile behavior
.sv-uipop-body ol{padding-left:1.15em;}
  - Outer modules grid stacks to 1 column.
  - Skill Type module internally stays 2x2.
  --------------------------------------------------------- */
@media (max-width: 560px) {
  table.spiritvale-skill-infobox .hero-modules-grid {
    grid-template-columns: 1fr;
  }
 
  table.spiritvale-skill-infobox .hero-module {
    border-left: none;
  }


  table.spiritvale-skill-infobox .hero-module:first-child {
.sv-uipop-body li{margin:0;}
    border-top: none;
  }


  /* Tighten type chunks on mobile */
.sv-uipop a{
   table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk {
   color:var(--color-link, var(--sv-ui-accent));
    padding: 0.15em 0.15em;
  text-decoration:underline;
   }
  text-decoration-thickness:2px;
   text-underline-offset:2px;
}


  table.spiritvale-skill-infobox .module-skill-type .sv-type-label {
.sv-uipop a:hover{
    font-size: 0.68em;
  text-decoration-thickness:3px;
   }
   text-underline-offset:3px;
}
}


.sv-uipop a:focus-visible,
.sv-uipop-title a.sv-uipop-title-link:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:6px;
}


/* ------------------------------------------------------------
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
  PASSIVES (kept as-is for now)
   margin:0;
  --------------------------------------------------------- */
   padding:0;
table.spiritvale-passive-infobox {
   list-style:none;
  width: var(--sv-passive-width);
   max-width: var(--sv-passive-width);
   margin: 1em auto;
   table-layout: fixed;
}
}


/* Passive split hero rows (match Skills) */
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row {
  padding:6px 0;
   border-bottom: none !important;
   border-top:1px solid var(--sv-ui-line1);
  font-size:13px;
  color:var(--sv-ui-text2);
}
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th {
 
   padding-bottom: 0.55em;
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
  border-top:none;
   padding-top:0;
}
}
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td {
 
   padding-top: 0.55em;
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
   padding-bottom: 0.55em;
   padding-top:10px;
  font-weight:900;
  font-size:12px;
   letter-spacing:0.02em;
  color:var(--sv-ui-text1);
}
}


/* Center + wrap passive body rows */
.sv-uipop .sv-disclose-sections{
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th,
   display:flex;
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > td {
   flex-direction:column;
   text-align: center;
   gap:10px;
  vertical-align: middle;
  white-space: normal;
   overflow-wrap: anywhere;
   word-break: break-word;
}
}


/* Passive section headers centered */
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
table.spiritvale-passive-infobox .spiritvale-infobox-section-header {
  padding-top:10px;
   text-align: center;
   border-top:1px solid var(--sv-ui-line1);
}
}


/* Passive list layout */
.sv-uipop .sv-disclose-sec-title{
.spiritvale-passive-list {
   font-weight:900;
   display: flex;
   font-size:13px;
   flex-direction: column;
   letter-spacing:0.02em;
   align-items: center;
   color:var(--sv-ui-text1);
   gap: 1.25em;
  margin:0 0 4px 0;
}
}


/* Remove Citizen wrapper borders/spacing around passive tables in lists */
.sv-uipop .sv-disclose-sec-items{
.spiritvale-passive-list .mw-table-wrapper,
   font-size:13px;
.spiritvale-passive-list .table-overflow,
   line-height:1.45;
.spiritvale-passive-list .table-scroll,
   color:var(--sv-ui-text2);
.spiritvale-passive-list .citizen-table {
   border: none !important;
   box-shadow: none !important;
   background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
}


.sv-uipop .sv-disclose-item{display:inline;}
.sv-uipop .sv-disclose-sfx{opacity:0.78;}
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}
/* -------------------------------------------------------------------------- */
/* 10) Motion */
/* -------------------------------------------------------------------------- */


/* ------------------------------------------------------------
@media (prefers-reduced-motion: reduce){
  LIGHT MODE OVERRIDES
  .sv-hover-lift{transition:none;}
  - Keep modules DARK for now (no module background overrides).
  .sv-hover-lift:hover{transform:none;}
  - Increase zebra/separator contrast so body rows read cleanly.
  --------------------------------------------------------- */
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.mw-theme-light table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header) {
  background-color: rgba(148, 163, 184, 0.12);
}
}


.mw-theme-light table.spiritvale-skill-infobox > tbody > tr,
/* -------------------------------------------------------------------------- */
.mw-theme-light table.spiritvale-passive-infobox > tbody > tr {
/* 11) Responsive                                                              */
   border-bottom: 1px solid rgba(55, 43, 84, 0.18);
/* -------------------------------------------------------------------------- */
/* default (<640px): compact end value and helper text.                        */
/* sm and up (>=640px): restore the standard control sizing.                   */
 
@media (min-width:640px){
  .sv-level-endvalue,
  .mw-parser-output .sv-level-endvalue{
    padding:2px 8px;
    min-width:30px;
    font-size:13px;
    line-height:1.25;
  }
 
  .sv-level-label[data-sv-helper-text]::after,
   .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
  .mw-parser-output .sv-level-label[data-sv-helper-text]::after,
  .mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
    font-size:13px;
  }
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"