MediaWiki:Common.css: Difference between revisions

Revision as of 00:34, 5 March 2026

/* ============================================================================
SpiritVale Wiki — Common.css
Sitewide base + shared SpiritVale components (all skins)
- No Citizen skin selectors
- Mobile rules are merged into Common.css/Citizen.css (no separate Mobile.css)
- Common.css owns shared UI primitives + reusable interactive components
- Module:GameInfo/styles.css should own only GameInfo-family layout/presentation
============================================================================ */

/* ----------------------------------------------------------------------------
1) SpiritVale tokens (fallback defaults)
- Citizen.css exports will override these where appropriate.
---------------------------------------------------------------------------- */

:root{
  /* SV UI tokens (fallback) */
  --sv-ui-bg0:#0f172a;
  --sv-ui-bg1:#1f2937;
  --sv-ui-bg2:#273449;
  --sv-ui-bg3:#2e3f59;

  --sv-ui-line1:#3b4b63;
  --sv-ui-line2:#4b6388;

  --sv-ui-text1:#f5f9ff;
  --sv-ui-text2:#d7e2f4;
  --sv-ui-text3:#b6c6e0;

  --sv-ui-accent:#6aa6ff;
  --sv-ui-accent2:#8cbcff;

  /* Popover tuning tokens */
  --sv-ui-pop-bg:var(--sv-ui-bg0);
  --sv-ui-pop-line:var(--sv-ui-line2);
  --sv-ui-pop-shadow:0 10px 30px rgba(0,0,0,0.35);

  --sv-ui-rad-sm:10px;
  --sv-ui-rad-md:14px;
  --sv-ui-rad-lg:18px;
  --sv-ui-rad-pill:999px;

  --sv-ui-shadow1:0 10px 28px rgba(0,0,0,0.40);

  /* Shared badge / pill surfaces */
  --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);

  /* Legacy hero infobox variables (mapped to SV UI tokens) */
  --sv-skill-width:660px;
  --sv-passive-width:540px;

  --sv-base:var(--sv-ui-bg0);
  --sv-surface:var(--sv-ui-bg2);

  --sv-card-border:var(--sv-ui-line1);
  --sv-row-border:var(--sv-ui-line1);
  --sv-gridline:var(--sv-ui-line2);

  --sv-pill:var(--sv-ui-bg3);
  --sv-pill-a:var(--sv-ui-bg3);
  --sv-pill-b:var(--sv-ui-bg3);

  --sv-text-soft:var(--sv-ui-text1);
  --sv-text-outline:
    0 1px 0 rgba(0,0,0,0.55),
    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 */
.mw-theme-light{
  --sv-ui-bg0:#1f2937;
  --sv-ui-bg1:#273449;
  --sv-ui-bg2:#2e3f59;
  --sv-ui-bg3:#364a69;

  --sv-ui-line1:#4b6388;
  --sv-ui-line2:#5f7fb4;

  --sv-ui-text1:#f5f9ff;
  --sv-ui-text2:#d7e2f4;
  --sv-ui-text3:#b6c6e0;

  --sv-ui-accent:#8cbcff;
  --sv-ui-accent2:#b0d0ff;

  --sv-base:var(--sv-ui-bg0);
  --sv-surface:var(--sv-ui-bg2);

  --sv-card-border:var(--sv-ui-line1);
  --sv-row-border:var(--sv-ui-line1);
  --sv-gridline:var(--sv-ui-line2);

  --sv-pill:var(--sv-ui-bg3);
  --sv-pill-a:var(--sv-ui-bg3);
  --sv-pill-b:var(--sv-ui-bg3);

  --sv-text-soft:var(--sv-ui-text1);
}

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

.mw-parser-output a{
  color:var(--color-link, var(--sv-ui-accent));
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}

.mw-parser-output a:visited{
  color:var(--color-visited, var(--sv-ui-accent2));
}

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

.mw-parser-output a:focus-visible{
  outline:2px solid var(--sv-ui-accent2);
  outline-offset:2px;
  border-radius:6px;
}

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

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

