/* Generated by website/tools/recolor_layout.py from layouts/void/assets/css/shadow-theme.css. Do not edit: */
/* re-run the installer. Our own rules are in chaos.css. */
/* ── CSS Variables ── */
:root {
  --s-bg:        #050405;
  --s-bg2:       #0d0b0e;
  --s-panel:     rgba(28,23,26,0.94);
  --s-panel2:    rgba(42,34,38,0.90);
  --s-red:       #b8160f;   /* primary violet (var name kept for compatibility) */
  --s-red2:      #e03a1e;   /* bright violet */
  --s-orange:    #d9a53a;   /* magenta-violet accent */
  --s-gold:      #d9a53a;   /* amber (complements purple) */
  --s-gold2:     #f6cf72;
  --s-text:      #d6c9ae;   /* lavender text */
  --s-muted:     #8c8070;   /* muted purple */
  --s-border:    rgba(189,51,42,0.30);
  --s-border2:   rgba(206,56,45,0.55);
  --r: 8px;
  --glow-r:  0 0 28px rgba(184,22,15,.55), 0 0 70px rgba(184,22,15,.18);
  --glow-g:  0 0 28px rgba(217,165,58,.45), 0 0 60px rgba(217,165,58,.15);
  --glow-o:  0 0 28px rgba(217,165,58,.45),  0 0 60px rgba(217,165,58,.15);
}

/* ── Metin2 brand fonts (authentic Eason/Cronos) ── */
/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--s-bg);
  color: var(--s-text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
/* Animated nebula behind everything */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 50% 50% at 18% 22%, rgba(172,47,38,.14) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 82% 38%, rgba(181,49,40,.10) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 50% 88%, rgba(172,47,38,.12) 0%, transparent 65%),
    var(--s-bg);
  background-attachment: fixed;
  animation: shNebula 24s ease-in-out infinite alternate;
}
@keyframes shNebula {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; filter: hue-rotate(0deg); }
  100% { background-position: 4% 3%, -4% -3%, 2% -4%, 0 0; filter: hue-rotate(0deg); }
}
a { color: #e8b84a; text-decoration: none; }
a:hover { color: var(--s-gold); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--s-bg); }
::-webkit-scrollbar-thumb { background: var(--s-red); border-radius: 3px; }

/* ══════════════════════════════
   HEADER
══════════════════════════════ */
.sh-header {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
  background: #050405;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* full width edge-to-edge + zoom-out framing (tall element, width-driven cover) */
.sh-header-video {
  position: absolute;
  width: 100%;
  height: 178%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  object-fit: cover;
  object-position: center 36%;
  opacity: 0;
  transition: opacity 1.8s ease;
  filter: brightness(0.94) saturate(1.12);
  z-index: 1;
}
.sh-header-video.is-playing { opacity: 0.78; }
/* class toggled from JS (cross-browser; avoids :has() which Firefox/Safari
   older versions don't support) */
.sh-header.sh-video-on .sh-scene {
  opacity: 0;
  transition: opacity 1.8s ease;
  pointer-events: none;
}

.sh-header-overlay {
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(5,4,5,.5) 0%, rgba(5,4,5,.06) 34%, rgba(5,4,5,.15) 58%, rgba(5,4,5,.96) 100%),
    radial-gradient(ellipse 75% 65% at 50% 40%, rgba(206,56,45,.16) 0%, transparent 72%);
  pointer-events: none;
}
/* grain removed from overlay — lighter on GPU */
.sh-header-overlay::before { display: none; }
.sh-header-overlay::after { display: none; }

/* ══════════════════════════════
   ANIMATED METIN2-INSPIRED SCENE (pure CSS)
══════════════════════════════ */
.sh-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.sh-scene > div { position: absolute; left: 0; right: 0; }

