MediaWiki:Common.css: Difference between revisions

Revision as of 01:11, 27 February 2026

/* ============================================================================
SpiritVale Wiki — Common.css
Sitewide base + shared SpiritVale components (all skins)
- No Citizen skin selectors
- No mobile-only (@media max-width:500) rules (those live in Mobile.css)
============================================================================ */

/* ----------------------------------------------------------------------------
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);

/* 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-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)
- Universal, reusable (icons, buttons, tiles, etc.)
---------------------------------------------------------------------------- */

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

.mw-parser-output .playtest-info-box{
max-width:100%;
margin:0 0 10px 0;
border:1px solid 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);
}

/* ----------------------------------------------------------------------------
5) Hero Infobox System (Skills + Passives) — legacy table infobox
---------------------------------------------------------------------------- */

/* 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;}

/* 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 */
: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;
}

/* Notes button: solid (no transparency) */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-icon-name .sv-tip-btn--notes{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:30px;
height:30px;
border-radius: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);
}

/* Level selector */
:is(table.spiritvale-skill-infobox, table.spiritvale-passive-infobox) .module-level-selector .sv-level-ui{
width:90%;
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-slider input[type="range"]{
width:90%;
box-sizing:border-box;
margin:0;
}

: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 .hero-bar-module-2 .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;
}

/* Desktop ordering */
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) */
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;
}

/* Desktop behavior (850+) */
@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%;}
}

/* ---------------------------------------------------------------------------
SV Shared Utilities (global)
- Used by GameInfo + future bot-rendered modules
--------------------------------------------------------------------------- */

/* Phase 4.1 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 (bot can emit this for consistent rounding) */
.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 (only when explicitly requested in markup) */
.sv-img--shadow img,
.mw-parser-output .sv-img--shadow img {
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}

/* ---------------------------------------------------------------------------
SV Tabs (shared component)
- GameInfo can drop its local .sv-tab* rules once this exists
--------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
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 v3 (TESTING)
- Popup B aesthetic, site-wide
- Compact width: popups grow vertically (mobile-friendly)
- Header centered + larger, no hint text
- JS adds .sv-uipop-v3 to <html> when enabled
============================================================================ */

.sv-uipop-v3 .sv-def-tip,
.sv-uipop-v3 .sv-pop-tip{
  display:none !important; /* hide legacy injected black tooltips/pops */
}

/* Prevent long-press select/callout on popup triggers + controls (keep body selectable) */
.sv-tip-btn,
.sv-disclose-btn,
.sv-def,
.sv-uipop-head,
.sv-uipop-action,
.sv-uipop-actions,
.sv-uipop-title{
  -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;
}

/* ---- Universal shell (Popup B look) ------------------------------------ */

.sv-uipop{
  position:fixed;
  z-index:99999;

  /* JS sets top/left */
  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; }

/* v3 sizing: same compact width for ALL popups; height differs by mode */
.sv-uipop--sm,
.sv-uipop--lg{
  width:240px;                    /* compact default */
  max-width:calc(100vw - 20px);   /* always fit viewport */
}

/* Small: short tooltip-ish */
.sv-uipop--sm{
  max-height:min(45vh, 320px);
}

/* Large: more height for lists/actions (still same width) */
.sv-uipop--lg{
  max-height:min(70vh, 560px);
}

/* Header bar: centered + bigger, no hint */
.sv-uipop-head{
  display:flex;
  align-items:center;
  justify-content:center; /* centered header */
  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;          /* bigger title */
  letter-spacing:0.02em;
  color:var(--color-emphasized, var(--sv-ui-text1));
}

/* Body */
.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; /* allow copy inside body */
  user-select:text;
}

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

/* Normalize common blocks inside popup body (fixes “Notes is bigger than Definition”) */
.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; /* keep bullets but reduce default indent */
}

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

/* Links in popups */
.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; }

/* Normalize “Users/Requirements” list styling, supporting both old + new classes */
.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);
}

/* Optional actions row (Definitions with links, etc.) */
.sv-uipop-actions{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--sv-ui-line1);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.sv-uipop-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:7px 10px;
  border-radius:var(--sv-ui-rad-pill);
  border:1px solid var(--sv-ui-line2);
  background:var(--sv-ui-bg2);
  color:var(--sv-ui-text1);

  font-weight:900;
  font-size:12px;
  text-decoration:none;
}
.sv-uipop-action:hover{ background:var(--sv-ui-bg3); }