.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));
}

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

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

/* ----------------------------------------------------------------------------
SV utility: hover lift (micro-interaction)
---------------------------------------------------------------------------- */

.sv-hover-lift{
  transition:transform 0.15s ease-in-out;
  will-change:transform;
}

.sv-hover-lift:hover{
  transform:translateY(-2px);
}

@media (prefers-reduced-motion: reduce){
  .sv-hover-lift{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{
  float:right !important;
  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;
}

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

/* ----------------------------------------------------------------------------
Template: Class Overview Infobox
---------------------------------------------------------------------------- */

.sv-class-overview__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.sv-class-overview__heading,
.sv-class-overview__subhead{
  padding:10px 10px;
  text-align:center;
  font-weight:800;
}

.sv-class-overview__table td{
  padding:7px 10px;
  border-bottom:1px solid var(--sv-ui-line1);
  vertical-align:middle;
}

.sv-class-overview__table tr:last-child td{
  border-bottom:none;
}

.sv-class-overview__label{
  text-align:left;
  font-weight:700;
  color:var(--sv-ui-text1);
  white-space:nowrap;
}

.sv-class-overview__value{
  text-align:right;
  font-weight:650;
  color:var(--sv-ui-text2);
}

.sv-class-overview__label img{
  vertical-align:middle;
  margin-right:6px;
}

/* ----------------------------------------------------------------------------
4) Shared utilities / helper contracts
---------------------------------------------------------------------------- */

/* Visibility contract (JS toggles these) */
.sv-hidden,
.mw-parser-output .sv-hidden{
  display:none !important;
}

[hidden]{display:none !important;}

/* Missing icon fallback badge (“?”) */
.sv-miss,
.mw-parser-output .sv-miss{
  display:inline-flex;
  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;
}

/* Generic image wrapper */
.sv-img,
.mw-parser-output .sv-img{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.sv-img img,
.mw-parser-output .sv-img img{
  display:block;
  max-width:100%;
  height:auto;
  border-radius:var(--sv-ui-rad-sm);
}

/* Optional: shadow variant */
.sv-img--shadow img,
.mw-parser-output .sv-img--shadow img{
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
}

/* ----------------------------------------------------------------------------
5) Shared level selector component
- Common owns the component anatomy and reusable helper layouts
- Module CSS should only control the surrounding section/card layout
---------------------------------------------------------------------------- */

.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;
}

.sv-level-label,
.mw-parser-output .sv-level-label{
  margin:0;
}

.sv-level-label[data-sv-helper-text],
.mw-parser-output .sv-level-label[data-sv-helper-text]{
  font-size:0;
  line-height:0;
  display:inline-block;
}

.sv-level-label[data-sv-helper-text]::after,
.mw-parser-output .sv-level-label[data-sv-helper-text]::after{
  content:attr(data-sv-helper-text);
  display:inline-block;
  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:var(--sv-ui-text1);
}

.sv-level-slider,
.mw-parser-output .sv-level-slider{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:nowrap;
  direction:ltr;
}

.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;
}

.sv-level-endvalue,
.mw-parser-output .sv-level-endvalue{
  flex:0 0 auto;
  order:2;
  min-width:30px;
  padding:2px 8px;
  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:13px;
  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,
.mw-parser-output .sv-level--hide-ticks .sv-level-ticklabels,
.mw-parser-output [data-sv-level-hide-ticks="1"] .sv-level-ticklabels{
  display:none;
}

/* Custom slider shell */
.sv-level-range--custom,
.sv-level-range[data-sv-slider="1"]{
  display:block;
  position:relative;
  height:26px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg0);
  cursor:pointer;
  box-sizing:border-box;
}

/* Track + fill */
.sv-level-track{
  position:absolute;
  left:8px;
  right:8px;
  top:50%;
  margin-top:-4px;
  height:8px;
  border-radius:var(--sv-ui-rad-pill);
  background:var(--sv-ui-bg2);
  overflow:hidden;
}

.sv-level-fill{
  display:block;
  height:100%;
  width:0%;
  border-radius:var(--sv-ui-rad-pill);
  background:linear-gradient(90deg, var(--sv-ui-accent), rgba(245,249,255,0.22));
}

/* Thumb */
.sv-level-thumb{
  position:absolute;
  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-line2);
  background:rgba(245,249,255,0.92);
  box-shadow:0 10px 18px rgba(0,0,0,0.35);
}

