MediaWiki:Common.css: Difference between revisions

Revision as of 18:35, 23 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;

--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);
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: 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%;}
}