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
No edit summary
Line 45: Line 45:
/* Predictable sizing */
/* Predictable sizing */
.sv-gi-card,
.sv-gi-card,
.sv-gi-card * ,
.sv-gi-card *,
.sv-skill-card,
.sv-skill-card,
.sv-skill-card * {
.sv-skill-card * {
Line 72: Line 72:


/* IMPORTANT: Phase 4.1 hiding contract */
/* IMPORTANT: Phase 4.1 hiding contract */
.sv-hidden {
.sv-hidden { display: none !important; }
   display: none !important;
[hidden]   { display: none !important; }
}
 
/* Most MW skins also hide [hidden], but make it explicit */
/* Remove default details marker (safe even if no <details> used) */
[hidden] {
.sv-gi-card summary,
   display: none !important;
.sv-skill-card summary {
   list-style: none;
}
}


Line 205: Line 206:
   cursor: pointer;
   cursor: pointer;
}
}
.sv-tip-btn:hover { background: rgba(255,255,255,0.06); }


.sv-tip-btn:hover {
/* Optional “active” feel */
   background: rgba(255,255,255,0.06);
.sv-tip-btn[aria-expanded="true"],
.sv-disclose-btn[aria-expanded="true"] {
   background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
}
}


Line 227: Line 232:
}
}


/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-tip-pop {
.sv-tip-pop {
  display: block;
   position: absolute;
   position: absolute;
   z-index: 50;
   z-index: 50;
Line 256: Line 263:
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);


   cursor: pointer; /* JS: click head to close */
   cursor: pointer;
}
}


Line 334: Line 341:
}
}


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


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 370: Line 375:
   color: rgba(235,244,255,0.92);
   color: rgba(235,244,255,0.92);
}
}
 
.sv-disclose-btn:hover { background: rgba(255,255,255,0.05); }
.sv-disclose-btn:hover {
  background: rgba(255,255,255,0.05);
}


.sv-disclose-label {
.sv-disclose-label {
Line 388: Line 390:
}
}


/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-disclose-pop {
.sv-disclose-pop {
  display: block;
   position: absolute;
   position: absolute;
   z-index: 50;
   z-index: 50;
Line 417: Line 421:
   background: rgba(255,255,255,0.03);
   background: rgba(255,255,255,0.03);


   cursor: pointer; /* JS: click head to close */
   cursor: pointer;
}
}


Line 487: Line 491:
}
}


.sv-level-slider {
.sv-level-slider { position: relative; }
  position: relative;
}


.sv-level-range {
.sv-level-range {
Line 495: Line 497:
   margin: 0;
   margin: 0;
}
}
/* Custom slider (no <input>) */
.sv-level-range--custom {
  display: block;
  position: relative;
  width: 100%;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.12);
}
.sv-level-track {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
}
.sv-level-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(170,220,255,0.55);
}
.sv-level-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(245,250,255,0.95);
  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 548: Line 502:
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


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


.sv-scaling-row {
.sv-scaling-row {
Line 566: Line 518:
}
}


.sv-scaling-col--scaling {
.sv-scaling-col--scaling { grid-column: 1 / -1; }
  grid-column: 1 / -1;
}


