/* =====================================================================
   w3bhead — Neon Arcade + Tab Themes (CLEAN v5)
   Theme overhaul:
   - CS2:    electric blue + tactical yellow, sharp corners, scan-line shimmer
   - Souls:  near-black + ember/ash, ancient stone cards, dying-flame title
   - Valheim: dark wood + moss green, carved border effect, runic glow
   - Servers: default neon arcade (unchanged)
   Wallpaper layers are untouched.
===================================================================== */

/* =========================
   WALLPAPER BACKGROUND LAYERS  (DO NOT TOUCH)
========================= */
body, #__next {
  background: transparent !important;
}

html.wallpaper-on::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  background-image: var(--wallpaper-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.84) saturate(1.05);
}

html.wallpaper-on::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(122,44,255,.28), transparent 60%),
    radial-gradient(900px 600px at 10% 10%,  rgba(255,59,245,.18),  transparent 55%),
    radial-gradient(900px 600px at 90% 10%,  rgba(0,245,255,.16),   transparent 55%),
    rgba(5,4,12,.58);
}

/* =========================
   THEME TOKENS  (default: Servers / Arcade)
========================= */
:root {
  --pink:   #ff3bf5;
  --cyan:   #00f5ff;
  --purple: #7a2cff;
  --yellow: #ffe66d;

  --card-bg:           rgba(10,12,30,.94);
  --card-bg-map:       rgba(10,12,30,.55);
  --card-border:       rgba(0,245,255,.55);
  --card-border-hover: rgba(255,59,245,.75);

  --text-main:  rgba(255,255,255,.95);
  --text-dim:   rgba(255,255,255,.72);
  --text-label: rgba(155,231,255,.80);

  --neon-main:   #00f5ff;
  --neon-accent: #ff3bf5;

  --card-radius:        18px;
  --card-radius-inner:  12px;
}

/* =========================
   BASE TYPOGRAPHY
========================= */
* { letter-spacing: .03em; }

.group-title, .section-title, .header-title {
  text-transform: uppercase;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  color: rgba(255,255,255,.97) !important;
  text-shadow:
    0 0 10px rgba(0,245,255,.40),
    0 0 20px rgba(255,59,245,.25),
    0 0 30px rgba(122,44,255,.20);
}

.service-title, .bookmark-title, .widget-title {
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  color: var(--cyan) !important;
  text-shadow:
    0 0 10px rgba(0,245,255,.35),
    0 0 18px rgba(0,245,255,.18);
}

.service-description, .bookmark-description, .widget-subtitle, .subtitle, .description {
  color: var(--text-dim) !important;
}

.widget .label, .service .label, .bookmark .label {
  color: var(--text-label) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.widget .value, .service .value, .bookmark .value {
  color: var(--text-main) !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  text-shadow: 0 0 10px rgba(0,0,0,.50);
}

a {
  color: var(--cyan) !important;
  text-shadow: 0 0 10px rgba(0,245,255,.22);
}
a:hover {
  color: var(--pink) !important;
  text-shadow: 0 0 12px rgba(255,59,245,.30);
}

/* =========================
   CARDS — base (all tabs)
========================= */
html.dark :where(.service, .widget, .bookmark, .group, .card, .container-card),
:root     :where(.service, .widget, .bookmark, .group, .card, .container-card) {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 0 0 1px rgba(122,44,255,.22),
    0 14px 42px rgba(0,0,0,.68),
    0 0 26px rgba(0,245,255,.12) !important;
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}

html.dark :where(.service, .widget, .bookmark):hover,
:root     :where(.service, .widget, .bookmark):hover {
  transform: translateY(-3px);
  border-color: var(--card-border-hover) !important;
  box-shadow:
    0 0 0 1px rgba(255,59,245,.26),
    0 0 30px rgba(255,59,245,.18),
    0 0 22px rgba(0,245,255,.16),
    0 22px 70px rgba(0,0,0,.80) !important;
}

html.dark .layout-row,
html.dark .layout-row > * { background: transparent !important; }

html.dark .layout-row,
html.dark .layout-row > *,
html.dark .services,
html.dark .service,
html.dark .widget,
html.dark .bookmark { overflow: visible !important; }

html.dark :where(.service, .widget, .bookmark),
:root     :where(.service, .widget, .bookmark) {
  position: relative !important;
  isolation: isolate !important;
}

/* default hover glow halo */
html.dark :where(.service, .widget, .bookmark)::after,
:root     :where(.service, .widget, .bookmark)::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: calc(var(--card-radius) + 8px);
  pointer-events: none;
  opacity: 0;
  z-index: -1;
  box-shadow:
    0 0 14px rgba(0,245,255,.45),
    0 0 34px rgba(255,59,245,.34),
    0 0 64px rgba(122,44,255,.28),
    0 0 110px rgba(255,230,109,.18);
  transition: opacity .14s ease;
}

html.dark :where(.service, .widget, .bookmark):hover::after,
:root     :where(.service, .widget, .bookmark):hover::after {
  opacity: 1;
  animation: w3bHue 0.9s linear infinite;
}

@keyframes w3bHue {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}

/* =========================
   STATUS PILLS
========================= */
.widget .fields > div:first-child .value,
.service .fields > div:first-child .value {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.status-online .fields > div:first-child .value {
  color: #00ffd5 !important;
  border: 1px solid rgba(0,255,213,.65) !important;
  box-shadow: 0 0 10px rgba(0,255,213,.55), 0 0 22px rgba(0,255,213,.28) !important;
}
.status-offline .fields > div:first-child .value {
  color: #ff2b6e !important;
  border: 1px solid rgba(255,43,110,.70) !important;
  box-shadow: 0 0 12px rgba(255,43,110,.50), 0 0 24px rgba(255,43,110,.22) !important;
}

/* =========================
   FIXED TITLE (top-left) — base
========================= */
#w3bhead-neon-title {
  /* position/top/left/z-index set inline by JS to defeat Next.js scroll containers */
  /* CSS here is purely visual styling */
}
#w3bhead-neon-title .w3b-title {
  display: inline-flex;
  gap: 16px;
  align-items: baseline;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  user-select: none;
  font-size: 22px;        /* bigger base size */
  line-height: 1;
}
#w3bhead-neon-title .w3b-word-1 {
  color: rgba(225,245,255,.94);
  font-size: 18px;        /* "W3BHEAD'S" slightly smaller than the tab word */
  letter-spacing: .20em;
  text-shadow:
    0 0 12px rgba(0,245,255,.28),
    0 0 28px rgba(122,44,255,.18);
}
#w3bhead-neon-title .w3b-word-2 {
  padding: 8px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 0 22px rgba(0,0,0,.45);
  color: rgba(255,220,180,.94);
  font-size: 22px;        /* tab name is the hero word */
  letter-spacing: .18em;
  text-shadow:
    0 0 14px rgba(255,170,90,.22),
    0 0 28px rgba(0,245,255,.12);
}