/* Deep mystical sky */
.sh-scene-sky {
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 18%, rgba(181,49,40,.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 30%, rgba(198,54,44,.18) 0%, transparent 55%),
    linear-gradient(180deg, #2c2428 0%, #0d0b0e 38%, #1e191c 70%, #050405 100%);
}

/* Twinkling star field (layered radial dots, animated) */
.sh-scene-stars {
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(247,237,215,.9), transparent),
    radial-gradient(1.5px 1.5px at 28% 12%, rgba(247,231,198,.8), transparent),
    radial-gradient(1px 1px at 42% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 63% 15%, rgba(247,233,204,.85), transparent),
    radial-gradient(1px 1px at 75% 26%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 18%, rgba(247,229,192,.8), transparent),
    radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 18% 38%, rgba(247,235,210,.6), transparent);
  background-repeat: no-repeat;
  animation: shTwinkle 5s ease-in-out infinite;
}
@keyframes shTwinkle { 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* Aurora energy waves */
.sh-scene-aurora {
  top: -10%; height: 70%;
  background:
    radial-gradient(ellipse 50% 40% at 30% 40%, rgba(206,56,45,.20), transparent 70%),
    radial-gradient(ellipse 55% 45% at 70% 35%, rgba(189,51,42,.16), transparent 70%);
  filter: blur(20px);
  animation: shAurora 14s ease-in-out infinite alternate;
}
@keyframes shAurora {
  0%   { transform: translateX(-4%) scaleY(1);   opacity:.7; }
  100% { transform: translateX(4%)  scaleY(1.1); opacity:1; }
}

/* Glowing moon / portal */
.sh-scene > div.sh-scene-moon {
  top: 7%; left: 50%; right: auto; width: 150px; height: 150px;
  margin-left: -75px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #f3e6ff 0%, #f7e5c0 32%, #bc3329 62%, #5a0a0a 85%, transparent 100%);
  box-shadow: 0 0 70px 24px rgba(206,56,45,.45), 0 0 140px 60px rgba(189,51,42,.25);
  animation: shMoonPulse 7s ease-in-out infinite;
}
@keyframes shMoonPulse {
  0%,100% { box-shadow: 0 0 70px 24px rgba(206,56,45,.45), 0 0 140px 60px rgba(189,51,42,.25); }
  50%     { box-shadow: 0 0 90px 30px rgba(219,60,48,.55), 0 0 170px 80px rgba(202,55,44,.30); }
}

/* Layered mountain silhouettes via clip-path */
.sh-scene-mtn { bottom: 0; height: 60%; background-size: cover; }
.sh-mtn-back {
  height: 52%;
  background: linear-gradient(180deg, #241f27 0%, #352c30 100%);
  clip-path: polygon(0 62%, 10% 48%, 22% 58%, 34% 40%, 46% 55%, 58% 38%, 70% 52%, 82% 42%, 92% 56%, 100% 46%, 100% 100%, 0 100%);
  opacity: .55;
  animation: shDrift1 26s ease-in-out infinite alternate;
}
.sh-mtn-mid {
  height: 44%;
  background: linear-gradient(180deg, #392f34 0%, #241e21 100%);
  clip-path: polygon(0 70%, 14% 52%, 26% 66%, 40% 46%, 52% 62%, 66% 44%, 78% 60%, 90% 48%, 100% 64%, 100% 100%, 0 100%);
  opacity: .8;
  animation: shDrift2 32s ease-in-out infinite alternate;
}
.sh-mtn-front {
  height: 34%;
  background: linear-gradient(180deg, #1e191c 0%, #050405 100%);
  clip-path: polygon(0 80%, 12% 60%, 28% 76%, 42% 56%, 56% 72%, 72% 54%, 86% 70%, 100% 58%, 100% 100%, 0 100%);
}
@keyframes shDrift1 { 0%{transform:translateX(-1.5%);} 100%{transform:translateX(1.5%);} }
@keyframes shDrift2 { 0%{transform:translateX(1.5%);}  100%{transform:translateX(-1.5%);} }

/* Drifting fog/mist layers */
.sh-scene-fog {
  bottom: 0; height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(181,49,40,.06) 40%, rgba(163,44,36,.16) 100%);
  filter: blur(8px);
}
.sh-fog-1 {
  background-image: radial-gradient(ellipse 60% 100% at 25% 100%, rgba(198,54,44,.22), transparent 70%);
  animation: shFog 18s ease-in-out infinite alternate;
}
.sh-fog-2 {
  background-image: radial-gradient(ellipse 60% 100% at 72% 100%, rgba(189,51,42,.18), transparent 70%);
  animation: shFog 22s ease-in-out infinite alternate-reverse;
}
@keyframes shFog {
  0%   { transform: translateX(-6%); opacity: .6; }
  100% { transform: translateX(6%);  opacity: 1; }
}

@media (max-width: 768px) {
  .sh-scene-moon { width: 100px; height: 100px; margin-left: -50px; }
}

/* Animated top line */
.sh-header-top-line {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10;
  background: linear-gradient(90deg,
    transparent 0%, rgba(184,22,15,0) 10%,
    var(--s-red) 35%, var(--s-orange) 50%,
    var(--s-red) 65%, rgba(184,22,15,0) 90%, transparent 100%);
  animation: shTopLine 3.5s ease-in-out infinite;
}
@keyframes shTopLine {
  0%,100% { opacity: .7; filter: blur(0); }
  50% { opacity: 1; filter: blur(1px) brightness(1.6); }
}

/* Particle canvas */
#sh-canvas {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ── Navigation — see css/shadow-ui.css for asset buttons ── */

/* ── Logo (real PNG artwork + GLOBAL wordmark) ── */
.sh-logo {
  position: relative; z-index: 5;
  margin-top: 20px;
  text-align: center;
  align-self: center;
}
.sh-logo-link {
  display: inline-flex; flex-direction: column; align-items: center;
  text-decoration: none;
}
.sh-logo-img {
  width: auto; max-width: 92%; height: auto;
  max-height: 200px;
  filter: drop-shadow(0 0 30px rgba(206,56,45,.6)) drop-shadow(0 8px 18px rgba(0,0,0,.55));
  animation: shLogoFloat 6s ease-in-out infinite;
}
@keyframes shLogoFloat {
  0%,100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 26px rgba(206,56,45,.55)) drop-shadow(0 6px 14px rgba(0,0,0,.55));
  }
  50% {
    transform: translateY(-6px);
    filter: drop-shadow(0 0 40px rgba(219,60,48,.85)) drop-shadow(0 8px 18px rgba(0,0,0,.5));
  }
}
/* "GLOBAL" wordmark under the artwork */
.sh-logo-global {
  margin-top: 4px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 26px; font-weight: 700;
  letter-spacing: 18px; text-indent: 18px;
  background: linear-gradient(180deg, #fff7df 0%, var(--s-gold2) 45%, var(--s-gold) 75%, #a87420 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(217,165,58,.65));
  position: relative;
}
.sh-logo-global::before,
.sh-logo-global::after {
  content: ""; position: absolute; top: 50%; width: 90px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--s-gold));
}
.sh-logo-global::before { left: -104px; }
.sh-logo-global::after  { right: -104px; transform: scaleX(-1); }

/* ── Header Bottom Row ── */
.sh-header-bottom {
  position: relative; z-index: 6;
  width: 100%; max-width: 1120px;
  align-self: center;
  display: flex; justify-content: center; align-items: stretch; gap: 20px;
  margin-top: auto; padding: 0 24px 36px;
}

@keyframes shPanelTop {
  0%,100% { opacity: .7; }
  50% { opacity: 1; filter: blur(.5px) brightness(1.4); }
}