/* Optional tick labels row */
.sv-level-ticklabels{
  display:flex;
  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;
}

.sv-level-tick{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
}

/* Value bubble (JS injects .sv-level-bubble) */
.sv-level-range--custom .sv-level-bubble,
.sv-level-range[data-sv-slider="1"] .sv-level-bubble{
  position:absolute;
  top:-45px;
  left:0%;
  transform:translateX(-50%);
  padding:9px 15px;
  border-radius:36px;
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg1);
  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;
}

.sv-level-range--custom .sv-level-bubble:after,
.sv-level-range[data-sv-slider="1"] .sv-level-bubble:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-9px;
  width:14px;
  height:14px;
  margin-left:-7px;
  background:var(--sv-ui-bg1);
  border-left:1px solid var(--sv-ui-line2);
  border-bottom:1px solid var(--sv-ui-line2);
  transform:rotate(45deg);
}

/* Focus ring */
.sv-level-range--custom:focus-visible,
.sv-level-range[data-sv-slider="1"]:focus-visible{
  outline:2px solid var(--sv-ui-accent2);
  outline-offset:2px;
  border-radius:10px;
}

/* Mobile */
@media (max-width:500px){
  .sv-level-endvalue,
  .mw-parser-output .sv-level-endvalue{
    padding:1px 7px;
    min-width:28px;
    font-size:12px;
    line-height:1.25;
  }

  .sv-level-label[data-sv-helper-text]::after,
  .mw-parser-output .sv-level-label[data-sv-helper-text]::after{
    font-size:12px;
  }
}

/* ----------------------------------------------------------------------------
6) SV Tabs (shared component)
---------------------------------------------------------------------------- */

.sv-tabs,
.mw-parser-output .sv-tabs{
  margin:10px 0 0;
}

.sv-tabs-list,
.mw-parser-output .sv-tabs-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px 0;
  padding:0;
}

.sv-tab,
.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;
}

.sv-tab:hover,
.mw-parser-output .sv-tab:hover{
  background:var(--sv-ui-bg3);
}

.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);
}

/* Focus rings for SV controls (sitewide) */
.sv-tab:focus-visible,
.mw-parser-output .sv-tab:focus-visible,
.sv-disclose-btn:focus-visible,
.mw-parser-output .sv-disclose-btn:focus-visible{
  outline:2px solid var(--sv-ui-accent2);
  outline-offset:2px;
  border-radius:10px;
}

/* ----------------------------------------------------------------------------
7) SV Tip Trigger (shared component)
- Used for Notes / inline tips that open via Universal Popups (Common.js)
- The hidden source node (.sv-tip-pop) is emitted by Lua; JS clones its body
---------------------------------------------------------------------------- */

.sv-tip,
.mw-parser-output .sv-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}

.sv-tip-btn,
.mw-parser-output .sv-tip-btn{
  display:inline-flex;
  align-items:center;
  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;
}

.sv-tip-btn:hover,
.mw-parser-output .sv-tip-btn:hover{
  background:var(--sv-ui-bg3);
}

.sv-tip-btn:focus-visible,
.mw-parser-output .sv-tip-btn:focus-visible{
  outline:2px solid var(--sv-ui-accent2);
  outline-offset:2px;
}

.sv-tip-btn--icon,
.sv-tip-btn:not(.sv-tip-btn--pill),
.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);
}

.sv-tip-btn--pill,
.mw-parser-output .sv-tip-btn--pill{
  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);
}

/* Compatibility: existing overcap pill should behave like shared pill trigger */
.sv-overcap-btn,
.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);
}