/* =====================================================================
   CS2 THEME — Electric Blue + Tactical Yellow
   Sharp angles, military precision, scan-line shimmer
===================================================================== */

html.wallpaper-on.cs2-mode::before {
  filter: brightness(0.72) saturate(0.95) contrast(1.08);
}
html.wallpaper-on.cs2-mode::after {
  background:
    radial-gradient(1400px 600px at 15% 0%,   rgba(30,120,255,.22),  transparent 58%),
    radial-gradient(1000px 500px at 85% 0%,   rgba(255,200,50,.12),  transparent 55%),
    radial-gradient(800px  400px at 50% 100%, rgba(0,80,180,.18),    transparent 60%),
    linear-gradient(180deg, rgba(0,5,18,.50), rgba(0,2,10,.85));
}

html.cs2-mode {
  --cyan:              #4db8ff;
  --yellow:            #ffd000;
  --pink:              #0a2a55;
  --card-bg:           rgba(4,8,18,.92);
  --card-bg-map:       rgba(4,8,18,.58);
  --card-border:       rgba(50,150,255,.45);
  --card-border-hover: rgba(255,208,0,.70);
  --text-main:  rgba(210,235,255,.96);
  --text-dim:   rgba(160,200,240,.72);
  --text-label: rgba(100,180,255,.85);
  --neon-main:   #4db8ff;
  --neon-accent: #ffd000;
  --card-radius:       10px;
  --card-radius-inner: 6px;
}

/* sharp tactical cards */
html.cs2-mode :where(.service, .widget, .bookmark, .group, .card, .container-card) {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  border-left: 3px solid rgba(50,150,255,.70) !important;
  box-shadow:
    0 0 0 1px rgba(30,100,220,.18),
    0 8px 32px rgba(0,0,0,.75),
    0 0 18px rgba(50,150,255,.10) !important;
}

/* scan-line shimmer on card top edge */
html.cs2-mode :where(.service, .widget, .bookmark)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(50,150,255,.55) 30%,
    rgba(255,208,0,.65) 55%,
    rgba(50,150,255,.45) 80%,
    transparent 100%
  );
  animation: cs2Scan 3.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes cs2Scan {
  0%,100% { opacity:.45; }
  50%     { opacity:.90; }
}

html.cs2-mode :where(.service, .widget, .bookmark):hover {
  border-color: rgba(255,208,0,.75) !important;
  border-left-color: rgba(255,208,0,.90) !important;
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,208,0,.22),
    0 0 24px rgba(255,208,0,.18),
    0 0 14px rgba(50,150,255,.22),
    0 16px 55px rgba(0,0,0,.85) !important;
}

html.cs2-mode :where(.service, .widget, .bookmark)::after {
  box-shadow:
    0 0 18px rgba(50,150,255,.50),
    0 0 40px rgba(255,208,0,.28),
    0 0 70px rgba(30,90,200,.22) !important;
  animation: none !important;
}
html.cs2-mode :where(.service, .widget, .bookmark):hover::after {
  opacity: 1;
  animation: none !important;
}