.sv-scaling-value {
.sv-scaling-value {
Line 607: Line 557:
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


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


.sv-core-row {
.sv-core-row {
Line 662: Line 610:
   color: rgba(210,224,245,0.65);
   color: rgba(210,224,245,0.65);
}
}
.sv-core-label--tight {
.sv-core-label--tight { letter-spacing: 0.12px; }
  letter-spacing: 0.12px;
}


/* ----------------------------------------------------------------------------
/* ----------------------------------------------------------------------------
Line 670: Line 616:
---------------------------------------------------------------------------- */
---------------------------------------------------------------------------- */


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


.sv-tabs-list {
.sv-tabs-list {
Line 694: Line 638:
}
}


.sv-tab:hover {
.sv-tab:hover { background: rgba(255,255,255,0.05); }
  background: rgba(255,255,255,0.05);
}


.sv-tab[aria-selected="true"] {
.sv-tab[aria-selected="true"] {
Line 770: Line 712:


   min-width: 0;
   min-width: 0;
}
.sv-ref-card--link:hover {
  background: rgba(0,0,0,0.16);
  text-decoration: none;
}
}


Line 805: Line 742:
   line-height: 1.15;
   line-height: 1.15;
   color: rgba(245,250,255,0.98);
   color: rgba(245,250,255,0.98);
  word-wrap: break-word;
}
.sv-ref-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.sv-ref-title-row--stacked {
  flex-direction: column;
  align-items: flex-start;
}
.sv-ref-inline {
  font-weight: 900;
  font-size: 14px;
  color: rgba(210,224,245,0.80);
  text-align: right;
   word-wrap: break-word;
   word-wrap: break-word;
}
}
Line 878: Line 795:
   }
   }


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


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


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


   .sv-ref-grid {
   .sv-ref-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-tip-pop,
   .sv-tip-pop,
Line 905: Line 814:
/* Mobile */
/* Mobile */
@media (max-width: 520px) {
@media (max-width: 520px) {
   .sv-skill-head {
   .sv-skill-head { gap: 10px; }
    gap: 10px;
  }


   .sv-skill-icon {
   .sv-skill-icon {
Line 915: Line 822:
   }
   }


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


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


   .sv-scaling-grid {
   .sv-scaling-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-kw-grid {
   .sv-kw-grid { grid-template-columns: 1fr; }
    grid-template-columns: 1fr;
  }


   .sv-disclose {
   .sv-disclose {

Revision as of 18:40, 19 February 2026

/* Module:GameInfo/styles.css */
/* GameInfo Box v1 — TemplateStyles-safe (no CSS vars / no var()) */

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

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

  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.085);

  background-color: #0f1b33;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    linear-gradient(180deg, #0f1b33, #0c162b);

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

  color: rgba(235, 244, 255, 0.92);
  font-size: 15px;
  line-height: 1.35;
}

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

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

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

.sv-gi-card a,
.sv-skill-card a {
  color: rgba(170, 220, 255, 0.95);
  text-decoration: none;
}
.sv-gi-card a:hover,
.sv-skill-card a:hover {
  text-decoration: underline;
}

/* Shared micro-utilities */
.sv-gi-error {
  max-width: 600px;
  margin: 18px auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(0,0,0,0.20);
}

/* IMPORTANT: Phase 4.1 hiding contract */
.sv-hidden { display: none !important; }
[hidden]   { display: none !important; }

/* Remove default details marker (safe even if no <details> used) */
.sv-gi-card summary,
.sv-skill-card summary {
  list-style: none;
}

.sv-miss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.050);
  background: rgba(255,255,255,0.05);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

.sv-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.050);
  background: rgba(255,255,255,0.05);
  white-space: nowrap;
}

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

/* Accessible focus for span-buttons */
.sv-tip-btn:focus,
.sv-disclose-btn:focus,
.sv-tab:focus {
  outline: 2px solid rgba(170, 220, 255, 0.55);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
   SKILL HEADER (ICON + TITLE + NOTES + DESCRIPTION)
---------------------------------------------------------------------------- */

.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(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

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

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

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

.sv-skill-desc {
  margin-top: 6px;
  color: rgba(210, 224, 245, 0.86);
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
}

/* ----------------------------------------------------------------------------
   NOTES TIP (PHASE 4.1: span button + div popover)
---------------------------------------------------------------------------- */

.sv-tip {
  position: relative;
  flex: 0 0 auto;
}

.sv-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.04);

  cursor: pointer;
}
.sv-tip-btn:hover { background: rgba(255,255,255,0.06); }

/* Optional “active” feel */
.sv-tip-btn[aria-expanded="true"],
.sv-disclose-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
}

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

  width: 18px;
  height: 18px;
  border-radius: 999px;

  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  color: rgba(245,250,255,0.95);
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.08);
}

/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-tip-pop {
  display: block;
  position: absolute;
  z-index: 50;

  top: 34px;
  right: 0;

  width: 360px;
  max-width: 92vw;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(10, 14, 24, 0.92);

  box-shadow: 0 18px 40px rgba(0,0,0,0.60);
  overflow: hidden;
}

.sv-tip-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);

  cursor: pointer;
}

.sv-tip-pop-title {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(245,250,255,0.96);
}

.sv-tip-pop-hint {
  font-size: 12px;
  color: rgba(210,224,245,0.65);
}

.sv-tip-pop-body {
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(225,235,250,0.88);
  line-height: 1.4;
  word-wrap: break-word;
}

/* ----------------------------------------------------------------------------
   META ROW (4 CARDS)
---------------------------------------------------------------------------- */

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

.sv-meta-card {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.sv-meta-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sv-meta-icon img {
  border-radius: 8px;
  box-shadow: none;
}

.sv-meta-textwrap {
  min-width: 0;
  flex: 1 1 auto;
}

.sv-meta-text {
  font-weight: 900;
  color: rgba(235,244,255,0.92);
  font-size: 15px;
  line-height: 1.10;
  letter-spacing: 0.2px;
  min-width: 0;
  word-wrap: break-word;
}

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

/* ----------------------------------------------------------------------------
   REQUIREMENTS / USERS ROW (PHASE 4.1: span button + div popover)
---------------------------------------------------------------------------- */

.sv-reqrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 8px;
}

.sv-disclose {
  position: relative;
  flex: 1 1 220px;
  min-width: 220px;
}

.sv-disclose-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);

  cursor: pointer;

  font-weight: 900;
  color: rgba(235,244,255,0.92);
}
.sv-disclose-btn:hover { background: rgba(255,255,255,0.05); }

.sv-disclose-label {
  min-width: 0;
  word-wrap: break-word;
}

.sv-disclose-count {
  font-weight: 800;
  font-size: 13px;
  color: rgba(210,224,245,0.70);
  margin-left: 10px;
  white-space: nowrap;
}

