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
Tags: Reverted Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* ============================================================================
/* SpiritVale Wiki — Common.css */
SpiritVale Wiki — Common.css
/* Role: shared tokens, primitives, utilities, and interactive anatomy */
Sitewide base + shared SpiritVale components (all skins)
/* Scope: sitewide SpiritVale UI foundations only */
- No Citizen skin selectors
/* -------------------------------------------------------------------------- */
- No mobile-only (@media max-width:500) rules (those live in Mobile.css)
/* 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) SpiritVale tokens (fallback defaults)
/* -------------------------------------------------------------------------- */
- Citizen.css exports will override these where appropriate.
/* 1) SpiritVale tokens */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


:root{
:root{
/* SV UI tokens (fallback) */
  /* Surface ladder.
--sv-ui-bg0:#0f172a;
    bg0 = site background only
--sv-ui-bg1:#1f2937;
    bg1 = main component surface
--sv-ui-bg2:#273449;
    bg2 = nested/grouped panel surface
--sv-ui-bg3:#2e3f59;
    bg3 = deep inset / pill surface
 
    bg4 = highest emphasis / selected / strong highlight surface
--sv-ui-line1:#3b4b63;
  */
--sv-ui-line2:#4b6388;
  --sv-ui-bg0:#0f172a;
 
  --sv-ui-bg1:#1f2937;
--sv-ui-text1:#f5f9ff;
  --sv-ui-bg2:#273449;
--sv-ui-text2:#d7e2f4;
  --sv-ui-bg3:#2e3f59;
--sv-ui-text3:#b6c6e0;
  --sv-ui-bg4:#4e6d97;
 
--sv-ui-accent:#6aa6ff;
--sv-ui-accent2:#8cbcff;


/* Popover tuning tokens */
  /* Border / frame ladder. */
--sv-ui-pop-bg:var(--sv-ui-bg0);
  --sv-ui-line1:#3b4b63;
--sv-ui-pop-line:var(--sv-ui-line2);
  --sv-ui-line2:#4b6388;
--sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);
  --sv-ui-line3:#7d93b5;


--sv-ui-rad-sm:10px;
  /* Text ladder. */
--sv-ui-rad-md:14px;
  --sv-ui-text1:#f5f9ff;
--sv-ui-rad-lg:18px;
  --sv-ui-text2:#d7e2f4;
--sv-ui-rad-pill:999px;
  --sv-ui-text3:#b6c6e0;
  --sv-ui-text4:#7f9fcc;


--sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
  /* Accent ladder. */
  --sv-ui-accent:#6aa6ff;
  --sv-ui-accent2:#8cbcff;
  --sv-ui-accent3:#e6f0ff;


/* Legacy hero infobox variables (mapped to SV UI tokens) */
  /* Popover tokens. */
--sv-skill-width:660px;
  --sv-ui-pop-bg:var(--sv-ui-bg2);
--sv-passive-width:540px;
  --sv-ui-pop-line:var(--sv-ui-line2);
  --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);


--sv-base:var(--sv-ui-bg0);
  /* Radius tokens. */
--sv-surface:var(--sv-ui-bg2);
  --sv-ui-rad-sm:10px;
  --sv-ui-rad-md:14px;
  --sv-ui-rad-lg:18px;
  --sv-ui-rad-pill:999px;


--sv-card-border:var(--sv-ui-line1);
  /* Shared shadow tokens. */
--sv-row-border:var(--sv-ui-line1);
  --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);
--sv-gridline:var(--sv-ui-line2);


--sv-pill:var(--sv-ui-bg3);
  /* Shared pill tokens. */
--sv-pill-a:var(--sv-ui-bg3);
  --sv-ui-pill-bg:var(--sv-ui-bg3);
--sv-pill-b: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-text-soft:var(--sv-ui-text1);
  --sv-ui-pill-text:var(--sv-ui-text1);
--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);
}
}