/* CS2 typography */
html.cs2-mode .group-title,
html.cs2-mode .section-title,
html.cs2-mode .header-title,
html.cs2-mode .w3b-section-heading,
html.cs2-mode h1:not(#w3bhead-neon-title *),
html.cs2-mode h2:not(#w3bhead-neon-title *),
html.cs2-mode h3:not(#w3bhead-neon-title *),
html.cs2-mode [class*="text-2xl"]:not(.service *):not(.widget *):not(.bookmark *),
html.cs2-mode [class*="text-xl"]:not(.service *):not(.widget *):not(.bookmark *) {
  letter-spacing: .22em !important;
  color: rgba(210,235,255,.96) !important;
  text-shadow:
    0 0 12px rgba(50,150,255,.45),
    0 0 28px rgba(50,150,255,.22),
    0 2px 0 rgba(0,0,0,.80) !important;
}
html.cs2-mode .group-title::before,
html.cs2-mode .section-title::before,
html.cs2-mode .w3b-section-heading::before,
html.cs2-mode h2:not(#w3bhead-neon-title *)::before,
html.cs2-mode h3:not(#w3bhead-neon-title *)::before {
  content: "▌";
  margin-right: 8px;
  color: rgba(255,208,0,.80);
  text-shadow: 0 0 10px rgba(255,208,0,.45);
}
html.cs2-mode .service-title,
html.cs2-mode .bookmark-title,
html.cs2-mode .widget-title {
  color: #4db8ff !important;
  letter-spacing: .10em !important;
  text-shadow:
    0 0 8px rgba(50,150,255,.40),
    0 0 18px rgba(50,150,255,.20) !important;
}
html.cs2-mode .widget .label,
html.cs2-mode .service .label,
html.cs2-mode .bookmark .label {
  color: rgba(100,180,255,.85) !important;
  letter-spacing: .16em !important;
}
html.cs2-mode a { color: #4db8ff !important; text-shadow: 0 0 8px rgba(50,150,255,.25); }
html.cs2-mode a:hover { color: #ffd000 !important; text-shadow: 0 0 10px rgba(255,208,0,.35); }

/* CS2 title — electric blue / tactical yellow, bigger and bolder */
html.cs2-mode #w3bhead-neon-title .w3b-word-1 {
  color: rgba(160,210,255,.92) !important;
  font-size: 16px !important;
  letter-spacing: .24em !important;
  text-shadow:
    0 0 10px rgba(50,150,255,.40),
    0 0 26px rgba(50,150,255,.22),
    0 1px 0 rgba(0,0,0,.95) !important;
}
html.cs2-mode #w3bhead-neon-title .w3b-word-2 {
  /* bright yellow — like the CT money counter */
  color: #ffd000 !important;
  font-size: 26px !important;
  letter-spacing: .26em !important;
  border: 1px solid rgba(255,208,0,.45) !important;
  border-left: 4px solid rgba(255,208,0,.85) !important;
  background: rgba(2,6,16,.65) !important;
  border-radius: 6px !important;
  text-shadow:
    0 0 14px rgba(255,208,0,.55),
    0 0 32px rgba(255,208,0,.28),
    0 0 60px rgba(50,150,255,.18),
    0 1px 0 rgba(0,0,0,.95) !important;
  box-shadow:
    0 0 18px rgba(255,208,0,.16),
    0 0 36px rgba(50,150,255,.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  animation: cs2TitlePulse 2.8s ease-in-out infinite;
}
@keyframes cs2TitlePulse {
  0%,100% {
    box-shadow: 0 0 18px rgba(255,208,0,.16), 0 0 36px rgba(50,150,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
    border-left-color: rgba(255,208,0,.85);
  }
  50% {
    box-shadow: 0 0 30px rgba(255,208,0,.32), 0 0 55px rgba(50,150,255,.22), inset 0 1px 0 rgba(255,255,255,.08);
    border-left-color: rgba(255,240,80,1.0);
  }
}

html.dark .cs2-map-bg,
html.dark .cs2-nextmap-bg {
  background-color: var(--card-bg-map) !important;
  background-blend-mode: overlay !important;
}


/* =====================================================================
   DARK SOULS THEME — Near-black + ember ash + ancient stone
===================================================================== */

html.wallpaper-on.souls-mode::before {
  filter: brightness(0.55) saturate(0.75) contrast(1.10);
}
html.wallpaper-on.souls-mode::after {
  background:
    radial-gradient(1400px 700px at 50% -20%, rgba(200,80,20,.14),  transparent 60%),
    radial-gradient(900px  600px at 10% 20%,  rgba(140,30,10,.12),  transparent 58%),
    radial-gradient(900px  600px at 90% 25%,  rgba(180,100,40,.08), transparent 60%),
    radial-gradient(600px  400px at 50% 100%, rgba(60,20,5,.30),    transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.88));
}

html.souls-mode {
  --cyan:              #c87941;
  --pink:              #7a2010;
  --yellow:            #d4a96a;
  --card-bg:           rgba(8,7,9,.94);
  --card-border:       rgba(140,80,30,.38);
  --card-border-hover: rgba(200,120,50,.60);
  --text-main:  rgba(230,220,205,.94);
  --text-dim:   rgba(180,165,145,.68);
  --text-label: rgba(200,160,110,.78);
  --neon-main:   #c87941;
  --neon-accent: #7a2010;
  --card-radius:       14px;
  --card-radius-inner: 8px;
}

/* ancient stone slab */
html.souls-mode :where(.service, .widget, .bookmark, .group, .card, .container-card) {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,140,.06),
    inset 0 -1px 0 rgba(0,0,0,.60),
    0 10px 40px rgba(0,0,0,.82),
    0 0 18px rgba(120,60,15,.12) !important;
}

/* ember ash top edge */
html.souls-mode :where(.service, .widget, .bookmark)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,120,40,.35) 35%,
    rgba(255,180,80,.55) 55%,
    rgba(200,120,40,.30) 75%,
    transparent 100%
  );
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

html.souls-mode :where(.service, .widget, .bookmark):hover {
  transform: translateY(-2px);
  border-color: var(--card-border-hover) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,200,140,.10),
    inset 0 -1px 0 rgba(0,0,0,.60),
    0 0 28px rgba(200,100,30,.28),
    0 0 14px rgba(180,80,20,.20),
    0 18px 60px rgba(0,0,0,.88) !important;
}

html.souls-mode :where(.service, .widget, .bookmark)::after {
  box-shadow:
    0 0 18px rgba(200,100,30,.55),
    0 0 40px rgba(180,70,15,.38),
    0 0 80px rgba(120,40,10,.25) !important;
  animation: none !important;
}
html.souls-mode :where(.service, .widget, .bookmark):hover::after {
  opacity: 1;
  animation: soulsEmber 2.2s ease-in-out infinite !important;
}
@keyframes soulsEmber {
  0%,100% { opacity:.70; filter: brightness(1.0); }
  50%     { opacity:1.0; filter: brightness(1.18); }
}

/* Souls typography — section headings
   Wide selector net: covers every class Homepage has used across versions
   plus h2/h3 and our JS-injected w3b-section-heading tag. */
html.souls-mode .group-title,
html.souls-mode .section-title,
html.souls-mode .header-title,
html.souls-mode .w3b-section-heading,
html.souls-mode h1:not(#w3bhead-neon-title *),
html.souls-mode h2:not(#w3bhead-neon-title *),
html.souls-mode h3:not(#w3bhead-neon-title *),
html.souls-mode [class*="text-2xl"]:not(.service *):not(.widget *):not(.bookmark *),
html.souls-mode [class*="text-xl"]:not(.service *):not(.widget *):not(.bookmark *) {
  letter-spacing: .24em !important;
  color: transparent !important;
  background: linear-gradient(90deg,
    #ffe0b0  0%,
    #ffb050 20%,
    #e06820 40%,
    #ff9040 60%,
    #ffb050 78%,
    #ffe0b0 100%
  ) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: soulsHeadingEmber 3.5s ease-in-out infinite !important;
  filter: drop-shadow(0 0 8px rgba(220,110,20,.55))
          drop-shadow(0 0 18px rgba(180,70,10,.38))
          drop-shadow(0 0 32px rgba(140,50,5,.22)) !important;
  text-shadow: none !important;
}
@keyframes soulsHeadingEmber {
  0%,100% {
    background-position: 0% 50%;
    filter: drop-shadow(0 0 6px rgba(220,110,20,.50))
            drop-shadow(0 0 16px rgba(180,70,10,.32))
            drop-shadow(0 0 28px rgba(140,50,5,.18));
  }
  50% {
    background-position: 220% 50%;
    filter: drop-shadow(0 0 14px rgba(255,140,30,.75))
            drop-shadow(0 0 28px rgba(210,90,15,.52))
            drop-shadow(0 0 52px rgba(160,60,5,.32));
  }
}
html.souls-mode .group-title::before,
html.souls-mode .section-title::before,
html.souls-mode .w3b-section-heading::before,
html.souls-mode h2:not(#w3bhead-neon-title *)::before,
html.souls-mode h3:not(#w3bhead-neon-title *)::before {
  content: "🔥";
  margin-right: 10px;
  font-size: .80em;
  filter: brightness(0.85) saturate(0.90);
}
html.souls-mode .service-title,
html.souls-mode .bookmark-title,
html.souls-mode .widget-title {
  color: #c87941 !important;
  letter-spacing: .10em !important;
  text-shadow:
    0 0 10px rgba(180,90,25,.42),
    0 0 22px rgba(140,60,15,.24) !important;
}
html.souls-mode .widget .label,
html.souls-mode .service .label,
html.souls-mode .bookmark .label {
  color: rgba(200,160,110,.78) !important;
  letter-spacing: .14em !important;
}
html.souls-mode .service-description,
html.souls-mode .bookmark-description,
html.souls-mode .subtitle,
html.souls-mode .description { color: rgba(160,145,125,.72) !important; }
html.souls-mode a { color: #c87941 !important; text-shadow: 0 0 8px rgba(180,90,25,.22); }
html.souls-mode a:hover { color: #d4a96a !important; text-shadow: 0 0 12px rgba(200,150,60,.35); }

/* Souls title — dying bonfire, bigger and more dramatic */
html.souls-mode #w3bhead-neon-title .w3b-title {
  animation: soulsTitleFlicker 3.2s infinite;
}
html.souls-mode #w3bhead-neon-title .w3b-word-1 {
  color: rgba(210,190,160,.88) !important;
  font-size: 16px !important;
  letter-spacing: .24em !important;
  text-shadow:
    0 0 16px rgba(180,90,25,.35),
    0 0 34px rgba(140,60,15,.20),
    0 2px 0 rgba(0,0,0,.95) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  animation: none !important;
}
html.souls-mode #w3bhead-neon-title .w3b-word-2 {
  /* deep bonfire — cream white core to deep red edge */
  color: transparent !important;
  font-size: 28px !important;
  letter-spacing: .20em !important;
  background: linear-gradient(90deg,
    #fff5e0  0%,
    #ffcc60 12%,
    #ff8820 26%,
    #cc3a08 42%,
    #ff6010 58%,
    #ffaa40 74%,
    #fff5e0 100%
  ) !important;
  background-size: 280% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: soulsFireTitle 1.8s linear infinite !important;
  border: 1px solid rgba(200,100,30,.35) !important;
  border-bottom: 1px solid rgba(80,20,5,.55) !important;
  background-color: transparent !important;
  border-radius: 10px !important;
  padding: 8px 20px !important;
  box-shadow:
    0 0 28px rgba(200,90,20,.22),
    0 0 55px rgba(160,60,10,.14),
    inset 0 1px 0 rgba(255,200,100,.08),
    inset 0 -2px 0 rgba(0,0,0,.40) !important;
}
@keyframes soulsFireTitle {
  0%   { background-position:   0% 50%; }
  100% { background-position: 280% 50%; }
}
@keyframes soulsTitleFlicker {
  0%,100% { opacity:.97; transform:translateY(0) scale(1); }
  28%     { opacity:.88; transform:translateY(-.8px) scale(.998); }
  45%     { opacity:.98; transform:translateY(.4px)  scale(1.001); }
  63%     { opacity:.90; transform:translateY(-.5px) scale(.999); }
  80%     { opacity:.97; transform:translateY(.3px)  scale(1); }
}

/* Souls status pills */
html.souls-mode .status-online .fields > div:first-child .value {
  color: #a8d88a !important;
  border: 1px solid rgba(130,200,90,.55) !important;
  box-shadow: 0 0 10px rgba(130,200,90,.38), 0 0 20px rgba(130,200,90,.18) !important;
}
html.souls-mode .status-offline .fields > div:first-child .value {
  color: #cc4422 !important;
  border: 1px solid rgba(200,60,30,.55) !important;
  box-shadow: 0 0 10px rgba(200,60,30,.40), 0 0 20px rgba(200,60,30,.18) !important;
}


/* =====================================================================
   VALHEIM THEME — Dark wood + deep forest green + runic stone
===================================================================== */

html.wallpaper-on.valheim-mode::before {
  filter: brightness(0.72) saturate(0.88) contrast(1.06);
}
html.wallpaper-on.valheim-mode::after {
  background:
    radial-gradient(1400px 700px at 25% 5%,  rgba(60,130,90,.18),  transparent 58%),
    radial-gradient(1000px 600px at 75% 10%, rgba(100,160,120,.10), transparent 55%),
    radial-gradient(800px  500px at 50% 95%, rgba(30,70,45,.28),    transparent 58%),
    radial-gradient(600px  400px at 10% 80%, rgba(80,50,20,.20),    transparent 55%),
    linear-gradient(180deg, rgba(2,6,4,.55), rgba(4,8,5,.80));
}

html.valheim-mode {
  --cyan:              #6ecfa0;
  --pink:              #8b6040;
  --yellow:            #c8b87a;
  --card-bg:           rgba(8,11,9,.92);
  --card-border:       rgba(80,140,90,.32);
  --card-border-hover: rgba(110,200,140,.52);
  --text-main:  rgba(225,235,220,.94);
  --text-dim:   rgba(170,185,165,.70);
  --text-label: rgba(130,190,150,.80);
  --neon-main:   #6ecfa0;
  --neon-accent: #8b6040;
  --card-radius:       16px;
  --card-radius-inner: 10px;
}

/* dark wood plank */
html.valheim-mode :where(.service, .widget, .bookmark, .group, .card, .container-card) {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,220,180,.06),
    inset 0 -1px 0 rgba(0,0,0,.50),
    inset 2px 0 0 rgba(80,50,20,.18),
    0 10px 38px rgba(0,0,0,.78),
    0 0 22px rgba(60,120,70,.10) !important;
}

/* rune groove on top edge */
html.valheim-mode :where(.service, .widget, .bookmark)::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100,190,130,.28) 25%,
    rgba(150,210,160,.45) 50%,
    rgba(100,190,130,.28) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

html.valheim-mode :where(.service, .widget, .bookmark):hover {
  transform: translateY(-2px);
  border-color: rgba(110,200,140,.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(180,220,180,.10),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 0 28px rgba(70,170,100,.28),
    0 0 16px rgba(60,130,80,.18),
    0 18px 60px rgba(0,0,0,.84) !important;
}

html.valheim-mode :where(.service, .widget, .bookmark)::after {
  box-shadow:
    0 0 18px rgba(70,170,100,.48),
    0 0 40px rgba(50,130,75,.30),
    0 0 80px rgba(30,90,50,.20) !important;
  animation: none !important;
}
html.valheim-mode :where(.service, .widget, .bookmark):hover::after {
  opacity: 1;
  animation: vhMossBreath 2.8s ease-in-out infinite !important;
}
@keyframes vhMossBreath {
  0%,100% { opacity:.65; }
  50%     { opacity:1.0; }
}

/* Valheim typography */
html.valheim-mode .group-title,
html.valheim-mode .section-title,
html.valheim-mode .header-title,
html.valheim-mode .w3b-section-heading,
html.valheim-mode h1:not(#w3bhead-neon-title *),
html.valheim-mode h2:not(#w3bhead-neon-title *),
html.valheim-mode h3:not(#w3bhead-neon-title *),
html.valheim-mode [class*="text-2xl"]:not(.service *):not(.widget *):not(.bookmark *),
html.valheim-mode [class*="text-xl"]:not(.service *):not(.widget *):not(.bookmark *) {
  letter-spacing: .24em !important;
  color: rgba(215,235,215,.92) !important;
  text-shadow:
    0 0 12px rgba(80,170,110,.28),
    0 0 26px rgba(60,130,80,.18),
    0 2px 0 rgba(0,0,0,.80) !important;
}
html.valheim-mode .group-title::before,
html.valheim-mode .section-title::before,
html.valheim-mode .w3b-section-heading::before,
html.valheim-mode h2:not(#w3bhead-neon-title *)::before,
html.valheim-mode h3:not(#w3bhead-neon-title *)::before {
  content: "ᚱ ";
  margin-right: 6px;
  color: rgba(110,200,140,.60);
  text-shadow: 0 0 10px rgba(80,170,110,.35);
}
html.valheim-mode .service-title,
html.valheim-mode .bookmark-title,
html.valheim-mode .widget-title {
  color: #6ecfa0 !important;
  letter-spacing: .10em !important;
  text-shadow:
    0 0 10px rgba(80,170,110,.38),
    0 0 22px rgba(60,130,80,.20) !important;
}
html.valheim-mode .service-title::after {
  content: " ᛟ";
  display: inline-block;
  margin-left: 8px;
  opacity: .45;
  font-weight: 900;
  letter-spacing: .18em;
  color: rgba(110,200,140,.65);
  transform: translateY(-1px);
}
html.valheim-mode .widget .label,
html.valheim-mode .service .label,
html.valheim-mode .bookmark .label {
  color: rgba(130,190,150,.80) !important;
  letter-spacing: .14em !important;
}
html.valheim-mode .service-description,
html.valheim-mode .bookmark-description,
html.valheim-mode .subtitle,
html.valheim-mode .description { color: rgba(155,175,155,.70) !important; }
html.valheim-mode a { color: #6ecfa0 !important; text-shadow: 0 0 8px rgba(80,170,110,.20); }
html.valheim-mode a:hover { color: #c8b87a !important; text-shadow: 0 0 10px rgba(180,165,100,.30); }

/* Valheim title — carved longhouse sign, bigger and richer */
html.valheim-mode #w3bhead-neon-title .w3b-word-1 {
  color: rgba(200,220,200,.90) !important;
  font-size: 16px !important;
  letter-spacing: .24em !important;
  text-shadow:
    0 0 14px rgba(80,170,110,.28),
    0 0 30px rgba(60,130,80,.16),
    0 2px 0 rgba(0,0,0,.90) !important;
}
html.valheim-mode #w3bhead-neon-title .w3b-word-2 {
  /* birch-cream → vivid moss → deep forest → back */
  color: transparent !important;
  font-size: 26px !important;
  letter-spacing: .22em !important;
  background: linear-gradient(90deg,
    #f0e8c0  0%,
    #c8e8a0 16%,
    #70d090 32%,
    #38a860 50%,
    #70d090 68%,
    #c8e8a0 84%,
    #f0e8c0 100%
  ) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: vhTitleShimmer 5s ease-in-out infinite !important;
  border: 1px solid rgba(80,150,95,.32) !important;
  border-top: 1px solid rgba(140,200,140,.22) !important;
  background-color: transparent !important;
  border-radius: 12px !important;
  padding: 8px 20px !important;
  box-shadow:
    0 0 22px rgba(60,150,80,.16),
    0 0 44px rgba(40,110,60,.10),
    inset 0 1px 0 rgba(160,230,170,.08),
    inset 2px 0 0 rgba(60,30,10,.16) !important;
}
@keyframes vhTitleShimmer {
  0%,100% { background-position:   0% 50%; opacity:.90; }
  50%     { background-position: 260% 50%; opacity:1.0; }
}

/* Valheim status pills */
html.valheim-mode .status-online .fields > div:first-child .value {
  color: #7de0a8 !important;
  border: 1px solid rgba(80,200,130,.55) !important;
  box-shadow: 0 0 10px rgba(80,200,130,.40), 0 0 20px rgba(80,200,130,.18) !important;
}
html.valheim-mode .status-offline .fields > div:first-child .value {
  color: #c06040 !important;
  border: 1px solid rgba(190,80,50,.55) !important;
  box-shadow: 0 0 10px rgba(190,80,50,.38), 0 0 20px rgba(190,80,50,.16) !important;
}

/* =========================
   VALHEIM TOP-RIGHT WELCOME BANNER
========================= */
#w3b-valheim-banner {
  /* position/top/left/transform set inline by JS */
  pointer-events: none;
}
#w3b-valheim-banner .vh-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(90,160,110,.38);
  background: rgba(6,9,7,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0,0,0,.50), 0 0 18px rgba(80,170,110,.08);
  white-space: nowrap;
  animation: vh-pill-in .3s ease-out;
}
@keyframes vh-pill-in { from { transform: translateX(-50%) translateY(-6px); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } }
#w3b-valheim-banner .vh-pill-rune {
  font-weight: 900;
  color: rgba(110,200,140,.70);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(80,170,110,.30);
}
#w3b-valheim-banner .vh-pill-title {
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(215,235,215,.94);
  font-size: 12px;
}
#w3b-valheim-banner .vh-pill-sep {
  opacity: .35;
  font-size: 12px;
}
#w3b-valheim-banner .vh-pill-sub {
  font-weight: 700;
  color: rgba(170,195,165,.75);
  font-size: 12px;
  letter-spacing: .03em;
}

/* =====================================================================
   SERVERS / ARCADE THEME — Neon Arcade, random colour on load
   Scanlines, glow borders, pixel-feel section headers
===================================================================== */

html.wallpaper-on.servers-mode::before {
  filter: brightness(0.55) saturate(1.1) contrast(1.05);
}
html.wallpaper-on.servers-mode::after {
  background:
    radial-gradient(1200px 500px at 20% 0%,  var(--arc-a, rgba(0,245,255,.18)), transparent 60%),
    radial-gradient(900px  400px at 80% 0%,  var(--arc-b, rgba(255,0,200,.14)), transparent 55%),
    radial-gradient(600px  300px at 50% 100%,var(--arc-c, rgba(140,0,255,.12)), transparent 60%),
    radial-gradient(800px  350px at 0%  60%, var(--arc-d, rgba(0,255,140,.08)), transparent 55%);
}

/* Scanline overlay on servers tab */
html.servers-mode body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9990;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.06) 2px,
    rgba(0,0,0,.06) 4px
  );
}

