Toggle search
Toggle menu
115
248
25
2.7K
SpiritVale Wiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Join the Playtest on Steam Now: SpiritVale

Module:GameInfo/styles.css: Difference between revisions

From SpiritVale Wiki
More actions
← Older editNewer edit →
No edit summary
Tags: Mobile edit Mobile web edit
No edit summary
Tags: Mobile edit Mobile web edit
Line 11: Line 11:
   - section layout
   - section layout
   - skill-specific display blocks
   - skill-specific display blocks
  Transitional fallbacks remain in place so Common.css can take over as
  Lua / JS progressively emit more neutral attributes and hooks.
*/
*/


Line 21: Line 18:


.sv-gi-card,
.sv-gi-card,
.sv-skill-card {
.sv-skill-card{
    max-width: 600px;
  max-width:600px;
    margin: 18px auto;
  margin:18px auto;
    border-radius: 22px;
 
    border: 1px solid rgba(75,99,136,0.55);
  border-radius:22px;
    background-color: #0f172a;
  border:1px solid rgba(75,99,136,0.55);
    background-image: radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)), linear-gradient(180deg, #0f172a, #0b1324);
 
    box-shadow: 0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  background-color:#0f172a;
    overflow: visible;
  background-image:
    color: rgba(245,249,255,0.94);
    radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
    font-size: 15px;
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    line-height: 1.35;
    linear-gradient(180deg, #0f172a, #0b1324);
 
  box-shadow:0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:visible;
 
  color:rgba(245,249,255,0.94);
  font-size:15px;
  line-height:1.35;
}
}


/* Fixed top / bottom content zones */
.sv-gi-top,
.sv-gi-top,
.sv-skill-top {
.sv-skill-top{ padding:14px 18px 4px; }
    padding: 14px 18px 4px;
}


.sv-gi-bottom,
.sv-gi-bottom,
.sv-skill-bottom {
.sv-skill-bottom{ padding:10px 18px 12px; }
    padding: 10px 18px 12px;
}


/* Predictable sizing inside the card */
.sv-gi-card,
.sv-gi-card,
.sv-gi-card *,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card,
.sv-skill-card * {
.sv-skill-card *{ box-sizing:border-box; }
    box-sizing: border-box;
 
}
.sv-gi-error{
  max-width:600px;
  margin:18px auto;
  padding:10px 12px;
 
  border-radius:14px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;


/* Inline error shell */
  color:rgba(245,249,255,0.92);
.sv-gi-error {
    max-width: 600px;
    margin: 18px auto;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(75,99,136,0.55);
    background: #1f2937;
    color: rgba(245,249,255,0.92);
}
}


/* Hide source popup payload nodes even if sitewide .sv-hidden is unavailable */
.sv-gi-card .sv-hidden,
.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden {
.sv-skill-card .sv-hidden{ display:none; }
    display: none;
}


/* Remove default browser marker from summary elements */
.sv-gi-card summary,
.sv-gi-card summary,
.sv-skill-card summary {
.sv-skill-card summary{ list-style:none; }
    list-style: none;
}


/* ==========================================================================
/* ==========================================================================
Line 83: Line 74:
.sv-skill-icon,
.sv-skill-icon,
.sv-meta-icon,
.sv-meta-icon,
.sv-ref-ico {
.sv-ref-ico{
    font-size: 0;
  font-size:0;
    line-height: 0;
  line-height:0;
}
}


    .sv-skill-icon a,
.sv-skill-icon a,
    .sv-meta-icon a,
.sv-meta-icon a,
    .sv-ref-ico a {
.sv-ref-ico a{ text-decoration:none; }
        text-decoration: none;
    }


    /* Fallback “?” badge sizing inside icon boxes */
.sv-skill-icon .sv-miss{
    .sv-skill-icon .sv-miss {
  width:22px;
        width: 22px;
  height:22px;
        height: 22px;
  font-size:13px;
        font-size: 13px;
  line-height:1;
        line-height: 1;
}
    }


    .sv-meta-icon .sv-miss,
.sv-meta-icon .sv-miss,
    .sv-ref-ico .sv-miss {
.sv-ref-ico .sv-miss{
        width: 18px;
  width:18px;
        height: 18px;
  height:18px;
        font-size: 12px;
  font-size:12px;
        line-height: 1;
  line-height:1;
    }
}


/* Image enhancement; global .sv-img still owns rounding behavior */
.sv-gi-card .sv-img img,
.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img {
.sv-skill-card .sv-img img{ box-shadow:0 10px 18px rgba(0,0,0,0.30); }
    box-shadow: 0 10px 18px rgba(0,0,0,0.30);
}


/* ==========================================================================
/* ==========================================================================
Line 120: Line 105:
   ========================================================================== */
   ========================================================================== */


.sv-skill-head {
.sv-skill-head{
    display: flex;
  display:flex;
    align-items: flex-start;
  align-items:flex-start;
    gap: 12px;
  gap:12px;
    padding: 2px 0 10px;
  padding:2px 0 10px;
}
}