/* If other skins use mw-theme-light, keep SV modules consistent */
/* Fallback light skin mapping. */
.mw-theme-light{
.mw-theme-light{
--sv-ui-bg0:#1f2937;
  --sv-ui-bg0:#1f2937;
--sv-ui-bg1:#273449;
  --sv-ui-bg1:#273449;
--sv-ui-bg2:#2e3f59;
  --sv-ui-bg2:#2e3f59;
--sv-ui-bg3:#364a69;
  --sv-ui-bg3:#364a69;
 
  --sv-ui-bg4:#6888b4;
--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-ui-line1:#4b6388;
--sv-row-border:var(--sv-ui-line1);
  --sv-ui-line2:#5f7fb4;
--sv-gridline:var(--sv-ui-line2);
  --sv-ui-line3:#8ea7ca;


--sv-pill:var(--sv-ui-bg3);
  --sv-ui-text1:#f5f9ff;
--sv-pill-a:var(--sv-ui-bg3);
  --sv-ui-text2:#d7e2f4;
--sv-pill-b:var(--sv-ui-bg3);
  --sv-ui-text3:#b6c6e0;
  --sv-ui-text4:#8ba8d1;


--sv-text-soft:var(--sv-ui-text1);
  --sv-ui-accent:#8cbcff;
  --sv-ui-accent2:#b0d0ff;
  --sv-ui-accent3:#f2f7ff;
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
2) Sitewide link visibility (prefer skin vars, fallback to SV vars)
/* 2) Sitewide link treatment */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.mw-parser-output a{
.mw-parser-output a{
color:var(--color-link, var(--sv-ui-accent));
  color:var(--color-link, var(--sv-ui-accent));
text-decoration:underline;
  text-decoration:underline;
text-decoration-thickness:2px;
  text-decoration-thickness:2px;
text-underline-offset: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 a:visited{
.mw-parser-output a:visited{
color:var(--color-visited, var(--sv-ui-accent2));
  color:var(--color-visited, var(--sv-ui-accent2));
}
}


.mw-parser-output a:hover{
.mw-parser-output a:hover{
text-decoration-thickness:3px;
  text-decoration-thickness:3px;
  text-underline-offset:3px;
}
}


.mw-parser-output a:focus-visible{
.mw-parser-output a:focus-visible{
outline:2px solid var(--sv-ui-accent2);
  outline:2px solid var(--sv-ui-accent3);
outline-offset:2px;
  outline-offset:2px;
border-radius:6px;
  border-radius:6px;
  box-shadow:0 0 0 3px rgba(230,240,255,0.12);
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
3) Shared primitives (opt-in for new modules)
/* 3) Shared primitives */
- Include unscoped selectors so template previews/docs still render correctly
/* -------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-card,
.sv-card,
.mw-parser-output .sv-card{
.mw-parser-output .sv-card{
background:var(--sv-ui-bg1);
  background:var(--sv-ui-bg1);
border:1px solid var(--sv-ui-line1);
  border:1px solid var(--sv-ui-line1);
border-radius:var(--sv-ui-rad-md);
  border-radius:var(--sv-ui-rad-md);
box-shadow:var(--sv-ui-shadow1);
  box-shadow:var(--sv-ui-shadow1);
color:var(--color-base, var(--sv-ui-text2));
  color:var(--color-base, var(--sv-ui-text2));
}
}


.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
.sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline),
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
.mw-parser-output .sv-card :where(h1,h2,h3,h4,h5,h6,th,summary,.mw-headline){
color:var(--color-emphasized, var(--sv-ui-text1));
  color:var(--color-emphasized, var(--sv-ui-text1));
}
}


.sv-tile,
.sv-tile,
.mw-parser-output .sv-tile{
.mw-parser-output .sv-tile{
background:var(--sv-ui-bg2);
  background:var(--sv-ui-bg2);
border:1px solid var(--sv-ui-line2);
  border:1px solid var(--sv-ui-line2);
border-radius:var(--sv-ui-rad-sm);
  border-radius:var(--sv-ui-rad-sm);
color:var(--color-emphasized, var(--sv-ui-text1));
  color:var(--color-emphasized, var(--sv-ui-text1));
}
}


.sv-pill,
.sv-pill,
.mw-parser-output .sv-pill{
.mw-parser-output .sv-pill{
display:inline-flex;
  display:inline-flex;
align-items:center;
  align-items:center;
justify-content:center;
  justify-content:center;
padding:0.18em 0.40em;
  padding:0.18em 0.40em;
border-radius:var(--sv-ui-rad-sm);
  border-radius:var(--sv-ui-rad-sm);
background:var(--sv-ui-bg3);
  background:var(--sv-ui-pill-bg);
border:1px solid var(--sv-ui-line2);
  border:1px solid var(--sv-ui-pill-line);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
  box-shadow:var(--sv-ui-pill-shadow);
background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
  background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00));
color:var(--color-emphasized, var(--sv-ui-text1));
  color:var(--sv-ui-pill-text);
font-weight:800;
  font-weight:800;
text-transform:uppercase;
  text-transform:uppercase;
letter-spacing:0.03em;
  letter-spacing:0.03em;
font-size:0.72em;
  font-size:0.72em;
line-height:1.15;
  line-height:1.15;
white-space:nowrap;
  white-space:nowrap;
}
 
.sv-pill--compact,
.mw-parser-output .sv-pill--compact{
  padding:0.15em 0.38em;
  border-radius:var(--sv-ui-rad-pill);
}
 
.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,
.sv-focus-ring:focus-visible,
.mw-parser-output .sv-focus-ring:focus-visible{
.mw-parser-output .sv-focus-ring:focus-visible{
outline:2px solid var(--sv-ui-accent2);
  outline:2px solid var(--sv-ui-accent3);
outline-offset:2px;
  outline-offset:2px;
border-radius:8px;
  border-radius:var(--sv-ui-rad-sm);
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
SV utility: hover lift (micro-interaction)
/* 3a) Hover lift utility */
- Universal, reusable (icons, buttons, tiles, etc.)
/* -------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-hover-lift{
.sv-hover-lift{
Line 186: Line 227:
}
}


@media (prefers-reduced-motion: reduce){
/* -------------------------------------------------------------------------- */
  .sv-hover-lift{
/* 3b) Right infobox wrapper */
    transition:none;
/* -------------------------------------------------------------------------- */
  }
  .sv-hover-lift:hover{
    transform:none;
  }
}
 
/* ----------------------------------------------------------------------------
SV utility: right-side infobox wrapper
- Unscoped so it works in template previews/docs too
---------------------------------------------------------------------------- */


.sv-card.sv-infobox-right{
.sv-card.sv-infobox-right{
float:right !important;
  float:right !important;
width:100%;
  width:100%;
max-width:200px;
  max-width:200px;
margin:0 0 2em 2em;
  margin:0 0 2em 2em;
box-sizing:border-box;
  box-sizing:border-box;
border-radius:var(--sv-ui-rad-lg);
  border-radius:var(--sv-ui-rad-lg);
overflow:hidden;
  overflow:hidden;
clear:right;
  clear:right;
}
}


/* Optional size modifiers for future boxes */
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--md{max-width:260px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}
.sv-card.sv-infobox-right.sv-infobox-right--lg{max-width:320px;}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
Template: Class Overview Infobox
/* 4) Shared utilities */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.sv-class-overview__table{
.sv-hidden,
width:100%;
.mw-parser-output .sv-hidden{
border-collapse:separate;
  display:none !important;
border-spacing:0;
}
}


.sv-class-overview__heading,
[hidden]{display:none !important;}
.sv-class-overview__subhead{
padding:10px 10px;
text-align:center;
font-weight:800;
}


.sv-class-overview__table td{
.sv-miss,
padding:7px 10px;
.mw-parser-output .sv-miss{
border-bottom:1px solid var(--sv-ui-line1);
  display:inline-flex;
vertical-align:middle;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg3);
  color:var(--sv-ui-text1);
  font-weight:900;
  font-size:12px;
  line-height:1;
}
}


.sv-class-overview__table tr:last-child td{
.sv-img,
border-bottom:none;
.mw-parser-output .sv-img{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
}


.sv-class-overview__label{
.sv-img img,
text-align:left;
.mw-parser-output .sv-img img{
font-weight:700;
  display:block;
color:var(--sv-ui-text1);
  max-width:100%;
white-space:nowrap;
  height:auto;
  border-radius:var(--sv-ui-rad-sm);
}
}


.sv-class-overview__value{
.sv-img--shadow img,
text-align:right;
.mw-parser-output .sv-img--shadow img{
font-weight:650;
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
color:var(--sv-ui-text2);
}
 
.sv-class-overview__label img{
vertical-align:middle;
margin-right:6px;
}
}


/* ----------------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
4) Legacy safety blocks (kept, but unified to tokens)
/* 5) Shared level selector */
---------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


.mw-parser-output .playtest-info-box{
.sv-level-ui,
max-width:100%;
.mw-parser-output .sv-level-ui{
margin:0 0 10px 0;
  display:flex;
border:1px solid var(--sv-ui-line1);
  align-items:center;
border-radius:var(--sv-ui-rad-md);
  justify-content:center;
box-shadow:0 1px 3px rgba(0,0,0,0.10);
  gap:8px;
background:var(--sv-ui-bg1);
  flex-wrap:wrap;
padding:10px;
  text-align:center;
text-align:center;
  margin:0;
color:var(--color-base, var(--sv-ui-text2));
overflow-wrap:anywhere;
word-break:break-word;
}
}


.mw-parser-output .header-container-outer{
.sv-level-label,
max-width:100%;
.mw-parser-output .sv-level-label{
margin:1px;
  margin:0;
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:var(--sv-ui-bg1);
}
}


.mw-parser-output .header-container-middle{
.sv-level-label[data-sv-helper-text],
background:var(--sv-ui-bg1);
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
text-align:center;
.mw-parser-output .sv-level-label[data-sv-helper-text],
padding:1px;
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
border-radius:calc(var(--sv-ui-rad-lg) - 2px);
  display:inline-block;
overflow-wrap:anywhere;
  margin:0;
word-break:break-word;
  padding:0;
  font-size:0;
  line-height:0;
}
}


.mw-parser-output .header-container-inner{
.sv-level-ui .sv-level-label:not([data-sv-helper-text]),
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text]){
color:var(--sv-ui-text1);
  position:static;
text-align:center;
  top:auto;
padding:1px;
  right:auto;
border-radius:calc(var(--sv-ui-rad-lg) - 2px);
  bottom:auto;
overflow-wrap:anywhere;
  left:auto;
word-break:break-word;
  transform:none;
font-size:300%;
}
}