/* Arcade neon section headings */
html.servers-mode h2:not(#w3bhead-neon-title *),
html.servers-mode h3:not(#w3bhead-neon-title *) {
  color: var(--neon-main) !important;
  text-shadow:
    0 0 10px var(--neon-main),
    0 0 22px var(--neon-main),
    0 0 40px var(--neon-accent);
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
}
html.servers-mode h2:not(#w3bhead-neon-title *)::before,
html.servers-mode h3:not(#w3bhead-neon-title *)::before {
  content: "▶ ";
  opacity: .70;
  font-size: .85em;
}

/* Service / widget card borders */
html.servers-mode :where(.service, .widget, .bookmark) {
  border-color: rgba(0,245,255,.20) !important;
  box-shadow:
    0 0 0 1px rgba(0,245,255,.06),
    0 0 18px rgba(0,245,255,.06),
    inset 0 1px 0 rgba(0,245,255,.06) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
html.servers-mode :where(.service, .widget, .bookmark):hover {
  border-color: var(--neon-main) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--neon-main) 30%, transparent),
    0 0 24px color-mix(in srgb, var(--neon-main) 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--neon-main) 12%, transparent) !important;
}

/* Service title links */
html.servers-mode a[class*="service-title"],
html.servers-mode a[class*="title"] {
  color: var(--neon-main) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--neon-main) 40%, transparent) !important;
}