.sv-skill-icon {
.sv-skill-icon{
    flex: 0 0 auto;
  flex:0 0 auto;
    width: 64px;
  width:64px;
    height: 64px;
  height:64px;
    border-radius: 16px;
 
    border: 1px solid rgba(75,99,136,0.55);
  border-radius:16px;
    background: #1f2937;
  border:1px solid rgba(75,99,136,0.55);
    display: flex;
  background:#1f2937;
    align-items: center;
 
    justify-content: center;
  display:flex;
    overflow: hidden;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
}


.sv-skill-headtext {
.sv-skill-headtext{
    min-width: 0;
  min-width:0;
    flex: 0 1 auto;
  flex:0 1 auto;
}
}


.sv-skill-title-row {
.sv-skill-title-row{
    display: flex;
  display:flex;
    align-items: center;
  align-items:center;
    gap: 10px;
  gap:10px;
}
}


.sv-skill-title {
.sv-skill-title{
    min-width: 0;
  min-width:0;
    word-wrap: break-word;
  word-wrap:break-word;
    font-weight: 900;
 
    font-size: 22px;
  font-weight:900;
    line-height: 1.10;
  font-size:22px;
    letter-spacing: 0.2px;
  line-height:1.10;
    color: rgba(245,249,255,0.98);
  letter-spacing:0.2px;
  color:rgba(245,249,255,0.98);
}
}


.sv-skill-desc {
.sv-skill-desc{
    margin-top: 6px;
  margin-top:6px;
    word-wrap: break-word;
  word-wrap:break-word;
    font-size: 14px;
 
    line-height: 1.35;
  font-size:14px;
    color: rgba(215,226,244,0.92);
  line-height:1.35;
  color:rgba(215,226,244,0.92);
}
}


Line 173: Line 162:
   ========================================================================== */
   ========================================================================== */


.sv-skill-meta {
.sv-skill-meta{
    display: grid;
  display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 6px;
  gap:6px;
    margin: 8px 0 10px;
  margin:8px 0 10px;
}
}


/* Meta row fallback if global .sv-pill is used */
/* fallback if global .sv-pill is used */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill {
.sv-gi-card .sv-skill-meta .sv-pill{
    width: 100%;
  width:100%;
    min-height: 34px;
  min-height:34px;
    padding: 0;
  padding:0;
    display: flex;
 
    align-items: center;
  display:flex;
    justify-content: center;
  align-items:center;
    gap: 6px;
  justify-content:center;
    text-align: center;
  gap:6px;
    border-radius: 999px;
  text-align:center;
    border: 1px solid rgba(59,75,99,0.85);
 
    background: #273449;
  border-radius:999px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  border:1px solid rgba(59,75,99,0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  background:#273449;
    font-weight: 900;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
    font-size: 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    line-height: 1.02;
 
    letter-spacing: 0.08px;
  font-weight:900;
    text-transform: none;
  font-size:12px;
    color: rgba(245,249,255,0.96);
  line-height:1.02;
  letter-spacing:0.08px;
  text-transform:none;
  color:rgba(245,249,255,0.96);
}
}


/* Preferred meta-card rendering */
/* preferred meta-card */
.sv-gi-card .sv-meta-card,
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card {
.sv-skill-card .sv-meta-card{
    position: relative;
  position:relative;
    display: flex;
 
    align-items: center;
  display:flex;
    justify-content: center;
  align-items:center;
    gap: 6px;
  justify-content:center;
    min-height: 34px;
  gap:6px;
    padding: 0;
 
    border-radius: 999px;
  min-height:34px;
    border: 1px solid rgba(59,75,99,0.85);
  padding:0;
    background: #273449;
 
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  border-radius:999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
}


    .sv-gi-card .sv-meta-card:hover,
.sv-gi-card .sv-meta-card:hover,
    .sv-skill-card .sv-meta-card:hover {
.sv-skill-card .sv-meta-card:hover{ background:#2e3f59; }
        background: #2e3f59;
    }


.sv-gi-card .sv-meta-icon,
.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon {
.sv-skill-card .sv-meta-icon{
    flex: 0 0 auto;
  flex:0 0 auto;
    width: 20px;
  width:20px;
    height: 20px;
  height:20px;
    display: flex;
 
    align-items: center;
  display:flex;
    justify-content: center;
  align-items:center;
    overflow: hidden;
  justify-content:center;
    border-radius: 999px;
  overflow:hidden;
    border: 1px solid rgba(75,99,136,0.55);
 
    background: #0f172a;
  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
}
}


.sv-gi-card .sv-meta-textwrap,
.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap {
.sv-skill-card .sv-meta-textwrap{
    min-width: 0;
  min-width:0;
    flex: 0 1 auto;
  flex:0 1 auto;
}
}


.sv-gi-card .sv-meta-text,
.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text {
.sv-skill-card .sv-meta-text{
    min-width: 0;
  min-width:0;
    word-wrap: break-word;
  word-wrap:break-word;
    text-align: center;
  text-align:center;
    font-weight: 900;
 
    font-size: 12px;
  font-weight:900;
    line-height: 1.02;
  font-size:12px;
    letter-spacing: 0.08px;
  line-height:1.02;
    color: rgba(245,249,255,0.96);
  letter-spacing:0.08px;
  color:rgba(245,249,255,0.96);
}
}


.sv-gi-card .sv-meta-lines span,
.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span {
.sv-skill-card .sv-meta-lines span{ display:block; }
    display: block;
}


/* Visible text should appear static; interaction is handled by the pill overlay */
.sv-gi-card .sv-meta-text .sv-def,
.sv-gi-card .sv-meta-text .sv-def,
.sv-skill-card .sv-meta-text .sv-def {
.sv-skill-card .sv-meta-text .sv-def{ cursor:default; }
    cursor: default;
}


.sv-gi-card .sv-meta-text .sv-def-text,
.sv-gi-card .sv-meta-text .sv-def-text,
.sv-skill-card .sv-meta-text .sv-def-text {
.sv-skill-card .sv-meta-text .sv-def-text{
    color: inherit;
  color:inherit;
    border-bottom: none;
  border-bottom:none;
}
}


/* Secondary line styling */
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-skill-card .sv-meta-text .sv-meta-lines span + span {
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
    margin-top: 1px;
  margin-top:1px;
    opacity: 0.90;
  opacity:0.90;
    font-size: 10px;
 
    font-weight: 800;
  font-size:10px;
    letter-spacing: 0.12px;
  font-weight:800;
  letter-spacing:0.12px;
}
}


/* Full-pill Definitions interaction overlay */
.sv-gi-card .sv-meta-hit,
.sv-gi-card .sv-meta-hit,
.sv-skill-card .sv-meta-hit {
.sv-skill-card .sv-meta-hit{
    position: absolute;
  position:absolute;
    top: 0;
  top:0; right:0; bottom:0; left:0;
    right: 0;
  z-index:5;
    bottom: 0;
  opacity:0;
    left: 0;
    z-index: 5;
    opacity: 0;
}
}


    .sv-gi-card .sv-meta-hit .sv-def,
.sv-gi-card .sv-meta-hit .sv-def,
    .sv-skill-card .sv-meta-hit .sv-def {
.sv-skill-card .sv-meta-hit .sv-def{
        display: block;
  display:block;
        width: 100%;
  width:100%;
        height: 100%;
  height:100%;
    }
}


/* ==========================================================================
/* ==========================================================================
   5) REQUIREMENTS / USERS ROW
   5) REQUIREMENTS / USERS ROW
  Layout only; disclose component styling lives in Common.css
   ========================================================================== */
   ========================================================================== */


.sv-gi-card .sv-reqrow,
.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow {
.sv-skill-card .sv-reqrow{
    display: flex;
  display:flex;
    justify-content: center;
  justify-content:center;
    flex-wrap: wrap;
  flex-wrap:wrap;
    gap: 8px;
  gap:8px;
    margin: 6px 0 10px;
  margin:6px 0 10px;
}
}


.sv-gi-card .sv-disclose,
.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose {
.sv-skill-card .sv-disclose{
    flex: 0 1 190px;
  flex:0 1 190px;
    max-width: 205px;
  max-width:205px;
}
}


/* Transitional compact pill styling until all disclose buttons emit
  the compact modifier class from Lua */
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-skill-card .sv-reqrow .sv-disclose-btn {
.sv-skill-card .sv-reqrow .sv-disclose-btn{
    min-height: 36px;
  min-height:36px;
    padding: 0 12px;
  padding:0 12px;
    border-radius: 999px;
  border-radius:999px;
}
}


/* ==========================================================================
/* ==========================================================================
   6) LEVEL SELECTOR WRAPPER
   6) LEVEL SELECTOR WRAPPER
  Slider anatomy is owned by Common.css
   ========================================================================== */
   ========================================================================== */


.sv-skill-level {
.sv-skill-level{
    margin: 8px 0 10px;
  margin:8px 0 10px;
    padding: 10px 12px;
  padding:10px 12px;
    display: flex;
 
    flex-direction: column;
  display:flex;
    gap: 8px;
  flex-direction:column;
    border-radius: 16px;
  gap:8px;
    border: 1px solid rgba(59,75,99,0.85);
 
    background: #1f2937;
  border-radius:16px;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  border:1px solid rgba(59,75,99,0.85);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
}


    /* Skills default to hiding tick labels because the end-value replaces them */
.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{ display:none; }
    .sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels {
        display: none;
    }


/* Transitional helper label:
  - if Lua provides data-sv-helper-text, Common.css can own the copy
  - otherwise, keep the legacy fallback helper text here
*/
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-skill-card .sv-level-label:not([data-sv-helper-text]) {
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){
    position: static;
  position:static;
    top: auto;
  top:auto; right:auto; bottom:auto; left:auto;
    right: auto;
  transform:none;
    bottom: auto;
 
    left: auto;
  display:inline-block;
    transform: none;
  margin:0;
    display: inline-block;
  padding:0;
    margin: 0;
 
    padding: 0;
  font-size:0;
    font-size: 0;
  line-height:0;
    line-height: 0;
}
}


    .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
    .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after {
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
        content: "Slide to set level";
  content:"Slide to set level";
        display: inline-block;
  display:inline-block;
        font-weight: 900;
 
        font-size: 13px;
  font-weight:900;
        line-height: 1.25;
  font-size:13px;
        letter-spacing: 0.15px;
  line-height:1.25;
        color: rgba(245,249,255,0.94);
  letter-spacing:0.15px;
    }
  color:rgba(245,249,255,0.94);
}


/* ==========================================================================
/* ==========================================================================
Line 390: Line 368:
   ========================================================================== */
   ========================================================================== */


.sv_skill_scaling {
.sv_skill_scaling{
    margin: 8px 0 10px;
  margin:8px 0 10px;
    padding: 10px 12px 12px;
  padding:10px 12px 12px;
    border-radius: 18px;
 
    border: 1px solid rgba(59,75,99,0.85);
  border-radius:18px;
    background: #1f2937;
  border:1px solid rgba(59,75,99,0.85);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  background:#1f2937;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
}


    /* Absorb the level selector into the scaling surface */
.sv_skill_scaling .sv-skill-level,
    .sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level{
    .sv_skill_scaling__level {
  margin:0 0 10px;
        margin: 0 0 10px;
  padding:0 0 10px;
        padding: 0 0 10px;
 
        border: 0;
  border:0;
        border-radius: 0;
  border-radius:0;
        background: transparent;
  background:transparent;
        box-shadow: none;
  box-shadow:none;
        border-bottom: 1px solid rgba(59,75,99,0.72);
  border-bottom:1px solid rgba(59,75,99,0.72);
    }
}


/* Two columns (left cluster, right core); mobile stacks */
/* Two columns (left cluster, right core); mobile stacks */
.sv_skill_scaling__body {
.sv_skill_scaling__body{
    display: grid;
  display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 252px);
  grid-template-columns:minmax(0, 1fr) minmax(0, 252px);
    column-gap: 16px;
  column-gap:16px;
    row-gap: 12px;
  row-gap:12px;
    align-items: start;
  align-items:start;
 
  /* KEY: prevent grid-item stretch so centering works */
  justify-items:center;
}
}


/* Placeholder not used (core lives in column 2) */
/* Placeholder not used */
.sv_skill_scaling__side {
.sv_skill_scaling__side{ display:none; }
    display: none;
}


/* Left cluster (damage + attributes) centered as a unit */
/* Left cluster centered within column 1 */
.sv_skill_scaling__cluster{
.sv_skill_scaling__cluster{
   grid-column:1;
   grid-column:1;
   grid-row:1;
   grid-row:1;


   display:flex;
   display:inline-flex;   /* shrink-wrap */
   align-items:center;
   align-items:center;
   justify-content:center; /* center damage + stat grid */
   justify-content:center;
   gap:14px;
   gap:14px;


   flex-wrap:wrap;
   flex-wrap:wrap;
 
   width:auto;
  /* KEY: shrink-to-fit + center in the grid cell */
   width:auto;             /* <-- NOT 100% */
   max-width:100%;
   max-width:100%;
   margin-left:auto;
   margin:0 auto;
  margin-right:auto;


   min-width:0;
   min-width:0;
}
}


.sv_skill_scaling__column--core {
/* Core column should still fill its track */
    grid-column: 2;
.sv_skill_scaling__column--core{
    grid-row: 1;
  grid-column:2;
    min-width: 0;
  grid-row:1;
 
  width:100%;
  min-width:0;
}
}


/* Neutral wrappers */
/* Neutral wrappers */
.sv_skill_scaling__column {
.sv_skill_scaling__column{
    min-width: 0;
  min-width:0;
    padding: 0;
  padding:0;
    border: 0;
  border:0;
    border-radius: 0;
  border-radius:0;
    background: transparent;
  background:transparent;
    background-image: none;
  background-image:none;
    box-shadow: none;
  box-shadow:none;
}
}


/* Damage */
/* Damage */
.sv_skill_scaling__column--primary {
.sv_skill_scaling__column--primary{
    display: flex;
  display:flex;
    flex-direction: column;
  flex-direction:column;
    justify-content: center;
  justify-content:center;
    align-items: center;
  align-items:center;
    text-align: center;
  text-align:center;
}
}


.sv_skill_scaling__primary-value {
.sv_skill_scaling__primary-value{
    word-wrap: break-word;
  word-wrap:break-word;
    overflow-wrap: anywhere;
  overflow-wrap:anywhere;
    font-weight: 900;
    font-size: 34px;
    line-height: 0.95;
    letter-spacing: -0.50px;
    color: rgba(245,249,255,0.99);
}


.sv_skill_scaling__primary-label {
  font-weight:900;
    margin-top: 6px;
  font-size:34px;
    font-weight: 900;
  line-height:0.95;
    font-size: 10px;
  letter-spacing:-0.50px;
    line-height: 1.05;
  color:rgba(245,249,255,0.99);
    letter-spacing: 0.22px;
    text-transform: uppercase;
    color: rgba(182,198,224,0.96);
}
}


/* Attributes (2×3) */
.sv_skill_scaling__primary-label{
.sv_skill_scaling__stats-grid {
  margin-top:6px;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    justify-items: start;
    row-gap: 8px;
    column-gap: 10px;
    grid-template-areas:
        "str agi"
        "vit int"
        "dex luk";
}


.sv_skill_scaling__stat-pill--str {
  font-weight:900;
    grid-area: str;
  font-size:10px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.96);
}
}


.sv_skill_scaling__stat-pill--vit {
/* Attributes (2×3) */
    grid-area: vit;
.sv_skill_scaling__stats-grid{
}
  display:grid;
  grid-template-columns:repeat(2, max-content);
  justify-content:start;
  justify-items:start;


.sv_skill_scaling__stat-pill--dex {
  row-gap:8px;
    grid-area: dex;
  column-gap:10px;
}


.sv_skill_scaling__stat-pill--agi {
  grid-template-areas:
     grid-area: agi;
    "str agi"
     "vit int"
    "dex luk";
}
}


.sv_skill_scaling__stat-pill--int {
.sv_skill_scaling__stat-pill--str{ grid-area:str; }
    grid-area: int;
.sv_skill_scaling__stat-pill--vit{ grid-area:vit; }
}
.sv_skill_scaling__stat-pill--dex{ grid-area:dex; }
.sv_skill_scaling__stat-pill--agi{ grid-area:agi; }
.sv_skill_scaling__stat-pill--int{ grid-area:int; }
.sv_skill_scaling__stat-pill--luk{ grid-area:luk; }


.sv_skill_scaling__stat-pill--luk {
.sv_skill_scaling__pill{
    grid-area: luk;
  position:relative;
}
  min-width:0;


/* Shared shell */
  border-radius:14px;
.sv_skill_scaling__pill {
  border:1px solid rgba(59,75,99,0.92);
    position: relative;
  background:#1a2434;
    min-width: 0;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
    border-radius: 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
    border: 1px solid rgba(59,75,99,0.92);
    background: #1a2434;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
}


/* Stat chips (fixed size across all viewports) */
/* Stat chips (fixed size across all viewports) */
.sv_skill_scaling__stat-pill {
.sv_skill_scaling__stat-pill{
    border-radius: 999px;
  border-radius:999px;
    width: 50px;
    min-width: 50px;
    min-height: 22px;
    padding: 4px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}


.sv_skill_scaling__stat-main {
  width:50px;
    min-width: 0;
  min-width:50px;
    display: flex;
  min-height:22px;
    align-items: center;
  padding:4px 6px;
    justify-content: center;
}


.sv_skill_scaling__stat-visual {
  display:inline-flex;
    min-width: 0;
  align-items:center;
    display: flex;
  justify-content:center;
    align-items: center;
  white-space:nowrap;
    justify-content: center;
    gap: 6px;
}
}


.sv_skill_scaling__stat-label {
.sv_skill_scaling__stat-main{
    display: none;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
}


.sv_skill_scaling__stat-icon {
.sv_skill_scaling__stat-visual{
    width: 12px;
  min-width:0;
    height: 12px;
  display:flex;
    display: flex;
  align-items:center;
    align-items: center;
  justify-content:center;
    justify-content: center;
  gap:6px;
    font-size: 0;
    line-height: 0;
}
}


    .sv_skill_scaling__stat-icon a {
.sv_skill_scaling__stat-label{ display:none; }
        text-decoration: none;
    }


    .sv_skill_scaling__stat-icon .sv-img img {
.sv_skill_scaling__stat-icon{
        width: 12px;
  width:12px;
        height: 12px;
  height:12px;
        box-shadow: none;
    }


    .sv_skill_scaling__stat-icon .sv-miss {
  display:flex;
        width: 12px;
  align-items:center;
        height: 12px;
  justify-content:center;
        font-size: 9px;
        line-height: 1;
    }


.sv_skill_scaling__stat-value {
  font-size:0;
    font-weight: 900;
  line-height:0;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.10px;
    color: rgba(245,249,255,0.98);
}
}


.sv_skill_scaling__stat-hit {
.sv_skill_scaling__stat-icon a{ text-decoration:none; }
    position: absolute;
 
    top: 0;
.sv_skill_scaling__stat-icon .sv-img img{
    right: 0;
  width:12px;
    bottom: 0;
  height:12px;
    left: 0;
  box-shadow:none;
    z-index: 5;
    opacity: 0;
}
}


    .sv_skill_scaling__stat-hit .sv-def {
.sv_skill_scaling__stat-icon .sv-miss{
        display: block;
  width:12px;
        width: 100%;
  height:12px;
        height: 100%;
  font-size:9px;
    }
  line-height:1;
}


.sv_skill_scaling__stat-pill.is-inactive {
.sv_skill_scaling__stat-value{
    border-color: rgba(59,75,99,0.72);
  font-weight:900;
    background: #182130;
  font-size:12px;
    background-image: none;
  line-height:1;
    box-shadow: none;
  letter-spacing:-0.10px;
  color:rgba(245,249,255,0.98);
}
}


    .sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon,
.sv_skill_scaling__stat-hit{
    .sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value {
  position:absolute;
        display: none;
  top:0; right:0; bottom:0; left:0;
    }
  z-index:5;
  opacity:0;
}


    .sv_skill_scaling__stat-pill.is-inactive::before {
.sv_skill_scaling__stat-hit .sv-def{
        content: "—";
  display:block;
        font-weight: 900;
  width:100%;
        font-size: 12px;
  height:100%;
        line-height: 1;
}
        color: rgba(140,156,184,0.78);
    }


.sv_skill_scaling__stat-pill.is-active {
.sv_skill_scaling__stat-pill.is-inactive{
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.01);
  border-color:rgba(59,75,99,0.72);
  background:#182130;
  background-image:none;
  box-shadow:none;
}
}


/* Per-stat colors */
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon,
.sv_skill_scaling__stat-pill--str.is-active {
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value{ display:none; }
    border-color: rgba(145,63,82,0.96);
 
    background: #32131d;
.sv_skill_scaling__stat-pill.is-inactive::before{
    background-image: linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
  content:"—";
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:rgba(140,156,184,0.78);
}
}


    .sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value {
.sv_skill_scaling__stat-pill.is-active{
        color: #ffdce5;
  box-shadow:
    }
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.01);
}


.sv_skill_scaling__stat-pill--vit.is-active {
/* per-stat colors */
    border-color: rgba(158,112,22,0.96);
.sv_skill_scaling__stat-pill--str.is-active{
    background: #352609;
  border-color:rgba(145,63,82,0.96);
    background-image: linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
  background:#32131d;
  background-image:linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{ color:#ffdce5; }


    .sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value {
.sv_skill_scaling__stat-pill--vit.is-active{
        color: #ffefc9;
  border-color:rgba(158,112,22,0.96);
    }
  background:#352609;
  background-image:linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{ color:#ffefc9; }


.sv_skill_scaling__stat-pill--dex.is-active {
.sv_skill_scaling__stat-pill--dex.is-active{
    border-color: rgba(118,146,24,0.96);
  border-color:rgba(118,146,24,0.96);
    background: #243208;
  background:#243208;
    background-image: linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
  background-image:linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{ color:#edf8cc; }


    .sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value {
.sv_skill_scaling__stat-pill--agi.is-active{
        color: #edf8cc;
  border-color:rgba(125,62,152,0.96);
    }
  background:#2b1438;
  background-image:linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{ color:#f0dcff; }


.sv_skill_scaling__stat-pill--agi.is-active {
.sv_skill_scaling__stat-pill--int.is-active{
    border-color: rgba(125,62,152,0.96);
  border-color:rgba(45,118,191,0.96);
    background: #2b1438;
  background:#11263d;
    background-image: linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
  background-image:linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{ color:#d8eeff; }


    .sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value {
.sv_skill_scaling__stat-pill--luk.is-active{
        color: #f0dcff;
  border-color:rgba(183,150,22,0.96);
    }
  background:#3a2f07;
 
  background-image:linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
.sv_skill_scaling__stat-pill--int.is-active {
    border-color: rgba(45,118,191,0.96);
    background: #11263d;
    background-image: linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
}
}
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{ color:#fff2ba; }


    .sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value {
/* Core (3×2 grid) */
        color: #d8eeff;
.sv_skill_scaling__core-grid{
    }
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;


.sv_skill_scaling__stat-pill--luk.is-active {
  /* KEY: center each core cell within its track (fixes mobile left bias) */
    border-color: rgba(183,150,22,0.96);
  justify-items:center;
    background: #3a2f07;
    background-image: linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
}
}


    .sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value {
.sv_skill_scaling__core-pill{
        color: #fff2ba;
  border-radius:12px;
    }
  min-height:35px;
  max-width:70px;
  padding:8px 6px;
 
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;


/* Core (3×2 grid; no pill/bubble look) */
  border:1px solid rgba(59,75,99,0.85);
.sv_skill_scaling__core-grid {
  background:#182130;
    display: grid;
  background-image:none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  box-shadow:none;
    gap: 8px;
}
}


.sv_skill_scaling__core-pill {
.sv_skill_scaling__core-pill.is-active{ background:#1a2434; }
    border-radius: 12px;
 
    min-height: 35px;
.sv_skill_scaling__core-main{
    max-width: 70px;
  min-width:0;
    padding: 8px 6px;
  display:flex;
    display: flex;
  align-items:baseline;
    flex-direction: column;
  justify-content:center;
    justify-content: center;
  flex-wrap:wrap;
    align-items: center;
  gap:4px;
    text-align: center;
    border: 1px solid rgba(59,75,99,0.85);
    background: #182130;
    background-image: none;
    box-shadow: none;
}
}


    .sv_skill_scaling__core-pill.is-active {
.sv_skill_scaling__core-value{
        background: #1a2434;
  min-width:0;
    }
  word-wrap:break-word;


.sv_skill_scaling__core-main {
  font-weight:900;
    min-width: 0;
  font-size:14px;
    display: flex;
  line-height:1.02;
    align-items: baseline;
  color:rgba(245,249,255,0.98);
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
}


.sv_skill_scaling__core-value {
.sv_skill_scaling__core-unit{
    min-width: 0;
  font-weight:900;
    word-wrap: break-word;
  font-size:10px;
    font-weight: 900;
  line-height:1.05;
    font-size: 14px;
  color:rgba(182,198,224,0.95);
    line-height: 1.02;
    color: rgba(245,249,255,0.98);
}
}


.sv_skill_scaling__core-unit {
.sv_skill_scaling__core-label{
    font-weight: 900;
  margin-top:5px;
    font-size: 10px;
 
    line-height: 1.05;
  font-weight:900;
    color: rgba(182,198,224,0.95);
  font-size:10px;
  line-height:1.10;
  letter-spacing:0.14px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}
}


.sv_skill_scaling__core-label {
.sv_skill_scaling__core-pill.is-inactive{
    margin-top: 5px;
  border-color:rgba(59,75,99,0.72);
    font-weight: 900;
  background:#182130;
    font-size: 10px;
    line-height: 1.10;
    letter-spacing: 0.14px;
    text-transform: uppercase;
    color: rgba(182,198,224,0.95);
}
}


.sv_skill_scaling__core-pill.is-inactive {
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
    border-color: rgba(59,75,99,0.72);
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
    background: #182130;
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label{
  color:rgba(140,156,184,0.78);
}
}
    .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
    .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
    .sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label {
        color: rgba(140,156,184,0.78);
    }


/* Scaling responsive (no stat pill size changes) */
/* Scaling responsive (no stat pill size changes) */
@media (max-width:850px) {
@media (max-width:850px){
    .sv_skill_scaling__body {
  .sv_skill_scaling__body{
        grid-template-columns: minmax(0, 1fr) minmax(0, 236px);
    grid-template-columns:minmax(0, 1fr) minmax(0, 236px);
    }
  }
 
    .sv_skill_scaling__primary-value {
        font-size: 32px;
    }


    .sv_skill_scaling__core-pill {
  .sv_skill_scaling__primary-value{ font-size:32px; }
        min-height: 35px;
        max-width: 70px;
        justify-content: center;
        align-items: center;
    }


    .sv_skill_scaling__core-value {
  .sv_skill_scaling__core-pill{
        font-size: 13px;
    min-height:35px;
     }
     max-width:70px;
  }


    .sv_skill_scaling__core-label {
  .sv_skill_scaling__core-value{ font-size:13px; }
        font-size: 9px;
  .sv_skill_scaling__core-label{ font-size:9px; }
    }
}
}


@media (max-width:500px) {
@media (max-width:500px){
    .sv_skill_scaling {
  .sv_skill_scaling{ padding:9px 10px 10px; }
        padding: 9px 10px 10px;
    }


        .sv_skill_scaling .sv-skill-level,
  .sv_skill_scaling .sv-skill-level,
        .sv_skill_scaling__level {
  .sv_skill_scaling__level{ padding:0 0 9px; }
            padding: 0 0 9px;
        }


    .sv_skill_scaling__body {
  .sv_skill_scaling__body{
        grid-template-columns: 1fr;
    grid-template-columns:1fr;
        row-gap: 12px;
    row-gap:12px;
    }
  }


    .sv_skill_scaling__cluster {
  .sv_skill_scaling__column--core{
        grid-column: 1;
    grid-column:1;
        grid-row: 1;
    grid-row:2;
        gap: 10px;
    width:100%;
    }
  }


    .sv_skill_scaling__column--core {
  .sv_skill_scaling__primary-value{ font-size:30px; }
        grid-column: 1;
        grid-row: 2;
    }


    .sv_skill_scaling__primary-value {
  .sv_skill_scaling__core-pill{
        font-size: 30px;
    min-height:35px;
     }
    max-width:70px;
     padding:7px 6px;
  }


    .sv_skill_scaling__core-pill {
  .sv_skill_scaling__core-value{ font-size:13px; }
        min-height: 35px;
  .sv_skill_scaling__core-unit{ font-size:10px; }
        max-width: 70px;
  .sv_skill_scaling__core-label{ font-size:9px; }
        padding: 7px 6px;
        justify-content: center;
        align-items: center;
    }
 
    .sv_skill_scaling__core-value {
        font-size: 13px;
    }
 
    .sv_skill_scaling__core-unit {
        font-size: 10px;
    }
 
    .sv_skill_scaling__core-label {
        font-size: 9px;
    }
}
}


@media (max-width:360px) {
@media (max-width:360px){
    .sv_skill_scaling__primary-value {
  .sv_skill_scaling__primary-value{ font-size:28px; }
        font-size: 28px;
    }


    .sv_skill_scaling__core-grid {
  .sv_skill_scaling__core-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns:repeat(2, minmax(0, 1fr));
    }
  }
}
}


/* ==========================================================================
/* ==========================================================================
Line 875: Line 793:
   ========================================================================== */
   ========================================================================== */


.sv-skill-tabs {
.sv-skill-tabs{ margin:10px 0 0; }
    margin: 10px 0 0;
}


/* Mechanics grid */
.sv-gi-card .sv-kw-grid,
.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid {
.sv-skill-card .sv-kw-grid{
    display: grid;
  display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 10px;
  gap:10px;
}
}


.sv-gi-card .sv-kw-cell,
.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell {
.sv-skill-card .sv-kw-cell{
    padding: 10px 10px 9px;
  padding:10px 10px 9px;
    border-radius: 14px;
 
    border: 1px solid rgba(59,75,99,0.85);
  border-radius:14px;
    background: #273449;
  border:1px solid rgba(59,75,99,0.85);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  background:#273449;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
}


.sv-gi-card .sv-kw-label,
.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label {
.sv-skill-card .sv-kw-label{
    font-weight: 900;
  font-weight:900;
    font-size: 12px;
  font-size:12px;
    letter-spacing: 0.25px;
  letter-spacing:0.25px;
    text-transform: uppercase;
  text-transform:uppercase;
    color: rgba(182,198,224,0.95);
  color:rgba(182,198,224,0.95);
}
}


.sv-gi-card .sv-kw-value,
.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value {
.sv-skill-card .sv-kw-value{
    margin-top: 6px;
  margin-top:6px;
    word-wrap: break-word;
  word-wrap:break-word;
    font-weight: 900;
 
    font-size: 15px;
  font-weight:900;
    color: rgba(245,249,255,0.96);
  font-size:15px;
  color:rgba(245,249,255,0.96);
}
}


/* Keyword pills panel */
.sv-gi-card .sv-tab-pills,
.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills {
.sv-skill-card .sv-tab-pills{
    display: flex;
  display:flex;
    flex-wrap: wrap;
  flex-wrap:wrap;
    gap: 8px;
  gap:8px;
}
}


Line 928: Line 844:


.sv-gi-card .sv-ref-grid,
.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid {
.sv-skill-card .sv-ref-grid{
    display: grid;
  display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 10px;
  gap:10px;
}
}


.sv-gi-card .sv-ref-card,
.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card {
.sv-skill-card .sv-ref-card{
    min-width: 0;
  min-width:0;
    display: flex;
  display:flex;
    align-items: flex-start;
  align-items:flex-start;
    gap: 10px;
  gap:10px;
    padding: 10px 10px;
  padding:10px 10px;
    border-radius: 16px;
 
    border: 1px solid rgba(59,75,99,0.85);
  border-radius:16px;
    background: #1f2937;
  border:1px solid rgba(59,75,99,0.85);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  background:#1f2937;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
    color: rgba(245,249,255,0.94);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
 
  color:rgba(245,249,255,0.94);
}
}


.sv-gi-card .sv-ref-ico,
.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico {
.sv-skill-card .sv-ref-ico{
    flex: 0 0 auto;
  flex:0 0 auto;
    width: 52px;
  width:52px;
    height: 52px;
  height:52px;
    display: flex;
 
    align-items: center;
  display:flex;
    justify-content: center;
  align-items:center;
    overflow: hidden;
  justify-content:center;
    border-radius: 16px;
  overflow:hidden;
    border: 1px solid rgba(75,99,136,0.55);
 
    background: #273449;
  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
}
}


.sv-gi-card .sv-ref-text,
.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text {
.sv-skill-card .sv-ref-text{
    min-width: 0;
  min-width:0;
    flex: 1 1 auto;
  flex:1 1 auto;
}
}


.sv-gi-card .sv-ref-title,
.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title {
.sv-skill-card .sv-ref-title{
    word-wrap: break-word;
  word-wrap:break-word;
    font-weight: 900;
 
    font-size: 15px;
  font-weight:900;
    line-height: 1.15;
  font-size:15px;
    color: rgba(245,249,255,0.98);
  line-height:1.15;
  color:rgba(245,249,255,0.98);
}
}


.sv-gi-card .sv-ref-stats,
.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats {
.sv-skill-card .sv-ref-stats{
    display: flex;
  display:flex;
    flex-wrap: wrap;
  flex-wrap:wrap;
    gap: 8px;
  gap:8px;
    margin-top: 8px;
  margin-top:8px;
}
}


.sv-gi-card .sv-ref-stat,
.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat {
.sv-skill-card .sv-ref-stat{
    display: inline-flex;
  display:inline-flex;
    align-items: center;
  align-items:center;
    padding: 3px 8px;
  padding:3px 8px;
    border-radius: 999px;
 
    border: 1px solid rgba(59,75,99,0.85);
  border-radius:999px;
    background: #273449;
  border:1px solid rgba(59,75,99,0.85);
    background-image: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  background:#273449;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
    font-weight: 900;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
    font-size: 12px;
 
    color: rgba(215,226,244,0.92);
  font-weight:900;
  font-size:12px;
  color:rgba(215,226,244,0.92);
}
}


.sv-gi-card .sv-ref-sub,
.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub {
.sv-skill-card .sv-ref-sub{
    margin-top: 6px;
  margin-top:6px;
    font-weight: 900;
  font-weight:900;
    font-size: 13px;
  font-size:13px;
    color: rgba(182,198,224,0.95);
  color:rgba(182,198,224,0.95);
}
}


/* ==========================================================================
/* ==========================================================================
   10) RESPONSIVE
   10) RESPONSIVE (card/layout)
  Breakpoints:
  - 850px: tablet / compact desktop transition
  - 500px: mobile
  - 360px: very narrow screens
   ========================================================================== */
   ========================================================================== */


@media (max-width:850px) {
@media (max-width:850px){
    .sv-gi-card,
  .sv-gi-card,
    .sv-skill-card {
  .sv-skill-card{
        margin: 14px 10px;
    margin:14px 10px;
        border-radius: 20px;
    border-radius:20px;
    }
  }
 
    .sv-gi-top,
    .sv-skill-top {
        padding: 12px 16px 4px;
    }


    .sv-gi-bottom,
  .sv-gi-top,
    .sv-skill-bottom {
  .sv-skill-top{ padding:12px 16px 4px; }
        padding: 10px 16px 12px;
    }


    .sv-skill-title {
  .sv-gi-bottom,
        font-size: 20px;
  .sv-skill-bottom{ padding:10px 16px 12px; }
    }


    .sv-skill-meta {
  .sv-skill-title{ font-size:20px; }
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .sv-gi-card .sv-core-grid,
  .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .sv-skill-card .sv-core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .sv-gi-card .sv-ref-grid,
  .sv-gi-card .sv-ref-grid,
    .sv-skill-card .sv-ref-grid {
  .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }
        grid-template-columns: 1fr;
    }
}
}


@media (max-width:500px) {
@media (max-width:500px){
    .sv-skill-head {
  .sv-skill-head{ gap:10px; }
        gap: 10px;
    }
 
    .sv-skill-icon {
        width: 56px;
        height: 56px;
        border-radius: 14px;
    }


    .sv-skill-title {
  .sv-skill-icon{
        font-size: 18px;
    width:56px;
    }
    height:56px;
    border-radius:14px;
  }


    .sv-skill-desc {
  .sv-skill-title{ font-size:18px; }
        font-size: 13px;
  .sv-skill-desc{ font-size:13px; }
    }


    .sv-gi-card .sv-scaling-grid,
  .sv-gi-card .sv-scaling-grid,
    .sv-skill-card .sv-scaling-grid {
  .sv-skill-card .sv-scaling-grid{ grid-template-columns:1fr; }
        grid-template-columns: 1fr;
    }


    .sv-gi-card .sv-kw-grid,
  .sv-gi-card .sv-kw-grid,
    .sv-skill-card .sv-kw-grid {
  .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }
        grid-template-columns: 1fr;
    }


    .sv-gi-card .sv-reqrow,
  .sv-gi-card .sv-reqrow,
    .sv-skill-card .sv-reqrow {
  .sv-skill-card .sv-reqrow{
        padding-left: 16px;
    padding-left:16px;
        padding-right: 16px;
    padding-right:16px;
    }
  }


    .sv-gi-card .sv-disclose,
  .sv-gi-card .sv-disclose,
    .sv-skill-card .sv-disclose {
  .sv-skill-card .sv-disclose{
        flex: 1 1 170px;
    flex:1 1 170px;
        max-width: 190px;
    max-width:190px;
    }
  }


    .sv-skill-card .sv-skill-meta,
  .sv-skill-card .sv-skill-meta,
    .sv-gi-card .sv-skill-meta {
  .sv-gi-card .sv-skill-meta{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 6px;
    gap:6px;
        max-width: 200px;
    max-width:200px;
        margin-left: auto;
    margin-left:auto;
        margin-right: auto;
    margin-right:auto;
        justify-content: center;
    justify-content:center;
    }
  }


    .sv-skill-card .sv-meta-card,
  .sv-skill-card .sv-meta-card,
    .sv-gi-card .sv-meta-card {
  .sv-gi-card .sv-meta-card{
        min-height: 32px;
    min-height:32px;
        gap: 7px;
    gap:7px;
    }
  }


    .sv-skill-card .sv-meta-icon,
  .sv-skill-card .sv-meta-icon,
    .sv-gi-card .sv-meta-icon {
  .sv-gi-card .sv-meta-icon{
        width: 16px;
    width:16px;
        height: 16px;
    height:16px;
    }
  }


    .sv-skill-card .sv-meta-text,
  .sv-skill-card .sv-meta-text,
    .sv-gi-card .sv-meta-text {
  .sv-gi-card .sv-meta-text{
        font-size: 10px;
    font-size:10px;
        line-height: 1.05;
    line-height:1.05;
        letter-spacing: 0;
    letter-spacing:0;
    }
  }


        .sv-skill-card .sv-meta-text .sv-meta-lines span + span,
  .sv-skill-card .sv-meta-text .sv-meta-lines span + span,
        .sv-gi-card .sv-meta-text .sv-meta-lines span + span {
  .sv-gi-card .sv-meta-text .sv-meta-lines span + span{
            margin-top: 1px;
    margin-top:1px;
            font-size: 9px;
    font-size:9px;
        }
  }


    .sv-skill-level {
  .sv-skill-level{ padding:9px 10px; }
        padding: 9px 10px;
    }


    .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
  .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
    .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after {
  .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{ font-size:12px; }
        font-size: 12px;
    }


    .sv-skill-card .sv-skill-meta .sv-pill,
  .sv-skill-card .sv-skill-meta .sv-pill,
    .sv-gi-card .sv-skill-meta .sv-pill {
  .sv-gi-card .sv-skill-meta .sv-pill{
        min-height: 24px;
    min-height:24px;
        gap: 5px;
    gap:5px;
        font-size: 10px;
    font-size:10px;
        line-height: 1.05;
    line-height:1.05;
        letter-spacing: 0;
    letter-spacing:0;
    }
  }
}
}


@media (max-width:360px) {
@media (max-width:360px){
    .sv-gi-card .sv-disclose,
  .sv-gi-card .sv-disclose,
    .sv-skill-card .sv-disclose {
  .sv-skill-card .sv-disclose{
        flex: 1 1 100%;
    flex:1 1 100%;
        max-width: 100%;
    max-width:100%;
    }
  }
}
}

Revision as of 22:09, 5 March 2026

/* Module:GameInfo/styles.css */
/* NOTE (ownership)
   --------------------------------------------------------------------------
   Common.css owns shared components and tokens:
   - slider anatomy
   - tabs
   - tips / discloses / popups

   This file owns GameInfo-family presentation only:
   - card shell
   - section layout
   - skill-specific display blocks
*/

/* ==========================================================================
   1) BASE CARD + SAFETY
   ========================================================================== */

.sv-gi-card,
.sv-skill-card{
  max-width:600px;
  margin:18px auto;

  border-radius:22px;
  border:1px solid rgba(75,99,136,0.55);

  background-color:#0f172a;
  background-image:
    radial-gradient(900px 360px at 40% -10%, rgba(106,166,255,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #0f172a, #0b1324);

  box-shadow:0 16px 38px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow:visible;

  color:rgba(245,249,255,0.94);
  font-size:15px;
  line-height:1.35;
}

.sv-gi-top,
.sv-skill-top{ padding:14px 18px 4px; }

.sv-gi-bottom,
.sv-skill-bottom{ padding:10px 18px 12px; }

.sv-gi-card,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card *{ box-sizing:border-box; }

.sv-gi-error{
  max-width:600px;
  margin:18px auto;
  padding:10px 12px;

  border-radius:14px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;

  color:rgba(245,249,255,0.92);
}

.sv-gi-card .sv-hidden,
.sv-skill-card .sv-hidden{ display:none; }

.sv-gi-card summary,
.sv-skill-card summary{ list-style:none; }

/* ==========================================================================
   2) ICONS, IMAGES, AND FALLBACK BADGES
   ========================================================================== */

.sv-skill-icon,
.sv-meta-icon,
.sv-ref-ico{
  font-size:0;
  line-height:0;
}

.sv-skill-icon a,
.sv-meta-icon a,
.sv-ref-ico a{ text-decoration:none; }

.sv-skill-icon .sv-miss{
  width:22px;
  height:22px;
  font-size:13px;
  line-height:1;
}

.sv-meta-icon .sv-miss,
.sv-ref-ico .sv-miss{
  width:18px;
  height:18px;
  font-size:12px;
  line-height:1;
}

.sv-gi-card .sv-img img,
.sv-skill-card .sv-img img{ box-shadow:0 10px 18px rgba(0,0,0,0.30); }

/* ==========================================================================
   3) SKILL HEADER
   ========================================================================== */

.sv-skill-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:2px 0 10px;
}

.sv-skill-icon{
  flex:0 0 auto;
  width:64px;
  height:64px;

  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#1f2937;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.sv-skill-headtext{
  min-width:0;
  flex:0 1 auto;
}

.sv-skill-title-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.sv-skill-title{
  min-width:0;
  word-wrap:break-word;

  font-weight:900;
  font-size:22px;
  line-height:1.10;
  letter-spacing:0.2px;
  color:rgba(245,249,255,0.98);
}

.sv-skill-desc{
  margin-top:6px;
  word-wrap:break-word;

  font-size:14px;
  line-height:1.35;
  color:rgba(215,226,244,0.92);
}

/* ==========================================================================
   4) META ROW
   ========================================================================== */

.sv-skill-meta{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  margin:8px 0 10px;
}

/* fallback if global .sv-pill is used */
.sv-skill-card .sv-skill-meta .sv-pill,
.sv-gi-card .sv-skill-meta .sv-pill{
  width:100%;
  min-height:34px;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;

  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  font-weight:900;
  font-size:12px;
  line-height:1.02;
  letter-spacing:0.08px;
  text-transform:none;
  color:rgba(245,249,255,0.96);
}

/* preferred meta-card */
.sv-gi-card .sv-meta-card,
.sv-skill-card .sv-meta-card{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  min-height:34px;
  padding:0;

  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-meta-card:hover,
.sv-skill-card .sv-meta-card:hover{ background:#2e3f59; }

.sv-gi-card .sv-meta-icon,
.sv-skill-card .sv-meta-icon{
  flex:0 0 auto;
  width:20px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  border-radius:999px;
  border:1px solid rgba(75,99,136,0.55);
  background:#0f172a;
}

.sv-gi-card .sv-meta-textwrap,
.sv-skill-card .sv-meta-textwrap{
  min-width:0;
  flex:0 1 auto;
}

.sv-gi-card .sv-meta-text,
.sv-skill-card .sv-meta-text{
  min-width:0;
  word-wrap:break-word;
  text-align:center;

  font-weight:900;
  font-size:12px;
  line-height:1.02;
  letter-spacing:0.08px;
  color:rgba(245,249,255,0.96);
}

.sv-gi-card .sv-meta-lines span,
.sv-skill-card .sv-meta-lines span{ display:block; }

.sv-gi-card .sv-meta-text .sv-def,
.sv-skill-card .sv-meta-text .sv-def{ cursor:default; }

.sv-gi-card .sv-meta-text .sv-def-text,
.sv-skill-card .sv-meta-text .sv-def-text{
  color:inherit;
  border-bottom:none;
}

.sv-gi-card .sv-meta-text .sv-meta-lines span + span,
.sv-skill-card .sv-meta-text .sv-meta-lines span + span{
  margin-top:1px;
  opacity:0.90;

  font-size:10px;
  font-weight:800;
  letter-spacing:0.12px;
}

.sv-gi-card .sv-meta-hit,
.sv-skill-card .sv-meta-hit{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:5;
  opacity:0;
}

.sv-gi-card .sv-meta-hit .sv-def,
.sv-skill-card .sv-meta-hit .sv-def{
  display:block;
  width:100%;
  height:100%;
}

/* ==========================================================================
   5) REQUIREMENTS / USERS ROW
   ========================================================================== */

.sv-gi-card .sv-reqrow,
.sv-skill-card .sv-reqrow{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:6px 0 10px;
}

.sv-gi-card .sv-disclose,
.sv-skill-card .sv-disclose{
  flex:0 1 190px;
  max-width:205px;
}

.sv-gi-card .sv-reqrow .sv-disclose-btn,
.sv-skill-card .sv-reqrow .sv-disclose-btn{
  min-height:36px;
  padding:0 12px;
  border-radius:999px;
}

/* ==========================================================================
   6) LEVEL SELECTOR WRAPPER
   ========================================================================== */

.sv-skill-level{
  margin:8px 0 10px;
  padding:10px 12px;

  display:flex;
  flex-direction:column;
  gap:8px;

  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-skill-level:not([data-sv-level-hide-ticks="0"]) .sv-level-ticklabels{ display:none; }

.sv-gi-card .sv-level-label:not([data-sv-helper-text]),
.sv-skill-card .sv-level-label:not([data-sv-helper-text]){
  position:static;
  top:auto; right:auto; bottom:auto; left:auto;
  transform:none;

  display:inline-block;
  margin:0;
  padding:0;

  font-size:0;
  line-height:0;
}

.sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
.sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{
  content:"Slide to set level";
  display:inline-block;

  font-weight:900;
  font-size:13px;
  line-height:1.25;
  letter-spacing:0.15px;
  color:rgba(245,249,255,0.94);
}

/* ==========================================================================
   7) SKILL SCALING
   ========================================================================== */

.sv_skill_scaling{
  margin:8px 0 10px;
  padding:10px 12px 12px;

  border-radius:18px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv_skill_scaling .sv-skill-level,
.sv_skill_scaling__level{
  margin:0 0 10px;
  padding:0 0 10px;

  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  border-bottom:1px solid rgba(59,75,99,0.72);
}

/* Two columns (left cluster, right core); mobile stacks */
.sv_skill_scaling__body{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 252px);
  column-gap:16px;
  row-gap:12px;
  align-items:start;

  /* KEY: prevent grid-item stretch so centering works */
  justify-items:center;
}

/* Placeholder not used */
.sv_skill_scaling__side{ display:none; }

/* Left cluster centered within column 1 */
.sv_skill_scaling__cluster{
  grid-column:1;
  grid-row:1;

  display:inline-flex;   /* shrink-wrap */
  align-items:center;
  justify-content:center;
  gap:14px;

  flex-wrap:wrap;
  width:auto;
  max-width:100%;
  margin:0 auto;

  min-width:0;
}

/* Core column should still fill its track */
.sv_skill_scaling__column--core{
  grid-column:2;
  grid-row:1;

  width:100%;
  min-width:0;
}

/* Neutral wrappers */
.sv_skill_scaling__column{
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
}

/* Damage */
.sv_skill_scaling__column--primary{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}

.sv_skill_scaling__primary-value{
  word-wrap:break-word;
  overflow-wrap:anywhere;

  font-weight:900;
  font-size:34px;
  line-height:0.95;
  letter-spacing:-0.50px;
  color:rgba(245,249,255,0.99);
}

.sv_skill_scaling__primary-label{
  margin-top:6px;

  font-weight:900;
  font-size:10px;
  line-height:1.05;
  letter-spacing:0.22px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.96);
}

/* Attributes (2×3) */
.sv_skill_scaling__stats-grid{
  display:grid;
  grid-template-columns:repeat(2, max-content);
  justify-content:start;
  justify-items:start;

  row-gap:8px;
  column-gap:10px;

  grid-template-areas:
    "str agi"
    "vit int"
    "dex luk";
}

.sv_skill_scaling__stat-pill--str{ grid-area:str; }
.sv_skill_scaling__stat-pill--vit{ grid-area:vit; }
.sv_skill_scaling__stat-pill--dex{ grid-area:dex; }
.sv_skill_scaling__stat-pill--agi{ grid-area:agi; }
.sv_skill_scaling__stat-pill--int{ grid-area:int; }
.sv_skill_scaling__stat-pill--luk{ grid-area:luk; }

.sv_skill_scaling__pill{
  position:relative;
  min-width:0;

  border-radius:14px;
  border:1px solid rgba(59,75,99,0.92);
  background:#1a2434;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Stat chips (fixed size across all viewports) */
.sv_skill_scaling__stat-pill{
  border-radius:999px;

  width:50px;
  min-width:50px;
  min-height:22px;
  padding:4px 6px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.sv_skill_scaling__stat-main{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sv_skill_scaling__stat-visual{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.sv_skill_scaling__stat-label{ display:none; }

.sv_skill_scaling__stat-icon{
  width:12px;
  height:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:0;
  line-height:0;
}

.sv_skill_scaling__stat-icon a{ text-decoration:none; }

.sv_skill_scaling__stat-icon .sv-img img{
  width:12px;
  height:12px;
  box-shadow:none;
}

.sv_skill_scaling__stat-icon .sv-miss{
  width:12px;
  height:12px;
  font-size:9px;
  line-height:1;
}

.sv_skill_scaling__stat-value{
  font-weight:900;
  font-size:12px;
  line-height:1;
  letter-spacing:-0.10px;
  color:rgba(245,249,255,0.98);
}

.sv_skill_scaling__stat-hit{
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  z-index:5;
  opacity:0;
}

.sv_skill_scaling__stat-hit .sv-def{
  display:block;
  width:100%;
  height:100%;
}

.sv_skill_scaling__stat-pill.is-inactive{
  border-color:rgba(59,75,99,0.72);
  background:#182130;
  background-image:none;
  box-shadow:none;
}

.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-icon,
.sv_skill_scaling__stat-pill.is-inactive .sv_skill_scaling__stat-value{ display:none; }

.sv_skill_scaling__stat-pill.is-inactive::before{
  content:"—";
  font-weight:900;
  font-size:12px;
  line-height:1;
  color:rgba(140,156,184,0.78);
}

.sv_skill_scaling__stat-pill.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 0 1px rgba(255,255,255,0.01);
}

/* per-stat colors */
.sv_skill_scaling__stat-pill--str.is-active{
  border-color:rgba(145,63,82,0.96);
  background:#32131d;
  background-image:linear-gradient(180deg, rgba(190,88,113,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--str.is-active .sv_skill_scaling__stat-value{ color:#ffdce5; }

.sv_skill_scaling__stat-pill--vit.is-active{
  border-color:rgba(158,112,22,0.96);
  background:#352609;
  background-image:linear-gradient(180deg, rgba(210,144,18,0.15), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--vit.is-active .sv_skill_scaling__stat-value{ color:#ffefc9; }

.sv_skill_scaling__stat-pill--dex.is-active{
  border-color:rgba(118,146,24,0.96);
  background:#243208;
  background-image:linear-gradient(180deg, rgba(159,194,27,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--dex.is-active .sv_skill_scaling__stat-value{ color:#edf8cc; }

.sv_skill_scaling__stat-pill--agi.is-active{
  border-color:rgba(125,62,152,0.96);
  background:#2b1438;
  background-image:linear-gradient(180deg, rgba(165,82,198,0.17), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--agi.is-active .sv_skill_scaling__stat-value{ color:#f0dcff; }

.sv_skill_scaling__stat-pill--int.is-active{
  border-color:rgba(45,118,191,0.96);
  background:#11263d;
  background-image:linear-gradient(180deg, rgba(35,140,230,0.18), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--int.is-active .sv_skill_scaling__stat-value{ color:#d8eeff; }

.sv_skill_scaling__stat-pill--luk.is-active{
  border-color:rgba(183,150,22,0.96);
  background:#3a2f07;
  background-image:linear-gradient(180deg, rgba(234,194,9,0.16), rgba(0,0,0,0.00));
}
.sv_skill_scaling__stat-pill--luk.is-active .sv_skill_scaling__stat-value{ color:#fff2ba; }

/* Core (3×2 grid) */
.sv_skill_scaling__core-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;

  /* KEY: center each core cell within its track (fixes mobile left bias) */
  justify-items:center;
}

.sv_skill_scaling__core-pill{
  border-radius:12px;
  min-height:35px;
  max-width:70px;
  padding:8px 6px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;

  border:1px solid rgba(59,75,99,0.85);
  background:#182130;
  background-image:none;
  box-shadow:none;
}

.sv_skill_scaling__core-pill.is-active{ background:#1a2434; }

.sv_skill_scaling__core-main{
  min-width:0;
  display:flex;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:4px;
}

.sv_skill_scaling__core-value{
  min-width:0;
  word-wrap:break-word;

  font-weight:900;
  font-size:14px;
  line-height:1.02;
  color:rgba(245,249,255,0.98);
}

.sv_skill_scaling__core-unit{
  font-weight:900;
  font-size:10px;
  line-height:1.05;
  color:rgba(182,198,224,0.95);
}

.sv_skill_scaling__core-label{
  margin-top:5px;

  font-weight:900;
  font-size:10px;
  line-height:1.10;
  letter-spacing:0.14px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv_skill_scaling__core-pill.is-inactive{
  border-color:rgba(59,75,99,0.72);
  background:#182130;
}

.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-value,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-unit,
.sv_skill_scaling__core-pill.is-inactive .sv_skill_scaling__core-label{
  color:rgba(140,156,184,0.78);
}

/* Scaling responsive (no stat pill size changes) */
@media (max-width:850px){
  .sv_skill_scaling__body{
    grid-template-columns:minmax(0, 1fr) minmax(0, 236px);
  }

  .sv_skill_scaling__primary-value{ font-size:32px; }

  .sv_skill_scaling__core-pill{
    min-height:35px;
    max-width:70px;
  }

  .sv_skill_scaling__core-value{ font-size:13px; }
  .sv_skill_scaling__core-label{ font-size:9px; }
}

@media (max-width:500px){
  .sv_skill_scaling{ padding:9px 10px 10px; }

  .sv_skill_scaling .sv-skill-level,
  .sv_skill_scaling__level{ padding:0 0 9px; }

  .sv_skill_scaling__body{
    grid-template-columns:1fr;
    row-gap:12px;
  }

  .sv_skill_scaling__column--core{
    grid-column:1;
    grid-row:2;
    width:100%;
  }

  .sv_skill_scaling__primary-value{ font-size:30px; }

  .sv_skill_scaling__core-pill{
    min-height:35px;
    max-width:70px;
    padding:7px 6px;
  }

  .sv_skill_scaling__core-value{ font-size:13px; }
  .sv_skill_scaling__core-unit{ font-size:10px; }
  .sv_skill_scaling__core-label{ font-size:9px; }
}

@media (max-width:360px){
  .sv_skill_scaling__primary-value{ font-size:28px; }

  .sv_skill_scaling__core-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   8) TAB PANELS AND CONTENT BLOCKS
   ========================================================================== */

.sv-skill-tabs{ margin:10px 0 0; }

.sv-gi-card .sv-kw-grid,
.sv-skill-card .sv-kw-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-kw-cell,
.sv-skill-card .sv-kw-cell{
  padding:10px 10px 9px;

  border-radius:14px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.sv-gi-card .sv-kw-label,
.sv-skill-card .sv-kw-label{
  font-weight:900;
  font-size:12px;
  letter-spacing:0.25px;
  text-transform:uppercase;
  color:rgba(182,198,224,0.95);
}

.sv-gi-card .sv-kw-value,
.sv-skill-card .sv-kw-value{
  margin-top:6px;
  word-wrap:break-word;

  font-weight:900;
  font-size:15px;
  color:rgba(245,249,255,0.96);
}

.sv-gi-card .sv-tab-pills,
.sv-skill-card .sv-tab-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ==========================================================================
   9) EFFECT / EVENT CARDS
   ========================================================================== */

.sv-gi-card .sv-ref-grid,
.sv-skill-card .sv-ref-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.sv-gi-card .sv-ref-card,
.sv-skill-card .sv-ref-card{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 10px;

  border-radius:16px;
  border:1px solid rgba(59,75,99,0.85);
  background:#1f2937;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  color:rgba(245,249,255,0.94);
}

.sv-gi-card .sv-ref-ico,
.sv-skill-card .sv-ref-ico{
  flex:0 0 auto;
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  border-radius:16px;
  border:1px solid rgba(75,99,136,0.55);
  background:#273449;
}

.sv-gi-card .sv-ref-text,
.sv-skill-card .sv-ref-text{
  min-width:0;
  flex:1 1 auto;
}

.sv-gi-card .sv-ref-title,
.sv-skill-card .sv-ref-title{
  word-wrap:break-word;

  font-weight:900;
  font-size:15px;
  line-height:1.15;
  color:rgba(245,249,255,0.98);
}

.sv-gi-card .sv-ref-stats,
.sv-skill-card .sv-ref-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.sv-gi-card .sv-ref-stat,
.sv-skill-card .sv-ref-stat{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;

  border-radius:999px;
  border:1px solid rgba(59,75,99,0.85);
  background:#273449;
  background-image:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);

  font-weight:900;
  font-size:12px;
  color:rgba(215,226,244,0.92);
}

.sv-gi-card .sv-ref-sub,
.sv-skill-card .sv-ref-sub{
  margin-top:6px;
  font-weight:900;
  font-size:13px;
  color:rgba(182,198,224,0.95);
}

/* ==========================================================================
   10) RESPONSIVE (card/layout)
   ========================================================================== */

@media (max-width:850px){
  .sv-gi-card,
  .sv-skill-card{
    margin:14px 10px;
    border-radius:20px;
  }

  .sv-gi-top,
  .sv-skill-top{ padding:12px 16px 4px; }

  .sv-gi-bottom,
  .sv-skill-bottom{ padding:10px 16px 12px; }

  .sv-skill-title{ font-size:20px; }

  .sv-skill-meta{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

  .sv-gi-card .sv-ref-grid,
  .sv-skill-card .sv-ref-grid{ grid-template-columns:1fr; }
}

@media (max-width:500px){
  .sv-skill-head{ gap:10px; }

  .sv-skill-icon{
    width:56px;
    height:56px;
    border-radius:14px;
  }

  .sv-skill-title{ font-size:18px; }
  .sv-skill-desc{ font-size:13px; }

  .sv-gi-card .sv-scaling-grid,
  .sv-skill-card .sv-scaling-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-kw-grid,
  .sv-skill-card .sv-kw-grid{ grid-template-columns:1fr; }

  .sv-gi-card .sv-reqrow,
  .sv-skill-card .sv-reqrow{
    padding-left:16px;
    padding-right:16px;
  }

  .sv-gi-card .sv-disclose,
  .sv-skill-card .sv-disclose{
    flex:1 1 170px;
    max-width:190px;
  }

  .sv-skill-card .sv-skill-meta,
  .sv-gi-card .sv-skill-meta{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
    max-width:200px;
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }

  .sv-skill-card .sv-meta-card,
  .sv-gi-card .sv-meta-card{
    min-height:32px;
    gap:7px;
  }

  .sv-skill-card .sv-meta-icon,
  .sv-gi-card .sv-meta-icon{
    width:16px;
    height:16px;
  }

  .sv-skill-card .sv-meta-text,
  .sv-gi-card .sv-meta-text{
    font-size:10px;
    line-height:1.05;
    letter-spacing:0;
  }

  .sv-skill-card .sv-meta-text .sv-meta-lines span + span,
  .sv-gi-card .sv-meta-text .sv-meta-lines span + span{
    margin-top:1px;
    font-size:9px;
  }

  .sv-skill-level{ padding:9px 10px; }

  .sv-gi-card .sv-level-label:not([data-sv-helper-text])::after,
  .sv-skill-card .sv-level-label:not([data-sv-helper-text])::after{ font-size:12px; }

  .sv-skill-card .sv-skill-meta .sv-pill,
  .sv-gi-card .sv-skill-meta .sv-pill{
    min-height:24px;
    gap:5px;
    font-size:10px;
    line-height:1.05;
    letter-spacing:0;
  }
}

@media (max-width:360px){
  .sv-gi-card .sv-disclose,
  .sv-skill-card .sv-disclose{
    flex:1 1 100%;
    max-width:100%;
  }
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=Module:GameInfo/styles.css&oldid=2678"
Last modified
This page was last edited on 5 March 2026, at 22:09.