.mw-parser-output table.custom-table{
.sv-level-label[data-sv-helper-text]::after,
float:none;
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
border:2px solid var(--sv-ui-line2);
  content:attr(data-sv-helper-text);
border-radius:var(--sv-ui-rad-lg);
  display:inline-block;
padding:2px;
  font-weight:900;
box-shadow:0 2px 6px rgba(0,0,0,0.25);
  font-size:12px;
margin:1em auto;
  line-height:1.25;
text-align:center;
  letter-spacing:0.15px;
border-collapse:separate;
  color:var(--sv-ui-text1);
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,
.sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{
.mw-parser-output .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after{
background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  content:"Slide to set level";
color:var(--sv-ui-text1);
  display:inline-block;
text-align:center;
  font-weight:900;
padding:6px;
  font-size:12px;
border-top-left-radius:8px;
  line-height:1.25;
border-top-right-radius:8px;
  letter-spacing:0.15px;
overflow-wrap:anywhere;
  color:var(--sv-ui-text1);
word-break:break-word;
}
}


.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th{font-size:120%;}
.sv-level-slider,
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{font-size:110%;}
.mw-parser-output .sv-level-slider{
 
  position:relative;
.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
  display:flex;
.mw-parser-output table.custom-table > tbody > tr > td{
  flex-direction:row;
text-align:center;
  align-items:center;
padding:4px;
  gap:10px;
border-bottom:1px solid var(--sv-ui-line1);
  width:100%;
  flex-wrap:nowrap;
  direction:ltr;
}
}


/* ----------------------------------------------------------------------------
.sv-level-slider input.sv-level-range[type="range"],
5) Hero Infobox System (Skills + Passives) — legacy table infobox
.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"],
/* Base infobox */
.mw-parser-output .sv-level-slider .sv-level-range--custom,
table.spiritvale-skill-infobox,
.mw-parser-output .sv-level-slider .sv-level-range[data-sv-slider="1"]{
table.spiritvale-passive-infobox{
  flex:1 1 auto;
border-collapse:separate;
  min-width:0;
border-spacing:0;
  width:auto;
width:100%;
  box-sizing:border-box;
margin:1.25em auto;
  margin:0;
border-radius:var(--sv-ui-rad-lg);
  order:1;
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);
}
}