/* ARCADE title treatment on servers tab */
html.servers-mode #w3bhead-neon-title .w3b-word-1 {
  color: rgba(255,255,255,.88);
  font-size: 16px;
  letter-spacing: .28em;
  text-shadow:
    0 0 8px var(--neon-main),
    0 0 20px var(--neon-main);
  animation: arc-word1-flicker 8s ease-in-out infinite;
}
html.servers-mode #w3bhead-neon-title .w3b-word-2 {
  color: #fff;
  font-size: 24px;
  letter-spacing: .22em;
  padding: 8px 22px;
  border-radius: 6px;
  border: 2px solid var(--neon-main);
  background: rgba(0,0,0,.50);
  text-shadow:
    0 0 10px var(--neon-main),
    0 0 22px var(--neon-main),
    0 0 44px var(--neon-accent);
  box-shadow:
    0 0 14px var(--neon-main),
    0 0 32px color-mix(in srgb, var(--neon-main) 40%, transparent),
    inset 0 0 20px color-mix(in srgb, var(--neon-main) 10%, transparent);
  animation: arc-glow-pulse 2.8s ease-in-out infinite;
}

@keyframes arc-glow-pulse {
  0%, 100% { box-shadow: 0 0 14px var(--neon-main), 0 0 32px color-mix(in srgb, var(--neon-main) 40%, transparent), inset 0 0 20px color-mix(in srgb, var(--neon-main) 10%, transparent); }
  50%       { box-shadow: 0 0 22px var(--neon-main), 0 0 55px color-mix(in srgb, var(--neon-main) 55%, transparent), inset 0 0 28px color-mix(in srgb, var(--neon-main) 16%, transparent); }
}
@keyframes arc-word1-flicker {
  0%,96%,100% { opacity: 1; }
  97%          { opacity: .4; }
  98%          { opacity: 1; }
  99%          { opacity: .6; }
}