/* Small info icon inside the round button */
.sv-ico--info,
.mw-parser-output .sv-ico--info{
  width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-style:normal;
  font-weight:900;
  font-size:12px;
  line-height:1;
}

/* ----------------------------------------------------------------------------
8) SV Disclosure (shared source markup)
---------------------------------------------------------------------------- */

.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-btn--compact,
.mw-parser-output .sv-disclose-btn--compact{
  border-radius:var(--sv-ui-rad-pill);
  min-height:36px;
  padding:0 12px;
}

.sv-disclose-count,
.mw-parser-output .sv-disclose-count{
  font-weight:800;
  font-size:13px;
  color:var(--sv-ui-text3);
  white-space:nowrap;
}

/* ----------------------------------------------------------------------------
9) Universal Popups v3.2
---------------------------------------------------------------------------- */

.sv-uipop-v3 .sv-def-tip,
.sv-uipop-v3 .sv-pop-tip{
  display:none !important;
}

/* Prevent long-press select/callout on popup triggers + controls */
.sv-tip-btn,
.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;
}

.sv-tip-btn *,
.sv-disclose-btn *,
.sv-uipop-head *{
  -webkit-user-select:none;
  user-select:none;
}

.sv-uipop{
  position:fixed;
  z-index:9000;
  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-bg0));
  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;
}

.sv-uipop[aria-hidden="true"]{display:none;}

.sv-uipop--sm,
.sv-uipop--lg{
  width:240px;
  max-width:calc(100vw - 20px);
}

.sv-uipop--sm{max-height:min(45vh, 320px);}
.sv-uipop--lg{max-height:min(70vh, 560px);}

.sv-uipop-head{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 12px;
  border-bottom:1px solid var(--sv-ui-line1);
  background:var(--sv-ui-bg1);
}

.sv-uipop-head--clickable{cursor:pointer;}

.sv-uipop-title{
  width:100%;
  text-align:center;
  font-weight:900;
  font-size:16px;
  letter-spacing:0.02em;
  color:var(--color-emphasized, var(--sv-ui-text1));
}

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

.sv-uipop-title a.sv-uipop-title-link:hover{
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}

.sv-uipop-body{
  padding:10px 12px 12px;
  font-size:13px;
  line-height:1.4;
  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,
.sv-uipop-body ol{padding-left:1.15em;}

.sv-uipop-body li{margin:0;}

.sv-uipop a{
  color:var(--color-link, var(--sv-ui-accent));
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:2px;
}

.sv-uipop a:hover{text-decoration-thickness:3px;}

.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
  margin:0;
  padding:0;
  list-style:none;
}

.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
  padding:6px 0;
  border-top:1px solid var(--sv-ui-line1);
  font-size:13px;
  color:var(--sv-ui-text2);
}

.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
  border-top:none;
  padding-top:0;
}

.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
  padding-top:10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:0.02em;
  color:var(--sv-ui-text1);
}

.sv-uipop .sv-disclose-sections{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sv-uipop .sv-disclose-sec + .sv-disclose-sec{
  padding-top:10px;
  border-top:1px solid var(--sv-ui-line1);
}

.sv-uipop .sv-disclose-sec-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:0.02em;
  color:var(--sv-ui-text1);
  margin:0 0 4px 0;
}

.sv-uipop .sv-disclose-sec-items{
  font-size:13px;
  line-height:1.45;
  color:var(--sv-ui-text2);
}

.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) Legacy safety blocks (kept, unified to tokens)
---------------------------------------------------------------------------- */

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