table.spiritvale-skill-infobox > tbody > tr,
.sv-level-endvalue,
table.spiritvale-passive-infobox > tbody > tr{
.mw-parser-output .sv-level-endvalue{
border-bottom:1px solid var(--sv-row-border);
  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;
}
}


table.spiritvale-skill-infobox > tbody > tr:last-child,
.sv-level--hide-ticks .sv-level-ticklabels,
table.spiritvale-passive-infobox > tbody > tr:last-child{
[data-sv-level-hide-ticks="1"] .sv-level-ticklabels,
border-bottom:none;
.mw-parser-output .sv-level--hide-ticks .sv-level-ticklabels,
.mw-parser-output [data-sv-level-hide-ticks="1"] .sv-level-ticklabels{
  display:none;
}
}


table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
.sv-level-range--custom,
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header){
.sv-level-range[data-sv-slider="1"]{
width:26%;
  display:block;
padding:0.45em 0.85em;
  position:relative;
text-align:left;
  height:26px;
font-weight:600;
  border-radius:var(--sv-ui-rad-pill);
white-space:nowrap;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg1);
  cursor:pointer;
  box-sizing:border-box;
}
}


table.spiritvale-skill-infobox > tbody > tr > td,
.sv-level-track{
table.spiritvale-passive-infobox > tbody > tr > td{
  position:absolute;
padding:0.45em 0.85em;
  left:8px;
text-align:left;
  right:8px;
  top:50%;
  margin-top:-4px;
  height:8px;
  border-radius:var(--sv-ui-rad-pill);
  background:var(--sv-ui-bg2);
  overflow:hidden;
}
}


table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
.sv-level-fill{
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
  display:block;
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
  height:100%;
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header){
  width:0%;
background-color:var(--sv-ui-bg1);
  border-radius:var(--sv-ui-rad-pill);
  background:linear-gradient(90deg, var(--sv-ui-accent), rgba(245,249,255,0.22));
}
}


/* Hero band */
.sv-level-thumb{
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
  position:absolute;
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
  left:0%;
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
  top:50%;
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
  margin-top:-9px;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
  margin-left:-9px;
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
  width:18px;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
  height:18px;
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{
  border-radius:var(--sv-ui-rad-pill);
background:var(--sv-base);
  border:2px solid var(--sv-ui-line3);
color:var(--sv-ui-text1);
  background:rgba(245,249,255,0.92);
padding:0.9em 1.1em;
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
text-align:center;
vertical-align:middle;
}
}


table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
.sv-level-ticklabels{
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row{
  display:flex;
border-bottom:none !important;
  justify-content:space-between;
  gap:10px;
  margin-top:7px;
  font-weight:900;
  font-size:12px;
  color:var(--sv-ui-text3);
  line-height:1.1;
  min-height:12px;
}
}


table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
.sv-level-tick{
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th{
  display:inline-flex;
padding-bottom:0.55em;
  align-items:center;
  justify-content:center;
  min-width:18px;
}
}


table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
.sv-level-range--custom .sv-level-bubble,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
padding:0.55em 1.1em;
  position:absolute;
  top:-45px;
  left:0%;
  transform:translateX(-50%);
  padding:9px 15px;
  border-radius:36px;
  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;
}
}


.spiritvale-infobox-title{
.sv-level-range--custom .sv-level-bubble:after,
font-size:1.25em;
.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
font-weight:600;
  content:"";
  position:absolute;
  left:50%;
  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);
}
}


.spiritvale-infobox-description{
.sv-level-range--custom:focus-visible,
font-size:1.05em;
.sv-level-range[data-sv-slider="1"]:focus-visible{
font-style:italic;
  outline:2px solid var(--sv-ui-accent3);
text-align:center;
  outline-offset:2px;
max-width:42em;
  border-radius:var(--sv-ui-rad-sm);
margin:0 auto;
opacity:0.95;
}
}


/* Skills sizing + list layout */
/* -------------------------------------------------------------------------- */
table.spiritvale-skill-infobox{
/* 6) Shared tabs */
max-width:var(--sv-skill-width);
/* -------------------------------------------------------------------------- */
table-layout:fixed;
}


table.spiritvale-skill-infobox.sv-skill-card{width:100%;}
.sv-tabs,
table.spiritvale-skill-infobox.sv-skill-inlist{margin:0.35em auto 1.15em;}
.mw-parser-output .sv-tabs{
 
  margin:10px 0 0;
/* Desktop (850+) */
@media (min-width:850px){
:root{--sv-skill-width:75%;}
.mw-parser-output table.spiritvale-skill-infobox.sv-skill-card,
.mw-parser-output table.spiritvale-skill-infobox.sv-skill-inlist{
width:var(--sv-skill-width);
max-width:var(--sv-skill-width);
}
}
}