/* Welcome banner pill — arcade style */
#w3b-servers-welcome-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px; border-radius: 6px;
  border: 1px solid var(--neon-main);
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--neon-main) 35%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--neon-main) 6%, transparent);
  white-space: nowrap;
  animation: arc-banner-in .4s ease-out;
  font-family: inherit;
}
#w3b-servers-welcome-pill .arc-pill-icon {
  font-size: 16px; flex: 0 0 auto;
  animation: arc-icon-bounce 2s ease-in-out infinite;
}
#w3b-servers-welcome-pill .arc-pill-title {
  font-weight: 900; letter-spacing: .16em; text-transform: uppercase; font-size: 12px;
  color: var(--neon-main);
  text-shadow: 0 0 10px var(--neon-main);
}
#w3b-servers-welcome-pill .arc-pill-sep { opacity: .35; font-size: 12px; }
#w3b-servers-welcome-pill .arc-pill-sub {
  font-weight: 700; color: rgba(255,255,255,.70); font-size: 12px; letter-spacing: .04em;
}
#w3b-servers-welcome-pill .arc-pill-cta {
  font-weight: 900; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--neon-accent);
  text-shadow: 0 0 8px var(--neon-accent);
  animation: arc-cta-pulse 1.6s ease-in-out infinite;
}
@keyframes arc-banner-in  { from { transform: translateX(-50%) translateY(-8px); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } }
@keyframes arc-icon-bounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes arc-cta-pulse  { 0%,100%{opacity:1} 50%{opacity:.5} }

/* =====================================================================
   TAB BAR — base styling to make tabs stand out
===================================================================== */

