MediaWiki:Common.css: Difference between revisions

Revision as of 17:04, 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)
---------------------------------------------------------------------------- */

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

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

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

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

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

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