@@ Line 841: / Line 841: @@
 }
 table.spiritvale-skill-infobox .module-special-mechanics .sv-sm-col-mech .sv-sm-mech{width:100%;}
+}
+/* ---------------------------------------------------------------------------
+SV Shared Utilities (global)
+- Used by GameInfo + future bot-rendered modules
+--------------------------------------------------------------------------- */
+/* Phase 4.1 visibility contract (JS toggles these) */
+.sv-hidden,
+.mw-parser-output .sv-hidden {
+  display: none !important;
+}
+[hidden] {
+  display: none !important;
+}
+/* Missing icon fallback badge (“?”) */
+.sv-miss,
+.mw-parser-output .sv-miss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--sv-ui-rad-pill);
+  border: 1px solid var(--sv-ui-line2);
+  background: var(--sv-ui-bg3);
+  color: var(--sv-ui-text1);
+  font-weight: 900;
+  font-size: 12px;
+  line-height: 1;
+}
+/* Generic image wrapper (bot can emit this for consistent rounding) */
+.sv-img,
+.mw-parser-output .sv-img {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sv-img img,
+.mw-parser-output .sv-img img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--sv-ui-rad-sm);
+}
+/* Optional: shadow variant (only when explicitly requested in markup) */
+.sv-img--shadow img,
+.mw-parser-output .sv-img--shadow img {
+  box-shadow: 0 10px 18px rgba(0,0,0,0.35);
+}
+/* ---------------------------------------------------------------------------
+SV Tabs (shared component)
+- GameInfo can drop its local .sv-tab* rules once this exists
+--------------------------------------------------------------------------- */
+.sv-tabs,
+.mw-parser-output .sv-tabs {
+  margin: 10px 0 0;
+}
+.sv-tabs-list,
+.mw-parser-output .sv-tabs-list {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin: 0 0 10px 0;
+  padding: 0;
+}
+.sv-tab,
+.mw-parser-output .sv-tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--sv-ui-rad-pill);
+  padding: 7px 10px;
+  border: 1px solid var(--sv-ui-line2);
+  background: var(--sv-ui-bg2);
+  color: var(--sv-ui-text1);
+  font-weight: 900;
+  font-size: 13px;
+  cursor: pointer;
+  user-select: none;
+}
+.sv-tab:hover,
+.mw-parser-output .sv-tab:hover {
+  background: var(--sv-ui-bg3);
+}
+.sv-tab[aria-selected="true"],
+.mw-parser-output .sv-tab[aria-selected="true"] {
+  background: var(--sv-ui-bg3);
+  border-color: var(--sv-ui-accent);
+}
+.sv-tabpanel,
+.mw-parser-output .sv-tabpanel {
+  padding: 10px 12px;
+  border-radius: var(--sv-ui-rad-md);
+  border: 1px solid var(--sv-ui-line1);
+  background: var(--sv-ui-bg1);
+}
+/* ---------------------------------------------------------------------------
+SV Disclosure (shared popover component)
+- Used by “Requirements / Users” style dropdowns
+--------------------------------------------------------------------------- */
+.sv-disclose,
+.mw-parser-output .sv-disclose {
+  position: relative;
+}
+.sv-disclose-btn,
+.mw-parser-output .sv-disclose-btn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  border-radius: var(--sv-ui-rad-md);
+  border: 1px solid var(--sv-ui-line1);
+  background: var(--sv-ui-bg1);
+  color: var(--sv-ui-text1);
+  font-weight: 900;
+  cursor: pointer;
+  user-select: none;
+}
+.sv-disclose-btn:hover,
+.mw-parser-output .sv-disclose-btn:hover {
+  background: var(--sv-ui-bg2);
+}
+.sv-disclose-count,
+.mw-parser-output .sv-disclose-count {
+  font-weight: 800;
+  font-size: 13px;
+  color: var(--sv-ui-text3);
+  white-space: nowrap;
+}
+/* IMPORTANT: do not set display:none; JS controls via .sv-hidden / [hidden] */
+.sv-disclose-pop,
+.mw-parser-output .sv-disclose-pop {
+  position: absolute;
+  z-index: 99999;
+  top: calc(100% + 8px);
+  left: 0;
+  width: min(420px, calc(100vw - 16px));
+  max-height: 60vh;
+  overflow: auto;
+  border-radius: var(--sv-ui-rad-md);
+  border: 1px solid var(--sv-ui-line2);
+  background: var(--sv-ui-bg0);
+  color: var(--sv-ui-text1);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+}
+.sv-disclose-pop-head,
+.mw-parser-output .sv-disclose-pop-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--sv-ui-line1);
+  background: var(--sv-ui-bg1);
+  cursor: pointer;
+}
+.sv-disclose-pop-title,
+.mw-parser-output .sv-disclose-pop-title {
+  font-weight: 900;
+  font-size: 13px;
+  letter-spacing: 0.02em;
+}
+.sv-disclose-pop-hint,
+.mw-parser-output .sv-disclose-pop-hint {
+  font-size: 12px;
+  color: var(--sv-ui-text3);
+}
+.sv-disclose-list,
+.mw-parser-output .sv-disclose-list {
+  margin: 0;
+  padding: 10px 12px 12px;
+  list-style: none;
+}
+.sv-disclose-list li,
+.mw-parser-output .sv-disclose-list li {
+  padding: 6px 0;
+  border-top: 1px solid var(--sv-ui-line1);
+  font-size: 13px;
+}
+.sv-disclose-list li:first-child,
+.mw-parser-output .sv-disclose-list li:first-child {
+  border-top: none;
+  padding-top: 0;
+}
+.sv-disclose-group-title,
+.mw-parser-output .sv-disclose-group-title {
+  padding-top: 10px;
+  font-weight: 900;
+  font-size: 12px;
+  letter-spacing: 0.02em;
+  color: var(--sv-ui-text2);
 }