/* Target the nav/tab container — Homepage uses a flex row near the top */
nav, [role="tablist"], [class*="tab-list"], [class*="tabBar"], [class*="tabs-bar"],
[class*="navigation"] {
  background: rgba(0,0,0,.45) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

/* Per-mode tab bar accent line at bottom */
html.servers-mode nav,
html.servers-mode [role="tablist"] {
  border-bottom-color: rgba(0,245,255,.25) !important;
  box-shadow: 0 1px 0 0 rgba(0,245,255,.12), 0 4px 20px rgba(0,245,255,.06) !important;
}
html.cs2-mode nav,
html.cs2-mode [role="tablist"] {
  border-bottom-color: rgba(70,170,255,.25) !important;
  box-shadow: 0 1px 0 0 rgba(70,170,255,.12), 0 4px 20px rgba(70,170,255,.06) !important;
}
html.souls-mode nav,
html.souls-mode [role="tablist"] {
  border-bottom-color: rgba(255,122,61,.25) !important;
  box-shadow: 0 1px 0 0 rgba(255,122,61,.12), 0 4px 20px rgba(255,122,61,.06) !important;
}
html.valheim-mode nav,
html.valheim-mode [role="tablist"] {
  border-bottom-color: rgba(159,214,163,.25) !important;
  box-shadow: 0 1px 0 0 rgba(159,214,163,.12), 0 4px 20px rgba(159,214,163,.06) !important;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 780px) {
  #w3bhead-neon-title { top: 10px; left: 10px; }
  #w3bhead-neon-title .w3b-title { font-size: 16px !important; }
  #w3bhead-neon-title .w3b-word-1 { font-size: 13px !important; }
  #w3bhead-neon-title .w3b-word-2 { font-size: 18px !important; padding: 6px 12px !important; }
  #w3b-valheim-banner { top: 70px; }
  html.cs2-mode    :where(.service, .widget, .bookmark)::before,
  html.souls-mode  :where(.service, .widget, .bookmark)::before,
  html.valheim-mode :where(.service, .widget, .bookmark)::before { display: none; }
}

/* =====================================================================
   STARDEW VALLEY THEME — Soft green + golden wheat + pastoral warmth
===================================================================== */

html.wallpaper-on.stardew-mode::before {
  filter: brightness(0.70) saturate(0.90) contrast(1.05);
}
html.wallpaper-on.stardew-mode::after {
  background:
    radial-gradient(1400px 700px at 30% 0%,  rgba(80,160,80,.18),   transparent 58%),
    radial-gradient(1000px 600px at 70% 10%, rgba(200,180,60,.10),  transparent 55%),
    radial-gradient(800px  500px at 50% 95%, rgba(40,100,40,.22),   transparent 58%),
    linear-gradient(180deg, rgba(2,8,2,.50), rgba(5,12,3,.78));
}

html.stardew-mode {
  --card-bg:           rgba(8,12,8,.93);
  --card-border:       rgba(90,160,90,.30);
  --card-border-hover: rgba(126,200,126,.55);
  --text-main:  rgba(225,235,210,.94);
  --text-dim:   rgba(170,190,155,.70);
  --text-label: rgba(140,200,120,.80);
  --neon-main:   #7ec87e;
  --neon-accent: #f9d48b;
  --card-radius:       16px;
  --card-radius-inner: 10px;
}

html.stardew-mode :where(.service, .widget, .bookmark, .group, .card, .container-card) {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(200,230,180,.06),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 10px 38px rgba(0,0,0,.75),
    0 0 18px rgba(80,160,80,.08) !important;
}

html.stardew-mode :where(.service, .widget, .bookmark)::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(126,200,126,.25) 30%,
    rgba(200,210,100,.40) 55%,
    rgba(126,200,126,.22) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

html.stardew-mode :where(.service, .widget, .bookmark):hover {
  transform: translateY(-2px);
  border-color: rgba(126,200,126,.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(200,230,180,.10),
    0 0 26px rgba(100,180,80,.26),
    0 18px 58px rgba(0,0,0,.80) !important;
}

html.stardew-mode :where(.service, .widget, .bookmark)::after {
  box-shadow:
    0 0 18px rgba(100,180,80,.44),
    0 0 40px rgba(200,200,60,.20),
    0 0 70px rgba(60,130,50,.18) !important;
  animation: none !important;
}
html.stardew-mode :where(.service, .widget, .bookmark):hover::after {
  opacity: 1;
  animation: sdBreath 2.8s ease-in-out infinite !important;
}
@keyframes sdBreath {
  0%,100% { opacity:.60; }
  50%     { opacity:1.0; }
}

html.stardew-mode .group-title,
html.stardew-mode .section-title,
html.stardew-mode .header-title,
html.stardew-mode .w3b-section-heading,
html.stardew-mode h1:not(#w3bhead-neon-title *),
html.stardew-mode h2:not(#w3bhead-neon-title *),
html.stardew-mode h3:not(#w3bhead-neon-title *),
html.stardew-mode [class*="text-2xl"]:not(.service *):not(.widget *):not(.bookmark *),
html.stardew-mode [class*="text-xl"]:not(.service *):not(.widget *):not(.bookmark *) {
  letter-spacing: .20em !important;
  color: rgba(210,230,190,.92) !important;
  text-shadow:
    0 0 10px rgba(100,180,80,.28),
    0 0 24px rgba(80,150,60,.16),
    0 2px 0 rgba(0,0,0,.75) !important;
}
html.stardew-mode .group-title::before,
html.stardew-mode .section-title::before,
html.stardew-mode .w3b-section-heading::before,
html.stardew-mode h2:not(#w3bhead-neon-title *)::before,
html.stardew-mode h3:not(#w3bhead-neon-title *)::before {
  content: "🌱 ";
  margin-right: 6px;
}
html.stardew-mode .service-title,
html.stardew-mode .bookmark-title,
html.stardew-mode .widget-title {
  color: #7ec87e !important;
  text-shadow: 0 0 10px rgba(100,180,80,.35), 0 0 20px rgba(80,150,60,.18) !important;
}
html.stardew-mode .widget .label,
html.stardew-mode .service .label,
html.stardew-mode .bookmark .label {
  color: rgba(140,200,120,.80) !important;
}
html.stardew-mode a { color: #7ec87e !important; }
html.stardew-mode a:hover { color: #f9d48b !important; }

html.stardew-mode nav,
html.stardew-mode [role="tablist"] {
  border-bottom-color: rgba(126,200,126,.25) !important;
  box-shadow: 0 1px 0 0 rgba(126,200,126,.12), 0 4px 20px rgba(126,200,126,.06) !important;
}

html.stardew-mode #w3bhead-neon-title .w3b-word-1 {
  color: rgba(200,225,185,.90) !important;
  font-size: 16px !important;
  letter-spacing: .24em !important;
  text-shadow: 0 0 12px rgba(100,180,80,.28), 0 2px 0 rgba(0,0,0,.90) !important;
}
html.stardew-mode #w3bhead-neon-title .w3b-word-2 {
  color: transparent !important;
  font-size: 26px !important;
  letter-spacing: .20em !important;
  background: linear-gradient(90deg,
    #f0f4c0  0%,
    #c8e880 18%,
    #7ec87e 36%,
    #f9d48b 55%,
    #7ec87e 72%,
    #c8e880 88%,
    #f0f4c0 100%
  ) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: sdTitleShimmer 5s ease-in-out infinite !important;
  border: 1px solid rgba(100,180,80,.30) !important;
  background-color: transparent !important;
  border-radius: 12px !important;
  padding: 8px 20px !important;
  box-shadow: 0 0 20px rgba(80,160,60,.14), inset 0 1px 0 rgba(180,230,150,.08) !important;
}
@keyframes sdTitleShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 260% 50%; }
}


/* =====================================================================
   V RISING THEME — Blood crimson + tarnished gold + vampire darkness
===================================================================== */

html.wallpaper-on.v-rising-mode::before {
  filter: brightness(0.60) saturate(0.85) contrast(1.10);
}
html.wallpaper-on.v-rising-mode::after {
  background:
    radial-gradient(1400px 700px at 50% -10%, rgba(160,20,20,.22),  transparent 58%),
    radial-gradient(900px  600px at 15% 20%,  rgba(120,10,10,.18),  transparent 55%),
    radial-gradient(900px  500px at 85% 15%,  rgba(180,80,20,.10),  transparent 58%),
    radial-gradient(600px  400px at 50% 100%, rgba(80,10,10,.35),   transparent 55%),
    linear-gradient(180deg, rgba(4,0,0,.60), rgba(8,2,2,.88));
}

html.v-rising-mode {
  --card-bg:           rgba(10,4,4,.94);
  --card-border:       rgba(160,30,30,.35);
  --card-border-hover: rgba(200,50,50,.60);
  --text-main:  rgba(240,200,190,.94);
  --text-dim:   rgba(190,150,140,.70);
  --text-label: rgba(200,120,110,.78);
  --neon-main:   #c0392b;
  --neon-accent: #c9a84c;
  --card-radius:       14px;
  --card-radius-inner: 8px;
}

html.v-rising-mode :where(.service, .widget, .bookmark, .group, .card, .container-card) {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,150,130,.05),
    inset 0 -1px 0 rgba(0,0,0,.65),
    0 10px 40px rgba(0,0,0,.85),
    0 0 20px rgba(140,20,20,.10) !important;
}

html.v-rising-mode :where(.service, .widget, .bookmark)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180,30,30,.35) 30%,
    rgba(220,80,50,.55) 55%,
    rgba(180,30,30,.30) 75%,
    transparent 100%
  );
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  pointer-events: none;
  z-index: 1;
}