/* Server Block */
.sh-server-block {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(206,56,45,.22), transparent 70%),
    linear-gradient(180deg, rgba(40,33,36,.88), rgba(23,19,21,.92));
  border: 1px solid var(--s-border2); border-radius: 12px;
  padding: 14px 26px 13px; min-width: 195px;
  box-shadow: 0 10px 34px rgba(0,0,0,.5), var(--glow-r), inset 0 0 40px rgba(181,49,40,.12);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
}
.sh-server-block:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(219,60,48,.7);
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 36px rgba(206,56,45,.35), inset 0 0 50px rgba(181,49,40,.16);
}
/* animated glowing rim */
.sh-server-block::before {
  content: ''; position: absolute; inset: -1px; border-radius: 12px; padding: 1px;
  background: linear-gradient(130deg, transparent 20%, rgba(219,60,48,.65) 45%, rgba(217,165,58,.5) 55%, transparent 80%);
  background-size: 250% 250%;
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: shRimFlow 5s linear infinite; pointer-events: none;
}
@keyframes shRimFlow { 0%{background-position:0% 50%;} 100%{background-position:250% 50%;} }
.sh-server-label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--s-muted); margin-bottom: 5px; }
.sh-server-count {
  font-size: 36px; font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, #fff5d8, var(--s-gold2), var(--s-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(217,165,58,.6));
}
.sh-online-dot {
  display: inline-block; width: 9px; height: 9px;
  background: #2ecc71; border-radius: 50%; margin-right: 7px; vertical-align: middle;
  box-shadow: 0 0 10px #2ecc71, 0 0 18px rgba(46,204,113,.6);
  animation: shDotPulse 2s ease-in-out infinite;
}
@keyframes shDotPulse {
  0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #2ecc71, 0 0 18px rgba(46,204,113,.6); }
  50% { opacity: .55; transform: scale(.65); box-shadow: 0 0 6px #2ecc71; }
}
.sh-server-sub { font-size: 11px; color: var(--s-muted); margin-top: 7px; }
.sh-server-sub strong { color: #f7e6c2; }

/* Language picker */
.sh-lang-picker {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(184,22,15,.18);
}
.sh-lang-picker a img {
  width: 22px; height: 15px; border-radius: 3px; opacity: .65;
  border: 1px solid rgba(206,56,45,.25);
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.sh-lang-picker a:hover img { opacity: 1; transform: translateY(-2px) scale(1.12); box-shadow: 0 4px 10px rgba(172,47,38,.5); }

/* Download Block */
.sh-download-block {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 200px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(217,165,58,.16), transparent 70%),
    linear-gradient(135deg, rgba(184,22,15,.20) 0%, rgba(217,165,58,.10) 100%);
  border: 1px solid var(--s-border2); border-radius: var(--r);
  overflow: hidden; cursor: pointer;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  box-shadow: var(--glow-r); padding: 16px 28px; text-align: center;
  text-decoration: none;
}
.sh-download-block::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  background-size: 200% 100%;
  animation: shShimmer 3.5s ease-in-out infinite;
}
.sh-download-block::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--s-red2), var(--s-gold), var(--s-red2), transparent);
  background-size: 200% 100%;
  animation: shRimFlow 5s linear infinite;
  pointer-events: none;
}
@keyframes shShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.sh-download-block:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(217,165,58,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.45), var(--glow-o);
}
.sh-dl-icon {
  position: relative; z-index: 2;
  font-size: 34px; color: var(--s-gold); margin-bottom: 10px;
  filter: drop-shadow(0 0 12px rgba(217,165,58,.55));
  animation: shDlBounce 2.2s ease-in-out infinite;
}
.sh-download-block:hover .sh-dl-icon { animation-duration: 1s; }
@keyframes shDlBounce {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 12px rgba(217,165,58,.55)); }
  45%      { transform: translateY(7px); filter: drop-shadow(0 0 22px rgba(255,200,80,.9)); }
  55%      { transform: translateY(7px); }
}
.sh-dl-title {
  position: relative; z-index: 2;
  font-size: 18px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase;
  background: linear-gradient(135deg, var(--s-gold), var(--s-gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 10px rgba(217,165,58,.6)); margin-bottom: 6px;
}
.sh-dl-meta { position: relative; z-index: 2; font-size: 11px; color: var(--s-muted); line-height: 1.8; }

/* Download page — animated hero icon */
.sh-download-hero {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 0 auto 20px;
}
.sh-download-hero-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin: 0;
  animation: shDlBounce 2.2s ease-in-out infinite;
}
.sh-download-hero-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(217,165,58,.85);
  border-right-color: rgba(184,22,15,.55);
  animation: shDlRingSpin 3.5s linear infinite;
  pointer-events: none;
}
.sh-download-hero-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(217,165,58,.35);
  animation: shDlPulse 2.4s ease-out infinite;
  pointer-events: none;
}
.sh-download-hero-pulse--2 {
  animation-delay: 1.2s;
  border-color: rgba(184,22,15,.3);
}
@keyframes shDlRingSpin {
  to { transform: rotate(360deg); }
}
@keyframes shDlPulse {
  0%   { transform: scale(.72); opacity: .9; }
  70%  { opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ══════════════════════════════
   LAYOUT
══════════════════════════════ */
#sh-content { background: linear-gradient(180deg, rgba(5,4,5,0) 0%, var(--s-bg) 60px); }
.sh-page-wrap {
  width: 100%; max-width: 1680px; margin: 0 auto;
  padding: 20px 20px 0;
  display: grid;
  grid-template-columns: 270px 1fr 270px;
  gap: 18px; align-items: start;
}
@media (min-width: 1500px) {
  html { font-size: 15px; }
  .sh-page-wrap {
    max-width: 1780px;
    padding: 22px 28px 0;
    grid-template-columns: 290px 1fr 290px;
    gap: 22px;
  }
  .sh-header { height: 600px; }
  .sh-logo-img { max-height: 220px; }
  .sh-header-bottom { max-width: 1240px; }
}

/* ══════════════════════════════
   SIDEBAR PANEL
══════════════════════════════ */
.sh-panel {
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(206,56,45,.10), transparent 55%),
    var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: var(--r); overflow: hidden;
  position: relative; margin-bottom: 14px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(219,60,48,.07);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s;
}
.sh-panel:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: var(--s-border2);
  box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 28px rgba(184,22,15,.22), inset 0 1px 0 rgba(219,60,48,.12);
}
.sh-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--s-red2), var(--s-gold), var(--s-red2), transparent);
  background-size: 200% 100%;
  animation: shRimFlow 5s linear infinite;
}
.sh-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(125deg, transparent 38%, rgba(219,60,48,.06) 50%, transparent 62%);
  background-size: 240% 100%;
  opacity: 0; transition: opacity .4s;
  animation: shPanelShine 7s ease-in-out infinite;
}
.sh-panel:hover::after { opacity: 1; }
@keyframes shPanelShine {
  0%, 100% { background-position: 200% 0; }
  50%      { background-position: -60% 0; }
}
.sh-panel-title {
  position: relative; z-index: 1;
  padding: 10px 14px 9px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700;
  color: #e8b84a;
  border-bottom: 1px solid var(--s-border);
  background: linear-gradient(180deg, rgba(184,22,15,.14), rgba(184,22,15,.06));
  display: flex; align-items: center; gap: 7px;
}
.sh-panel-title i { color: var(--s-red); font-size: 11px; }
.sh-panel-body { position: relative; z-index: 1; padding: 12px 14px; }

@keyframes shDropIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.sh-btn-full { width: 100%; text-align: center; }

