:root {
  --stats-cyan: #35faff;
  --stats-orange: #ff9c3c;
  --stats-bg: rgba(5, 18, 32, 0.9);
  --stats-border: rgba(53, 250, 255, 0.4);
  --stats-shadow: 0 0 18px rgba(53, 250, 255, 0.35);
  --side-toggle-right: 4px;
  --side-panel-top: 10px;
  --side-toggle-top: var(--side-panel-top);
  --side-toggle-gap: 0px;
  --side-toggle-width: clamp(36px, 3vw, 52px);
  --side-panel-gap: 8px;
  --stats-toggle-height: clamp(100px, 30vh, 100px);
  --ranking-toggle-height: clamp(140px, 32vh, 140px);
  --globalnews-toggle-height: clamp(150px, 36vh, 170px);
}

/* Mount stays in top-right just as a logical container */
#statspanel-mount {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 35;
  pointer-events: none;
}

/* Wrapper is now neutral – no centering, no positioning tie
   so the button and panel can be positioned independently. */
.stats-panel {
  position: static;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  pointer-events: none;
}

.stats-panel.open {
  /* kept for JS hook; pointer-events handled on children */
}

.stats-panel.is-hidden {
  display: none !important;
}

/* VERTICAL STATS BUTTON
   - independent, fixed on right edge
   - vertically centered
*/
.stats-toggle {
  position: fixed;
  right: var(--side-toggle-right);
  top: var(--side-toggle-top);
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border-radius: 20px 0 0 20px;
  border: 1px solid var(--stats-border);
  background: rgba(0, 0, 0, 0.68);
  color: var(--stats-cyan);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: clamp(10px, 0.95vw, 12px);
  cursor: pointer;
  box-shadow: var(--stats-shadow);
  transition: background 0.2s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  width: var(--side-toggle-width);
  height: var(--stats-toggle-height);
  pointer-events: auto;
  gap: 8px;
}

.stats-toggle.is-active {
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 0 18px rgba(53, 250, 255, 0.7);
}

/* (old override removed – we no longer want parent to control top)
   #statspanel-mount .stats-toggle { top: 42%; } */

.stats-toggle:hover {
  background: rgba(0, 0, 0, 0.82);
}

.stats-toggle .chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--stats-cyan);
  border-bottom: 2px solid var(--stats-cyan);
  transform: rotate(-45deg);
  transition: transform 0.3s ease;
}

.stats-panel.open .stats-toggle .chevron {
  transform: rotate(135deg);
}

/* STATS PANEL BODY
   - fully independent from button
   - you control size/position via top/right/bottom/width
*/
.stats-body {
  position: fixed;
  top: var(--side-panel-top);
  right: calc(var(--side-toggle-right) + var(--side-toggle-width) + var(--side-panel-gap));
  bottom: 430px;                       /* distance from bottom → height */
  width: clamp(250px, 24vw, 380px);   /* PANEL WIDTH */
  background: var(--stats-bg);
  border: 1px solid var(--stats-border);
  border-radius: 24px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--stats-shadow);
  backdrop-filter: blur(8px);
  transform: translateX(135%);        /* hidden (off-screen to the right) */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
  overflow-y: auto;
}

/* When panel is open, slide in from right */
.stats-panel.open .stats-body {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.stats-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(53, 250, 255, 0.2);
  filter: blur(8px);
  z-index: -1;
  animation: statsPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes statsPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

.stats-header h3 {
  margin: 0;
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 0.08em;
  color: var(--stats-cyan);
  text-transform: uppercase;
}

.stats-list {
  list-style: none;
  padding: 0;
  margin: clamp(10px, 1.6vw, 16px) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vw, 10px);
}

.stats-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(53, 250, 255, 0.15);
  font-size: clamp(12px, 1.1vw, 14px);
  color: rgba(255, 255, 255, 0.85);
}

.stats-list li strong {
  font-weight: 800;
  color: var(--stats-cyan);
  font-size: clamp(13px, 1.2vw, 15px);
}

.stats-list li.attack strong {
  color: var(--stats-orange);
}

.stats-divider {
  width: 100%;
  position: relative;
  margin: clamp(12px, 2vw, 20px) 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(53,250,255,0.6), rgba(0,0,0,0));
}

.stats-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 156, 60, 0.8);
  box-shadow: 0 0 8px rgba(255, 156, 60, 0.6);
}

/* Responsive tweaks: adjust toggle size and panel width/right,
   but keep button & panel independent. */
@media (max-width: 900px) {
  :root {
    --side-toggle-right: 2px;
    --side-toggle-width: 32px;
    --stats-toggle-height: clamp(130px, 32vh, 200px);
    --ranking-toggle-height: clamp(130px, 32vh, 200px);
    --globalnews-toggle-height: clamp(130px, 32vh, 200px);
  }
  .stats-body {
    right: 56px;
    width: clamp(280px, 55vw, 380px);
  }
}

@media (max-width: 640px) {
  :root {
    --stats-toggle-height: clamp(110px, 36vh, 180px);
    --ranking-toggle-height: clamp(110px, 36vh, 180px);
    --globalnews-toggle-height: clamp(110px, 36vh, 180px);
    --side-toggle-top: 6px;
  }
  .stats-body {
    top: 64px;
    right: 44px;
    bottom: 22px;
    width: min(86vw, 320px);
  }
}