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: Reverted Mobile edit Mobile web edit
Line 1: Line 1:
/* Module:GameInfo/styles.css */
/* Module:GameInfo/styles.css */
/* Phase 4.1 — Mockup Match + TemplateStyles-safe (NO var(), NO vendor pseudos) */
/* Phase 4.1 — TemplateStyles-safe (NO var(), NO vendor pseudos) */
 
/* Hide contract (shared with JS) */
.sv-hidden{display:none !important;}
[hidden]{display:none !important;}
 
/* Safe details reset */
.sv-gi-card summary,
.sv-skill-card summary{list-style:none;}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  BASE CARD + SAFETY
BASE CARD + SAFETY
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.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-radius: 22px;
border:1px solid rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.085);
background-color:#0f172a;
 
background-image:
  background-color: #0f1b33;
radial-gradient(1200px 520px at 50% -20%, rgba(96,165,250,0.18), transparent 55%),
  background-image:
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    radial-gradient(1200px 520px at 50% -20%, rgba(96,165,250,0.22), transparent 55%),
radial-gradient(900px 360px at 50% 0, rgba(255,255,255,0.05), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
linear-gradient(180deg, #0f172a, #0b1428);
    radial-gradient(900px 360px at 50% 0, rgba(255,255,255,0.06), transparent 55%),
box-shadow:0 16px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
    linear-gradient(180deg, #0f1b33, #0c162b);
overflow:visible;
 
color:rgba(215,226,244,0.95);
  box-shadow: 0 16px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
font-size:12px;
  overflow: visible;
line-height:1.35;
 
  color: rgba(235,244,255,0.92);
  font-size: 12px;
  line-height: 1.35;
}
}


.sv-gi-top,
.sv-gi-top,
.sv-skill-top {
.sv-skill-top{
  padding: 14px 14px 4px;
padding:14px 14px 4px;
  border-radius: 22px 22px 0 0;
border-radius:22px 22px 0 0;
  overflow: visible;
overflow:visible;
}
}


.sv-gi-bottom,
.sv-gi-bottom,
.sv-skill-bottom {
.sv-skill-bottom{
  padding: 10px 14px 12px;
padding:10px 14px 12px;
  border-top: 1px solid rgba(255,255,255,0.050);
border-top:1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 22px 22px;
border-radius:0 0 22px 22px;
  background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.08));
background-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.10));
}
}