/* IMPORTANT: do NOT use display:none here; JS controls visibility via .sv-hidden + [hidden] */
.sv-disclose-pop {
  display: block;
  position: absolute;
  z-index: 50;

  top: 46px;
  left: 0;

  width: 420px;
  max-width: 92vw;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(10, 14, 24, 0.92);

  box-shadow: 0 18px 40px rgba(0,0,0,0.60);
  overflow: hidden;
}

.sv-disclose-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);

  cursor: pointer;
}

.sv-disclose-pop-title {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(245,250,255,0.96);
}

.sv-disclose-pop-hint {
  font-size: 12px;
  color: rgba(210,224,245,0.65);
}

.sv-disclose-list {
  margin: 0;
  padding: 10px 12px 12px;
  list-style: none;
}

.sv-disclose-list li {
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.05);
  color: rgba(225,235,250,0.90);
  font-size: 13px;
}
.sv-disclose-list li:first-child {
  border-top: none;
  padding-top: 0;
}

.sv-disclose-group-title {
  font-weight: 900;
  letter-spacing: 0.2px;
  color: rgba(210,224,245,0.78);
  padding-top: 10px;
}

/* ----------------------------------------------------------------------------
   LEVEL SELECTOR
---------------------------------------------------------------------------- */

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

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.sv-level-ui {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.sv-level-label {
  font-weight: 900;
  color: rgba(235,244,255,0.90);
}

.sv-level-num {
  font-weight: 900;
  color: rgba(245,250,255,0.98);
}

.sv-level-slider { position: relative; }

.sv-level-range {
  width: 100%;
  margin: 0;
}

/* ----------------------------------------------------------------------------
   SCALING TOP
---------------------------------------------------------------------------- */

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

.sv-scaling-row {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.sv-scaling-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.sv-scaling-col--scaling { grid-column: 1 / -1; }

.sv-scaling-value {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.10;
  color: rgba(245,250,255,0.98);
  word-wrap: break-word;
}

.sv-scaling-label {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.25px;
  color: rgba(210,224,245,0.65);
  text-transform: uppercase;
}

.sv-scaling-list {
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.sv-scaling-item {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
  color: rgba(225,235,250,0.88);
  font-weight: 800;
  font-size: 13px;
}

/* ----------------------------------------------------------------------------
   CORE STATS GRID
---------------------------------------------------------------------------- */

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

.sv-core-row {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.sv-core-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sv-core-cell {
  padding: 10px 10px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
  min-width: 0;
}

.sv-core-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.sv-core-num {
  font-weight: 900;
  font-size: 17px;
  line-height: 1.10;
  color: rgba(245,250,255,0.98);
  min-width: 0;
  word-wrap: break-word;
}

.sv-core-unit {
  font-weight: 900;
  font-size: 12px;
  color: rgba(210,224,245,0.70);
}

.sv-core-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: rgba(210,224,245,0.65);
}
.sv-core-label--tight { letter-spacing: 0.12px; }

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

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

.sv-tabs-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sv-tab {
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: rgba(225,235,250,0.90);

  border-radius: 999px;
  padding: 7px 10px;

  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}

.sv-tab:hover { background: rgba(255,255,255,0.05); }

.sv-tab[aria-selected="true"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
  color: rgba(245,250,255,0.98);
}

.sv-tabpanel {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

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

.sv-kw-cell {
  padding: 10px 10px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.12);
}

.sv-kw-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  color: rgba(210,224,245,0.65);
}

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

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

/* ----------------------------------------------------------------------------
   EFFECT / EVENT CARDS
---------------------------------------------------------------------------- */

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

.sv-ref-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.12);
  color: rgba(235,244,255,0.90);

  min-width: 0;
}

.sv-ref-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sv-ref-ico img {
  border-radius: 14px;
  box-shadow: none;
}

.sv-ref-text {
  min-width: 0;
  flex: 1 1 auto;
}

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

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

.sv-ref-stat {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.04);
  font-weight: 900;
  font-size: 12px;
  color: rgba(225,235,250,0.88);
}

.sv-ref-sub {
  margin-top: 6px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(210,224,245,0.75);
}

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

/* Tablet / compact desktop */
@media (max-width: 720px) {
  .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;
  }

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

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

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

  .sv-ref-grid { grid-template-columns: 1fr; }

  .sv-tip-pop,
  .sv-disclose-pop {
    right: 0;
    left: auto;
    width: 92vw;
    max-width: 520px;
  }
}

/* Mobile */
@media (max-width: 520px) {
  .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-scaling-grid { grid-template-columns: 1fr; }

  .sv-kw-grid { grid-template-columns: 1fr; }

  .sv-disclose {
    min-width: 0;
    flex: 1 1 100%;
  }
}
Retrieved from "https://spiritvale.info/wiki/index.php?title=Module:GameInfo/styles.css&oldid=2343"
Last modified
This page was last edited on 19 February 2026, at 18:40.