.mw-parser-output .header-container-outer{
  max-width:100%;
  margin:1px;
  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{
  background:var(--sv-ui-bg1);
  text-align:center;
  padding:1px;
  border-radius:calc(var(--sv-ui-rad-lg) - 2px);
  overflow-wrap:anywhere;
  word-break:break-word;
}

.mw-parser-output .header-container-inner{
  background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  color:var(--sv-ui-text1);
  text-align:center;
  padding:1px;
  border-radius:calc(var(--sv-ui-rad-lg) - 2px);
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:300%;
}

.mw-parser-output table.custom-table{
  float:none;
  border:2px solid var(--sv-ui-line2);
  border-radius:var(--sv-ui-rad-lg);
  padding:2px;
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  margin:1em auto;
  text-align:center;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  -webkit-user-select:text;
  user-select:text;
  background:var(--sv-ui-bg1);
  color:var(--color-base, var(--sv-ui-text2));
}

.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th,
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{
  background:linear-gradient(180deg, var(--sv-ui-bg3), var(--sv-ui-bg2));
  color:var(--sv-ui-text1);
  text-align:center;
  padding:6px;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.mw-parser-output table.custom-table > tbody > tr:nth-child(1) > th{font-size:120%;}
.mw-parser-output table.custom-table > tbody > tr.middle-header > th{font-size:110%;}

.mw-parser-output table.custom-table > tbody > tr:nth-child(2) > th,
.mw-parser-output table.custom-table > tbody > tr > td{
  text-align:center;
  padding:4px;
  border-bottom:1px solid var(--sv-ui-line1);
}

/* ----------------------------------------------------------------------------
11) Hero Infobox System (Skills + Passives) — legacy table infobox
- Kept for compatibility; this is legacy, not the new component ownership model.
---------------------------------------------------------------------------- */

/* Base infobox */
table.spiritvale-skill-infobox,
table.spiritvale-passive-infobox{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  margin:1.25em auto;
  border-radius:var(--sv-ui-rad-lg);
  overflow:hidden;
  border:1px solid var(--sv-card-border);
  box-shadow:0 4px 12px rgba(0,0,0,0.45);
  font-size:0.95em;
  background:var(--sv-base);
  color:var(--sv-ui-text1);
}

table.spiritvale-skill-infobox > tbody > tr,
table.spiritvale-passive-infobox > tbody > tr{
  border-bottom:1px solid var(--sv-row-border);
}

table.spiritvale-skill-infobox > tbody > tr:last-child,
table.spiritvale-passive-infobox > tbody > tr:last-child{
  border-bottom:none;
}

table.spiritvale-skill-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox > tbody > tr:not(.spiritvale-infobox-main) > th:not(.spiritvale-infobox-section-header){
  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{
  padding:0.45em 0.85em;
  text-align:left;
}

table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-skill-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header),
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > td,
table.spiritvale-passive-infobox > tbody > tr:nth-child(odd) > th:not(.spiritvale-infobox-section-header){
  background-color:var(--sv-ui-bg1);
}

/* Hero band */
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-skill-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > th,
table.spiritvale-passive-infobox > tbody > tr.spiritvale-infobox-main > td,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{
  background:var(--sv-base);
  color:var(--sv-ui-text1);
  padding:0.9em 1.1em;
  text-align:center;
  vertical-align:middle;
}

table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row{
  border-bottom:none !important;
}

table.spiritvale-skill-infobox > tbody > tr.sv-hero-title-row > th,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-title-row > th{
  padding-bottom:0.55em;
}

table.spiritvale-skill-infobox > tbody > tr.sv-hero-desc-row > td,
table.spiritvale-passive-infobox > tbody > tr.sv-hero-desc-row > td{
  padding:0.55em 1.1em;
}

.spiritvale-infobox-title{
  font-size:1.25em;
  font-weight:600;
}

.spiritvale-infobox-description{
  font-size:1.05em;
  font-style:italic;
  text-align:center;
  max-width:42em;
  margin:0 auto;
  opacity:0.95;
}

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

table.spiritvale-skill-infobox.sv-skill-card{width:100%;}
table.spiritvale-skill-infobox.sv-skill-inlist{margin:0.35em auto 1.15em;}

@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 */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) tr.sv-slot-row > td.sv-slot-cell{
  padding:0 !important;
  background:var(--sv-base) !important;
  color:var(--sv-ui-text1);
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-flow:row dense;
  gap:0.55em;
  width:100%;
  box-sizing:border-box;
  background:var(--sv-base);
  padding:0.80em;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot{
  min-width:0;
  display:flex;
  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{
  grid-column:1 / -1;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot--empty .sv-slot__body{
  min-height:3.2em;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot__body{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0.85em;
  box-sizing:border-box;
}

/* Hero bar layout */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-herobar-1-wrap{
  display:flex;
  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{
  position:fixed;
  z-index:99999;
  max-width:min(380px, calc(100vw - 16px));
  max-height:60vh;
  overflow: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;}
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-pop .sv-tip-section{margin-top:8px;}
: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;}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-scope{position:relative;}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn{
  cursor:pointer;
  user-select:none;
  -webkit-appearance:none;
  appearance:none;
  font:inherit;
  color:inherit;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-tip-btn:focus-visible{
  outline:2px solid rgba(255,255,255,0.25);
  outline-offset:2px;
}

/* Module: icon + name layout */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-1-wrap{
  display:grid;
  grid-template-columns:auto auto;
  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{
  grid-column:1;
  grid-row:1;
  width:80px;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-icon img{
  max-width:80px;
  max-height:80px;
  width:100%;
  height:100%;
  object-fit:contain;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-text{
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-herobar-title-row{
  display:inline-flex;
  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{
  grid-column:1 / -1;
  grid-row:2;
  justify-self:center;
  margin-top:2px;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  cursor:pointer;
}

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

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes:focus-visible{
  outline:2px solid rgba(255,255,255,0.28);
  outline-offset:2px;
}

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

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

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-pill--req::after{
  content:" ▼";
  font-weight:normal;
  font-size:0.8em;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-description{
  font-size:1.05em;
  font-style:italic;
  max-width:42em;
  margin:0 auto;
  line-height:1.35;
  opacity:0.95;
}

/* Soft white + outline */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .sv-slot *,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-slot-row,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-title-row,
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) > tbody > tr.sv-hero-desc-row{
  color:var(--sv-text-soft) !important;
  text-shadow:var(--sv-text-outline);
}

/* Shared pill look (legacy infobox system only) */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
:where(.sv-type-label, .sv-source-pill, .sv-m4-label, .sv-sm-label, .sv-sm-flag, .sv-pill, .sv-pill--req){
  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);
}

/* Legacy level selector */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-level-selector .sv-level-ui{
  width:100%;
  margin:0 !important;
  display:flex;
  flex-direction:column;
  gap:0.3em;
}

:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox)
.module-level-selector .sv-level-label{
  font-weight:600;
}

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

/* Skill Type (Hero Bar Slot 2) */
table.spiritvale-skill-infobox .hero-bar-module-2 .hero-bar-module-body,
table.spiritvale-skill-infobox .module-skill-type{
  width:100%;
}

table.spiritvale-skill-infobox .module-skill-type .sv-type-grid{
  width:100%;
  margin:0 !important;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0.50em;
  padding:0.40em;
  justify-items:center;
  align-items:center;
}

table.spiritvale-skill-infobox .module-skill-type .sv-type-chunk{
  display:flex;
  flex-direction:column;
  align-items:center;
  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{
  font-weight:400;
  font-size:1.02em;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

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 */
table.spiritvale-skill-infobox .sv-slot.module-special-mechanics .sv-slot__body{
  width:100%;
  height:100%;
}

table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-root{width:100%;}

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

table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout{
  width:100%;
  display:grid;
  gap:0.55em;
  align-items:start;
  justify-items:stretch;
}

table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-1{
  grid-template-columns:1fr;
  justify-items:center;
}

table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
  grid-template-columns:1fr 1fr;
}

table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col{
  width:100%;
  min-width:0;
  display:flex;
  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{
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:0.50em;
}

table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-value{
  width:100%;
  text-align:center;
  font-weight:500;
  font-size:0.98em;
  line-height:1.2;
  opacity:0.98;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (min-width:850px){
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-layout.sv-sm-count-2{
    grid-template-columns:minmax(8.5em, 0.85fr) minmax(16em, 1.15fr);
  }
  table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech{
    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%;}
}