Line 47: Line 51:
.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-card a,
.sv-gi-card a,
.sv-skill-card a {
.sv-skill-card a{color:#8cbcff;text-decoration:none;}
  color: rgba(170,220,255,0.95);
.sv-gi-card a:visited,
  text-decoration: none;
.sv-skill-card a:visited{color:#b0d0ff;}
}
.sv-gi-card a:hover,
.sv-gi-card a:hover,
.sv-skill-card a:hover {
.sv-skill-card a:hover{text-decoration:underline;}
  text-decoration: underline;
}
 
/* Hide contract */
.sv-hidden { display: none !important; }
[hidden] { display: none !important; }
 
/* Safe details reset (NO ::marker / NO vendor marker pseudos) */
.sv-gi-card summary,
.sv-skill-card summary {
  list-style: none;
}


/* Focus */
/* Focus (TemplateStyles-safe: use :focus only) */
.sv-tip-btn:focus,
.sv-tip-btn:focus,
.sv-disclose-btn:focus,
.sv-disclose-btn:focus,
.sv-tab:focus,
.sv-tab:focus{
.sv-level-range--custom:focus {
outline:2px solid rgba(176,208,255,0.70);
  outline: 2px solid rgba(170,220,255,0.55);
outline-offset:2px;
  outline-offset: 2px;
}
}


/* Missing icon badge */
/* Missing icon badge */
.sv-miss {
.sv-miss{
  display: inline-block;
display:inline-block;
  width: 18px;
width:18px;
  height: 18px;
height:18px;
  border-radius: 999px;
border-radius:999px;
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
background:rgba(255,255,255,0.06);
  font-weight: 900;
font-weight:900;
  font-size: 12px;
font-size:12px;
  line-height: 18px;
line-height:18px;
  text-align: center;
text-align:center;
color:rgba(245,249,255,0.95);
}
}


/* Image wrapper produced by Lua */
/* Image wrapper produced by Lua */
.sv-img { display: inline-block; }
.sv-img{display:inline-block;}
.sv-img img {
.sv-img img{
  display: block;
display:block;
  border-radius: 10px;
border-radius:10px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
box-shadow:0 10px 18px rgba(0,0,0,0.35);
}
}


Line 106: Line 95:
.sv-scaling-row,
.sv-scaling-row,
.sv-core-row,
.sv-core-row,
.sv-tabs {
.sv-tabs{
  border-radius: 12px;
border-radius:12px;
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.085);
  background: rgba(255,255,255,0.04);
background:rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  HEADER (ICON + TITLE + NOTES + DESCRIPTION)
HEADER (ICON + TITLE + NOTES + DESCRIPTION)
  - Skill icon shrunk ~25%
  - Description ~50% larger + uses full width (no early wrap)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-head {
.sv-skill-head{
  display: grid;
display:grid;
  grid-template-columns: 92px 1fr;
grid-template-columns:92px 1fr;
  gap: 12px;
gap:12px;
  align-items: start;
align-items:start;
  padding: 2px 0 10px;
padding:2px 0 10px;
}
}


.sv-skill-icon {
.sv-skill-icon{
  width: 92px;
width:92px;
  height: 92px;
height:92px;
  border-radius: 12px;
border-radius:12px;
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.085);
  background: rgba(255,255,255,0.04);
background:rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
overflow:hidden;
}
}


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


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


.sv-skill-title {
.sv-skill-title{
  min-width: 0;
min-width:0;
  font-weight: 900;
font-weight:900;
  font-size: 20px;
font-size:20px;
  line-height: 1.05;
line-height:1.05;
  letter-spacing: 0.2px;
letter-spacing:0.2px;
  color: rgba(245,250,255,0.98);
color:rgba(245,250,255,0.98);
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
text-shadow:0 2px 0 rgba(0,0,0,0.35);
  word-wrap: break-word;
word-wrap:break-word;
}
}


.sv-skill-desc {
.sv-skill-desc{
  margin-top: 8px;
margin-top:8px;
  max-width: none;
max-width:none;
  width: 100%;
width:100%;
  font-size: 18px;
font-size:18px;
  line-height: 1.30;
line-height:1.30;
  color: rgba(210,224,245,0.86);
color:rgba(182,198,224,0.98);
  word-wrap: break-word;
word-wrap:break-word;
}
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  NOTES TIP (works with <details> OR span-button markup)
NOTES TIP + DISCLOSE POPOVERS
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-tip { position: relative; display: inline-block; }
.sv-tip{position:relative;display:inline-block;}
.sv-tip > summary { cursor: pointer; }
.sv-tip > summary{cursor:pointer;}


.sv-tip-btn {
.sv-tip-btn{
  display: inline-block;
display:inline-block;
  width: 30px;
width:30px;
  height: 30px;
height:30px;
  border-radius: 999px;
border-radius:999px;
  background: rgba(255,255,255,0.10);
background:rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  text-align: center;
text-align:center;
  line-height: 30px;
line-height:30px;
  cursor: pointer;
cursor:pointer;
}
}
 
.sv-tip-btn:hover{background:rgba(255,255,255,0.13);}
.sv-tip-btn:hover { background: rgba(255,255,255,0.13); }


.sv-ico,
.sv-ico,
.sv-ico--info {
.sv-ico--info{
  font-weight: 900;
font-weight:900;
  font-size: 12px;
font-size:12px;
  line-height: 1;
line-height:1;
  color: rgba(245,250,255,0.95);
color:rgba(245,250,255,0.95);
}
}


/* Popovers (fixed width + percent max-width; NO min()/calc()/vw) */
.sv-tip-pop,
.sv-tip-pop,
.sv-disclose-pop {
.sv-disclose-pop{
  position: absolute;
position:absolute;
  z-index: 200;
z-index:200;
  padding: 10px 10px 8px;
padding:10px 10px 8px;
 
border-radius:12px;
  border-radius: 12px;
border:1px solid rgba(255,255,255,0.085);
  border: 1px solid rgba(255,255,255,0.050);
background:
  background:
radial-gradient(700px 260px at 40% 0, rgba(96,165,250,0.10), transparent 55%),
    radial-gradient(700px 260px at 40% 0, rgba(96,165,250,0.12), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
linear-gradient(180deg, #0f172a, #0b1428);
    linear-gradient(180deg, #0b1428, #0a1326);
box-shadow:0 16px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
width:380px;
 
max-width:92%;
  width: 380px;
  max-width: 92%;
}
}


.sv-tip-pop { top: 40px; right: 0; }
.sv-tip-pop{top:40px;right:0;}
.sv-disclose-pop { top: 46px; left: 0; }
.sv-disclose-pop{top:46px;left:0;}


.sv-tip-pop:before,
.sv-tip-pop:before,
.sv-disclose-pop:before {
.sv-disclose-pop:before{
  content: "";
content:"";
  position: absolute;
position:absolute;
  top: -6px;
top:-6px;
  width: 11px;
width:11px;
  height: 11px;
height:11px;
  transform: rotate(45deg);
transform:rotate(45deg);
  background: rgba(18,28,52,0.98);
background:#0f172a;
  border-left: 1px solid rgba(255,255,255,0.050);
border-left:1px solid rgba(255,255,255,0.085);
  border-top: 1px solid rgba(255,255,255,0.050);
border-top:1px solid rgba(255,255,255,0.085);
}
}
.sv-tip-pop:before { right: 14px; }
.sv-tip-pop:before{right:14px;}
.sv-disclose-pop:before { left: 20px; }
.sv-disclose-pop:before{left:20px;}


.sv-tip-pop-head,
.sv-tip-pop-head,
.sv-disclose-pop-head {
.sv-disclose-pop-head{
  display: flex;
display:flex;
  align-items: center;
align-items:center;
  justify-content: space-between;
justify-content:space-between;
  gap: 10px;
gap:10px;
  margin-bottom: 6px;
margin-bottom:6px;
}
}


.sv-tip-pop-title,
.sv-tip-pop-title,
.sv-disclose-pop-title {
.sv-disclose-pop-title{
  font-weight: 900;
font-weight:900;
  font-size: 12px;
font-size:12px;
  letter-spacing: 0.10em;
letter-spacing:0.10em;
  text-transform: uppercase;
text-transform:uppercase;
  color: rgba(255,255,255,0.62);
color:rgba(245,249,255,0.70);
}
}


.sv-tip-pop-hint,
.sv-tip-pop-hint,
.sv-disclose-pop-hint {
.sv-disclose-pop-hint{
  font-size: 12px;
font-size:12px;
  color: rgba(255,255,255,0.50);
color:rgba(215,226,244,0.78);
}
}


.sv-tip-pop-body {
.sv-tip-pop-body{
  color: rgba(255,255,255,0.82);
color:rgba(215,226,244,0.95);
  font-size: 12px;
font-size:12px;
  line-height: 1.35;
line-height:1.35;
}
}
.sv-tip-pop-body ul { margin: 8px 0 0; padding-left: 18px; }
.sv-tip-pop-body ul{margin:8px 0 0;padding-left:18px;}
.sv-tip-pop-body li { margin: 6px 0; }
.sv-tip-pop-body li{margin:6px 0;}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  META (SEGMENTED STRIP)
META (SEGMENTED STRIP)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-meta {
.sv-skill-meta{
  margin-top: 10px;
margin-top:10px;
  display: grid;
display:grid;
  grid-template-columns: repeat(4, 1fr);
grid-template-columns:repeat(4, 1fr);
  gap: 0;
gap:0;
  border-top: 1px solid rgba(255,255,255,0.050);
border-top:1px solid rgba(255,255,255,0.085);
  border-bottom: 1px solid rgba(255,255,255,0.050);
border-bottom:1px solid rgba(255,255,255,0.085);
}
}


.sv-meta-card {
.sv-meta-card{
  min-height: 52px;
min-height:52px;
  display: grid;
display:grid;
  grid-template-columns: 40px 1fr;
grid-template-columns:40px 1fr;
  align-items: center;
align-items:center;
  padding: 5px 6px;
padding:5px 6px;
  border-right: 1px solid rgba(255,255,255,0.050);
border-right:1px solid rgba(255,255,255,0.085);
}
}
.sv-meta-card:nth-child(4) { border-right: none; }
.sv-meta-card:nth-child(4){border-right:none;}


.sv-meta-icon {
.sv-meta-icon{
  width: 34px;
width:34px;
  height: 34px;
height:34px;
  border-radius: 10px;
border-radius:10px;
  background: rgba(255,255,255,0.04);
background:rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.085);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
overflow:hidden;
}
}


.sv-meta-textwrap {
.sv-meta-textwrap{
  display: flex;
display:flex;
  align-items: center;
align-items:center;
  justify-content: center;
justify-content:center;
  min-width: 0;
min-width:0;
}
}


.sv-meta-text {
.sv-meta-text{
  font-weight: 700;
font-weight:700;
  font-size: 12px;
font-size:12px;
  line-height: 1.12;
line-height:1.12;
  letter-spacing: 0.14px;
letter-spacing:0.14px;
  color: rgba(235,244,255,0.92);
color:rgba(215,226,244,0.95);
  text-align: center;
text-align:center;
  word-wrap: break-word;
word-wrap:break-word;
}
}


.sv-meta-lines span { display: block; }
.sv-meta-lines span{display:block;}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  REQUIREMENTS / USERS (COMPACT, CENTERED, SHRINK-TO-FIT)
REQUIREMENTS / USERS
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-reqrow {
.sv-reqrow{
  margin: 6px 0;
margin:6px 0;
  display: flex;
display:flex;
  justify-content: center;
justify-content:center;
  align-items: center;
align-items:center;
  gap: 10px;
gap:10px;
}
 
.sv-reqrow > * {
  flex: 0 1 140px;
  max-width: 140px;
  min-width: 0;
}
}


.sv-reqrow > *:only-child {
.sv-reqrow > *{flex:0 1 140px;max-width:140px;min-width:0;}
  flex: 0 1 280px;
.sv-reqrow > *:only-child{flex:0 1 280px;max-width:280px;}
  max-width: 280px;
}


.sv-disclose { position: relative; }
.sv-disclose{position:relative;}
.sv-disclose > summary { cursor: pointer; }
.sv-disclose > summary{cursor:pointer;}


.sv-disclose > summary,
.sv-disclose > summary,
.sv-disclose-btn {
.sv-disclose-btn{
  width: 100%;
width:100%;
  padding: 6px 8px;
padding:6px 8px;
  border-radius: 12px;
border-radius:12px;
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.085);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  display: flex;
display:flex;
  align-items: center;
align-items:center;
  justify-content: center;
justify-content:center;
  gap: 6px;
gap:6px;
  text-align: center;
text-align:center;
  color: rgba(235,244,255,0.92);
color:rgba(215,226,244,0.95);
  font-weight: 700;
font-weight:800;
  font-size: 12px;
font-size:12px;
  letter-spacing: 0.2px;
letter-spacing:0.2px;
}
}


.sv-disclose-count {
.sv-disclose-count{
  color: rgba(255,255,255,0.70);
color:rgba(245,249,255,0.75);
  font-weight: 900;
font-weight:900;
  font-size: 12px;
font-size:12px;
}
}


/* Requirements/Users list */
.sv-disclose-list{
.sv-disclose-list {
margin:0;
  margin: 0;
padding-left:18px;
  padding-left: 18px;
color:rgba(215,226,244,0.95);
  color: rgba(255,255,255,0.82);
font-size:12px;
  font-size: 12px;
line-height:1.35;
  line-height: 1.35;
}
}
.sv-disclose-list li { margin: 6px 0; }
.sv-disclose-list li{margin:6px 0;}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  LEVEL + SCALING + CORE (ONE GROUPED BUBBLE)
LEVEL + SCALING + CORE
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-level {
.sv-skill-level{
  margin-top: 10px;
margin-top:10px;
  padding: 6px 10px 6px;
padding:6px 10px 6px;
  border-radius: 12px 12px 0 0;
border-radius:12px 12px 0 0;
  border-bottom: 0;
border-bottom:0;
}
 
.sv-skill-scaling { margin-top: 0; }
.sv-skill-core { margin-top: 0; }
 
.sv-scaling-row {
  border-radius: 0;
  border-top: 0;
  border-bottom: 0;
}
 
.sv-core-row {
  border-radius: 0 0 12px 12px;
  border-top: 0;
}
 
.sv-level-ui {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
 
.sv-level-label {
  width: 100%;
  text-align: center;
  font-weight: 800;
  opacity: 0.95;
  font-size: 14px;
  white-space: nowrap;
}
}


.sv-level-label br { display: none; }
.sv-skill-scaling{margin-top:0;}
 
.sv-skill-core{margin-top:0;}
.sv-level-label span,
.sv-level-label b,
.sv-level-label strong,
.sv-level-label em,
.sv-level-label i {
  display: inline;
  white-space: nowrap;
}


.sv-level-slider {
.sv-scaling-row{border-radius:0;border-top:0;border-bottom:0;}
  width: 100%;
.sv-core-row{border-radius:0 0 12px 12px;border-top:0;}
  display: flex;
  justify-content: center;
}


/* Slider + Optional “additional controls” support:
.sv-level-ui{
  - supports a native <input type="range"> if present
width:100%;
  - supports optional +/- buttons if Lua/JS emits them
display:flex;
  - keeps the custom track/thumb version working */
flex-direction:column;
.sv-level-controls {
gap:4px;
  width: 100%;
align-items:center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
}


.sv-level-step {
.sv-level-label{
  width: 34px;
width:100%;
  height: 26px;
text-align:center;
  border-radius: 10px;
font-weight:800;
  border: 1px solid rgba(255,255,255,0.060);
opacity:0.95;
  background: rgba(255,255,255,0.06);
font-size:14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
white-space:nowrap;
  color: rgba(235,244,255,0.92);
  font-weight: 900;
  font-size: 14px;
  line-height: 26px;
  text-align: center;
  cursor: pointer;
}
}
.sv-level-label br{display:none;}


.sv-level-step:hover { background: rgba(255,255,255,0.09); }
.sv-level-slider{
 
width:100%;
.sv-level-range {
display:flex;
  width: 100%;
justify-content:center;
  max-width: 560px;
}
}


.sv-level-range input[type="range"] {
.sv-level-range--custom{
  width: 100%;
display:block;
  margin: 0;
position:relative;
  background: transparent;
width:100%;
max-width:560px;
margin:0 auto;
height:22px;
border-radius:999px;
border:0;
background:transparent;
cursor:pointer;
user-select:none;
}
}


.sv-level-range--custom {
/* keep slider click highlight off */
  display: block;
.sv-level-range--custom:focus{outline:none;}
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
 
  height: 22px;
  border-radius: 999px;
 
  border: 0;
  background: transparent;
  cursor: pointer;
}


.sv-level-track {
.sv-level-track{
  position: absolute;
position:absolute;
  left: 0;
left:0;
  right: 0;
right:0;
  top: 50%;
top:50%;
  margin-top: -5px;
margin-top:-5px;
  height: 10px;
height:10px;
  border-radius: 999px;
border-radius:999px;
  border: 1px solid rgba(255,255,255,0.050);
border:1px solid rgba(255,255,255,0.085);
  background:
background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)),
    repeating-linear-gradient(
repeating-linear-gradient(to right, transparent 0, transparent 10.8%, rgba(255,255,255,0.28) 10.8%, rgba(255,255,255,0.28) 11.11%);
      to right,
overflow:hidden;
      transparent 0,
user-select:none;
      transparent 10.8%,
      rgba(255,255,255,0.28) 10.8%,
      rgba(255,255,255,0.28) 11.11%
    );
  overflow: hidden;
}
}


.sv-level-fill {
.sv-level-fill{
  display: block;
display:block;
  height: 100%;
height:100%;
  width: 0%;
width:0%;
  border-radius: 999px;
border-radius:999px;
  background: linear-gradient(90deg, rgba(170,220,255,0.35), rgba(255,255,255,0.12));
background:linear-gradient(90deg, rgba(140,188,255,0.45), rgba(245,249,255,0.12));
user-select:none;
}
}


.sv-level-thumb {
.sv-level-thumb{
  position: absolute;
position:absolute;
  left: 0%;
left:0%;
  top: 50%;
top:50%;
  margin-top: -9px;
margin-top:-9px;
  margin-left: -9px;
margin-left:-9px;
  width: 18px;
width:18px;
  height: 18px;
height:18px;
  border-radius: 999px;
border-radius:999px;
  background: rgba(255,255,255,0.92);
background:rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.35);
border:1px solid rgba(0,0,0,0.35);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
box-shadow:0 6px 14px rgba(0,0,0,0.35);
user-select:none;
}
}


.sv-level-ticklabels {
.sv-level-ticklabels{
  display: flex;
display:flex;
  justify-content: space-between;
justify-content:space-between;
  margin-top: 4px;
margin-top:4px;
  padding: 0 2px;
padding:0 2px;
 
width:100%;
  width: 100%;
max-width:560px;
  max-width: 560px;
margin-left:auto;
  margin-left: auto;
margin-right:auto;
  margin-right: auto;
font-size:12px;
 
color:rgba(245,249,255,0.70);
  font-size: 12px;
font-weight:800;
  color: rgba(255,255,255,0.65);
line-height:1.1;
  font-weight: 800;
user-select:none;
  line-height: 1.1;
}
}
.sv-level-ticklabels span { min-width: 1ch; text-align: center; }
.sv-level-ticklabels span{min-width:1ch;text-align:center;}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  SKILL SCALING
TABS (safety: panels visible unless [hidden])
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-scaling-row { overflow: hidden; }
.sv-skill-tabs{margin-top:10px;}
 
.sv-tabs{overflow:hidden;}
.sv-scaling-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  gap: 0;
}


.sv-scaling-col {
.sv-tabs-list{
  padding: 10px 10px 8px;
display:grid;
  min-width: 0;
grid-template-columns:repeat(4, 1fr);
}
gap:0;
.sv-scaling-col + .sv-scaling-col {
border-bottom:1px solid rgba(255,255,255,0.085);
  border-left: 1px solid rgba(255,255,255,0.050);
}
}


.sv-scaling-value {
.sv-tab{
  font-weight: 800;
border:0;
  font-size: 15px;
margin:0;
  line-height: 1.05;
padding:10px 8px;
  color: rgba(235,244,255,0.92);
background:transparent;
  text-align: center;
color:rgba(245,249,255,0.78);
  word-wrap: break-word;
font-weight:900;
font-size:12px;
letter-spacing:0.06em;
text-transform:uppercase;
cursor:pointer;
line-height:1.05;
min-width:0;
text-align:center;
white-space:nowrap;
overflow:hidden;
}
}
.sv-tab + .sv-tab{border-left:1px solid rgba(255,255,255,0.085);}


.sv-scaling-label {
.sv-tab[aria-selected="true"]{
  margin-top: 4px;
color:rgba(245,249,255,0.98);
  font-weight: 800;
background:
  font-size: 12px;
radial-gradient(600px 220px at 50% 0, rgba(96,165,250,0.14), transparent 60%),
  letter-spacing: 0.12em;
linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  text-transform: uppercase;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.62);
  text-align: center;
}
}