/* Standardized slot grid */
.sv-tabs-list,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell{
.mw-parser-output .sv-tabs-list{
padding:0 !important;
  display:flex;
background:var(--sv-base) !important;
  gap:8px;
color:var(--sv-ui-text1);
  flex-wrap:wrap;
  margin:0 0 10px 0;
  padding:0;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid{
.sv-tab,
display:grid;
.mw-parser-output .sv-tab{
grid-template-columns:1fr 1fr;
  display:inline-flex;
grid-auto-flow:row dense;
  align-items:center;
gap:0.55em;
  justify-content:center;
width:100%;
  border-radius:var(--sv-ui-rad-pill);
box-sizing:border-box;
  padding:7px 10px;
background:var(--sv-base);
  border:1px solid var(--sv-ui-line2);
padding:0.80em;
  background:var(--sv-ui-bg2);
  color:var(--sv-ui-text1);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot{
.sv-tab:hover,
min-width:0;
.mw-parser-output .sv-tab:hover{
display:flex;
  background:var(--sv-ui-bg3);
box-sizing:border-box;
background:var(--sv-surface) !important;
color:var(--sv-ui-text1) !important;
border:1px solid var(--sv-gridline);
border-radius:var(--sv-ui-rad-md);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid > .sv-slot.sv-slot--full{
.sv-tab[aria-selected="true"],
grid-column:1 / -1;
.mw-parser-output .sv-tab[aria-selected="true"]{
  background:var(--sv-ui-bg3);
  border-color:var(--sv-ui-accent);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot--empty .sv-slot__body{
.sv-tabpanel,
min-height:3.2em;
.mw-parser-output .sv-tabpanel{
  padding:10px 12px;
  border-radius:var(--sv-ui-rad-md);
  border:1px solid var(--sv-ui-line1);
  background:var(--sv-ui-bg1);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot__body{
.sv-tab:focus-visible,
width:100%;
.mw-parser-output .sv-tab:focus-visible,
height:100%;
.sv-disclose-btn:focus-visible,
display:flex;
.mw-parser-output .sv-disclose-btn:focus-visible{
align-items:center;
  outline:2px solid var(--sv-ui-accent3);
justify-content:center;
  outline-offset:2px;
text-align:center;
  border-radius:var(--sv-ui-rad-sm);
padding:0.85em;
box-sizing:border-box;
}
}


/* Hero bar layout */
/* -------------------------------------------------------------------------- */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-1-wrap{
/* 7) Shared tip trigger */
display:flex;
/* -------------------------------------------------------------------------- */
align-items:center;
justify-content:center;
gap:0.65em;
}
 
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon{line-height:0;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-icon img{vertical-align:middle;}
 
/* 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-pop{
.sv-tip,
position:fixed;
.mw-parser-output .sv-tip{
z-index:99999;
  position:relative;
max-width:min(380px, calc(100vw - 16px));
  display:inline-flex;
max-height:60vh;
  align-items:center;
overflow:auto;
  flex:0 0 auto;
padding:10px 12px;
border-radius:var(--sv-ui-rad-md);
border:1px solid var(--sv-ui-line2);
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;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-title{font-weight:700;margin-bottom:6px;}
.sv-tip-btn,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-section{margin-top:8px;}
.mw-parser-output .sv-tip-btn{
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-label{font-weight:700;display:block;margin-bottom:2px;opacity:0.95;}
  display:inline-flex;
 
  align-items:center;
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope{position:relative;}
  justify-content:center;
 
  border:1px solid var(--sv-ui-line2);
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn{
  background:var(--sv-ui-bg2);
cursor:pointer;
  color:var(--sv-ui-text1);
user-select:none;
  cursor:pointer;
-webkit-appearance:none;
  user-select:none;
appearance:none;
font:inherit;
color:inherit;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn:focus-visible{
.sv-tip-btn:hover,
outline:2px solid rgba(255,255,255,0.25);
.mw-parser-output .sv-tip-btn:hover{
outline-offset:2px;
  background:var(--sv-ui-bg3);
}
}


/* Module: icon + name layout */
.sv-tip-btn:focus-visible,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap{
.mw-parser-output .sv-tip-btn:focus-visible{
display:grid;
  outline:2px solid var(--sv-ui-accent3);
grid-template-columns:auto auto;
  outline-offset:2px;
grid-template-rows:auto auto;
column-gap:0.65em;
row-gap:0.35em;
align-items:center;
justify-content:center;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon{
.sv-tip-btn--icon,
grid-column:1;
.sv-tip-btn:not(.sv-tip-btn--pill),
grid-row:1;
.mw-parser-output .sv-tip-btn--icon,
width:80px;
.mw-parser-output .sv-tip-btn:not(.sv-tip-btn--pill){
height:80px;
  width:28px;
display:flex;
  height:28px;
align-items:center;
  border-radius:var(--sv-ui-rad-pill);
justify-content:center;
line-height:0;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon img{
.sv-tip-btn--pill,
max-width:80px;
.sv-overcap-btn,
max-height:80px;
.mw-parser-output .sv-tip-btn--pill,
width:100%;
.mw-parser-output .sv-overcap-btn{
height:100%;
  width:auto;
object-fit:contain;
  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);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-text{
.sv-ico--info,
grid-column:2;
.mw-parser-output .sv-ico--info{
grid-row:1;
  width:18px;
display:flex;
  height:18px;
flex-direction:column;
  border-radius:999px;
align-items:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-weight:900;
  font-size:12px;
  line-height:1;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-title-row{
/* -------------------------------------------------------------------------- */
display:inline-flex;
/* 8) Shared disclosure */
align-items:center;
/* -------------------------------------------------------------------------- */
justify-content:center;
gap:0.45em;
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill-row--req{
.sv-disclose,
grid-column:1 / -1;
.mw-parser-output .sv-disclose{
grid-row:2;
  position:relative;
justify-self:center;
margin-top:2px;
}
}


/* Notes button: solid (no transparency) */
.sv-disclose-btn,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{
.mw-parser-output .sv-disclose-btn{
display:inline-flex;
  display:flex;
align-items:center;
  align-items:center;
justify-content:center;
  justify-content:space-between;
min-width:30px;
  gap:12px;
height:30px;
  width:100%;
border-radius:var(--sv-ui-rad-pill);
  padding:10px 12px;
border:1px solid var(--sv-ui-line2);
  border-radius:var(--sv-ui-rad-md);
background:var(--sv-ui-bg2);
  border:1px solid var(--sv-ui-line1);
cursor:pointer;
  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;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:hover{
.sv-disclose-btn:hover,
background:var(--sv-ui-bg3);
.mw-parser-output .sv-disclose-btn:hover{
  background:var(--sv-ui-bg2);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:focus-visible{
.sv-disclose-btn--compact,
outline:2px solid rgba(255,255,255,0.28);
.mw-parser-output .sv-disclose-btn--compact{
outline-offset:2px;
  border-radius:var(--sv-ui-rad-pill);
  min-height:36px;
  padding:0 12px;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-ico--info{
.sv-disclose-count,
width:22px;
.mw-parser-output .sv-disclose-count{
height:22px;
  font-weight:800;
border-radius:var(--sv-ui-rad-pill);
  font-size:13px;
display:inline-flex;
  color:var(--sv-ui-text3);
align-items:center;
  white-space:nowrap;
justify-content:center;
font-weight:900;
font-size:15px;
line-height:1;
background:var(--sv-ui-accent2);
color:#081018;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-pill--req{
/* -------------------------------------------------------------------------- */
display:inline-flex;
/* 9) Universal popups */
align-items:center;
/* -------------------------------------------------------------------------- */
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after{
.sv-tip-btn,
content:" ▼";
.sv-disclose-btn,
font-weight:normal;
.sv-def,
font-size:0.8em;
.sv-uipop-head,
.sv-uipop-title,
.sv-uipop-title-link{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-description{
.sv-tip-btn *,
font-size:1.05em;
.sv-disclose-btn *,
font-style:italic;
.sv-uipop-head *{
max-width:42em;
  -webkit-user-select:none;
margin:0 auto;
  user-select:none;
line-height:1.35;
opacity:0.95;
}
}


/* Soft white + outline */
.sv-uipop{
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot,
  position:fixed;
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot *,
  z-index:9000;
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-slot-row,
  top:0;
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-title-row,
  left:0;
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-desc-row{
  box-sizing:border-box;
color:var(--sv-text-soft) !important;
  border-radius:var(--sv-ui-rad-lg);
text-shadow:var(--sv-text-outline);
  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;
}
}


/* Shared pill look (legacy infobox system only) */
.sv-uipop[aria-hidden="true"]{display:none;}
: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:var(--sv-ui-rad-sm);
font-weight:800;
text-transform:uppercase;
letter-spacing:0.03em;
font-size:0.72em;
line-height:1.15;
background:var(--sv-pill);
border:1px solid var(--sv-ui-line2);
color:var(--sv-ui-text1);
}


/* Level selector */
.sv-uipop--sm,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui{
.sv-uipop--lg{
width:90%;
  width:240px;
margin:0 !important;
  max-width:calc(100vw - 20px);
display:flex;
flex-direction:column;
gap:0.3em;
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-label{
.sv-uipop--sm{max-height:min(45vh, 320px);}
font-weight:600;
.sv-uipop--lg{max-height:min(70vh, 560px);}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.sv-uipop-head{
.module-level-selector .sv-level-slider input[type="range"]{
  display:flex;
width:90%;
  align-items:center;
box-sizing:border-box;
  justify-content:center;
margin:0;
  padding:12px 12px;
  border-bottom:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg3);
}
}


:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.sv-uipop-head--clickable{cursor:pointer;}
.module-level-selector .sv-level-ui-single .sv-level-slider-single{
min-height:0.45em;
}


/* Skill Type (Hero Bar Slot 2) */
.sv-uipop-title{
table.spiritvale-skill-infobox .hero-bar-module-2 .hero-bar-module-body,
  width:100%;
table.spiritvale-skill-infobox .hero-bar-module-2 .module-skill-type{
  text-align:center;
width:100%;
  font-weight:900;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--color-emphasized, var(--sv-ui-text1));
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-grid{
.sv-uipop-title a.sv-uipop-title-link{
width:100%;
  color:inherit;
margin:0 !important;
  text-decoration:none;
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;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk{
.sv-uipop-title a.sv-uipop-title-link:hover{
display:flex;
  text-decoration:underline;
flex-direction:column;
  text-decoration-thickness:2px;
align-items:center;
  text-underline-offset:2px;
justify-content:center;
text-align:center;
padding:0.20em 0.35em;
gap:0.50em;
min-width:0;
}
}


table.spiritvale-skill-infobox .module-skill-type .sv-type-value{
.sv-uipop-body{
font-weight:400;
  padding:10px 12px 12px;
font-size:1.02em;
  font-size:13px;
line-height:1.25;
  line-height:1.4;
white-space:normal;
  color:var(--sv-ui-text2);
overflow-wrap:anywhere;
  overflow:auto;
word-break:break-word;
  overflow-wrap:anywhere;
  word-break:break-word;
  -webkit-user-select:text;
  user-select:text;
}
}


/* Desktop ordering */
.sv-uipop-body--pre{white-space:pre-line;}
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-target{order:4;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-cast{order:5;}
table.spiritvale-skill-infobox .module-skill-type .sv-type-combo{order:6;}


/* Special Mechanics (Flags + Mechanics) */
.sv-uipop-body p,
table.spiritvale-skill-infobox .sv-slot.module-special-mechanics .sv-slot__body{
.sv-uipop-body ul,
width:100%;
.sv-uipop-body ol{margin:0;}
height:100%;
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-root{width:100%;}
.sv-uipop-body ul,
.sv-uipop-body ol{padding-left:1.15em;}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-empty{
.sv-uipop-body li{margin:0;}
width:100%;
font-weight:650;
opacity:0.95;
text-align:center;
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout{
.sv-uipop a{
width:100%;
  color:var(--color-link, var(--sv-ui-accent));
display:grid;
  text-decoration:underline;
gap:0.55em;
  text-decoration-thickness:2px;
align-items:start;
  text-underline-offset:2px;
justify-items:stretch;
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1{
.sv-uipop a:hover{
grid-template-columns:1fr;
  text-decoration-thickness:3px;
justify-items:center;
  text-underline-offset:3px;
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
.sv-uipop a:focus-visible,
grid-template-columns:1fr 1fr;
.sv-uipop-title a.sv-uipop-title-link:focus-visible{
  outline:2px solid var(--sv-ui-accent3);
  outline-offset:2px;
  border-radius:6px;
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col{
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
width:100%;
  margin:0;
min-width:0;
  padding:0;
display:flex;
  list-style:none;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
gap:0.40em;
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-mech{
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
width:100%;
  padding:6px 0;
min-width:0;
  border-top:1px solid var(--sv-ui-line1);
display:flex;
  font-size:13px;
flex-direction:column;
  color:var(--sv-ui-text2);
align-items:center;
justify-content:flex-start;
text-align:center;
gap:0.50em;
}
}


table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value{
.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
width:100%;
  border-top:none;
text-align:center;
  padding-top:0;
font-weight:500;
font-size:0.98em;
line-height:1.2;
opacity:0.98;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
}
}


/* Desktop behavior (850+) */
.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
@media (min-width:850px){
  padding-top:10px;
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
  font-weight:900;
grid-template-columns:minmax(8.5em, 0.85fr) minmax(16em, 1.15fr);
  font-size:12px;
}
  letter-spacing:0.02em;
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech{
  color:var(--sv-ui-text1);
display:grid;
grid-template-columns:repeat(auto-fit, minmax(9.5em, 1fr));
gap:0.55em 0.75em;
align-items:start;
justify-items:center;
align-content:center;
text-align:center;
}
table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech{width:100%;}
}
}


/* ---------------------------------------------------------------------------
.sv-uipop .sv-disclose-sections{
SV Shared Utilities (global)
   display:flex;
- Used by GameInfo + future bot-rendered modules
  flex-direction:column;
--------------------------------------------------------------------------- */
  gap:10px;
 
/* Phase 4.1 visibility contract (JS toggles these) */
.sv-hidden,
.mw-parser-output .sv-hidden {
   display: none !important;
}
}


[hidden] {
.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
   display: none !important;
   padding-top:10px;
  border-top:1px solid var(--sv-ui-line1);
}
}


/* Missing icon fallback badge (“?”) */
.sv-uipop .sv-disclose-sec-title{
.sv-miss,
   font-weight:900;
.mw-parser-output .sv-miss {
   font-size:13px;
   display: inline-flex;
   letter-spacing:0.02em;
  align-items: center;
   color:var(--sv-ui-text1);
   justify-content: center;
   margin:0 0 4px 0;
   width: 18px;
  height: 18px;
  border-radius: var(--sv-ui-rad-pill);
  border: 1px solid var(--sv-ui-line2);
  background: var(--sv-ui-bg3);
   color: var(--sv-ui-text1);
   font-weight: 900;
  font-size: 12px;
  line-height: 1;
}
}


/* Generic image wrapper (bot can emit this for consistent rounding) */
.sv-uipop .sv-disclose-sec-items{
.sv-img,
   font-size:13px;
.mw-parser-output .sv-img {
   line-height:1.45;
   display: inline-flex;
   color:var(--sv-ui-text2);
   align-items: center;
   justify-content: center;
}
}


.sv-img img,
.sv-uipop .sv-disclose-item{display:inline;}
.mw-parser-output .sv-img img {
.sv-uipop .sv-disclose-sfx{opacity:0.78;}
  display: block;
.sv-uipop .sv-tip-pop-body{white-space:pre-line;}
  max-width: 100%;
  height: auto;
  border-radius: var(--sv-ui-rad-sm);
}


/* Optional: shadow variant (only when explicitly requested in markup) */
/* -------------------------------------------------------------------------- */
.sv-img--shadow img,
/* 10) Motion */
.mw-parser-output .sv-img--shadow img {
/* -------------------------------------------------------------------------- */
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}


/* ---------------------------------------------------------------------------
@media (prefers-reduced-motion: reduce){
SV Tabs (shared component)
  .sv-hover-lift{transition:none;}
- GameInfo can drop its local .sv-tab* rules once this exists
  .sv-hover-lift:hover{transform:none;}
--------------------------------------------------------------------------- */
 
.sv-tabs,
.mw-parser-output .sv-tabs {
  margin: 10px 0 0;
}
}


.sv-tabs-list,
/* -------------------------------------------------------------------------- */
.mw-parser-output .sv-tabs-list {
/* 11) Responsive                                                              */
  display: flex;
/* -------------------------------------------------------------------------- */
  gap: 8px;
/* default (<640px): compact end value and helper text.                        */
  flex-wrap: wrap;
/* sm and up (>=640px): restore the standard control sizing.                  */
  margin: 0 0 10px 0;
  padding: 0;
}


.sv-tab,
@media (min-width:640px){
.mw-parser-output .sv-tab {
  .sv-level-endvalue,
  display: inline-flex;
  .mw-parser-output .sv-level-endvalue{
  align-items: center;
    padding:2px 8px;
  justify-content: center;
    min-width:30px;
  border-radius: var(--sv-ui-rad-pill);
    font-size:13px;
  padding: 7px 10px;
    line-height:1.25;
  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;
}


.sv-tab:hover,
  .sv-level-label[data-sv-helper-text]::after,
.mw-parser-output .sv-tab:hover {
   .sv-level-ui .sv-level-label:not([data-sv-helper-text])::after,
  background: var(--sv-ui-bg3);
   .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;
.sv-tab[aria-selected="true"],
   }
.mw-parser-output .sv-tab[aria-selected="true"] {
  background: var(--sv-ui-bg3);
  border-color: var(--sv-ui-accent);
}
 
.sv-tabpanel,
.mw-parser-output .sv-tabpanel {
  padding: 10px 12px;
  border-radius: var(--sv-ui-rad-md);
  border: 1px solid var(--sv-ui-line1);
  background: var(--sv-ui-bg1);
}
 
/* ---------------------------------------------------------------------------
SV Disclosure (shared popover component)
- Used by “Requirements / Users” style dropdowns
--------------------------------------------------------------------------- */
 
.sv-disclose,
.mw-parser-output .sv-disclose {
   position: relative;
}
 
.sv-disclose-btn,
.mw-parser-output .sv-disclose-btn {
  display: flex;
  align-items: center;
  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;
}
 
.sv-disclose-btn:hover,
.mw-parser-output .sv-disclose-btn:hover {
  background: var(--sv-ui-bg2);
}
 
.sv-disclose-count,
.mw-parser-output .sv-disclose-count {
  font-weight: 800;
  font-size: 13px;
  color: var(--sv-ui-text3);
  white-space: nowrap;
}
 
/* IMPORTANT: do not set display:none; JS controls via .sv-hidden / [hidden] */
.sv-disclose-pop,
.mw-parser-output .sv-disclose-pop {
  position: absolute;
  z-index: 99999;
  top: calc(100% + 8px);
  left: 0;
  width: min(420px, calc(100vw - 16px));
   max-height: 60vh;
  overflow: auto;
  border-radius: var(--sv-ui-rad-md);
  border: 1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
  background: var(--sv-ui-pop-bg, var(--sv-ui-bg0));
  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);
  background-image: radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.12), rgba(0,0,0,0) 60%);
}
 
.sv-disclose-pop-head,
.mw-parser-output .sv-disclose-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sv-ui-line1);
  background: var(--sv-ui-bg1);
  cursor: pointer;
}
 
.sv-disclose-pop-title,
.mw-parser-output .sv-disclose-pop-title {
  font-weight: 900;
  font-size: 13px;
   letter-spacing: 0.02em;
}
 
.sv-disclose-pop-hint,
.mw-parser-output .sv-disclose-pop-hint {
  font-size: 12px;
  color: var(--sv-ui-text3);
}
 
.sv-disclose-list,
.mw-parser-output .sv-disclose-list {
  margin: 0;
  padding: 10px 12px 12px;
  list-style: none;
}
 
.sv-disclose-list li,
.mw-parser-output .sv-disclose-list li {
  padding: 6px 0;
  border-top: 1px solid var(--sv-ui-line1);
  font-size: 13px;
}
 
.sv-disclose-list li:first-child,
.mw-parser-output .sv-disclose-list li:first-child {
  border-top: none;
  padding-top: 0;
}
 
.sv-disclose-group-title,
.mw-parser-output .sv-disclose-group-title {
  padding-top: 10px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--sv-ui-text2);
}
 
/* ============================================================================
SV Universal Popup v2 — Refinements (TESTING)
Changes:
1) Remove hint blocks entirely (redundant).
2) Center + enlarge popup header titles (Users/Requirements).
3) Make small sentence/paragraph popups much narrower (wrap early ~6 words/line).
============================================================================ */
 
/* --- 1) Remove redundant hint text (legacy + any remaining markup) --- */
.sv-disclose-pop-hint,
.mw-parser-output .sv-disclose-pop-hint{
  display:none !important;
}
 
/* Optional: also hide the old tip hint if it shows up anywhere */
.sv-tip-pop-hint,
.mw-parser-output .sv-tip-pop-hint{
  display:none !important;
}
 
/* --- 1b) Center + enlarge legacy disclose titles (Users/Requirements) --- */
.sv-disclose-pop-head,
.mw-parser-output .sv-disclose-pop-head{
  justify-content:center !important;
}
 
.sv-disclose-pop-title,
.mw-parser-output .sv-disclose-pop-title{
  width:100%;
  text-align:center;
  font-size:16px;
  font-weight:900;
  letter-spacing:0.02em;
}
 
/* ============================================================================
Universal Popup v2 (the injected panel) — header/title tuning + sizing
============================================================================ */
 
/* Large/click headers: centered “dialog title” look */
.sv-uipop-head--center{
  justify-content:center;
}
 
.sv-uipop-head--center .sv-uipop-title{
  width:100%;
  text-align:center;
  font-size:16px;
  font-weight:900;
   letter-spacing:0.02em;
}
 
/* For click-open popups, we don’t show a hint at all */
.sv-uipop-head--center .sv-uipop-hint{
  display:none !important;
}
 
/* --- 2) Narrow small text popups: early wrap (“~6 words”) ---
  TemplateStyles-safe: avoid min(); use width + max-width */
.sv-uipop--sm{
  width:calc(100vw - 20px);
  max-width:34ch;
  box-sizing:border-box;
}
 
/* Slightly tighter large width (still comfortable) */
.sv-uipop--lg{
  width:calc(100vw - 20px);
  max-width:400px;
  box-sizing:border-box;
}
}
Retrieved from "https://spiritvale.info/wiki/MediaWiki:Common.css"