html.v-rising-mode :where(.service, .widget, .bookmark):hover {
  transform: translateY(-2px);
  border-color: rgba(200,50,50,.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,150,130,.10),
    0 0 28px rgba(180,30,30,.30),
    0 0 14px rgba(160,20,20,.22),
    0 18px 60px rgba(0,0,0,.90) !important;
}

html.v-rising-mode :where(.service, .widget, .bookmark)::after {
  box-shadow:
    0 0 18px rgba(180,30,30,.55),
    0 0 40px rgba(160,20,20,.35),
    0 0 80px rgba(120,10,10,.22) !important;
  animation: none !important;
}
html.v-rising-mode :where(.service, .widget, .bookmark):hover::after {
  opacity: 1;
  animation: vrBloodPulse 2.4s ease-in-out infinite !important;
}
@keyframes vrBloodPulse {
  0%,100% { opacity:.65; filter: brightness(1.0); }
  50%     { opacity:1.0; filter: brightness(1.20); }
}

html.v-rising-mode .group-title,
html.v-rising-mode .section-title,
html.v-rising-mode .header-title,
html.v-rising-mode .w3b-section-heading,
html.v-rising-mode h1:not(#w3bhead-neon-title *),
html.v-rising-mode h2:not(#w3bhead-neon-title *),
html.v-rising-mode h3:not(#w3bhead-neon-title *),
html.v-rising-mode [class*="text-2xl"]:not(.service *):not(.widget *):not(.bookmark *),
html.v-rising-mode [class*="text-xl"]:not(.service *):not(.widget *):not(.bookmark *) {
  letter-spacing: .22em !important;
  color: rgba(240,190,180,.92) !important;
  text-shadow:
    0 0 12px rgba(180,30,30,.45),
    0 0 26px rgba(150,20,20,.25),
    0 2px 0 rgba(0,0,0,.85) !important;
}
html.v-rising-mode .group-title::before,
html.v-rising-mode .section-title::before,
html.v-rising-mode .w3b-section-heading::before,
html.v-rising-mode h2:not(#w3bhead-neon-title *)::before,
html.v-rising-mode h3:not(#w3bhead-neon-title *)::before {
  content: "🩸 ";
  margin-right: 6px;
}
html.v-rising-mode .service-title,
html.v-rising-mode .bookmark-title,
html.v-rising-mode .widget-title {
  color: #c0392b !important;
  text-shadow: 0 0 10px rgba(180,30,30,.40), 0 0 22px rgba(150,20,20,.22) !important;
}
html.v-rising-mode .widget .label,
html.v-rising-mode .service .label,
html.v-rising-mode .bookmark .label {
  color: rgba(200,120,110,.78) !important;
}
html.v-rising-mode .service-description,
html.v-rising-mode .bookmark-description,
html.v-rising-mode .subtitle,
html.v-rising-mode .description { color: rgba(170,130,120,.70) !important; }
html.v-rising-mode a { color: #c0392b !important; text-shadow: 0 0 8px rgba(180,30,30,.22); }
html.v-rising-mode a:hover { color: #c9a84c !important; text-shadow: 0 0 10px rgba(200,160,60,.35); }

html.v-rising-mode nav,
html.v-rising-mode [role="tablist"] {
  border-bottom-color: rgba(192,57,43,.25) !important;
  box-shadow: 0 1px 0 0 rgba(192,57,43,.12), 0 4px 20px rgba(192,57,43,.06) !important;
}

html.v-rising-mode .status-online .fields > div:first-child .value {
  color: #c0392b !important;
  border: 1px solid rgba(192,57,43,.60) !important;
  box-shadow: 0 0 10px rgba(192,57,43,.45), 0 0 22px rgba(192,57,43,.20) !important;
}
html.v-rising-mode .status-offline .fields > div:first-child .value {
  color: #555 !important;
  border: 1px solid rgba(100,100,100,.40) !important;
  box-shadow: none !important;
}

html.v-rising-mode #w3bhead-neon-title .w3b-word-1 {
  color: rgba(220,175,165,.88) !important;
  font-size: 16px !important;
  letter-spacing: .24em !important;
  text-shadow: 0 0 14px rgba(180,30,30,.32), 0 2px 0 rgba(0,0,0,.95) !important;
}
html.v-rising-mode #w3bhead-neon-title .w3b-word-2 {
  color: transparent !important;
  font-size: 26px !important;
  letter-spacing: .20em !important;
  background: linear-gradient(90deg,
    #f5d0c0  0%,
    #e88060 16%,
    #c0392b 32%,
    #c9a84c 50%,
    #c0392b 68%,
    #e88060 84%,
    #f5d0c0 100%
  ) !important;
  background-size: 260% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: vrTitleShimmer 4s ease-in-out infinite !important;
  border: 1px solid rgba(180,30,30,.38) !important;
  border-bottom: 1px solid rgba(60,5,5,.60) !important;
  background-color: transparent !important;
  border-radius: 10px !important;
  padding: 8px 20px !important;
  box-shadow:
    0 0 26px rgba(160,20,20,.20),
    0 0 50px rgba(140,10,10,.12),
    inset 0 1px 0 rgba(255,180,150,.07),
    inset 0 -2px 0 rgba(0,0,0,.50) !important;
}
@keyframes vrTitleShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 260% 50%; }
}