.sv-scaling-list { display: grid; gap: 4px; }
.sv-tabs-panels{padding:10px 10px 12px;}
.sv-scaling-item {
.sv-tabpanel{display:block;}
  font-weight: 800;
.sv-tabpanel[hidden]{display:none;}
  font-size: 12px;
.sv-tabpanel.sv-hidden{display:none;}
  line-height: 1.15;
  color: rgba(255,255,255,0.82);
  text-align: center;
  word-wrap: break-word;
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  CORE STATS
KEYWORDS TAB (scoped pill to avoid Common.css collisions)
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-core-row { overflow: hidden; }
.sv-tab-pills{
 
display:grid;
.sv-core-grid {
grid-template-columns:repeat(3, 1fr);
  display: grid;
gap:8px;
  grid-template-columns: 1fr 1.25fr 1.25fr 1fr 1fr 1.25fr;
justify-content:center;
  gap: 0;
}
 
.sv-core-cell {
  padding: 5px;
  min-width: 0;
  overflow: hidden;
}
.sv-core-cell + .sv-core-cell {
  border-left: 1px solid rgba(255,255,255,0.050);
}
}


.sv-core-top {
.sv-tab-pills .sv-pill{
  display: flex;
display:flex;
  align-items: baseline;
align-items:center;
  justify-content: center;
justify-content:center;
  gap: 6px;
gap:8px;
padding:6px 8px;
border-radius:12px;
border:1px solid rgba(255,255,255,0.085);
background:rgba(255,255,255,0.03);
color:rgba(245,249,255,0.98);
font-weight:900;
font-size:15px;
line-height:1.05;
text-align:center;
white-space:normal;
word-wrap:break-word;
}
}
.sv-core-num {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.05;
  color: rgba(235,244,255,0.92);
  word-wrap: break-word;
}
.sv-core-unit {
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.02em;
}
.sv-core-label {
  margin-top: 4px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
}
.sv-core-label--tight { letter-spacing: 0.03em; }


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
  TABS
RESPONSIVE
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


.sv-skill-tabs { margin-top: 10px; }
@media (max-width:849px){
.sv-tabs { overflow: hidden; }
.sv-gi-card,
 
.sv-skill-card{margin:14px 10px;border-radius:20px;}
.sv-tabs-list {
.sv-gi-top,
  display: grid;
.sv-skill-top{padding:12px 12px 4px;border-radius:20px 20px 0 0;}
  grid-template-columns: repeat(4, 1fr);
.sv-gi-bottom,
  gap: 0;
.sv-skill-bottom{padding:10px 12px 12px;border-radius:0 0 20px 20px;}
  border-bottom: 1px solid rgba(255,255,255,0.050);
.sv-skill-head{grid-template-columns:84px 1fr;gap:12px;}
.sv-skill-icon{width:84px;height:84px;border-radius:12px;}
.sv-skill-desc{font-size:17px;}
.sv-skill-meta{grid-template-columns:repeat(2, 1fr);}
.sv-meta-card{border-right:1px solid rgba(255,255,255,0.085);border-bottom:1px solid rgba(255,255,255,0.085);}
.sv-meta-card:nth-child(2),
.sv-meta-card:nth-child(4){border-right:none;}
.sv-meta-card:nth-child(3),
.sv-meta-card:nth-child(4){border-bottom:none;}
.sv-tab{padding:8px 6px;}
.sv-tabs-panels{padding:9px 9px 10px;}
.sv-level-range--custom,
.sv-level-ticklabels{max-width:520px;}
}
}


.sv-tab {
@media (max-width:500px){
  border: 0;
.sv-skill-card,
  margin: 0;
.sv-gi-card{
  padding: 10px 8px;
background-color:#1f2937 !important;
 
background-image:none !important;
  background: transparent;
border:1px solid #4b6388 !important;
  color: rgba(255,255,255,0.78);
box-shadow:0 16px 34px rgba(0,0,0,0.70) !important;
 
color:#f5f9ff !important;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
 
  cursor: pointer;
  line-height: 1.05;
 
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
}
 
.sv-skill-level,
.sv-tab + .sv-tab { border-left: 1px solid rgba(255,255,255,0.050); }
.sv-scaling-row,
 
.sv-core-row,
.sv-tab[aria-selected="true"] {
.sv-tabs,
  color: rgba(235,244,255,0.92);
.sv-tab-pills .sv-pill,
  background:
.sv-disclose > summary,
    radial-gradient(600px 220px at 50% 0, rgba(96,165,250,0.14), transparent 60%),
.sv-disclose-btn,
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
.sv-meta-card,
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
.sv-meta-icon{
background:#273449 !important;
border:1px solid #4b6388 !important;
box-shadow:none !important;
}
}
 
.sv-tabs-list,
.sv-tabs-panels { padding: 10px 10px 12px; }
.sv-tab + .sv-tab,
.sv-tabpanel { display: none; }
.sv-meta-card{border-color:#4b6388 !important;}
.sv-tabpanel[data-active="1"] { display: block; }
.sv-tab{background:#2e3f59 !important;color:#f5f9ff !important;}
 
.sv-tab[aria-selected="true"]{background:#364a69 !important;color:#ffffff !important;box-shadow:none !important;}
/* ----------------------------------------------------------------------------
.sv-level-track{border:1px solid #5f7fb4 !important;background:#364a69 !important;}
  KEYWORDS TAB (Mechanics-style bubbles + 3-col)
.sv-level-fill{background:#8cbcff !important;}
---------------------------------------------------------------------------- */
.sv-level-thumb{background:#ffffff !important;border:1px solid #0a0f18 !important;box-shadow:none !important;}
 
.sv-level-ticklabels{color:#f5f9ff !important;}
.sv-tab-pills {
.sv-skill-head{grid-template-columns:68px 1fr;gap:10px;}
  display: grid;
.sv-skill-icon{width:68px;height:68px;border-radius:12px;}
  grid-template-columns: repeat(3, 1fr);
.sv-skill-title{font-size:18px;}
  gap: 8px;
.sv-skill-desc{font-size:15px;line-height:1.28;}
  justify-content: center;
.sv-tabs-list{grid-template-columns:repeat(2, 1fr);}
}
.sv-tab:nth-child(n+3){border-top:1px solid #4b6388 !important;}
 
.sv-tab-pills{grid-template-columns:repeat(2, 1fr);}
.sv-pill {
.sv-tab-pills .sv-pill{font-size:14px;}
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
 
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.050);
  background: rgba(255,255,255,0.03);
 
  color: rgba(235,244,255,0.92);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.05;
 
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
}
 
/* ----------------------------------------------------------------------------
  MECHANICS GRID (value-on-top like Core) + ~20% shorter tiles
---------------------------------------------------------------------------- */
 
.sv-kw-root { display: grid; gap: 10px; }
 
.sv-kw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
 
.sv-kw-cell {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.050);
  background: rgba(255,255,255,0.03);
  padding: 6px 8px 6px;
  min-width: 0;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
 
.sv-kw-label {
  order: 2;
 
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  text-align: center;
  line-height: 1.05;
 
  white-space: nowrap;
  overflow: hidden;
}
 
.sv-kw-value {
  order: 1;
 
  margin-top: 0;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.05;
 
  color: rgba(235,244,255,0.92);
  text-align: center;
  word-wrap: break-word;
}
 
/* ----------------------------------------------------------------------------
  EFFECTS / EVENTS (CARD GRID)
---------------------------------------------------------------------------- */
 
.sv-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
 
.sv-ref-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
 
  padding: 12px 12px 11px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.050);
  background: rgba(255,255,255,0.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
 
  min-height: 86px;
  color: rgba(235,244,255,0.92);
  text-decoration: none;
}
 
.sv-ref-card:hover { background: rgba(255,255,255,0.045); }
 
.sv-ref-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.050);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
 
.sv-ref-text { min-width: 0; }
 
.sv-ref-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
 
.sv-ref-title {
  font-weight: 900;
  font-size: 12px;
  line-height: 1.05;
  word-wrap: break-word;
}
 
.sv-ref-inline {
  font-weight: 900;
  font-size: 12px;
  line-height: 1.05;
  color: rgba(235,244,255,0.92);
  white-space: nowrap;
}
 
.sv-ref-title-row--stacked {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
}
.sv-ref-title-row--stacked .sv-ref-inline {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
 
.sv-ref-stats {
  margin-top: 6px;
  display: flex;
  justify-content: space-evenly;
  gap: 14px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(235,244,255,0.92);
}
.sv-ref-stat { white-space: nowrap; }
 
.sv-ref-pop { display: none; }
.sv-ref-card:hover .sv-ref-pop { display: block; }
 
/* ----------------------------------------------------------------------------
  RESPONSIVE (Project Standard)
  Desktop: > 850
  Tablet:  849–501
  Mobile:  <= 500
---------------------------------------------------------------------------- */
 
/* Tablet */
@media (max-width: 849px) {
  .sv-gi-card,
  .sv-skill-card {
    margin: 14px 10px;
    border-radius: 20px;
  }
 
  .sv-gi-top,
  .sv-skill-top {
    padding: 12px 12px 4px;
    border-radius: 20px 20px 0 0;
  }
 
  .sv-gi-bottom,
  .sv-skill-bottom {
    padding: 10px 12px 12px;
    border-radius: 0 0 20px 20px;
  }
 
  /* Header icon shrinks slightly for tablet */
  .sv-skill-head {
    grid-template-columns: 84px 1fr;
    gap: 12px;
  }
  .sv-skill-icon {
    width: 84px;
    height: 84px;
    border-radius: 12px;
  }
  .sv-skill-desc {
    font-size: 17px;
  }
 
  /* Meta becomes 2x2 segmented */
  .sv-skill-meta { grid-template-columns: repeat(2, 1fr); }
 
  .sv-meta-card {
    border-right: 1px solid rgba(255,255,255,0.050);
    border-bottom: 1px solid rgba(255,255,255,0.050);
  }
  .sv-meta-card:nth-child(2),
  .sv-meta-card:nth-child(4) { border-right: none; }
  .sv-meta-card:nth-child(3),
  .sv-meta-card:nth-child(4) { border-bottom: none; }
 
  .sv-tab { padding: 8px 6px; }
  .sv-tabs-panels { padding: 9px 9px 10px; }
 
  /* Keep level slider full-width even on tablet */
  .sv-level-range--custom,
  .sv-level-ticklabels {
    max-width: 520px;
  }
}
 
/* Mobile */
@media (max-width: 500px) {
 
  /* ========================================================================
    MOBILE: NO TRANSPARENCY (SOLID COLORS ONLY)
    - Card slightly brighter than before
    - ALL bubbles/panels standardized to the same solid surface
    - Dividers/gridlines solid + visible
    - Tabs more visible
    ======================================================================== */
 
  /* Card background (solid) */
  .sv-skill-card,
  .sv-gi-card {
    background-color: #162a4e !important;
    background-image: none !important;
 
    border: 1px solid #3f587a !important;
    box-shadow: 0 16px 34px #000000 !important;
 
    color: #f5faff !important;
  }
 
  /* Standard surface for EVERY box/bubble/panel */
  .sv-skill-level,
  .sv-scaling-row,
  .sv-core-row,
  .sv-tabs,
  .sv-kw-cell,
  .sv-pill,
  .sv-ref-card,
  .sv-disclose > summary,
  .sv-disclose-btn,
  .sv-meta-card,
  .sv-meta-icon {
    background: #3a5476 !important;      /* ONE standardized surface color */
    border: 1px solid #556f92 !important; /* ONE standardized border color */
    box-shadow: none !important;
  }
 
  /* Dividers / gridlines (solid) */
  .sv-skill-meta,
  .sv-scaling-col + .sv-scaling-col,
  .sv-core-cell + .sv-core-cell,
  .sv-tabs-list,
  .sv-tab + .sv-tab,
  .sv-meta-card,
  .sv-core-cell,
  .sv-scaling-col {
    border-color: #506a8d !important;
  }
 
  /* Tabs: visible by default + stronger selected */
  .sv-tab {
    background: #355170 !important;
    color: #f8fbff !important;
  }
 
  .sv-tab[aria-selected="true"] {
    background: #4a6a8e !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
 
  /* Secondary label tone (solid) */
  .sv-scaling-label,
  .sv-core-label,
  .sv-kw-label,
  .sv-tip-pop-title,
  .sv-disclose-pop-title {
    color: #e6eef8 !important;
  }
 
  /* Slider: brighten everything (solid) */
  .sv-level-range--custom {
    background: none !important;
    border: 0 !important;
  }
 
  .sv-level-track {
    border: 1px solid #6b86aa !important;
    background: #4a6a8e !important; /* solid track */
  }
 
  .sv-level-fill {
    background: #8fd3ff !important; /* solid fill */
  }
 
  .sv-level-thumb {
    background: #ffffff !important;
    border: 1px solid #0a0f18 !important;
    box-shadow: none !important;
  }
 
  .sv-level-ticklabels {
    color: #eaf2fb !important;
  }
 
  /* ------------------------------------------------------------------------
    KEEP YOUR EXISTING MOBILE LAYOUT RULES (structure)
    ------------------------------------------------------------------------ */
 
  .sv-skill-head { grid-template-columns: 68px 1fr; gap: 10px; }
  .sv-skill-icon { width: 68px; height: 68px; border-radius: 12px; }
 
  .sv-skill-title { font-size: 18px; }
  .sv-skill-desc { font-size: 15px; line-height: 1.28; }
 
  .sv-skill-title-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
  }
 
  .sv-meta-card { min-height: 44px; padding: 4px 6px; }
  .sv-meta-icon { width: 28px; height: 28px; border-radius: 9px; }
  .sv-meta-text { font-size: 12px; line-height: 1.10; }
 
  .sv-reqrow { gap: 8px; }
  .sv-reqrow > * { flex: 0 1 120px; max-width: 120px; }
  .sv-reqrow > *:only-child { flex: 0 1 240px; max-width: 240px; }
 
  .sv-disclose-pop { left: auto; right: 0; max-width: 92%; }
 
  .sv-level-label { font-size: 13px; }
  .sv-level-range--custom { height: 22px; }
 
  .sv-level-track { left: 8px; right: 8px; }
 
  .sv-level-thumb {
    width: 16px;
    height: 16px;
    margin-top: -8px;
    margin-left: -8px;
  }
 
  .sv-scaling-grid { grid-template-columns: 1fr 1fr; }
 
  .sv-scaling-col--damage {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid #506a8d;
  }
 
  .sv-scaling-col--modifier {
    grid-column: 1;
    grid-row: 2;
    border-top: 1px solid #506a8d;
    border-right: 1px solid #506a8d;
  }
 
  .sv-scaling-col--scaling {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 
  .sv-core-grid { grid-template-columns: repeat(3, 1fr); }
 
  .sv-core-cell { border-left: 0; border-top: 1px solid #506a8d; }
  .sv-core-cell:nth-child(-n+3) { border-top: 0; }
  .sv-core-cell:nth-child(3n+2),
  .sv-core-cell:nth-child(3n+3) { border-left: 1px solid #506a8d; }
 
  .sv-tabs-list { grid-template-columns: repeat(2, 1fr); }
 
  .sv-tab { padding: 9px 6px; }
  .sv-tab + .sv-tab { border-left: 1px solid #506a8d; }
  .sv-tab:nth-child(2n+1) { border-left: 0; }
  .sv-tab:nth-child(n+3) { border-top: 1px solid #506a8d; }
 
  .sv-kw-grid { grid-template-columns: repeat(2, 1fr); }
 
  .sv-tab-pills { grid-template-columns: repeat(2, 1fr); }
  .sv-pill { font-size: 14px; }
 
  .sv-ref-grid { grid-template-columns: 1fr; }
  .sv-ref-card { grid-template-columns: 52px 1fr; }
  .sv-ref-ico { width: 52px; height: 52px; border-radius: 13px; }
 
  .sv-level-range--custom,
  .sv-level-ticklabels { max-width: 100%; }
}
 
 
/* --------------------------------------------------------------------------
  PATCH: Level selector final lockdown (wins even if markup uses spans/inline)
--------------------------------------------------------------------------- */
 
.sv-skill-card .sv-skill-level,
.sv-skill-card .sv-level-ui,
.sv-skill-card .sv-level-controls,
.sv-skill-card .sv-level-range,
.sv-skill-card .sv-level-slider,
.sv-skill-card .sv-level-range--custom,
.sv-skill-card .sv-level-ticklabels {
  width: 100% !important;
}
 
.sv-skill-card .sv-level-slider {
  display: block !important;
}
 
.sv-skill-card .sv-level-range--custom {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
 
.sv-skill-card .sv-level-label {
  white-space: nowrap !important;
}
 
.sv-skill-card .sv-level-label br {
  display: none !important;
}
 
.sv-skill-card .sv-level-label span,
.sv-skill-card .sv-level-label b,
.sv-skill-card .sv-level-label strong,
.sv-skill-card .sv-level-label em,
.sv-skill-card .sv-level-label i {
  display: inline !important;
  white-space: nowrap !important;
}
 
/* --------------------------------------------------------------------------
  PATCH: Remove click highlight on the level scale
--------------------------------------------------------------------------- */
 
.sv-level-range--custom:focus {
  outline: none;
}
 
.sv-level-range--custom,
.sv-level-range--custom,
.sv-level-track,
.sv-level-ticklabels{max-width:100%;}
.sv-level-fill,
.sv-level-thumb,
.sv-level-ticklabels {
  user-select: none;
}
}
Retrieved from "https://spiritvale.info/wiki/Module:GameInfo/styles.css"