/* ══════════════════════════════
   FORMS
══════════════════════════════ */
.sh-form-group { margin-bottom: 12px; }
.sh-form-group label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--s-muted); margin-bottom: 5px;
}
.sh-input {
  width: 100%; padding: 9px 12px;
  background: rgba(184,22,15,.07);
  border: 1px solid var(--s-border2); border-radius: 5px;
  color: #e8c0b0; font-size: 13px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.sh-input:focus {
  border-color: var(--s-red);
  box-shadow: 0 0 0 3px rgba(184,22,15,.15);
}
.sh-input::placeholder { color: var(--s-muted); }
.sh-form-links {
  display: flex; justify-content: space-between;
  margin-top: 8px; font-size: 11px;
}
.sh-form-links a { color: var(--s-muted); }
.sh-form-links a:hover { color: var(--s-gold); }
.sh-alert {
  padding: 10px 14px; border-radius: 5px; font-size: 12px; margin-bottom: 12px;
}
.sh-alert-success { background: rgba(46,204,113,.15); border: 1px solid rgba(46,204,113,.3); color: #2ecc71; }
.sh-alert-error   { background: rgba(184,22,15,.15);  border: 1px solid rgba(184,22,15,.3);  color: #ff6040; }
.sh-alert-info    { background: rgba(217,165,58,.12); border: 1px solid rgba(217,165,58,.3); color: var(--s-gold); }

/* ══════════════════════════════
   USER PANEL (sidebar)
══════════════════════════════ */
.sh-user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sh-user-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--s-red), var(--s-orange));
  border: 2px solid var(--s-border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #ffffff; font-weight: 700;
  box-shadow: 0 0 14px rgba(184,22,15,.4);
}
.sh-user-name { font-weight: 700; color: #e2d6bd; font-size: 14px; }
.sh-user-role { font-size: 10px; letter-spacing: 1px; color: var(--s-muted); text-transform: uppercase; }
.sh-currency-row {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.sh-currency-box {
  flex: 1; padding: 8px 10px; border-radius: 5px; text-align: center;
  background: rgba(184,22,15,.08); border: 1px solid var(--s-border);
}
.sh-currency-label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--s-muted); }
.sh-currency-value { font-size: 16px; font-weight: 700; color: var(--s-gold); }
.sh-user-links a {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 5px; font-size: 12px; color: var(--s-text);
  border-bottom: 1px solid rgba(184,22,15,.07);
  transition: background .15s, color .15s;
}
.sh-user-links a:hover { background: rgba(184,22,15,.1); color: var(--s-gold); }
.sh-user-links a i { width: 14px; text-align: center; color: var(--s-red); }
.sh-logout-btn {
  margin-top: 10px; background: rgba(184,22,15,.12);
  border: 1px solid rgba(184,22,15,.3); color: #e8b84a;
}
.sh-logout-btn:hover { background: rgba(184,22,15,.25); color: #ffffff; }

/* ══════════════════════════════
   INVENTORY PANEL
══════════════════════════════ */
.sh-inventory-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  margin-top: 8px;
}
.sh-inv-slot {
  width: 100%; aspect-ratio: 1;
  background: rgba(184,22,15,.07);
  border: 1px solid rgba(184,22,15,.2); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--s-muted); overflow: hidden;
  position: relative; transition: border-color .2s;
}
.sh-inv-slot:hover { border-color: var(--s-red); }
.sh-inv-slot.filled { border-color: rgba(217,165,58,.4); background: rgba(217,165,58,.06); }
.sh-inv-slot .sh-item-count {
  position: absolute; bottom: 1px; right: 2px;
  font-size: 9px; font-weight: 700; color: var(--s-gold);
  text-shadow: 0 0 4px rgba(0,0,0,.8);
}
.sh-inv-vnum { font-size: 8px; color: var(--s-muted); text-align: center; word-break: break-all; }
.sh-inv-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.sh-inv-tab {
  padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; border-radius: 4px; cursor: pointer;
  background: rgba(184,22,15,.1); border: 1px solid var(--s-border);
  color: var(--s-muted); transition: all .2s;
}
.sh-inv-tab.active { background: rgba(184,22,15,.25); border-color: var(--s-red); color: #e8b84a; }
.sh-inv-tab:hover { color: #e7dbc5; border-color: var(--s-border2); }

/* Inventory item card grid */
.sh-inv-wrap {
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--s-border);
}
.sh-inv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap: 10px;
}
.sh-inv-item {
  position: relative;
  display: flex; gap: 10px; align-items: center;
  background: linear-gradient(135deg, rgba(184,22,15,.10), rgba(184,22,15,.03));
  border: 1px solid var(--s-border); border-radius: 7px;
  padding: 9px 11px; transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.sh-inv-item:hover {
  border-color: var(--s-border2);
  background: linear-gradient(135deg, rgba(184,22,15,.20), rgba(217,165,58,.06));
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(172,47,38,.25);
  z-index: 30;
}
.sh-inv-item-icon {
  position: relative; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(189,51,42,.22), rgba(52,43,48,.92));
  border: 1px solid var(--s-border2);
  box-shadow: inset 0 0 12px rgba(206,56,45,.25);
  overflow: hidden;
}
.sh-inv-item-icon img {
  max-width: 40px; max-height: 40px; width: auto; height: auto;
  object-fit: contain; image-rendering: -webkit-optimize-contrast;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.sh-inv-fallback { align-items: center; justify-content: center; color: #f7ead0; font-size: 19px; }
.sh-inv-count {
  position: absolute; bottom: -3px; right: -3px;
  background: var(--s-gold); color: #17141a;
  font-size: 9px; font-weight: 800; line-height: 1;
  padding: 2px 4px; border-radius: 8px; border: 1px solid rgba(0,0,0,.35);
}
.sh-inv-item-info { min-width: 0; flex: 1; }
.sh-inv-item-name {
  font-size: 12px; font-weight: 700; color: #f3ead6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-inv-item-vnum { font-size: 10px; color: var(--s-muted); margin-top: 2px; }
.sh-inv-item-sockets { font-size: 10px; color: var(--s-gold); margin-top: 2px; }

/* Game-style item tooltip */
.sh-inv-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(6px);
  min-width: 210px; max-width: 280px;
  background: linear-gradient(180deg, rgba(32,26,29,.98), rgba(21,17,19,.98));
  border: 1px solid var(--s-border2); border-radius: 8px;
  padding: 10px 12px; z-index: 60;
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 22px rgba(172,47,38,.30);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.sh-inv-item.has-tip:hover .sh-inv-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.sh-inv-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--s-border2);
}
.sh-tip-name { font-size: 13px; font-weight: 800; color: #ffe9b0; margin-bottom: 5px; line-height: 1.3; }
.sh-tip-lv   { font-size: 11px; color: #e8b878; margin-bottom: 4px; }
.sh-tip-base { font-size: 11px; color: #ffffff; margin: 1px 0; }
.sh-tip-bonus{ font-size: 11px; color: #8fd0ff; margin: 1px 0; }
.sh-tip-socket{ font-size: 11px; color: var(--s-gold); margin-top: 5px; }
.sh-tip-foot { font-size: 10px; color: var(--s-muted); margin-top: 5px; font-style: italic; }

.sh-char-active { border-color: var(--s-red2) !important; box-shadow: 0 0 22px rgba(184,22,15,.35); }

/* ══════════════════════════════
   STATS TABLE (sidebar)
══════════════════════════════ */
.sh-stats-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sh-stats-table tr { border-bottom: 1px solid rgba(184,22,15,.08); }
.sh-stats-table tr:last-child { border-bottom: none; }
.sh-stats-table th { padding: 7px 0; color: var(--s-muted); font-weight: 400; text-align: left; }
.sh-stats-table td { padding: 7px 0; color: #e2d6bd; text-align: right; font-weight: 600; }

/* ══════════════════════════════
   FAST LINKS (sidebar)
══════════════════════════════ */
.sh-fast-links a {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px;
  border-radius: 5px; font-size: 12px; color: var(--s-text);
  border-bottom: 1px solid rgba(184,22,15,.07);
  transition: background .15s, color .15s;
}
.sh-fast-links a:hover { background: rgba(184,22,15,.1); color: var(--s-gold); }
.sh-fast-links a i { width: 14px; text-align: center; color: var(--s-red); font-size: 12px; }

/* Vote Buttons */
.sh-vote-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 8px; cursor: pointer;
  transition: transform .2s, box-shadow .2s; text-decoration: none;
}
.sh-vote-btn:last-child { margin-bottom: 0; }
.sh-vote-red {
  background: linear-gradient(135deg, rgba(184,22,15,.22), rgba(217,165,58,.10));
  border: 1px solid rgba(184,22,15,.5); color: #e8b84a;
}
.sh-vote-red:hover { transform: translateY(-2px); box-shadow: var(--glow-r); color: #ff8060; }
.sh-vote-green {
  background: linear-gradient(135deg, rgba(46,204,113,.18), rgba(46,204,113,.05));
  border: 1px solid rgba(46,204,113,.4); color: #2ecc71;
}
.sh-vote-green:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(46,204,113,.4); }

/* ══════════════════════════════
   MAIN CONTENT
══════════════════════════════ */
.sh-main { min-width: 0; }
.sh-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--s-border); margin-bottom: 18px; }
.sh-tab-btn {
  padding: 10px 18px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--s-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .2s, border-color .2s;
}
.sh-tab-btn.active { color: #e8b84a; border-bottom-color: var(--s-red); }
.sh-tab-btn:hover { color: var(--s-text); }

@keyframes shFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ══════════════════════════════
   FEATURED NEWS — cinematic war-banner
══════════════════════════════ */
.sh-feat {
  position: relative; display: block;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--s-border2);
  min-height: 280px; margin-bottom: 30px;
  background: #0d0b0e; text-decoration: none;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 0 60px rgba(181,49,40,.15);
}
.sh-feat::after { /* animated top rune-line */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: linear-gradient(90deg, transparent, var(--s-red2), var(--s-gold), var(--s-red2), transparent);
  background-size: 200% 100%; animation: shRimFlow 5s linear infinite;
}
.sh-feat-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center right;
  transition: transform 6s ease;
}
.sh-feat:hover .sh-feat-bg { transform: scale(1.05); }
.sh-feat-scrim { /* left-to-right legibility scrim */
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, #171315 0%, rgba(27,22,24,.92) 34%, rgba(27,22,24,.45) 60%, rgba(27,22,24,.15) 100%),
    radial-gradient(ellipse 60% 80% at 12% 50%, rgba(184,22,15,.25), transparent 70%);
}
.sh-feat-body {
  position: relative; z-index: 3;
  max-width: 62%; padding: 30px 32px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 280px;
}
.sh-feat-eyebrow {
  font-family: 'Cinzel','Trajan Pro','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif, Georgia, serif;
  font-size: 13px; letter-spacing: 4px; color: var(--s-gold);
  text-transform: uppercase; margin-bottom: 12px;
  text-shadow: 0 0 14px rgba(217,165,58,.5);
  display: flex; align-items: center; gap: 9px;
}
.sh-feat-eyebrow::before {
  content: "\2694"; font-family: FontAwesome, serif; font-size: 14px; color: var(--s-red2);
}
.sh-feat-title {
  font-family: 'Cinzel','Trajan Pro','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif, Georgia, serif;
  font-size: 30px; font-weight: 700; line-height: 1.15; color: #ffffff;
  margin-bottom: 12px; letter-spacing: .5px;
  text-shadow: 0 2px 4px rgba(0,0,0,.7), 0 0 26px rgba(219,60,48,.45);
}
.sh-feat-meta { font-size: 12px; color: #d6c9ae; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.sh-feat-meta .sh-news-tag { margin: 0; }
.sh-feat-excerpt {
  font-size: 13.5px; color: #e2d6bd; line-height: 1.65; margin-bottom: 20px; max-width: 460px;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}

/* Section divider */
.sh-news-head {
  display: flex; align-items: center; gap: 14px; margin: 0 0 16px;
}
.sh-news-head h3 {
  font-family: 'Cinzel','Trajan Pro','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif, Georgia, serif;
  font-size: 16px; letter-spacing: 5px; color: #e2d6bd; text-transform: uppercase; white-space: nowrap;
}
.sh-news-head h3 i { color: var(--s-gold); margin-right: 8px; }
.sh-news-head::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--s-border2), transparent);
}

/* News list cards */
.sh-news-item {
  position: relative; overflow: hidden;
  display: flex; gap: 14px; padding: 12px;
  border: 1px solid var(--s-border); border-radius: 9px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(184,22,15,.06), rgba(184,22,15,.015));
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sh-news-item::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--s-red2), var(--s-gold), var(--s-red2), transparent);
  background-size: 200% 100%;
  animation: shRimFlow 5s linear infinite;
  pointer-events: none;
}
.sh-news-item:hover {
  border-color: var(--s-border2); transform: translateX(3px);
  box-shadow: 0 6px 20px rgba(172,47,38,.2);
}
.sh-news-thumb {
  flex-shrink: 0; width: 116px; height: 78px; border-radius: 7px; overflow: hidden;
  position: relative; border: 1px solid var(--s-border2);
  background:
    radial-gradient(ellipse 90% 90% at 50% 30%, rgba(206,56,45,.35), transparent 70%),
    linear-gradient(135deg, #241f27, #0d0b0e);
  display: flex; align-items: center; justify-content: center;
}
.sh-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-news-thumb img.sh-thumb-logo {
  width: auto; height: auto; max-width: 86%; max-height: 60%;
  object-fit: contain; opacity: .9;
  filter: drop-shadow(0 0 7px rgba(206,56,45,.55));
}
.sh-news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sh-news-tag {
  display: inline-block; padding: 2px 7px; margin-bottom: 5px; align-self: flex-start;
  font-family: 'Cinzel','Trajan Pro','Palatino Linotype','Book Antiqua',Palatino,Georgia,serif, Georgia, serif;
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase; border-radius: 3px;
}
.sh-tag-update { background: rgba(184,22,15,.2); color: #e8b84a;  border: 1px solid rgba(184,22,15,.3); }
.sh-tag-event  { background: rgba(217,165,58,.15); color: var(--s-gold); border: 1px solid rgba(217,165,58,.3); }
.sh-tag-anunt  { background: rgba(217,165,58,.15);  color: var(--s-orange); border: 1px solid rgba(217,165,58,.3); }
.sh-tag-pvp    { background: rgba(231,76,60,.15);  color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }
.sh-news-title-link {
  display: block; font-family: 'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif, 'Segoe UI', sans-serif;
  font-size: 15px; font-weight: 600; color: #f3ead6;
  margin-bottom: 4px; line-height: 1.35; transition: color .2s;
}
.sh-news-title-link:hover { color: var(--s-gold); }
.sh-news-meta { font-size: 11px; color: var(--s-muted); margin-bottom: 5px; }
.sh-news-excerpt {
  font-size: 12px; color: rgba(213,203,181,.7); line-height: 1.55;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ══════════════════════════════
   RANKING SIDEBAR
══════════════════════════════ */
.sh-player-list li {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid rgba(184,22,15,.07); font-size: 12px;
}
.sh-player-list li:last-child { border-bottom: none; }
.sh-rank-num { width: 18px; text-align: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
.sh-rank-1 { color: var(--s-gold); text-shadow: 0 0 10px rgba(217,165,58,.6); }
.sh-rank-2 { color: #c0c0c0; }
.sh-rank-3 { color: #cd7f32; }
.sh-rank-n { color: var(--s-muted); }
.sh-rank-avatar {
  width: 36px; height: 46px; border-radius: 5px; flex-shrink: 0;
  background: rgba(12,2,2,.8);
  border: 1px solid var(--s-border2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: 0 0 8px rgba(184,22,15,.25);
}
.sh-rank-avatar img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 3px rgba(184,22,15,.4));
  image-rendering: -webkit-optimize-contrast;
}
.sh-rank-name { flex: 1; font-weight: 600; color: #e8c8b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-rank-score { font-size: 11px; color: var(--s-muted); text-align: right; flex-shrink: 0; }
.sh-rank-level { font-size: 10px; color: #e8b84a; text-align: right; flex-shrink: 0; }

/* Guild list */
.sh-guild-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(184,22,15,.07);
  font-size: 12px;
}
.sh-guild-item:last-child { border-bottom: none; }
.sh-guild-badge {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(184,22,15,.18), rgba(23,19,21,.55) 75%);
  border: 1px solid var(--s-border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  box-shadow: inset 0 0 10px rgba(181,49,40,.18);
}
.sh-guild-badge img {
  width: 86%; height: 86%; object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(206,56,45,.35));
}
.sh-guild-info { flex: 1; min-width: 0; }
.sh-guild-name { font-weight: 700; color: #e8c8b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-guild-sub { font-size: 10px; color: var(--s-muted); }
.sh-guild-pts { font-size: 11px; color: #e8b84a; font-weight: 700; flex-shrink: 0; }
.sh-see-more {
  display: block; text-align: center; padding: 9px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--s-red); border-top: 1px solid var(--s-border); margin-top: 2px;
  transition: color .2s, background .2s;
}
.sh-see-more:hover { color: var(--s-gold); background: rgba(184,22,15,.06); }

/* ══════════════════════════════
   FULL PAGES
══════════════════════════════ */
.sh-page-title {
  font-size: 18px; font-weight: 700;
  color: #f3ead6;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--s-border);
  display: flex; align-items: center; gap: 10px;
}
.sh-page-title i { color: var(--s-red); }
.sh-page-title::after {
  content: ''; display: block; height: 2px; flex: 1;
  background: linear-gradient(90deg, var(--s-red), transparent);
  border-radius: 2px; margin-left: 10px;
}

/* Register / Login card */
.sh-auth-card {
  max-width: 480px; margin: 0 auto;
  background: var(--s-panel);
  border: 1px solid var(--s-border);
  border-radius: 10px; overflow: hidden;
  padding: 28px 32px 32px;
  position: relative;
}
.sh-auth-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--s-red2), var(--s-gold), var(--s-red2), transparent);
  background-size: 200% 100%;
  animation: shRimFlow 5s linear infinite;
}
.sh-auth-card h2 {
  font-size: 22px; font-weight: 800; color: #f3ead6; margin-bottom: 4px; letter-spacing: 1px;
}
.sh-auth-card p.sub { font-size: 12px; color: var(--s-muted); margin-bottom: 20px; }

/* Characters page */
.sh-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 14px; }
.sh-char-card {
  background: var(--s-panel2); border: 1px solid var(--s-border);
  border-radius: 8px; overflow: hidden; position: relative;
  transition: border-color .2s, transform .2s;
}
.sh-char-card:hover { border-color: var(--s-red); transform: translateY(-2px); }
.sh-char-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--s-red2), var(--s-gold), var(--s-red2), transparent);
  background-size: 200% 100%;
  animation: shRimFlow 5s linear infinite;
}
.sh-char-header {
  padding: 14px 14px 10px;
  display: flex; align-items: center; gap: 12px;
}
.sh-char-job { width: 46px; height: 60px; object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(184,22,15,.5)); image-rendering: -webkit-optimize-contrast; }
.sh-char-name { font-weight: 700; font-size: 15px; color: #f3ead6; }
.sh-char-class { font-size: 11px; color: #e8b84a; text-transform: uppercase; letter-spacing: 1px; }
.sh-char-level { font-size: 11px; color: var(--s-muted); }
.sh-char-body { padding: 0 14px 14px; }
.sh-char-stat { display: flex; justify-content: space-between; padding: 5px 0;
  border-bottom: 1px solid rgba(184,22,15,.07); font-size: 12px; }
.sh-char-stat:last-child { border-bottom: none; }
.sh-char-stat span:first-child { color: var(--s-muted); }
.sh-char-stat span:last-child { color: #f3ead6; font-weight: 600; }

/* Pagination */
.sh-pagination { display: flex; gap: 6px; justify-content: center; padding: 18px 0 4px; }
.sh-pagination a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 5px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--s-border); color: var(--s-muted); transition: all .2s;
}
.sh-pagination a:hover,
.sh-pagination a.active {
  background: rgba(184,22,15,.2); border-color: var(--s-red);
  color: #e8b84a; box-shadow: 0 0 10px rgba(184,22,15,.3);
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.sh-footer {
  margin-top: 40px;
  border-top: 1px solid var(--s-border);
  background: linear-gradient(180deg, rgba(12,2,2,.95) 0%, rgba(5,4,5,1) 100%);
  position: relative;
}
.sh-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--s-red), var(--s-orange), var(--s-red), transparent);
}
.sh-footer-inner {
  width: 100%; max-width: 1680px; margin: 0 auto;
  padding: 38px 24px 26px;
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 30px;
}
@media (min-width: 1500px) {
  .sh-footer-inner { max-width: 1780px; padding: 38px 28px 26px; }
}
.sh-footer-logo { margin-bottom: 12px; }
.sh-footer-logo img { max-height: 70px; width: auto; filter: drop-shadow(0 0 14px rgba(206,56,45,.45)); }
.sh-footer-brand p { font-size: 12px; color: var(--s-muted); line-height: 1.7; }
.sh-footer-col h4 {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: #e8b84a; margin-bottom: 12px; font-weight: 700;
}
.sh-footer-col a { display: block; font-size: 12px; color: var(--s-muted); padding: 3px 0; transition: color .2s; }
.sh-footer-col a:hover { color: var(--s-gold); }
.sh-footer-clock { text-align: right; }
.sh-footer-clock h4 { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #e8b84a; margin-bottom: 12px; font-weight: 700; }
.sh-clock {
  font-size: 26px; font-weight: 700;
  background: linear-gradient(135deg, var(--s-gold), var(--s-gold2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 8px rgba(217,165,58,.4));
  font-variant-numeric: tabular-nums;
}
.sh-clock-date { font-size: 11px; color: var(--s-muted); margin-top: 4px; }
.sh-copyright {
  text-align: center; padding: 14px;
  font-size: 11px; color: rgba(120,60,40,.5);
  border-top: 1px solid rgba(184,22,15,.08);
}
.sh-copyright a { color: rgba(120,60,40,.7); }
.sh-copyright a:hover { color: #e8b84a; }

/* ══════════════════════════════
   COOKIE BAR
══════════════════════════════ */
.sh-cookie {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
  padding: 14px 24px;
  background: rgba(10,2,2,.97);
  border-top: 2px solid var(--s-red);
  box-shadow: 0 -4px 40px rgba(184,22,15,.2);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
  transform: translateY(105%);
  transition: transform .45s cubic-bezier(.22,.68,0,1.2);
}
.sh-cookie-visible { transform: translateY(0) !important; }
.sh-cookie-text { font-size: 13px; color: var(--s-text); flex: 1; min-width: 240px; }
.sh-cookie-text a { color: #e8b84a; }
.sh-cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1100px) {
  .sh-page-wrap { grid-template-columns: 220px 1fr 220px; max-width: 100%; }
}
@media (max-width: 900px) {
  .sh-page-wrap { grid-template-columns: 1fr; }
  .sh-footer-inner { grid-template-columns: 1fr 1fr; gap: 22px; }
  .sh-header { height: auto; min-height: 480px; }
  .sh-header-bottom { flex-direction: column; align-items: center; padding-bottom: 22px; }
  .sh-server-block, .sh-download-block { width: 100%; max-width: 380px; }
  .sh-logo-img { max-height: 175px; }
  .sh-logo-global { font-size: 22px; letter-spacing: 14px; text-indent: 14px; }
}
@media (max-width: 760px) {
  /* Featured banner stacks: art on top, text on a solid plate below */
  .sh-feat { min-height: 0; }
  .sh-feat-body { max-width: 100%; min-height: 0; padding: 150px 22px 24px; }
  .sh-feat-scrim {
    background:
      linear-gradient(180deg, rgba(27,22,24,.15) 0%, rgba(27,22,24,.55) 45%, rgba(21,17,19,.97) 78%, #171315 100%);
  }
  .sh-feat-bg { background-position: center top; }
  .sh-feat-title { font-size: 23px; }
}
@media (max-width: 600px) {
  .sh-nav-list { flex-wrap: wrap; }
  .sh-footer-inner { grid-template-columns: 1fr; }
  .sh-news-thumb { width: 84px; height: 84px; }
  .sh-logo-img { max-height: 130px; }
  .sh-logo-global { font-size: 18px; letter-spacing: 11px; text-indent: 11px; }
  .sh-logo-global::before, .sh-logo-global::after { width: 40px; }
  .sh-logo-global::before { left: -52px; } .sh-logo-global::after { right: -52px; }
}

/* ══════════════════════════════════════════════════════════
   EXTRA BUTTONS / ALERTS
══════════════════════════════════════════════════════════ */
.sh-alert-warn {
  background: rgba(217,165,58,.10); border: 1px solid rgba(217,165,58,.4); color: #f0c780;
  border-radius: 7px; padding: 10px 14px; font-size: 12.5px;
}

/* ══════════════════════════════════════════════════════════
   INVENTORY SELECTION (admin)
══════════════════════════════════════════════════════════ */
.sh-inv-sel { cursor: pointer; }
.sh-inv-check {
  position: absolute; top: 7px; left: 7px; z-index: 5;
  width: 16px; height: 16px; accent-color: var(--s-red2); cursor: pointer; margin: 0;
}
.sh-inv-sel:has(.sh-inv-check:checked),
.sh-inv-sel.is-checked {
  border-color: var(--s-gold);
  background: linear-gradient(135deg, rgba(217,165,58,.22), rgba(184,22,15,.10));
  box-shadow: 0 0 16px rgba(217,165,58,.30);
}
.sn-inv-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; font-size: 12px; color: var(--s-muted);
}
.sn-selall { cursor: pointer; display: flex; align-items: center; gap: 7px; }
.sn-selall input { accent-color: var(--s-red2); }
.sn-selcount { color: var(--s-gold); font-weight: 700; }
.sn-inv-actions {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--s-border);
}
.sn-act-group { display: flex; gap: 6px; align-items: center; }

/* ══════════════════════════════════════════════════════════
   ADMIN PANEL — themed Bootstrap overrides + animation
══════════════════════════════════════════════════════════ */
.sh-admin-panel { position: relative; overflow: hidden; }
.sh-admin-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(206,56,45,.06) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: shAdminShimmer 6s linear infinite;
}
@keyframes shAdminShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.sh-admin-panel .sh-panel-body { position: relative; z-index: 1; }

/* list-group cards */
.sh-admin-panel .list-group { margin-bottom: 16px; border-radius: 8px; overflow: hidden; }
.sh-admin-panel .list-group-item {
  background: linear-gradient(135deg, rgba(184,22,15,.08), rgba(184,22,15,.02)) !important;
  border: 1px solid var(--s-border) !important; color: var(--s-text) !important;
  margin-bottom: 6px; border-radius: 7px !important; transition: all .18s;
}
.sh-admin-panel a.list-group-item:hover {
  background: linear-gradient(135deg, rgba(184,22,15,.20), rgba(217,165,58,.06)) !important;
  border-color: var(--s-border2) !important; transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(172,47,38,.22);
}
.sh-admin-panel .list-group-item.active {
  background: linear-gradient(135deg, var(--s-red), #5a0a0a) !important;
  border-color: var(--s-red2) !important; color: #ffffff !important;
  text-shadow: 0 0 10px rgba(219,60,48,.6); letter-spacing: 1px;
}
.sh-admin-panel .list-group-item-heading { color: #f3ead6; font-size: 14px; font-weight: 700; margin: 0 0 3px; }
.sh-admin-panel .list-group-item-text { color: var(--s-muted); font-size: 12px; margin: 0; }
.sh-admin-panel .list-group-item i { color: var(--s-gold); }
.sh-admin-panel .list-group-item.active i { color: #ffe9b0; }
.sh-admin-panel .list-group-item-danger {
  background: linear-gradient(135deg, rgba(179,23,63,.18), rgba(125,15,43,.08)) !important;
  border-color: #c1342a !important; color: #ffd9e2 !important;
}

/* tables */
.sh-admin-panel table, .sh-admin-panel .table {
  width: 100%; color: var(--s-text); border-collapse: collapse; margin-bottom: 14px;
}
.sh-admin-panel .table th, .sh-admin-panel .table td {
  border-color: rgba(184,22,15,.15) !important; padding: 8px 10px !important; vertical-align: middle;
}
.sh-admin-panel .table thead th, .sh-admin-panel .table th {
  background: rgba(184,22,15,.10); color: var(--s-muted) !important;
  border-bottom: 1px solid var(--s-border2) !important; font-weight: 700;
}
.sh-admin-panel .table-striped tbody tr:nth-child(odd),
.sh-admin-panel .table tbody tr:nth-child(odd) { background: rgba(184,22,15,.04); }
.sh-admin-panel .table-hover tbody tr:hover, .sh-admin-panel .table tbody tr:hover { background: rgba(184,22,15,.12); }

/* forms */
.sh-admin-panel .form-control, .sh-admin-panel input[type=text], .sh-admin-panel input[type=number],
.sh-admin-panel input[type=password], .sh-admin-panel input[type=email], .sh-admin-panel select,
.sh-admin-panel textarea {
  background: rgba(19,16,17,.85) !important; border: 1px solid var(--s-border) !important;
  color: #f3ead6 !important; border-radius: 6px !important; box-shadow: none !important;
  padding: 8px 11px;
}
.sh-admin-panel .form-control:focus, .sh-admin-panel input:focus, .sh-admin-panel select:focus, .sh-admin-panel textarea:focus {
  border-color: var(--s-red2) !important; box-shadow: 0 0 0 3px rgba(184,22,15,.20) !important; outline: none;
}
.sh-admin-panel label, .sh-admin-panel .control-label { color: var(--s-text); font-size: 12px; }

/* buttons (bootstrap) */
.sh-admin-panel .btn {
  border-radius: 6px !important; font-weight: 600; border: 1px solid var(--s-border2);
  transition: all .18s; letter-spacing: .5px;
}
.sh-admin-panel .btn-primary, .sh-admin-panel .btn-success {
  background: linear-gradient(135deg, var(--s-red), #5a0a0a) !important; border-color: var(--s-red2) !important; color: #ffffff !important;
}
.sh-admin-panel .btn-primary:hover, .sh-admin-panel .btn-success:hover { box-shadow: 0 0 16px rgba(184,22,15,.45) !important; }
.sh-admin-panel .btn-danger {
  background: linear-gradient(135deg, #b3173f, #7d0f2b) !important; border-color: #c1342a !important; color: #ffd9e2 !important;
}
.sh-admin-panel .btn-default, .sh-admin-panel .btn-info, .sh-admin-panel .btn-warning {
  background: rgba(184,22,15,.12) !important; color: var(--s-text) !important; border-color: var(--s-border) !important;
}
.sh-admin-panel .btn-default:hover { background: rgba(184,22,15,.22) !important; color: #ffffff !important; }

/* misc bootstrap chrome */
.sh-admin-panel .panel, .sh-admin-panel .well {
  background: rgba(19,16,17,.6) !important; border: 1px solid var(--s-border) !important;
  border-radius: 8px !important; box-shadow: none !important; color: var(--s-text);
}
.sh-admin-panel .panel-heading { background: rgba(184,22,15,.12) !important; color: #f3ead6 !important; border-color: var(--s-border) !important; }
.sh-admin-panel .alert { border-radius: 7px !important; }
.sh-admin-panel .label, .sh-admin-panel .badge { background: var(--s-red) !important; color: #ffffff !important; }
.sh-admin-panel .pagination > li > a {
  background: rgba(184,22,15,.10) !important; border-color: var(--s-border) !important; color: var(--s-text) !important;
}
.sh-admin-panel .pagination > .active > a { background: var(--s-red) !important; border-color: var(--s-red2) !important; color: #ffffff !important; }
.sh-admin-panel hr { border-color: var(--s-border); }
.sh-admin-panel h2, .sh-admin-panel h3, .sh-admin-panel h4, .sh-admin-panel h5 { color: #f3ead6; }
.sh-admin-panel a { color: #e8b84a; }
.sh-admin-panel a:hover { color: var(--s-gold); }

/* ══════════════════════════════════════════════════════════
   ACCOUNT ACTIONS (Date cont)
══════════════════════════════════════════════════════════ */
.sh-acc-actions { display: flex; flex-direction: column; gap: 10px; max-width: 620px; }
.sh-acc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, rgba(184,22,15,.08), rgba(184,22,15,.02));
  border: 1px solid var(--s-border); border-radius: 8px; padding: 12px 16px;
  transition: border-color .18s, transform .18s;
}
.sh-acc-row:hover { border-color: var(--s-border2); transform: translateX(2px); }
.sh-acc-info { font-size: 13px; color: var(--s-text); display: flex; align-items: center; gap: 10px; }
.sh-acc-info i { color: var(--s-gold); width: 16px; text-align: center; }
.sh-acc-row form { margin: 0; }

/* ══════════════════════════════════════════════════════════
   CUSTOM CURSOR (only on precise pointers)
══════════════════════════════════════════════════════════ */
@media (pointer: fine) {
  html { cursor: url('../../../void/assets/images/cursor/cursor.png') 2 2, auto; }
  a, button, summary, select, label.sh-inv-sel,
  .sh-btn, .sh-tab-btn, .sh-inv-tab, .sh-has-drop > .sh-nav-btn,
  .sh-lang-picker a, .sh-news-item, .sh-feat, .sh-char-card,
  .sh-inv-item, [role="button"], input[type="submit"], input[type="button"] {
    cursor: url('../../../void/assets/images/cursor/pointer.png') 2 2, pointer;
  }
  /* Keep the text caret in text fields */
  input[type="text"], input[type="password"], input[type="email"],
  input[type="search"], input[type="number"], textarea {
    cursor: text;
  }
}
/* Trailing arcane glow (added by js/shadow-cursor.js) */
.sn-glow {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; border-radius: 50%;
  pointer-events: none; z-index: 99998;
  background: radial-gradient(circle, rgba(219,60,48,.45), rgba(198,54,44,.12) 60%, transparent 72%);
  mix-blend-mode: screen; opacity: 0;
  transition: opacity .25s ease, width .14s ease, height .14s ease, background .2s ease;
  will-change: transform;
}
.sn-glow.on   { opacity: 1; }
.sn-glow.link { width: 36px; height: 36px; background: radial-gradient(circle, rgba(255,210,120,.5), rgba(217,165,58,.15) 60%, transparent 72%); }
.sn-glow.down { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — quiet everything for users who ask
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .sh-header-video, .sn-glow { display: none !important; }
  .sh-header-video.is-playing { animation: none !important; transform: none !important; }
  .sh-panel:hover, .sh-server-block:hover, .sh-download-block:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CONTAINER REVEAL ON SCROLL (keyframe-based so it never
   clashes with the cards' own hover transitions)
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* slide + fade — elements with no hover-transform of their own */
  html.sn-anim .sh-panel:not(.sn-in),
  html.sn-anim .sh-feat:not(.sn-in) { opacity: 0; }
  html.sn-anim .sh-panel.sn-in,
  html.sn-anim .sh-feat.sn-in { animation: shReveal .6s cubic-bezier(.2,.7,.2,1) both; }

  /* fade only — cards that animate transform on hover */
  html.sn-anim .sh-news-item:not(.sn-in),
  html.sn-anim .sh-char-card:not(.sn-in),
  html.sn-anim .sh-acc-row:not(.sn-in),
  html.sn-anim .sh-inv-item:not(.sn-in) { opacity: 0; }
  html.sn-anim .sh-news-item.sn-in,
  html.sn-anim .sh-char-card.sn-in,
  html.sn-anim .sh-acc-row.sn-in,
  html.sn-anim .sh-inv-item.sn-in { animation: shFadeOnly .55s ease both; }
}
@keyframes shReveal   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes shFadeOnly { from { opacity: 0; } to { opacity: 1; } }