/* ============================================
   GRINDVEIL — Browser RPG
   Colorful Cartoon RPG Theme | Mobile-First
   Clash Royale / Shakes & Fidget Style
   ============================================ */

/* --- CSS Variables --- */
:root {
  --bg: #1a1035;
  --bg-lighter: #241845;
  --surface: #2d1f55;
  --surface-hover: #3a2a6e;
  --surface-elevated: #352660;
  --border: rgba(140, 120, 255, 0.2);
  --border-strong: rgba(140, 120, 255, 0.4);
  --gold: #FFD700;
  --gold-dim: #BFA330;
  --gold-glow: rgba(255, 215, 0, 0.3);
  --text: #F0EAFF;
  --text-dim: #B0A5D4;
  --text-bright: #FFFFFF;
  --hp-red: #FF4757;
  --hp-green: #2ecc71;
  --hp-bg: #1a1035;
  --xp-blue: #4FACFE;
  --mana-purple: #BF5FFF;
  --common: #B0B0B0;
  --uncommon: #5ED87A;
  --rare: #4FACFE;
  --epic: #BF5FFF;
  --legendary: #FFB340;
  --mythic: #FF4757;
  --unique: #00e5ff;
  --font-display: 'Cinzel', serif;
  --font-body: 'Inter', sans-serif;
  --radius: 12px;
  --radius-lg: 16px;
  --tab-height: 60px;
  --header-height: 88px;
}

/* --- Performance: GPU-promote animated elements, reduce repaint scope --- */
.tab-panel { contain: content; }
#panelGuild { contain: none; }
/* ── Pets panel ── */
#panelPets {
  padding: 0 !important;
  position: relative;
  background-color: #0a0814;
  background-image:
    linear-gradient(180deg, rgba(8,6,14,0.82) 0%, rgba(8,6,14,0.88) 40%, rgba(8,6,14,0.94) 100%),
    url('../img/pets/header.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: calc(100vh - 100px);
}
/* Body-level fixed background — appended via JS, avoids any stacking context issues.
   Constrained to main content area (excludes left desktop sidebar). */
#petBgFixed {
  position: fixed;
  top: 56px; left: 0; right: 0; bottom: 52px;
  background-color: #0a0814;
  background-image:
    linear-gradient(180deg, rgba(8,6,14,0.82) 0%, rgba(8,6,14,0.88) 40%, rgba(8,6,14,0.94) 100%),
    url('../img/pets/header.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;  /* BEHIND all content */
  pointer-events: none;
}
@media (min-width: 960px) {
  #petBgFixed {
    top: 0;
    left: 300px;  /* skip desktop sidebar width */
    bottom: 0;
  }
}
/* petBgFixed no longer needed — bg is on #panelPets directly */
/* Pets main column — dark semi-opaque backdrop for readability */
.pet-main {
  background: linear-gradient(180deg, rgba(10,8,18,0.85) 0%, rgba(8,6,18,0.92) 100%);
  border: 1px solid rgba(200,154,78,0.15);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
/* Section headers inside pet content — add text shadow for readability */
.pet-main h1, .pet-main h2, .pet-main h3, .pet-main h4, .pet-content h1 {
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}
/* Food bar + sidebar slots — darker backdrop */
.pet-food-bar-full {
  background: linear-gradient(135deg, rgba(20,16,32,0.96), rgba(12,8,20,0.98)) !important;
  border-color: rgba(200,154,78,0.28) !important;
  backdrop-filter: blur(6px);
}
.pet-slot-card {
  background: linear-gradient(180deg, rgba(20,16,32,0.95), rgba(10,8,20,0.97)) !important;
}
.pet-header-banner {
  background-blend-mode: normal;
  box-shadow: 0 6px 24px rgba(0,0,0,0.8);
}
@keyframes gvEggShake {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-6deg) translateY(-3px); }
  50% { transform: rotate(0deg) translateY(0); }
  75% { transform: rotate(6deg) translateY(-3px); }
}

/* Pet food drop toast — shows under header when food drops from gameplay */
.pet-food-drop-toast {
  position: fixed;
  top: 80px;
  right: 20px;
  background: linear-gradient(135deg, rgba(20,16,32,0.98), rgba(12,8,20,0.99));
  border: 1px solid rgba(200,154,78,0.5);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 16px rgba(200,154,78,0.2);
  z-index: 9000;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
}
.pet-food-drop-toast.show {
  opacity: 1;
  transform: translateX(0);
}
.pet-food-drop-toast .pfd-title {
  font-size: 10px;
  font-weight: 800;
  color: #c89a4e;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.pet-food-drop-toast .pfd-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pet-food-drop-toast .pfd-item img {
  width: 28px; height: 28px;
  object-fit: contain;
}
.pet-food-drop-toast .pfd-amt {
  font-size: 14px;
  font-weight: 900;
  color: #4cd964;
  min-width: 28px;
}
.pet-food-drop-toast .pfd-name {
  font-size: 11px;
  color: #ddd;
  font-weight: 700;
}
@media (max-width: 640px) {
  .pet-food-drop-toast {
    top: auto;
    bottom: 120px;
    right: 10px;
    left: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: none;
  }
}
.pet-content {
  max-width: 560px;
  margin: 0 auto;
  padding: 14px 14px 140px 14px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
/* Mobile: sidebar children render inline (no separate sidebar column) */
.pet-sidebar { display: contents; }
@media (min-width: 960px) {
  .pet-content {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas:
      "header header"
      "food   food"
      "main   sidebar";
    gap: 20px 28px;
    padding: 14px 24px 60px 24px;
    align-items: start;
  }
  .pet-header-banner { grid-area: header; }
  .pet-food-bar-full { grid-area: food; }
  .pet-main { grid-area: main; min-width: 0; }
  .pet-sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 14px;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding-left: 18px;
    border-left: 1px solid rgba(255,255,255,0.08);
  }
  /* Desktop: slots stack vertically in sidebar */
  .pet-slots-row {
    flex-direction: column !important;
  }
}
.pet-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (min-width: 640px) {
  .pet-collection-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
}
@media (min-width: 960px) {
  .pet-collection-grid {
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
  }
}
/* Custom pet tooltip */
#petTooltip {
  position: fixed;
  z-index: 9999;
  background: linear-gradient(135deg, rgba(20,16,32,0.98), rgba(8,6,18,0.99));
  border: 1px solid rgba(200,154,78,0.4);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11px;
  color: #ddd;
  pointer-events: none;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 12px rgba(200,154,78,0.15);
  max-width: 240px;
  display: none;
  line-height: 1.5;
}
#petTooltip .pt-name { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
#petTooltip .pt-rarity { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; opacity: 0.8; }
#petTooltip .pt-tier { font-size: 10px; color: #aaa; margin-bottom: 6px; }
#petTooltip .pt-bonus { color: #4cd964; font-size: 11px; padding: 1px 0; }
#petTooltip .pt-skill { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08); }
#petTooltip .pt-skill-name { color: #bf5fff; font-weight: 800; font-size: 11px; }
#petTooltip .pt-skill-desc { color: #aaa; font-size: 10px; margin-top: 2px; }
#petTooltip .pt-locked { color: #888; font-style: italic; }
.gv-modal-content { contain: layout style; }

/* Respect OS "reduce motion" — disable infinite decorative anims entirely
   (previous 0.01ms trick caused strobe flashing with infinite iterations,
   restarting 100k times/sec). Transitions kept at a calm 120ms for usable UI. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 120ms !important;
  }
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Black behind safe-area insets (camera notch, rounded corners) on all screens */
  background: #000;
}

/* --- Base --- */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══ Class Theme: Warrior (red accents, base bg stays purple-dark) ═══ */
body[data-class="warrior"] .tab-btn.active {
  background: rgba(255,71,87,0.12);
  border-color: rgba(255,71,87,0.2);
  box-shadow: 0 0 12px rgba(255,71,87,0.08);
  color: #ff4757;
}
body[data-class="warrior"] .tab-btn.active .tab-icon-img {
  filter: grayscale(0) brightness(1.2) drop-shadow(0 0 6px rgba(255,71,87,0.5));
}
body[data-class="warrior"] .header-xp-bar {
  border-color: rgba(255,71,87,0.25);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 6px rgba(255,71,87,0.1);
}
body[data-class="warrior"] .header-xp-fill {
  background: linear-gradient(90deg, #dc2626, #ef4444, #b91c1c, #f87171, #ef4444);
  background-size: 300% 100%;
}

/* ═══ Class Theme: Mage (purple — default, no overrides) ═══ */

/* ═══ Class Theme: Blade Dancer (green accents, base bg stays purple-dark) ═══ */
body[data-class="blade_dancer"] .tab-btn.active {
  background: rgba(46,213,115,0.12);
  border-color: rgba(46,213,115,0.2);
  box-shadow: 0 0 12px rgba(46,213,115,0.08);
  color: #2ed573;
}
body[data-class="blade_dancer"] .tab-btn.active .tab-icon-img {
  filter: grayscale(0) brightness(1.2) drop-shadow(0 0 6px rgba(46,213,115,0.5));
}
body[data-class="blade_dancer"] .header-xp-bar {
  border-color: rgba(46,213,115,0.25);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 6px rgba(46,213,115,0.1);
}
body[data-class="blade_dancer"] .header-xp-fill {
  background: linear-gradient(90deg, #059669, #10b981, #047857, #34d399, #10b981);
  background-size: 300% 100%;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--gold);
  line-height: 1.2;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

input {
  font-family: var(--font-body);
  outline: none;
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--gold-dim);
  border-radius: 4px;
}

/* ============================================
   AUTH SCREEN
   ============================================ */

#authScreen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  background: url('../img/auth-bg.webp?v=5') center/cover no-repeat fixed;
  position: relative;
  overflow: hidden;
}

/* Dark overlay for readability — reduced to 60% */
#authScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 20, 0.50);
  z-index: 0;
}

#authScreen > * {
  position: relative;
  z-index: 3;
}

/* Floating particles — between overlay and UI */
.auth-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* Soft golden dust — drifts slowly, subtle */
.auth-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.8), transparent 60%);
  pointer-events: none;
  opacity: 0;
}

.auth-particle.drift {
  animation: particleDrift linear forwards;
}
.auth-particle.rise {
  animation: particleRise ease-out forwards;
}
.auth-particle.float {
  animation: particleFloat ease-in-out forwards;
}

@keyframes particleDrift {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  15% { opacity: 0.8; }
  50% { opacity: 0.6; }
  85% { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

@keyframes particleRise {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-40vh) scale(0.3); }
}

@keyframes particleFloat {
  0% { opacity: 0; transform: translate(0, 0) scale(0.8); }
  20% { opacity: 0.6; }
  50% { opacity: 0.5; transform: translate(var(--dx), calc(var(--dy) * 0.5)) scale(0.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.1); }
}

/* Ember — small orange spark */
.auth-ember {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,140,40,0.7);
  box-shadow: 0 0 4px 1px rgba(255,100,20,0.3);
  pointer-events: none;
  animation: emberDrift linear forwards;
  opacity: 0;
}

@keyframes emberDrift {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 1; }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)); }
}

/* Fog at bottom */
.auth-fog {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(to top, rgba(26,16,53,0.7), rgba(26,16,53,0.2) 50%, transparent);
  pointer-events: none;
  z-index: 0;
  animation: fogPulse 15s ease-in-out infinite;
}

@keyframes fogPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.5; }
}

/* Logo glow animation on auth screen */
#authScreen .create-logo-img {
  animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(255,215,0,0.3)); }
  50% { filter: drop-shadow(0 0 30px rgba(255,215,0,0.6)); }
}

/* ── World Select Screen ─────────────────────── */
#worldSelectScreen {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
  background: url('../img/auth-bg.webp?v=5') center/cover no-repeat fixed;
  z-index: 1000;
  overflow: hidden;
}
#worldSelectScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 20, 0.55);
  z-index: 0;
}
#worldSelectScreen > * {
  position: relative;
  z-index: 3;
}
.world-card {
  max-width: 400px;
  width: 100%;
  background: rgba(20, 14, 40, 0.85);
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: 16px;
  padding: 32px 28px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.world-card .auth-logo {
  margin-bottom: 20px;
}
.world-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  margin-bottom: 4px;
  letter-spacing: 2px;
}
.world-email {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.world-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.world-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.25s ease;
  width: 100%;
  text-align: left;
  color: var(--text);
}
.world-btn:hover {
  border-color: var(--gold);
  background: rgba(200, 168, 78, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(200, 168, 78, 0.15);
}
.world-btn:active {
  transform: translateY(0);
}
.world-btn-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.world-btn-icon {
  font-size: 22px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
}
.world-btn-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.5px;
}
.world-btn-status {
  font-size: 11px;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.world-badge {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.world-badge.live { background: #4FACFE; color: #fff; }
.world-badge.test { background: #FF6B6B; color: #fff; }
.world-logout {
  margin-top: 20px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.world-logout:hover { opacity: 1; color: var(--gold); }

.auth-tabs {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 360px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(100, 180, 255, 0.2);
}

.auth-tab {
  flex: 1;
  padding: 12px;
  background: rgba(15, 10, 30, 0.7);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  min-height: 44px;
}

.auth-tab.active {
  background: rgba(60, 140, 220, 0.2);
  color: var(--gold);
}

.auth-tab:not(.active):hover {
  background: var(--surface-hover);
}

.auth-form {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(15, 10, 30, 0.7);
  border: 1px solid rgba(100, 180, 255, 0.2);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  backdrop-filter: blur(4px);
}

.auth-input:focus {
  border-color: #4FACFE;
  box-shadow: 0 0 16px rgba(79, 172, 254, 0.3);
}

.auth-input::placeholder {
  color: var(--text-dim);
}

.auth-btn {
  margin-top: 4px;
}

.auth-divider {
  width: 100%;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--text-dim);
  font-size: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.btn-google {
  width: 100%;
  max-width: 360px;
  padding: 12px 16px;
  background: #fff;
  color: #333;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  border: 1px solid #ddd;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, box-shadow 0.2s;
  min-height: 48px;
}

.btn-google:hover {
  background: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.btn-google:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-guest {
  width: 100%;
  max-width: 360px;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  min-height: 48px;
}

.btn-guest:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.auth-forgot {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.2s;
  align-self: flex-end;
}

.auth-forgot:hover {
  color: var(--gold);
}

.auth-note {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
  font-style: italic;
}

.auth-success {
  color: var(--hp-green);
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.auth-error {
  color: var(--hp-red);
  font-size: 13px;
  margin-top: 12px;
  min-height: 20px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

/* Prevent iOS zoom on auth inputs */
@supports (-webkit-touch-callout: none) {
  .auth-input {
    font-size: 16px;
  }
}

/* ============================================
   CHARACTER CREATION SCREEN
   ============================================ */

#createScreen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
}

.create-logo-img {
  width: 280px;
  height: auto;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.3));
}

.create-logo {
  display: none; /* replaced by logo image */
}

.class-portrait {
  width: 100%;
  max-width: 140px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: 0 auto 8px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(140,120,255,0.3));
}

.create-tagline {
  font-size: 14px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 32px;
  letter-spacing: 1px;
}

.create-section-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* Name Input */
.name-input-wrap {
  width: 100%;
  max-width: 320px;
  margin-bottom: 28px;
}

.name-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-size: 16px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.name-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}

.name-input::placeholder {
  color: var(--text-dim);
}

/* Class Cards */
.class-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 520px;
  margin-bottom: 28px;
  /* Allow grid columns to shrink below their content's intrinsic min size
     so the 3rd card never overflows on narrow phones (was being pushed
     off-screen because 140px portraits set a min-width on each card). */
  min-width: 0;
}
.class-grid > .class-card { min-width: 0; }

.class-card {
  background: rgba(20, 12, 8, 0.65);
  border: 2px solid rgba(180, 130, 60, 0.3);
  border-radius: 12px 12px 4px 4px;
  padding: 18px 10px 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  cursor: pointer;
  min-height: 44px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}

.class-card:hover {
  border-color: rgba(255, 180, 60, 0.5);
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), 0 0 15px rgba(255,180,60,0.15);
}

.class-card:active {
  transform: scale(0.97);
}

.class-card.selected {
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(255,215,0,0.3), inset 0 0 20px rgba(255,215,0,0.08);
  background: rgba(30, 18, 10, 0.75);
}

.class-icon {
  font-size: 32px;
  margin-bottom: 6px;
  display: block;
}

.class-name {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold);
  margin-bottom: 4px;
}

.class-desc {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.3;
}

.class-passives {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
  justify-content: center;
}
.class-passive {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
}
.class-passive.buff {
  background: rgba(46,204,113,0.12);
  color: var(--hp-green);
  border: 1px solid rgba(46,204,113,0.25);
}
.class-passive.debuff {
  background: rgba(255,71,87,0.12);
  color: var(--hp-red);
  border: 1px solid rgba(255,71,87,0.25);
}
.class-matchup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
}
.class-strong {
  color: var(--hp-green);
}
.class-weak {
  color: var(--hp-red);
  opacity: 0.8;
}

/* Begin Button */
.btn-begin {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  background: linear-gradient(135deg, #F0C040, #E09530);
  color: #1a1035;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  min-height: 52px;
  box-shadow: 0 3px 10px rgba(224, 149, 48, 0.2);
}

.btn-begin:hover {
  box-shadow: 0 4px 16px rgba(224, 149, 48, 0.3);
  transform: scale(1.02);
}

.btn-begin:active {
  transform: scale(0.97);
}

.btn-begin:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-begin:not(:disabled):hover {
  box-shadow: 0 4px 16px rgba(224, 149, 48, 0.3);
}

.create-error {
  color: var(--hp-red);
  font-size: 13px;
  margin-top: 8px;
  min-height: 20px;
}

/* ============================================
   GAME SCREEN — Layout
   ============================================ */

/* Mobile: single column */
#gameScreen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#gameLayout {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Sidebars hidden on mobile */
.desktop-sidebar {
  display: none;
}

/* Desktop: 3-column layout */
@media (min-width: 960px) {
  #gameScreen {
    max-width: 100%;
    border: none;
  }
  #gameLayout {
    flex-direction: row;
  }
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: 300px;
    min-width: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    border-color: var(--border);
    background:
      radial-gradient(ellipse 120% 80% at 50% 0%, rgba(40,25,70,0.35), transparent 60%),
      radial-gradient(ellipse 100% 60% at 50% 100%, rgba(30,15,50,0.3), transparent 60%),
      linear-gradient(180deg, #0c0814 0%, #0a0612 50%, #080510 100%);
    align-self: stretch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  #sidebarLeft {
    border-right: 1px solid var(--border);
    order: 1;
  }
  .tab-panel { min-height: 100%; }
  #mainContent > .tab-panel { padding-bottom: 180px !important; }
  #mainContent {
    order: 2;
    flex: 1;
    position: relative;
  }
  #mainContent > .tab-panel { padding-left: 56px; }
  /* Right sidebar removed - equipment is inside left panel */
  /* On desktop, hero is in left sidebar so hide its tab and the header */
  .tab-btn[data-tab="hero"] {
    display: none;
  }
  /* Desktop: hero panel content lives in the sidebar only.
     #panelHero still renders but must never be visible in main content
     (would duplicate the sidebar and stretch full-width).
     No !important so subpages like Veilstone Pass can set display:block
     inline to re-use the full-screen panel. */
  #panelHero {
    display: none;
  }
  #gameHeader {
    display: none;
  }
}

@media (min-width: 1200px) {
  .desktop-sidebar {
    width: 340px;
    min-width: 340px;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — slim desktop-like layout.
   Triggered by JS-set class `html.gv-land-mobile` (reliable on iOS).
   CSS media queries as a fallback for any edge cases.
   ══════════════════════════════════════════════════════════════ */
html.gv-land-mobile #gameScreen { max-width: 100%; border: none; }
html.gv-land-mobile #gameLayout { flex-direction: row; }
html.gv-land-mobile .desktop-sidebar {
  display: flex;
  flex-direction: column;
  width: 260px;
  min-width: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px !important;
  border-color: var(--border);
  background: var(--bg-lighter);
  align-self: stretch;
  scrollbar-width: thin;
}
html.gv-land-mobile #sidebarLeft { border-right: 1px solid var(--border); order: 1; }
html.gv-land-mobile #mainContent { order: 2; flex: 1; position: relative; }
/* Landscape-mobile also has sidebar — hide the duplicate #panelHero in main.
   Inline display:block from subpages like Veilstone Pass still wins via specificity. */
html.gv-land-mobile #panelHero { display: none; }
/* Reserve space for the vertical mob-quick-strip (left:260px width:54px)
   so panel content (e.g. fishing mastery perks) doesn't sit underneath it. */
/* Reserve space for the vertical mob-quick-strip (left:260px, max-width:70px
   per the .mob-quick-strip rule further down) so panel content (e.g. fishing
   mastery perks, the home dashboard greet bar) doesn't sit underneath it. */
html.gv-land-mobile #mainContent > .tab-panel { padding-left: 80px !important; padding-bottom: 120px !important; }
html.gv-land-mobile .tab-btn[data-tab="hero"] { display: none; }
html.gv-land-mobile #gameHeader { display: none !important; }
html.gv-land-mobile #tabBar { position: absolute; left: 260px; right: 0; bottom: 0; margin: 0; }
html.gv-land-mobile .mob-nav-bar,
html.gv-land-mobile .mob-nav-burger { display: none !important; }
/* Quick strip in landscape: vertical column attached to right edge of sidebar (like desktop quick-panel) */
html.gv-land-mobile .mob-quick-strip {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  position: fixed !important;
  left: 260px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: 54px !important;
  padding: 4px 3px !important;
  gap: 3px !important;
  background: linear-gradient(180deg, rgba(20,14,40,0.92), rgba(12,8,28,0.95)) !important;
  border: 1px solid rgba(255,215,0,0.15) !important;
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  box-shadow: 3px 0 12px rgba(0,0,0,0.5) !important;
  z-index: 50 !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
}
html.gv-land-mobile .mob-quick-strip::-webkit-scrollbar { display: none !important; }
html.gv-land-mobile .mob-quick-strip .mqs-item {
  flex: 0 0 auto !important;
  padding: 4px !important;
  font-size: 8px !important;
  flex-direction: column !important;
  gap: 1px !important;
  text-align: center !important;
}
html.gv-land-mobile .mob-quick-strip .mqs-item img {
  width: 20px !important; height: 20px !important;
}
html.gv-land-mobile .mob-quick-strip .mqs-item span:last-child {
  font-size: 7px !important;
  line-height: 1 !important;
}
html.gv-land-mobile .tab-bar-inner { display: flex !important; }
/* Sidebar: compact hero content */
html.gv-land-mobile .desktop-sidebar .hero-profile-card { padding: 6px !important; }
html.gv-land-mobile .desktop-sidebar .hero-profile-avatar:not(.hpv9-avatar):not(.x3-avatar):not(.y1-avatar),
html.gv-land-mobile .desktop-sidebar .hero-profile-avatar-wrap:not(.hpv9-avatar-wrap):not(.x3-avatar-wrap):not(.y1-card) { width: 72px !important; height: 72px !important; }
html.gv-land-mobile .desktop-sidebar .hero-profile-avatar:not(.hpv9-avatar):not(.x3-avatar):not(.y1-avatar) { border-radius: 12px !important; }
html.gv-land-mobile .desktop-sidebar .hero-mini-btns { gap: 3px !important; margin-bottom: 4px !important; }
html.gv-land-mobile .desktop-sidebar .hero-mini-btn { padding: 3px 5px !important; font-size: 9px !important; }
html.gv-land-mobile .desktop-sidebar .hero-profile-currencies { gap: 4px !important; margin-bottom: 4px !important; }
html.gv-land-mobile .desktop-sidebar .hero-currency-item { font-size: 11px !important; padding: 3px 6px !important; }
html.gv-land-mobile .desktop-sidebar .hero-profile-name { font-size: 14px !important; margin-top: 4px !important; }
html.gv-land-mobile .desktop-sidebar .hero-profile-lvl { font-size: 11px !important; }
html.gv-land-mobile .desktop-sidebar .hero-stat-val { font-size: 11px !important; }
html.gv-land-mobile .desktop-sidebar .hero-stat-label { font-size: 9px !important; }
html.gv-land-mobile .desktop-sidebar .hero-xp-bar-wrap { margin: 4px 0 !important; }
/* Equipment: 1-col, force-fit + truncate names */
html.gv-land-mobile .desktop-sidebar .equip-grid {
  grid-template-columns: 1fr !important;
  gap: 4px !important;
  margin-bottom: 8px !important;
}
html.gv-land-mobile .desktop-sidebar .equip-slot {
  padding: 3px 6px !important;
  font-size: 10px !important;
  min-height: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
html.gv-land-mobile .desktop-sidebar .equip-slot * {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html.gv-land-mobile .desktop-sidebar .equip-slot-img,
html.gv-land-mobile .desktop-sidebar .equip-slot-icon { width: 24px !important; height: 24px !important; }
/* Hero profile equipment grid (4 slots x 60px overflow 260px sidebar) — shrink slots */
html.gv-land-mobile .desktop-sidebar .hero-equip-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 3px !important;
  margin: 6px 0 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html.gv-land-mobile .desktop-sidebar .hero-eq-slot:not(.hpv9-slot):not(.x3-orb):not(.y1-eq) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  box-sizing: border-box !important;
}
html.gv-land-mobile .desktop-sidebar .hero-eq-slot:not(.hpv9-slot):not(.x3-orb):not(.y1-eq) img {
  max-width: 85% !important;
  max-height: 85% !important;
  object-fit: contain !important;
}
/* Mail + Store: fixed to top-left of viewport (top of sidebar, inside its bounds).
   Hide any duplicate in panelHero — only sidebarHeroContent copy is shown. */
html.gv-land-mobile #panelHero .hero-mail-icon-wrap,
html.gv-land-mobile #panelHero .hero-store-btn { display: none !important; }
/* Right of avatar — position absolute inside hero-avatar-area so they follow avatar vertically */
html.gv-land-mobile #sidebarHeroContent .hero-profile-card { overflow: visible !important; }
html.gv-land-mobile #sidebarHeroContent .hero-avatar-area {
  position: relative !important;
  overflow: visible !important;
}
html.gv-land-mobile #sidebarHeroContent .hero-mail-icon-wrap {
  position: absolute !important;
  left: calc(50% + 44px) !important; /* right of 72px avatar center */
  right: auto !important;
  top: 4px !important;
  bottom: auto !important;
  transform: none !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html.gv-land-mobile #sidebarHeroContent .hero-mail-icon-wrap .hero-mail-icon {
  width: 28px !important; height: 28px !important;
}
html.gv-land-mobile #sidebarHeroContent .hero-store-btn {
  position: absolute !important;
  left: calc(50% + 44px) !important;
  right: auto !important;
  top: 42px !important;
  bottom: auto !important;
  width: 64px !important;
  padding: 4px 6px !important;
  height: 30px !important;
  font-size: 9px !important;
  margin: 0 !important;
  z-index: 20 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transform: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
html.gv-land-mobile #sidebarHeroContent .hero-store-btn-icon {
  width: 14px !important; height: 14px !important;
}
/* Rift: small portals, mobile spawn pattern (see JS), popup on right */
html.gv-land-mobile .rift-circle-wrap { width: 72px !important; height: 72px !important; margin-bottom: 4px !important; }
/* Vial is now right-anchored — see new vial styling further down */
html.gv-land-mobile .rift-detail {
  position: absolute !important;
  right: 10px !important;
  left: auto !important;
  bottom: 120px !important; /* above stamina bar + nav pill */
  transform: none !important;
  width: 240px !important;
  max-width: 240px !important;
  max-height: 0 !important;
  overflow-y: auto !important;
}
html.gv-land-mobile .rift-detail.open { max-height: calc(100vh - 150px) !important; }
/* Shrink the detail content so START button fits without heavy scroll */
html.gv-land-mobile .rift-detail .rift-detail-inner { padding: 10px !important; }
html.gv-land-mobile .rift-detail .rift-detail-title { font-size: 13px !important; margin-bottom: 0 !important; }
html.gv-land-mobile .rift-detail .rift-detail-time { font-size: 10px !important; margin-bottom: 4px !important; }
html.gv-land-mobile .rift-detail .rift-detail-reward { padding: 2px 4px !important; font-size: 10px !important; }
html.gv-land-mobile .rift-detail .rift-detail-bonuses { font-size: 9px !important; padding: 4px 6px !important; margin-top: 4px !important; }
html.gv-land-mobile .rift-detail .rift-detail-bottom { padding-top: 6px !important; margin-top: 4px !important; }
html.gv-land-mobile .rift-detail:not(.open) { pointer-events: none !important; }
/* Side drawer → right of sidebar */
html.gv-land-mobile .side-drawer-toggle { left: 268px !important; top: 10px !important; }
html.gv-land-mobile .side-drawer-panel { left: 268px !important; top: 60px !important; }
/* Skill tree overlay: respect safe area */
html.gv-land-mobile #skillTreeOverlay,
html.gv-land-mobile #guildSkillTreeOverlay {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
}
/* QuickPanel align to sidebar edge */
html.gv-land-mobile .quick-panel { left: 260px !important; padding: 4px 3px !important; }
html.gv-land-mobile .quick-panel .qp-item { padding: 4px 6px !important; }
html.gv-land-mobile .quick-panel .qp-icon { width: 20px !important; height: 20px !important; }
/* Black safe-area + gold edges */
html.gv-land-mobile,
html.gv-land-mobile body { background: #000 !important; }
html.gv-land-mobile #gameScreen {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
html.gv-land-mobile body::before,
html.gv-land-mobile body::after {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 200000;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(200,168,78,0) 0%,
    rgba(200,168,78,0.55) 25%,
    rgba(200,168,78,0.7) 50%,
    rgba(200,168,78,0.55) 75%,
    rgba(200,168,78,0) 100%);
  box-shadow: 0 0 6px rgba(200,168,78,0.35);
}
html.gv-land-mobile body::before { left: env(safe-area-inset-left, 0); }
html.gv-land-mobile body::after  { right: env(safe-area-inset-right, 0); }

/* Landscape mobile modal: centered, bounded so depths boss popup doesn't squash to right */
/* Mobile: clamp body/html to viewport so no stray wide element stretches the layout
   (caused iPhone portrait to render the page at 1325px — touches missed buttons) */
html.gv-land-mobile, html.gv-port-mobile,
html.gv-land-mobile body, html.gv-port-mobile body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
html.gv-port-mobile .modal-card {
  max-width: min(94vw, 420px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html.gv-land-mobile #modalOverlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  padding-left: calc(8px + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(8px + env(safe-area-inset-right, 0px)) !important;
}
html.gv-land-mobile .modal-card {
  max-width: min(90vw, 500px) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
  margin: 0 auto !important;
}

/* ══════════════════════════════════════════════════════════════
   LEGACY MOBILE LANDSCAPE media query — kept as fallback
   (JS class takes precedence in practice)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 959px) and (orientation: landscape) {
  #gameScreen { max-width: 100%; border: none; }
  #gameLayout { flex-direction: row; }
  .desktop-sidebar {
    display: flex;
    flex-direction: column;
    width: 260px;
    min-width: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px;
    border-color: var(--border);
    background: var(--bg-lighter);
    align-self: stretch;
    scrollbar-width: thin;
  }
  #sidebarLeft {
    border-right: 1px solid var(--border);
    order: 1;
  }
  #mainContent { order: 2; flex: 1; position: relative; }
  /* Fallback for the JS-class rule above — same 80px to clear the quick strip. */
  #mainContent > .tab-panel { padding-left: 80px !important; padding-bottom: 120px !important; }
  .tab-btn[data-tab="hero"] { display: none; }
  #gameHeader { display: none; }
  /* Nav bar: floating pill only over main content (matches desktop) */
  #tabBar { position: absolute; left: 260px; right: 0; bottom: 0; margin: 0; }
  /* Hide mobile-only UI that doesn't belong in landscape */
  .mob-quick-strip { display: none !important; }
  .mob-nav-bar { display: none !important; }
  /* Compact hero sidebar for landscape mobile — fit more on screen,
     minimize scrolling. Shrink avatar, tighten paddings, use smaller fonts. */
  .desktop-sidebar { padding: 6px !important; }
  .desktop-sidebar .hero-profile-card { padding: 6px !important; }
  .desktop-sidebar .hero-profile-avatar:not(.hpv9-avatar):not(.x3-avatar):not(.y1-avatar),
  .desktop-sidebar .hero-profile-avatar-wrap:not(.hpv9-avatar-wrap):not(.x3-avatar-wrap):not(.y1-card) {
    width: 72px !important;
    height: 72px !important;
  }
  .desktop-sidebar .hero-profile-avatar:not(.hpv9-avatar):not(.x3-avatar):not(.y1-avatar) {
    border-radius: 12px !important;
  }
  .desktop-sidebar .hero-mini-btns { gap: 3px !important; margin-bottom: 4px !important; }
  .desktop-sidebar .hero-mini-btn {
    padding: 3px 5px !important;
    font-size: 9px !important;
  }
  .desktop-sidebar .hero-profile-currencies {
    gap: 4px !important;
    margin-bottom: 4px !important;
  }
  .desktop-sidebar .hero-currency-item { font-size: 11px !important; padding: 3px 6px !important; }
  .desktop-sidebar .hero-profile-center { margin-top: 2px !important; }
  .desktop-sidebar .hero-profile-name { font-size: 14px !important; margin-top: 4px !important; }
  .desktop-sidebar .hero-profile-lvl { font-size: 11px !important; }
  .desktop-sidebar .hero-stat-val { font-size: 11px !important; }
  .desktop-sidebar .hero-stat-label { font-size: 9px !important; }
  .desktop-sidebar .hero-xp-bar-wrap { margin: 4px 0 !important; }
  .desktop-sidebar .equip-slot {
    padding: 3px 6px !important;
    font-size: 10px !important;
    min-height: 28px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .desktop-sidebar .equip-slot * {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .desktop-sidebar .equip-slot-label { font-size: 9px !important; }
  .desktop-sidebar .equip-slot-name { font-size: 10px !important; }
  .desktop-sidebar .hero-side-btn,
  .desktop-sidebar .hero-profile-sidebtn,
  .desktop-sidebar .hero-skill-btn,
  .desktop-sidebar .hero-premium-btn { font-size: 10px !important; padding: 4px 6px !important; }
  .desktop-sidebar .hero-pet-slot {
    width: 32px !important; height: 32px !important;
  }
  /* Quick panel — align to narrower sidebar edge */
  .quick-panel { left: 260px !important; padding: 4px 3px !important; }
  .quick-panel .qp-item { padding: 4px 6px !important; }
  .quick-panel .qp-icon { width: 20px !important; height: 20px !important; }
  .quick-panel .qp-label { font-size: 10px !important; }
  .quick-panel .qp-sub { font-size: 8px !important; }
  /* Equipment grid: 2-col fits desktop but crops at 260px sidebar — go 1-col */
  .desktop-sidebar .equip-grid {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  .desktop-sidebar .equip-slot {
    overflow: hidden;
  }
  .desktop-sidebar .equip-slot-img,
  .desktop-sidebar .equip-slot-icon {
    width: 24px !important;
    height: 24px !important;
  }

  /* Black safe-area background + golden glowing edge frames */
  html, body { background: #000 !important; }
  #gameScreen {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Subtle gold edge frame (dimmer than first iteration) */
  body::before, body::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 200000;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(200,168,78,0) 0%,
      rgba(200,168,78,0.55) 25%,
      rgba(200,168,78,0.7) 50%,
      rgba(200,168,78,0.55) 75%,
      rgba(200,168,78,0) 100%);
    box-shadow: 0 0 6px rgba(200,168,78,0.35);
  }
  body::before { left: env(safe-area-inset-left, 0); }
  body::after  { right: env(safe-area-inset-right, 0); }

  /* Rift stamina bar must not cover sidebar */
  /* Vial is now right-anchored — see new vial styling further down */
  /* Rift detail popup — park on the RIGHT edge (not centered) so it doesn't
     cover the portals in the middle of the screen. Shorter + scrollable.
     max-height:0 when not open so clicks pass through to portals below. */
  .rift-detail {
    position: absolute !important;
    right: 10px !important;
    left: auto !important;
    bottom: 70px !important;
    transform: none !important;
    width: 280px !important;
    max-width: 280px !important;
    max-height: 0 !important;
    overflow-y: auto !important;
  }
  .rift-detail.open { max-height: calc(100vh - 90px) !important; }
  .rift-detail:not(.open) { pointer-events: none !important; }
  /* Skill tree full-screen overlay: respect iPhone notch/camera safe area
     so the close X in the top-right corner is reachable. */
  #skillTreeOverlay, #guildSkillTreeOverlay {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
  }
  /* Side drawer (Daily/Achievements/Invite) must sit RIGHT of sidebar, not on top */
  .side-drawer-toggle { left: 260px !important; top: 10px !important; }
  .side-drawer-panel { left: 260px !important; top: 60px !important; }
  /* Mail + Store: keep visible, repositioned inside sidebar via gv-land-mobile rules above */
  /* Portal circles: even tighter + central spawn pattern */
  .rift-circle-wrap { width: 72px !important; height: 72px !important; margin-bottom: 4px !important; }
}

/* ══════════════════════════════════════════════════════════════
   ORIENTATION GATE — force landscape on mobile portrait
   Full-screen overlay that blocks all play when phone is portrait.
   ══════════════════════════════════════════════════════════════ */
.gv-orient-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: linear-gradient(180deg, #0a0816 0%, #14102a 100%);
  color: #fff;
  padding: 24px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.gv-orient-inner {
  max-width: 320px;
  width: 100%;
}
.gv-orient-brand {
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 4px;
  color: #c8a84e;
  margin-bottom: 24px;
  font-weight: 800;
}
.gv-orient-icon {
  font-size: 88px;
  line-height: 1;
  margin-bottom: 24px;
  display: inline-block;
  animation: gvOrientRotate 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 16px rgba(200,168,78,0.35));
}
@keyframes gvOrientRotate {
  0%, 45%, 100% { transform: rotate(0deg); }
  50%, 95% { transform: rotate(-90deg); }
}
.gv-orient-title {
  font-family: Cinzel, serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffd700;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  text-shadow: 0 0 18px rgba(255,215,0,0.35);
}
.gv-orient-sub {
  font-size: 13px;
  color: #aaa;
  line-height: 1.55;
}
/* Orientation gate DISABLED during mobile landscape rebuild so players
   aren't blocked while we iterate. Re-enable once layout is stable. */
.gv-orient-gate { display: none !important; }

/* --- Header --- */
#gameHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, #2a1850 0%, #1a1035 100%);
  padding: 8px 14px 0;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.header-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.header-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Avatar with ornate frame */
.header-avatar-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.header-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: transparent;
}

.header-name-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-bright);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  line-height: 1.1;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.header-level {
  font-size: 10px;
  color: var(--gold);
  font-weight: 700;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,180,0,0.1));
  border: 1px solid rgba(255,215,0,0.3);
  padding: 1px 7px;
  border-radius: 8px;
}

.header-class-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 1px;
  font-family: var(--font-body);
  white-space: nowrap;
}

/* Right side: currencies + power + settings */
.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
@media (max-width: 959px) {
  #headerBugBtn { display: none !important; }
  #headerSettingsWrap { display: none !important; }
}
@media (max-width: 500px) {
  .header-right { gap: 4px; }
  .header-right .currency-item { padding: 2px 6px 2px 2px; font-size: 11px; }
  .header-right .currency-icon { width: 14px; height: 14px; }
  .header-right .header-power { font-size: 10px; gap: 2px; }
  .header-right .header-power-icon { width: 14px; height: 14px; }
}

.currency-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 10px 3px 3px;
  border-radius: 16px;
}

.currency-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.currency-gold {
  color: var(--gold);
  border-color: rgba(255,215,0,0.15);
}

.currency-crystals {
  color: #6FD5FF;
  border-color: rgba(111,213,255,0.15);
  cursor: pointer;
  position: relative;
}
.currency-crystals::after {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: rgba(46,213,115,0.2); border: 1px solid rgba(46,213,115,0.4);
  font-size: 12px; font-weight: 900; color: #2ED573;
  margin-left: 4px;
}

/* Power display */
.header-power {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,215,0,0.15);
  padding: 3px 10px 3px 3px;
  border-radius: 16px;
}

.header-power-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.header-power-val {
  font-family: var(--font-display);
  font-size: 13px;
}

/* XP bar — full width bottom row */
.header-xp-row {
  margin: 0 -14px;
  padding: 0 14px 0;
}

.header-xp-bar-wrap {
  position: relative;
  height: 16px;
  width: 100%;
}

.header-xp-bar {
  position: absolute;
  inset: 0;
  background: rgba(10,5,30,0.7);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(168,85,247,0.25);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 6px rgba(168,85,247,0.1);
}

.header-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #9333ea, #a855f7, #7c3aed, #6366f1, #a855f7);
  background-size: 300% 100%;
  border-radius: 7px;
  transition: width 0.3s ease-out;
  animation: xpShimmer 4s linear infinite;
  box-shadow: 0 0 10px rgba(168,85,247,0.5), 0 0 20px rgba(124,58,237,0.2), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2);
}

@keyframes xpShimmer {
  0% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

.header-xp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: var(--text-bright);
  font-weight: 700;
  z-index: 3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.7);
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.header-settings-wrap {
  position: relative;
  flex-shrink: 0;
}

.header-settings-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
  min-height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
}

.header-settings-btn:hover {
  background: rgba(255,255,255,0.1);
}

.header-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 6px;
  z-index: 100;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  display: none;
}

.header-menu.open {
  display: block;
}

.header-menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  min-height: 44px;
}

.header-menu button:hover {
  background: rgba(255,255,255,0.06);
}

.header-menu .menu-danger {
  color: var(--hp-red);
}

/* --- Main Content Area --- */
#mainContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  position: relative;
}

.tab-panel {
  display: none;
  padding: 14px;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
}
@media (max-width: 959px) {
  /* Bottom space must clear BOTH the sticky tab bar (~52px) AND the
     fixed `.mob-quick-strip` overlay (~44px) sitting above it. The old
     40px was too small — last row of grid panels (shop, fishing, etc)
     was hidden behind the quick strip. */
  .tab-panel { padding-bottom: 160px; }
}

.tab-panel.active {
  display: block;
}

/* ── Anvil layout ── */
.anvil-wrap { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.anvil-item-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
}
@media (max-width: 640px) {
  .anvil-item-grid { grid-template-columns: 1fr; }
  .anvil-wrap { max-width: 100%; }
}

/* ── Anvil page background ── */
#panelAnvil {
  background: linear-gradient(180deg, rgba(10,10,15,0.75) 0%, rgba(10,10,15,0.92) 100%),
              url('../img/anvil/anvil_bg.jpg') center top / cover no-repeat;
  min-height: calc(100vh - 60px);
}

/* ── Gem Forge background fix ── */

/* ── Compact mode — auto-enabled on small viewports ── */
body.gv-compact .tab-panel { padding: 8px 10px; }
body.gv-compact .section-title { font-size: 13px; margin-bottom: 6px; }
body.gv-compact .home-welcome { padding: 12px; margin-bottom: 8px; }
body.gv-compact .home-welcome-title { font-size: 14px; }
body.gv-compact .home-welcome-subtitle { font-size: 11px; }
body.gv-compact .home-stats-grid { gap: 6px; margin-bottom: 8px; }
body.gv-compact .home-stat-card { padding: 8px 6px; }
body.gv-compact .home-stat-value { font-size: 16px; }
body.gv-compact .home-stat-label { font-size: 9px; }
body.gv-compact .home-actions { gap: 6px; margin-bottom: 8px; }
body.gv-compact .home-action { padding: 8px 4px; }
body.gv-compact .home-action-label { font-size: 10px; }
body.gv-compact .home-action-icon { width: 28px; height: 28px; }
body.gv-compact .news-card { padding: 10px 12px; margin-bottom: 6px; }
body.gv-compact .news-version { font-size: 11px; }
body.gv-compact .news-text { font-size: 11px; }
body.gv-compact .gd-section { padding: 10px; margin-bottom: 8px; }
body.gv-compact .gd-label { font-size: 11px; margin-bottom: 4px; }
body.gv-compact .modal-card { padding: 16px; }
body.gv-compact .dng-boss-card { padding: 10px; }
body.gv-compact .arena-card { padding: 10px; }
body.gv-compact .settings-section { padding: 10px; margin-bottom: 8px; }

#panelRankings {
  background: url('../img/rankings-bg.webp?v=1') center top/cover no-repeat, #0a0818;
  min-height: 100%;
  position: relative;
}
#panelRankings::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(10,8,24,0.4) 0%, rgba(10,8,24,0.85) 40%, rgba(10,8,24,0.95) 100%);
  pointer-events: none;
}

/* --- Home Dashboard --- */
#panelHome {
  background: url('../img/home/bg.webp?v=2') center/cover no-repeat;
  background-attachment: fixed;
  position: relative;
  min-height: 100%;
}
/* Portrait/mobile swap — use the tall version when the viewport is taller
   than it is wide, so the castle-valley composition fills the screen. */
@media (orientation: portrait) {
  #panelHome {
    background-image: url('../img/home/bg-portrait.webp?v=2');
    background-attachment: scroll; /* fixed causes jank on mobile */
  }
}

#panelHome.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#panelHome::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 5, 25, 0.55) 0%, rgba(15, 8, 35, 0.72) 100%);
  pointer-events: none;
}

#panelHome > * {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 800px;
}

.home-logo {
  text-align: center;
  margin-bottom: 12px;
}

.home-logo-img {
  max-width: 260px;
  height: auto;
  filter: drop-shadow(0 4px 16px rgba(255,215,0,0.3));
}

.home-welcome {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(35,22,65,0.92), rgba(22,14,48,0.96));
  border: 1px solid rgba(200, 168, 78, 0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  width: 64px;
  height: 64px;
}
.home-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  background: transparent;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
  transition: filter 0.2s;
}

.home-avatar-wrap:hover .home-avatar {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)) brightness(1.1);
}
.home-avatar-frame-unused {
  display: none;
  z-index: 2;
}

/* Avatar edit hint — works on both hero panel and home */
.avatar-edit-hint {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: var(--gold);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: nowrap;
}

.home-avatar-wrap:hover .avatar-edit-hint,
.hero-profile-avatar-wrap:hover .avatar-edit-hint {
  opacity: 1;
}

.hero-alpha-badge {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #BF5FFF, #8B3FC7);
  color: #fff; font-size: 8px; font-weight: 900; letter-spacing: 1px;
  padding: 2px 10px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(191,95,255,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  z-index: 2;
}
.hero-premium-badge {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #1a0e2e; font-size: 8px; font-weight: 900; letter-spacing: 1px;
  padding: 2px 10px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(255,215,0,0.4);
  z-index: 2;
}

.home-welcome-name {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 2px;
}

.home-welcome-meta {
  font-size: 12px;
  color: var(--text-dim);
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.home-stat-card {
  background: linear-gradient(180deg, rgba(35,22,65,0.92), rgba(22,14,48,0.96));
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: var(--radius);
  padding: 14px 8px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-stat-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-bottom: 4px;
}

.home-stat-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}

.home-stat-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.home-section {
  margin-bottom: 16px;
}

.home-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200, 168, 78, 0.2);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* Home idle farming card */
.home-idle-card {
  background: rgba(30, 200, 120, 0.06);
  border: 1px solid rgba(46, 213, 115, 0.2);
  border-radius: 10px;
  padding: 14px 16px;
}
.home-idle-header {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}
.home-idle-header strong { color: #2ED573; }
.home-idle-rewards {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.home-idle-claim {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #2ED573, #1fa855);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
}
.home-idle-claim:hover { filter: brightness(1.1); transform: translateY(-1px); }
.home-idle-claim:disabled { opacity: 0.5; cursor: default; transform: none;
  background: linear-gradient(90deg, rgba(200,168,78,0.08) 0%, transparent 60%);
  padding: 6px 10px;
  border-radius: 4px 4px 0 0;
}

.home-quest-card {
  background: linear-gradient(180deg, rgba(35,22,65,0.92), rgba(22,14,48,0.96));
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-quest-name {
  font-family: var(--font-display);
  font-size: 14px;
  margin-bottom: 8px;
}

.home-quest-bar {
  height: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 4px;
}

.home-quest-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--xp-blue), #2ED573);
  border-radius: 4px;
  transition: width 0.3s;
}

.home-quest-time {
  font-size: 11px;
  color: var(--text-dim);
}

.home-empty {
  font-size: 13px;
  color: var(--text-dim);
  padding: 14px;
  background: linear-gradient(180deg, rgba(35,22,65,0.92), rgba(22,14,48,0.96));
  border-radius: var(--radius);
  border: 1px solid rgba(200, 168, 78, 0.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-link {
  color: var(--gold);
  text-decoration: none;
}

.home-link:hover {
  text-decoration: underline;
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.home-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px;
  background: linear-gradient(180deg, rgba(35,22,65,0.92), rgba(22,14,48,0.96));
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-action-btn:hover {
  background: linear-gradient(180deg, rgba(50,30,80,0.95), rgba(30,18,60,0.98));
  border-color: rgba(200, 168, 78, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(200,168,78,0.1);
}
.home-action-soon {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.home-soon-tag {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #FF4757, #FF6B81);
  padding: 1px 5px;
  border-radius: 3px;
  position: absolute;
  top: 4px;
  right: 4px;
}

.home-action-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.home-news {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.home-news-item {
  background: linear-gradient(180deg, rgba(35,22,65,0.92), rgba(22,14,48,0.96));
  border: 1px solid rgba(200, 168, 78, 0.15);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}

.home-news-date {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 4px;
}

.home-news-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

@media (max-width: 600px) {
  .home-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Bottom Tab Bar --- */
#tabBar {
  position: sticky;
  bottom: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    rgba(18,12,28,0) 0%,
    rgba(18,12,28,0.55) 45%,
    rgba(12,8,20,0.9) 100%);
  border-top: none;
  flex-shrink: 0;
  padding: 14px 12px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#tabBar::-webkit-scrollbar { display: none; }

/* Desktop: tab bar floats only over main content area (not under sidebar).
   Absolute positioning removes it from flex flow so sidebar fills full height.
   Defined after the base #tabBar rule so cascade order overrides sticky. */
@media (min-width: 960px) {
  #tabBar {
    position: absolute;
    left: 300px;
    right: 0;
    bottom: 0;
    margin: 0;
  }
}
@media (min-width: 1200px) {
  #tabBar {
    left: 340px;
  }
}

/* Floating pill (VB) */
#tabBar::before { display: none; }
.tab-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(28,20,12,0.94), rgba(14,10,6,0.97));
  border: 1px solid rgba(200,154,78,0.35);
  border-radius: 22px;
  padding: 5px 8px;
  gap: 2px;
  max-width: calc(100% - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  pointer-events: auto;
  box-shadow:
    0 8px 28px rgba(0,0,0,0.55),
    0 0 18px rgba(255,215,0,0.08),
    inset 0 1px 0 rgba(255,215,0,0.08);
}
.tab-bar-inner::-webkit-scrollbar { display: none; }

/* ── Mobile Quick Strip (inventory, zone, ads, chat) ── */
.mob-quick-strip {
  display: none;
}
@media (max-width: 959px) {
  .mob-quick-strip {
    display: flex;
    position: fixed;
    bottom: 52px;
    left: 0;
    right: 0;
    z-index: 49;
    background: linear-gradient(180deg, rgba(26,16,53,0.95), rgba(18,10,38,0.98));
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 4px 8px;
    gap: 6px;
    /* v23.0.883 — was justify-content:center which centred the whole
       row and let the leftmost tile (Daily Login Bonus) clip off-
       screen on phones with 9 tiles. Anchor at flex-start + horizontal
       scroll so every tile is reachable; hide the scrollbar so the
       look stays clean. Maxxl: "I can't swipe to the left to see the
       daily login Bonus Button". */
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .mob-quick-strip::-webkit-scrollbar { display: none; }
}
.mqs-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #ccc;
  white-space: nowrap;
}
.mqs-item img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.mqs-item:active { background: rgba(255,255,255,0.12); }
.mqs-zone { color: #4FC3F7; border-color: rgba(79,195,247,0.2); }
.mqs-ad { color: #b388ff; border-color: rgba(179,136,255,0.2); }
.mqs-chat { position: relative; }

/* ═══════════════════════════════════════════════════════════
   Mobile Quick Strip — NEW vertical tile grid with sections.
   Shows all major timers (daily / ad / world boss / veilstone
   pass / rift / arena / expedition / zone / inventory) + social
   buttons (chat / achievements / invite). Updates every 1s.
   ═══════════════════════════════════════════════════════════ */
.mqs-sec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mqs-sep {
  height: 1px;
  margin: 6px 4px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.28), transparent);
  flex-shrink: 0;
}
.mqs-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 3px;
  background: linear-gradient(180deg, rgba(40,24,70,0.75), rgba(18,12,36,0.9));
  border: 1px solid rgba(199,122,252,0.22);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  transition: transform .1s, box-shadow .15s;
  overflow: hidden;
  flex-shrink: 0;
}
.mqs-tile:active { transform: scale(0.95); }
.mqs-tile img { width: 22px; height: 22px; object-fit: contain; }
.mqs-tile .mqs-ic-e { font-size: 18px; line-height: 1; }
.mqs-tile .mqs-lbl {
  font-size: 8px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.3px; text-transform: uppercase;
  line-height: 1.1;
  margin-top: 1px;
  white-space: nowrap;
}
.mqs-tile .mqs-val {
  font-size: 9px; font-weight: 800;
  color: #c7a6ff;
  line-height: 1;
  margin-top: 1px;
  white-space: nowrap;
}

/* Tile states */
.mqs-tile.ready {
  border-color: rgba(255,215,0,0.65);
  background: linear-gradient(180deg, rgba(80,55,20,0.8), rgba(40,25,10,0.9));
}
.mqs-tile.ready .mqs-val { color: #fff5c8; }
.mqs-tile.pulse {
  animation: mqsTilePulse 1.8s ease-in-out infinite;
}
@keyframes mqsTilePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.35); }
  50% { box-shadow: 0 0 14px 2px rgba(255,215,0,0.65); }
}
.mqs-tile.urgent {
  border-color: rgba(255,71,87,0.6);
  background: linear-gradient(180deg, rgba(80,16,28,0.8), rgba(40,8,16,0.9));
}
.mqs-tile.urgent .mqs-val { color: #ff8f90; }
.mqs-tile.done { opacity: 0.45; }

/* Count badge on quick-bar tiles (e.g. unclaimed achievements count) */
.mqs-tile .mqs-bdg, .qp-tile .qp-bdg {
  position: absolute;
  top: -4px; right: -4px;
  background: linear-gradient(135deg, #ff6b7a, #e63946);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
  z-index: 2;
}
.mqs-tile, .qp-tile { position: relative; }
.mqs-tile.hint { opacity: 0.78; }
.mqs-tile.hint .mqs-val { color: #7ecdff; }
.mqs-tile.info .mqs-lbl { color: #7ecdff; }
.mqs-tile.gold {
  border-color: rgba(255,215,140,0.35);
  background: linear-gradient(180deg, rgba(100,70,20,0.6), rgba(50,35,10,0.75));
}
.mqs-tile.gold .mqs-lbl { color: #ffd890; }

/* Landscape-mobile: strip layout tweaks to accommodate richer tiles */
html.gv-land-mobile .mob-quick-strip {
  flex-direction: column !important;
  align-items: stretch !important;
  max-width: 70px !important;
  padding: 6px 4px !important;
  gap: 0 !important;
  background: linear-gradient(180deg, rgba(20,14,40,0.95), rgba(12,8,28,0.97)) !important;
  border-left: none !important;
  border: 1px solid rgba(255,215,0,0.18) !important;
  border-left: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: 3px 0 16px rgba(0,0,0,0.55) !important;
}
html.gv-land-mobile .mob-quick-strip .mqs-tile {
  padding: 4px 2px !important;
  gap: 0 !important;
}
html.gv-land-mobile .mob-quick-strip .mqs-tile img { width: 20px !important; height: 20px !important; }
html.gv-land-mobile .mob-quick-strip .mqs-tile .mqs-ic-e { font-size: 16px !important; }
html.gv-land-mobile .mob-quick-strip .mqs-tile .mqs-lbl { font-size: 7px !important; letter-spacing: 0.2px !important; }
html.gv-land-mobile .mob-quick-strip .mqs-tile .mqs-val { font-size: 8px !important; }

/* Portrait-mobile: strip becomes a horizontal bottom bar (legacy feel)
   but with new tile styling — scrollable if overflow */
@media (max-width: 959px) and (orientation: portrait) {
  .mob-quick-strip {
    flex-direction: row !important;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 6px 8px;
    gap: 4px;
  }
  .mqs-sec {
    flex-direction: row !important;
    flex-shrink: 0;
  }
  .mqs-sep {
    width: 1px;
    height: auto;
    margin: 4px 2px;
    background: linear-gradient(180deg, transparent, rgba(255,215,0,0.28), transparent);
  }
  .mqs-tile {
    min-width: 64px;
    padding: 5px 4px;
  }
}

/* ── Mobile burger menu ── */
.mob-nav-burger { display: none; }
@media (max-width: 959px) {
  .tab-bar-inner { display: none !important; }
  .mob-nav-bar {
    display: flex !important;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 0;
    gap: 0;
  }
  .mob-nav-bar .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px;
  }
  .mob-nav-burger {
    display: flex !important;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 4px 2px;
    background: none;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--text-dim);
    font-size: 10px;
    cursor: pointer;
    gap: 1px;
    transition: all 0.2s;
  }
  .mob-nav-burger .tab-icon-img {
    width: 24px; height: 24px; object-fit: contain;
    filter: grayscale(0.5) brightness(0.6);
  }
  .mob-nav-burger.open {
    color: var(--gold);
    background: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.2);
  }
  .mob-nav-burger.open .tab-icon-img,
  .mob-nav-burger.open > span:first-child {
    filter: grayscale(0) brightness(1.2) drop-shadow(0 0 6px rgba(255,215,0,0.5));
  }
}
@media (min-width: 960px) {
  .mob-nav-bar { display: none !important; }
}

/* Landscape mobile: treat like desktop — show full tab bar, hide mobile UI.
   Placed here (after the mobile-portrait rules above) so cascade wins
   the specificity tie on display:none/!important. */
@media (max-width: 959px) and (orientation: landscape) {
  .mob-nav-bar { display: none !important; }
  .mob-nav-burger { display: none !important; }
  .tab-bar-inner { display: flex !important; }
}

/* Burger overlay */
.mob-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.mob-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mob-nav-grid {
  position: fixed;
  bottom: 56px;
  left: 8px;
  right: 8px;
  z-index: 200;
  background: linear-gradient(180deg, rgba(20,14,35,0.98), rgba(10,6,18,0.99));
  border: 1px solid rgba(255,215,0,0.12);
  border-radius: 16px;
  padding: 16px 12px 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
.mob-nav-overlay.open .mob-nav-grid {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mob-nav-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: all 0.15s;
}
.mob-nav-grid-item:active {
  transform: scale(0.93);
  background: rgba(255,215,0,0.1);
}
.mob-nav-grid-item.active {
  background: rgba(255,215,0,0.08);
  border-color: rgba(255,215,0,0.2);
}
.mob-nav-grid-item img {
  width: 28px; height: 28px; object-fit: contain;
  filter: grayscale(0.3) brightness(0.8);
}
.mob-nav-grid-item.active img {
  filter: grayscale(0) brightness(1.2) drop-shadow(0 0 6px rgba(255,215,0,0.5));
}
.mob-nav-grid-item span {
  font-size: 9px; color: #888; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 70px; text-align: center;
}
.mob-nav-grid-item.active span { color: var(--gold); }
.mob-nav-grid-item { position: relative; }
.mob-nav-lock-badge {
  position: absolute !important;
  top: 2px;
  right: 2px;
  background: rgba(255,100,100,0.25);
  border: 1px solid rgba(255,100,100,0.4);
  color: #ff6b6b !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  padding: 1px 4px;
  border-radius: 4px;
  max-width: none !important;
  white-space: nowrap !important;
}
.mob-nav-grid-item.mob-locked {
  opacity: 0.7;
}
.mob-nav-grid-sep {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 2px 0;
}

/* Vertical dividers between tab groups */
.tab-divider {
  width: 1px;
  align-self: center;
  height: 22px;
  background: linear-gradient(180deg, transparent, rgba(200,154,78,0.35), transparent);
  flex-shrink: 0;
  margin: 0 3px;
}

.tab-btn {
  flex: 0 0 auto;
  min-width: 52px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #b09870;
  font-size: 10px;
  text-align: center;
  position: relative;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.tab-btn .tab-icon {
  font-size: 20px;
  display: block;
  line-height: 1.2;
}

.tab-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(0.5) brightness(0.6);
  transition: filter 0.25s, transform 0.2s;
}

.tab-btn.active .tab-icon-img {
  filter: grayscale(0) brightness(1.2) drop-shadow(0 0 6px rgba(255,215,0,0.5));
  transform: scale(1.1);
}

/* --- World Boss compact tile (left of nav bar) --- */
.wb-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; cursor: pointer; flex-shrink: 0;
  margin-right: 6px;
  background: linear-gradient(135deg, rgba(40,15,60,0.9), rgba(25,10,45,0.95));
  border: 1px solid rgba(191,95,255,0.25);
  border-radius: 10px;
  transition: all 0.2s;
  max-width: 170px;
  position: relative;
}
.wb-banner:hover { border-color: rgba(191,95,255,0.5); background: linear-gradient(135deg, rgba(50,20,75,0.95), rgba(30,15,55,0.98)); }
.wb-banner-portrait { width: 30px; height: 30px; object-fit: contain; border-radius: 6px; border: 1px solid rgba(191,95,255,0.3); flex-shrink: 0; }
.wb-banner-info { flex: 1; min-width: 0; line-height: 1.2; }
.wb-banner-name { font-size: 10px; font-weight: 800; color: #BF5FFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-banner-timer { font-size: 8px; color: #888; }
.wb-banner-live {
  position: absolute; top: -3px; right: -3px;
  background: #FF4757; color: #fff; font-size: 6px; font-weight: 900;
  padding: 1px 4px; border-radius: 4px; letter-spacing: 0.5px;
  box-shadow: 0 0 6px rgba(255,71,87,0.5);
  animation: wbBannerPulse 1.5s ease-in-out infinite;
}
.wb-banner-btn { display: none; } /* hide button, whole tile is clickable */
@keyframes wbBannerPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* --- SOON tabs (locked) --- */
.tab-btn.tab-soon {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.tab-soon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: linear-gradient(135deg, #FF4757, #FF6B81);
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
}

/* --- Level-locked tabs --- */
.tab-btn.tab-locked {
  opacity: 0.35;
  cursor: not-allowed;
}
.tab-btn.tab-locked .tab-icon-img {
  filter: grayscale(1) brightness(0.4);
}
.tab-locked-badge {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #aaa;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
/* v23.0.721 — "coming soon" tab variant: same structure as level-locked but
   gold-tinted so users can tell it's "in the pipeline" not "level-gated". */
.tab-btn.tab-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.tab-btn.tab-soon .tab-icon-img {
  filter: grayscale(0.5) brightness(0.75);
}
.tab-btn.tab-soon .tab-locked-badge {
  color: #ffd890;
  background: linear-gradient(135deg, rgba(138,106,26,0.92), rgba(90,68,12,0.95));
  border-color: rgba(255,216,144,0.55);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  box-shadow: 0 0 8px rgba(255,216,144,0.35);
}

/* --- Tab unlock celebration --- */
.tab-unlock-flash {
  position: fixed; inset: 0; z-index: 9998;
  background: radial-gradient(circle at center, rgba(200,168,78,0.25), transparent 70%);
  pointer-events: none;
  animation: tabUnlockFlash 1.2s ease-out forwards;
}
@keyframes tabUnlockFlash {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.tab-unlock-glow {
  animation: tabUnlockGlow 2s ease-in-out 3;
}
@keyframes tabUnlockGlow {
  0%, 100% { filter: grayscale(0) brightness(1.2) drop-shadow(0 0 6px rgba(255,215,0,0.5)); }
  50% { filter: grayscale(0) brightness(1.8) drop-shadow(0 0 14px rgba(255,215,0,0.9)); }
}

.tab-btn .tab-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.tab-timer-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 800; padding: 1px 5px; border-radius: 6px;
  white-space: nowrap; letter-spacing: 0.3px; pointer-events: none;
}
.tab-timer-badge.ready { background: rgba(46,213,115,0.9); color: #fff; box-shadow: 0 0 6px rgba(46,213,115,0.5); }
.tab-timer-badge.cooldown { background: rgba(255,69,0,0.85); color: #fff; box-shadow: 0 0 6px rgba(255,69,0,0.4); }
.tab-timer-badge.active { background: rgba(79,172,254,0.85); color: #fff; box-shadow: 0 0 6px rgba(79,172,254,0.4); }

.tab-btn:hover {
  color: #e0c080;
  background: rgba(200,154,78,0.08);
}

.tab-btn.active {
  color: #ffdb78;
  background: linear-gradient(180deg, rgba(200,154,78,0.25), rgba(140,90,30,0.15));
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 10px rgba(255,215,0,0.2), inset 0 0 6px rgba(255,215,0,0.08);
}

.tab-btn.active .tab-icon {
  color: var(--gold);
}

.tab-btn.active::after {
  display: none;
}

/* ============================================
   SHARED COMPONENTS
   ============================================ */

/* Section titles inside tabs */
.section-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* Generic card */
.gv-card {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  transition: border-color 0.2s, transform 0.1s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.gv-card:active {
  transform: scale(0.98);
}

/* Primary button */
.btn-primary {
  background: linear-gradient(135deg, #F0C040, #E09530);
  color: #1a1035;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  min-height: 44px;
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
  box-shadow: 0 3px 10px rgba(224, 149, 48, 0.2);
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(224, 149, 48, 0.3);
  transform: scale(1.02);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Secondary button */
.btn-secondary {
  background: var(--hp-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
  transition: border-color 0.2s;
}

.btn-secondary:active {
  border-color: var(--gold-dim);
}

/* Danger button */
.btn-danger {
  background: rgba(255,71,87,0.15);
  color: var(--hp-red);
  border: 1px solid rgba(255,71,87,0.3);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
}

/* ============================================
   BASE TAB — Stronghold
   ============================================ */

.building-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.building-card {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.building-card:hover {
  border-color: rgba(140, 120, 255, 0.4);
  transform: translateY(-2px);
}

.building-card.upgrading {
  border-color: rgba(255,215,0,0.4);
}

.building-icon {
  font-size: 32px;
  margin-bottom: 6px;
  display: block;
}

.building-icon-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  margin-bottom: 6px;
  object-fit: cover;
}

.building-name {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-bright);
  margin-bottom: 2px;
}

.building-level {
  font-size: 11px;
  color: var(--gold-dim);
  margin-bottom: 4px;
  font-weight: 600;
}

.building-output {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.building-upgrade-btn {
  width: 100%;
  padding: 8px 6px;
  background: linear-gradient(135deg, #F0C040, #E09530);
  color: #1a1035;
  font-size: 11px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  min-height: 44px;
  transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(224, 149, 48, 0.2);
}

.building-upgrade-btn:hover {
  box-shadow: 0 4px 16px rgba(224, 149, 48, 0.3);
  transform: scale(1.02);
}

.building-upgrade-btn:active {
  transform: scale(0.96);
}

.building-upgrade-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.building-timer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--hp-bg);
  overflow: hidden;
}

.building-timer-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  transition: width 1s linear;
}

.building-timer-text {
  font-size: 11px;
  color: var(--gold);
  font-weight: 600;
  margin-top: 4px;
}

/* ============================================
   HERO TAB — Character
   ============================================ */

/* Hero 2-column layout */
/* Hero Profile Card */
.hero-profile-card {
  background: url('../img/panel-bg.webp?v=9.2.0') center/cover no-repeat;
  border: 2px solid rgba(255,215,0,0.2);
  border-radius: var(--radius-lg);
  padding: 16px 14px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}

.hero-profile-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,5,30,0.25);
  pointer-events: none;
}

.hero-profile-card > * {
  position: relative;
  z-index: 1;
}

/* Class-themed profile colors */
.hero-class-warrior {
  border-color: rgba(255,71,87,0.25);
}
.hero-class-warrior::before {
  background: rgba(40,8,8,0.3);
}
.hero-class-warrior .hero-xp-bar {
  border-color: rgba(255,71,87,0.3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(255,71,87,0.15);
}
.hero-class-warrior .hero-xp-fill {
  background: linear-gradient(90deg, #dc2626, #ef4444, #b91c1c, #f87171, #ef4444);
  background-size: 300% 100%;
}
.hero-class-warrior .hero-profile-level {
  border-color: rgba(255,71,87,0.3);
  color: #ff6b7a;
}

.hero-class-mage {
  border-color: rgba(168,85,247,0.25);
}
/* mage uses default purple — no overrides needed */

.hero-class-blade_dancer {
  border-color: rgba(46,213,115,0.25);
}
.hero-class-blade_dancer::before {
  background: rgba(5,30,12,0.3);
}
.hero-class-blade_dancer .hero-xp-bar {
  border-color: rgba(46,213,115,0.3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(46,213,115,0.15);
}
.hero-class-blade_dancer .hero-xp-fill {
  background: linear-gradient(90deg, #059669, #10b981, #047857, #34d399, #10b981);
  background-size: 300% 100%;
}
.hero-class-blade_dancer .hero-profile-level {
  border-color: rgba(46,213,115,0.3);
  color: #4ade80;
}

/* Mini buttons row (Stats + Settings) */
.hero-mini-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.hero-mini-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 11px;
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  min-height: 28px;
}
.hero-mini-btn:hover, .hero-mini-btn:active {
  background: rgba(79,172,254,0.1);
  border-color: rgba(79,172,254,0.3);
  color: #4FACFE;
}
.hero-mini-btn-icon {
  width: 14px;
  height: 14px;
}

/* Centered avatar layout */
.hero-profile-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}
.hero-avatar-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-store-btn {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(100,200,255,0.25);
  background: linear-gradient(135deg, rgba(100,200,255,0.08), rgba(60,120,255,0.05));
  cursor: pointer; transition: all 0.2s; color: #64C8FF;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  z-index: 1;
}
.hero-store-btn:hover { border-color: rgba(100,200,255,0.5); background: rgba(100,200,255,0.12); }
.hero-store-btn:active { transform: scale(0.95); }
.hero-store-btn-icon { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(100,200,255,0.4)); }
.hero-side-btns {
  position: absolute;
  left: -44px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.hero-side-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.2s;
  padding: 0;
}
.hero-side-btn:hover {
  background: rgba(200,168,78,0.2);
  border-color: var(--gold);
}
.hero-side-btn-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.hero-side-btn-notif {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF4757;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  padding: 0 3px;
}
.hero-side-premium {
  opacity: 0.4;
  cursor: not-allowed;
}
.hero-side-btn-soon {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255,71,87,0.8);
  padding: 0 3px;
  border-radius: 2px;
  line-height: 1.3;
}

.hero-profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.hero-profile-avatar {
  border-radius: 16px;
  background: transparent;
  object-fit: cover;
  display: block;
}

.hero-profile-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-bright);
  text-align: center;
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.hero-profile-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.hero-profile-level {
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.3);
  padding: 2px 10px;
  border-radius: 8px;
}

.hero-profile-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 8px;
  letter-spacing: 1px;
  border: 1px solid currentColor;
}

/* Divider */
.hero-divider {
  display: block;
  width: 80%;
  max-width: 250px;
  height: auto;
  margin: 8px auto;
  opacity: 0.8;
}

/* Quick stats row */
.hero-quick-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.hero-qs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-qs-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-qs-label {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Power emblem */
/* Power + ELO side by side */
.hero-power-elo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.hero-power-elo-row > :first-child {
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.hero-power-emblem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.hero-power-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(191,95,255,0.3));
}

.hero-elo-emblem {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  cursor: pointer;
  transition: transform 0.15s;
}
.hero-elo-emblem:hover {
  transform: scale(1.05);
}
.hero-elo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(200,168,78,0.3));
}
.hero-elo-info {
  display: flex;
  flex-direction: column;
}
.hero-elo-val {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  font-weight: 700;
  line-height: 1.1;
}
.hero-elo-label {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
}
.hero-elo-rank {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
}

.hero-power-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-power-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(255,215,0,0.3);
}

.hero-power-label {
  font-size: 9px;
  color: var(--gold-dim);
  font-weight: 600;
  letter-spacing: 2px;
}

/* XP bar with label */
.hero-xp-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 3px;
}

.hero-profile-currencies {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.hero-currency-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,215,0,0.12);
  padding: 4px 12px 4px 4px;
  border-radius: 14px;
  flex: 1;
}

.hero-currency-crystal {
  color: #6FD5FF;
  border-color: rgba(111,213,255,0.12);
}

.hero-currency-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.hero-xp-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;
  margin-top: 6px;
}

.hero-xp-section {
  width: 100%;
  margin-top: 6px;
  margin-bottom: 10px;
}

.hero-xp-frame-wrap {
  position: relative;
  width: 100%;
  height: 20px;
}

.hero-xp-bar {
  position: absolute;
  inset: 0;
  background: rgba(10,5,30,0.7);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(168,85,247,0.3);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(168,85,247,0.15);
}

.hero-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #9333ea, #a855f7, #7c3aed, #6366f1, #a855f7);
  background-size: 300% 100%;
  border-radius: 9px;
  transition: width 0.3s;
  animation: xpShimmer 4s linear infinite;
  box-shadow: 0 0 10px rgba(168,85,247,0.5), 0 0 20px rgba(124,58,237,0.3), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2);
}

.hero-xp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: var(--text-bright);
  font-weight: 700;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hero-xp-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.hero-power-row {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 6px 0 2px;
  border-top: 1px solid var(--border);
}

.hero-power-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.hero-power-val {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
}

.hero-power-label {
  font-size: 10px;
  color: var(--gold-dim);
  font-weight: 600;
  letter-spacing: 1px;
}

/* Skill Tree Button */
.skill-tree-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(191,95,255,0.08));
  border: 2px solid rgba(255,215,0,0.25);
  border-radius: var(--radius);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.skill-tree-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(191,95,255,0.12));
  border-color: rgba(255,215,0,0.4);
  box-shadow: 0 0 16px rgba(255,215,0,0.15);
}

.skill-tree-btn:active {
  transform: scale(0.98);
}

.premium-btn-soon {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(123,224,255,0.15);
  background: linear-gradient(135deg, rgba(123,224,255,0.04), rgba(191,95,255,0.03));
}
.premium-btn-soon:hover {
  background: linear-gradient(135deg, rgba(123,224,255,0.04), rgba(191,95,255,0.03));
  border-color: rgba(123,224,255,0.15);
  box-shadow: none;
  transform: none;
}

.skill-tree-btn-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.3));
}

.skill-tree-btn-text {
  flex: 1;
  text-align: left;
}

.skill-tree-btn-badge {
  background: linear-gradient(135deg, #F0C040, #E09530);
  color: #1a1035;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  font-family: var(--font-body);
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,192,64,0.4); }
  50% { box-shadow: 0 0 0 6px rgba(240,192,64,0); }
}

/* Ranking search highlight */
.rank-search-highlight {
  animation: rankHighlight 1s ease-in-out 3;
  border-color: rgba(255,215,0,0.5) !important;
  background: rgba(255,215,0,0.15) !important;
}
@keyframes rankHighlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.3); }
  50% { box-shadow: 0 0 12px 4px rgba(255,215,0,0.25); }
}

/* Equipment Grid */
.equip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.equip-slot {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  cursor: pointer;
}

.equip-slot.filled {
  border-style: solid;
  cursor: pointer;
}

.equip-slot.filled.common { border-left: 3px solid var(--common); }
.equip-slot.filled.uncommon { border-left: 3px solid var(--uncommon); }
.equip-slot.filled.rare { border-left: 3px solid var(--rare); }
.equip-slot.filled.epic { border-left: 3px solid var(--epic); }
.equip-slot.filled.legendary { border-left: 3px solid var(--legendary); }
.equip-slot.filled.mythic { border-left: 3px solid var(--mythic); }

.equip-slot-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.equip-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 2px;
}

.equip-item-stat {
  font-size: 10px;
  color: var(--text-dim);
}

.equip-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.equip-empty-svg {
  width: 32px;
  height: 32px;
  color: var(--text-dim);
  opacity: 0.2;
}

.equip-item-visual {
  margin-bottom: 4px;
}

/* Item Icon with CSS Rarity Frames */
.item-icon-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}

.item-lvl-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 3px;
  line-height: 14px;
  z-index: 2;
  pointer-events: none;
}

.item-img {
  width: 110%;
  height: 110%;
  margin: -5%;
  object-fit: contain;
  display: block;
  image-rendering: auto;
}

.item-icon-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

/* --- Rarity frame styles --- */
.rarity-frame-common {
  border: 2px solid #666;
}

.rarity-frame-uncommon {
  border: 2px solid #5ED87A;
  box-shadow: 0 0 6px rgba(94,216,122,0.3);
}

.rarity-frame-rare {
  border: 2px solid #4FACFE;
  box-shadow: 0 0 8px rgba(79,172,254,0.4);
}

.rarity-frame-epic {
  border: 2px solid #BF5FFF;
  box-shadow: 0 0 10px rgba(191,95,255,0.4);
  animation: epicPulse 3s ease-in-out infinite;
}

@keyframes epicPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(191,95,255,0.3); }
  50% { box-shadow: 0 0 14px rgba(191,95,255,0.6); }
}

.rarity-frame-legendary {
  border: 2px solid #FFB340;
  box-shadow: 0 0 12px rgba(255,179,64,0.5);
  animation: legendaryShimmer 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.rarity-frame-legendary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,215,0,0.15) 48%, rgba(255,255,255,0.2) 50%, rgba(255,215,0,0.15) 52%, transparent 60%);
  animation: legendarySweep 4s linear infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes legendaryShimmer {
  0%, 100% { box-shadow: 0 0 8px rgba(255,179,64,0.3), 0 0 16px rgba(255,215,0,0.1); border-color: #FFB340; }
  50% { box-shadow: 0 0 16px rgba(255,179,64,0.6), 0 0 28px rgba(255,215,0,0.25); border-color: #FFD060; }
}
@keyframes legendarySweep {
  0% { transform: translateX(-100%) rotate(0deg); }
  100% { transform: translateX(100%) rotate(0deg); }
}

.rarity-frame-mythic {
  border: 2px solid #FF4757;
  box-shadow: 0 0 12px rgba(255,71,87,0.4), 0 0 24px rgba(255,71,87,0.15), inset 0 0 8px rgba(255,71,87,0.1);
  animation: mythicGlow 2.5s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.rarity-frame-mythic::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -100%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,71,87,0.12), rgba(255,255,255,0.18), rgba(191,95,255,0.12), transparent);
  animation: mythicShine 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes mythicGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,71,87,0.35), 0 0 20px rgba(255,71,87,0.1); border-color: #FF4757; }
  50% { box-shadow: 0 0 18px rgba(255,71,87,0.6), 0 0 36px rgba(191,95,255,0.25); border-color: #ff6b81; }
}
@keyframes mythicShine {
  0% { left: -60%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* Item popup icon centered */
.item-popup-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}


/* Loot drop inline icon */
.loot-icon-inline {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 2px;
}
.loot-icon-inline .item-icon-wrap {
  vertical-align: middle;
}

/* Reward row inline icon */
.reward-value .item-icon-wrap {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* Inventory Grid */
.inv-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.inv-count {
  font-size: 12px;
  color: var(--text-dim);
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 16px;
  padding-top: 6px;
}
/* Widen modal when showing inventory */
/* Chat profile: strip modal card styling */
.modal-overlay:has(.chat-profile) {
  padding: 10px !important;
}
.modal-card:has(.chat-profile) {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.modal-card:has(.chat-profile) > * {
  pointer-events: auto;
}

.modal-card:has(.inv-grid) {
  max-width: 420px;
}

.inv-slot {
  aspect-ratio: 1;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  cursor: pointer;
  transition: transform 0.1s;
  position: relative;
}
.inv-slot .item-icon-wrap {
  width: 100% !important;
  height: 100% !important;
  border-radius: var(--radius);
}

.inv-slot:active {
  transform: scale(0.94);
}

.inv-slot.empty {
  cursor: default;
  opacity: 0.15;
  background: var(--surface);
  border: 1px solid var(--border);
}

.inv-slot.empty:active {
  transform: none;
}

/* New item badge on inventory slot */
.inv-new-badge {
  position: absolute;
  top: -2px;
  left: -2px;
  background: #FF4757;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: 0 0 6px rgba(255,71,87,0.6);
  animation: notifPulse 2s ease-in-out infinite;
  pointer-events: none;
}

/* Rarity indicated by item icon frame, no extra borders needed */

/* Drag and drop equipping */
.inv-slot.dragging {
  opacity: 0.4;
  border-style: dashed;
}

.equip-slot.drop-valid {
  border-color: rgba(46,213,115,0.6) !important;
  box-shadow: inset 0 0 12px rgba(46,213,115,0.2);
  animation: dropPulse 1s ease-in-out infinite;
}

.equip-slot.drop-hover {
  border-color: #2ED573 !important;
  box-shadow: inset 0 0 20px rgba(46,213,115,0.3);
  transform: scale(1.05);
  transition: all 0.15s;
}

.equip-slot.drop-invalid {
  border-color: rgba(255,71,87,0.5) !important;
  box-shadow: inset 0 0 12px rgba(255,71,87,0.2);
}

@keyframes dropPulse {
  0%, 100% { box-shadow: inset 0 0 8px rgba(46,213,115,0.15); }
  50% { box-shadow: inset 0 0 16px rgba(46,213,115,0.3); }
}

.drag-clone {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.inv-item-icon {
  font-size: 20px;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-item-shortname {
  font-size: 8px;
  color: var(--text-dim);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.compare-arrow-up {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 12px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 4;
  background: #2a9d3e;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(42,157,62,0.7), 0 1px 3px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.25);
}

.compare-arrow-down {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 12px;
  color: #fff;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 4;
  background: #c62828;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(198,40,40,0.7), 0 1px 3px rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.25);
}

/* Power summary */
.hero-power-summary {
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: var(--radius);
  padding: 10px 14px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 16px;
}

/* ============================================
   TAVERN TAB — Quests
   ============================================ */

.quest-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quest-card {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  transition: border-color 0.2s, transform 0.15s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.quest-card:hover {
  border-color: rgba(140, 120, 255, 0.4);
  transform: translateY(-2px);
}

.quest-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.quest-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-bright);
  flex: 1;
}

.quest-difficulty {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quest-difficulty.easy {
  background: rgba(94,216,122,0.15);
  color: var(--uncommon);
}
.quest-difficulty.medium {
  background: rgba(255,215,0,0.15);
  color: var(--gold);
}
.quest-difficulty.hard {
  background: rgba(255,71,87,0.15);
  color: #FF4757;
}

.quest-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.quest-rewards {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
}

.quest-reward-item {
  color: var(--gold);
  font-weight: 600;
}

.quest-start-btn {
  width: 100%;
  max-width: 280px;
  margin: 8px auto 0;
  display: block;
  padding: 10px;
  background: linear-gradient(135deg, #F0C040, #E09530);
  color: #1a1035;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  min-height: 44px;
  transition: transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 10px rgba(224, 149, 48, 0.2);
}

.quest-start-btn:hover {
  box-shadow: 0 4px 16px rgba(224, 149, 48, 0.3);
  transform: scale(1.02);
}

.quest-start-btn:active {
  transform: scale(0.97);
}

.quest-start-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Active Quest */
.quest-active {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}

.quest-progress-wrap {
  margin: 10px 0;
}

.quest-progress-bar {
  width: 100%;
  height: 10px;
  background: var(--hp-bg);
  border-radius: 5px;
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #FFA500);
  border-radius: 5px;
  animation: questProgress 1s linear infinite;
}

.quest-time-remaining {
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
  text-align: center;
  margin-top: 6px;
  font-family: var(--font-display);
}

.quest-refresh-timer {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-top: 12px;
  padding: 8px;
  background: var(--surface);
  border-radius: var(--radius);
}

/* --- Quest Board (new stamina-based system) --- */

#panelTavern {
  background: url('../img/quest-board/rift-bg2.webp?v=3') center center/cover no-repeat, #0a0418;
  background-color: #0a0418;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  overflow: hidden;
  padding: 0 !important;
}
@media (orientation: portrait) {
  #panelTavern {
    background: url('../img/quest-board/rift-bg2-portrait.webp?v=3') center center/cover no-repeat, #0a0418;
    background-color: #0a0418;
  }
}
/* Body-level fallback so if the panel itself ever reveals the page under it
   (tab bar gap, iOS safe-area, etc.) you still see the same dark palette. */
body.tavern-active, html body.tavern-active { background-color: #0a0418; }

#panelTavern::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,5,25,0.25) 0%, rgba(10,5,25,0.1) 40%, rgba(10,5,25,0.2) 100%);
  pointer-events: none;
  z-index: 1;
}
/* On the Rift tab the tab bar's default transparent-top gradient reveals
   whatever is behind it — during an active quest that's a gap between the
   rift-active-fullscreen overlay (z-index 99) and the tab bar (z-index 200).
   Force a fully solid dark bar here and a bleed bar just above it. */
body[data-active-tab="tavern"] #tabBar {
  background: #060212 !important;
  box-shadow: 0 -40px 40px -12px rgba(6,2,18,0.95);
}
body[data-active-tab="tavern"] .mob-quick-strip {
  background: #060212 !important;
}

#panelTavern.active {
  display: block;
  position: relative;
}

#panelTavern > *:not(.rift-circles-row):not(.qb-stamina-wrap):not(.rift-active-quest):not(.rift-detail) {
  position: relative;
  z-index: 2;
}

/* Banner removed */

/* Old stamina card — hidden, replaced by bottom bar */
.qb-stamina-wrap { display: none; }

/* ── Rift stamina bottom bar ──
   The CONTAINER itself is the progress bar. `.rift-stam-fill-bg` is an
   absolute sibling that stretches across X% of the width with the green
   gradient; all content sits on top via z-index. Much cleaner than the old
   "bar inside a panel" double-container look. */
/* ═══════════════════════════════════════════════════════════════
   Rift Stamina — vertical potion vial on the right edge.
   Liquid fills bottom-up, bubbles rise, surface shimmers. Buy
   buttons stack under the vial only when stamina hits 0.
   ═══════════════════════════════════════════════════════════════ */
#riftStaminaBar {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 210;
  display: none; /* shown by JS only on rift tab */
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.rift-stam-vial {
  position: relative;
  width: 64px;
  height: min(60vh, 440px);
  min-height: 280px;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(20,12,38,0.88) 0%, rgba(10,6,22,0.94) 100%);
  border: 2px solid rgba(199,122,252,0.6);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.12),
    0 0 28px rgba(138,79,207,0.35),
    0 10px 24px rgba(0,0,0,0.55);
  isolation: isolate;
}
.rift-stam-fill-bg {
  position: absolute;
  left: 3px; right: 3px; bottom: 3px;
  background:
    linear-gradient(180deg, rgba(226,180,255,0.9) 0%, rgba(199,122,252,0.95) 25%, rgba(138,79,207,0.95) 65%, rgba(70,35,130,0.95) 100%);
  border-radius: 30px;
  transition: height 0.5s cubic-bezier(.4,0,.2,1);
  z-index: 0;
  box-shadow:
    inset 0 8px 16px rgba(255,255,255,0.18),
    inset 0 -4px 12px rgba(40,20,80,0.6),
    0 -2px 14px rgba(199,122,252,0.65);
}
/* Surface shimmer — a bright line at the top of the liquid */
.rift-stam-fill-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  border-radius: 2px;
  filter: blur(1px);
  animation: riftStamShimmer 2.4s ease-in-out infinite;
}
@keyframes riftStamShimmer {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-1px); }
}

/* Rising bubbles inside the liquid */
.rift-stam-bubbles {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  border-radius: 30px;
  pointer-events: none;
  z-index: 1;
}
.rift-stam-bubbles span {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9) 0%, rgba(230,200,255,0.4) 40%, transparent 70%);
  box-shadow: 0 0 6px rgba(255,255,255,0.5);
  opacity: 0;
  animation: riftStamBubble 5s ease-in infinite;
}
.rift-stam-bubbles span:nth-child(1) { left: 20%; animation-delay: 0s;   width: 5px; height: 5px; }
.rift-stam-bubbles span:nth-child(2) { left: 55%; animation-delay: 1.2s; width: 8px; height: 8px; }
.rift-stam-bubbles span:nth-child(3) { left: 35%; animation-delay: 2.4s; width: 4px; height: 4px; }
.rift-stam-bubbles span:nth-child(4) { left: 70%; animation-delay: 3.6s; width: 6px; height: 6px; }
.rift-stam-bubbles span:nth-child(5) { left: 15%; animation-delay: 4.5s; width: 5px; height: 5px; }
@keyframes riftStamBubble {
  0%   { bottom: 2%;  opacity: 0;   transform: scale(0.5); }
  10%  { opacity: 0.9; }
  80%  { opacity: 0.8; }
  100% { bottom: 92%; opacity: 0;   transform: scale(1.3); }
}

/* Glass highlight — diagonal sheen on the vial */
.rift-stam-vial::before {
  content: '';
  position: absolute;
  top: 6%; left: 14%;
  width: 30%; height: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  filter: blur(2px);
}

/* Content (icon / label / reset) stacked vertically inside the vial */
.rift-stam-row {
  position: relative;
  z-index: 3;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 6px 12px;
  gap: 6px;
}
.rift-stam-icon {
  width: 28px; height: 28px; object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85)) drop-shadow(0 0 6px rgba(199,122,252,0.6));
}
.rift-stam-label {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow:
    -1px 0 rgba(0,0,0,0.9), 1px 0 rgba(0,0,0,0.9),
    0 -1px rgba(0,0,0,0.9), 0 1px rgba(0,0,0,0.9),
    0 2px 5px rgba(0,0,0,0.85),
    0 0 10px rgba(199,122,252,0.45);
  margin-top: 2px;
}
.rift-stam-max {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 1px;
  margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}
.rift-stam-reset {
  margin-top: auto;
  font-size: 8px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
  opacity: 0.85;
}
.rift-stam-reset #staminaResetCountdown {
  display: block;
  font-family: 'Courier New', monospace;
  color: #ffd890;
  font-size: 10px;
  margin-top: 1px;
}

/* Buy-button column — only rendered when stamina = 0. Sits under vial. */
.rift-stam-buy-col {
  display: flex; flex-direction: column;
  gap: 5px;
  width: 64px;
  padding: 6px 2px;
  background: linear-gradient(180deg, rgba(20,12,38,0.92), rgba(10,6,22,0.95));
  border: 1px solid rgba(199,122,252,0.35);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  animation: riftStamBuyIn 0.35s ease-out;
}
@keyframes riftStamBuyIn {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.rift-stam-buy {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  background: linear-gradient(135deg, rgba(20,14,38,0.85), rgba(10,6,22,0.92));
  border: 1px solid rgba(200,168,78,0.45);
  border-radius: 8px;
  color: #ddd;
  font-size: 10px; font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
  width: 100%;
}
.rift-stam-buy:hover { border-color: var(--gold, #ffd44d); transform: translateY(-1px); background: linear-gradient(135deg, rgba(30,20,50,0.9), rgba(15,10,30,0.95)); }
.rift-stam-buy-plus { color: var(--gold, #ffd44d); font-size: 11px; font-weight: 900; line-height: 1; }
.rift-stam-buy-ico { width: 14px; height: 14px; object-fit: contain; }
.rift-stam-buy-price { font-size: 10px; font-weight: 800; line-height: 1; }
.rift-stam-buy-limit { font-size: 8px; color: #888; font-weight: 700; letter-spacing: 0.3px; }
.rift-stam-buy-dia { border-color: rgba(126,205,255,0.45); }
.rift-stam-buy-dia:hover { border-color: #7ecdff; }
.rift-stam-buy-dia .rift-stam-buy-plus { color: #7ecdff; }

/* Landscape mobile — scale down slightly */
/* Mobile (landscape + portrait) — the big vertical vial overlaps the
   rift portals and quest info. Collapse to a compact horizontal pill
   anchored to the TOP-LEFT corner. Zero overlap with the rift scene. */
html.gv-land-mobile #riftStaminaBar,
html.gv-port-mobile #riftStaminaBar {
  top: 4px;
  left: 4px;
  right: auto;
  transform: none;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}
html.gv-land-mobile .rift-stam-vial,
html.gv-port-mobile .rift-stam-vial {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px !important;
}
html.gv-land-mobile .rift-stam-fill-bg,
html.gv-port-mobile .rift-stam-fill-bg {
  /* Horizontal fill on the pill */
  left: 2px !important;
  bottom: auto !important;
  top: 2px !important;
  right: auto !important;
  width: calc((100% - 4px) * var(--stam-pct, 1)) !important;
  height: calc(100% - 4px) !important;
  border-radius: 999px !important;
  transition: width 0.35s cubic-bezier(.4,0,.2,1) !important;
}
html.gv-land-mobile .rift-stam-fill-bg::before,
html.gv-port-mobile .rift-stam-fill-bg::before { display: none; }
html.gv-land-mobile .rift-stam-bubbles,
html.gv-port-mobile .rift-stam-bubbles { display: none !important; }
html.gv-land-mobile .rift-stam-row,
html.gv-port-mobile .rift-stam-row {
  padding: 0 !important;
  flex-direction: row !important;
  gap: 6px !important;
  height: auto !important;
  width: auto !important;
}
html.gv-land-mobile .rift-stam-icon,
html.gv-port-mobile .rift-stam-icon { width: 20px !important; height: 20px !important; }
html.gv-land-mobile .rift-stam-label,
html.gv-port-mobile .rift-stam-label {
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}
html.gv-land-mobile .rift-stam-max,
html.gv-port-mobile .rift-stam-max {
  display: inline !important;
  margin: 0 0 0 1px !important;
  font-size: 10px !important;
}
html.gv-land-mobile .rift-stam-reset,
html.gv-port-mobile .rift-stam-reset {
  font-size: 8px !important;
  margin: 0 !important;
  padding: 0 4px !important;
}
html.gv-land-mobile .rift-stam-reset #staminaResetCountdown,
html.gv-port-mobile .rift-stam-reset #staminaResetCountdown {
  display: inline !important;
  margin: 0 !important;
  font-size: 9px !important;
}
html.gv-land-mobile .rift-stam-buy-col,
html.gv-port-mobile .rift-stam-buy-col {
  flex-direction: row !important;
  width: auto !important;
  padding: 4px !important;
  gap: 4px !important;
}
html.gv-land-mobile .rift-stam-buy,
html.gv-port-mobile .rift-stam-buy {
  flex-direction: row !important;
  padding: 4px 8px !important;
  gap: 4px !important;
}
@media (max-width: 400px) {
  /* Tight phones — shrink the reset timer so buttons fit */
  .rift-stam-reset { display: none; }
}

/* Social buttons — hide on mobile, position on desktop */
@media (max-width: 959px) {
  #socialBtns { display: none !important; }
}
@media (min-width: 960px) {
  #socialBtns { left: 308px !important; }
}
@media (min-width: 1200px) {
  #socialBtns { left: 348px !important; }
}

.qb-stamina-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.qb-stam-potion {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.qb-stamina-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 1.5px;
}

.qb-stamina-count {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-dim);
}

/* Single stamina bar */
.qb-stam-single-bar {
  position: relative;
  height: 24px;
  background: rgba(10,5,30,0.7);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(61,220,132,0.25);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 6px rgba(61,220,132,0.1);
  margin-bottom: 8px;
}

.qb-stam-single-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a9050, #3ddc84, #2ebd6e, #3ddc84);
  background-size: 300% 100%;
  border-radius: 10px;
  transition: width 0.3s ease-out;
  animation: stamShimmer 4s linear infinite;
  box-shadow: 0 0 10px rgba(61,220,132,0.4), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.15);
}

@keyframes stamShimmer {
  0% { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}

.qb-stam-single-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  z-index: 1;
}

.qb-stamina-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qb-buy-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(200,168,78,0.2);
  background: linear-gradient(135deg, rgba(35,22,65,0.85), rgba(22,14,48,0.9));
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  min-height: 38px;
  font-size: 13px;
}

.qb-buy-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, rgba(50,30,80,0.95), rgba(30,18,60,0.98));
  border-color: var(--gold);
  transform: translateY(-1px);
}

.qb-buy-btn.disabled {
  opacity: 0.35;
  cursor: default;
  color: var(--text-dim);
  justify-content: center;
}

.qb-buy-potion {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.qb-buy-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}

.qb-buy-sep {
  font-size: 10px;
  color: var(--text-dim);
}

.qb-buy-cur {
  width: 13px;
  height: 13px;
  object-fit: contain;
  flex-shrink: 0;
}

.qb-buy-price {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-bright);
}

.qb-buys-count {
  font-size: 9px;
  color: var(--text-dim);
  margin-left: auto;
}

.qb-stamina-reset-timer {
  text-align: center;
  font-size: 9px;
  color: var(--text-dim);
  padding: 3px 0 0;
  opacity: 0.7;
}

.qb-reset-label {
  color: var(--text-dim);
}

.qb-reset-time {
  color: var(--gold);
  font-weight: 600;
  font-family: monospace;
}

/* ── Active Quest — Fullscreen portal dimension ── */
.rift-active-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px;
  text-align: center;
  background: #06020f;
  overflow: hidden;
  contain: layout paint;
}

/* Cosmic background — static gradient that shows through when the warp
   canvas is disabled (e.g. on mobile where rendering corruption can occur). */
.rift-active-fullscreen::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(120,60,200,0.25), transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 70%, rgba(60,40,160,0.2), transparent 60%),
    radial-gradient(ellipse 100% 50% at 50% 100%, rgba(20,10,40,0.9), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Warp canvas on top of cosmic bg */
.rift-active-fullscreen .warp-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}

.rift-active-fullscreen > *:not(.warp-canvas):not(.rift-quest-info-panel) {
  position: relative;
  z-index: 2;
}

.warp-toggle-label {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  user-select: none;
  transition: all 0.2s;
}

.warp-toggle-label:hover {
  background: rgba(0,0,0,0.7);
  color: rgba(255,255,255,0.7);
}

.warp-toggle-label input {
  display: none;
}

.warp-toggle-check {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.warp-toggle-label input:checked ~ .warp-toggle-check {
  background: rgba(79,172,254,0.6);
  border-color: rgba(79,172,254,0.8);
}

.warp-toggle-label input:checked ~ .warp-toggle-check::after {
  content: '';
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}

/* Ambient floating particles inside portal */
.rift-ambient-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.rift-ambient-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  box-shadow: 0 0 8px currentColor, 0 0 16px currentColor;
  animation: riftAmbientFloat 3s ease-in-out infinite;
}

@keyframes riftAmbientFloat {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  20% { opacity: 0.8; }
  50% { transform: translateY(-40px) scale(1); opacity: 0.6; }
  80% { opacity: 0.3; }
  100% { transform: translateY(-80px) scale(0.3); opacity: 0; }
}

.rift-active-portal {
  margin-bottom: 12px;
}

.rift-active-portal .rift-circle-wrap {
  width: 140px;
  height: 140px;
}

@media (min-width: 769px) {
  .rift-active-portal .rift-circle-wrap {
    width: 180px;
    height: 180px;
  }
}

.rift-quest-info-panel {
  background: rgba(10, 8, 25, 0.97);
  border-radius: 16px;
  padding: 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 340px;
  width: 90%;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.rift-active-fullscreen .rift-active-name {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  margin-bottom: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,0,0.2);
  letter-spacing: 1px;
}

.rift-active-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 12px;
}

.rift-progress-bar {
  position: relative;
  height: 22px;
  width: 100%;
  max-width: 320px;
  background: rgba(10,5,30,0.7);
  border-radius: 11px;
  overflow: hidden;
  border: 1px solid rgba(255,215,0,0.2);
  margin-bottom: 12px;
}

.rift-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #E09530, #FFD700);
  background-size: 300% 100%;
  border-radius: 8px;
  transition: width 1s linear;
  animation: xpShimmer 4s linear infinite;
  box-shadow: 0 0 10px rgba(255,215,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.rift-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  z-index: 1;
}

.rift-active-btns {
  display: flex;
  gap: 8px;
}

/* Compact stamina bar inside quest overlay */
.rift-overlay-stamina {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.rift-overlay-stam-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
.rift-overlay-stam-fill {
  height: 100%;
  background: linear-gradient(90deg, #43e97b, #38f9d7);
  border-radius: 4px;
  transition: width 0.3s;
}
.rift-overlay-stam-label {
  color: #aaa;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 45px;
  text-align: right;
}

.qb-active {
  background: linear-gradient(135deg, rgba(30,20,50,0.9), rgba(20,12,40,0.95));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.qb-active-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  position: relative;
  z-index: 5;
}

.qb-cancel-btn {
  flex: 1;
  padding: 8px;
  background: rgba(255,70,87,0.12);
  border: 1px solid rgba(255,70,87,0.3);
  border-radius: 6px;
  color: #FF6B81;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.qb-cancel-btn:hover {
  background: rgba(255,70,87,0.25);
}

.qb-skip-btn {
  flex: 1;
  padding: 8px;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.3);
  border-radius: 6px;
  color: #a855f7;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.qb-skip-btn:hover {
  background: rgba(168,85,247,0.25);
}

/* ── Daily Login Rewards ── */
/* ── Mail / Inbox System ────────────────────────────────── */
.header-mail-btn {
  background: none; border: none; cursor: pointer; position: relative;
  padding: 4px; display: flex; align-items: center; justify-content: center;
}
.header-mail-icon { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
.header-mail-badge {
  position: absolute; top: -2px; right: -4px;
  background: #e53935; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

/* ═══ MAIL MODAL ═══ */
.modal-card:has(.mail-modal) { max-width: 480px; padding: 0; overflow-y: auto; border-color: rgba(200,168,78,0.25); }

/* Glowing header */
.mail-hero {
  position: relative;
  padding: 24px 20px 16px;
  background: linear-gradient(180deg, rgba(255,215,0,0.12) 0%, rgba(255,215,0,0.03) 60%, transparent 100%);
  border-bottom: 1px solid rgba(255,215,0,0.15);
  text-align: center;
  overflow: hidden;
}
.mail-hero-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(255,215,0,0.2) 0%, transparent 70%);
  pointer-events: none;
  animation: mailHeroGlow 3s ease-in-out infinite;
}
@keyframes mailHeroGlow {
  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
.mail-hero-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 12px rgba(255,215,0,0.4));
  animation: mailIconFloat 3s ease-in-out infinite;
}
@keyframes mailIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.mail-hero-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,215,0,0.3);
  margin-top: 6px;
  position: relative;
  z-index: 1;
  letter-spacing: 1px;
}
.mail-hero-count {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Body area */
.mail-body { padding: 14px 16px 16px; }

/* Tabs */
.mail-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
}
.mail-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 4px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  text-align: center;
  letter-spacing: 0.5px;
}
.mail-tab:not(:last-child) { border-right: 1px solid var(--border); }
.mail-tab:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.mail-tab-active {
  background: linear-gradient(180deg, rgba(255,215,0,0.12) 0%, rgba(255,215,0,0.04) 100%);
  color: var(--gold);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* Actions row */
.mail-actions-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.mail-claim-all-btn {
  font-size: 11px;
  padding: 6px 12px;
  min-height: 32px;
  flex: 1;
}
.mail-compose-btn {
  font-size: 11px;
  padding: 6px 12px;
  min-height: 32px;
  flex: 1;
}

/* Mail list */
.mail-list {
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,0.15) transparent;
  padding: 2px;
}
.mail-list::-webkit-scrollbar { width: 4px; }
.mail-list::-webkit-scrollbar-track { background: transparent; }
.mail-list::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.2); border-radius: 2px; }

.mail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  animation: mailRowIn 0.3s ease-out both;
}
@keyframes mailRowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.mail-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: transparent;
  transition: background 0.2s;
}
.mail-row:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border-color: rgba(255,215,0,0.15);
  transform: translateX(3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2), -2px 0 8px rgba(255,215,0,0.04);
}
.mail-row:active { transform: scale(0.985); }

/* Unread state */
.mail-row-unread {
  border-color: rgba(92,158,255,0.25);
  background: linear-gradient(135deg, rgba(92,158,255,0.06), rgba(92,158,255,0.015));
}
.mail-row-unread::before { background: var(--xp-blue); }
.mail-row-unread .mail-row-from { font-weight: 700; color: var(--text-bright); }
.mail-row-unread .mail-row-subject { color: var(--text); }

/* Reward shimmer */
.mail-row-reward {
  border-color: rgba(255,215,0,0.25);
  background: linear-gradient(135deg, rgba(255,215,0,0.07), rgba(255,180,0,0.02));
}
.mail-row-reward::before { background: linear-gradient(180deg, var(--gold), var(--legendary)); }
.mail-row-reward::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.08), transparent);
  animation: mailShimmer 3s ease-in-out infinite;
}
@keyframes mailShimmer {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* Claimed state */
.mail-row-claimed { opacity: 0.45; }
.mail-row-claimed::before { background: var(--hp-green); }
.mail-row-claimed::after { display: none; }

/* Row elements */
.mail-row-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.mail-row-type-img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3)); }
.mail-row-icon-system { background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,215,0,0.04)); border-color: rgba(255,215,0,0.2); }
.mail-row-icon-guild { background: linear-gradient(135deg, rgba(140,120,255,0.12), rgba(140,120,255,0.04)); border-color: rgba(140,120,255,0.2); }
.mail-row-icon-dm { background: linear-gradient(135deg, rgba(79,172,254,0.12), rgba(79,172,254,0.04)); border-color: rgba(79,172,254,0.2); }
.mail-row-icon-sent { background: linear-gradient(135deg, rgba(46,216,115,0.12), rgba(46,216,115,0.04)); border-color: rgba(46,216,115,0.2); }

.mail-row-content { flex: 1; min-width: 0; }
.mail-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mail-row-from { font-size: 13px; font-weight: 600; color: var(--gold-dim); transition: color 0.15s; }
.mail-row-time { font-size: 10px; color: var(--text-dim); flex-shrink: 0; opacity: 0.7; }
.mail-row-subject {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.3;
}
.mail-row-indicators { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.mail-row-attach {
  font-size: 16px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.5));
  animation: mailGiftBounce 2s ease-in-out infinite;
}
@keyframes mailGiftBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.mail-row-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--xp-blue);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(79,172,254,0.5);
  animation: mailDotPulse 2s ease-in-out infinite;
}
@keyframes mailDotPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(79,172,254,0.4); }
  50% { box-shadow: 0 0 12px rgba(79,172,254,0.8); }
}

/* Empty state */
.mail-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 20px;
  font-size: 14px;
}
.mail-empty-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.4;
}
.mail-close-btn { width: 100%; margin-top: 4px; }

/* Blocked row */
.mail-blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,71,87,0.04);
  border: 1px solid rgba(255,71,87,0.12);
  border-radius: 10px;
}
.mail-blocked-name {
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mail-blocked-name::before {
  content: '🚫';
  font-size: 14px;
}
.mail-unblock-btn {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 28px;
  background: rgba(255,71,87,0.1);
  border-color: rgba(255,71,87,0.25);
  color: var(--hp-red);
}
.mail-unblock-btn:active { background: rgba(255,71,87,0.2); }

/* ═══ MAIL DETAIL VIEW ═══ */
.mail-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.mail-back-btn {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.15s;
}
.mail-back-btn:hover { opacity: 0.8; }
.mail-delete-btn {
  background: rgba(255,71,87,0.08);
  border: 1px solid rgba(255,71,87,0.2);
  border-radius: 8px;
  color: var(--hp-red);
  cursor: pointer;
  font-size: 11px;
  padding: 5px 10px;
  transition: all 0.15s;
}
.mail-delete-btn:hover { background: rgba(255,71,87,0.15); }

.mail-detail-type-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
}
.mail-type-system { background: rgba(255,215,0,0.1); color: var(--gold); border: 1px solid rgba(255,215,0,0.2); }
.mail-type-dm { background: rgba(79,172,254,0.1); color: var(--xp-blue); border: 1px solid rgba(79,172,254,0.2); }
.mail-type-guild { background: rgba(140,120,255,0.1); color: #8c78ff; border: 1px solid rgba(140,120,255,0.2); }

.mail-detail-time { font-size: 11px; color: var(--text-dim); margin-bottom: 12px; }
.mail-detail-subject {
  margin: 0 0 6px 0;
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--text-bright);
  line-height: 1.3;
}
.mail-detail-from {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mail-detail-from strong { color: var(--gold-dim); }
.mail-detail-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Attachment card — treasure feel */
.mail-attachment-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,180,0,0.03));
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.mail-attachment-card::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255,215,0,0.12), transparent 70%);
  pointer-events: none;
}
.mail-attachment-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mail-attachment-title::before { content: '✦'; font-size: 10px; }
.mail-att-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  padding: 4px 0;
}
.mail-att-icon { width: 20px; height: 20px; object-fit: contain; }
.mail-att-claimed {
  color: var(--hp-green);
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mail-claim-btn { width: 100%; margin-top: 10px; }

.mail-detail-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.mail-detail-actions .btn-secondary { flex: 1; font-size: 12px; min-height: 38px; }
.mail-block-btn { color: var(--hp-red) !important; border-color: rgba(255,71,87,0.3) !important; }

/* ═══ MAIL COMPOSE VIEW ═══ */
.mail-compose-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.mail-compose-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
}
.mail-compose-field { margin-bottom: 14px; }
.mail-compose-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.mail-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-bright);
  font-size: 14px;
  box-sizing: border-box;
  transition: all 0.2s;
}
.mail-input:focus {
  outline: none;
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 12px rgba(255,215,0,0.08);
}
.mail-textarea {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-bright);
  font-size: 14px;
  min-height: 100px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.2s;
}
.mail-textarea:focus {
  outline: none;
  border-color: rgba(255,215,0,0.4);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 12px rgba(255,215,0,0.08);
}
.mail-char-count { font-size: 11px; color: var(--text-dim); text-align: right; display: block; margin-top: 4px; }
.mail-send-btn { width: 100%; margin-bottom: 8px; }

/* Fade-in animation */
@keyframes mailFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.mail-body { animation: mailFadeIn 0.25s ease-out; }

.hero-mail-icon-wrap {
  position: relative; cursor: pointer; margin-left: auto;
  display: flex; align-items: center;
}
.hero-mail-icon {
  width: 36px; height: 36px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transition: transform 0.15s;
}
.hero-mail-icon-wrap:hover .hero-mail-icon { transform: scale(1.15); }
.hero-mail-badge {
  position: absolute; top: -4px; right: 0px;
  background: #e53935; color: #fff; font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
  box-shadow: 0 0 4px rgba(229,57,53,0.6);
}

.modal-card:has(.dlr-modal) { max-width: 520px; padding: 0; overflow: hidden; }

/* ── Side Drawer Toggle + Panel ────────────────────────── */
.side-drawer-toggle {
  position: fixed;
  top: 100px;
  left: 308px; /* right of sidebar */
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(30,18,55,0.95), rgba(18,10,35,0.98));
  border: 1.5px solid rgba(200,168,78,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 52;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.5), 0 0 8px rgba(200,168,78,0.1);
}
@media (max-width: 959px) and (orientation: portrait) {
  .side-drawer-toggle {
    left: 0 !important;
    top: 70px;
    border-radius: 0 12px 12px 0;
    border-left: none;
  }
  .side-drawer-panel {
    left: 0 !important;
    top: 120px;
    border-radius: 0 12px 12px 0;
    border-left: none;
  }
  .side-drawer-panel.open {
    transform: translateX(0) scale(1);
  }
}
/* Landscape mobile keeps desktop-like side drawer position (right of sidebar) */
@media (max-width: 959px) and (orientation: landscape) {
  .side-drawer-toggle { left: 268px !important; top: 10px !important; }
  .side-drawer-panel { left: 268px !important; top: 60px !important; }
}
.side-drawer-toggle:hover {
  border-color: rgba(200,168,78,0.5);
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 0 14px rgba(200,168,78,0.15);
}
.side-drawer-toggle.open {
  border-color: rgba(200,168,78,0.6);
  background: linear-gradient(135deg, rgba(40,25,70,0.98), rgba(25,15,50,0.99));
}
.side-drawer-toggle-icon {
  font-size: 20px; color: var(--gold);
  transition: transform 0.3s;
  filter: drop-shadow(0 0 4px rgba(200,168,78,0.3));
}
.side-drawer-toggle.open .side-drawer-toggle-icon { transform: rotate(45deg); }
@media (min-width: 1200px) {
  .side-drawer-toggle { left: 348px; }
}

/* Boss shortcut button — tab style */
.boss-shortcut-btn {
  position: fixed;
  top: 120px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 10px;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(135deg, rgba(30,18,55,0.95), rgba(18,10,35,0.98));
  border: 1.5px solid rgba(150,80,255,0.25);
  border-left: none;
  cursor: pointer;
  z-index: 52;
  transition: all 0.3s;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.5), 0 0 6px rgba(150,80,255,0.1);
}
.boss-shortcut-btn:hover {
  border-color: rgba(150,80,255,0.5);
  box-shadow: 3px 4px 16px rgba(0,0,0,0.6), 0 0 14px rgba(150,80,255,0.15);
  padding-right: 18px;
}
.boss-shortcut-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.boss-shortcut-text { display: flex; flex-direction: column; gap: 2px; }
.boss-shortcut-label {
  display: none;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
  white-space: pre-line;
}
.boss-shortcut-cd {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Boss ACTIVE state — big red glowing tab (GPU-optimized) */
.boss-shortcut-btn.boss-active {
  padding: 12px 18px 12px 12px;
  border-color: rgba(255,71,87,0.6);
  background: linear-gradient(135deg, rgba(80,15,25,0.95), rgba(40,8,15,0.98));
  box-shadow: 3px 3px 16px rgba(0,0,0,0.5), 0 0 16px rgba(255,71,87,0.3);
  animation: bossActivePulse 1.5s ease-in-out infinite;
  will-change: opacity;
}
.boss-shortcut-btn.boss-active .boss-shortcut-label {
  display: block;
  color: #FF4757;
  animation: bossLabelBlink 0.8s ease-in-out infinite;
  will-change: opacity;
}
.boss-shortcut-btn.boss-active .boss-shortcut-icon {
  animation: bossIconPulse 1s ease-in-out infinite;
  will-change: transform;
}
@keyframes bossActivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
@keyframes bossLabelBlink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.6; }
}
@keyframes bossIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Boss SOON state (spawning within 1h) */
.boss-shortcut-btn.boss-soon {
  border-color: rgba(255,180,0,0.4);
  box-shadow: 3px 3px 12px rgba(0,0,0,0.5), 0 0 8px rgba(255,180,0,0.15);
  animation: bossSoonPulse 2s ease-in-out infinite;
  will-change: opacity;
}
.boss-shortcut-btn.boss-soon .boss-shortcut-label {
  display: block;
  color: #FFB340;
}
@keyframes bossSoonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Boss spawn notification toast */
.boss-spawn-notification {
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(40,15,60,0.98), rgba(20,8,35,0.99));
  border: 1.5px solid rgba(255,71,87,0.4);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.7), 0 0 16px rgba(255,71,87,0.15);
  z-index: 900;
  font-size: 13px;
  color: #ddd;
  transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.boss-spawn-notification.show {
  top: 16px;
}

.side-drawer-toggle-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff4757, #c0392b);
  color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(10,5,20,0.9);
  box-shadow: 0 2px 6px rgba(255,71,87,0.4);
  line-height: 1;
}
.side-drawer-has-notif {
  box-shadow: 0 3px 14px rgba(0,0,0,0.5), 0 0 12px rgba(200,168,78,0.15);
  animation: drawerPulse 2.5s ease-in-out infinite;
  will-change: opacity;
}
@keyframes drawerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.side-drawer-panel {
  position: fixed;
  top: 100px;
  left: 308px;
  width: 200px;
  background: linear-gradient(135deg, rgba(25,15,45,0.98), rgba(14,8,28,0.99));
  border: 1.5px solid rgba(200,168,78,0.2);
  border-radius: 12px;
  padding: 6px;
  z-index: 51;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7), 0 0 20px rgba(200,168,78,0.08);
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-drawer-panel.open {
  opacity: 1;
  transform: translateX(50px) scale(1);
  pointer-events: auto;
}
@media (min-width: 1200px) {
  .side-drawer-panel { left: 348px; }
}

.side-drawer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.side-drawer-item:hover {
  background: rgba(200,168,78,0.08);
}
.side-drawer-item:active { transform: scale(0.97); }

.side-drawer-item-icon {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.side-drawer-item-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 12px;
  color: #ccc;
  letter-spacing: 0.5px;
}
.side-drawer-item:hover .side-drawer-item-label { color: var(--gold); }

.side-drawer-item-badge {
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px;
  background: linear-gradient(135deg, #ff4757, #c0392b);
  color: #fff; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(255,71,87,0.3);
  animation: drawerItemBadgePulse 2s ease-in-out infinite;
}
@keyframes drawerItemBadgePulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.7; }
}

/* Desktop: boss tab + drawer attach to right edge of sidebar */
@media (min-width: 960px) {
  .boss-shortcut-btn { left: 300px; top: 160px; }
  .side-drawer-toggle { left: 300px; top: 100px; }
  .side-drawer-panel { left: 350px; }
}
@media (min-width: 1200px) {
  .boss-shortcut-btn { left: 340px; }
  .side-drawer-toggle { left: 340px; }
  .side-drawer-panel { left: 390px; }
}

/* April Fools — Admin Panel shortcut below boss button */
.af-admin-shortcut {
  top: 180px !important;
  background: linear-gradient(135deg, rgba(60,10,10,0.95), rgba(30,5,5,0.98)) !important;
  border-color: rgba(255,68,68,0.3) !important;
  box-shadow: 3px 3px 12px rgba(0,0,0,0.5), 0 0 6px rgba(255,0,0,0.15) !important;
  animation: afAdminPulse 2s ease-in-out infinite;
}
.af-admin-shortcut:hover { border-color: rgba(255,68,68,0.6) !important; }
@media (min-width: 900px) {
  .af-admin-shortcut { top: 220px !important; }
}

/* Legacy compat — hide old floating buttons if they exist */
.daily-reward-float-btn { display: none !important; }
.ach-float-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #FF4757;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 4px;
}

/* Modal layout */
.dlr-modal { text-align: center; }

/* Header with glow */
.dlr-header {
  position: relative;
  padding: 24px 20px 16px;
  background: linear-gradient(180deg, rgba(255,215,0,0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,215,0,0.1);
  overflow: hidden;
}
.dlr-header-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 120px;
  background: radial-gradient(ellipse, rgba(255,215,0,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.dlr-header-chest { width: 56px; height: 56px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 4px 12px rgba(255,215,0,0.4)); }
.dlr-header-title {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,215,0,0.3);
  position: relative;
  z-index: 1;
}
.dlr-streak-badge {
  display: inline-block;
  background: linear-gradient(135deg, rgba(255,179,64,0.15), rgba(255,71,87,0.1));
  border: 1px solid rgba(255,179,64,0.3);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--legendary);
  margin-top: 6px;
}
.dlr-streak-info {
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 6px;
  position: relative;
  z-index: 1;
}

/* Progress bar */
.dlr-progress-wrap {
  padding: 12px 20px 4px;
}
.dlr-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.dlr-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--legendary));
  border-radius: 3px;
  transition: width 0.6s ease;
  box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.dlr-progress-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* Calendar rows */
.dlr-calendar-top, .dlr-calendar-bottom {
  display: grid;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 8px;
}
.dlr-calendar-top { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.dlr-calendar-bottom { grid-template-columns: repeat(3, 1fr); }

/* Day card */
.dlr-day {
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 2px solid rgba(140,120,255,0.12);
  border-radius: 12px;
  padding: 10px 6px;
  position: relative;
  transition: border-color 0.3s, background 0.3s, transform 0.2s, box-shadow 0.3s;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.dlr-day:hover:not(.dlr-locked) { transform: translateY(-2px); }
.dlr-day-num {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}
.dlr-day-icon { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dlr-reward-img { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.dlr-img-diamond { width: 38px; height: 32px; filter: drop-shadow(0 2px 8px rgba(125,211,252,0.4)); }
.dlr-reward-amount { font-size: 12px; font-weight: 700; color: var(--gold); }
.dlr-diamond-text { color: #7dd3fc; }
.dlr-legendary-text { color: var(--legendary); font-size: 11px; text-shadow: 0 0 8px rgba(255,179,64,0.3); }
.dlr-img-legendary { filter: drop-shadow(0 2px 8px rgba(255,179,64,0.4)); }
.dlr-streak-flame { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-right: 2px; }

/* Claimed state */
.dlr-claimed {
  background: linear-gradient(160deg, rgba(46,204,113,0.1), rgba(46,204,113,0.03));
  border-color: rgba(46,204,113,0.3);
}
.dlr-claimed .dlr-day-num { color: #2ecc71; }
.dlr-claimed .dlr-reward-img, .dlr-claimed .dlr-item-icon { opacity: 0.4; }
.dlr-check-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.dlr-seal-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(46,204,113,0.4));
}

/* Today state */
.dlr-today {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(255,215,0,0.12), rgba(255,179,64,0.05));
  animation: dlrTodayGlow 2s ease-in-out infinite;
}
.dlr-today .dlr-day-num { color: var(--gold); }
@keyframes dlrTodayGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.15); }
  50% { box-shadow: 0 0 20px rgba(255,215,0,0.35), 0 0 40px rgba(255,215,0,0.1); }
}

/* Locked state */
.dlr-locked { opacity: 0.3; filter: grayscale(0.5); }

/* Day 5 special */
.dlr-day-5 { border-color: rgba(255,179,64,0.2); }
.dlr-day-5.dlr-today { border-color: var(--legendary); background: linear-gradient(160deg, rgba(255,179,64,0.12), rgba(255,179,64,0.04)); }

/* Day 7 special */
.dlr-day-7 { border-color: rgba(125,211,252,0.2); }
.dlr-day-7.dlr-today {
  border-color: #7dd3fc;
  background: linear-gradient(160deg, rgba(125,211,252,0.12), rgba(125,211,252,0.04));
  animation: dlrDiamondGlow 2s ease-in-out infinite;
}
.dlr-day-7.dlr-today .dlr-day-num { color: #7dd3fc; }
@keyframes dlrDiamondGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(125,211,252,0.15); }
  50% { box-shadow: 0 0 20px rgba(125,211,252,0.35), 0 0 40px rgba(125,211,252,0.1); }
}

/* Claim button */
.dlr-claim-btn {
  width: calc(100% - 32px);
  margin: 12px 16px 0;
  font-size: 15px;
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.dlr-claim-icon { margin-right: 4px; }

/* Mobile tweaks */
@media (max-width: 420px) {
  .dlr-calendar-top { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .dlr-calendar-bottom { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .dlr-day { min-height: 80px; padding: 8px 4px; }
  .dlr-reward-img { width: 26px; height: 26px; }
  .dlr-header-title { font-size: 18px; }
  .modal-card:has(.dlr-modal) { max-width: 95vw; }
}

/* Mini portal overlay — bottom-left corner when on non-tavern tabs */
.quest-overlay-mini {
  position: absolute;
  top: 12px;
  right: auto;
  left: 12px;
  z-index: 40;
  display: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s;
}

.quest-overlay-mini:hover {
  transform: scale(1.08);
}

.qo-mini-portal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.quest-overlay-mini .rift-circle-wrap {
  width: 52px;
  height: 52px;
}

.quest-overlay-mini .rift-rune-ring .rune {
  font-size: 6px;
}

.quest-overlay-mini .rift-rune-ring-inner {
  inset: 8px;
}

.quest-overlay-mini .rift-rune-ring-inner .rune {
  font-size: 5px;
}

.quest-overlay-mini .rift-inner-core {
  inset: 10px;
}

.quest-overlay-mini .rift-particles span {
  width: 2px;
  height: 2px;
}

.quest-overlay-mini .rift-energy-ring:nth-child(1) { inset: -4px; }
.quest-overlay-mini .rift-energy-ring:nth-child(2) { inset: -9px; }
.quest-overlay-mini .rift-energy-ring:nth-child(3) { inset: -14px; }

.qo-mini-time {
  font-size: 10px;
  color: var(--gold);
  font-weight: 700;
  font-family: var(--font-display);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  white-space: nowrap;
  margin-top: 2px;
  text-align: center;
}

/* left is set dynamically by JS to clear sidebar */

/* Diamond drop hint on quest cards */
.qb-diamond-hint {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(123,224,255,0.6);
  font-style: italic;
  margin-top: 2px;
}

.qb-active-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.qb-active-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-bright);
  text-align: center;
}

.qb-active-header {
  justify-content: center;
}

.qb-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qb-claim-btn {
  margin-top: 10px;
  width: 100%;
}

/* ── Summoning Circles (scattered on floor via inline styles) ── */
.rift-circles-row {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.rift-circle-slot {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s;
  transform: translate(-50%, -50%);
}

.rift-circle-slot:hover { transform: translate(-50%, -50%) scale(1.08); }
.rift-circle-slot.active { transform: translate(-50%, -50%) scale(1.12); }
/* Dimmed portals when the player can't afford the stamina cost.
   Tapping still works so the detail panel can surface the cost +
   buy options — Maxxl reported on mobile he couldn't tell what
   was wrong because gray portals were tap-dead and the desktop-
   only hover tooltip never fires on touch (v23.0.856). */
.rift-circle-slot.rift-no-stamina {
  opacity: 0.45;
  filter: grayscale(0.6);
  pointer-events: auto;
}
/* Full-screen overlay when stamina is 0 — blurs portals + shows buy options */
/* Appended to #mainContent (not body) so it skips the left sidebar.
   NO backdrop-filter — blur on fullscreen overlays murders GPU and
   causes laggy hover on buttons. Solid dark bg is enough. */
.rift-no-stamina-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 3, 15, 0.88);
  padding: 20px;
}
.rift-ns-card {
  text-align: center;
  max-width: 340px;
  width: 100%;
  padding: 28px 20px 22px;
  background: linear-gradient(180deg, rgba(20, 16, 40, 0.95), rgba(12, 10, 28, 0.98));
  border: 2px solid rgba(255, 100, 100, 0.3);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.rift-ns-icon { margin-bottom: 10px; }
.rift-ns-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: #ff6666;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  text-shadow: 0 0 16px rgba(255,100,100,0.4);
}
.rift-ns-sub {
  color: #888;
  font-size: 11px;
  margin-bottom: 16px;
  line-height: 1.4;
}
.rift-ns-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.rift-ns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #ddd;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s, border-color 0.15s;
}
.rift-ns-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,215,0,0.3);
}
.rift-ns-btn:active { transform: scale(0.97); }
.rift-ns-hint {
  color: #555;
  font-size: 10px;
  font-style: italic;
}

.rift-circle-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 6px;
}
/* Dark backdrop disc so purple portals stand out against the new rift bg.
   Added via ::before so it sits behind all other portal layers. */
.rift-circle-wrap::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,5,22,0.88) 0%, rgba(10,5,22,0.6) 55%, rgba(10,5,22,0) 80%);
  box-shadow: 0 0 20px rgba(0,0,0,0.55);
  z-index: 0;
  pointer-events: none;
}
.rift-circle-wrap > * { position: relative; z-index: 1; }

@media (min-width: 769px) {
  .rift-circle-wrap { width: 130px; height: 130px; }
}

@media (max-width: 380px) {
  .rift-circle-wrap { width: 80px; height: 80px; }
}

/* All decorative layers inside a portal — never eat clicks. Energy rings and
   vortex extend 15–28% outside the portal's visual circle, so without this
   they would overlap neighbor portals and silently swallow taps ("portal
   sometimes won't click" bug on mobile). */
.rift-vortex,
.rift-swirl,
.rift-swirl-2,
.rift-energy-ring,
.rift-inner-core,
.rift-floor-glow,
.rift-rune-ring,
.rift-rune-ring-inner { pointer-events: none; }

/* Vortex glow behind portal */
.rift-vortex {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0.35;
  animation: riftVortexPulse 2s ease-in-out infinite;
  filter: blur(8px);
}

@keyframes riftVortexPulse { 0%, 100% { opacity: 0.28; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.1); } }

/* Swirl dashed rings */
.rift-swirl {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 2px dashed;
  border-color: inherit;
  opacity: 0.55;
  animation: riftSpin 20s linear infinite;
  filter: drop-shadow(0 0 4px currentColor);
}

.rift-swirl-2 {
  inset: 15%;
  border-width: 1.5px;
  opacity: 0.45;
  animation: riftSpinReverse 15s linear infinite;
  filter: drop-shadow(0 0 3px currentColor);
}

/* Outer rune ring */
.rift-rune-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid;
  border-color: inherit;
  animation: riftSpin 10s linear infinite;
  box-shadow: 0 0 12px currentColor;
}

.rift-rune-ring .rune {
  position: absolute;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.95;
  color: inherit;
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

@media (min-width: 769px) {
  .rift-rune-ring .rune { font-size: 14px; }
}

.rift-rune-ring .rune:nth-child(1) { top: -3px; left: 50%; transform: translateX(-50%); }
.rift-rune-ring .rune:nth-child(2) { top: 12%; right: 4%; }
.rift-rune-ring .rune:nth-child(3) { top: 50%; right: -5px; transform: translateY(-50%); }
.rift-rune-ring .rune:nth-child(4) { bottom: 12%; right: 4%; }
.rift-rune-ring .rune:nth-child(5) { bottom: -3px; left: 50%; transform: translateX(-50%); }
.rift-rune-ring .rune:nth-child(6) { bottom: 12%; left: 4%; }
.rift-rune-ring .rune:nth-child(7) { top: 50%; left: -5px; transform: translateY(-50%); }
.rift-rune-ring .rune:nth-child(8) { top: 12%; left: 4%; }

/* Inner rune ring (counter-rotate) */
.rift-rune-ring-inner {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  animation: riftSpinReverse 7s linear infinite;
  box-shadow: 0 0 6px currentColor;
}

.rift-rune-ring-inner .rune {
  position: absolute;
  font-size: 9px;
  opacity: 0.6;
  color: inherit;
  text-shadow: 0 0 8px currentColor;
}

@media (min-width: 769px) {
  .rift-rune-ring-inner .rune { font-size: 11px; }
}

.rift-rune-ring-inner .rune:nth-child(1) { top: -2px; left: 50%; transform: translateX(-50%); }
.rift-rune-ring-inner .rune:nth-child(2) { top: 50%; right: -2px; transform: translateY(-50%); }
.rift-rune-ring-inner .rune:nth-child(3) { bottom: -2px; left: 50%; transform: translateX(-50%); }
.rift-rune-ring-inner .rune:nth-child(4) { top: 50%; left: -2px; transform: translateY(-50%); }

/* Inner core glow — brighter to pop against painterly rift bg */
.rift-inner-core {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, currentColor 25%, transparent 75%);
  opacity: 0.7;
  animation: riftCorePulse 2.5s ease-in-out infinite;
  box-shadow: 0 0 40px currentColor, 0 0 20px currentColor, inset 0 0 20px currentColor;
}

/* Energy rings (pulsing outward) */
.rift-energy-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid;
  border-color: inherit;
  opacity: 0.18;
}

.rift-energy-ring:nth-child(1) { inset: -8px; animation: riftEnergyPulse 2s ease-in-out infinite; }
.rift-energy-ring:nth-child(2) { inset: -18px; animation: riftEnergyPulse 2s ease-in-out 0.6s infinite; opacity: 0.08; }
.rift-energy-ring:nth-child(3) { inset: -28px; animation: riftEnergyPulse 2s ease-in-out 1.2s infinite; opacity: 0.04; }

@keyframes riftSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes riftSpinReverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes riftCorePulse { 0%, 100% { opacity: 0.25; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.08); } }
@keyframes riftEnergyPulse { 0%, 100% { transform: scale(1); opacity: inherit; } 50% { transform: scale(1.06); opacity: 0.03; } }

/* Hover speed boost */
.rift-circle-slot:hover .rift-rune-ring { animation-duration: 4s; }
.rift-circle-slot:hover .rift-rune-ring-inner { animation-duration: 3s; }
.rift-circle-slot.active .rift-rune-ring { animation-duration: 3s; }
.rift-circle-slot.active .rift-rune-ring-inner { animation-duration: 2s; }

/* Floor glow */
.rift-floor-glow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 30px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.6;
  animation: riftFloorPulse 3s ease-in-out infinite;
}

@keyframes riftFloorPulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) scaleX(1); }
  50% { opacity: 0.8; transform: translateX(-50%) scaleX(1.3); }
}

/* Particles around circle */
.rift-particles {
  position: absolute;
  inset: -15px;
  pointer-events: none;
}

.rift-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  animation: riftParticle 2.5s ease-in-out infinite;
}

.rift-particles span:nth-child(1) { left: 15%; top: 10%; animation-delay: 0s; }
.rift-particles span:nth-child(2) { left: 80%; top: 8%; animation-delay: 0.3s; }
.rift-particles span:nth-child(3) { left: 92%; top: 45%; animation-delay: 0.6s; }
.rift-particles span:nth-child(4) { left: 20%; top: 88%; animation-delay: 0.9s; }
.rift-particles span:nth-child(5) { left: 70%; top: 85%; animation-delay: 0.15s; }
.rift-particles span:nth-child(6) { left: 5%; top: 50%; animation-delay: 1.2s; }
.rift-particles span:nth-child(7) { left: 50%; top: 5%; animation-delay: 1.5s; }
.rift-particles span:nth-child(8) { left: 45%; top: 92%; animation-delay: 0.45s; }

@keyframes riftParticle {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 0.7; }
  100% { transform: translateY(-30px) scale(0.2); opacity: 0; }
}

.rift-circle-slot:hover .rift-particles span { animation-duration: 1.5s !important; }

/* Tier colors */
.rift-tier-swift { color: #2ecc71; }
.rift-tier-swift .rift-floor-glow { background: radial-gradient(ellipse, #2ecc71, transparent); }
.rift-tier-swift .rift-particles span { background: #2ecc71; box-shadow: 0 0 6px #2ecc71; }

.rift-tier-arcane { color: #4FACFE; }
.rift-tier-arcane .rift-floor-glow { background: radial-gradient(ellipse, #4FACFE, transparent); }
.rift-tier-arcane .rift-particles span { background: #4FACFE; box-shadow: 0 0 6px #4FACFE; }

.rift-tier-mystic { color: #BF5FFF; }
.rift-tier-mystic .rift-floor-glow { background: radial-gradient(ellipse, #BF5FFF, transparent); }
.rift-tier-mystic .rift-particles span { background: #BF5FFF; box-shadow: 0 0 6px #BF5FFF; }

.rift-tier-infernal { color: #FF4757; }
.rift-tier-infernal .rift-floor-glow { background: radial-gradient(ellipse, #FF4757, transparent); }
.rift-tier-infernal .rift-particles span { background: #FF4757; box-shadow: 0 0 6px #FF4757; }

/* Quest label under circle */
.rift-quest-label { text-align: center; pointer-events: none; }
.rift-quest-name { font-family: var(--font-display); font-size: 13px; color: var(--gold); font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.95), 0 0 14px rgba(0,0,0,0.8), 1px 1px 0 rgba(0,0,0,0.9), -1px -1px 0 rgba(0,0,0,0.6); line-height: 1.2; margin-bottom: 2px; }
.rift-quest-time { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 8px rgba(0,0,0,0.9), 1px 1px 0 rgba(0,0,0,0.9); }
.rift-quest-rewards-mini { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 4px; font-size: 11px; color: #e5d8f5; text-shadow: 0 2px 4px rgba(0,0,0,1), 0 0 6px rgba(0,0,0,0.9), 1px 1px 0 rgba(0,0,0,0.8); }
.rift-quest-rewards-mini img { width: 14px; height: 14px; }

@media (min-width: 769px) {
  .rift-quest-name { font-size: 15px; }
  .rift-quest-time { font-size: 14px; }
  .rift-quest-rewards-mini { font-size: 12px; }
}

/* Detail panel (slides open on click) */
.rift-detail {
  position: absolute;
  bottom: 120px; /* lift above floating nav bar + its gradient blur */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 20px);
  max-width: 440px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
  opacity: 0;
  z-index: 30;
}
@media (max-width: 600px) {
  .rift-detail {
    position: fixed;
    bottom: 160px; /* clear nav pill + mob-quick-strip above it */
    left: 4px;
    right: 4px;
    width: auto;
    transform: none;
    max-width: none;
    z-index: 100;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
  .rift-detail.open { max-height: calc(100vh - 200px); }
}

.rift-detail.open {
  max-height: 400px;
  opacity: 1;
}

.rift-detail-inner {
  background: linear-gradient(135deg, rgba(45,31,85,0.92), rgba(26,16,53,0.96));
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(8px);
  position: relative;
}
.rift-detail-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #ddd;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.rift-detail-close:hover { background: rgba(255,71,87,0.55); color: #fff; }

/* Tier-colored detail panel borders */
.rift-detail-tier-swift { border-color: rgba(46,204,113,0.4); }
.rift-detail-tier-arcane { border-color: rgba(79,172,254,0.4); }
.rift-detail-tier-mystic { border-color: rgba(191,95,255,0.4); }
.rift-detail-tier-infernal { border-color: rgba(255,71,87,0.4); }

.rift-detail-title { font-family: var(--font-display); font-size: 17px; color: var(--gold); text-align: center; margin-bottom: 2px; }
.rift-detail-time { text-align: center; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }

.rift-detail-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 10px;
}

.rift-detail-reward {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}

.rift-detail-reward img { width: 18px; height: 18px; }
.rift-detail-reward .val-base { color: var(--text-dim); font-weight: 600; margin-left: auto; }
.rift-detail-reward .val-bonus { color: #2ecc71; font-weight: 700; font-size: 10px; }
.rift-detail-reward .val-total { color: var(--text-bright); font-weight: 700; margin-left: auto; }

/* Active bonuses in detail */
.rift-detail-bonuses {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(140,120,255,0.1);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}

.rift-bonuses-title {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.rift-bonus-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  padding: 1px 0;
}

.rift-bonus-row .bonus-val {
  font-weight: 700;
}

.rift-detail-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.rift-detail-stamina {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.rift-detail-stamina img { width: 20px; height: 20px; }
.rift-detail-stamina .stam-val { color: #3ddc84; font-weight: 700; }

/* Inline stamina-shortage block inside the detail panel.
   Shown when the player taps a portal they can't afford — replaces
   the disabled "Enter Portal" button so they see WHY and HOW to
   resolve it (was previously a hover-only tooltip that never reached
   mobile users; v23.0.856 Maxxl report). */
.rift-detail-noStam {
  flex: 1;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rift-detail-noStam-msg {
  color: #ff8b8b;
  font-size: 11px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  text-align: center;
  line-height: 1.25;
}
.rift-detail-noStam-btns {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.rift-detail-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(20,14,38,0.9), rgba(10,6,22,0.95));
  border: 1px solid rgba(200,168,78,0.55);
  border-radius: 8px;
  color: #ddd;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.rift-detail-buy-btn:hover {
  border-color: var(--gold, #ffd44d);
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(30,20,50,0.95), rgba(15,10,30,0.98));
}
.rift-detail-buy-btn:active { transform: scale(0.97); }
.rift-detail-buy-btn img { width: 16px; height: 16px; object-fit: contain; }
.rift-detail-buy-btn .buy-plus { color: var(--gold, #ffd44d); font-weight: 900; font-size: 12px; }
.rift-detail-buy-btn .buy-cost { color: #fff; font-weight: 800; }
.rift-detail-buy-btn .buy-left { color: #888; font-size: 9px; font-weight: 700; }
.rift-detail-buy-btn.dia { border-color: rgba(126,205,255,0.55); }
.rift-detail-buy-btn.dia:hover { border-color: #7ecdff; }
.rift-detail-buy-btn.dia .buy-plus { color: #7ecdff; }
.rift-detail-buy-btn.disabled {
  opacity: 0.4;
  cursor: default;
  border-color: rgba(120,120,120,0.3) !important;
}
.rift-detail-buy-btn.disabled:hover { transform: none; background: linear-gradient(135deg, rgba(20,14,38,0.9), rgba(10,6,22,0.95)); }

/* Zoom animation on quest start — uses tier color */
/* Flash: solid color circle expanding from portal to fill screen */

.qb-badge-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 3px;
}

.qb-rew {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.qb-rew-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.qb-quest-time {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  font-family: var(--font-display);
  flex-shrink: 0;
}

.qb-quest-top .qb-quest-name {
  flex: 1;
  margin-bottom: 0;
}

@media (max-width: 500px) {
  .qb-quests-grid {
    grid-template-columns: 1fr;
  }
}

.qb-quest-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 4px;
}

.qb-quest-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-bright);
  margin-bottom: 6px;
  text-align: center;
}

.qb-quest-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 8px;
  justify-content: center;
}

.qb-quest-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.qb-stam-cost {
  font-size: 12px;
  font-weight: 600;
  color: #2ecc71;
}

.qb-stam-cost.qb-no-stam {
  color: #e74c3c;
}

.qb-start-btn {
  padding: 8px 24px;
  background: linear-gradient(135deg, #FFD700, #E09530);
  color: #1a0a05;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 38px;
  min-width: 120px;
  transition: transform 0.15s, box-shadow 0.15s;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  box-shadow: 0 2px 10px rgba(255,215,0,0.3);
  letter-spacing: 0.5px;
}

.qb-start-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(255,215,0,0.5);
}

.qb-start-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

.qb-refresh {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 8px;
}

/* ============================================
   ARENA TAB — PvP (Phase 3+4)
   ============================================ */

/* --- Sub-tabs --- */
/* Arena Dashboard Panel */
.arena-dash {
  background: linear-gradient(180deg, rgba(18,10,35,0.95) 0%, rgba(12,6,25,0.98) 100%);
  border: 10px solid transparent;
  border-image: url('../img/arena/arena-dash-bg.webp') 80 fill / 10px / 0 stretch;
  border-radius: 0;
  padding: 6px 14px 6px;
  margin: 0;
  position: relative;
  max-width: 680px;
}
.arena-dash-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(200,168,78,0.25);
  margin-bottom: 1px;
  line-height: 1;
}
.arena-dash-desc {
  text-align: center;
  font-size: 10px;
  color: rgba(200,168,78,0.5);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.arena-dash-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.arena-dash-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.arena-dash-rank-info { display: flex; flex-direction: column; gap: 1px; }
.arena-dash-rank-name { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.arena-dash-elo { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; }
.arena-dash-elo-icon { width: 14px; height: 14px; }
.arena-dash-sep {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.08);
}
.arena-dash-center {
  display: flex;
  gap: 6px;
}
.arena-dash-right {
  display: flex;
  gap: 6px;
}
.arena-dash-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 3px 8px;
  text-align: center;
  min-width: 42px;
}
.arena-pill-val { display: block; font-size: 13px; font-weight: 700; color: var(--text-bright); }
.arena-pill-label { display: block; font-size: 8px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.arena-pill-streak { border-color: rgba(255,165,0,0.2); background: rgba(255,165,0,0.06); }
.arena-pill-streak .arena-pill-val { color: #FFA500; }
.arena-pill-tokens { cursor: pointer; border-color: rgba(200,168,78,0.2); background: rgba(200,168,78,0.06); transition: background 0.2s; }
.arena-pill-tokens:hover { background: rgba(200,168,78,0.15); }
.arena-pill-tokens .arena-pill-val { color: var(--gold); }
.arena-pill-token-icon { width: 14px; height: 14px; display: block; margin: 0 auto 2px; }
.arena-pill-rank .arena-pill-val { color: #4FACFE; }
.arena-pill-ready { border-color: rgba(46,213,115,0.4); background: rgba(46,213,115,0.1); animation: arenaReadyGlow 2s ease-in-out infinite alternate; }
.arena-pill-ready .arena-pill-val { color: #2ED573; font-weight: 800; }
.arena-pill-cd { border-color: rgba(255,107,71,0.3); background: rgba(255,107,71,0.06); }
.arena-pill-cd .arena-pill-val { color: #FF6B47; font-variant-numeric: tabular-nums; }
@keyframes arenaReadyGlow {
  0% { box-shadow: 0 0 4px rgba(46,213,115,0.2); }
  100% { box-shadow: 0 0 12px rgba(46,213,115,0.5); }
}

.arena-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  background: rgba(10,5,25,0.6);
  border-radius: var(--radius);
  padding: 3px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.arena-tab {
  flex: 1;
  padding: 7px 4px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-display);
  border-radius: var(--radius);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.arena-tab.active {
  background: var(--surface);
  color: var(--text-bright);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* --- Arena Header --- */
.arena-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(30,20,50,0.8), rgba(20,15,40,0.9));
  border-radius: var(--radius);
  border: 1px solid rgba(200,168,78,0.2);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.arena-rank-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
}
.arena-rank-icon { line-height: 1; }
.arena-rank-name { font-size: 13px; font-weight: 700; }
.arena-header-elo-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-left: 4px;
}
.arena-elo {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
}
.arena-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arena-attempts {
  font-size: 11px;
  color: var(--text-dim);
}
.arena-streak {
  font-size: 13px;
  color: #FFA502;
  font-weight: 700;
  animation: arenaStreakPulse 1.5s ease-in-out infinite;
}
@keyframes arenaStreakPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* --- Refresh Button --- */
.arena-refresh-wrap { text-align: center; margin-bottom: 10px; }
.arena-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.arena-refresh-btn:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text-bright);
  background: rgba(255,255,255,0.08);
}
.arena-refresh-diamond { border-color: rgba(123,224,255,0.2); color: #7be0ff; }
.arena-refresh-diamond:hover { border-color: rgba(123,224,255,0.4); background: rgba(123,224,255,0.08); }
.arena-refresh-dia-icon { width: 14px; height: 14px; }

/* --- No Fights Remaining Banner --- */
/* Top row: dashboard centered */
.arena-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Exhausted: grayscale + blur on opponent cards */
.arena-opp-exhausted {
  position: relative;
}
.arena-opp-exhausted .arena-opp-card {
  filter: grayscale(0.8) brightness(0.5);
  pointer-events: none;
}
.arena-exhausted-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(3px);
  border-radius: var(--radius-lg);
}
.arena-exhausted-content {
  text-align: center;
  background: rgba(10,5,25,0.85);
  border: 2px solid rgba(255,71,87,0.4);
  border-radius: 14px;
  padding: 24px 36px;
  box-shadow: 0 0 40px rgba(255,71,87,0.15);
}
.arena-exhausted-warn { font-size: 36px; margin-bottom: 6px; }
.arena-exhausted-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: #FF6B81;
  letter-spacing: 3px;
  margin-bottom: 8px;
}
.arena-exhausted-timer-lg {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: #FFA502;
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(255,165,2,0.3);
}
.arena-exhausted-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}
.arena-exhausted-timer {
  font-family: var(--font-display);
  font-size: 13px;
  color: #FFA502;
  letter-spacing: 0.5px;
}

/* --- Difficulty Buttons (Easy/Hard) --- */
.arena-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 0;
  max-width: 500px;
  margin: 0 auto;
}
@media (max-width: 400px) {
  .arena-diff-grid { gap: 10px; padding: 12px 0; }
}
.arena-diff-btn {
  background: linear-gradient(180deg, rgba(30,20,50,0.95), rgba(15,10,30,0.98));
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 18px 12px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.arena-diff-btn:hover {
  transform: translateY(-4px);
}
.arena-diff-btn:active { transform: scale(0.96); }
.arena-diff-easy {
  border-color: rgba(46,213,115,0.35);
  box-shadow: 0 4px 20px rgba(46,213,115,0.08), inset 0 0 40px rgba(46,213,115,0.03);
}
.arena-diff-easy:hover {
  border-color: rgba(46,213,115,0.7);
  box-shadow: 0 8px 30px rgba(46,213,115,0.2), inset 0 0 40px rgba(46,213,115,0.05);
}
.arena-diff-hard {
  border-color: rgba(255,71,87,0.35);
  box-shadow: 0 4px 20px rgba(255,71,87,0.08), inset 0 0 40px rgba(255,71,87,0.03);
}
.arena-diff-hard:hover {
  border-color: rgba(255,71,87,0.7);
  box-shadow: 0 8px 30px rgba(255,71,87,0.2), inset 0 0 40px rgba(255,71,87,0.05);
}
.arena-diff-disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.6);
}
.arena-diff-emblem {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 4px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  transition: transform 0.2s;
}
.arena-diff-btn:hover .arena-diff-emblem {
  transform: scale(1.08);
}
.arena-diff-easy .arena-diff-emblem {
  filter: drop-shadow(0 4px 16px rgba(46,213,115,0.3));
}
.arena-diff-hard .arena-diff-emblem {
  filter: drop-shadow(0 4px 16px rgba(255,71,87,0.3));
}
@media (max-width: 400px) {
  .arena-diff-emblem { width: 90px; height: 90px; }
  .arena-diff-btn { padding: 14px 8px 12px; }
}
.arena-diff-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.arena-diff-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.arena-diff-detail {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}
.arena-diff-easy .arena-diff-label { color: #2ED573; }
.arena-diff-hard .arena-diff-label { color: #FF4757; }

/* Cooldown notice (below tiles) */
.arena-cd-notice {
  text-align: center;
  padding: 16px;
  margin-top: 8px;
}
.arena-cd-humor {
  font-family: var(--font-display);
  font-size: 15px;
  color: #FF6B81;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.arena-cd-timer {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: #FFA502;
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(255,165,2,0.3);
}
.arena-cd-sub {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   Arena Ranking Picker — compact list with YOU in center.
   ══════════════════════════════════════════════════════════ */
/* v23.0.714 — Split-Pane arena (user pick: variant B).
   Desktop: left = compact opponent list, right = big VS detail pane with
   stat comparison + WIN/LOSS rewards + huge FIGHT button.
   Mobile: detail pane hidden; list rows click-to-fight like before. */
.arena-split .arena-split-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 960px) {
  .arena-split .arena-split-body {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
  .arena-split .arena-rank-list {
    flex: 0 0 430px;
    max-height: 68vh;
  }
  .arena-split .arena-rank-detail {
    flex: 1;
    min-height: 560px;
    position: sticky;
    top: 14px;
  }
  /* Compact rows inside split-pane — rewards/pwr/elo move to the detail
     pane, so the list row only needs: avatar + name/class + ELO. */
  .arena-split .arena-rank-row {
    grid-template-columns: 48px minmax(0,1fr) auto;
    padding: 10px 14px;
    gap: 10px;
  }
  .arena-split .arena-rank-row .arena-rank-pwr,
  .arena-split .arena-rank-row .arena-rank-action {
    display: none;
  }
  .arena-split .arena-rank-row .arena-rank-elo {
    border-left: 1px solid rgba(255,255,255,0.07);
    min-width: 54px;
  }
  .arena-split .arena-rank-row.arena-rank-selected {
    border-color: rgba(255,216,144,0.75);
    box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 24px rgba(255,216,144,0.3), inset 0 1px 0 rgba(255,216,144,0.12);
    transform: translateX(2px);
  }
  .arena-split .arena-rank-row.cross-faction.arena-rank-selected {
    border-color: rgba(201,163,255,0.8);
    box-shadow: 0 6px 22px rgba(0,0,0,0.55), 0 0 24px rgba(168,85,247,0.35);
  }
}
@media (max-width: 959px) {
  .arena-split .arena-rank-detail { display: none; }
}

/* Detail pane card */
.arena-rank-detail {
  position: relative;
  padding: 26px 28px;
  background: linear-gradient(180deg, rgba(35,22,70,0.94), rgba(18,10,38,0.96));
  border: 1px solid rgba(255,216,144,0.3);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}
.arena-rank-detail::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255,107,107,0.1), transparent 55%),
    radial-gradient(ellipse at 90% 0%, rgba(168,85,247,0.1), transparent 55%);
  pointer-events: none;
}
.arena-rank-detail > * { position: relative; z-index: 1; }
.arena-rank-detail-empty {
  text-align: center;
  color: #7a6d9c;
  font-size: 13px;
  font-style: italic;
  padding: 60px 20px;
  letter-spacing: 0.5px;
}

/* VS header */
.ard-vs-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.ard-vs-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}
.ard-vs-av {
  width: 110px;
  height: 110px;
  border-radius: 14px;
  object-fit: cover;
  border: 2.5px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7);
  margin-bottom: 10px;
}
.ard-vs-me .ard-vs-av {
  border-color: rgba(255,216,144,0.7);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7), 0 0 28px rgba(255,216,144,0.3);
}
.ard-vs-them.cross .ard-vs-av {
  border-color: rgba(201,163,255,0.75);
  box-shadow: 0 8px 28px rgba(0,0,0,0.7), 0 0 28px rgba(168,85,247,0.35);
}
.ard-vs-name {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ard-vs-me .ard-vs-name { color: #ffd890; }
.ard-vs-sub {
  font-size: 11.5px;
  color: #9d8fc3;
  margin-top: 4px;
  letter-spacing: 0.5px;
}
.ard-vs-badge-wrap {
  text-align: center;
}
.ard-vs-badge {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 38px;
  font-weight: 900;
  color: rgba(255,216,144,0.6);
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255,216,144,0.35);
}
.ard-vs-badge-sub {
  font-size: 9.5px;
  color: #ffe0a6;
  letter-spacing: 2.5px;
  font-weight: 800;
  margin-top: 6px;
  text-shadow: 0 0 10px rgba(255,216,144,0.5);
}

/* Stat comparison */
.ard-cmp {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px 14px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: rgba(10,5,25,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.ard-cmp-row { display: contents; }
.ard-cmp-row > div {
  padding: 6px 2px;
  display: flex;
  align-items: center;
  font-family: var(--font-display, 'Cinzel', serif);
}
.ard-cmp-me-val {
  justify-content: flex-end;
  color: #ffd890;
  font-size: 17px;
  font-weight: 900;
}
.ard-cmp-lbl {
  justify-content: center;
  color: #8a7ca8;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  text-transform: uppercase;
}
.ard-cmp-them-val {
  justify-content: flex-start;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}
.ard-cmp-me-val.higher, .ard-cmp-them-val.higher { color: #6FE6A0; text-shadow: 0 0 10px rgba(46,213,115,0.25); }
.ard-cmp-me-val.lower, .ard-cmp-them-val.lower { color: #FFA3B0; }

/* Rewards (WIN / LOSS boxes) */
.ard-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.ard-rw-grp {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.ard-rw-win {
  background: linear-gradient(180deg, rgba(46,213,115,0.14), rgba(46,213,115,0.04));
  border-color: rgba(46,213,115,0.4);
}
.ard-rw-loss {
  background: linear-gradient(180deg, rgba(255,107,129,0.12), rgba(255,107,129,0.03));
  border-color: rgba(255,107,129,0.35);
}
.ard-rw-head {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 10.5px;
  letter-spacing: 2.2px;
  font-weight: 900;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ard-rw-head.win { color: #6FE6A0; text-shadow: 0 0 8px rgba(46,213,115,0.3); }
.ard-rw-head.loss { color: #FFA3B0; text-shadow: 0 0 8px rgba(255,107,129,0.25); }
.ard-rw-items { display: flex; flex-direction: column; gap: 5px; }
.ard-rw-item {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ard-rw-item.win { color: #c8ffd8; }
.ard-rw-item.loss { color: #ffc8cf; }

/* Giant FIGHT button */
.ard-fight-btn {
  display: block;
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #ffd890, #c8a84e);
  border: none;
  border-radius: 14px;
  color: #1a0e00;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 4px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 8px 26px rgba(255,216,144,0.35), inset 0 2px 0 rgba(255,255,255,0.3);
  transition: filter 0.15s, transform 0.15s, box-shadow 0.2s;
}
.ard-fight-btn:hover:not([disabled]) {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255,216,144,0.45), inset 0 2px 0 rgba(255,255,255,0.3);
}
.ard-fight-btn:active:not([disabled]) { transform: translateY(0); filter: brightness(0.95); }
.ard-fight-btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }

/* v23.0.713 — user feedback: "to w okienku jest brzydkie". Removed the
   rounded-box container wrapper entirely. The list is now a transparent
   flex column; each row is its own solid card floating directly on the
   Colosseum background. Title/subtitle sit above the list as a simple
   text header, not inside a window. */
.arena-rank-container {
  display: flex;
  flex-direction: column;
  max-width: 720px;
  margin: 14px auto 0;
  padding: 0 10px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
@media (min-width: 960px) {
  .arena-rank-container { max-width: 1120px; margin: 20px auto 0; padding: 0 16px; }
  .arena-rank-list { max-height: 68vh; padding: 0; gap: 8px; }
  .arena-rank-head { padding: 0 0 14px; }
  .arena-rank-title { font-size: 16px; letter-spacing: 3.5px; }
  .arena-rank-sub { font-size: 12px; margin-top: 4px; }
}
@media (min-width: 1400px) {
  .arena-rank-container { max-width: 1280px; }
}
.arena-rank-container.arena-rank-cd { opacity: 0.55; pointer-events: none; }
.arena-rank-head {
  padding: 0 4px 10px;
  text-align: center;
  background: none;
  border-bottom: none;
}
.arena-rank-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: #FFD700;
  letter-spacing: 2.5px;
  font-weight: 800;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(255,215,0,0.2);
}
.arena-rank-sub {
  font-size: 11px;
  color: #c5b3e0;
  margin-top: 3px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}
.arena-rank-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 6px;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,215,0,0.2) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.arena-rank-list::-webkit-scrollbar { width: 6px; }
.arena-rank-list::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.2); border-radius: 3px; }
.arena-rank-loading, .arena-rank-empty {
  text-align: center; color: #888; font-size: 12px; padding: 24px 0; font-style: italic;
}

/* Row layout — each row is a self-contained solid card floating directly on
   the Colosseum background (no outer window). Strong shadow + solid gradient
   makes it read clearly against the scene. */
.arena-rank-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(30,18,55,0.92), rgba(16,9,32,0.95));
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.12s, box-shadow 0.2s;
  backdrop-filter: blur(4px);
}
.arena-rank-row:hover:not(.arena-rank-me):not(.disabled) {
  background: linear-gradient(180deg, rgba(45,28,80,0.95), rgba(22,12,45,0.97));
  border-color: rgba(255,215,0,0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.6), 0 0 18px rgba(255,215,0,0.15);
}
.arena-rank-row.disabled { cursor: not-allowed; opacity: 0.55; }
.arena-rank-row.cross-faction {
  border-color: rgba(168,85,247,0.4);
  background: linear-gradient(180deg, rgba(42,22,75,0.92), rgba(20,10,38,0.95));
}
.arena-rank-row.cross-faction:hover:not(.disabled) {
  border-color: rgba(201,163,255,0.7);
  background: linear-gradient(180deg, rgba(60,30,105,0.95), rgba(28,12,52,0.97));
  box-shadow: 0 10px 28px rgba(0,0,0,0.6), 0 0 22px rgba(168,85,247,0.25);
}

/* YOU row — solid gold-tinted card, sticky at top while scrolling */
.arena-rank-row.arena-rank-me {
  background: linear-gradient(180deg, rgba(80,55,15,0.95), rgba(40,25,8,0.95));
  border: 1px solid rgba(255,215,0,0.6);
  box-shadow: 0 8px 24px rgba(0,0,0,0.55), 0 0 22px rgba(255,215,0,0.22), inset 0 1px 0 rgba(255,215,0,0.15);
  cursor: default;
  position: sticky;
  top: 0;
  z-index: 2;
}
.arena-rank-row.arena-rank-me:hover { transform: none; }
.arena-rank-you-pill {
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 8px; font-weight: 900;
  color: #1a0e00;
  background: linear-gradient(135deg, #FFD700, #FFA726);
  padding: 1px 6px; border-radius: 3px;
  letter-spacing: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Avatar — bigger now, with level badge overlay */
.arena-rank-avatar {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 8px;
  overflow: visible;
  flex-shrink: 0;
}
.arena-rank-av-img {
  width: 48px; height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.arena-rank-lvl-badge {
  position: absolute;
  bottom: -3px; right: -4px;
  font-family: var(--font-display);
  font-size: 9px; font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #2a1a4a, #0c0620);
  border: 1px solid rgba(255,215,0,0.6);
  padding: 1px 4px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  white-space: nowrap;
}

/* Info col */
.arena-rank-info { min-width: 0; overflow: hidden; }
.arena-rank-name {
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center;
  gap: 5px;
  overflow: hidden;
}
.arena-rank-nick {
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.arena-rank-meta {
  font-size: 10px; color: #888;
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-rank-pwr-icon {
  width: 10px; height: 10px;
  vertical-align: middle;
  opacity: 0.7;
}

/* Founder pill — tiny F badge */
.arena-rank-founder {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  font-size: 9px; font-weight: 900;
  color: #1a0e00;
  background: linear-gradient(135deg, #FF8C00, #FFD700);
  border-radius: 3px;
  letter-spacing: 0.5px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* Title pill — uses existing chat-title-* classes for color */
.arena-rank-title-pill {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  max-width: 90px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex-shrink: 0;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
}

/* Faction badge — prominent, per faction */
.arena-rank-fac {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  flex-shrink: 0;
}
.arena-rank-fac.warden {
  background: rgba(255,215,0,0.18);
  border: 1px solid rgba(255,215,0,0.5);
  box-shadow: 0 0 6px rgba(255,215,0,0.3);
}
.arena-rank-fac.seeker {
  background: rgba(168,85,247,0.2);
  border: 1px solid rgba(168,85,247,0.55);
  box-shadow: 0 0 6px rgba(168,85,247,0.3);
}

/* Power col — prominent with emblem icon */
.arena-rank-pwr {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 72px;
  padding: 0 8px;
  position: relative;
}
.arena-rank-pwr-ico {
  width: 20px; height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255,107,107,0.4));
  margin-bottom: 2px;
}
.arena-rank-pwr-val {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 900;
  color: #ffb4b4;
  text-shadow: 0 0 8px rgba(255,107,107,0.3);
  line-height: 1;
  letter-spacing: 0.3px;
}
.arena-rank-pwr-lbl {
  font-size: 8px; color: #999;
  letter-spacing: 1.2px;
  margin-top: 2px;
  font-weight: 700;
}

/* ELO col — center narrow */
.arena-rank-elo {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 54px;
  padding: 0 8px;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.arena-rank-elo-val {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 800;
  color: #fff;
  line-height: 1;
}
.arena-rank-elo-lbl {
  font-size: 8px; color: #777;
  letter-spacing: 1.2px; margin-top: 3px;
  font-weight: 700;
}

/* Action col — stacked chips: win ELO / VP / loss ELO.
   Legacy single-group layout — still used by non-split rows (e.g. old markup).
   New rows use `.arena-rank-action-split` below, which groups WIN and LOSS. */
.arena-rank-action {
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: center;
  gap: 3px;
  min-width: 96px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.07);
}
/* Split rewards — "WIN" group (left, green) and "LOSS" group (right, red)
   side-by-side so the player sees at a glance what they risk vs what they
   earn. Tiny labels at the top of each group. */
.arena-rank-action.arena-rank-action-split {
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding-left: 12px;
  min-width: 168px;
}
.arena-rank-win-group,
.arena-rank-loss-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.arena-rank-win-group {
  background: linear-gradient(180deg, rgba(46,213,115,0.06), rgba(46,213,115,0.02));
  border-color: rgba(46,213,115,0.18);
}
.arena-rank-loss-group {
  background: linear-gradient(180deg, rgba(255,107,129,0.05), rgba(255,107,129,0.02));
  border-color: rgba(255,107,129,0.18);
}
.arena-rank-split-lbl {
  font-family: var(--font-display);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 1.8px;
  text-align: center;
  line-height: 1;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.arena-rank-split-lbl.win { color: #6FE6A0; text-shadow: 0 0 6px rgba(46,213,115,0.3); }
.arena-rank-split-lbl.loss { color: #FFA3B0; text-shadow: 0 0 6px rgba(255,107,129,0.25); }
.arena-rank-split-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.arena-rank-win-chip,
.arena-rank-loss-chip,
.arena-rank-vp-chip {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--font-display);
  line-height: 1;
  letter-spacing: 0.3px;
  font-weight: 800;
  white-space: nowrap;
}
.arena-rank-win-chip {
  background: linear-gradient(135deg, rgba(46,213,115,0.22), rgba(46,213,115,0.12));
  border: 1px solid rgba(46,213,115,0.45);
  color: #6FE6A0;
  text-shadow: 0 0 6px rgba(46,213,115,0.45);
  font-size: 12px;
}
.arena-rank-loss-chip {
  background: linear-gradient(135deg, rgba(255,107,129,0.16), rgba(255,107,129,0.08));
  border: 1px solid rgba(255,107,129,0.35);
  color: #FFA3B0;
  font-size: 10.5px;
  font-weight: 700;
}
.arena-rank-vp-chip {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(168,85,247,0.10));
  border: 1px solid rgba(168,85,247,0.4);
  color: #d4b5ff;
  font-size: 11px;
}
.arena-rank-vp-chip.cross {
  background: linear-gradient(135deg, rgba(255,216,144,0.2), rgba(255,216,144,0.1));
  border-color: rgba(255,216,144,0.55);
  color: #ffe0a6;
  text-shadow: 0 0 8px rgba(255,216,144,0.4);
}
.arena-rank-chip-sign { opacity: 0.85; font-weight: 900; }
.arena-rank-chip-val { font-weight: 900; }
.arena-rank-chip-tag {
  font-size: 8.5px;
  opacity: 0.75;
  letter-spacing: 1px;
  margin-left: 1px;
  font-weight: 700;
}
.arena-rank-vp-bonus {
  display: inline-block;
  animation: arenaVpPulse 1.8s ease-in-out infinite;
  margin-left: 2px;
}
@keyframes arenaVpPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* Mobile tightening — keep PWR + ELO visible, compress chips */
@media (max-width: 500px) {
  .arena-rank-container { max-width: 100%; margin: 6px 4px 0; }
  .arena-rank-list { padding: 3px; gap: 3px; max-height: 72vh; }
  .arena-rank-row { grid-template-columns: 40px minmax(0,1fr) auto auto auto; gap: 5px; padding: 5px 7px; }
  .arena-rank-avatar, .arena-rank-av-img { width: 40px; height: 40px; }
  .arena-rank-lvl-badge { font-size: 8px; padding: 1px 3px; bottom: -3px; right: -3px; }
  .arena-rank-name { font-size: 11.5px; gap: 4px; }
  .arena-rank-meta { font-size: 9px; }
  .arena-rank-pwr { min-width: 46px; padding: 0 3px; }
  .arena-rank-pwr-ico { width: 14px; height: 14px; margin-bottom: 1px; }
  .arena-rank-pwr-val { font-size: 11px; }
  .arena-rank-pwr-lbl { font-size: 7px; margin-top: 1px; }
  .arena-rank-elo-val { font-size: 12px; }
  .arena-rank-elo-lbl { font-size: 7px; }
  .arena-rank-elo { min-width: 38px; padding: 0 4px; }
  .arena-rank-action { min-width: 68px; padding-left: 5px; gap: 2px; }
  .arena-rank-action.arena-rank-action-split { min-width: 138px; padding-left: 6px; gap: 4px; }
  .arena-rank-win-group, .arena-rank-loss-group { padding: 3px 4px; }
  .arena-rank-split-lbl { font-size: 7.5px; letter-spacing: 1.2px; margin-bottom: 1px; }
  .arena-rank-win-chip { font-size: 10px; padding: 2px 5px; }
  .arena-rank-loss-chip { font-size: 9px; padding: 2px 5px; }
  .arena-rank-vp-chip { font-size: 9px; padding: 2px 5px; }
  .arena-rank-chip-tag { font-size: 7px; }
  .arena-rank-fac { width: 16px; height: 16px; font-size: 10px; }
  .arena-rank-founder { min-width: 14px; height: 14px; font-size: 8px; padding: 0 3px; }
  .arena-rank-title-pill { font-size: 8px; padding: 1px 4px; max-width: 70px; }
  .arena-rank-you-pill { font-size: 7px; bottom: -6px; }
}
/* Desktop room — spread out the row a bit more on wide screens */
@media (min-width: 960px) {
  .arena-rank-row { padding: 10px 16px; gap: 14px; }
  .arena-rank-pwr { min-width: 88px; }
  .arena-rank-elo { min-width: 66px; }
  .arena-rank-action { min-width: 118px; padding-left: 14px; }
  .arena-rank-action.arena-rank-action-split { min-width: 220px; padding-left: 14px; gap: 10px; }
  .arena-rank-win-group, .arena-rank-loss-group { padding: 5px 8px; }
  .arena-rank-split-lbl { font-size: 9.5px; margin-bottom: 3px; }
  .arena-rank-win-chip { font-size: 13px; padding: 4px 10px; }
  .arena-rank-vp-chip { font-size: 12px; padding: 3px 10px; }
  .arena-rank-loss-chip { font-size: 11.5px; padding: 3px 10px; }
  .arena-rank-pwr-val { font-size: 17px; }
  .arena-rank-elo-val { font-size: 18px; }
  .arena-rank-pwr-ico { width: 22px; height: 22px; }
}

/* --- Carousel Overlay --- */
.arena-carousel-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.arena-carousel-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.arena-carousel-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 20px;
}
.arena-carousel-box {
  background: linear-gradient(135deg, #1a1035, #0d0820);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 30px 20px;
  width: 400px;
  max-width: 92vw;
  text-align: center;
}
.arena-carousel-window {
  height: 88px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  background: rgba(0,0,0,0.5);
  position: relative;
  margin-bottom: 16px;
  contain: layout style paint;
}
.arena-carousel-window::before,
.arena-carousel-window::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 20px;
  z-index: 2;
  pointer-events: none;
}
.arena-carousel-window::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(13,8,32,0.9), transparent);
}
.arena-carousel-window::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(13,8,32,0.9), transparent);
}
.arena-carousel-track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.arena-carousel-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 88px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  box-sizing: border-box;
}
.arena-carousel-card.arena-carousel-selected {
  background: rgba(255,215,0,0.12);
  border: 2px solid rgba(255,215,0,0.5);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(255,215,0,0.2);
  animation: carouselPulse 1s ease infinite alternate;
}
@keyframes carouselPulse {
  from { box-shadow: 0 0 16px rgba(255,215,0,0.15); }
  to { box-shadow: 0 0 28px rgba(255,215,0,0.35); }
}
@keyframes wbUniquePulse {
  from { border-color: rgba(255,20,147,0.2); box-shadow: 0 0 8px rgba(255,20,147,0.1); }
  to { border-color: rgba(255,20,147,0.5); box-shadow: 0 0 20px rgba(255,20,147,0.2); }
}
@keyframes wbUniqueShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.arena-carousel-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}
video.arena-carousel-avatar { background: #000; }
.arena-carousel-info { text-align: left; min-width: 0; flex: 1; }
.arena-carousel-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.arena-carousel-meta {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-bottom: 2px;
}
.arena-carousel-power {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 4px;
}
.arena-carousel-pwr-icon {
  width: 14px;
  height: 14px;
}
.arena-carousel-elo-tag {
  color: #FFA502;
  margin-left: 6px;
  font-weight: 600;
}
.arena-carousel-status {
  font-family: var(--font-display);
  font-size: 15px;
  color: #FFA502;
  letter-spacing: 1px;
}

/* --- Opponent Cards --- */
/* Opponent card grid — 3 cards side by side */
.arena-opp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}
@media (max-width: 600px) {
  .arena-opp-grid { grid-template-columns: 1fr; }
}
.arena-opp-card {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  background-size: cover;
  background-position: center top;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
  overflow: visible;
}
.arena-opp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(140,120,255,0.4);
}
/* Avatar — simple square */
.arena-opp-avatar-wrap {
  width: 100px;
  height: 100px;
  margin: 0 auto 4px;
}
.arena-opp-avatar-frame {
  display: none;
}
.arena-opp-avatar-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 14px;
}
.arena-opp-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.5);
}
.arena-opp-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
  margin-bottom: 6px;
}
.arena-opp-level {
  font-weight: 700;
  color: var(--text-bright);
}
.arena-opp-class-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.arena-opp-power-row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: 6px;
}
.arena-opp-power {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 15px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  color: var(--gold);
}
.arena-opp-pwr-icon { width: 16px; height: 16px; }
.arena-opp-elo {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
}
.arena-opp-elo-icon { width: 14px; height: 14px; }
/* Stats grid 3x2 */
.arena-opp-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
  margin-bottom: 6px;
}
.arena-opp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 3px 2px;
}
.aos-label { font-size: 8px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.aos-val { font-size: 11px; color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
/* Equipment grid 4x2 */
.arena-opp-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}
.arena-opp-eq-empty {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0.3;
}
.arena-fight-btn {
  position: relative;
  padding: 0;
  background: none;
  border: none;
  min-height: 50px;
  width: 160px;
  transition: transform 0.15s, filter 0.2s;
  flex-shrink: 0;
  cursor: pointer;
}
.arena-fight-btn-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.arena-fight-btn:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
}
.arena-fight-btn:active { transform: scale(0.95); }
.arena-fight-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* --- Fight Overlay --- */
.arena-fight-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: url('../img/arena/arena-bg.webp') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.arena-fight-overlay::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(5,5,20,0.7);
  pointer-events: none;
  z-index: -1;
}

/* ===== ARENA V2 — Canvas Battle Arena ===== */
.arena-v2-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(5,3,15,0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes arenaCountPop {
  0% { opacity: 0; transform: scale(2.5); }
  30% { opacity: 1; transform: scale(0.9); }
  50% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.arena-v2-header {
  text-align: center;
  margin-bottom: 10px;
}
.arena-v2-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 0 0 16px rgba(255,215,0,0.5), 0 2px 4px rgba(0,0,0,0.6);
}
.arena-v2-canvas-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255,215,0,0.2);
  box-shadow: 0 0 40px rgba(0,0,0,0.7), 0 0 80px rgba(255,215,0,0.05);
  background: #0d0815;
}
.arena-v2-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.arena-v2-controls {
  display: flex;
  gap: 14px;
  margin-top: 14px;
}
.arena-v2-btn {
  padding: 10px 28px;
  border: 1.5px solid rgba(255,215,0,0.3);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(40,30,60,0.9) 0%, rgba(20,15,35,0.95) 100%);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(255,215,0,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.arena-v2-btn:hover {
  background: linear-gradient(180deg, rgba(60,45,90,0.95) 0%, rgba(35,25,55,0.95) 100%);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255,215,0,0.2), 0 2px 8px rgba(0,0,0,0.4);
  transform: translateY(-1px);
}
.arena-v2-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.arena-v2-speed {
  min-width: 80px;
}
.arena-v2-skip {
  color: #ff6b6b;
  border-color: rgba(255,107,107,0.25);
  text-shadow: 0 0 8px rgba(255,107,107,0.3);
}
.arena-v2-skip:hover {
  border-color: #ff6b6b;
  background: linear-gradient(180deg, rgba(80,20,20,0.7) 0%, rgba(50,10,10,0.8) 100%);
  box-shadow: 0 0 16px rgba(255,107,107,0.15), 0 2px 8px rgba(0,0,0,0.4);
}

@media (max-width: 600px) {
  .arena-v2-overlay { padding: 6px; }
  .arena-v2-title { font-size: 16px; letter-spacing: 2px; }
  .arena-v2-btn { padding: 8px 18px; font-size: 12px; }
}

/* --- Arena V2 Battle Layout (roster left + canvas center + roster right) --- */
.arena-v2-battle-layout {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 1100px;
  align-items: stretch;
}
.arena-v2-center {
  flex: 1;
  min-width: 0;
}
.arena-v2-roster {
  width: 150px;
  flex-shrink: 0;
  background: rgba(10,5,20,0.85);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px;
  overflow-y: auto;
  max-height: 400px;
}
/* Legacy wrap (below canvas) */
.arena-v2-roster-wrap {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 820px;
  margin-top: 6px;
}
.arena-v2-roster-wrap .arena-v2-roster {
  flex: 1;
  width: auto;
  max-height: 220px;
}
.arena-v2-roster-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.arena-v2-roster-left .arena-v2-roster-title { color: #FF9F43; }
.arena-v2-roster-right .arena-v2-roster-title { color: #54A0FF; }
.arena-v2-roster-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  font-size: 10px;
  transition: opacity 0.3s;
}
.arena-v2-roster-row:hover {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}
.arena-v2-roster-row.dead {
  opacity: 0.35;
}
.arena-v2-roster-avatar {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.arena-v2-roster-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.arena-v2-roster-name {
  color: #ddd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 10px;
}
.arena-v2-roster-name.premium {
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.arena-v2-roster-hp {
  width: 40px;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.arena-v2-roster-hp-fill {
  height: 100%;
  background: #2ED573;
  transition: width 0.3s, background 0.3s;
  border-radius: 2px;
}
.arena-v2-roster-dmg {
  color: #FF4757;
  font-size: 9px;
  min-width: 30px;
  text-align: right;
  font-weight: 600;
}
@media (max-width: 700px) {
  .arena-v2-battle-layout { flex-direction: column; }
  .arena-v2-roster { width: 100%; max-height: 120px; }
  .arena-v2-battle-layout .arena-v2-roster-left { order: 2; }
  .arena-v2-center { order: 1; }
  .arena-v2-battle-layout .arena-v2-roster-right { order: 3; }
}
@media (max-width: 600px) {
  .arena-v2-roster-wrap { flex-direction: column; gap: 4px; }
  .arena-v2-roster { max-height: 120px; }
}

.arena-fight-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 400px;
  margin-bottom: 12px;
}
.arena-fight-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 1px;
}
.arena-fight-round {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}

/* --- Fighter Cards --- */
.arena-fight-cards {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 900px;
  margin-bottom: 12px;
}
.arena-fight-cards .arena-fighter {
  flex: 1;
  max-width: 50%;
  width: auto;
}

/* Stat comparison rows */
.arena-cmp-stats {
  width: 100%;
  margin-bottom: 8px;
}
.arena-cmp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px;
  font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.arena-cmp-row:last-child { border-bottom: none; }
.arena-cmp-label {
  color: var(--text-dim);
  font-size: 10px;
}
.arena-cmp-val {
  font-weight: 700;
  font-size: 11px;
}
.arena-fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 240px;
  width: 220px;
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  background-size: cover;
  background-position: center top;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 12px;
  position: relative;
}
.arena-fighter-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 8px;
}
.arena-fighter-avatar-lg {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  margin: 0 auto 6px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.arena-fighter-frame {
  display: none;
}
.arena-fighter-img-lg {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.arena-fighter-identity { text-align: center; }
.arena-fighter-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-bright);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arena-fighter-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.arena-fighter-power {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
}
.arena-power-icon { width: 16px; height: 16px; }
.arena-hp-bar-wrap {
  width: 100%;
  height: 20px;
  background: rgba(0,0,0,0.5);
  border-radius: 10px;
  position: relative;
  margin-bottom: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05);
}
.arena-hp-bar {
  height: 100%;
  background: linear-gradient(180deg, #5AE88B 0%, #2ED573 40%, #1DB954 100%);
  border-radius: 10px;
  transition: width 0.5s ease, background 0.5s ease;
  box-shadow: 0 0 8px rgba(46,213,115,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
}
.arena-hp-bar::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 4px;
  right: 4px;
  height: 5px;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  border-radius: 8px;
}
.arena-hp-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 11px;
  color: #fff;
  font-weight: 700;
  line-height: 20px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  letter-spacing: 0.5px;
}
.arena-fighter-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
  width: 100%;
}
.arena-stat-pill {
  font-size: 9px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  padding: 2px 5px;
}
/* Equipment grid (4x2) */
.arena-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 4px;
  justify-content: center;
  margin-bottom: 8px;
}
.arena-equip-empty {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 6px;
}
/* Skill tree minimap */
.arena-tree-mini {
  width: 100%;
  text-align: center;
}
/* Arena equipment hover tooltip */
.arena-item-tooltip {
  position: fixed;
  z-index: 600;
  background: rgba(15,10,30,0.97);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 12px;
  padding: 16px;
  width: 260px;
  display: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 15px rgba(140,120,255,0.1);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  pointer-events: none;
}
.arena-eq-slot {
  cursor: pointer;
  position: relative;
}
.arena-eq-has-tip:hover .arena-eq-tooltip,
.arena-eq-has-tip:focus .arena-eq-tooltip {
  display: block;
}
.arena-eq-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(10,10,20,0.95);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 140px;
  max-width: 200px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.arena-eq-tt-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.arena-eq-tt-stat span {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

/* Arena image elements */
.arena-rank-img {
  object-fit: contain;
  vertical-align: middle;
}
.arena-result-img {
  max-width: 280px;
  height: auto;
}
.arena-result-elo-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}
/* Arena tab background */
#panelArena {
  background: url('../img/arena/arena-bg.webp') center top/cover no-repeat;
  background-attachment: local;
  position: relative;
  min-height: 100%;
}
#panelArena::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,5,25,0.75);
  pointer-events: none;
  z-index: 0;
}
#panelArena > * {
  position: relative;
  z-index: 1;
}

/* Arena header banner */
/* Arena banner removed — replaced by dashboard panel */
/* Fight button graphic */
.arena-fight-btn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.arena-token-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 3px;
}

.arena-tree-label {
  font-size: 8px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.arena-tree-canvas {
  width: 120px;
  height: 120px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Leaderboard */
.arena-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.arena-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 480px;
  margin: 0 auto;
}
.arena-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(10,5,25,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md, 8px);
  backdrop-filter: blur(4px);
}
.arena-lb-me {
  background: rgba(200,168,78,0.15);
  border-color: rgba(200,168,78,0.35);
}
.arena-lb-pos {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-dim);
  min-width: 32px;
}
.arena-lb-me .arena-lb-pos {
  color: var(--gold);
}
.arena-lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.arena-lb-icon {
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.arena-lb-icon .arena-rank-img {
  width: 28px !important;
  height: 28px !important;
}
.arena-lb-info {
  flex: 1;
  min-width: 0;
}
.arena-lb-name {
  font-size: 13px;
  color: var(--text-bright);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.arena-lb-me .arena-lb-name {
  color: var(--gold);
  font-weight: 700;
}
.arena-lb-meta {
  font-size: 10px;
  color: var(--text-dim);
}
.arena-lb-elo {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text-bright);
  min-width: 44px;
  text-align: right;
  font-weight: 700;
}
.arena-lb-loading {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 16px 0;
}
.arena-bot-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 3px;
  padding: 1px 6px;
  z-index: 2;
}
.arena-fight-vs {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  align-self: center;
  padding-top: 30px;
  flex-shrink: 0;
}

/* --- Fight Zone (floating numbers) --- */
.arena-fight-zone {
  position: relative;
  width: 100%;
  max-width: 400px;
  min-height: 60px;
}

/* --- Floating Damage Numbers --- */
.arena-dmg-num {
  position: absolute;
  top: 60px;
  font-weight: 900;
  font-size: 28px;
  color: #FF4757;
  pointer-events: none;
  animation: arenaDmgFloat 1s ease-out forwards;
  z-index: 25;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(255,71,87,0.4);
  font-family: var(--font-display);
  letter-spacing: 1px;
}
.arena-dmg-crit {
  color: #FFD700;
  font-size: 36px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 20px rgba(255,215,0,0.6);
}
.arena-dmg-block {
  color: #aaa;
  font-size: 22px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 8px rgba(150,150,150,0.3);
}
.arena-dmg-dodge {
  color: #4FACFE;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 12px rgba(79,172,254,0.5);
}
@keyframes arenaDmgFloat {
  0% { opacity: 0.5; transform: translateY(0) scale(0.6); }
  15% { opacity: 1; transform: translateY(-10px) scale(1.2); }
  40% { opacity: 1; transform: translateY(-25px) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.7); }
}

/* --- Type Labels (CRIT! DODGE! BLOCK!) --- */
.arena-type-label {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  pointer-events: none;
  animation: arenaTypeFlash 0.8s ease-out forwards;
  z-index: 26;
}
.arena-type-crit {
  color: #FFD700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 24px rgba(255,215,0,0.7), 0 0 48px rgba(255,150,0,0.3);
}
.arena-type-dodge {
  color: #4FACFE;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 20px rgba(79,172,254,0.6);
}
.arena-type-block {
  color: #C0C0C0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 16px rgba(192,192,192,0.5);
}
@keyframes arenaTypeFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

/* Combat log removed */

/* --- Attacker Lunge --- */
.arena-attacker-lunge {
  animation: arenaLunge 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes arenaLunge {
  0% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.08) translateY(-8px); }
  50% { transform: scale(1.04) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}

/* --- Weapon Projectile (flies from attacker to target) --- */
.arena-weapon-projectile {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.9));
}
.arena-proj-img {
  width: 140px;
  height: 140px;
  object-fit: contain;
}
@keyframes arenaWeaponFly {
  0% {
    transform: translate(-50%, -50%) rotate(-60deg) scale(0.7);
    opacity: 0.8;
  }
  20% {
    transform: translate(
      calc(-50% + var(--proj-dx) * 0.15),
      calc(-50% + var(--proj-dy) * 0.15 - 20px)
    ) rotate(-30deg) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translate(
      calc(-50% + var(--proj-dx) * 0.5),
      calc(-50% + var(--proj-dy) * 0.5 - 40px)
    ) rotate(30deg) scale(1.3);
    opacity: 1;
  }
  80% {
    transform: translate(
      calc(-50% + var(--proj-dx) * 0.85),
      calc(-50% + var(--proj-dy) * 0.85 - 10px)
    ) rotate(120deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + var(--proj-dx)),
      calc(-50% + var(--proj-dy))
    ) rotate(200deg) scale(0.5);
    opacity: 0;
  }
}

/* --- Weapon Swing (magic staff stays on attacker) --- */
.arena-weapon-swing {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.arena-swing-img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.8));
}
@keyframes arenaSwingRight {
  0% { transform: translateX(-50%) rotate(-45deg) scale(0.8); opacity: 0.6; }
  20% { transform: translateX(-40%) rotate(-20deg) scale(1.1); opacity: 1; }
  45% { transform: translateX(-10%) rotate(30deg) scale(1.25); opacity: 1; }
  60% { transform: translateX(-20%) rotate(15deg) scale(1.1); opacity: 1; }
  85% { transform: translateX(-40%) rotate(0deg) scale(0.9); opacity: 0.6; }
  100% { transform: translateX(-50%) rotate(0deg) scale(0.8); opacity: 0; }
}
@keyframes arenaSwingLeft {
  0% { transform: translateX(-50%) rotate(45deg) scale(0.8); opacity: 0.6; }
  20% { transform: translateX(-60%) rotate(20deg) scale(1.1); opacity: 1; }
  45% { transform: translateX(-90%) rotate(-30deg) scale(1.25); opacity: 1; }
  60% { transform: translateX(-80%) rotate(-15deg) scale(1.1); opacity: 1; }
  85% { transform: translateX(-60%) rotate(0deg) scale(0.9); opacity: 0.6; }
  100% { transform: translateX(-50%) rotate(0deg) scale(0.8); opacity: 0; }
}

/* --- Magic Bolt (spell projectile) --- */
.arena-magic-bolt {
  position: absolute;
  z-index: 22;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.arena-bolt-img {
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(150,100,255,0.9)) drop-shadow(0 0 8px rgba(200,150,255,0.6));
}
@keyframes arenaBoltFly {
  0% {
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
    opacity: 0.5;
  }
  15% {
    transform: translate(
      calc(-50% + var(--proj-dx) * 0.1),
      calc(-50% + var(--proj-dy) * 0.1)
    ) scale(1.2) rotate(30deg);
    opacity: 1;
  }
  50% {
    transform: translate(
      calc(-50% + var(--proj-dx) * 0.5),
      calc(-50% + var(--proj-dy) * 0.5)
    ) scale(1.0) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: translate(
      calc(-50% + var(--proj-dx)),
      calc(-50% + var(--proj-dy))
    ) scale(0.6) rotate(180deg);
    opacity: 0;
  }
}

/* --- Impact VFX Sprite (on avatar area of card) --- */
.arena-impact-fx {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 15;
}
.arena-impact-fx img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(255,200,50,0.7)) drop-shadow(0 0 8px rgba(255,150,0,0.4));
}
@keyframes arenaImpactPop {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(-15deg); opacity: 0.3; }
  15% { transform: translate(-50%, -50%) scale(1.4) rotate(5deg); opacity: 1; }
  35% { transform: translate(-50%, -50%) scale(1.1) rotate(-3deg); opacity: 1; }
  55% { transform: translate(-50%, -50%) scale(1.15) rotate(2deg); opacity: 0.9; }
  75% { transform: translate(-50%, -50%) scale(0.95) rotate(0deg); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity: 0; }
}

/* --- Hit Shake --- */
.arena-hit-shake {
  animation: combatHit 0.3s ease-out !important;
}

/* --- Crit Flash --- */
.arena-crit-flash {
  border-color: #FFD700 !important;
  box-shadow: 0 0 24px rgba(255, 215, 0, 0.7), 0 0 48px rgba(255, 150, 0, 0.3) !important;
  animation: arenaCritGlow 0.4s ease-out !important;
}
@keyframes arenaCritGlow {
  0% { filter: brightness(1); }
  30% { filter: brightness(1.8) saturate(1.5); }
  100% { filter: brightness(1); }
}

/* --- Fight Controls --- */
.arena-skip-btn {
  margin-top: 12px;
  padding: 12px 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-lg);
  color: var(--text-bright);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.arena-skip-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 12px rgba(200,168,78,0.2);
}

/* --- Result Screen --- */
/* Result banner — floating overlay centered, cards visible underneath */
.arena-result-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 32px;
  background: linear-gradient(135deg, rgba(15,10,30,0.6), rgba(10,5,25,0.65));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(200,168,78,0.2);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(140,120,255,0.1);
  min-width: 280px;
}
.arena-result-rewards {
  display: flex;
  gap: 14px;
  font-size: 14px;
  color: var(--text-bright);
}
.arena-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
}
.arena-result-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  font-weight: 900;
}
.arena-result-victory { color: #FFD700; text-shadow: 0 0 20px rgba(255,215,0,0.4); }
.arena-result-defeat { color: #FF4757; text-shadow: 0 0 20px rgba(255,71,87,0.4); }
.arena-result-elo {
  font-family: var(--font-display);
  font-size: 18px;
}
.elo-pos { color: #2ED573; }
.elo-neg { color: #FF4757; }
.arena-result-tokens, .arena-result-gold {
  font-size: 14px;
  color: var(--text-bright);
}
.arena-streak-label {
  color: #FFA502;
  font-weight: 700;
  font-size: 12px;
}

/* ── Dungeon Result Card ── */
.dng-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.dng-result-rewards {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.dng-result-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.dng-result-icon { width: 18px; height: 18px; vertical-align: middle; }
.dng-result-val { color: var(--text-bright); font-weight: 700; font-size: 16px; }
.dng-result-lbl { color: rgba(255,255,255,0.45); font-size: 12px; }
.dng-result-unlock {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.12);
}
.dng-result-veil {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(0,229,255,0.05);
  border: 1px solid rgba(0,229,255,0.12);
}
.dng-result-veil-icon { width: 24px; height: 24px; }
.dng-result-loot {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.dng-result-loot-header {
  font-family: var(--font-display);
  font-size: 13px;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.dng-result-loot-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dng-result-loot-info { flex: 1; min-width: 0; }
.dng-result-lvlup {
  font-family: var(--font-display);
  font-size: 18px;
  color: #5ED87A;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(94,216,122,0.4);
}
.arena-result-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.arena-result-btn {
  padding: 10px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  color: var(--text-bright);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.arena-result-btn:hover { background: var(--bg-lighter); }
.arena-result-continue {
  background: linear-gradient(135deg, #FF4757, #FF6B81);
  border: none;
  color: #fff;
}
.arena-result-continue:hover {
  box-shadow: 0 4px 15px rgba(255,71,87,0.4);
}

/* --- History Tab --- */
.arena-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 12px;
  padding: 16px 0;
}
/* --- History Grid (two columns, constrained width) --- */
.arena-history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .arena-history-grid { grid-template-columns: 1fr; }
}
.arena-history-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arena-history-col-header {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 1px;
  padding: 6px 10px;
  background: rgba(200,168,78,0.08);
  border-radius: var(--radius-md, 8px);
  border-bottom: 1px solid rgba(200,168,78,0.15);
  text-align: center;
}
.arena-hist-icon { margin-right: 6px; }

/* --- History Card --- */
.arena-hist-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform 0.15s ease;
}
.arena-hist-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.arena-hist-win {
  background: linear-gradient(135deg, rgba(30,60,30,0.65), rgba(20,35,20,0.45));
  border-left: 3px solid #2ED573;
}
.arena-hist-loss {
  background: linear-gradient(135deg, rgba(60,20,25,0.65), rgba(40,15,18,0.45));
  border-left: 3px solid #FF4757;
}
.arena-hist-card-badge {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  padding: 2px 0;
}
.arena-hist-win .arena-hist-card-badge {
  background: linear-gradient(90deg, transparent, rgba(46,213,115,0.15), transparent);
  color: #2ED573;
}
.arena-hist-loss .arena-hist-card-badge {
  background: linear-gradient(90deg, transparent, rgba(255,71,87,0.15), transparent);
  color: #FF4757;
}
.arena-hist-card-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
}
.arena-hist-left {
  flex-shrink: 0;
}
.arena-hist-center {
  flex: 1;
  min-width: 0;
}
.arena-hist-right {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
/* Avatar — bust portrait style */
.arena-hist-avatar-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  min-width: 120px;
  min-height: 120px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
}
.arena-hist-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}
/* Equipment + skill tree side by side */
.arena-hist-gear-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
}
/* Veilstone badge */
.arena-hist-veilstone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-family: var(--font-display);
  color: var(--unique);
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 6px;
  padding: 5px 12px;
  margin-top: 4px;
  margin-left: 8px;
}
.arena-hist-veilstone img {
  width: 22px;
  height: 22px;
}
.arena-hist-tree {
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.arena-hist-elo-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 2px;
}
.arena-hist-equip {
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 3px;
  margin-top: 6px;
}
.arena-hist-equip .item-icon-wrap {
  width: 36px !important;
  height: 36px !important;
}
.arena-hist-eq-empty {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.arena-hist-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arena-hist-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 1px;
}
.arena-hist-power {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--gold);
  margin-top: 2px;
}
.arena-hist-power-icon {
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.arena-hist-elo {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-display);
}
.arena-hist-tokens {
  font-size: 10px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 3px;
}
.arena-hist-time {
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.6;
}
.arena-hist-btn {
  padding: 4px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 9px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}
.arena-hist-btn:hover {
  border-color: var(--gold);
  color: var(--text-bright);
  background: rgba(200,168,78,0.1);
}
.arena-hist-btn.arena-revenge-btn {
  border-color: rgba(255,71,87,0.4);
  color: #FF6B81;
}
.arena-hist-btn.arena-revenge-btn:hover {
  border-color: #FF6B81;
  color: #fff;
  background: rgba(255,71,87,0.15);
}

/* --- Ranks Tab — Compact Strip + Leaderboard --- */
.arena-rank-strip {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.arena-rank-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  opacity: 0.5;
  transition: all 0.2s;
}
.arena-rank-chip-active {
  opacity: 1;
  background: rgba(200,168,78,0.1);
  border-color: rgba(200,168,78,0.3);
  box-shadow: 0 0 8px rgba(200,168,78,0.15);
}
.arena-rank-chip-elo {
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-display);
}
.arena-your-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(10,5,25,0.6);
  border: 1px solid rgba(200,168,78,0.2);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  margin: 0 auto 12px;
  max-width: 480px;
}
.arena-your-rank-badge { flex-shrink: 0; }
.arena-your-rank-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.arena-your-rank-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
}
.arena-your-rank-elo {
  font-size: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 3px;
}
.arena-your-rank-stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.arena-yr-stat {
  font-size: 11px;
  color: var(--text-dim);
}
.arena-yr-val {
  font-weight: 700;
  font-size: 14px;
  margin-right: 2px;
}
.arena-lb-header {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 8px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.arena-lb-gold .arena-lb-pos { color: #FFD700; }
.arena-lb-silver .arena-lb-pos { color: #C0C0C0; }
.arena-lb-bronze .arena-lb-pos { color: #CD7F32; }
.arena-lb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.arena-lb-page-btn {
  width: 32px;
  height: 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text-bright);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}
.arena-lb-page-btn:hover:not(:disabled) {
  background: rgba(200,168,78,0.15);
  border-color: var(--gold);
}
.arena-lb-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.arena-lb-page-info {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}

/* --- Shop Tab --- */
/* --- Arena Shop — Redesigned --- */
.ashop-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(200,168,78,0.08);
  border: 1px solid rgba(200,168,78,0.2);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.ashop-balance-icon { width: 28px; height: 28px; object-fit: contain; }
.ashop-balance-val {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  font-weight: 700;
}
.ashop-balance-label { font-size: 12px; color: var(--text-dim); }
.ashop-refresh-timer { text-align: center; font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }
.ashop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  max-width: 1300px;
  margin: 0 auto;
}
.ashop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px 12px;
  background: linear-gradient(135deg, rgba(25,15,45,0.9), rgba(15,10,30,0.95));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.ashop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.rarity-border-epic { border-color: rgba(163,53,238,0.35); }
.rarity-border-legendary { border-color: rgba(255,165,0,0.35); }
.rarity-border-mythic { border-color: rgba(255,71,87,0.35); }
.ashop-sold { opacity: 0.5; pointer-events: none; }
.ashop-card .stat-rows.compact { font-size: 12px; }
.ashop-card .stat-group-header { font-size: 10px; padding-top: 4px; margin-bottom: 2px; }
.ashop-card .stat-row { padding: 2px 0; }
.ashop-card-icon { margin-bottom: 8px; }
.ashop-arena-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #FF6B81;
  background: rgba(255,71,87,0.15);
  border: 1px solid rgba(255,71,87,0.3);
  padding: 1px 6px;
  border-radius: 3px;
}
.ashop-category { margin-bottom: 14px; }
.ashop-cat-title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-align: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.item-pvp-badge {
  font-size: 9px;
  font-weight: 800;
  color: #FF6B81;
  background: rgba(255,71,87,0.15);
  border: 1px solid rgba(255,71,87,0.3);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.ashop-card-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.ashop-card-slot {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.ashop-power {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 6px;
}
.ashop-power-icon { width: 16px; height: 16px; object-fit: contain; }
.ashop-card-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin-bottom: 10px;
}
.ashop-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 8px;
  background: rgba(46,213,115,0.06);
  border-radius: 4px;
  font-size: 11px;
}
.ashop-stat-val { color: #2ED573; font-weight: 700; }
.ashop-stat-name { color: var(--text-dim); }
.ashop-card-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}
.ashop-price {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  font-weight: 700;
}
.ashop-price-no { color: #FF4757; }
.ashop-price-icon { width: 18px; height: 18px; object-fit: contain; }
.ashop-buy-btn {
  flex: 1;
  padding: 8px 12px;
  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.ashop-buy-btn:hover {
  box-shadow: 0 4px 15px rgba(139,92,246,0.4);
  transform: scale(1.02);
}
.ashop-buy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: rgba(255,255,255,0.08);
  color: var(--text-dim);
}

/* --- Responsive --- */
@media (max-width: 959px) {
  .arena-fighter { width: auto; max-width: calc(50% - 4px); padding: 8px 5px; overflow: hidden; min-width: 0; flex-shrink: 1; }
  .arena-fight-cards { gap: 4px; overflow: hidden; max-width: 100%; position: relative; }
  .arena-fight-overlay { padding: 10px 2px; overflow-x: hidden; }
  .arena-fighter-avatar-lg { width: 80px; height: 80px; }
  .arena-fighter-img-lg { width: 80px; height: 80px; }
  .arena-fighter-name { font-size: 11px; }
  .arena-fighter .arena-cmp-row { padding: 1px 3px; font-size: 10px; }
  .arena-fighter .arena-cmp-label { font-size: 9px; }
  .arena-fighter .arena-cmp-val { font-size: 10px; }
  .arena-equip-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; }
  .arena-equip-grid .item-icon-wrap { width: 100% !important; height: auto !important; aspect-ratio: 1; }
  .arena-equip-grid .item-icon-wrap img { width: 85% !important; height: 85% !important; }
  .arena-equip-empty { width: 100%; aspect-ratio: 1; height: auto; font-size: 12px; }
  .arena-tree-canvas { width: 80px; height: 80px; }
  .arena-fight-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 14px; padding: 2px 6px; background: rgba(0,0,0,0.6); border-radius: 6px; z-index: 5; }
  .arena-impact-fx img { width: 120px; height: 120px; }
  .arena-proj-img { width: 80px; height: 80px; }
  .arena-swing-img { width: 80px; height: 80px; }
  .arena-bolt-img { width: 60px; height: 60px; }
}

/* ============================================
   DUNGEON TAB
   ============================================ */

.dungeon-header {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.dungeon-floor-display {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 4px;
}

.dungeon-best {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.dungeon-keys {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}

.dungeon-keys strong {
  color: var(--gold);
}

.dungeon-enter-btn {
  width: 100%;
  max-width: 240px;
  padding: 14px;
  background: linear-gradient(135deg, #BF5FFF, #9B59B6);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  min-height: 52px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(191, 95, 255, 0.3);
}

.dungeon-enter-btn:hover {
  box-shadow: 0 6px 25px rgba(191, 95, 255, 0.5);
  transform: scale(1.02);
}

.dungeon-enter-btn:active {
  transform: scale(0.97);
}

.dungeon-enter-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dungeon-floor {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dungeon-floor-num {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold);
  font-weight: 700;
  min-width: 32px;
  text-align: center;
}

.dungeon-floor-info {
  flex: 1;
  min-width: 0;
}

.dungeon-floor-result {
  font-size: 12px;
  font-weight: 700;
}

.dungeon-floor-result.victory {
  color: var(--uncommon);
}

.dungeon-floor-result.defeat {
  color: var(--hp-red);
}

/* Combat Log */
.combat-log {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}

.combat-log-entry {
  padding: 2px 0;
  border-bottom: 1px solid rgba(140,120,255,0.06);
}

.combat-log-entry.dmg-dealt {
  color: var(--gold);
}

.combat-log-entry.dmg-taken {
  color: var(--hp-red);
}

.combat-log-entry.heal {
  color: var(--hp-green);
}

.combat-log-entry.victory {
  color: var(--uncommon);
  font-weight: 700;
}

.combat-log-entry.defeat {
  color: var(--hp-red);
  font-weight: 700;
}

/* ============================================
   STATS TAB
   ============================================ */

/* ═══ Stats Hero Card ═══ */
.stats-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,180,0,0.02));
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
}
.stats-hero-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(255,215,0,0.1), transparent 70%);
  pointer-events: none;
}
.stats-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid rgba(255,215,0,0.25);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
  position: relative;
  z-index: 1;
}
.stats-hero-info { position: relative; z-index: 1; }
.stats-hero-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-bright);
  line-height: 1.2;
}
.stats-hero-class {
  font-size: 13px;
  color: var(--gold-dim);
  margin-top: 2px;
}
.stats-hero-lvl {
  color: var(--text-dim);
  font-weight: 400;
}
.stats-hero-power {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  margin-top: 4px;
  text-shadow: 0 0 12px rgba(255,215,0,0.2);
}

/* Class passives tags */
.stats-passives {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
  justify-content: center;
}
.stats-passive {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
}
.stats-passive.buff {
  background: rgba(46,204,113,0.1);
  color: var(--hp-green);
  border: 1px solid rgba(46,204,113,0.2);
}
.stats-passive.nerf {
  background: rgba(255,71,87,0.1);
  color: var(--hp-red);
  border: 1px solid rgba(255,71,87,0.2);
}

/* Matchup bar */
.stats-matchup {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
}
.stats-matchup-strong { color: var(--hp-green); }
.stats-matchup-strong::before { content: '\2694\FE0F '; }
.stats-matchup-weak { color: var(--hp-red); opacity: 0.8; }
.stats-matchup-weak::before { content: '\1F480 '; }

/* Resistance grid */
.stats-res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stats-res-card {
  text-align: center;
  padding: 10px 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.stats-res-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 0 auto 6px;
}
.stats-res-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.stats-res-val {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
}

.stats-panel-box {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.stats-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  padding-left: 2px;
}

.stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.stats-pair {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(140, 120, 255, 0.05);
  border: 1px solid rgba(140, 120, 255, 0.08);
  border-radius: var(--radius);
  min-height: 36px;
  overflow: hidden;
}

.stats-key {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-val {
  font-size: 14px;
  color: var(--text-bright);
  font-weight: 700;
  font-family: var(--font-display);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 480px) {
  .stats-pair { flex: 1 1 100%; }
  .stats-val { font-size: 12.5px; }
  .stats-key { font-size: 10px; margin-right: 6px; letter-spacing: 0; }
}

.stats-val.gold-text { color: var(--gold); }
.stats-val.green-text { color: var(--uncommon); }
.stats-val.red-text { color: var(--hp-red); }

.stats-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* Achievements placeholder */
.achievement-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.achievement-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.achievement-info {
  flex: 1;
  min-width: 0;
}

.achievement-name {
  font-size: 13px;
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 2px;
}

.achievement-desc {
  font-size: 11px;
  color: var(--text-dim);
}

.achievement-card.locked {
  opacity: 0.4;
}

/* ============================================
   ITEM POPUP / MODAL
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 5, 25, 0.7);
  /* Must sit ABOVE the mobile guild members drawer (z 240) and its backdrop
     (z 230), otherwise tapping a member opens the profile underneath the
     drawer and players can't see it — looks like "click goes back to main
     guild" because they tap the backdrop to dismiss. */
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.item-overlay {
  /* Must sit ABOVE the standard modal overlay (z 260) because the item
     compare popup is opened FROM inside other modals (inventory list,
     dungeon loot screen, etc). v23.0.162 bumped .modal-overlay to 260
     for the guild drawer fix, which left .item-overlay (was 250) hidden
     behind it. v23.0.168 fix. */
  z-index: 270;
  background: rgba(10, 5, 25, 0.6);
  align-items: flex-start;
  overflow-y: auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

.modal-card {
  background: linear-gradient(135deg, var(--surface), var(--bg-lighter));
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 12px 40px rgba(10,5,25,0.6), 0 0 30px rgba(140,120,255,0.1);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-close-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #666;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  z-index: 10;
}
.modal-close-x:hover {
  background: rgba(255,68,68,0.15);
  color: #ff6666;
}

.modal-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 8px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  text-align: center;
  margin-bottom: 4px;
}

.modal-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 16px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.modal-actions button {
  flex: 1 1 120px;
  min-width: 100px;
  min-height: 44px;
}

/* Item popup specific */
.item-popup-name {
  font-family: var(--font-display);
  font-size: 16px;
  text-align: center;
  word-break: break-word;
  margin-bottom: 4px;
}

.item-popup-name.common { color: var(--common); }
.item-popup-name.uncommon { color: var(--uncommon); }
.item-popup-name.rare { color: var(--rare); }
.item-popup-name.epic { color: var(--epic); }
.item-popup-name.legendary { color: var(--legendary); }
.item-popup-name.mythic { color: var(--mythic); }

.item-popup-type {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 10px;
}

.item-popup-stats {
  font-size: 13px;
  color: var(--text);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.7;
}

.item-compare {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  align-items: stretch;
}

.compare-col {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 6px 8px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
}
.compare-col .item-styled-name,
.compare-col .item-popup-name {
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  word-break: break-word;
}
.compare-col .item-popup-type {
  margin-bottom: 6px;
  text-align: center;
}

.compare-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
  font-weight: 700;
}

.compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  min-width: 32px;
  position: relative;
}
.compare-vs::before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-strong), transparent);
}
.compare-vs span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  padding: 4px 0;
}

.compare-stats {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.7;
}

.compare-stat-row { color: var(--text); }
.compare-stat-row.stat-better { color: #5ED87A; }
.compare-stat-row.stat-worse { color: #FF4757; }

.compare-power {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.12);
}

/* Comparison grid — rows always aligned */
.cmp-grid {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  gap: 0;
  margin-bottom: 12px;
}
.cmp-cell {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.cmp-sep {
  position: relative;
}
.cmp-sep::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--border-strong), transparent);
}
.cmp-sep-vs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-sep-vs span {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface);
  padding: 2px 0;
}
.cmp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 0 6px;
}
.cmp-icon {
  padding: 4px 0 6px;
}
.cmp-name {
  padding: 2px 4px 4px;
  word-break: break-word;
}
.cmp-name .item-popup-name {
  font-size: 13px;
  margin-bottom: 0;
}
.cmp-type {
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 0 6px;
}
.cmp-pwr {
  font-size: 13px;
  font-weight: 700;
  gap: 4px;
  padding: 6px 8px;
  margin: 0 6px 4px;
  border-radius: 6px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.12);
}
.cmp-pwr-ico {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Combat result popup */
.combat-result-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 8px;
}

.combat-result-title {
  font-family: var(--font-display);
  font-size: 22px;
  text-align: center;
  margin-bottom: 4px;
}

.combat-result-title.victory { color: var(--uncommon); }
.combat-result-title.defeat { color: var(--hp-red); }

.combat-result-elo {
  font-size: 14px;
  text-align: center;
  margin-bottom: 12px;
}

.combat-result-elo.positive { color: var(--uncommon); }
.combat-result-elo.negative { color: var(--hp-red); }

.combat-result-rewards {
  text-align: left;
  margin-bottom: 12px;
}

.combat-result-rewards .reward-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.reward-row .reward-label { color: var(--text); }
.reward-row .reward-value { color: var(--gold); font-weight: 600; }

/* Offline rewards popup */
.offline-reward-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.offline-reward-label { color: var(--text); }
.offline-reward-value { color: var(--gold); font-weight: 600; }

/* Level up popup */
.level-up-big {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--gold);
  text-align: center;
  font-weight: 700;
  text-shadow: 0 0 20px var(--gold-glow);
  animation: levelUp 1s ease-out;
}

/* Quest complete popup */
.quest-complete-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 8px;
}

.qc-rewards {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.qc-reward-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 70px;
}

.qc-reward-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.qc-reward-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.qc-reward-amount {
  font-size: 15px;
  font-weight: 700;
  color: var(--gold);
  font-family: var(--font-display);
}

.qc-reward-name {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.qc-loot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.qc-loot-item .qc-reward-amount {
  font-size: 12px;
  max-width: 90px;
  text-align: center;
  line-height: 1.2;
}

/* Building upgrade popup */
.building-popup-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 8px;
}

.building-popup-info {
  text-align: left;
  margin-bottom: 12px;
}

.building-popup-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* ============================================
   RARITY COLORS
   ============================================ */

.rarity-common { color: var(--common); }
.rarity-uncommon { color: var(--uncommon); }
.rarity-rare { color: var(--rare); }
.rarity-epic { color: var(--epic); }
.rarity-legendary { color: var(--legendary); }
.rarity-mythic { color: var(--mythic); }

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes questProgress {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.quest-progress-fill {
  background: linear-gradient(90deg, var(--gold), #FFA500, var(--gold));
  background-size: 200% 100%;
}

@keyframes buildingComplete {
  0% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
  50% { box-shadow: 0 0 20px 4px var(--gold-glow); }
  100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
}

.building-card.complete {
  animation: buildingComplete 1s ease-out;
}

@keyframes combatHit {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.combat-hit {
  animation: combatHit 0.3s ease-out;
}

@keyframes levelUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
    transform: scale(1.1);
  }
  60% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Level up flash overlay */
.level-up-flash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  animation: levelUpGlow 1.2s ease-out forwards;
}

@keyframes levelUpGlow {
  0% { background: rgba(255,215,0,0.3); }
  100% { background: rgba(255,215,0,0); }
}

/* Loot drop notification */
/* Server loading overlay */
.gv-server-loading {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(5,3,15,0);
  opacity: 0;
  transition: opacity 0.3s ease;
  /* Non-blocking by default — the spinner is decorative while the queue
     in GVFunctions already serialises concurrent actions. Previously this
     was `all` and pinned the UI until the safety timer fired, which is why
     stalled server calls left mobile users staring at a frozen screen. */
  pointer-events: none;
}
.gv-server-loading.show {
  opacity: 1;
  background: rgba(5,3,15,0.35);
}
.gv-sl-spinner {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255,215,0,0.1);
  border-top-color: #FFD700;
  animation: gvSlSpin 0.7s linear infinite;
  will-change: transform;
}
.gv-sl-spinner::before,
.gv-sl-spinner::after { display: none; }
@keyframes gvSlSpin {
  to { transform: rotate(360deg); }
}
.gv-sl-glow {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.12) 0%, transparent 70%);
  animation: gvSlGlow 1.5s ease-in-out infinite;
}
@keyframes gvSlGlow {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.4); opacity: 1; }
}
/* Stall escape hatch — appears 4s into a hanging server call so the user
   can force a reload instead of hard-closing the tab. */
.gv-sl-reload {
  pointer-events: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  background: linear-gradient(180deg, rgba(255,215,0,0.16), rgba(255,140,0,0.12));
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 12px;
  color: #ffe58a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  animation: gvSlReloadIn 0.35s ease-out;
}
.gv-server-loading.stalled .gv-sl-reload { display: inline-flex; }
.gv-sl-reload-msg { color: #c8b57a; font-size: 11px; font-weight: 500; }
.gv-sl-reload-cta { color: #ffd700; font-size: 13px; font-weight: 800; }
.gv-sl-reload:hover,
.gv-sl-reload:active {
  background: linear-gradient(180deg, rgba(255,215,0,0.26), rgba(255,140,0,0.2));
  border-color: rgba(255,215,0,0.75);
}
@keyframes gvSlReloadIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.server-error-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(180,30,30,0.95);
  border: 1px solid rgba(255,80,80,0.4);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
  z-index: 300;
  animation: lootSlideUp 3s ease-out forwards;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(180,30,30,0.5);
  text-align: center;
}

.loot-notify {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-bright);
  z-index: 90;
  animation: lootSlideUp 2s ease-out forwards;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(10,5,25,0.5);
}

.loot-notify .loot-name {
  font-weight: 600;
}

.loot-notify .loot-name.common { color: var(--common); }
.loot-notify .loot-name.uncommon { color: var(--uncommon); }
.loot-notify .loot-name.rare { color: var(--rare); }
.loot-notify .loot-name.epic { color: var(--epic); }
.loot-notify .loot-name.legendary { color: var(--legendary); }
.loot-notify .loot-name.mythic { color: var(--mythic); }

@keyframes lootSlideUp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
}

/* ============================================
   UTILITY
   ============================================ */

.hidden {
  display: none !important;
}

.gold-text {
  color: var(--gold);
}

.text-dim {
  color: var(--text-dim);
}

.text-center {
  text-align: center;
}

.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-dim);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.empty-state-text {
  font-size: 14px;
  line-height: 1.5;
}

/* Prevent iOS zoom on input focus */
@supports (-webkit-touch-callout: none) {
  .name-input {
    font-size: 16px;
  }
}

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */

@media (max-width: 480px) {
  .class-grid {
    gap: 6px;
  }
  .class-card {
    padding: 10px 6px 8px;
  }
  .class-name {
    font-size: 12px;
    line-height: 1.15;
  }
  .class-desc {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .class-passive {
    font-size: 9px;
  }
}
@media (max-width: 359px) {
  .create-logo {
    font-size: 32px;
    letter-spacing: 4px;
  }
  .class-grid {
    gap: 4px;
  }
  .class-card {
    padding: 8px 4px;
  }
  .building-grid {
    gap: 8px;
  }
  .inv-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 480px) {
  .building-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .inv-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Create screen — same background as auth */
#createScreen {
  background: url('../img/create-bg.webp?v=2') center/cover no-repeat fixed !important;
  position: relative !important;
}

#createScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 8, 5, 0.45);
  z-index: 0;
}

#createScreen > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   Shop v2 — The Bazaar
   ============================================ */

/* --- Shop panel cave background --- */
#panelShop {
  background: url('../img/shop/bg-v2.webp?v=11.17.0') center center / cover no-repeat;
  background-color: #0d0820;
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
}

#panelShop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,5,25,0.78);
  pointer-events: none;
  z-index: 0;
}

#panelShop > * {
  position: relative;
  z-index: auto;
}

/* --- Top section: merchant + title --- */
.shop-top {
  position: relative;
  text-align: center;
  padding: 0 8px;
  margin-bottom: 12px;
  min-height: 130px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.shop-merchant-v2 {
  position: absolute;
  left: 8px;
  top: -4px;
  width: 140px;
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.8));
  z-index: 2;
  pointer-events: none;
}

.shop-title-block {
  text-align: center;
  padding-top: 12px;
}

.shop-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(255,215,0,0.3), 0 0 30px rgba(255,215,0,0.1);
  margin-bottom: 4px;
}

.shop-subtitle {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  margin-bottom: 10px;
}

.shop-currency-row {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.shop-cur-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}

.shop-cur-pill.gold { color: var(--gold); }
.shop-cur-pill.diamond { color: #6FD5FF; }

.shop-cur-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* --- Refresh row --- */
.shop-refresh-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 0 8px;
}

.shop-refresh-timer {
  font-size: 11px;
  color: var(--text-dim);
}

.shop-refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 6px;
  background: rgba(255,215,0,0.08);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s;
}

.shop-refresh-btn:hover {
  background: rgba(255,215,0,0.18);
}

.shop-refresh-cost {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  opacity: 0.85;
}

.shop-refresh-cost.free {
  color: #2ED573;
  font-weight: 700;
}

.shop-refresh-cost-icon {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

/* --- Item grid v2 (clean tiles) --- */
.shop-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 8px;
  box-sizing: border-box;
  width: 100%;
}

@media (max-width: 600px) {
  .shop-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .shop-merchant-v2 {
    width: 110px;
  }
  .shop-title {
    font-size: 22px;
  }
}
/* Mobile: ensure shop fits within viewport (no right cut-off) */
html.gv-port-mobile .shop-grid-v2 {
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}
html.gv-land-mobile .shop-grid-v2 {
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
}
html.gv-port-mobile .shop-tile,
html.gv-land-mobile .shop-tile {
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.shop-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px 10px;
  background: rgba(15,12,25,0.75);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  backdrop-filter: blur(4px);
}

.shop-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(255,215,0,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  z-index: 100;
  overflow: visible;
}

.shop-tile:active {
  transform: scale(0.97);
}

.shop-tile.sold {
  opacity: 0.25;
  pointer-events: none;
  filter: grayscale(0.6);
}

.shop-tile.sold::after {
  content: 'SOLD';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  letter-spacing: 4px;
  pointer-events: none;
}

.shop-tile-icon {
  margin-bottom: 8px;
}

.shop-tile .item-icon-wrap {
  background: rgba(0,0,0,0.3);
}

.shop-tile-name {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-bottom: 2px;
}

.shop-tile-slot {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.shop-tile-price-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}
.shop-tile-price-plus {
  color: rgba(255,255,255,0.3);
  font-size: 11px;
  margin: 0 1px;
}

.shop-tile-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 12px;
}

.shop-tile-price img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.shop-tile-price.gold { color: var(--gold); }
.shop-tile-price.diamond { color: #6FD5FF; }
.shop-tile-price.no-funds { color: var(--hp-red); opacity: 0.6; }

.shop-tile-sold-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 2px;
}

.shop-tile-diff {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

.shop-tile-diff.up {
  color: #2ED573;
  background: rgba(46,213,115,0.15);
}

.shop-tile-diff.down {
  color: #FF4757;
  background: rgba(255,71,87,0.15);
}
.shop-tile-diff.new {
  color: #64B5F6;
  background: rgba(100,181,246,0.15);
}

/* --- Daily Deal section --- */
.shop-daily-deal {
  max-width: 720px;
  margin: 0 auto 14px;
  padding: 16px 24px;
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
  text-align: center;
  z-index: 20;
}

.shop-daily-deal:hover {
  border-color: rgba(255,215,0,0.5);
  box-shadow: 0 0 20px rgba(255,215,0,0.1);
  overflow: visible;
}

/* (sdd-tooltip positioning handled by shared .shop-tile-tooltip rules) */

.sdd-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #FFD700, #FFB340);
  color: #1a1510;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 14px;
  border-radius: 10px;
  white-space: nowrap;
}

.sdd-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sdd-icon {
  flex-shrink: 0;
}

.sdd-info {
  text-align: center;
}

.sdd-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}

.sdd-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.sdd-price-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sdd-old-price {
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: line-through;
  opacity: 0.6;
}

.sdd-discount {
  font-size: 11px;
  font-weight: 700;
  color: #2ED573;
  background: rgba(46,213,115,0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.sdd-power-diff {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.sdd-power-diff.up {
  color: #2ED573;
  background: rgba(46,213,115,0.15);
}

.sdd-power-diff.down {
  color: #FF4757;
  background: rgba(255,71,87,0.15);
}
.sdd-sold { pointer-events: none; position: relative; }
.sdd-sold-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); border-radius: var(--radius);
}
.sdd-sold-text {
  font-family: var(--font-display); font-size: 28px; font-weight: 900;
  color: rgba(255,255,255,0.4); letter-spacing: 6px; text-transform: uppercase;
}

/* --- Best Value badge (bottom of tile) --- */
.shop-tile-best {
  margin-top: 6px;
  background: rgba(46,213,115,0.12);
  border: 1px solid rgba(46,213,115,0.3);
  border-radius: 4px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: #2ED573;
  letter-spacing: 1px;
  padding: 2px 8px;
}

/* --- Shop tile hover tooltip --- */
.shop-tile-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: rgba(12,8,28,0.97);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
}

.shop-tile-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255,215,0,0.25);
}

.shop-tile:hover .shop-tile-tooltip,
.shop-daily-deal:hover .shop-tile-tooltip {
  display: block;
}

/* First row of grid (items 1-3): tooltip goes DOWN */
.shop-grid-v2 > .shop-tile:nth-child(-n+3) .shop-tile-tooltip {
  bottom: auto;
  top: calc(100% + 8px);
}

.shop-grid-v2 > .shop-tile:nth-child(-n+3) .shop-tile-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(255,215,0,0.25);
}

/* Daily deal tooltip: goes DOWN */
.shop-daily-deal .shop-tile-tooltip {
  bottom: auto;
  top: calc(100% + 8px);
}

.shop-daily-deal .shop-tile-tooltip::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: rgba(255,215,0,0.25);
}

.stt-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.stt-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.stt-stats {
  margin-bottom: 8px;
}

.stt-stats .stat-row {
  font-size: 11px;
  padding: 1px 0;
}

.stt-stats .stat-group-header {
  font-size: 9px;
  margin-top: 4px;
}

.stt-power {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.stt-power-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.stt-power-diff {
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

.stt-power-diff.up { color: #2ED573; }
.stt-power-diff.down { color: #FF4757; }

.stt-vs {
  font-size: 9px;
  color: var(--text-dim);
  text-align: right;
  margin-top: 2px;
  font-style: italic;
}

.stt-stats .stat-arrow-up {
  color: #2ED573;
  font-size: 9px;
}

.stt-stats .stat-arrow-down {
  color: #FF4757;
  font-size: 9px;
}

@media (max-width: 600px) {
  .shop-tile-tooltip {
    display: none !important;
  }
}

/* ============================================================
   SHOP · HOLO GRID (active layout)
   Futuristic / cyberpunk tile grid. Icons + power diff. Hover
   tooltip reveals full details. Click opens the detail popup.
   ============================================================ */
.shop-holo-header {
  max-width: 1180px;
  margin: 8px auto 8px;
  padding: 0 12px;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd47a;
  text-align: left;
  text-shadow: 0 0 8px rgba(255,215,140,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-holo-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,215,140,0.35), transparent);
}
.shop-holo-sep {
  max-width: 1180px;
  margin: 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.3), transparent);
}
.shop-holo {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  padding: 0 8px 16px;
  width: 100%;
  box-sizing: border-box;
}
/* Daily Deal = one featured tile, narrow box centered at top. */
.shop-holo.shop-holo-daily {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 260px !important;
  padding-bottom: 0;
}
.shop-holo.shop-holo-daily .sh-slot {
  aspect-ratio: 4 / 3;
  padding: 28px 10px 10px;
  gap: 5px;
  justify-content: center;
}
.shop-holo.shop-holo-daily .sh-slot-icon { width: 42%; }
.shop-holo.shop-holo-daily .sh-pwr { font-size: 13px; }
.shop-holo.shop-holo-daily .sh-price { font-size: 12px; }
.shop-holo.shop-holo-daily .sh-price-part img { width: 13px; height: 13px; }
/* Regular stock — FIXED 5 columns, compact tiles. Max-width limits
   total grid so tiles stay ~130px (not stretched full-width). */
.shop-holo.shop-holo-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  max-width: 780px;
}
/* Responsive fallback — collapse to fewer columns on narrow screens */
@media (max-width: 899px) {
  .shop-holo.shop-holo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 640px;
  }
}
@media (max-width: 639px) {
  .shop-holo.shop-holo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 480px;
  }
}
@media (max-width: 439px) {
  .shop-holo.shop-holo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 320px;
  }
}
/* Match headers/separator to the grid width so they align */
.shop-holo-header, .shop-holo-sep { max-width: 780px; }
@media (max-width: 899px) {
  .shop-holo-header, .shop-holo-sep { max-width: 640px; }
}
@media (max-width: 639px) {
  .shop-holo-header, .shop-holo-sep { max-width: 480px; }
}
@media (max-width: 439px) {
  .shop-holo-header, .shop-holo-sep { max-width: 320px; }
}
/* Tighten tile internals for the new smaller size */
.shop-holo.shop-holo-grid .sh-slot {
  padding: 10px 4px 6px;
  gap: 3px;
}
.shop-holo.shop-holo-grid .sh-slot-icon { width: 72%; }
.shop-holo.shop-holo-grid .sh-pwr { font-size: 11px; letter-spacing: 1px; }
.shop-holo.shop-holo-grid .sh-price { font-size: 10px; }
.shop-holo.shop-holo-grid .sh-price-part img { width: 11px; height: 11px; }
.sh-slot {
  position: relative;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,229,255,0.06), transparent 70%),
    linear-gradient(180deg, rgba(0,50,80,0.2) 0%, rgba(0,18,36,0.55) 100%);
  border: 1px solid rgba(0,229,255,0.4);
  clip-path: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px 8px;
  cursor: pointer;
  transition: all .15s;
  overflow: hidden;
}
.sh-slot::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.2), transparent);
  animation: shSweep 3.5s linear infinite;
  pointer-events: none;
}
@keyframes shSweep { 0% { left: -100%; } 60% { left: 100%; } 100% { left: 100%; } }
.sh-slot:hover {
  background:
    radial-gradient(circle at 50% 30%, rgba(0,229,255,0.12), transparent 70%),
    linear-gradient(180deg, rgba(0,100,160,0.4) 0%, rgba(0,30,60,0.7) 100%);
  border-color: rgba(0,255,255,0.9);
  box-shadow: 0 0 22px rgba(0,229,255,0.55), inset 0 0 14px rgba(0,229,255,0.25);
  transform: translateY(-2px);
}
.sh-slot.sold {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.sh-slot.sold::before { display: none; }
.sh-slot-icon {
  position: relative;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 70%;
  aspect-ratio: 1;
  flex-shrink: 0;
}
.sh-slot .sh-slot-icon .item-icon-wrap {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.sh-slot .sh-slot-icon .item-icon-wrap::before,
.sh-slot .sh-slot-icon .item-icon-wrap::after { display: none !important; }
.sh-slot .sh-slot-icon .item-icon-wrap .item-img {
  width: 100% !important; height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(0,229,255,0.35));
}
.sh-slot .sh-slot-icon .item-lvl-badge { display: none !important; }
.sh-slot .sh-codex-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  background: #14091f;
  border: 1px solid #ffd47a;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.sh-slot .sh-codex-dot img { width: 12px; height: 12px; object-fit: contain; }
.sh-slot .sh-pwr {
  position: relative;
  z-index: 1;
  font-family: 'Courier New', monospace;
  font-size: 13px; font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-top: 4px;
}
.sh-slot .sh-pwr.new { color: #00e5ff; text-shadow: 0 0 6px rgba(0,229,255,0.7); }
.sh-slot .sh-pwr.up { color: #5ED87A; text-shadow: 0 0 6px rgba(94,216,122,0.7); }
.sh-slot .sh-pwr.down { color: #ff6b6b; text-shadow: 0 0 6px rgba(255,107,107,0.7); }
.sh-slot .sh-pwr.neutral { color: #999; }
.sh-slot .sh-pwr.sold { color: #555; }
.sh-slot .sh-price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 800;
  line-height: 1;
  color: #ffd47a;
  letter-spacing: 0.5px;
}
.sh-slot .sh-price-part { display: inline-flex; align-items: center; gap: 3px; }
.sh-slot .sh-price-part img { width: 12px; height: 12px; }
.sh-slot .sh-price-part.gold { color: #ffd47a; }
.sh-slot .sh-price-part.diamond { color: #7ecdff; }
.sh-slot .sh-price-part.nofunds { color: #ff6b6b; }
.sh-slot .sh-price-plus { color: rgba(255,255,255,0.55); font-size: 10px; }

/* ── Rarity theming ──
   Full tile recolour per rarity: background, sweep, border, glow, price.
   Each tier feels visibly different so the grid reads at a glance. */

/* COMMON — grey steel */
.sh-slot.r-common {
  background:
    radial-gradient(circle at 50% 30%, rgba(180,180,180,0.08), transparent 70%),
    linear-gradient(180deg, rgba(50,50,55,0.35) 0%, rgba(20,20,25,0.6) 100%);
  border-color: rgba(180,180,180,0.5);
}
.sh-slot.r-common::before {
  background: linear-gradient(90deg, transparent, rgba(200,200,200,0.15), transparent);
}
.sh-slot.r-common:hover {
  border-color: rgba(220,220,220,0.9);
  box-shadow: 0 0 14px rgba(200,200,200,0.35), inset 0 0 10px rgba(200,200,200,0.1);
}
.sh-slot.r-common .sh-slot-icon .item-img { filter: drop-shadow(0 0 6px rgba(200,200,200,0.3)); }

/* UNCOMMON — green */
.sh-slot.r-uncommon {
  background:
    radial-gradient(circle at 50% 30%, rgba(94,216,122,0.1), transparent 70%),
    linear-gradient(180deg, rgba(20,70,35,0.3) 0%, rgba(8,25,14,0.65) 100%);
  border-color: rgba(94,216,122,0.6);
}
.sh-slot.r-uncommon::before {
  background: linear-gradient(90deg, transparent, rgba(94,216,122,0.22), transparent);
}
.sh-slot.r-uncommon:hover {
  border-color: rgba(120,240,150,1);
  box-shadow: 0 0 20px rgba(94,216,122,0.6), inset 0 0 12px rgba(94,216,122,0.2);
}
.sh-slot.r-uncommon .sh-slot-icon .item-img { filter: drop-shadow(0 0 8px rgba(94,216,122,0.4)); }

/* RARE — electric blue */
.sh-slot.r-rare {
  background:
    radial-gradient(circle at 50% 30%, rgba(79,172,254,0.12), transparent 70%),
    linear-gradient(180deg, rgba(20,60,110,0.35) 0%, rgba(6,20,40,0.7) 100%);
  border-color: rgba(79,172,254,0.7);
}
.sh-slot.r-rare::before {
  background: linear-gradient(90deg, transparent, rgba(79,172,254,0.28), transparent);
}
.sh-slot.r-rare:hover {
  border-color: rgba(130,200,255,1);
  box-shadow: 0 0 22px rgba(79,172,254,0.7), inset 0 0 14px rgba(79,172,254,0.25);
}
.sh-slot.r-rare .sh-slot-icon .item-img { filter: drop-shadow(0 0 8px rgba(79,172,254,0.5)); }
.sh-slot.r-rare .sh-price { color: #9fd8ff; }

/* EPIC — violet */
.sh-slot.r-epic {
  background:
    radial-gradient(circle at 50% 30%, rgba(191,95,255,0.14), transparent 70%),
    linear-gradient(180deg, rgba(60,25,100,0.4) 0%, rgba(20,8,40,0.75) 100%);
  border-color: rgba(191,95,255,0.75);
  box-shadow: 0 0 10px rgba(191,95,255,0.2);
}
.sh-slot.r-epic::before {
  background: linear-gradient(90deg, transparent, rgba(191,95,255,0.3), transparent);
}
.sh-slot.r-epic:hover {
  border-color: rgba(220,140,255,1);
  box-shadow: 0 0 24px rgba(191,95,255,0.7), inset 0 0 14px rgba(191,95,255,0.25);
}
.sh-slot.r-epic .sh-slot-icon .item-img { filter: drop-shadow(0 0 10px rgba(191,95,255,0.6)); }
.sh-slot.r-epic .sh-price { color: #d8b0ff; }

/* LEGENDARY — warm gold/orange */
.sh-slot.r-legendary {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,179,64,0.16), transparent 70%),
    linear-gradient(180deg, rgba(90,50,10,0.45) 0%, rgba(30,16,4,0.8) 100%);
  border-color: rgba(255,179,64,0.8);
  box-shadow: 0 0 14px rgba(255,179,64,0.3);
}
.sh-slot.r-legendary::before {
  background: linear-gradient(90deg, transparent, rgba(255,215,140,0.35), transparent);
}
.sh-slot.r-legendary:hover {
  border-color: rgba(255,220,140,1);
  box-shadow: 0 0 28px rgba(255,179,64,0.8), inset 0 0 16px rgba(255,179,64,0.3);
}
.sh-slot.r-legendary .sh-slot-icon .item-img { filter: drop-shadow(0 0 12px rgba(255,179,64,0.65)); }
.sh-slot.r-legendary .sh-price { color: #ffd890; }

/* MYTHIC — crimson / rose */
.sh-slot.r-mythic {
  background:
    radial-gradient(circle at 50% 30%, rgba(255,71,87,0.18), transparent 70%),
    linear-gradient(180deg, rgba(90,15,28,0.5) 0%, rgba(35,6,12,0.85) 100%);
  border-color: rgba(255,71,87,0.85);
  box-shadow: 0 0 14px rgba(255,71,87,0.35);
  animation: shMythicPulse 2.4s ease-in-out infinite;
}
@keyframes shMythicPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255,71,87,0.35); }
  50%      { box-shadow: 0 0 22px rgba(255,71,87,0.7), inset 0 0 10px rgba(255,71,87,0.2); }
}
.sh-slot.r-mythic::before {
  background: linear-gradient(90deg, transparent, rgba(255,120,130,0.4), transparent);
}
.sh-slot.r-mythic:hover {
  border-color: rgba(255,150,160,1);
  box-shadow: 0 0 28px rgba(255,71,87,0.8), inset 0 0 16px rgba(255,71,87,0.3);
}
.sh-slot.r-mythic .sh-slot-icon .item-img { filter: drop-shadow(0 0 12px rgba(255,71,87,0.7)); }
.sh-slot.r-mythic .sh-price { color: #ff9a9a; }

/* Ribbons (daily deal / best upgrade) */
.sh-slot .sh-ribbon {
  position: absolute;
  top: 10px; left: -1px;
  z-index: 3;
  padding: 2px 10px 2px 14px;
  font-family: 'Cinzel', serif;
  font-size: 8px; font-weight: 900;
  letter-spacing: 1.5px; text-transform: uppercase;
  line-height: 1.4;
  color: #1a0e0e;
  white-space: nowrap;
}
.sh-slot .sh-ribbon.daily {
  background: linear-gradient(90deg, #ffd47a, #c89a4a);
  box-shadow: 0 2px 6px rgba(255,180,60,0.45);
}
.sh-slot .sh-ribbon.best {
  background: linear-gradient(90deg, #5ED87A, #2ea84a);
  color: #04200b;
  box-shadow: 0 2px 6px rgba(94,216,122,0.45);
}

/* Daily deal slot glow */
.sh-slot.daily { border-color: #ffd47a; box-shadow: 0 0 18px rgba(255,215,0,0.3); }
.sh-slot.daily:hover { box-shadow: 0 0 28px rgba(255,215,0,0.6), inset 0 0 14px rgba(255,215,140,0.25); }
.sh-slot.best { border-color: #5ED87A; box-shadow: 0 0 16px rgba(94,216,122,0.35); }
.sh-slot.best:hover { box-shadow: 0 0 24px rgba(94,216,122,0.65), inset 0 0 14px rgba(94,216,122,0.2); }

/* ── Hover tooltip ── */
.sh-tt {
  position: fixed;
  display: none;
  pointer-events: none;
  z-index: 9999;
  min-width: 220px; max-width: 300px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(28,20,50,0.98), rgba(14,10,30,0.99));
  border: 1px solid rgba(0,229,255,0.5);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 20px rgba(0,229,255,0.2);
  font-family: 'Inter', sans-serif;
  color: #e9e4f5;
}
.sh-tt-name {
  font-family: 'Cinzel', serif;
  font-size: 14px; font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.sh-tt-rar {
  font-size: 9px; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.85;
}
.sh-tt-stats {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
}
.sh-tt-div {
  height: 1px;
  background: rgba(0,229,255,0.2);
  margin: 6px 0;
}
.sh-tt-pwr {
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 14px; font-weight: 900;
  letter-spacing: 1.5px;
  padding: 2px 0;
}
.sh-tt-pwr.new { color: #00e5ff; }
.sh-tt-pwr.up { color: #5ED87A; }
.sh-tt-pwr.down { color: #ff6b6b; }
.sh-tt-pwr.neutral { color: #999; }
.sh-tt-price {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 13px; font-weight: 800;
  color: #ffd47a;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sh-tt-price img { width: 14px; height: 14px; }
.sh-tt-plus { color: rgba(255,255,255,0.6); margin: 0 2px; }
.sh-tt-hint {
  margin-top: 6px;
  text-align: center;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1px; text-transform: uppercase;
}

/* ============================================================
   SHOP STALLS (legacy Variant A — kept for compat; .shop-holo
   above is the active layout)
   ============================================================ */
.shop-stalls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}
/* Single column below the breakpoint where cards would get too cramped */
@media (max-width: 900px) {
  .shop-stalls { grid-template-columns: 1fr; max-width: 760px; }
}
.shop-stall {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr minmax(130px, auto);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(20,14,38,0.92), rgba(10,6,22,0.96));
  border: 1px solid var(--ss-bc, rgba(120,95,165,0.22));
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.shop-stall:hover {
  border-color: var(--ss-hc, rgba(255,216,144,0.5));
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 16px var(--ss-glow, rgba(255,216,144,0.15));
}
.shop-stall.sold { opacity: 0.45; cursor: default; }
.shop-stall.sold:hover { transform: none; }

/* Daily deal stall — gold glow + ribbon */
.shop-stall-daily {
  background: linear-gradient(135deg, rgba(255,216,144,0.14), rgba(180,100,20,0.1)), linear-gradient(180deg, rgba(30,20,55,0.95), rgba(18,10,40,0.98));
  border: 1.5px solid rgba(255,216,144,0.55);
  box-shadow: 0 6px 24px rgba(255,140,40,0.18), inset 0 1px 0 rgba(255,216,144,0.1);
  margin-bottom: 4px;
}
.shop-stall-daily:hover {
  border-color: rgba(255,216,144,0.85);
  box-shadow: 0 8px 28px rgba(255,140,40,0.3), inset 0 1px 0 rgba(255,216,144,0.15);
}
.ss-daily-ribbon {
  position: absolute;
  top: -9px;
  left: 16px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #ffd890, #ff8c00);
  color: #1a0e0e;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(255,140,40,0.4);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Best upgrade ribbon */
.shop-stall.best {
  border-color: rgba(46,213,115,0.55);
  box-shadow: 0 4px 16px rgba(46,213,115,0.2);
}
.ss-best-ribbon {
  position: absolute;
  top: -9px;
  right: 16px;
  padding: 3px 10px;
  background: linear-gradient(135deg, #2ed573, #1a8f3a);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(46,213,115,0.4);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Item icon cell */
.ss-icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(30,20,50,0.3));
  border: 2px solid var(--ss-ic, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px var(--ss-iglow, transparent);
  flex-shrink: 0;
}
.ss-icon .item-icon-wrap,
.ss-icon > div {
  margin: 0 !important;
}
.ss-icon img { display: block; }
.ss-icon .item-icon-wrap img,
.ss-icon > div img {
  max-width: 58px;
  max-height: 58px;
  object-fit: contain;
}

.ss-codex-dot {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,215,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(255,215,0,0.5);
  z-index: 2;
}
.ss-codex-dot img { width: 13px; height: 13px; }

/* Per-rarity colors on stall + icon */
.shop-stall.r-common    { --ss-ic:#888; --ss-iglow: rgba(150,150,150,0.22); --ss-bc:rgba(150,150,150,0.22); --ss-hc:#bbb; --ss-glow: rgba(150,150,150,0.18); }
.shop-stall.r-uncommon  { --ss-ic:#1eff00; --ss-iglow: rgba(30,255,0,0.3); --ss-bc:rgba(30,200,30,0.28); --ss-hc:#1eff00; --ss-glow: rgba(30,255,0,0.2); }
.shop-stall.r-rare      { --ss-ic:#0070dd; --ss-iglow: rgba(0,112,221,0.4); --ss-bc:rgba(0,112,221,0.32); --ss-hc:#4fb0ff; --ss-glow: rgba(0,112,221,0.25); }
.shop-stall.r-epic      { --ss-ic:#a335ee; --ss-iglow: rgba(163,53,238,0.45); --ss-bc:rgba(163,53,238,0.38); --ss-hc:#c77afc; --ss-glow: rgba(163,53,238,0.28); }
.shop-stall.r-legendary { --ss-ic:#ff8000; --ss-iglow: rgba(255,128,0,0.5); --ss-bc:rgba(255,128,0,0.42); --ss-hc:#ffa040; --ss-glow: rgba(255,128,0,0.32); }
.shop-stall.r-mythic    { --ss-ic:#ff4444; --ss-iglow: rgba(255,68,68,0.55); --ss-bc:rgba(255,68,68,0.48); --ss-hc:#ff5050; --ss-glow: rgba(255,68,68,0.38); }
.ss-icon.r-common    { --ss-ic:#888; --ss-iglow: rgba(150,150,150,0.22); }
.ss-icon.r-uncommon  { --ss-ic:#1eff00; --ss-iglow: rgba(30,255,0,0.3); }
.ss-icon.r-rare      { --ss-ic:#0070dd; --ss-iglow: rgba(0,112,221,0.4); }
.ss-icon.r-epic      { --ss-ic:#a335ee; --ss-iglow: rgba(163,53,238,0.45); }
.ss-icon.r-legendary { --ss-ic:#ff8000; --ss-iglow: rgba(255,128,0,0.5); }
.ss-icon.r-mythic    { --ss-ic:#ff4444; --ss-iglow: rgba(255,68,68,0.55); }

/* Info column */
.ss-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ss-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ss-chip {
  padding: 1px 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: #9088a8;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ss-chip-r-common    { color: #c8c8c8; border-color: rgba(180,180,180,0.3); }
.ss-chip-r-uncommon  { color: #5cff5c; border-color: rgba(30,255,0,0.35); }
.ss-chip-r-rare      { color: #4fb0ff; border-color: rgba(0,112,221,0.45); }
.ss-chip-r-epic      { color: #c77afc; border-color: rgba(163,53,238,0.5); }
.ss-chip-r-legendary { color: #ffa040; border-color: rgba(255,128,0,0.55); }
.ss-chip-r-mythic    { color: #ff5050; border-color: rgba(255,68,68,0.55); }

.ss-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ss-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}
.ss-stat-name {
  color: #a599c9;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ss-stat-val { color: #fff; }
.ss-diff {
  font-size: 10px;
  font-weight: 900;
  margin-left: 2px;
}
.ss-diff.up { color: #4cd964; }
.ss-diff.down { color: #ff4757; }

/* Price column */
.ss-price-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 130px;
}
.ss-pwr {
  text-align: center;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
  text-transform: uppercase;
}
.ss-pwr.up { color: #4cd964; background: rgba(76,217,100,0.12); border: 1px solid rgba(76,217,100,0.3); }
.ss-pwr.down { color: #ff4757; background: rgba(255,71,87,0.12); border: 1px solid rgba(255,71,87,0.3); }
.ss-pwr.neutral { color: #888; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.ss-pwr.new { color: #4facfe; background: rgba(79,172,254,0.12); border: 1px solid rgba(79,172,254,0.3); }

.ss-buy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 12px;
  border-radius: 9px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s;
  pointer-events: none; /* entire stall is clickable */
  white-space: nowrap;
}
.ss-buy.gold {
  background: linear-gradient(180deg, #ffd890, #c89a4e);
  color: #1a1410;
  border-color: rgba(255,216,144,0.6);
  box-shadow: 0 3px 10px rgba(255,140,40,0.2);
}
.ss-buy.diamond {
  background: linear-gradient(180deg, #c39dff, #8046d9);
  color: #fff;
  border-color: rgba(170,100,240,0.55);
  box-shadow: 0 3px 10px rgba(140,80,220,0.25);
}
.ss-buy.mix {
  background: linear-gradient(180deg, #ffd890, #c89a4e);
  color: #1a1410;
  border-color: rgba(255,216,144,0.6);
  font-size: 12px;
  padding: 8px 10px;
}
.ss-buy.nofunds {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.ss-buy-ico { width: 14px; height: 14px; object-fit: contain; }
.ss-buy-old {
  text-decoration: line-through;
  color: rgba(30,20,10,0.55);
  font-size: 11px;
  margin-right: 3px;
  font-weight: 700;
}
.ss-buy.diamond .ss-buy-old { color: rgba(255,255,255,0.55); }
.ss-buy-plus {
  font-weight: 900;
  opacity: 0.7;
  margin: 0 2px;
}

.ss-sold-label {
  padding: 10px 14px;
  color: #777;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 3px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  text-align: center;
  text-transform: uppercase;
}

/* Mobile: stack icon + info on first row, price col full-width below */
@media (max-width: 560px) {
  .shop-stall {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 10px 10px;
    padding: 10px 12px;
  }
  .ss-icon {
    width: 56px;
    height: 56px;
  }
  .ss-icon .item-icon-wrap img,
  .ss-icon > div img {
    max-width: 46px;
    max-height: 46px;
  }
  .ss-price-col {
    grid-column: 1 / -1;
    flex-direction: row;
    min-width: 0;
    gap: 8px;
  }
  .ss-pwr { flex: 1; }
  .ss-buy { flex: 1.3; }
  .ss-sold-label { flex: 1; }
  .ss-name { font-size: 14px; }
  .ss-stat-chip { font-size: 10.5px; }
  .ss-daily-ribbon, .ss-best-ribbon { font-size: 9px; padding: 2px 8px; }
}

/* --- Shop popup (item detail modal) --- */
.shop-popup {
  text-align: center;
}

.shop-popup-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.shop-popup-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}

.shop-popup-type {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.shop-popup-stats {
  text-align: left;
  margin-bottom: 12px;
}

.shop-popup-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}

.shop-price-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.shop-error {
  color: var(--hp-red);
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Buy button v2 — golden graphic */
.shop-buy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 28px; border: none; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 800; letter-spacing: 0.5px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1a2e; box-shadow: 0 4px 15px rgba(255,215,0,0.3);
  transition: transform 0.12s, box-shadow 0.2s;
}
.shop-buy-btn:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(255,215,0,0.4); }
.shop-buy-btn:active { transform: scale(0.96); }
.shop-buy-btn:disabled {
  opacity: 0.35; cursor: not-allowed; filter: grayscale(0.5);
}
}

/* --- Shop comparison grid --- */
.shop-compare-header {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin: 8px 0 4px;
  font-weight: 600;
}

.shop-compare-grid {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.shop-compare-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 2px 0;
}

.shop-compare-row span:first-child {
  color: var(--text-dim);
}

/* Legacy stat classes kept for other uses */
.stat-atk { color: #ff6b6b !important; }
.stat-def { color: #4FACFE !important; }
.stat-hp { color: #2ecc71 !important; }
.stat-crit { color: #FFB340 !important; }
.stat-speed { color: #1E90FF !important; }
.stat-block { color: #4FACFE !important; }

/* ============================================
   ITEM NAME PARTS (prefix/suffix styling)
   ============================================ */
.item-prefix {
  opacity: 0.8;
}

.item-suffix {
  color: var(--gold-dim);
  font-style: italic;
  font-size: 0.9em;
}

/* ============================================
   FLAT + PCT DISPLAY IN STATS TAB
   ============================================ */
.stat-flat-pct {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: 4px;
}

/* Stat breakdown tooltip indicator */
.stats-has-tip {
  cursor: help;
  position: relative;
}

.stats-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  margin-left: 3px;
  vertical-align: middle;
}

.stats-has-tip:hover .stats-info {
  background: rgba(255,215,0,0.2);
  color: var(--gold);
}

/* ============================================
   Equipment Right Panel
   ============================================ */
.equip-panel-title {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
}

.equip-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.equip-panel-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.equip-panel-slot:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.equip-panel-slot.filled {
  border-color: var(--border-strong);
}

.equip-panel-label {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 3px;
  text-align: center;
}

.equip-panel-empty {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.equip-panel-empty svg {
  width: 28px;
  height: 28px;
  color: var(--text-dim);
  opacity: 0.15;
}

/* Equipment tooltip */
.equip-tooltip {
  position: fixed;
  z-index: 600;
  background: rgba(15,10,30,0.95);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 8px;
  padding: 10px 12px;
  max-width: 220px;
  pointer-events: none;
  display: none;
}

.equip-tt-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.equip-tt-type {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.equip-tt-stat {
  font-size: 12px;
  font-weight: 600;
  padding: 1px 0;
}

.equip-tt-power {
  font-size: 11px;
  color: var(--gold);
  margin-top: 4px;
  font-weight: 600;
}

/* ── Unified Stat Rows (items, shop, compare) ── */
.stat-rows { width: 100%; }

.stat-group-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(200,168,78,0.5);
  padding: 8px 0 3px;
  margin-top: 2px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.stat-row:last-child { border-bottom: none; }

.stat-label {
  color: #a0a8bc;
  font-weight: 500;
}

.stat-value {
  font-weight: 700;
  color: #e8d5a3;
}

.stat-value-pos { color: #e8d5a3; }
.stat-value-neg { color: #ff6b6b; }

.stat-arrow-up { color: #5ED87A; font-size: 10px; }
.stat-arrow-down { color: #FF4757; font-size: 10px; }

/* Compact mode for tooltips */
.stat-rows.compact .stat-group-header { padding: 5px 0 2px; font-size: 9px; }
.stat-rows.compact .stat-row { font-size: 11px; padding: 2px 0; }

/* Inventory open button (desktop left sidebar) */
.inv-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 8px;
}

.inv-open-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.inv-open-btn .inv-count-badge {
  color: var(--text-dim);
  font-size: 11px;
}

/* Inventory modal */
.inv-modal {
  max-height: 80vh;
  overflow-y: auto;
}

.inv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.inv-modal-header .section-title {
  margin-bottom: 0;
}

.inv-modal-header .inv-count {
  color: var(--text-dim);
  font-size: 12px;
}

/* Equip panel drag-drop support */
.equip-panel-slot.drop-valid {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255,215,0,0.3);
}

.equip-panel-slot.drop-hover {
  border-color: var(--gold);
  background: rgba(255,215,0,0.1);
  box-shadow: 0 0 12px rgba(255,215,0,0.5);
}

/* Hero equipment strip (right column in profile) */
/* Equipment grid (4x2) inside profile card */
.hero-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 10px 0 8px;
}

.hero-eq-slot {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.hero-eq-slot:hover {
  border-color: var(--gold);
  background: var(--surface-hover);
  transform: scale(1.08);
  z-index: 2;
}

.hero-eq-slot.filled:hover {
  box-shadow: 0 0 10px rgba(255,215,0,0.2);
}

.hero-eq-slot.empty {
  background: linear-gradient(135deg, rgba(30,20,60,0.8), rgba(20,15,40,0.9)); border-style: dashed;
  opacity: 0.6;
}

.hero-inv-icon-img {
  width: 20px;
  height: 24px;
  object-fit: contain;
}

.hero-eq-label {
  font-size: 8px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Equipment hover tooltip */
.equip-hover-tt {
  position: fixed;
  z-index: 600;
  background: rgba(15,10,30,0.97);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 12px;
  padding: 16px;
  width: 280px;
  pointer-events: none;
  display: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 15px rgba(140,120,255,0.1);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
}

.equip-hover-tt .ett-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.equip-hover-tt .ett-type {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.equip-hover-tt .ett-stat {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 0;
}

.equip-hover-tt .ett-power {
  font-size: 10px;
  color: var(--gold);
  margin-top: 4px;
  font-weight: 600;
}

/* Item power badge - separated from stats */
.item-power-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 10px 0 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(191,95,255,0.06));
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
}

.item-power-badge-val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
}

.item-power-badge-label {
  font-size: 9px;
  color: var(--gold-dim);
  font-weight: 600;
  letter-spacing: 2px;
}

.item-power-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* Item Level badge — visually separated from stats */
.idc-ilvl {
  text-align: center;
  font-size: 11px;
  color: rgba(160,168,188,0.7);
  margin: 4px 0 2px;
  letter-spacing: 0.5px;
}

.idc-ilvl-num {
  font-weight: 700;
  color: #a0a8bc;
  font-size: 13px;
}

/* Item Detail Card (shared layout for all item popups) */
.idc-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.item-popup-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
}

.item-basename {
  color: var(--text-bright);
}

.item-prefix {
  opacity: 0.85;
}

.item-suffix {
  color: var(--gold-dim);
  font-style: italic;
  font-size: 0.85em;
}

.idc-type {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 12px;
}

.idc-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  margin: 10px 0;
}

.idc-divider-thin {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 6px 0;
}

.idc-stat {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
}

.idc-stat-primary {
  font-size: 14px;
  font-weight: 700;
}

.idc-bonus {
  font-style: italic;
  opacity: 0.9;
}

/* Hero name row with settings */
.hero-profile-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.hero-settings-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
  line-height: 1;
}

.hero-settings-btn:hover {
  color: var(--gold);
  background: rgba(255,215,0,0.15);
  border-color: rgba(255,215,0,0.3);
}

/* Inventory button under equipment strip */
.hero-inv-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  font-family: var(--font-body);
}

.hero-inv-btn:hover {
  background: var(--surface-hover);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(255,215,0,0.15);
}

.hero-inv-icon {
  font-size: 14px;
}

.hero-inv-count {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 600;
  writing-mode: horizontal-tb;
}

/* Settings modal */
.settings-section {
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 10px;
}

.settings-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 12px;
}

.settings-row:last-child {
  border-bottom: none;
}

.settings-label {
  color: var(--text-dim);
}

.settings-value {
  font-weight: 600;
  color: var(--text);
}

.settings-btns {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.settings-btn {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.15s;
  min-height: 36px;
}

.settings-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--border-strong);
}

.settings-btn-primary {
  background: rgba(79,172,254,0.15);
  border-color: rgba(79,172,254,0.3);
  color: #4FACFE;
}

.settings-btn-primary:hover {
  background: rgba(79,172,254,0.25);
}

.settings-btn-danger {
  background: rgba(255,71,87,0.1);
  border-color: rgba(255,71,87,0.25);
  color: #FF4757;
}

.settings-btn-danger:hover {
  background: rgba(255,71,87,0.2);
}

.settings-danger {
  border-color: rgba(255,71,87,0.15);
}

/* Settings toggle switch */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  user-select: none;
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-row .settings-label { flex: 1; }
.settings-toggle-row input { display: none; }
.settings-toggle {
  width: 40px;
  height: 22px;
  background: rgba(255,255,255,0.1);
  border-radius: 11px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.settings-toggle::after {
  content: '';
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s, background 0.2s;
}
.settings-cb:checked + .settings-toggle {
  background: rgba(46,213,115,0.3);
}
.settings-cb:checked + .settings-toggle::after {
  transform: translateX(18px);
  background: #2ED573;
}

.settings-modal { text-align: left; }

/* Sound settings sliders */
.snd-slider-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.snd-slider-row:last-child { border-bottom: none; }
.snd-slider-row .settings-label { min-width: 50px; flex-shrink: 0; }
.snd-slider-val { min-width: 36px; text-align: right; font-size: 12px; color: #FFD700; font-weight: 700; }
.snd-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.08); outline: none;
}
.snd-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #c89a4e);
  border: 2px solid rgba(255,215,0,0.4);
  cursor: pointer; box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.snd-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #c89a4e);
  border: 2px solid rgba(255,215,0,0.4);
  cursor: pointer; box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.snd-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; }
.snd-slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); }

/* Sound track selector */
.snd-track-list { display: flex; flex-direction: column; gap: 6px; }
.snd-track-btn {
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #aaa; font-size: 13px; font-weight: 600; text-align: left;
  font-family: var(--font-body); transition: all 0.2s;
}
.snd-track-btn:hover { background: rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.15); color: #ccc; }
.snd-track-active {
  background: rgba(255,215,0,0.12) !important; border-color: rgba(255,215,0,0.35) !important;
  color: #FFD700 !important; font-weight: 800;
}

/* Sound welcome overlay */
.snd-welcome-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s;
  padding: 20px;
}
.snd-welcome-card {
  background: linear-gradient(160deg, rgba(30,22,50,0.98), rgba(15,10,30,0.99));
  border: 1px solid rgba(255,215,0,0.2); border-radius: 18px;
  padding: 28px 24px; max-width: 360px; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.snd-welcome-card .settings-section {
  text-align: left; margin-top: 8px;
}
.snd-welcome-card #sndMuteToggle { display: none; }
.snd-welcome-card .settings-toggle-row:has(#sndMuteToggle) {
  display: flex;
}
.snd-welcome-card #sndMuteToggle + .settings-toggle {
  display: block;
}

/* Inventory button layout */
.hero-inv-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.hero-inv-count-sub {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 400;
}

/* Inventory notification badge */
.hero-inv-notif {
  background: #FF4757;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-left: auto;
  box-shadow: 0 0 6px rgba(255,71,87,0.5);
  animation: notifPulse 2s ease-in-out infinite;
}

@keyframes notifPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(255,71,87,0.3); }
  50% { box-shadow: 0 0 10px rgba(255,71,87,0.6); }
}

/* Shop tile icon drop-shadow */
.shop-tile .item-img {
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Legacy shop-card-power kept for compat */
.shop-card-power-label {
  color: var(--gold-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* (old shop-card icon styles removed — using shop-tile with rarity frames) */

/* ---------- Floating Message Toast ---------- */
.gv-floating-msg {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.gv-floating-msg.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Veil War VP gain toast — appears below the normal toast row with faction colours */
.gv-floating-msg.gv-fm-veil {
  top: 110px;
  background: linear-gradient(180deg, rgba(24,14,48,0.95), rgba(12,6,24,0.98));
  color: #ffd890;
  border: 1px solid rgba(200,168,78,0.5);
  box-shadow: 0 4px 20px rgba(200,168,78,0.25), 0 0 16px rgba(168,85,247,0.2);
  font-family: 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 8px 20px;
  font-size: 13px;
}
.gv-floating-msg.gv-fm-veil::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  margin-right: 6px;
  vertical-align: -3px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, #ffe6a8 0%, #c8a84e 100%) 0 0 / 100% 50% no-repeat,
    linear-gradient(135deg, #d5b1ff 0%, #7a3fd6 100%) 0 100% / 100% 50% no-repeat;
  box-shadow: 0 0 6px rgba(200,168,78,0.5), 0 0 6px rgba(168,85,247,0.4);
}

/* Defense Toast Notification */
.defense-toast {
  position: fixed;
  top: 70px;
  right: -400px;
  width: 320px;
  max-width: 90vw;
  background: rgba(15,10,25,0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 9998;
  transition: right 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.defense-toast-visible { right: 12px; }
.defense-toast-win { border-color: #2ED573; }
.defense-toast-loss { border-color: #FF4757; }
.defense-toast-icon { font-size: 24px; flex-shrink: 0; }
.defense-toast-body { flex: 1; min-width: 0; }
.defense-toast-title { font-weight: 700; font-size: 13px; color: var(--text-bright); }
.defense-toast-win .defense-toast-title { color: #2ED573; }
.defense-toast-loss .defense-toast-title { color: #FF4757; }
.defense-toast-detail { font-size: 11px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.defense-toast-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-bright);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.defense-toast-btn:hover { background: rgba(255,255,255,0.2); }
.defense-toast-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 4px;
  flex-shrink: 0;
}
.defense-toast-close:hover { color: var(--text-bright); }

/* Defense Notification Popup */
.def-notif { text-align: left; }
.def-notif-header { text-align: center; margin-bottom: 14px; }
.def-notif-icon { width: 32px; height: 32px; margin-bottom: 4px; }
.def-notif-title { font-family: var(--font-display); font-size: 20px; color: #FF4757; text-transform: uppercase; letter-spacing: 2px; }
.def-notif-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.def-notif-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.def-card-win { border-left: 3px solid #2ED573; }
.def-card-loss { border-left: 3px solid #FF4757; }

.def-notif-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
}
.def-notif-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.def-notif-info { flex: 1; min-width: 0; }
.def-notif-name { font-weight: 700; font-size: 13px; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.def-notif-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.def-notif-eq { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.def-notif-eq .item-icon { width: 28px !important; height: 28px !important; }
.def-notif-tree { border-radius: 4px; margin-top: 4px; }

.def-notif-result { text-align: center; flex-shrink: 0; min-width: 70px; }
.def-notif-badge { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 6px; border-radius: 4px; }
.def-badge-win { background: rgba(46,213,115,0.15); color: #2ED573; }
.def-badge-loss { background: rgba(255,71,87,0.15); color: #FF4757; }
.def-notif-elo { font-size: 12px; font-weight: 700; margin-top: 3px; }
.def-notif-view-btn {
  margin-top: 4px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-bright);
  border-radius: 4px;
  cursor: pointer;
}
.def-notif-view-btn:hover { background: rgba(255,255,255,0.15); }

.def-notif-summary {
  text-align: center;
  padding: 8px 0;
  font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 4px;
}
.def-notif-summary-label { color: var(--text-dim); }

/* ── Rift Complete Slide-in Panel ── */
.rift-complete-panel {
  position: fixed;
  top: 50%;
  right: -360px;
  transform: translateY(-50%);
  width: 300px;
  max-width: 85vw;
  background: rgba(12,6,25,0.97);
  border: 1px solid rgba(200,168,78,0.25);
  border-right: none;
  border-radius: 14px 0 0 14px;
  padding: 20px 18px;
  z-index: 9990;
  transition: right 0.4s cubic-bezier(0.22,1,0.36,1);
  box-shadow: -4px 0 30px rgba(0,0,0,0.6), 0 0 40px rgba(200,168,78,0.08);
  backdrop-filter: blur(12px);
}
.rift-complete-panel.rcp-visible { right: 0; }

.rcp-header {
  text-align: center;
  margin-bottom: 14px;
}
.rcp-icon { font-size: 32px; margin-bottom: 4px; }
.rcp-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.rcp-rewards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
}
.rcp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.rcp-row:last-child { border-bottom: none; }
.rcp-row-icon { width: 22px; height: 22px; flex-shrink: 0; }
.rcp-row-label { flex: 1; font-size: 13px; color: var(--text-dim); }
.rcp-row-val { font-size: 15px; font-weight: 700; }

.rcp-loot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-top: 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.rcp-loot-icon { flex-shrink: 0; }
.rcp-loot-info { flex: 1; min-width: 0; }
.rcp-loot-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcp-loot-type { font-size: 10px; color: var(--text-dim); margin-top: 1px; }

.rcp-levelup {
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #FFD700;
  text-shadow: 0 0 12px rgba(255,215,0,0.4);
  padding: 6px 0;
  letter-spacing: 2px;
  animation: notifPulse 2s ease-in-out infinite;
}

.rcp-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.rcp-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}
.rcp-btn-rift {
  flex: 1;
  background: linear-gradient(135deg, rgba(191,95,255,0.25), rgba(83,82,237,0.25));
  color: #BF5FFF;
  border: 1px solid rgba(191,95,255,0.3);
}
.rcp-btn-rift:hover { background: linear-gradient(135deg, rgba(191,95,255,0.35), rgba(83,82,237,0.35)); }
.rcp-btn-close {
  width: 42px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 16px;
}
.rcp-btn-close:hover { background: rgba(255,255,255,0.12); color: var(--text-bright); }

/* ============================================================
   UNIQUE RARITY — Veilstone
   ============================================================ */
.rarity-unique { color: var(--unique); }
.rarity-frame-unique {
  border: 2px solid var(--unique);
  box-shadow: 0 0 14px rgba(0,229,255,0.35), 0 0 28px rgba(0,229,255,0.12), inset 0 0 8px rgba(0,229,255,0.1);
  animation: uniqueGlow 3s ease-in-out infinite;
}
@keyframes uniqueGlow {
  0%,100% { box-shadow: 0 0 14px rgba(0,229,255,0.35), 0 0 28px rgba(0,229,255,0.12); }
  50% { box-shadow: 0 0 20px rgba(0,229,255,0.55), 0 0 36px rgba(0,229,255,0.2); }
}

/* ============================================================
   VEILSTONE RELIC SLOT (between eq grid and inventory)
   ============================================================ */
.veilstone-slot-wrap {
  margin: 12px auto 0;
  max-width: 340px;
}
.veilstone-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,229,255,0.04);
  border: 1.5px solid rgba(0,229,255,0.15);
  position: relative;
  transition: background 0.15s, border-color 0.15s;
}
.veilstone-slot:hover {
  background: rgba(0,229,255,0.08);
  border-color: rgba(0,229,255,0.35);
}
.veilstone-slot.empty {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.06);
  opacity: 0.5;
}
.veilstone-frame {
  width: auto;
  height: 48px;
  border-radius: 8px;
  border: 2px solid var(--unique);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(0,229,255,0.2);
  animation: uniqueGlow 3s ease-in-out infinite;
  overflow: hidden;
  padding: 4px;
}
.veilstone-frame.empty {
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
  animation: none;
  width: 48px;
}
.veilstone-icon {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.veilstone-empty-svg {
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,0.15);
}
.veilstone-info { flex: 1; min-width: 0; }
.veilstone-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--unique);
  font-weight: 600;
}
.veilstone-name.dim { color: rgba(255,255,255,0.25); }
.veilstone-level {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.veilstone-level.dim { color: rgba(255,255,255,0.2); }
.veilstone-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
}
.vs-stat { white-space: nowrap; }
.veilstone-icon.dim { opacity: 0.25; filter: grayscale(1); }
.veilstone-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--unique);
  font-weight: 600;
  opacity: 0.7;
}

/* Veilstone Detail Card Popup */
.vs-card { text-align: center; }
.vs-card-icon-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}
.vs-card-frame {
  width: auto;
  height: 96px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(0,0,0,0.3);
}
.vs-card-icon {
  height: 76px;
  width: auto;
  object-fit: contain;
}
.vs-card-icon.dim { opacity: 0.2; filter: grayscale(1); }
.vs-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  margin-bottom: 2px;
}
.vs-card-type {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 14px;
}
.vs-card-stats-block {
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.vs-card-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.vs-card-stat:last-child { border-bottom: none; }
.vs-card-stat.dim { opacity: 0.25; }
.vs-card-stat-icon { font-size: 14px; width: 20px; text-align: center; }
.vs-card-stat-lbl { flex: 1; font-size: 13px; color: rgba(255,255,255,0.6); text-align: left; }
.vs-card-stat-val { font-size: 14px; color: var(--text-bright); font-weight: 600; }
.vs-card-progress-wrap { margin-bottom: 12px; }
.vs-card-progress-label {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.vs-card-progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.vs-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--unique), rgba(0,229,255,0.5));
  border-radius: 3px;
  transition: width 0.3s;
}
.vs-card-desc {
  text-align: left;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  background: rgba(0,229,255,0.03);
  border: 1px solid rgba(0,229,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
}

/* Boss fighter card in arena fight */
.arena-fighter-boss { background-size: cover; background-position: center; }
.arena-fighter-boss .arena-fighter-avatar-lg {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 3px solid var(--unique);
  box-shadow: 0 0 20px rgba(0,229,255,0.25);
  overflow: hidden;
}
.arena-fighter-img-lg.boss-portrait {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  clip-path: none !important;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.arena-fighter-boss .arena-fighter-frame { display: none; }
.arena-boss-eq {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
}
.arena-boss-eq .arena-eq-slot {
  width: auto !important;
  height: auto !important;
  padding: 4px;
}
.arena-boss-eq .arena-eq-slot img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.arena-boss-special {
  text-align: center;
  padding: 10px 12px;
  margin-top: 8px;
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.25);
  border-radius: 8px;
}
.arena-boss-special-label {
  font-size: 10px;
  color: var(--unique);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 4px;
  font-weight: 600;
}
.arena-boss-special-text {
  font-size: 13px;
  color: var(--text-bright);
  font-style: italic;
}

/* ── Zone Cards (Zones tab) ── */
.dng-zones-claim {
  background: rgba(0,229,255,0.04);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: var(--radius);
  padding: 12px;
  margin-bottom: 12px;
}
.dng-zones-claim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dng-zones-claim-zone {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gold);
}
.dng-zones-claim-time {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.dng-zones-claim-rewards {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-bright);
}
.dng-zones-claim {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.dng-zone-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 600px) {
  .dng-zone-cards { grid-template-columns: repeat(2, 1fr); }
}
.dng-zcard {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 0.75;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 1px solid rgba(255,255,255,0.06);
}
.dng-zcard:hover:not(.active):not(.locked) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,229,255,0.15);
  border-color: rgba(0,229,255,0.2);
}
.dng-zcard.active {
  border-color: rgba(0,229,255,0.3);
  box-shadow: 0 0 12px rgba(0,229,255,0.15);
  cursor: default;
}
.dng-zcard.locked {
  cursor: not-allowed;
  opacity: 0.4;
  filter: grayscale(0.7);
}
.dng-zcard-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.dng-zcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
}
.dng-zcard-content {
  position: relative;
  z-index: 1;
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dng-zcard-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.dng-zcard-rates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  color: rgba(255,255,255,0.55);
}
.dng-zcard-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  color: var(--unique);
  font-weight: 700;
  letter-spacing: 1.5px;
  z-index: 2;
}
.dng-zcard-lock {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  z-index: 2;
}
.dng-zones-info {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  text-align: center;
  padding: 8px;
  line-height: 1.5;
}

/* ============================================================
   DUNGEON — THE DEPTHS
   ============================================================ */
#panelDungeon {
  padding: 1px 12px 80px;
  position: relative;
  min-height: 100%;
  background: #0a0e1a url('../img/dungeon/depths-bg.webp?v=1') center center / cover no-repeat fixed;
  background-attachment: scroll;
  overflow: hidden;
}
#panelDungeon::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,14,26,0.78);
  z-index: 0;
  pointer-events: none;
}
#panelDungeon > * {
  position: relative;
  z-index: auto;
}
#panelDungeon {
  max-width: 100%;
}
/* Global dungeon content centering */
.dng-subtabs {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.dng-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--unique);
  text-align: center;
  letter-spacing: 3px;
  margin: 12px auto 8px;
  width: 100%;
  text-shadow: 0 0 20px rgba(0,229,255,0.3);
}
.dng-subtabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(6,14,22,0.85), rgba(3,9,14,0.92));
  border: 1px solid rgba(0,229,255,0.18);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.dng-subtab {
  flex: 1;
  max-width: 160px;
  padding: 10px 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #b6c4cf;
  background: linear-gradient(180deg, rgba(22,30,44,0.85), rgba(14,20,32,0.9));
  border: 1px solid rgba(120,160,200,0.16);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.dng-subtab-ico { font-size: 20px; line-height: 1; filter: grayscale(0.4) brightness(0.85); transition: filter 0.18s; }
.dng-subtab-lbl { font-size: 11px; line-height: 1; }
.dng-subtab:hover {
  color: #eaf7ff;
  border-color: rgba(0,229,255,0.35);
  background: linear-gradient(180deg, rgba(30,48,72,0.9), rgba(18,28,44,0.95));
  transform: translateY(-1px);
}
.dng-subtab:hover .dng-subtab-ico { filter: none; }
/* Per-tab active glow colors — BOSS = red/orange, ZONES = cyan, RELIC = gold */
.dng-subtab.active { transform: translateY(-1px); }
.dng-subtab.active .dng-subtab-ico { filter: none; transform: scale(1.08); }
.dng-subtab-boss.active {
  color: #ffb340;
  background: linear-gradient(180deg, rgba(255,80,40,0.24), rgba(140,30,10,0.22));
  border-color: rgba(255,130,50,0.85);
  box-shadow: 0 0 18px rgba(255,120,40,0.32), inset 0 1px 0 rgba(255,200,120,0.12);
  text-shadow: 0 0 10px rgba(255,140,40,0.55), 0 1px 2px rgba(0,0,0,0.7);
}
.dng-subtab-zones.active {
  color: #7df2ff;
  background: linear-gradient(180deg, rgba(0,229,255,0.22), rgba(0,120,160,0.18));
  border-color: rgba(0,229,255,0.75);
  box-shadow: 0 0 18px rgba(0,229,255,0.35), inset 0 1px 0 rgba(120,230,255,0.14);
  text-shadow: 0 0 10px rgba(0,229,255,0.55), 0 1px 2px rgba(0,0,0,0.7);
}
.dng-subtab-relic.active {
  color: #ffd978;
  background: linear-gradient(180deg, rgba(255,215,120,0.22), rgba(160,110,30,0.18));
  border-color: rgba(255,215,120,0.85);
  box-shadow: 0 0 18px rgba(255,215,120,0.35), inset 0 1px 0 rgba(255,235,180,0.14);
  text-shadow: 0 0 10px rgba(255,215,100,0.55), 0 1px 2px rgba(0,0,0,0.7);
}
.dng-subtab-hard.active {
  color: #ff7b7b;
  background: linear-gradient(180deg, rgba(255,75,75,0.26), rgba(140,20,20,0.22));
  border-color: rgba(255,90,90,0.90);
  box-shadow: 0 0 20px rgba(255,80,80,0.40), inset 0 1px 0 rgba(255,180,180,0.14);
  text-shadow: 0 0 10px rgba(255,80,80,0.60), 0 1px 2px rgba(0,0,0,0.7);
}
.dng-subtab.locked { opacity: 0.55; cursor: default; }
.dng-subtab.locked:hover { transform: none; }
.dng-subtab-lock { font-size: 10px; opacity: 0.7; margin-left: 3px; }

/* ── Hard mode panel (v23.0.867) ────────────────────────── */
.dng-hard-locked {
  text-align: center;
  padding: 60px 24px;
  color: #ccc;
}
.dng-hard-locked-icon { font-size: 64px; margin-bottom: 18px; opacity: 0.6; }
.dng-hard-locked-title {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  color: #ff7b7b;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-shadow: 0 0 14px rgba(255,80,80,0.4);
}
.dng-hard-locked-sub { font-size: 13px; color: #888; line-height: 1.5; max-width: 380px; margin: 0 auto; }
.dng-hard-banner {
  position: relative;
  margin: 0 0 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(180,30,30,0.22), rgba(80,10,10,0.30));
  border: 1px solid rgba(255,90,90,0.45);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(120,20,20,0.28), inset 0 1px 0 rgba(255,180,180,0.08);
}
.dng-hard-banner-title {
  font-family: 'Cinzel', serif;
  font-size: 18px;
  color: #ff8b8b;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255,80,80,0.5);
}
.dng-hard-banner-sub { font-size: 12px; color: #d8c0c0; margin-bottom: 8px; line-height: 1.45; }
.dng-hard-banner-prog { font-size: 12px; color: #ffb8b8; font-weight: 700; }
.dng-hard-cd {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 4px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  font-size: 12px;
}
.dng-hard-cd-lbl { color: #888; font-weight: 600; }
.dng-hard-cd-val { color: #ffb340; font-weight: 800; }
.dng-hard-cd.ready .dng-hard-cd-val { color: #5ED87A; }

.dng-hard-list {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 24px;
}
.dng-hard-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(20,8,12,0.65), rgba(10,4,8,0.75));
  border: 1px solid rgba(255,90,90,0.18);
  border-radius: 12px;
  transition: border-color 0.15s, transform 0.12s;
}
.dng-hard-card.dng-hard-current {
  border-color: rgba(255,90,90,0.6);
  box-shadow: 0 0 16px rgba(255,80,80,0.20);
}
.dng-hard-card.dng-hard-defeated {
  opacity: 0.55;
  border-color: rgba(76,175,80,0.30);
}
.dng-hard-card.dng-hard-locked {
  opacity: 0.40;
  filter: grayscale(0.6);
}
.dng-hard-card-portrait {
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
}
.dng-hard-card-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dng-hard-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dng-hard-card-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dng-hard-card-row.sub { font-size: 11px; color: #aaa; }
.dng-hard-card-name { font-family: 'Cinzel', serif; font-size: 15px; color: #fff; font-weight: 700; }
.dng-hard-card-tag { font-size: 10px; color: #ffb340; background: rgba(255,180,60,0.10); border: 1px solid rgba(255,180,60,0.25); padding: 2px 7px; border-radius: 999px; }
.dng-hard-card-status { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.dng-hard-card-status.defeated { color: #5ED87A; background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.3); }
.dng-hard-card-status.locked { color: #888; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.dng-hard-card-rec { color: #ddd; font-weight: 700; }
.dng-hard-card-pow { color: #ffb340; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.dng-hard-card-pow img { width: 12px; height: 12px; vertical-align: middle; }
.dng-hard-card-zone { color: #7df2ff; font-weight: 700; }
.dng-hard-mins {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.dng-hard-min-btn {
  font-size: 11px; font-weight: 700;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,90,90,0.30);
  background: rgba(40,15,15,0.6);
  color: #d8c0c0;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.dng-hard-min-btn.ready {
  border-color: rgba(255,120,80,0.7);
  background: linear-gradient(135deg, rgba(160,40,30,0.55), rgba(90,15,15,0.55));
  color: #ffd0d0;
}
.dng-hard-min-btn.ready:hover { background: linear-gradient(135deg, rgba(200,50,40,0.7), rgba(120,20,20,0.7)); }
.dng-hard-min-btn.done { border-color: rgba(76,175,80,0.30); color: #6ed87a; opacity: 0.7; cursor: default; }
.dng-hard-min-btn.locked, .dng-hard-min-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dng-hard-mins-hint { font-size: 11px; color: #ffb340; margin-top: 4px; }
.dng-hard-fight-btn {
  margin-top: 6px;
  padding: 9px 16px;
  background: linear-gradient(135deg, #c8302a, #8a1818);
  border: 1px solid rgba(255,120,80,0.65);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(150,30,20,0.40);
  transition: transform 0.1s, box-shadow 0.15s;
}
.dng-hard-fight-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(180,40,30,0.55); }
.dng-hard-fight-btn:active { transform: scale(0.98); }
.dng-hard-fight-btn.disabled, .dng-hard-fight-btn:disabled {
  background: rgba(60,20,20,0.5);
  border-color: rgba(255,255,255,0.06);
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

/* Zone upgrade indicator on the main tab's zone list */
.dng-zrow.upgraded {
  border-color: rgba(255,180,60,0.40);
  box-shadow: 0 0 12px rgba(255,180,60,0.18);
}
.dng-zrow-upg {
  font-size: 9px;
  color: #ffd700;
  background: rgba(255,180,60,0.12);
  border: 1px solid rgba(255,180,60,0.35);
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-left: 6px;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .dng-hard-card { padding: 10px; gap: 10px; }
  .dng-hard-card-portrait { width: 60px; height: 60px; }
  .dng-hard-card-name { font-size: 14px; }
}
@media (max-width: 480px) {
  .dng-subtabs { gap: 5px; padding: 4px; }
  .dng-subtab { padding: 8px 4px; max-width: 120px; }
  .dng-subtab-ico { font-size: 18px; }
  .dng-subtab-lbl { font-size: 10px; letter-spacing: 0.9px; }
}
.dng-section {
  background: rgba(0,229,255,0.03);
  border: 1px solid rgba(0,229,255,0.08);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Idle Zone ── */
.dng-idle-zone { position: relative; }
.dng-idle-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dng-idle-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.dng-idle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ED87A;
  box-shadow: 0 0 6px rgba(94,216,122,0.5);
  animation: idlePulse 2s ease-in-out infinite;
}
@keyframes idlePulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.dng-idle-name {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
}
.dng-idle-rates {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dng-rate-icon { width: 14px; height: 14px; vertical-align: middle; }
.dng-idle-accumulated {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.dng-idle-time {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 4px;
}
.dng-idle-rewards { display: flex; gap: 14px; flex-wrap: wrap; }
.dng-idle-reward {
  font-size: 13px;
  color: var(--text-bright);
  font-weight: 500;
}
.dng-idle-drop-count { color: var(--gold); }
.dng-claim-btn {
  display: block;
  width: 100%;
  padding: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, rgba(0,229,255,0.25), rgba(0,180,220,0.25));
  border: 1px solid rgba(0,229,255,0.3);
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.15s;
}
.dng-claim-btn:hover {
  background: linear-gradient(135deg, rgba(0,229,255,0.35), rgba(0,180,220,0.35));
  box-shadow: 0 0 12px rgba(0,229,255,0.25);
}
.dng-zone-change {
  margin-top: 8px;
  text-align: center;
}
/* Zone picker cards */
.dng-zone-picker { margin-top: 10px; }
.dng-zone-picker-title {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-align: center;
}
.dng-zone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dng-zone-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.15);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.dng-zone-card:hover:not(.active) {
  background: rgba(0,229,255,0.06);
  border-color: rgba(0,229,255,0.15);
}
.dng-zone-card.active {
  background: rgba(0,229,255,0.06);
  border-color: rgba(0,229,255,0.2);
  cursor: default;
}
.dng-zone-card-name {
  font-size: 12px;
  color: var(--text-bright);
  min-width: 90px;
}
.dng-zone-card-rates {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  flex: 1;
}
.dng-zone-card-active {
  font-size: 9px;
  color: var(--unique);
  font-weight: 600;
  letter-spacing: 1px;
}

/* Intro section */
.dng-intro { text-align: center; }
.dng-intro-title {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 10px;
}
.dng-intro-step {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.dng-intro-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,229,255,0.15);
  color: var(--unique);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Relic Section ── */
.dng-relic-section { padding: 10px 14px; }
.dng-relic-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dng-relic-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 2px solid var(--unique);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 0 10px rgba(0,229,255,0.2);
}
.dng-relic-info { flex: 1; }
.dng-relic-name {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--unique);
}
.dng-relic-lvl {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  margin-left: 6px;
}
.dng-relic-stats {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.dng-relic-progress {
  font-size: 12px;
  color: var(--unique);
  font-weight: 600;
  opacity: 0.7;
}

/* ── Boss Section ── */
.dng-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(0,229,255,0.08);
  border-radius: 10px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.dng-timer-label {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.dng-timer-val {
  font-size: 13px;
  color: var(--unique);
  font-weight: 600;
  flex: 1;
}
.dng-skip-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: #fff;
  background: rgba(191,95,255,0.2);
  border: 1px solid rgba(191,95,255,0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.dng-skip-btn:hover { background: rgba(191,95,255,0.35); }

.dng-replay-row {
  text-align: center;
  margin: 8px 0;
}
.dng-replay-btn {
  padding: 8px 20px;
  font-size: 13px;
  font-family: var(--font-display);
  color: var(--gold);
  background: rgba(200,168,78,0.08);
  border: 1px solid rgba(200,168,78,0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}
.dng-replay-btn:hover {
  background: rgba(200,168,78,0.15);
  border-color: var(--gold);
}

.dng-boss-card {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.dng-boss-floor {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.dng-boss-portrait-wrap {
  width: 128px;
  height: 128px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 3px solid var(--unique);
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,229,255,0.2);
}
.dng-boss-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dng-boss-name {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text-bright);
  margin-bottom: 4px;
}
.dng-boss-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.dng-boss-special {
  font-size: 11px;
  color: var(--unique);
  font-style: italic;
  margin-bottom: 10px;
  opacity: 0.7;
}
.dng-boss-eq {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.dng-boss-eq-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 6px;
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
  position: relative;
  width: 90px;
  cursor: pointer;
  transition: background 0.15s;
  overflow: visible !important;
}
.dng-boss-eq-slot.rarity-frame-legendary::before,
.dng-boss-eq-slot.rarity-frame-mythic::after { display:none; }
.dng-boss-eq-slot:hover {
  background: rgba(0,0,0,0.4);
}
.dng-boss-eq-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.dng-boss-eq-name {
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
  text-align: center;
}
/* Boss eq tooltip */
.dng-boss-eq-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(12,10,28,0.95);
  border: 1px solid rgba(0,229,255,0.2);
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 160px;
  max-width: 220px;
  z-index: 100;
  pointer-events: none;
  text-align: left;
  backdrop-filter: blur(8px);
}
.dng-boss-eq-slot:hover .dng-boss-eq-tooltip {
  display: block;
}
.dng-boss-eq-tt-name {
  font-family: var(--font-display);
  font-size: 13px;
  margin-bottom: 2px;
}
.dng-boss-eq-tt-type {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}
.dng-boss-eq-tt-stat {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 2px 0;
}
.dng-boss-eq-tt-stat-lbl { color: rgba(255,255,255,0.5); }
.dng-boss-eq-tt-stat-val { color: var(--text-bright); font-weight: 500; }
.dng-boss-unlock {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.dng-boss-unlock strong { color: var(--gold); }

/* Power comparison bar */
.dng-power-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.dng-power-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.dng-power-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

.dng-challenge-btn {
  display: block;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(135deg, rgba(0,229,255,0.3), rgba(0,180,220,0.3));
  border: 1.5px solid rgba(0,229,255,0.4);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  text-shadow: 0 0 8px rgba(0,229,255,0.3);
}
.dng-challenge-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, rgba(0,229,255,0.45), rgba(0,180,220,0.45));
  box-shadow: 0 0 16px rgba(0,229,255,0.3);
}
.dng-challenge-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.dng-skip-cooldown-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 520px;
  margin: 8px auto 0;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #CE93D8;
  background: rgba(191,95,255,0.12);
  border: 1px solid rgba(191,95,255,0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.dng-skip-cooldown-btn:hover { background: rgba(191,95,255,0.25); }

/* All clear */
.dng-all-clear { text-align: center; padding: 24px 0; }
.dng-all-clear-title {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--gold);
  margin-bottom: 6px;
}
.dng-all-clear-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

/* Relic full tab */
.dng-relic-full { text-align: center; padding: 16px; max-width: 420px; margin: 0 auto; }
.dng-relic-next {
  background: rgba(0,229,255,0.04);
  border: 1px solid rgba(0,229,255,0.1);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  text-align: center;
}
.dng-relic-next-title {
  font-size: 11px;
  color: var(--unique);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  opacity: 0.7;
}
.dng-relic-next-stats {
  display: flex;
  gap: 12px;
  justify-content: center;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.dng-relic-next-boss {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
.dng-relic-next-boss strong { color: var(--text-bright); }

/* ── Boss Path Map (Canvas) ── */
/* ── Combined Depths layout (v23.0.732+) — boss canvas + zones panel,
      fits viewport without scrolling. The .active guard keeps the
      display:flex override from leaking across other tabs (was the cause
      of "tabs locked after entering Depths" bug). ── */
#panelDungeon.dng-main-active.active {
  padding: 1px 10px 10px;
  height: calc(100vh - 56px - 82px); /* header + tab bar */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
@media (min-width: 960px) {
  #panelDungeon.dng-main-active.active {
    height: calc(100vh - 56px); /* no bottom tabbar on desktop */
  }
}
html.gv-land-mobile #panelDungeon.dng-main-active.active {
  height: calc(100vh - 56px - 60px);
}
#panelDungeon.dng-main-active.active .dng-title { flex-shrink: 0; margin: 6px auto 4px; }
#panelDungeon.dng-main-active.active .dng-subtabs { flex-shrink: 0; margin-bottom: 8px; }

.dng-combined {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.dng-combined-left {
  flex: 1.25;
  min-width: 0;
  min-height: 0;
  position: relative;
  display: flex;
}
.dng-combined-right {
  flex: 1;
  min-width: 260px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Canvas fills its column */
#panelDungeon.dng-main-active.active .dng-map-canvas-wrap {
  flex: 1;
  height: auto !important;
  width: 100%;
  min-height: 0;
}

/* Timer overlay on canvas (top-right) */
.dng-cd-overlay {
  position: absolute;
  top: 8px; right: 8px;
  padding: 7px 11px;
  background: linear-gradient(180deg, rgba(10,10,20,0.9), rgba(5,5,12,0.95));
  border: 1px solid rgba(0,229,255,0.35);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(0,229,255,0.12);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  pointer-events: auto;
}
.dng-cd-overlay.ready { border-color: rgba(94,216,122,0.5); box-shadow: 0 4px 14px rgba(0,0,0,0.55), 0 0 16px rgba(94,216,122,0.2); }
.dng-cd-label { font-size: 9px; color: #a599c9; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
.dng-cd-val { font-size: 15px; font-weight: 900; color: var(--unique); font-family: 'Menlo', monospace; letter-spacing: 0.5px; }
.dng-cd-skip {
  padding: 4px 10px;
  background: linear-gradient(135deg, #6FD5FF, #0070dd);
  border: 1px solid rgba(0,229,255,0.55);
  border-radius: 6px;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.dng-cd-skip img { width: 12px; height: 12px; }

.dng-replay-overlay {
  position: absolute;
  bottom: 8px; right: 8px;
  padding: 5px 10px;
  background: rgba(10,10,20,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  color: #ccc;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  z-index: 3;
}
.dng-replay-overlay:hover { color: #fff; border-color: var(--unique); }

/* Zones panel (right column) */
.dng-zones-claim-compact {
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,140,40,0.04));
  border: 1px solid rgba(255,216,144,0.3);
  border-radius: 10px;
  flex-shrink: 0;
}
.dng-zones-claim-top {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: #ddd;
  margin-bottom: 5px;
}
.dng-zones-claim-zone { font-weight: 800; color: var(--gold); letter-spacing: 0.3px; }
.dng-zones-claim-time { margin-left: auto; color: #888; font-size: 10px; font-weight: 700; }
.dng-zones-claim-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.dng-cl-rew { font-size: 12px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 3px; }
.dng-cl-rew img { width: 13px; height: 13px; }
.dng-cl-drops { color: var(--gold); }
.dng-cl-vp { color: #c77afc; }
.dng-claim-btn-compact {
  margin-left: auto;
  padding: 5px 12px;
  background: linear-gradient(135deg, #ffd890, #c89a4e);
  border: 1px solid rgba(255,216,144,0.6);
  border-radius: 7px;
  color: #1a1410;
  font-weight: 900;
  font-size: 11px;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(255,140,40,0.25);
}
.dng-claim-btn-compact:hover { transform: translateY(-1px); }
.dng-zones-claim-empty {
  text-align: center;
  color: rgba(255,255,255,0.35);
  font-size: 11px;
  font-style: italic;
  padding: 4px 0;
}

.dng-zones-hint {
  padding: 10px 12px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(0,229,255,0.15);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.6;
  color: #aab;
  flex-shrink: 0;
}
.dng-zones-hint-title {
  font-weight: 800;
  color: var(--unique);
  letter-spacing: 1.2px;
  margin-bottom: 5px;
  font-size: 11px;
  text-transform: uppercase;
}
.dng-zones-hint-step { line-height: 1.5; color: #bbb; padding: 1px 0; }

.dng-zones-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 10px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(0,229,255,0.12);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.dng-zones-header {
  font-size: 11px; font-weight: 800;
  color: var(--unique);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  position: sticky; top: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.95), rgba(10,14,26,0.7));
  padding: 2px 0;
  z-index: 1;
}
.dng-zones-count { color: #888; font-size: 10px; font-weight: 700; margin-left: auto; }

.dng-zone-cards-compact {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
.dng-zcard-compact {
  min-height: 70px;
  border-radius: 8px;
}
.dng-zcard-compact .dng-zcard-name { font-size: 11px; padding: 3px 6px; }
.dng-zcard-compact .dng-zcard-rates { font-size: 9px; padding: 2px 6px; gap: 4px; }
.dng-zcard-compact .dng-zcard-rates img { width: 10px; height: 10px; }
.dng-zcard-compact .dng-zcard-badge { font-size: 8px; padding: 1px 5px; }

/* ── Zone list (compact row view) ── */
.dng-zone-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dng-zrow {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px 6px 6px;
  background: linear-gradient(180deg, rgba(22,30,44,0.65), rgba(14,20,32,0.75));
  border: 1px solid rgba(120,160,200,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dng-zrow:hover:not(.active):not(.locked) {
  border-color: rgba(0,229,255,0.4);
  background: linear-gradient(180deg, rgba(30,48,72,0.75), rgba(18,28,44,0.85));
  transform: translateX(2px);
}
.dng-zrow.active {
  border-color: rgba(94,216,122,0.6);
  background: linear-gradient(180deg, rgba(94,216,122,0.14), rgba(30,140,60,0.08));
  box-shadow: 0 0 12px rgba(94,216,122,0.15), inset 0 1px 0 rgba(120,230,140,0.12);
  cursor: default;
}
.dng-zrow.locked {
  opacity: 0.45;
  cursor: default;
  background: linear-gradient(180deg, rgba(15,20,30,0.6), rgba(10,12,20,0.75));
}
.dng-zrow-thumb {
  position: relative;
  width: 44px; height: 40px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow: hidden;
}
.dng-zrow.active .dng-zrow-thumb { border-color: rgba(94,216,122,0.55); box-shadow: 0 0 8px rgba(94,216,122,0.25); }
.dng-zrow-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55));
}
.dng-zrow-num {
  position: absolute;
  bottom: 2px;
  right: 3px;
  z-index: 1;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
  font-family: Cinzel, serif;
  line-height: 1;
}
.dng-zrow-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 18px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.dng-zrow-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dng-zrow-name {
  font-size: 12px;
  font-weight: 800;
  color: #eaf7ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.3px;
}
.dng-zrow.active .dng-zrow-name { color: #b8ffcb; }
.dng-zrow-name.muted { color: #666; font-weight: 600; }
.dng-zrow-rates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 10px;
  color: #9088a8;
}
.dng-zrow-rates span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  white-space: nowrap;
}
.dng-zrow-rates img { width: 10px; height: 10px; }
.dng-zrow-rates.muted { font-size: 10px; color: #555; font-style: italic; }
.dng-zrow-rates .zr-gold { color: #ffd890; }
.dng-zrow-rates .zr-xp { color: #6FD5FF; }
.dng-zrow-rates .zr-drop { color: #c89a4e; }
.dng-zrow-rates .zr-vp { color: #c77afc; }
.dng-zrow-status {
  font-size: 18px;
  color: rgba(255,255,255,0.2);
  padding-right: 4px;
  font-weight: 900;
}
.dng-zrow-status.active {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 900;
  color: #5ED87A;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 3px 8px;
  background: rgba(94,216,122,0.12);
  border: 1px solid rgba(94,216,122,0.35);
  border-radius: 10px;
}
.dng-zrow:hover:not(.active):not(.locked) .dng-zrow-status {
  color: var(--unique);
  transform: translateX(2px);
}

@media (max-width: 700px) {
  .dng-zrow { padding: 5px 6px; gap: 8px; grid-template-columns: 38px 1fr auto; }
  .dng-zrow-thumb { width: 38px; height: 34px; }
  .dng-zrow-name { font-size: 11.5px; }
  .dng-zrow-rates { gap: 8px; font-size: 9.5px; }
  .dng-zrow-status { font-size: 16px; }
  .dng-zrow-status.active { font-size: 8.5px; padding: 2px 6px; }
}

/* ── Boss detail modal — fancier layout ── */
.dng-boss-modal {
  position: relative;
  padding: 0;
  margin: -6px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,229,255,0.1), transparent 60%),
    linear-gradient(180deg, rgba(16,10,30,0.98), rgba(6,4,14,0.99));
  border: 1px solid rgba(0,229,255,0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.04);
}
.dng-boss-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/dungeon/depths-bg.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.dng-boss-modal > * { position: relative; z-index: 1; }
.dng-boss-modal #dngBossInfoCard { padding: 14px 16px 18px; }

/* Rework the existing inline styles for a nicer feel when in modal */
.dng-boss-modal .dng-boss-floor {
  text-align: center;
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 800;
  color: var(--unique);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0,229,255,0.18);
  text-shadow: 0 0 10px rgba(0,229,255,0.3);
}
.dng-boss-modal .dng-boss-portrait-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 6px auto 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,255,0.25), transparent 70%);
}
.dng-boss-modal .dng-boss-portrait-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--unique), rgba(0,229,255,0.2), var(--unique));
  opacity: 0.8;
  animation: dngPortalSpin 8s linear infinite;
  z-index: 0;
}
.dng-boss-modal .dng-boss-portrait-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(5,8,18,0.85);
  z-index: 1;
}
.dng-boss-modal .dng-boss-portrait {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 112px;
  margin: 4px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(0,229,255,0.4);
  box-shadow: 0 0 20px rgba(0,229,255,0.25);
}
@keyframes dngPortalSpin { to { transform: rotate(360deg); } }
.dng-boss-modal .dng-boss-name {
  text-align: center;
  font-family: Cinzel, serif;
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 4px;
  text-shadow: 0 0 18px rgba(0,229,255,0.3), 0 2px 6px rgba(0,0,0,0.8);
}
.dng-boss-modal .dng-boss-meta {
  text-align: center;
  font-size: 11px;
  color: #b0b8c8;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.dng-boss-modal .dng-boss-meta img { vertical-align: middle; margin: 0 3px; }
.dng-boss-modal .dng-boss-special {
  text-align: center;
  font-size: 11px;
  color: #ffd890;
  font-style: italic;
  padding: 5px 10px;
  background: rgba(255,216,144,0.06);
  border: 1px solid rgba(255,216,144,0.18);
  border-radius: 7px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.dng-boss-modal .dng-boss-unlock {
  text-align: center;
  font-size: 10px;
  color: #8f9bab;
  padding: 5px 8px;
  margin: 8px 0 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  letter-spacing: 0.3px;
}
.dng-boss-modal .dng-power-compare {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  margin: 10px 0;
  font-size: 11px;
  font-weight: 700;
}
.dng-boss-modal .dng-power-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.dng-boss-modal .dng-power-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px currentColor;
}
.dng-boss-modal .dng-challenge-btn {
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(180deg, #6FD5FF, #0070dd);
  border: 1px solid rgba(0,229,255,0.65);
  border-radius: 10px;
  color: #fff;
  font-family: Cinzel, serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,112,221,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  text-transform: uppercase;
  margin-top: 12px;
  transition: transform 0.1s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.dng-boss-modal .dng-challenge-btn:hover:not(.disabled):not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,112,221,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.dng-boss-modal .dng-challenge-btn.disabled,
.dng-boss-modal .dng-challenge-btn:disabled {
  background: linear-gradient(180deg, rgba(40,40,60,0.8), rgba(25,25,40,0.9));
  border-color: rgba(255,255,255,0.12);
  color: #999;
  cursor: default;
  box-shadow: none;
  font-size: 13px;
}
.dng-boss-modal .dng-skip-cooldown-btn {
  width: 100%;
  padding: 7px 14px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(191,95,255,0.25), rgba(120,50,190,0.18));
  border: 1px solid rgba(191,95,255,0.5);
  border-radius: 8px;
  color: #e0c8ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.dng-boss-modal .dng-skip-cooldown-btn:hover { background: linear-gradient(180deg, rgba(191,95,255,0.35), rgba(120,50,190,0.25)); }
.dng-boss-modal .dng-skip-cooldown-btn img { width: 13px; height: 13px; }

/* Boss equipment icons inside modal — compact horizontal row */
.dng-boss-modal .dng-boss-eq {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
  padding: 8px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
}
.dng-boss-modal .dng-boss-eq-slot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.02);
  transition: transform 0.12s;
}
.dng-boss-modal .dng-boss-eq-slot:hover { transform: translateY(-2px); }
.dng-boss-modal .dng-boss-eq-icon { width: 36px; height: 36px; object-fit: contain; }
.dng-boss-modal .dng-boss-eq-name { display: none; } /* tooltip shows name */

.dng-all-clear-overlay {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5,10,20,0.82);
  border-radius: 12px;
  z-index: 5;
  text-align: center;
  padding: 24px;
  border: 1px solid rgba(255,215,0,0.25);
  pointer-events: none;
}

/* Boss detail modal (click boss on canvas) */
.dng-boss-modal {
  padding: 4px;
  max-width: 380px;
}

/* Mobile: stack canvas above zones panel */
@media (max-width: 700px) {
  .dng-combined { flex-direction: column; gap: 6px; }
  .dng-combined-left { flex: 1.4; min-height: 0; }
  .dng-combined-right { flex: 1; min-width: 0; min-height: 0; }
  .dng-zone-cards-compact { grid-template-columns: repeat(3, 1fr) !important; }
  .dng-zcard-compact { min-height: 58px; }
  .dng-zcard-compact .dng-zcard-name { font-size: 10px; }
  .dng-zcard-compact .dng-zcard-rates { font-size: 8px; }
  .dng-cd-overlay { padding: 5px 8px; top: 6px; right: 6px; }
  .dng-cd-val { font-size: 13px; }
  .dng-zones-header { font-size: 10px; }
}

.dng-boss-layout {
  display: flex;
  flex-direction: row;
  gap: 12px;
  max-width: 700px;
  margin: 0 auto;
}
.dng-map-canvas-wrap {
  flex: 0 0 420px;
  height: 560px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,229,255,0.08);
  background: rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
}
.dng-map-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.dng-boss-layout .dng-boss-section {
  flex: 1;
  min-width: 0;
}
.dng-timer-section {
  max-width: 700px;
  margin: 0 auto 8px;
}

/* Mobile: stack vertically */
@media (max-width: 700px) {
  .dng-boss-layout {
    flex-direction: column;
  }
  .dng-map-canvas-wrap {
    flex: none;
    width: 100%;
    height: 450px;
  }
}

/* ============================================
   CHAT SYSTEM
   ============================================ */

/* Chat Tabs Bar — sits above tab bar, right-aligned */
.chat-tabs-bar {
  position: fixed;
  bottom: 56px;
  right: 8px;
  z-index: 800;
  display: none;
  align-items: flex-end;
  gap: 0;
  pointer-events: none;
}
.chat-tabs-bar-label {
  pointer-events: auto;
  color: #999;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 7px 10px 5px;
  background: linear-gradient(180deg, rgba(30,22,55,0.97), rgba(20,14,40,0.98));
  border: 1px solid rgba(200,168,78,0.2);
  border-bottom: none;
  border-right: none;
  border-radius: 10px 0 0 0;
  backdrop-filter: blur(12px);
}
.chat-bar-tab {
  pointer-events: auto;
  position: relative;
  background: linear-gradient(180deg, rgba(30,22,55,0.97), rgba(20,14,40,0.98));
  border: 1px solid rgba(200,168,78,0.2);
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  color: #999;
  font-family: var(--font-display), 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 16px 6px;
  cursor: pointer;
  transition: all 0.2s;
  backdrop-filter: blur(12px);
}
.chat-bar-tab:first-of-type {
  border-left: 1px solid rgba(200,168,78,0.2);
}
.chat-bar-tab:last-of-type {
  border-radius: 0 10px 0 0;
}
.chat-bar-tab:hover {
  color: var(--gold);
  background: rgba(200,168,78,0.1);
}
.chat-bar-tab.active {
  background: linear-gradient(180deg, rgba(200,168,78,0.15), rgba(200,168,78,0.06));
  color: var(--gold);
  border-top: 2px solid rgba(200,168,78,0.6);
  box-shadow: 0 -2px 8px rgba(200,168,78,0.1);
}
.chat-bar-tab-badge {
  position: absolute;
  top: -6px;
  right: -2px;
  background: #f44336;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  text-align: center;
  padding: 0 3px;
}

/* Old toggle button — hidden */
.chat-toggle-btn {
  display: none !important;
  position: fixed;
  bottom: 72px;
  right: 12px;
  z-index: 800;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2218 60%, #3a2f1f);
  border: 2px solid rgba(200,168,78,0.5);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), 0 0 8px rgba(200,168,78,0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.chat-toggle-btn:active {
  transform: scale(0.93);
}
.chat-toggle-icon {
  font-size: 22px;
  line-height: 1;
}
.chat-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  text-align: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* Chat Panel */
.chat-panel {
  position: fixed;
  bottom: 80px;
  right: 12px;
  z-index: 801;
  width: 500px;
  height: 480px;
  min-width: 280px;
  min-height: 200px;
  background: linear-gradient(180deg, #1e1812 0%, #16120d 100%);
  border: 1px solid rgba(200,168,78,0.3);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 16px rgba(200,168,78,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
  overflow: auto;
}
.chat-panel .chat-messages { flex: 1; overflow-y: auto; }
.chat-panel-open {
  animation: chatSlideUp 0.2s ease-out;
}
@keyframes chatSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Expanded mode */
.chat-panel-expanded {
  width: 720px !important;
  max-height: 680px !important;
}
.chat-panel-expanded .chat-messages {
  max-height: 540px;
}

/* Chat Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(200,168,78,0.15);
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.chat-header:active { cursor: grabbing; }
.chat-header-title {
  color: #c8a84e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.chat-header-btns {
  display: flex;
  align-items: center;
  gap: 2px;
}
.chat-tabs {
  display: flex;
  gap: 4px;
}
.chat-tab {
  background: rgba(200,168,78,0.08);
  border: 1px solid rgba(200,168,78,0.2);
  border-radius: 8px;
  color: #c8a84e;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-tab.active {
  background: rgba(200,168,78,0.2);
  border-color: rgba(200,168,78,0.5);
  color: #e8d48e;
}
.chat-tab { position: relative; }
.guild-tab-badge {
  position: absolute;
  top: 0;
  right: 2px;
  background: #f44336;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  text-align: center;
  padding: 0 3px;
  z-index: 2;
}
.chat-tab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f44336;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  text-align: center;
  padding: 0 3px;
}
.chat-msg-ad {
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(255,255,255,0.1);
  padding-left: 8px;
}
.chat-ad-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.chat-ad-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.chat-ad-btn:hover {
  background: rgba(255,255,255,0.05);
}
.chat-ad-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.chat-msg-premium {
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,140,0,0.08), rgba(255,215,0,0.05));
  border: 2px solid rgba(255,215,0,0.5);
  border-radius: 10px;
  padding: 10px;
  position: relative;
  box-shadow: 0 0 16px rgba(255,215,0,0.15), inset 0 0 20px rgba(255,215,0,0.04);
  animation: premiumShine 3s ease-in-out infinite;
}
.chat-msg-premium .chat-msg-name {
  color: #FFD700 !important;
  text-shadow: 0 0 8px rgba(255,215,0,0.4);
}
.chat-msg-premium .chat-msg-text {
  color: #f0e6c8 !important;
  font-weight: 600;
}
@keyframes premiumShine {
  0%, 100% { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 16px rgba(255,215,0,0.15); }
  50% { border-color: rgba(255,215,0,0.7); box-shadow: 0 0 24px rgba(255,215,0,0.25); }
}
.chat-tab-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.chat-expand-btn {
  background: none;
  border: none;
  color: rgba(200,168,78,0.4);
  font-size: 14px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.chat-expand-btn:hover { color: #c8a84e; }
.chat-close-btn {
  background: none;
  border: none;
  color: rgba(200,168,78,0.5);
  font-size: 20px;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.chat-close-btn:hover {
  color: #c8a84e;
}

/* Messages Area */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 200px;
  max-height: 340px;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,168,78,0.2) transparent;
}
.chat-messages::-webkit-scrollbar {
  width: 4px;
}
.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(200,168,78,0.25);
  border-radius: 2px;
}

/* Single Message */
.chat-msg {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.chat-msg:last-child {
  border-bottom: none;
}
.chat-msg-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.chat-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.chat-msg-body {
  flex: 1;
  min-width: 0;
}
.chat-msg-header {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
}
.chat-msg-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #e8d48e;
  cursor: pointer;
}
.chat-msg-name:hover {
  text-decoration: underline;
}
/* Premium avatar border — animated golden glow */
.gv-avatar-prem {
  border: 2px solid #FFD700 !important;
  box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,215,0,0.2) !important;
  animation: gvPremBorder 2s ease-in-out infinite alternate !important;
}
@keyframes gvPremBorder {
  from { box-shadow: 0 0 8px rgba(255,215,0,0.4), 0 0 16px rgba(255,215,0,0.15); }
  to { box-shadow: 0 0 14px rgba(255,215,0,0.6), 0 0 24px rgba(255,215,0,0.25); }
}
/* Avatar badge overlay (alpha/premium text) */
.gv-avatar-wrap { position: relative; display: inline-block; overflow: visible; border-radius: 50%; }
.gv-avatar-badge {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-size: 6px; font-weight: 900; padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; letter-spacing: 0.5px; z-index: 2; line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.gv-badge-alpha { background: linear-gradient(135deg, #BF5FFF, #8B3FC7); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.gv-badge-prem { background: linear-gradient(135deg, #FFD700, #FFA000); color: #1a0e2e; }

/* Gold name for premium users — used everywhere */
.gv-gold-name {
  font-weight: 800 !important;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: premGoldShimmer 3s ease-in-out infinite;
}
.chat-name-premium {
  font-weight: 800 !important;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: premGoldShimmer 3s ease-in-out infinite;
}
/* Name colors (unlockable via Veilstone Pass, premium, etc.) */
.chat-name-veilstone_purple { color: #BF5FFF !important; font-weight: 700; }
.chat-name-crimson { color: #FF4757 !important; font-weight: 700; }
.chat-name-ocean { color: #4FACFE !important; font-weight: 700; }
.chat-name-emerald { color: #2ECC71 !important; font-weight: 700; }
.chat-name-sunset { color: #FF6B35 !important; font-weight: 700; }
/* Founder — Ember Flow animated name */
.chat-name-founder {
  font-weight: 800 !important;
  background: linear-gradient(90deg, #FF8C00, #FFD700, #FF6600, #FFD700, #FF8C00) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gvNameFounder 2.5s ease-in-out infinite !important;
}
@keyframes gvNameFounder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Founder badge in chat */
.chat-founder-badge {
  width: 14px; height: 14px; object-fit: contain;
  vertical-align: middle; margin-right: 2px;
}

.chat-msg-me {
  color: #5dade2;
}
.chat-msg-stat {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(200,168,78,0.55);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chat-stat-icon {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  opacity: 0.7;
}
.chat-msg-level {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(200,168,78,0.4);
}
.chat-msg-time {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  color: rgba(200,168,78,0.25);
  margin-left: auto;
}
.chat-msg-text {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #d4c9a8;
  line-height: 1.4;
  word-break: break-word;
}

/* Error message */
.chat-msg-error {
  text-align: center;
  color: #e74c3c;
  font-size: 11px;
  font-style: italic;
  padding: 4px 0;
  border-bottom: none;
}

/* Input Area */
.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(200,168,78,0.15);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(200,168,78,0.2);
  border-radius: 8px;
  color: #d4c9a8;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 0.15s;
}
.chat-input:focus {
  border-color: rgba(200,168,78,0.5);
}
.chat-input::placeholder {
  color: rgba(200,168,78,0.25);
}
.chat-send-btn {
  background: linear-gradient(135deg, #c8a84e 0%, #a08030 100%);
  border: none;
  border-radius: 8px;
  color: #1a1510;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.chat-send-btn:not(:disabled):active {
  opacity: 0.8;
}

/* ── Player Profile Popup (from chat) ── */
.chat-profile {
  position: relative;
  text-align: center;
  width: 400px;
  max-width: 95vw;
  padding: 20px 24px 24px;
  margin: 0 auto;
  background: url('../img/panel-bg.webp?v=9.2.0') center/cover no-repeat;
  border: 2px solid rgba(255,215,0,0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  overflow: hidden;
}
.chat-profile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,5,30,0.25);
  pointer-events: none;
}
.chat-profile > * {
  position: relative;
  z-index: 1;
}
/* Class-themed profile card borders & overlays */
.chat-profile-class-warrior { border-color: rgba(255,71,87,0.35); }
.chat-profile-class-warrior::before { background: rgba(255,71,87,0.08); }
.chat-profile-class-mage { border-color: rgba(83,82,237,0.35); }
.chat-profile-class-mage::before { background: rgba(83,82,237,0.08); }
.chat-profile-class-blade_dancer { border-color: rgba(46,213,115,0.35); }
.chat-profile-class-blade_dancer::before { background: rgba(46,213,115,0.08); }

.chat-profile-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(200,168,78,0.5);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c8a84e;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  z-index: 10;
}
.chat-profile-close:hover { color: #e8d48e; background: rgba(0,0,0,0.85); }
.chat-profile-avatar-wrap {
  width: 120px;
  height: 120px;
  margin: 0 auto 8px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.chat-profile-avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  object-fit: cover;
  position: relative;
  z-index: 1;
  z-index: 2;
  pointer-events: none;
}
.chat-profile-name {
  font-family: 'Cinzel', serif;
  font-size: 22px;
  font-weight: 700;
  color: #e8d48e;
  margin-top: 18px;
}
.chat-profile-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 19px;
  margin-top: 2px;
}
.chat-profile-level {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: rgba(200,168,78,0.6);
}
.chat-profile-badge {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.chat-profile-divider {
  display: block;
  width: 99%;
  height: auto;
  margin: 6px auto 0;
}
.chat-profile-stats {
  display: flex;
  justify-content: center;
  gap: 39px;
  transform: translate(0px, -44px);
}
.chat-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.chat-profile-stat .stat-val {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.chat-profile-stat .stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(200,168,78,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-profile-power-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  font-size: 20px;
  transform: translate(0px, -33px);
}
.chat-profile-emblem {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-profile-emblem-icon {
  width: 32px;
  height: 32px;
}
.chat-profile-emblem-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.chat-profile-emblem-val {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #e8d48e;
  line-height: 1.1;
}
.chat-profile-emblem-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: rgba(200,168,78,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chat-profile-rank {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}
.chat-profile-record {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(200,168,78,0.4);
  transform: translate(0px, -31px);
}

/* Equipment + Skill Tree side by side */
.chat-profile-gear-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transform: translate(0px, -21px);
}
.chat-profile-equip {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  gap: 6px;
}
.chat-profile-eq-slot {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-profile-eq-slot.empty {
  background: rgba(0,0,0,0.2);
  border: 1px solid rgba(200,168,78,0.12);
  border-radius: 6px;
}
.chat-profile-eq-label {
  font-family: 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 600;
  color: rgba(200,168,78,0.2);
  text-transform: uppercase;
}
.chat-profile-tree {
  width: 106px;
  height: 106px;
  border-radius: 8px;
  border: 1px solid rgba(200,168,78,0.15);
  flex-shrink: 0;
}

/* Veilstone section */
.chat-profile-veilstone-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(200,168,78,0.04);
  border: 1px solid rgba(200,168,78,0.12);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 auto;
  max-width: 240px;
  font-size: 12px;
  transform: translate(-3px, -15px);
}
.chat-profile-vs-frame { flex-shrink: 0; }
.chat-profile-vs-frame.dim { opacity: 0.3; }
.chat-profile-vs-icon { width: 27px; height: 27px; }
.chat-profile-vs-info { flex: 1; text-align: left; }
.chat-profile-vs-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #c8a84e;
}
.chat-profile-vs-level {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(200,168,78,0.5);
}
.chat-profile-vs-level.dim { opacity: 0.4; }
.chat-profile-vs-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.chat-profile-vs-stats span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #8bc34a;
  font-weight: 500;
}
.chat-profile-vs-badge {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #c8a84e;
  background: rgba(200,168,78,0.1);
  border-radius: 6px;
  padding: 3px 8px;
  flex-shrink: 0;
}

.chat-profile-invite-btn {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; background: linear-gradient(135deg, rgba(76,175,80,0.15), rgba(76,175,80,0.05));
  border: 1px solid rgba(76,175,80,0.3); color: #4CAF50; transition: all 0.2s; text-align: center;
}
.chat-profile-invite-btn:hover { background: rgba(76,175,80,0.2); transform: translateY(-1px); }
.chat-profile-invite-btn:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Profile card: scale down on any screen narrower than the card */
@media (max-width: 600px) {
  .modal-overlay:has(.chat-profile) {
    padding: 5px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  .chat-profile {
    transform: scale(calc(min(1, (100vw - 10px) / 560)));
    transform-origin: top center;
  }
}

/* ── Mobile responsive ── */
@media (max-width: 600px) {
  .chat-tabs-bar {
    bottom: 52px;
    right: 4px;
  }
  .chat-bar-tab {
    padding: 4px 10px 3px;
    font-size: 10px;
  }
  .chat-tabs-bar-label {
    font-size: 7px;
    padding: 4px 6px 2px;
  }
  .chat-panel {
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    resize: none;
    position: fixed !important;
    z-index: 9999 !important;
    padding-top: env(safe-area-inset-top, 0) !important;
  }
  .chat-header { cursor: default; }
  .chat-messages { flex: 1 !important; max-height: none !important; }
  .chat-input-row { padding-bottom: env(safe-area-inset-bottom, 8px); }
  .chat-close-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 28px !important;
    background: rgba(255,68,68,0.15) !important;
    border: 1px solid rgba(255,68,68,0.3) !important;
    border-radius: 50% !important;
  }
}

/* Desktop: larger panel */
@media (min-width: 960px) {
  .chat-tabs-bar {
    bottom: 60px;
    right: 16px;
  }
  .chat-panel {
    bottom: 86px;
    right: 16px;
    width: 540px;
    max-height: 540px;
  }
}

/* ── Chat FAB (mobile only) ── */
.chat-fab {
  display: none;
  position: fixed;
  bottom: 76px;
  right: 12px;
  z-index: 800;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e1812, #2a1f14);
  border: 1px solid rgba(200,168,78,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
/* Show FAB on mobile (portrait + landscape). Desktop sidebar has qpChat. */
html.gv-port-mobile .chat-fab {
  display: flex !important;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  right: 12px;
}
html.gv-land-mobile .chat-fab {
  display: flex !important;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
}
.chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #f44336;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  text-align: center;
  line-height: 16px;
  padding: 0 3px;
}

/* ── QP Chat badge ── */
.qp-chat-badge {
  position: absolute;
  top: 0;
  right: 2px;
  background: #f44336;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  text-align: center;
  line-height: 14px;
  padding: 0 3px;
}
/* Chat notification dots — red for global, green for guild */
.chat-notif-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  color: #fff;
  pointer-events: none;
  z-index: 2;
  animation: chatNotifPulse 2s infinite;
}
.chat-notif-global {
  top: -4px;
  right: -2px;
  background: #f44336;
}
.chat-notif-guild {
  bottom: -4px;
  right: -2px;
  background: #4CAF50;
}
@keyframes chatNotifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ============================================
   GUILD TAB
   ============================================ */
#panelGuild {
  max-width: 700px;
  margin: 0 auto;
}
#panelGuild.guild-no-state {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Guild members drawer — desktop has it inline (300px column),
   mobile collapses it into a slide-out drawer on the right with a
   floating toggle button + tap-out backdrop. */
.guild-members-toggle {
  position: fixed;
  right: 14px;
  bottom: 170px;
  z-index: 220;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffd700, #c8a200);
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 215, 0, 0.4);
  color: #1a1410;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 0;
  font-weight: 900;
}
.guild-members-toggle .gmt-count {
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}
.guild-members-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 230;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.guild-members-backdrop.open {
  display: block;
  opacity: 1;
}

@media (max-width: 959px) {
  /* Desktop sidebar becomes a fixed drawer pinned to the right edge */
  .guild-members-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    width: min(86vw, 320px) !important;
    max-width: 320px;
    z-index: 240;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    background: linear-gradient(180deg, #14102c, #0a0716) !important;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.65);
    border-left: 1px solid rgba(255, 215, 0, 0.2) !important;
    overflow: hidden !important;
  }
  .guild-members-drawer.open {
    transform: translateX(0);
  }
  /* Inner scrollable list must have its own height for flex:1 to work on mobile.
     -webkit-overflow-scrolling enables momentum on iOS; overscroll-behavior
     keeps the touch inside the drawer instead of bleeding to the game/backdrop. */
  .guild-members-drawer > #guildSidebarMembers {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
  .guild-members-toggle { display: flex !important; }
  .guild-drawer-close { display: inline-block !important; }

  /* Tiles get the full mobile width */
  #panelGuild { max-width: none; }
  #panelGuild .guild-members-drawer ~ * {} /* placeholder — no-op */
}
.guild-loading {
  text-align: center;
  padding: 80px 20px;
  color: #aaa;
  font-size: 15px;
}

/* No Guild State — fullscreen hero */
#panelGuild.guild-no-state {
  max-width: none;
  padding: 0;
  margin: -14px;
}
.guild-no-guild {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.guild-no-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 800px;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}
.guild-no-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(20,18,40,0) 0%,
    rgba(20,18,40,0.15) 30%,
    rgba(20,18,40,0.7) 55%,
    rgba(20,18,40,0.95) 75%,
    rgba(20,18,40,1) 90%);
  pointer-events: none;
}
.guild-no-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 50px;
  max-width: 520px;
}
.guild-no-title {
  font-size: 36px;
  color: #FFD700;
  margin: 0 0 16px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 2px 16px rgba(255,215,0,0.4), 0 0 60px rgba(255,165,0,0.15);
  font-family: 'Cinzel', 'Georgia', serif;
}
.guild-no-desc {
  color: #c4c4d8;
  font-size: 17px;
  max-width: 460px;
  margin: 0 0 40px;
  line-height: 1.75;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.guild-no-actions {
  display: flex;
  gap: 18px;
}
.guild-no-actions .btn {
  min-width: 170px;
  padding: 15px 32px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.25s;
  cursor: pointer;
}
.guild-create-btn {
  background: linear-gradient(135deg, #FFD700 0%, #F5A623 100%) !important;
  color: #1a1a2e !important;
  box-shadow: 0 4px 28px rgba(255,215,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  border: none !important;
}
.guild-create-btn:hover {
  box-shadow: 0 8px 40px rgba(255,215,0,0.55), inset 0 1px 0 rgba(255,255,255,0.3);
  transform: translateY(-3px) scale(1.02);
}
.guild-browse-btn {
  background: rgba(20,18,40,0.6) !important;
  border: 2px solid rgba(255,215,0,0.35) !important;
  color: #FFD700 !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.guild-browse-btn:hover {
  background: rgba(255,215,0,0.12) !important;
  border-color: rgba(255,215,0,0.6) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/* ========== WORK SECTION ========== */
#panelWork {
  position: relative;
  min-height: 100%;
  background: url(../img/work/bg.webp) center center/cover no-repeat;
}
#panelWork::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,5,25,0.15) 0%, rgba(10,5,25,0.4) 100%);
  pointer-events: none;
}
#panelWork > * { position: relative; z-index: 1; }
.work-hero {
  text-align: right; margin-bottom: 16px; padding: 20px 16px 12px;
}
.work-hero .section-title { text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.work-hero-img { display: none; }
.work-subtitle { font-size: 13px; color: var(--text-dim); margin-top: 4px; max-width: 300px; margin-left: auto; margin-right: auto; line-height: 1.5; }

.work-card {
  background: rgba(10,5,25,0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  text-align: center;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

/* Rate card */
.work-rate-card { border-color: rgba(255,215,0,0.15); background: rgba(10,5,25,0.6); }
.work-rate-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.work-rate-val { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gold); display: flex; align-items: center; justify-content: center; gap: 6px; }
.work-rate-unit { font-size: 14px; font-weight: 400; color: var(--text-dim); }
.work-rate-info { font-size: 11px; color: var(--text-dim); margin-top: 4px; }

/* Duration grid */
.work-hours-label { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.work-hours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.work-hour-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; transition: all 0.2s;
}
.work-hour-btn:hover, .work-hour-btn:active { border-color: var(--gold); background: rgba(255,215,0,0.08); transform: scale(1.03); }
.work-hour-val { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; }
.work-hour-gold { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 3px; }
.work-hour-bonus {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  color: #6FE6A0;
  background: linear-gradient(135deg, rgba(46,213,115,0.25), rgba(46,213,115,0.1));
  border: 1px solid rgba(46,213,115,0.45);
  padding: 1px 5px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  text-shadow: 0 0 6px rgba(46,213,115,0.3);
}

/* Gold icons */
.work-gold-ico { width: 20px; height: 20px; vertical-align: -3px; }
.work-gold-ico-lg { width: 26px; height: 26px; vertical-align: -5px; }
.work-gold-ico-sm { width: 14px; height: 14px; }

/* How it works */
.work-info-card { text-align: left; }
.work-info-title { font-family: var(--font-display); font-size: 14px; color: var(--gold); margin-bottom: 10px; text-align: center; }
.work-info-row { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--text); margin-bottom: 8px; line-height: 1.4; }
.work-info-num { min-width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,215,0,0.12); color: var(--gold); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.work-info-divider { height: 1px; background: var(--border); margin: 10px 0; }
.work-info-warn { font-size: 11px; color: #FF6B81; margin-bottom: 4px; line-height: 1.4; }

/* Active / Done states */
.work-state-img { width: 120px; height: 120px; object-fit: contain; margin-bottom: 10px; }
.work-status-text { font-family: var(--font-display); font-size: 18px; color: var(--gold); margin-bottom: 12px; }
.work-timer { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--text-bright); margin-bottom: 12px; letter-spacing: 1px; }
.work-progress-wrap {
  height: 10px; border-radius: 5px; background: rgba(255,255,255,0.06);
  overflow: hidden; margin-bottom: 14px;
}
.work-progress-bar { height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold), #f0c040); transition: width 1s linear; }
.work-earnings { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.work-reward { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--gold); margin: 16px 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.work-warn { font-size: 11px; color: #FF6B81; margin-bottom: 16px; }
.work-action-btn { width: 100%; max-width: 240px; font-size: 14px; padding: 12px; }

/* Guild Header */
.guild-header {
  background: linear-gradient(135deg, rgba(255,215,0,0.1) 0%, rgba(255,165,0,0.05) 100%);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.guild-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FFD700, transparent);
}
.guild-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.guild-header-tag {
  color: #FFD700;
  font-weight: 700;
  font-size: 16px;
}
.guild-header-name {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.guild-header-level {
  color: #aaa;
  font-size: 13px;
  margin-left: auto;
}
.guild-xp-bar {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.guild-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  border-radius: 3px;
  transition: width 0.3s;
}
.guild-header-meta {
  color: #888;
  font-size: 12px;
}
.guild-motd {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  color: #ccc;
  font-size: 13px;
  font-style: italic;
}

/* Guild Sections */
.guild-section {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
}
.guild-section-title {
  color: #FFD700;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guild-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,215,0,0.3), transparent);
}

/* Daily Goal */
.guild-goal-bar {
  position: relative;
  height: 28px;
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
.guild-goal-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #66BB6A);
  border-radius: 14px;
  transition: width 0.3s;
}
.guild-goal-fill.guild-goal-met {
  background: linear-gradient(90deg, #FFD700, #FFA500);
}
.guild-goal-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.guild-goal-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.guild-goal-claimed {
  color: #66BB6A;
  font-size: 13px;
  font-weight: 600;
}

/* Treasury */
.guild-treasury-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.guild-res {
  font-size: 14px;
  color: #ddd;
  background: rgba(255,255,255,0.04);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Buildings Grid */
/* Guild Buildings v2 */
.gbld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gbld-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
  padding: 14px; transition: all 0.2s;
}
.gbld-card:hover { border-color: rgba(255,255,255,0.12); box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.gbld-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gbld-icon {
  width: 72px; height: 72px; border-radius: 14px; border: 2px solid;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 28px; overflow: hidden;
}
.gbld-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.gbld-title { flex: 1; min-width: 0; }
.gbld-name { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
.gbld-lvl { font-size: 12px; font-weight: 700; }
.gbld-bar {
  width: 100%; height: 14px; background: rgba(255,255,255,0.06); border-radius: 7px;
  margin-bottom: 8px; position: relative; overflow: hidden;
}
.gbld-bar-fill { height: 100%; border-radius: 7px; transition: width 0.3s; opacity: 0.7; }
.gbld-bar-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: rgba(255,255,255,0.6); letter-spacing: 0.3px;
}
.gbld-bonus-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; }
.gbld-bonus-label { font-size: 10px; color: #666; font-weight: 600; }
.gbld-bonus-val { font-size: 11px; font-weight: 700; }
.gbld-status-max {
  text-align: center; font-size: 11px; color: #2ED573; font-weight: 700;
  margin-top: 8px; padding: 6px; background: rgba(46,213,115,0.08);
  border: 1px solid rgba(46,213,115,0.15); border-radius: 8px;
}
.gbld-upgrade-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
  margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(255,215,0,0.25);
  border-radius: 10px; background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,165,0,0.05));
  cursor: pointer; transition: all 0.2s;
}
.gbld-upgrade-btn:hover { background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,165,0,0.1)); border-color: rgba(255,215,0,0.4); transform: translateY(-1px); }
.gbld-upgrade-label { font-size: 11px; font-weight: 800; color: #FFD700; letter-spacing: 0.3px; }
.gbld-upgrade-cost { font-size: 10px; color: #aaa; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.gbld-no-funds { opacity: 0.35; cursor: not-allowed; }
.gbld-no-funds:hover { transform: none; }
.gbld-upgrade-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (max-width: 700px) { .gbld-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 450px) { .gbld-grid { grid-template-columns: 1fr; } }

/* Skill Paths */
.guild-skill-paths {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guild-skill-path {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
}
.guild-path-header {
  font-size: 13px;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 8px;
}
.guild-path-nodes {
  display: flex;
  gap: 4px;
  align-items: center;
  position: relative;
}
.guild-path-nodes::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  z-index: 0;
}
.guild-skill-node {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: default;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
  background: #1a1a2e;
}
.guild-skill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
}
.guild-skill-unlocked {
  border-color: #FFD700;
}
.guild-skill-unlocked .guild-skill-dot {
  background: #FFD700;
  box-shadow: 0 0 6px rgba(255,215,0,0.5);
}
.guild-skill-available {
  border-color: rgba(100,200,255,0.5);
  cursor: pointer;
}
.guild-skill-available:hover {
  border-color: #64C8FF;
  transform: scale(1.15);
}
.guild-skill-available .guild-skill-dot {
  background: rgba(100,200,255,0.4);
}

/* Members List */
.guild-members-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.guild-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.guild-member-row:hover {
  background: rgba(255,215,0,0.08);
}
.guild-member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.guild-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.guild-member-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.guild-member-name {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.guild-member-badge {
  font-size: 11px;
  font-weight: 700;
}
.guild-member-level {
  color: #aaa;
  font-size: 11px;
}
.guild-member-role {
  font-size: 11px;
  color: #FFD700;
}
.guild-member-power {
  color: #aaa;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.guild-kick-btn {
  font-size: 11px !important;
  padding: 2px 6px !important;
  color: #f44 !important;
  background: rgba(244,67,54,0.1) !important;
  border: 1px solid rgba(244,67,54,0.3) !important;
}

/* Guild Actions Section */
.guild-actions-section {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Chat guild tag — pushed to right */
.chat-msg-tag {
  color: #FFD700;
  font-weight: 700;
  font-size: 10px;
  margin-left: auto;
  opacity: 0.7;
}

/* Chat FOUNDER pill — shown next to nick for anyone with founder status */
.chat-msg-founder-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 3px;
  background: linear-gradient(135deg, #FF8C00, #FFD700);
  color: #1a0e00;
  letter-spacing: 0.8px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Veil War faction badges — shown next to player names everywhere */
.chat-msg-faction {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 4px;
  vertical-align: middle;
  filter: drop-shadow(0 0 2px currentColor);
  cursor: help;
}
.chat-faction-warden {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
}
.chat-faction-seeker {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.chat-profile-faction {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  vertical-align: middle;
}
.chat-profile-faction.chat-faction-warden {
  color: #FFD700;
}
.chat-profile-faction.chat-faction-seeker {
  color: #C084FC;
}
/* Generic faction badge used in rankings / arena / guild members */
.gv-faction-tag {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  cursor: help;
}
.gv-faction-tag.warden {
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.35);
  color: #FFD700;
}
.gv-faction-tag.seeker {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #C084FC;
}

/* Guild Modals */
.guild-create-modal,
.guild-browse-modal,
.guild-donate-modal,
.guild-settings-modal {
  max-width: 400px;
  margin: 0 auto;
}
.guild-create-modal h2,
.guild-browse-modal h2,
.guild-donate-modal h2,
.guild-settings-modal h2 {
  color: #FFD700;
  font-size: 20px;
  margin: 0 0 16px;
  text-align: center;
}
.guild-create-cost {
  text-align: center;
  margin-bottom: 16px;
  font-size: 14px;
  color: #bbb;
}
.gold-text { color: #FFD700; font-weight: 600; }
.crystal-text { color: #64B5F6; font-weight: 600; }
.guild-create-warn {
  text-align: center;
  color: #f44;
  font-size: 13px;
  margin-bottom: 8px;
}
.guild-input-label {
  display: block;
  color: #aaa;
  font-size: 12px;
  margin-bottom: 4px;
  margin-top: 10px;
}
.guild-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}
.guild-input:focus {
  border-color: rgba(255,215,0,0.4);
}
.guild-input option, select.guild-input option {
  background: #1a1a2e; color: #fff;
}
.guild-textarea {
  min-height: 60px;
  resize: vertical;
}
.guild-create-actions,
.guild-donate-actions,
.guild-settings-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.guild-donate-balance {
  text-align: center;
  color: #bbb;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Guild Search / Browse */
.guild-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.guild-search-row .guild-input {
  flex: 1;
}
.guild-search-results {
  max-height: 350px;
  overflow-y: auto;
}
.guild-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.guild-search-item:last-child {
  border-bottom: none;
}
.guild-search-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.guild-search-tag {
  color: #FFD700;
  font-weight: 700;
  font-size: 12px;
}
.guild-search-name {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}
.guild-search-meta {
  color: #888;
  font-size: 11px;
}
.guild-empty {
  text-align: center;
  color: #888;
  padding: 30px;
  font-size: 14px;
}

/* ── Guild Hub Layout ───────────────────────── */
.gh-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gh-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.gh-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 30, 0.75);
}
.gh-layout {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  gap: 0;
}
.gh-main {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ── Guild Hub Header ──────────────────────── */
.gh-header {
  background: rgba(255,215,0,0.06);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.gh-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFD700, transparent);
}
.gh-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.gh-tag { color: #FFD700; font-weight: 700; font-size: 16px; }
.gh-name { color: #fff; font-size: 18px; font-weight: 700; }
.gh-level { color: #aaa; font-size: 13px; }
.gh-members-count { margin-left: auto; color: #888; font-size: 13px; }
.gh-xp-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.gh-xp-fill { height: 100%; background: linear-gradient(90deg, #FFD700, #FFA500); border-radius: 3px; transition: width 0.3s; }
.gh-motd { margin-top: 8px; color: #999; font-size: 13px; font-style: italic; padding: 6px 10px; background: rgba(0,0,0,0.15); border-radius: 8px; }

/* ── Tiles Grid ────────────────────────────── */
.gh-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  flex: 1;
}
.gh-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 14px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gh-tile:hover {
  border-color: rgba(255,215,0,0.3);
  background: rgba(255,215,0,0.06);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.gh-tile-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 6px rgba(255,215,0,0.2));
}
.gh-tile-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.gh-tile-sub {
  color: #888;
  font-size: 11px;
  line-height: 1.3;
}
.gh-tile-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.gh-tile-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4CAF50, #66BB6A);
  border-radius: 2px;
  transition: width 0.3s;
}
.gh-tile-danger {
  border-color: rgba(244,67,54,0.15);
}
.gh-tile-danger:hover {
  border-color: rgba(244,67,54,0.4);
  background: rgba(244,67,54,0.06);
}
.gh-tile-danger .gh-tile-title { color: #e57373; }

/* ── Members Sidebar ───────────────────────── */
.gh-sidebar {
  width: 220px;
  border-left: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  padding: 16px 12px;
  overflow-y: auto;
  flex-shrink: 0;
}
.gh-sidebar-title {
  color: #FFD700;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,215,0,0.15);
}
.gh-sidebar-count {
  color: #888;
  font-weight: 400;
}
.gh-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 2px;
}
.gh-member:hover {
  background: rgba(255,215,0,0.08);
}
.gh-member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.gh-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gh-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
  border: 2px solid rgba(10,8,30,0.9);
}
.gh-status-dot.gh-online {
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76,175,80,0.5);
}
.gh-member-info {
  flex: 1;
  min-width: 0;
}
.gh-member-top {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gh-member-name {
  color: #ddd;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gh-member-meta {
  color: #777;
  font-size: 11px;
}
.gh-member-ago {
  color: #555;
}
.gh-role-badge {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .gh-sidebar { display: none; }
  .gh-tiles { grid-template-columns: repeat(2, 1fr); }
  .gh-main { padding: 14px 12px; }
}
@media (max-width: 480px) {
  .gh-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gh-tile { padding: 14px 10px 10px; }
  .gh-tile-icon { width: 40px; height: 40px; }
}


@keyframes gv-lu-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.1); }
  50% { box-shadow: 0 0 30px rgba(255,215,0,0.25); }
}
@keyframes abyssGlow {
  0% { box-shadow: 0 0 12px rgba(255,69,0,0.15), inset 0 0 8px rgba(255,69,0,0.05); }
  100% { box-shadow: 0 0 24px rgba(255,69,0,0.35), inset 0 0 14px rgba(255,69,0,0.1); }
}

@keyframes csBadgePulse {
  0%, 100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  50% { transform: translateX(-50%) scale(1.06); filter: brightness(1.18); }
}
.cs-badge-pulse {
  animation: csBadgePulse 2s ease-in-out infinite;
}

/* ── Guild Depths Full Page ──────────────────────────────── */
.gd-bg { position: absolute; inset: 0; z-index: 0; }
.gd-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.gd-bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,26,0.88) 0%, rgba(10,8,26,0.95) 50%, rgba(10,8,26,0.98) 100%); }
.gd-scroll { position: absolute; inset: 0; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gd-content { max-width: 900px; margin: 0 auto; padding: 16px 24px 40px; }
.gd-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: #888; font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 0; margin-bottom: 8px; transition: color 0.2s; }
.gd-back:hover { color: #ccc; }

/* Desktop two-column grid */
.gd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gd-col { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 700px) {
  .gd-grid { grid-template-columns: 1fr; }
  .gd-content { padding: 12px 14px 40px; }
}

/* Header */
.gd-header { text-align: center; padding: 16px 0 20px; }
.gd-header-icon { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 16px rgba(255,69,0,0.3)); margin-bottom: 10px; }
.gd-title { font-size: 28px; font-weight: 900; color: #FF6347; text-shadow: 0 0 30px rgba(255,69,0,0.3); letter-spacing: 3px; font-family: Cinzel, serif; }
.gd-floor-label { margin-top: 8px; color: #999; font-size: 14px; font-weight: 600; }
.gd-floor-num { color: #FFD700; font-weight: 900; font-size: 18px; }
.gd-progress-bar { margin: 12px auto 0; max-width: 240px; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.gd-progress-fill { height: 100%; background: linear-gradient(90deg, #FF6347, #FFD700); border-radius: 3px; transition: width 0.3s; }

/* Sections */
.gd-section { background: rgba(15,12,40,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 20px; margin-bottom: 14px; backdrop-filter: blur(8px); }
.gd-col .gd-section { margin-bottom: 0; }
.gd-label { color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px; }

/* Boss card */
.gd-boss-card { text-align: center; }
.gd-boss-img { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; border: 3px solid rgba(255,69,0,0.4); box-shadow: 0 0 40px rgba(255,69,0,0.15); }
.gd-boss-name { margin-top: 12px; color: #FF6347; font-size: 20px; font-weight: 800; font-family: Cinzel, serif; }
.gd-boss-meta { color: #888; font-size: 12px; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.gd-power-icon { width: 12px; height: 12px; vertical-align: middle; opacity: 0.7; }

/* Minions */
.gd-minions { display: flex; justify-content: center; gap: 14px; margin-top: 18px; }
.gd-minion { padding: 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; text-align: center; width: 100px; }
.gd-minion-img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 6px; }
.gd-minion-name { color: #ccc; font-size: 10px; font-weight: 600; }

/* Rewards */
.gd-rewards { display: flex; gap: 0; background: rgba(255,215,0,0.03); border: 1px solid rgba(255,215,0,0.08); border-radius: 12px; overflow: hidden; }
.gd-rewards-col { flex: 1; text-align: center; padding: 14px 12px; }
.gd-rewards-divider { width: 1px; background: rgba(255,255,255,0.06); }
.gd-rewards-label { color: #888; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600; }
.gd-rewards-row { display: flex; justify-content: center; gap: 12px; font-size: 13px; font-weight: 700; }
.gd-rewards-note { color: #555; font-size: 9px; margin-top: 6px; }
.gd-reward-item { display: flex; align-items: center; gap: 4px; color: #FFD700; }
.gd-reward-item.gd-reward-xp { color: #64B5F6; }
.gd-reward-icon { width: 15px; height: 15px; }
.gd-reward-claimed { margin-top: 14px; padding: 14px; background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.15); border-radius: 10px; }

/* How it works */
.gd-info-grid { display: flex; flex-direction: column; gap: 10px; }
.gd-info-item { display: flex; align-items: flex-start; gap: 12px; }
.gd-info-num { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,69,0,0.1); border: 1px solid rgba(255,69,0,0.2); border-radius: 50%; color: #FF6347; font-size: 12px; font-weight: 800; }
.gd-info-text { color: #aaa; font-size: 12px; line-height: 1.5; padding-top: 4px; }
.gd-info-text strong { color: #ddd; }

/* Buttons */
.gd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; border: none; border-radius: 12px; font-size: 14px; font-weight: 800; cursor: pointer; letter-spacing: 0.5px; transition: all 0.2s; }
.gd-btn-fire { background: linear-gradient(135deg, #FF6347, #FF4500); color: #fff; box-shadow: 0 4px 20px rgba(255,69,0,0.3); }
.gd-btn-green { background: linear-gradient(135deg, #2ED573, #1e8449); color: #fff; box-shadow: 0 4px 15px rgba(46,213,115,0.3); }
.gd-btn-purple { background: linear-gradient(135deg, #7C4DFF, #651FFF); color: #fff; box-shadow: 0 4px 15px rgba(124,77,255,0.3); }
.gd-btn-lg { padding: 14px 40px; font-size: 16px; letter-spacing: 1px; text-transform: uppercase; width: 100%; }
.gd-btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.gd-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* Start raid section */
.gd-start-section { text-align: center; }
.gd-start-cost { margin-bottom: 14px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gd-treasury-note { color: #555; font-size: 11px; margin-left: 8px; }
.gd-start-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.gd-select { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #ccc; padding: 6px 12px; font-size: 13px; }

/* Cooldown */
.gd-cooldown { text-align: center; padding: 8px 0; }
.gd-cooldown-title { color: #FF6347; font-size: 16px; font-weight: 800; }
.gd-cooldown-time { color: #ddd; font-size: 28px; font-weight: 900; margin-top: 4px; }
.gd-cooldown-sub { color: #666; font-size: 11px; margin-top: 4px; }
.gd-cooldown-divider { width: 60px; height: 1px; background: rgba(255,255,255,0.06); margin: 14px auto; }

/* Result banner */
.gd-result-banner { text-align: center; }
.gd-result-win { border-color: rgba(46,213,115,0.2); background: rgba(15,12,40,0.6); }
.gd-result-lose { border-color: rgba(255,71,87,0.2); background: rgba(15,12,40,0.6); }
.gd-result-title { font-size: 22px; font-weight: 900; font-family: Cinzel, serif; }
.gd-result-win .gd-result-title { color: #2ED573; text-shadow: 0 0 20px rgba(46,213,115,0.3); }
.gd-result-lose .gd-result-title { color: #FF4757; text-shadow: 0 0 20px rgba(255,71,87,0.3); }
.gd-result-sub { color: #888; font-size: 12px; margin-top: 4px; }
.gd-result-table { margin-top: 16px; text-align: left; }
.gd-result-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; margin-bottom: 2px; }
.gd-result-me { background: rgba(255,99,71,0.08); }
.gd-result-icon { font-size: 13px; width: 18px; text-align: center; }
.gd-result-name { color: #ccc; font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-result-dmg { color: #FF6347; font-size: 12px; font-weight: 700; }

/* Signup state */
.gd-signup-active { text-align: center; border-color: rgba(255,69,0,0.2); }
.gd-signup-status { color: #FF6347; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.gd-signup-timer { color: #FF6347; font-size: 32px; font-weight: 900; margin: 6px 0; text-shadow: 0 0 20px rgba(255,69,0,0.3); }
.gd-signup-count { color: #888; font-size: 12px; margin-bottom: 16px; }
.gd-boss-mini { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: rgba(0,0,0,0.2); border-radius: 12px; margin-bottom: 16px; }
.gd-boss-mini-img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(255,69,0,0.3); }
.gd-boss-mini-name { color: #FF6347; font-size: 14px; font-weight: 800; font-family: Cinzel, serif; }
.gd-boss-mini-floor { color: #888; font-size: 11px; margin-top: 2px; }
.gd-signup-list { margin-top: 14px; }
.gd-signup-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.gd-signup-rank { color: #555; font-size: 11px; width: 20px; text-align: right; }
.gd-signup-name { color: #ccc; font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-signup-lvl { color: #888; font-size: 11px; }
.gd-signup-power { font-size: 10px; color: rgba(200,168,78,0.7); display: flex; align-items: center; gap: 2px; }
.gd-signed-badge { padding: 12px 28px; background: rgba(46,213,115,0.1); border: 1px solid rgba(46,213,115,0.3); border-radius: 12px; color: #2ED573; font-size: 14px; font-weight: 700; }

/* ── Achievement System ────────────────────────────────── */
.home-ach-card {
  background: linear-gradient(135deg, rgba(25,15,45,0.9), rgba(15,10,30,0.95));
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
}
.home-ach-card:active { transform: scale(0.98); }
.home-ach-card:hover { border-color: rgba(255,215,0,0.3); }
.home-ach-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.home-ach-daily { display: flex; align-items: center; gap: 6px; }
.home-ach-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); }
.home-ach-dot.done { background: #66BB6A; border-color: #66BB6A; box-shadow: 0 0 6px rgba(102,187,106,0.4); }

/* Achievement Modal */
.ach-modal { max-width: 600px; margin: 0 auto; }
.ach-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.ach-modal-title { font-family: var(--font-display); font-size: 20px; color: var(--gold); }
.ach-modal-ap { font-size: 13px; font-weight: 700; }
.ach-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.ach-tab {
  padding: 6px 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03);
  border-radius: 6px; color: #888; font-size: 11px; font-weight: 700; cursor: pointer; transition: all 0.2s;
}
.ach-tab:hover { border-color: rgba(255,255,255,0.15); color: #ccc; }
.ach-tab-active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: var(--gold); }
.ach-tab { position: relative; }
.ach-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: #FF4757; color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 8px; margin-left: 3px; line-height: 1;
}
.ach-content { max-height: 65vh; overflow-y: auto; padding-right: 4px; }

/* Challenge Cards */
.ach-challenges-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.ach-challenge-card {
  display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); transition: border-color 0.2s;
}
.ach-challenge-done { border-color: rgba(102,187,106,0.25); }
.ach-challenge-info { flex: 1; min-width: 0; }
.ach-challenge-name { font-size: 13px; font-weight: 700; color: #ddd; }
.ach-challenge-desc { font-size: 11px; color: #888; margin-bottom: 4px; }
.ach-challenge-rewards { display: flex; align-items: center; gap: 8px; }
.ach-challenge-right { text-align: right; flex-shrink: 0; min-width: 80px; }
.ach-challenge-progress-text { font-size: 11px; color: #aaa; font-weight: 700; margin-bottom: 4px; }
.ach-bonus-card {
  padding: 12px; margin-top: 12px;
  background: rgba(255,215,0,0.04); border: 1px solid rgba(255,215,0,0.12);
  border-radius: var(--radius);
}

/* Progress Bars */
.ach-progress-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.ach-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4FACFE, #00f2fe); transition: width 0.5s; }
.ach-progress-gold { background: linear-gradient(90deg, #F0C040, #E09530); }

/* Claim Buttons */
.ach-claim-btn {
  padding: 4px 12px; background: linear-gradient(135deg, #F0C040, #E09530); color: #1a1035;
  border: none; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px; transition: transform 0.1s;
}
.ach-claim-btn:hover { transform: scale(1.05); }
.ach-claim-btn:active { transform: scale(0.95); }
.ach-claim-bonus { font-size: 13px; padding: 8px 16px; width: 100%; }
.ach-claimed-badge { font-size: 10px; color: #66BB6A; font-weight: 700; }

/* Achievement Cards (category view) */
.ach-card {
  padding: 14px; margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(25,15,45,0.8), rgba(15,10,30,0.9));
  border: 1px solid rgba(255,255,255,0.06); border-left: 3px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); transition: border-color 0.3s;
}
.ach-card-main { display: flex; align-items: flex-start; gap: 10px; }
.ach-card-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.ach-card-info { flex: 1; min-width: 0; }
.ach-card-name { font-size: 14px; font-weight: 700; color: #ddd; margin-bottom: 2px; }
.ach-card-desc { font-size: 11px; color: #888; margin-bottom: 4px; }
.ach-reward-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; margin-top: 4px; }
.ach-rew { display: inline-flex; align-items: center; gap: 2px; color: #ccc; font-weight: 600; font-size: 11px; }
.ach-rew-icon { width: 14px; height: 14px; vertical-align: middle; }
.ach-unclaimed-row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 10px;
  background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.12);
  border-radius: 6px;
}
.ach-unclaimed-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }

/* Unlock Popup Overlay */
.ach-unlock-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.8);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.4s;
}
.ach-unlock-overlay.ach-unlock-visible { opacity: 1; }
.ach-unlock-card {
  background: linear-gradient(135deg, rgba(30,20,50,0.98), rgba(20,12,40,0.99));
  border: 2px solid rgba(255,215,0,0.3); border-radius: 16px;
  padding: 30px 24px; text-align: center; max-width: 340px; width: 90%;
  box-shadow: 0 0 60px rgba(255,215,0,0.15), 0 0 120px rgba(255,215,0,0.05);
  transform: scale(0.8); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.ach-unlock-visible .ach-unlock-card { transform: scale(1); }
.ach-unlock-icon { font-size: 56px; margin-bottom: 12px; animation: achIconBounce 0.6s ease-out; }
.ach-unlock-title {
  font-family: var(--font-display); font-size: 18px; color: var(--gold);
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(255,215,0,0.4);
}
.ach-unlock-name { font-size: 16px; color: #fff; font-weight: 700; margin-bottom: 4px; }
.ach-unlock-tier { font-size: 12px; color: #888; margin-bottom: 14px; }
.ach-unlock-rewards { display: flex; justify-content: center; gap: 16px; font-size: 14px; font-weight: 700; color: #ddd; margin-bottom: 8px; }
.ach-unlock-title-earned { font-size: 13px; color: #BF5FFF; font-weight: 700; font-style: italic; }
/* Title in chat */
.chat-msg-title {
  font-size: 9px;
  color: #BF5FFF;
  background: rgba(191,95,255,0.1);
  border: 1px solid rgba(191,95,255,0.2);
  border-radius: 3px;
  padding: 1px 5px;
  font-weight: 600;
  margin-left: 4px;
  font-style: normal;
}
/* Title tiers — chat badges */
.chat-title-common { /* default purple, no extra styles */ }
.chat-title-rare {
  color: #4FACFE;
  background: rgba(79,172,254,0.1);
  border-color: rgba(79,172,254,0.25);
}
.chat-title-epic {
  color: #BF5FFF;
  background: rgba(191,95,255,0.12);
  border-color: rgba(191,95,255,0.3);
  animation: titlePulseEpic 3s ease-in-out infinite;
}
.chat-title-legendary {
  color: #FFB340;
  background: rgba(255,179,64,0.1);
  border-color: rgba(255,179,64,0.3);
  animation: titlePulseLegendary 2.5s ease-in-out infinite;
  text-shadow: 0 0 4px rgba(255,179,64,0.3);
}
.chat-title-mythic {
  background: linear-gradient(90deg, rgba(255,71,87,0.1), rgba(191,95,255,0.1), rgba(79,172,254,0.1));
  border-color: rgba(255,215,0,0.3);
  animation: titleRainbow 4s linear infinite;
  text-shadow: 0 0 6px rgba(255,215,0,0.3);
}
.chat-title-admin {
  color: #FF4757;
  background: linear-gradient(90deg, rgba(255,71,87,0.15), rgba(255,40,40,0.08));
  border-color: rgba(255,71,87,0.4);
  text-shadow: 0 0 8px rgba(255,71,87,0.5);
  animation: titleFlameAdmin 2s ease-in-out infinite;
  font-weight: 700;
  letter-spacing: 0.5px;
}
@keyframes titlePulseEpic {
  0%, 100% { border-color: rgba(191,95,255,0.2); }
  50% { border-color: rgba(191,95,255,0.5); text-shadow: 0 0 4px rgba(191,95,255,0.2); }
}
@keyframes titlePulseLegendary {
  0%, 100% { text-shadow: 0 0 3px rgba(255,179,64,0.2); }
  50% { text-shadow: 0 0 8px rgba(255,179,64,0.5); border-color: rgba(255,179,64,0.5); }
}
@keyframes titleRainbow {
  0% { color: #FF4757; }
  25% { color: #FFB340; }
  50% { color: #4FACFE; }
  75% { color: #BF5FFF; }
  100% { color: #FF4757; }
}
@keyframes titleFlameAdmin {
  0%, 100% { text-shadow: 0 0 6px rgba(255,71,87,0.4); border-color: rgba(255,71,87,0.3); }
  50% { text-shadow: 0 0 12px rgba(255,71,87,0.7), 0 0 20px rgba(255,40,40,0.3); border-color: rgba(255,71,87,0.6); }
}
/* Alpha Tester — cyan/electric */
.chat-title-alpha {
  color: #00E5FF;
  background: linear-gradient(90deg, rgba(0,229,255,0.1), rgba(0,176,255,0.08));
  border-color: rgba(0,229,255,0.35);
  animation: titleAlpha 2.5s ease-in-out infinite;
  font-weight: 700; letter-spacing: 0.3px;
}
@keyframes titleAlpha {
  0%, 100% { text-shadow: 0 0 4px rgba(0,229,255,0.3); }
  50% { text-shadow: 0 0 10px rgba(0,229,255,0.6), 0 0 18px rgba(0,176,255,0.2); border-color: rgba(0,229,255,0.5); }
}
/* Beta Tester — emerald green */
.chat-title-beta {
  color: #2ECC71;
  background: rgba(46,204,113,0.1);
  border-color: rgba(46,204,113,0.3);
  animation: titleBeta 3s ease-in-out infinite;
  font-weight: 600;
}
@keyframes titleBeta {
  0%, 100% { text-shadow: 0 0 3px rgba(46,204,113,0.2); }
  50% { text-shadow: 0 0 8px rgba(46,204,113,0.5); border-color: rgba(46,204,113,0.5); }
}

/* Title tiers — profile card */
.chat-profile-title {
  text-align: center; font-size: 11px; font-style: italic;
  margin: 2px 0 0; letter-spacing: 0.5px;
}
.chat-profile-title-common { color: #BF5FFF; }
.chat-profile-title-rare { color: #4FACFE; }
.chat-profile-title-epic { color: #BF5FFF; animation: titlePulseEpicText 3s ease-in-out infinite; }
.chat-profile-title-legendary { color: #FFB340; font-weight: 700; animation: titlePulseLegendaryText 2.5s ease-in-out infinite; }
.chat-profile-title-mythic { font-weight: 700; animation: titleRainbow 4s linear infinite; }
.chat-profile-title-admin {
  color: #FF4757; font-weight: 700; font-size: 12px;
  animation: titleFlameAdmin 2s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,71,87,0.5);
}
.chat-profile-title-alpha {
  color: #00E5FF; font-weight: 700;
  animation: titleAlpha 2.5s ease-in-out infinite;
}
.chat-profile-title-beta {
  color: #2ECC71; font-weight: 600;
  animation: titleBeta 3s ease-in-out infinite;
}
@keyframes titlePulseEpicText {
  0%, 100% { text-shadow: none; }
  50% { text-shadow: 0 0 6px rgba(191,95,255,0.4); }
}
@keyframes titlePulseLegendaryText {
  0%, 100% { text-shadow: 0 0 3px rgba(255,179,64,0.2); }
  50% { text-shadow: 0 0 10px rgba(255,179,64,0.5); }
}

/* Title tiers — rankings */
.rank-title { font-size: 10px; font-style: italic; }
.rank-title-common { color: #BF5FFF; }
.rank-title-rare { color: #4FACFE; }
.rank-title-epic { color: #BF5FFF; animation: titlePulseEpicText 3s ease-in-out infinite; }
.rank-title-legendary { color: #FFB340; animation: titlePulseLegendaryText 2.5s ease-in-out infinite; }
.rank-title-mythic { animation: titleRainbow 4s linear infinite; }
.rank-title-admin { color: #FF4757; font-weight: 700; animation: titleFlameAdmin 2s ease-in-out infinite; }
.rank-title-alpha { color: #00E5FF; font-weight: 700; animation: titleAlpha 2.5s ease-in-out infinite; }
.rank-title-beta { color: #2ECC71; animation: titleBeta 3s ease-in-out infinite; }
/* Title selector in modal */
.ach-title-selector {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius);
}
.ach-title-select {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #ddd;
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
}
.ach-title-select option { background: #1a1035; color: #ddd; }
@keyframes achIconBounce {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================
   DAILY BOSS SYSTEM
   ============================================ */

/* Home banner */
.daily-boss-banner {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(40,15,60,0.95), rgba(20,8,35,0.98));
  border: 1px solid rgba(150,80,255,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
  animation: dailyBossPulse 3s ease-in-out infinite;
}
.daily-boss-banner:active { transform: scale(0.98); }
.daily-boss-banner:hover { border-color: rgba(150,80,255,0.5); }

/* April Fools — Fake Admin Panel banner */
.af-admin-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(60,10,10,0.95), rgba(30,5,5,0.98));
  border: 1px solid rgba(255,68,68,0.3);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.1s;
  animation: afAdminPulse 2s ease-in-out infinite;
}
.af-admin-banner:active { transform: scale(0.98); }
.af-admin-banner:hover { border-color: rgba(255,68,68,0.6); }
@keyframes afAdminPulse {
  0%, 100% { border-color: rgba(255,68,68,0.3); box-shadow: 0 0 8px rgba(255,0,0,0.1); }
  50% { border-color: rgba(255,68,68,0.5); box-shadow: 0 0 16px rgba(255,0,0,0.2); }
}

@keyframes dailyBossPulse {
  0%, 100% { border-color: rgba(150,80,255,0.25); box-shadow: 0 0 8px rgba(150,80,255,0.1); }
  50% { border-color: rgba(150,80,255,0.5); box-shadow: 0 0 16px rgba(150,80,255,0.2); }
}

.daily-boss-banner-icon { font-size: 28px; }
.daily-boss-banner-info { flex: 1; min-width: 0; }
.daily-boss-banner-title {
  font-family: var(--font-display); font-size: 14px; color: #ddd;
  letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.daily-boss-banner-status { font-size: 11px; color: #888; margin-top: 2px; }
.daily-boss-banner-arrow { font-size: 24px; color: rgba(150,80,255,0.5); font-weight: bold; }

.daily-boss-badge-active {
  display: inline-block; font-size: 9px; font-weight: 800;
  background: #FF4757; color: #fff; padding: 2px 6px;
  border-radius: 4px; margin-left: 6px; vertical-align: middle;
  animation: dailyBossActivePulse 1.5s ease-in-out infinite;
}
@keyframes dailyBossActivePulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.6; }
}

/* Boss modal */
.daily-boss-modal {
  max-width: 500px; width: 100%;
  background: linear-gradient(135deg, rgba(18,10,35,0.98), rgba(10,5,20,0.99));
  border: 2px solid rgba(150,80,255,0.2);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 30px rgba(150,80,255,0.1);
  max-height: 90vh; overflow-y: auto;
}
.daily-boss-modal .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.daily-boss-modal .modal-title {
  font-family: var(--font-display); font-size: 18px; color: var(--gold); letter-spacing: 2px;
}
.daily-boss-modal .modal-close {
  font-size: 18px; color: #888; cursor: pointer; padding: 4px 8px;
  border-radius: 4px; transition: all 0.2s;
}
.daily-boss-modal .modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.daily-boss-modal .modal-body { padding: 16px 20px; }
.daily-boss-portrait-wrap { text-align: center; padding: 16px 0; }
.daily-boss-portrait {
  width: 180px; height: 180px; object-fit: contain;
  border-radius: 50%; border: 3px solid rgba(150,80,255,0.3);
  box-shadow: 0 0 30px rgba(150,80,255,0.2);
  margin-bottom: 10px;
}
.daily-boss-portrait-placeholder { font-size: 80px; padding: 20px; }
.daily-boss-name {
  font-family: var(--font-display); font-size: 22px; letter-spacing: 2px; margin-bottom: 10px;
}

/* HP bar (purple animated shimmer) */
.daily-boss-hp-bar-wrap {
  position: relative; width: 80%; max-width: 300px; margin: 0 auto;
  height: 22px; background: rgba(0,0,0,0.4); border-radius: 11px;
  overflow: hidden; border: 1px solid rgba(150,80,255,0.2);
}
.daily-boss-hp-bar {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, #5B2C8E, #8B5CF6, #5B2C8E);
  background-size: 200% 100%;
  animation: dailyBossHpShimmer 3s ease-in-out infinite;
  border-radius: 11px;
}
@keyframes dailyBossHpShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.daily-boss-hp-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Boss fight HP bar override — same shimmer */
.arena-hp-bar.daily-boss-hp-bar {
  background: linear-gradient(90deg, #5B2C8E, #8B5CF6, #5B2C8E) !important;
  background-size: 200% 100% !important;
  animation: dailyBossHpShimmer 3s ease-in-out infinite !important;
}

/* Attack section */
/* Boss rewards info popup */
.db-rewards-wrap { text-align: center; margin: 10px 0; position: relative; }
.db-rewards-btn {
  background: rgba(200,168,78,0.1); border: 1px solid rgba(200,168,78,0.3);
  color: var(--gold); font-family: var(--font-display); font-size: 12px;
  padding: 7px 18px; border-radius: 8px; cursor: pointer; letter-spacing: 1px;
  transition: all 0.2s;
}
.db-rewards-btn:hover { background: rgba(200,168,78,0.2); border-color: rgba(200,168,78,0.5); }
.db-rewards-popup {
  display: none; margin-top: 10px; text-align: left;
  background: rgba(15,10,30,0.98); border: 1px solid rgba(200,168,78,0.25);
  border-radius: 10px; padding: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.db-rewards-popup.open { display: block; }
.db-rewards-popup-title { font-family: var(--font-display); font-size: 14px; color: var(--gold); letter-spacing: 2px; text-align: center; margin-bottom: 6px; }
.db-rewards-popup-desc { font-size: 11px; color: #888; text-align: center; margin-bottom: 10px; }
.db-rewards-table { display: flex; flex-direction: column; gap: 6px; }
.db-rew-row { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; padding: 8px 10px; }
.db-rew-gold { border-color: rgba(255,215,0,0.2); }
.db-rew-silver { border-color: rgba(192,192,192,0.2); }
.db-rew-bronze { border-color: rgba(205,127,50,0.2); }
.db-rew-kb { border-color: rgba(255,71,87,0.2); }
.db-rew-all { opacity: 0.7; }
.db-rew-rank { font-size: 12px; font-weight: 700; color: #ddd; margin-bottom: 4px; }
.db-rew-items { display: flex; gap: 12px; flex-wrap: wrap; }
.db-rew-items span { font-size: 12px; color: #ccc; display: flex; align-items: center; gap: 3px; }
.db-rew-icon { width: 14px; height: 14px; vertical-align: middle; }
.db-rew-note { font-size: 10px; color: #666; text-align: center; margin-top: 8px; font-style: italic; }

.daily-boss-attack-section { padding: 12px 0; }
.daily-boss-your-stats {
  display: flex; justify-content: center; gap: 16px;
  font-size: 13px; color: #ccc; margin-bottom: 12px;
}
.daily-boss-attack-btns { display: flex; flex-direction: column; gap: 8px; }
.daily-boss-attack-btn {
  width: 100%; padding: 12px; font-family: var(--font-display);
  font-size: 14px; letter-spacing: 1px; border-radius: 8px;
  border: none; cursor: pointer; transition: all 0.2s;
}
.daily-boss-attack-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status text */
.daily-boss-status-defeated {
  text-align: center; font-family: var(--font-display); font-size: 20px;
  color: #FFD700; letter-spacing: 3px; padding: 16px 0;
  text-shadow: 0 0 20px rgba(255,215,0,0.3);
}

/* Results */
.daily-boss-results { padding: 12px 0; text-align: center; }
.daily-boss-kb {
  font-size: 14px; color: #FF4757; margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(255,71,87,0.3);
}
.daily-boss-stats-row {
  display: flex; justify-content: center; gap: 20px;
  font-size: 12px; color: #888;
}

/* Reward card */
.daily-boss-reward-card {
  background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,215,0,0.02));
  border: 1px solid rgba(255,215,0,0.2); border-radius: 8px;
  padding: 14px; text-align: center; margin: 12px 0;
}
.daily-boss-reward-items {
  display: flex; justify-content: center; gap: 16px; font-size: 14px; font-weight: 700; color: #ddd;
}

/* Ranking */
.daily-boss-ranking-section { padding: 12px 0; }
.daily-boss-ranking-title {
  font-family: var(--font-display); font-size: 13px; color: #888;
  letter-spacing: 2px; text-align: center; margin-bottom: 10px;
}
.daily-boss-ranking-list { max-height: 250px; overflow-y: auto; }
.daily-boss-rank-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.daily-boss-rank-row:last-child { border-bottom: none; }
.daily-boss-rank-me { background: rgba(255,215,0,0.06); border-radius: 6px; }
.daily-boss-rank-pos { width: 28px; text-align: center; font-weight: 700; color: #888; }
.daily-boss-rank-name { flex: 1; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-boss-rank-dmg { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }

/* Global email verification banner (top of screen, all tabs) */
.global-email-banner {
  display: flex; justify-content: center; align-items: center;
  background: linear-gradient(135deg, rgba(30,18,55,0.98), rgba(18,10,35,0.98));
  border-bottom: 2px solid rgba(200,168,78,0.4);
  border-top: 2px solid rgba(200,168,78,0.4);
  padding: 10px 16px;
  position: sticky; top: 0; z-index: 40;
  animation: emailBannerGlow 3s ease-in-out infinite;
}
@keyframes emailBannerGlow {
  0%, 100% { border-bottom-color: rgba(200,168,78,0.4); box-shadow: 0 2px 12px rgba(200,168,78,0.1); }
  50% { border-bottom-color: rgba(200,168,78,0.7); box-shadow: 0 2px 20px rgba(200,168,78,0.25); }
}
.global-email-content { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.global-email-title {
  font-family: var(--font-display); font-size: 13px; color: var(--gold);
  letter-spacing: 3px; font-weight: 700;
}
.global-email-reward {
  font-size: 13px; color: #fff; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
}
.global-email-diamond { width: 16px; height: 16px; }
.global-email-btns { display: flex; gap: 8px; margin-top: 2px; }
.global-email-btn {
  border: 1px solid rgba(200,168,78,0.4); border-radius: 6px;
  color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 6px 14px; cursor: pointer; transition: all 0.2s;
  white-space: nowrap; background: rgba(200,168,78,0.1);
}
.global-email-btn:hover { filter: brightness(1.2); }
.global-email-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.global-email-btn-claim {
  background: linear-gradient(135deg, #2ED573, #1fa855); border-color: #2ED573;
  animation: emailClaimPulse 1.5s ease-in-out infinite;
}
.global-email-btn-resend { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); color: #aaa; }
@keyframes emailClaimPulse {
  0%, 100% { box-shadow: 0 0 4px rgba(46,213,115,0.3); }
  50% { box-shadow: 0 0 12px rgba(46,213,115,0.5); }
}

.daily-boss-next-timer {
  text-align: center; padding: 14px 0 4px; font-size: 14px;
  border-top: 1px solid rgba(255,255,255,0.06); margin-top: 12px;
}
.daily-boss-fight-card { min-height: 200px; justify-content: center; align-items: center; display: flex; flex-direction: column; }
.daily-boss-fight-card .arena-fighter-avatar-lg { display: none; }
.daily-boss-fight-portrait-wrap { flex: 1; display: flex; align-items: center; justify-content: center; width: 100%; padding: 12px 0; }
.daily-boss-fight-portrait { width: 180px; height: 180px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(128,0,255,0.5)); animation: bossFightGlow 2s ease-in-out infinite alternate; }
@keyframes bossFightGlow {
  0% { filter: drop-shadow(0 0 15px rgba(128,0,255,0.4)); }
  100% { filter: drop-shadow(0 0 30px rgba(128,0,255,0.7)) drop-shadow(0 0 60px rgba(128,0,255,0.3)); }
}

/* Boss fight rewards info */
.dbf-rewards { width: 100%; padding: 6px 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.dbf-rewards-title { font-family: var(--font-display); font-size: 10px; color: #888; letter-spacing: 2px; text-align: center; margin-bottom: 4px; }
.dbf-reward-row { display: flex; justify-content: space-between; align-items: center; padding: 2px 0; font-size: 11px; }
.dbf-reward-label { color: #aaa; min-width: 50px; }
.dbf-reward-val { color: var(--text-bright); display: flex; align-items: center; gap: 3px; }
.dbf-reward-icon { width: 12px; height: 12px; }
.dbf-reward-all { opacity: 0.6; }

/* Live damage ranking during boss fight */
.dbf-live-ranking { width: 100%; max-width: 480px; margin: 6px auto 0; padding: 8px 12px; background: rgba(10,5,20,0.9); border: 1px solid rgba(200,168,78,0.15); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.dbf-live-ranking-title { font-family: var(--font-display); font-size: 12px; color: var(--gold); letter-spacing: 3px; text-align: center; margin-bottom: 8px; }
.dbf-live-ranking-list { display: flex; flex-direction: column; gap: 6px; }
.dbf-live-ranking-empty { text-align: center; color: #555; font-size: 11px; padding: 8px; }
.dbf-live-ranking-final { border-color: rgba(200,168,78,0.4); box-shadow: 0 0 12px rgba(200,168,78,0.15); }

/* Boss fight result banner */
.dbf-result-banner {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.4s ease;
}
.dbf-result-banner.open { opacity: 1; }
.dbf-result-card {
  background: linear-gradient(180deg, rgba(30,20,50,0.98), rgba(15,10,30,0.98));
  border: 2px solid rgba(200,168,78,0.4); border-radius: 16px;
  padding: 28px 36px; text-align: center; min-width: 240px;
  box-shadow: 0 0 40px rgba(200,168,78,0.15), 0 8px 32px rgba(0,0,0,0.5);
}
.dbf-result-label {
  font-family: var(--font-display); font-size: 16px; letter-spacing: 4px;
  margin-bottom: 6px;
}
.dbf-result-damage {
  font-family: var(--font-display); font-size: 36px; font-weight: 800;
  color: var(--gold); letter-spacing: 2px;
  text-shadow: 0 0 20px rgba(200,168,78,0.4);
}
.dbf-result-rank {
  font-size: 14px; color: #aaa; margin-top: 6px;
}
.dbf-result-rank-num {
  color: var(--gold); font-weight: 700; font-size: 16px;
}
.dbf-result-total {
  font-size: 12px; color: #666; margin-top: 4px;
}
.dbf-result-btn {
  margin-top: 16px; padding: 10px 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), #b8860b); border: none;
  color: #1a0e2e; font-family: var(--font-display); font-size: 14px;
  font-weight: 700; letter-spacing: 2px; cursor: pointer;
  transition: all 0.2s; box-shadow: 0 4px 12px rgba(200,168,78,0.3);
}
.dbf-result-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* Rank cards */
.dbf-rank-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px; padding: 8px 10px; transition: all 0.3s;
}
.dbf-rank-card-me { background: rgba(200,168,78,0.08); border-color: rgba(200,168,78,0.3); }
.dbf-rank-card-header { display: flex; align-items: center; gap: 8px; }
.dbf-rank-card-pos { font-size: 16px; min-width: 26px; text-align: center; }
.dbf-rank-card-avatar { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.dbf-rank-card-me .dbf-rank-card-avatar { /* frame class handles border */ }
.dbf-rank-card-info { flex: 1; min-width: 0; }
.dbf-rank-card-name { font-size: 13px; font-weight: 700; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbf-rank-card-title { font-size: 10px; margin-top: 1px; }
.dbf-rank-card-meta { font-size: 10px; color: #888; }
.dbf-rank-card-dmg-wrap { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.dbf-rank-card-dmg { font-family: var(--font-display); font-size: 14px; color: var(--gold); font-weight: 700; white-space: nowrap; letter-spacing: 1px; }
.dbf-rank-card-reward { font-size: 10px; color: #aaa; white-space: nowrap; margin-top: 2px; }

/* Equipment grid in rank card */
.dbf-rank-card-eq { display: flex; gap: 3px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.04); flex-wrap: wrap; }
.dbf-rank-eq-slot { width: 36px; height: 36px; }
.dbf-rank-eq-empty { width: 36px; height: 36px; border-radius: 4px; background: rgba(255,255,255,0.02); border: 1px dashed rgba(255,255,255,0.06); }

/* Defeated portrait */
.daily-boss-portrait-dead { filter: grayscale(0.5) brightness(0.7); }

/* Upcoming boss */
.daily-boss-upcoming { text-align: center; padding: 8px 0; }
.daily-boss-upcoming-label {
  font-family: var(--font-display); font-size: 11px; color: #888;
  letter-spacing: 3px; margin-bottom: 8px;
}
.daily-boss-portrait-upcoming { filter: brightness(0.6); }
.daily-boss-countdown { text-align: center; padding: 16px 0; }
.daily-boss-countdown-label {
  font-size: 11px; color: #888; letter-spacing: 2px; margin-bottom: 4px;
}
.daily-boss-countdown-time {
  font-family: var(--font-display); font-size: 28px; color: var(--gold);
  letter-spacing: 3px; text-shadow: 0 0 20px rgba(255,215,0,0.2);
}

/* Ranking reward column */
.daily-boss-rank-reward {
  font-size: 11px; color: #aaa; white-space: nowrap; margin-left: 6px;
}

/* ============================================
   REFERRAL SYSTEM
   ============================================ */
.referral-modal { max-width: 440px; }

/* How it works */
.ref-how-section {
  padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 14px;
}
.ref-how-title {
  font-family: var(--font-display); font-size: 11px; color: #888;
  letter-spacing: 2px; margin-bottom: 10px;
}
.ref-how-steps { display: flex; flex-direction: column; gap: 6px; }
.ref-how-step {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #bbb;
}
.ref-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(200,168,78,0.2), rgba(200,168,78,0.08));
  border: 1px solid rgba(200,168,78,0.3);
  color: var(--gold); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.ref-code-section { padding: 8px 0 16px; }
.ref-code-label {
  font-size: 11px; color: #888; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px;
}
.ref-code-box, .ref-link-box {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
}
.ref-code-text {
  flex: 1; font-family: var(--font-display); font-size: 22px; letter-spacing: 4px;
  color: var(--gold); font-weight: 700;
}
.ref-link-text {
  flex: 1; font-size: 12px; color: #aaa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ref-copy-btn {
  background: rgba(46,213,115,0.15); border: 1px solid rgba(46,213,115,0.3);
  color: #2ED573; font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.ref-copy-btn:hover { background: rgba(46,213,115,0.25); }

.ref-rewards-section {
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ref-rewards-title {
  font-family: var(--font-display); font-size: 12px; color: #888;
  letter-spacing: 2px; text-align: center; margin-bottom: 10px;
}
.ref-reward-row { display: flex; gap: 8px; }
.ref-reward-card {
  flex: 1; background: rgba(255,215,0,0.04); border: 1px solid rgba(255,215,0,0.1);
  border-radius: 8px; padding: 10px; text-align: center;
}
.ref-reward-who { font-size: 11px; color: #888; margin-bottom: 4px; }
.ref-reward-items { font-size: 12px; color: #ddd; font-weight: 600; }
.ref-reward-condition {
  text-align: center; font-size: 10px; color: #666; margin-top: 8px;
}

.ref-list-section { padding: 12px 0; }
.ref-list-title {
  font-family: var(--font-display); font-size: 12px; color: #888;
  letter-spacing: 1px; margin-bottom: 10px;
}
.ref-player-list { max-height: 200px; overflow-y: auto; }
.ref-player-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.ref-player-row:last-child { border-bottom: none; }
.ref-player-status { width: 20px; text-align: center; }
.ref-player-name { flex: 1; color: #ddd; }
.ref-player-state { font-size: 11px; color: #888; }

/* ═══════════════════════════════════════════════════════════════
   GUILD WARS
   ═══════════════════════════════════════════════════════════════ */

.war-header {
  text-align: center; padding: 16px 0 12px;
  border-bottom: 1px solid rgba(255,107,53,0.15);
  margin-bottom: 16px;
}
.war-title-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 12px;
}
.war-icon { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(255,107,53,0.5)); }
.war-title {
  font-family: var(--font-display); font-size: 22px; color: #FF6B35;
  margin: 0; text-shadow: 0 0 20px rgba(255,107,53,0.3);
}
.war-elo {
  color: #888; font-size: 12px; font-weight: 600;
}
.war-elo-val {
  color: #FFD700; font-size: 16px; font-weight: 800;
  text-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.war-stats-row {
  display: flex; justify-content: center; gap: 24px; margin-top: 8px;
}
.war-stat { display: flex; flex-direction: column; align-items: center; }
.war-stat-val { font-size: 18px; font-weight: 800; }
.war-stat-lbl { font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

/* Countdown */
.war-countdown {
  text-align: center; padding: 14px;
  background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(200,50,0,0.04));
  border: 1px solid rgba(255,107,53,0.2); border-radius: 12px;
  margin-bottom: 16px;
}
.war-countdown-label { color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.war-countdown-time {
  font-size: 28px; font-weight: 900; color: #FF6B35;
  letter-spacing: 2px; margin: 4px 0;
  text-shadow: 0 0 14px rgba(255,107,53,0.4);
  animation: abyssGlow 2s ease-in-out infinite alternate;
}
.war-countdown-hint { color: #666; font-size: 10px; }

/* Phase badge */
.war-phase-badge {
  display: inline-block; padding: 4px 16px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 12px;
}
.war-phase-badge.active {
  background: rgba(255,107,53,0.15); border: 1px solid rgba(255,107,53,0.4);
  color: #FF6B35; animation: abyssGlow 2s ease-in-out infinite alternate;
}

/* Fighters list */
.war-fighters-title {
  color: #aaa; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 8px; text-align: center;
}
.war-fighters-list {
  max-height: 260px; overflow-y: auto;
  background: rgba(0,0,0,0.2); border-radius: 10px;
  padding: 6px; margin-bottom: 12px;
}
.war-fighter {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.2s;
}
.war-fighter:last-child { border-bottom: none; }
.war-fighter.me { background: rgba(255,107,53,0.08); border: 1px solid rgba(255,107,53,0.2); }
.war-fighter-avatar {
  width: 36px; height: 36px; border-radius: 10px; object-fit: cover;
  border: 2px solid rgba(255,255,255,0.1); flex-shrink: 0;
}
.war-fighter.me .war-fighter-avatar { border-color: rgba(255,107,53,0.4); }
.war-fighter-info { flex: 1; min-width: 0; }
.war-fighter-name { font-size: 13px; color: #ddd; font-weight: 600; }
.war-fighter-meta { font-size: 10px; color: #888; margin-top: 1px; }
.war-fighter-power {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #FFD700; font-weight: 700;
}
.war-power-icon { width: 14px; height: 14px; }
.war-fighter-you {
  font-size: 9px; font-weight: 800; color: #FF6B35;
  background: rgba(255,107,53,0.15); padding: 2px 6px;
  border-radius: 4px; letter-spacing: 0.5px;
}

/* Action buttons */
.war-actions {
  display: flex; gap: 8px; justify-content: center;
  margin: 12px 0; flex-wrap: wrap;
}
.war-btn {
  padding: 10px 24px; border-radius: 10px; border: none;
  font-size: 13px; font-weight: 800; cursor: pointer;
  transition: all 0.2s; text-transform: uppercase;
  letter-spacing: 0.5px;
}
.war-btn.register, .war-btn.join {
  background: linear-gradient(135deg, #FF6B35, #E84A0C);
  color: #fff; box-shadow: 0 4px 16px rgba(255,107,53,0.3);
}
.war-btn.register:hover, .war-btn.join:hover {
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,0.4);
}
.war-btn.withdraw {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  color: #aaa;
}
.war-btn.cancel {
  background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.25);
  color: #FF4757; font-size: 11px;
}
.war-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.war-min-note { text-align: center; color: #555; font-size: 10px; margin-top: 4px; }

/* Result display */
/* Result — horizontal layout */
.war-result {
  display: flex; align-items: center; gap: 16px;
  text-align: left; padding: 16px 20px; border-radius: 14px; margin-bottom: 16px;
}
.war-result-img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5)); flex-shrink: 0; }
.war-result-info { flex: 1; }
.war-result-text {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  letter-spacing: 3px;
}
.war-result.victory .war-result-text { color: #2ED573; text-shadow: 0 0 20px rgba(46,213,115,0.4); }
.war-result.defeat .war-result-text { color: #FF4757; text-shadow: 0 0 20px rgba(255,71,87,0.4); }
.war-result-vs { color: #888; font-size: 13px; margin-top: 4px; }

/* War Detail */
.war-detail { margin-bottom: 16px; }
.war-detail-header {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 12px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 10px;
}
.war-detail-side { font-size: 13px; font-weight: 800; }
.war-detail-side.won { color: #2ED573; }
.war-detail-side.lost { color: #FF4757; }
.war-detail-vs { color: #666; font-size: 11px; font-weight: 800; }
.war-detail-title {
  color: #aaa; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 8px; text-align: center;
}
.war-detail-fights { display: flex; flex-direction: column; gap: 8px; }
.war-detail-team {
  background: rgba(0,0,0,0.15); border-radius: 10px; padding: 10px;
}
.war-detail-team-label {
  font-size: 11px; font-weight: 800; margin-bottom: 6px;
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.war-detail-fighter {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 12px;
}
.war-detail-fighter:last-child { border-bottom: none; }
.war-df-name { flex: 1; color: #ddd; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-df-stat { color: #888; font-size: 11px; white-space: nowrap; }
.war-df-dmg { color: #FFD700; font-size: 11px; font-weight: 700; white-space: nowrap; }
.war-df-replay {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: rgba(255,107,53,0.15); color: #FF6B35; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.war-df-replay:hover { background: rgba(255,107,53,0.3); }

/* Idle state */
.war-idle {
  text-align: center; padding: 24px 16px;
  background: rgba(0,0,0,0.15); border-radius: 12px;
  margin-bottom: 16px;
}
.war-idle-text { color: #888; font-size: 14px; margin-bottom: 12px; }
.war-idle-hint { color: #555; font-size: 11px; margin-top: 8px; }

/* History */
.war-history-section {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.war-history-title {
  color: #888; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 8px; text-align: center;
}
.war-history-list {
  max-height: 200px; overflow-y: auto;
}
.war-history-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  font-size: 12px;
}
.war-history-row.win { background: rgba(46,213,115,0.04); }
.war-history-row.loss { background: rgba(255,71,87,0.04); }
.war-h-result {
  width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: #fff;
}
.war-history-row.win .war-h-result { background: #2ED573; }
.war-history-row.loss .war-h-result { background: #FF4757; }
.war-h-opp { flex: 1; color: #ccc; font-weight: 600; }
.war-h-players { color: #888; font-size: 11px; }
.war-h-date { color: #666; font-size: 10px; min-width: 35px; text-align: right; }

/* Empty state */
.war-empty {
  text-align: center; color: #555; font-size: 12px; padding: 16px;
}
.war-loading {
  text-align: center; color: #666; font-size: 12px; padding: 16px;
}

/* Info section */
.war-info-section {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.war-info-toggle {
  text-align: center; color: #666; font-size: 11px;
  cursor: pointer; padding: 6px; transition: color 0.2s;
}
.war-info-toggle:hover { color: #aaa; }
.war-info-list {
  list-style: none; padding: 8px 0; margin: 0;
}
.war-info-list li {
  padding: 4px 0; color: #888; font-size: 11px;
  position: relative; padding-left: 16px;
}
.war-info-list li::before {
  content: '•'; position: absolute; left: 4px; color: #FF6B35;
}

/* War Shop */
.war-shop-section {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,107,53,0.15);
}
.war-shop-title {
  color: #FF6B35; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1.5px;
  text-align: center; margin-bottom: 4px;
  font-family: var(--font-display);
}
.war-shop-balance {
  text-align: center; color: #888; font-size: 12px; margin-bottom: 12px;
}
.war-shop-grid {
  display: flex; flex-direction: column; gap: 6px;
}
.war-shop-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
}
.war-shop-item:hover { border-color: rgba(255,107,53,0.2); }
.war-shop-item.owned { opacity: 0.5; }
.war-shop-icon {
  font-size: 24px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,107,53,0.08); border-radius: 8px; flex-shrink: 0;
}
.war-shop-item-info { flex: 1; min-width: 0; }
.war-shop-item-name { font-size: 13px; font-weight: 700; color: #ddd; }
.war-shop-item-desc { font-size: 10px; color: #888; margin-top: 1px; }
.war-shop-buy {
  padding: 6px 14px; border-radius: 8px; border: none;
  background: linear-gradient(135deg, #FF6B35, #E84A0C);
  color: #fff; font-size: 12px; font-weight: 800; cursor: pointer;
  white-space: nowrap; transition: all 0.2s; flex-shrink: 0;
}
.war-shop-buy:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255,107,53,0.3); }
.war-shop-buy.disabled, .war-shop-buy:disabled {
  background: rgba(255,255,255,0.06); color: #555;
  cursor: not-allowed; transform: none; box-shadow: none;
}
.war-shop-owned {
  font-size: 10px; font-weight: 800; color: #2ED573;
  background: rgba(46,213,115,0.1); padding: 4px 10px;
  border-radius: 6px; letter-spacing: 0.5px;
}

/* War Chest Button */
.war-chest-btn-section { text-align: center; margin: 16px 0 12px; padding-top: 16px; border-top: 1px solid rgba(255,107,53,0.15); }
.wc-btn-wrap { position: relative; display: inline-block; }
.wc-btn-wrap:hover .wc-tooltip { display: block; }

/* War Chest Tooltip */
.wc-tooltip {
  display: none; position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); width: 240px; z-index: 100;
  background: rgba(20,15,45,0.97); border: 1px solid rgba(255,107,53,0.3);
  border-radius: 10px; padding: 10px 12px; backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.wc-tooltip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: rgba(255,107,53,0.3);
}
.wc-tooltip-title {
  color: #FF6B35; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 8px; text-align: center;
}
.wc-tooltip-row {
  display: flex; align-items: center; gap: 6px; padding: 3px 0;
}
.wc-tooltip-icon { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
.wc-tooltip-name { flex: 1; font-size: 11px; font-weight: 600; }
.wc-tooltip-pct { font-size: 10px; color: #666; min-width: 28px; text-align: right; }
.war-chest-open-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-radius: 14px; border: 2px solid rgba(255,107,53,0.4);
  background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(200,50,0,0.06));
  cursor: pointer; transition: all 0.3s;
}
.war-chest-open-btn:hover:not(.disabled) {
  border-color: rgba(255,107,53,0.7); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,107,53,0.2);
}
.war-chest-open-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.war-chest-btn-icon { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(255,107,53,0.4)); }
.war-chest-btn-text { text-align: left; }
.war-chest-btn-title { font-size: 15px; font-weight: 800; color: #FF6B35; font-family: var(--font-display); }
.war-chest-btn-cost { font-size: 11px; color: #888; margin-top: 2px; }

/* War Chest Modal */
.wc-modal { position: relative; }
.wc-header { text-align: center; margin-bottom: 16px; }
.wc-chest-img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(255,107,53,0.4)); margin-bottom: 8px; }
.wc-title { font-family: var(--font-display); font-size: 22px; color: #FF6B35; margin: 0; }
.wc-cost { color: #888; font-size: 12px; margin-top: 4px; }
.wc-balance { color: #666; font-size: 11px; margin-top: 2px; }

/* Carousel */
.wc-carousel-wrap {
  position: relative; overflow: hidden; height: 90px;
  border: 2px solid rgba(255,107,53,0.3); border-radius: 12px;
  background: rgba(0,0,0,0.4); margin-bottom: 16px;
}
.wc-pointer {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 3px; height: 100%; background: #FF6B35; z-index: 2;
  box-shadow: 0 0 10px rgba(255,107,53,0.6);
}
.wc-pointer::before {
  content: ''; position: absolute; top: -6px; left: -6px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 8px solid #FF6B35;
}
.wc-pointer::after {
  content: ''; position: absolute; bottom: -6px; left: -6px;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 8px solid #FF6B35;
}
.wc-carousel {
  display: flex; gap: 4px; padding: 6px;
  transform: translateX(0);
  will-change: transform;
}
.wc-item {
  flex-shrink: 0; width: 96px; height: 76px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.08);
  border-radius: 8px; gap: 4px; transition: border-color 0.3s;
}
.wc-item.wc-winner {
  border-color: #FF6B35 !important;
  background: rgba(255,107,53,0.15);
  box-shadow: 0 0 20px rgba(255,107,53,0.4);
  animation: wcWinPulse 0.5s ease-in-out 3;
}
@keyframes wcWinPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,107,53,0.4); }
  50% { box-shadow: 0 0 40px rgba(255,107,53,0.8); }
}
.wc-item-icon { width: 28px; height: 28px; object-fit: contain; }
.wc-item-name { font-size: 9px; font-weight: 700; text-align: center; line-height: 1.2; }

/* Loot table */
.wc-loot-table { margin-bottom: 16px; }
.wc-loot-title {
  color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px; text-align: center;
}
.wc-loot-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 6px;
}
.wc-loot-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.wc-loot-icon { width: 18px; height: 18px; object-fit: contain; }
.wc-loot-name { flex: 1; font-size: 11px; font-weight: 600; }
.wc-loot-pct { font-size: 10px; color: #666; min-width: 30px; text-align: right; }

/* Actions */
.wc-actions { display: flex; gap: 8px; justify-content: center; }

/* Result overlay */
.wc-result {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(10,8,30,0.95); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
}
.wc-result-inner { text-align: center; padding: 24px; }
.wc-result-label { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.wc-result-name { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.wc-result-hint { color: #aaa; font-size: 12px; margin-bottom: 8px; }
.wc-result-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

/* ═══════════════════════════════════════════════════════════════
   PREMIUM ACCOUNT — FULLSCREEN OVERLAY
   ═══════════════════════════════════════════════════════════════ */

/* ── Premium Overlay ── */
.prem-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: #0a0612;
  opacity: 0; transition: opacity 0.4s ease;
  overflow: hidden;
}
.prem-overlay.visible { opacity: 1; }
.prem-bg { position: fixed; inset: 0; z-index: 0; }
.prem-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.prem-bg-fade { position: fixed; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(10,6,18,0.2) 0%, rgba(10,6,18,0.7) 50%, rgba(10,6,18,0.92) 100%); }
.prem-close {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.08);
  color: #777; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; backdrop-filter: blur(8px);
}
.prem-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.prem-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.prem-particle {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.6), transparent);
  animation: premParticleUp linear infinite; opacity: 0;
}
@keyframes premParticleUp {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  10% { opacity: 0.6; transform: scale(1); }
  90% { opacity: 0.2; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}

/* Layout: desktop = side-by-side, mobile = scroll */
.prem-layout {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100vh; gap: 48px;
  padding: 24px 40px;
  max-width: 1100px; margin: 0 auto;
}
.prem-left {
  flex: 0 0 320px; text-align: center;
  position: relative;
}
.prem-hero-glow {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 160px;
  background: radial-gradient(ellipse, rgba(255,215,0,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.prem-icon {
  width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 4px 24px rgba(255,215,0,0.7));
  margin-bottom: 10px; position: relative;
  animation: premIconFloat 3s ease-in-out infinite;
}
@keyframes premIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.prem-title {
  font-family: var(--font-display); font-size: 38px; margin: 0; line-height: 1;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: premGoldShimmer 3s ease-in-out infinite;
}
.prem-subtitle { color: #9B8FBF; font-size: 11px; margin-top: 6px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; }
.prem-status-active {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 5px 14px; border-radius: 20px;
  background: rgba(46,213,115,0.1); border: 1px solid rgba(46,213,115,0.25);
  color: #2ED573; font-size: 11px; font-weight: 700;
}
.prem-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ED573; box-shadow: 0 0 8px rgba(46,213,115,0.6); animation: premDotPulse 2s ease-in-out infinite; }
@keyframes premDotPulse { 0%,100% { box-shadow: 0 0 8px rgba(46,213,115,0.5); } 50% { box-shadow: 0 0 18px rgba(46,213,115,0.9); } }

/* Price card */
.prem-price-card {
  position: relative; margin: 16px 0; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,160,0,0.03));
  border: 1px solid rgba(255,215,0,0.15);
}
.prem-price-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,215,0,0.06), transparent); animation: premShine 4s ease-in-out infinite; }
@keyframes premShine { 0%,100% { left: -100%; } 50% { left: 100%; } }
.prem-price-inner { padding: 20px; text-align: center; position: relative; }
.prem-price {
  font-size: 44px; font-weight: 900; font-family: var(--font-display); line-height: 1;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: premGoldShimmer 3s ease-in-out infinite;
}
.prem-price-cents { font-size: 26px; }
.prem-price-per { color: #777; font-size: 13px; margin-top: 2px; }
.prem-price-value { color: #B0A5D4; font-size: 10px; margin-top: 6px; }
.prem-buy-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #FFD700, #FFA000);
  color: #1a0e2e; font-size: 15px; font-weight: 900;
  font-family: var(--font-display); cursor: pointer;
  text-transform: uppercase; letter-spacing: 1.5px;
  box-shadow: 0 4px 24px rgba(255,215,0,0.35); transition: all 0.3s; margin-top: 14px;
}
.prem-buy-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,215,0,0.45); }
.prem-buy-btn:disabled { background: rgba(255,215,0,0.12); color: #666; cursor: not-allowed; box-shadow: none; }
.prem-coming-soon { color: #555; font-size: 10px; margin-top: 6px; }
.prem-active-thanks { color: #FFD700; font-size: 12px; font-weight: 700; padding: 8px 14px; background: rgba(255,215,0,0.05); border: 1px solid rgba(255,215,0,0.12); border-radius: 10px; }
.prem-status-card { margin-bottom: 12px; }

/* Premium packages */
.prem-packages { display: flex; gap: 10px; margin: 16px 0; }
.prem-pkg {
  flex: 1; text-align: center; padding: 16px 10px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; position: relative; transition: all 0.3s;
}
.prem-pkg:hover { border-color: rgba(255,215,0,0.2); background: rgba(255,215,0,0.03); }
.prem-pkg-best {
  border-color: rgba(255,215,0,0.35) !important;
  background: rgba(255,215,0,0.05) !important;
  box-shadow: 0 0 20px rgba(255,215,0,0.08);
}
.prem-pkg-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFD700, #FFA000); color: #1a0e2e;
  font-size: 8px; font-weight: 900; padding: 2px 10px; border-radius: 10px;
  letter-spacing: 1px; white-space: nowrap;
}
.prem-pkg-name { color: #aaa; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.prem-pkg-price {
  font-size: 28px; font-weight: 900; font-family: var(--font-display); line-height: 1;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: premGoldShimmer 3s ease-in-out infinite;
}
.prem-pkg-cents { font-size: 16px; }
.prem-pkg-per { color: #777; font-size: 10px; margin: 4px 0 10px; }
.prem-pkg-save { color: #2ED573; font-weight: 700; }
.prem-pkg .prem-buy-btn { padding: 10px; font-size: 12px; margin-top: 0; }

/* Cosmetic row (left column) */
.prem-cosm-row { display: flex; justify-content: center; gap: 16px; margin-top: 16px; }
.prem-cosm-item { text-align: center; }
.prem-cosm-avatar { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; border: 2px solid rgba(255,215,0,0.4); box-shadow: 0 0 12px rgba(255,215,0,0.15); }
.prem-cosm-label { font-size: 9px; color: #777; margin-top: 4px; }
.prem-chat-mini { display: inline-flex; align-items: center; gap: 2px; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 8px 12px; }
.prem-chat-badge { color: #FFD700; font-size: 11px; animation: premStarPulse 2s ease-in-out infinite; }
@keyframes premStarPulse { 0%,100% { opacity:1; text-shadow:0 0 4px rgba(255,215,0,0.5); } 50% { opacity:0.7; text-shadow:0 0 14px rgba(255,215,0,0.9); } }
.prem-chat-name {
  font-weight: 800; font-size: 12px;
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFD700, #FFEC8B, #FFD700);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: premGoldShimmer 3s ease-in-out infinite;
}
@keyframes premGoldShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.prem-badge-sample {
  display: inline-block; padding: 4px 12px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,160,0,0.1));
  border: 1px solid rgba(255,215,0,0.35);
  color: #FFD700; font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
  box-shadow: 0 0 14px rgba(255,215,0,0.12);
  animation: premBadgeGlow 2s ease-in-out infinite alternate;
}
@keyframes premBadgeGlow { from { box-shadow: 0 0 14px rgba(255,215,0,0.12); } to { box-shadow: 0 0 28px rgba(255,215,0,0.3); } }
.prem-fair-mini { color: #555; font-size: 9px; margin-top: 14px; line-height: 1.5; }

/* Right: all benefits in compact grid */
.prem-right { flex: 1; min-width: 0; }
.prem-all-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.prem-card {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 14px 8px; text-align: center;
  transition: all 0.3s; animation: premCardIn 0.5s ease-out both;
}
@keyframes premCardIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.prem-card:hover { border-color: rgba(255,215,0,0.25); background: rgba(255,215,0,0.04); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.06); }
.prem-card-icon { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(255,215,0,0.3)); margin-bottom: 6px; }
.prem-card-title { color: #fff; font-size: 11px; font-weight: 800; margin-bottom: 2px; }
.prem-card-desc { color: #666; font-size: 9px; line-height: 1.3; }

/* Mobile: single column scroll */
@media (max-width: 900px) {
  .prem-overlay { overflow-y: auto; }
  .prem-layout { flex-direction: column; height: auto; min-height: 100vh; gap: 20px; padding: 20px 16px 60px; align-items: stretch; }
  .prem-left { flex: none; }
  .prem-all-grid { grid-template-columns: 1fr 1fr; }
  .prem-title { font-size: 32px; }
  .prem-price { font-size: 38px; }
  .prem-icon { width: 64px; height: 64px; }
}

/* ══════════════════════════════════════════════════════════════
   DIAMOND SHOP OVERLAY
   ══════════════════════════════════════════════════════════════ */
.ds-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: #060a14;
  opacity: 0; transition: opacity 0.4s ease;
  overflow: hidden;
}
.ds-overlay.visible { opacity: 1; }
.ds-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(60,140,255,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(100,200,255,0.08) 0%, transparent 50%),
              radial-gradient(ellipse at 20% 70%, rgba(60,100,255,0.06) 0%, transparent 50%);
}
.ds-close {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.08);
  color: #777; font-size: 22px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.ds-close:hover { color: #fff; border-color: rgba(255,255,255,0.2); }
.ds-scroll {
  position: relative; z-index: 2;
  height: 100vh; overflow-y: auto; overflow-x: hidden;
  padding: 40px 24px 60px;
  max-width: 900px; margin: 0 auto;
  scrollbar-width: none;
}
.ds-scroll::-webkit-scrollbar { display: none; }
.ds-particles {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.ds-particle {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(100,200,255,0.8), rgba(60,140,255,0.3));
  animation: dsFloat linear infinite;
  opacity: 0;
}
@keyframes dsFloat {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { transform: translateY(-100vh) scale(0.3); opacity: 0; }
}
.ds-particle-icon {
  position: absolute; bottom: -30px;
  animation: dsFloatIcon linear infinite;
  opacity: 0; pointer-events: none;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(100,200,255,0.3));
}
@keyframes dsFloatIcon {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.15; }
  50% { transform: translateY(-50vh) rotate(180deg); opacity: 0.12; }
  90% { opacity: 0.08; }
  100% { transform: translateY(-105vh) rotate(360deg); opacity: 0; }
}

/* Header */
.ds-header {
  text-align: center; margin-bottom: 28px; position: relative;
}
.ds-header-glow {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(60,160,255,0.2), transparent 70%);
  pointer-events: none;
}
.ds-icon {
  width: 80px; height: 80px; object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(60,160,255,0.5));
  animation: dsIconFloat 3s ease-in-out infinite;
}
@keyframes dsIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.ds-title {
  font-family: var(--font-display); font-size: 36px; letter-spacing: 3px;
  background: linear-gradient(90deg, #64C8FF, #4090FF, #80DFFF, #64C8FF);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: dsShimmer 3s ease-in-out infinite;
  margin: 8px 0 4px;
}
@keyframes dsShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.ds-subtitle { color: #6a8cbb; font-size: 13px; letter-spacing: 1px; }
.ds-balance {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: rgba(60,160,255,0.08); border: 1px solid rgba(60,160,255,0.2);
  border-radius: 20px; padding: 8px 18px;
  font-family: var(--font-display); font-size: 16px; color: #64C8FF;
}
.ds-balance-icon { width: 20px; height: 20px; }

/* Currency picker — sits below balance pill in shop header */
.ds-currency-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  margin-left: 12px;
  vertical-align: middle;
}
.ds-currency-label {
  font-size: 11px;
  color: #6a8cbb;
  font-family: var(--font-display);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ds-currency-select {
  background: rgba(60,160,255,0.08);
  border: 1px solid rgba(60,160,255,0.2);
  border-radius: 14px;
  padding: 6px 10px;
  color: #cce4ff;
  font-family: var(--font-display);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.ds-currency-select:hover { border-color: rgba(60,160,255,0.4); }
.ds-currency-select:focus { border-color: rgba(60,160,255,0.6); }
.ds-currency-select option { background: #0a1018; color: #cce4ff; }
@media (max-width: 600px) {
  .ds-currency-row {
    display: flex;
    margin-left: 0;
    justify-content: center;
  }
}

/* ── First-visit currency picker modal ──────────────────── */
.cur-picker-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(8,12,24,0.85) 0%, rgba(0,0,0,0.95) 100%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cur-picker-overlay.visible { opacity: 1; }
.cur-picker-card {
  background: linear-gradient(180deg, rgba(20,24,40,0.98), rgba(12,16,28,0.98));
  border: 2px solid rgba(60,160,255,0.3);
  border-radius: 18px;
  padding: 28px 24px 22px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(60,160,255,0.15);
  text-align: center;
}
.cur-picker-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-shadow: 0 0 20px rgba(60,160,255,0.4);
}
.cur-picker-sub {
  color: #8ba6c8;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 22px;
}
.cur-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.cur-picker-grid > .cur-picker-btn:nth-child(5) {
  grid-column: 1 / -1;
}
.cur-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px 12px;
  background: rgba(20,30,50,0.7);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-body);
}
.cur-picker-btn:hover {
  border-color: rgba(60,160,255,0.5);
  background: rgba(40,60,100,0.7);
  transform: translateY(-2px);
}
.cur-picker-btn:active { transform: scale(0.97); }
.cur-picker-btn.selected {
  border-color: rgba(255,215,0,0.7);
  background: rgba(60,50,20,0.6);
  box-shadow: 0 0 20px rgba(255,215,0,0.2), inset 0 0 10px rgba(255,215,0,0.1);
}
.cur-picker-flag {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  display: block;
}
/* Auto-detect button */
.cur-picker-auto {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(60,160,255,0.15), rgba(60,160,255,0.05));
  border: 2px solid rgba(60,160,255,0.4);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.15s;
}
.cur-picker-auto:hover {
  background: linear-gradient(180deg, rgba(60,160,255,0.25), rgba(60,160,255,0.1));
  border-color: rgba(60,160,255,0.7);
  transform: translateY(-1px);
}
.cur-picker-auto:active { transform: scale(0.98); }
.cur-picker-auto-icon { font-size: 22px; }
.cur-picker-auto-label { flex: 1; text-align: left; }
.cur-picker-auto-hint {
  font-size: 11px;
  color: #6FD5FF;
  font-weight: 800;
  letter-spacing: 1px;
  background: rgba(60,160,255,0.15);
  padding: 3px 8px;
  border-radius: 10px;
}
.cur-picker-or {
  font-size: 10px;
  color: #6a8cbb;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
  position: relative;
}
.cur-picker-or::before,
.cur-picker-or::after {
  content: '';
  display: inline-block;
  width: 60px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  vertical-align: middle;
  margin: 0 10px;
}
.cur-picker-code {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1.5px;
}
.cur-picker-name {
  font-size: 10px;
  color: #8ba6c8;
  margin-top: 1px;
}
.cur-picker-symbol {
  font-size: 13px;
  color: #6FD5FF;
  font-weight: 700;
  margin-top: 2px;
}
.cur-picker-hint {
  font-size: 10px;
  color: #6a8cbb;
  font-style: italic;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(60,160,255,0.05);
  border-radius: 6px;
}
@media (max-width: 480px) {
  .cur-picker-card { padding: 22px 16px 16px; }
  .cur-picker-title { font-size: 18px; }
  .cur-picker-grid { gap: 8px; }
  .cur-picker-btn { padding: 12px 6px 10px; }
  .cur-picker-flag { font-size: 30px; }
}

/* ── Invite Friends promo slide-in notification ──────────── */
.invite-promo-slide {
  position: fixed;
  bottom: 80px;
  right: -340px;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(135deg, rgba(20, 16, 40, 0.98), rgba(12, 10, 28, 0.98));
  border: 2px solid rgba(255, 215, 0, 0.35);
  border-radius: 16px;
  padding: 18px 16px 14px;
  z-index: 190;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 30px rgba(255,215,0,0.1);
  transition: right 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
  font-family: var(--font-body);
}
.invite-promo-slide.open {
  right: 16px;
}
@media (max-width: 959px) {
  .invite-promo-slide { bottom: 110px; }
}
.ips-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #666;
  font-size: 20px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.ips-close:hover { color: #aaa; }
.ips-icon {
  font-size: 28px;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px rgba(255,215,0,0.3));
}
.ips-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--gold);
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-shadow: 0 0 12px rgba(255,215,0,0.3);
}
.ips-body {
  color: #aab;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.ips-cta {
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(255,215,0,0.2), rgba(255,215,0,0.08));
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 10px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.ips-cta:hover {
  background: linear-gradient(180deg, rgba(255,215,0,0.3), rgba(255,215,0,0.15));
}
.ips-cta:active { transform: scale(0.97); }

/* Section titles */
.ds-section { margin-bottom: 24px; }
.ds-section-title {
  font-family: var(--font-display); font-size: 14px; color: #6a8cbb;
  letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase;
}

/* Starter pack (full width special card) */
.ds-starter {
  background: linear-gradient(135deg, rgba(60,160,255,0.1), rgba(100,50,200,0.08));
  border: 1.5px solid rgba(60,160,255,0.3);
  border-radius: 16px; padding: 20px; position: relative; overflow: hidden;
  animation: dsStarterGlow 3s ease-in-out infinite alternate;
}
@keyframes dsStarterGlow {
  0% { box-shadow: 0 0 15px rgba(60,160,255,0.1); }
  100% { box-shadow: 0 0 30px rgba(60,160,255,0.2), 0 0 60px rgba(100,50,200,0.08); }
}
.ds-starter-badge {
  position: absolute; top: -1px; right: 20px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff; font-size: 8px; font-weight: 900; padding: 4px 12px;
  border-radius: 0 0 8px 8px; letter-spacing: 1px;
}
.ds-starter-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.ds-starter-left { display: flex; align-items: center; gap: 14px; }
.ds-starter-icon { width: 48px; height: 48px; filter: drop-shadow(0 0 12px rgba(60,160,255,0.5)); }
.ds-starter-amount {
  font-family: var(--font-display); font-size: 26px; color: #fff; line-height: 1;
}
.ds-starter-bonus {
  font-size: 11px; color: #2ED573; font-weight: 700; vertical-align: middle;
}
.ds-starter-total { font-size: 11px; color: #6a8cbb; margin-top: 2px; }
.ds-starter-right { text-align: center; flex-shrink: 0; }
.ds-starter-price {
  font-family: var(--font-display); font-size: 22px; color: #fff; margin-bottom: 6px;
}
.ds-starter-perks {
  display: flex; gap: 16px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(60,160,255,0.1);
  font-size: 11px; color: #6a8cbb; flex-wrap: wrap;
}

/* Diamond package grid */
.ds-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.ds-pkg {
  text-align: center; padding: 18px 10px 14px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(100,200,255,0.1);
  border-radius: 14px; position: relative; transition: all 0.3s;
}
.ds-pkg:hover { border-color: rgba(100,200,255,0.3); background: rgba(60,160,255,0.04); }
.ds-pkg-best {
  border-color: rgba(60,160,255,0.4) !important;
  background: rgba(60,160,255,0.06) !important;
  box-shadow: 0 0 20px rgba(60,160,255,0.1);
}
.ds-pkg-popular {
  border-color: rgba(255,165,0,0.35) !important;
  background: rgba(255,165,0,0.04) !important;
}
.ds-pkg-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 900; padding: 2px 10px; border-radius: 10px;
  letter-spacing: 1px; white-space: nowrap;
  background: rgba(100,200,255,0.15); color: #64C8FF; border: 1px solid rgba(100,200,255,0.3);
}
.ds-badge-best {
  background: linear-gradient(135deg, #64C8FF, #4090FF) !important;
  color: #fff !important; border: none !important;
}
.ds-badge-pop {
  background: linear-gradient(135deg, #FFA500, #FF6B00) !important;
  color: #fff !important; border: none !important;
}
.ds-pkg-icon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 6px; filter: drop-shadow(0 0 8px rgba(60,160,255,0.3)); }
.ds-pkg-name { color: #8aa8cc; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.ds-pkg-amount {
  font-size: 28px; font-weight: 900; font-family: var(--font-display); line-height: 1;
  background: linear-gradient(90deg, #64C8FF, #4090FF, #80DFFF, #64C8FF);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: dsShimmer 3s ease-in-out infinite;
}
.ds-pkg-bonus { color: #2ED573; font-size: 10px; font-weight: 700; margin-top: 2px; }
.ds-pkg-total { color: #556; font-size: 10px; margin: 4px 0 10px; }

/* Buy button (diamond themed) */
.ds-buy-btn {
  display: inline-block; padding: 10px 20px; border: none; border-radius: 10px;
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1px;
  cursor: pointer; transition: all 0.2s;
  background: linear-gradient(135deg, #4090FF, #2060DD);
  color: #fff; box-shadow: 0 4px 12px rgba(40,80,200,0.3);
}
.ds-buy-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(40,80,200,0.4); }
.ds-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-buy-starter {
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  box-shadow: 0 4px 12px rgba(255,80,40,0.3);
}

/* Info section */
.ds-info {
  margin-top: 8px; padding: 20px;
  background: rgba(60,160,255,0.03); border: 1px solid rgba(60,160,255,0.08);
  border-radius: 14px;
}
.ds-info-title {
  font-family: var(--font-display); font-size: 13px; color: #6a8cbb;
  letter-spacing: 1px; margin-bottom: 14px; text-align: center;
}
.ds-info-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
}
.ds-info-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10px; color: #556; text-align: center;
}
.ds-info-icon { width: 28px; height: 28px; object-fit: contain; opacity: 0.7; }

/* Store tabs */
.ds-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  background: rgba(255,255,255,0.03); border-radius: 12px; padding: 4px;
  border: 1px solid rgba(100,200,255,0.08);
}
.ds-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px; border-radius: 10px; border: none;
  background: transparent; color: #556; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; letter-spacing: 0.5px;
}
.ds-tab-icon { width: 16px; height: 16px; object-fit: contain; opacity: 0.5; transition: opacity 0.2s; }
.ds-tab:hover { color: #8aa8cc; background: rgba(100,200,255,0.04); }
.ds-tab-active {
  background: rgba(100,200,255,0.1) !important; color: #64C8FF !important;
  border: 1px solid rgba(100,200,255,0.2);
}
.ds-tab-active .ds-tab-icon { opacity: 1; }

/* Premium tab inside store */
.ds-prem-status {
  text-align: center; margin-bottom: 16px;
  font-size: 13px; color: #2ED573; font-weight: 700;
}
.ds-prem-pkgs { display: flex; gap: 10px; }
.ds-pkg-amount-gold {
  background: linear-gradient(90deg, #FFD700, #FFA000, #FFEC8B, #FFD700) !important;
  background-size: 300% 100% !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important; animation: dsShimmer 3s ease-in-out infinite !important;
}
.ds-buy-gold {
  background: linear-gradient(135deg, #FFD700, #FFA000) !important;
  color: #1a0e2e !important;
  box-shadow: 0 4px 12px rgba(255,200,0,0.3) !important;
}
.ds-save { color: #2ED573; font-weight: 700; font-size: 10px; }
.ds-benefits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.ds-benefit-card {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: rgba(255,215,0,0.03); border: 1px solid rgba(255,215,0,0.08);
  border-radius: 12px; transition: all 0.2s;
}
.ds-benefit-card:hover { background: rgba(255,215,0,0.06); border-color: rgba(255,215,0,0.15); }
.ds-benefit-icon { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(255,215,0,0.2)); }
.ds-benefit-title { font-size: 12px; font-weight: 700; color: #ddd; }
.ds-benefit-desc { font-size: 10px; color: #667; margin-top: 1px; }
.ds-fair {
  text-align: center; font-size: 10px; color: #445; margin-top: 16px;
  font-style: italic;
}

/* Special tab */
.ds-special-card {
  background: rgba(100,200,255,0.04); border: 1px solid rgba(100,200,255,0.15);
  border-radius: 14px; padding: 20px; position: relative; margin-bottom: 14px;
  overflow: hidden;
}
.ds-special-mega {
  border-color: rgba(255,215,0,0.25) !important;
  background: rgba(255,215,0,0.03) !important;
}
.ds-special-badge {
  position: absolute; top: -1px; right: 16px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: #fff; font-size: 8px; font-weight: 900; padding: 4px 12px;
  border-radius: 0 0 8px 8px; letter-spacing: 1px;
}
.ds-special-name {
  font-family: var(--font-display); font-size: 18px; color: #fff;
  letter-spacing: 1px; margin-bottom: 12px;
}
.ds-special-items {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.ds-special-items span {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #aab; font-weight: 600;
}
.ds-special-icon { width: 18px; height: 18px; }
.ds-special-bottom {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px;
}
.ds-special-val {
  font-size: 11px; color: #556; text-decoration: line-through;
}
.ds-special-price {
  font-family: var(--font-display); font-size: 20px; color: #fff;
}
.ds-special-bottom .ds-buy-btn { width: 100%; max-width: 200px; }
.ds-special-exclusive {
  color: #FFD700 !important; font-weight: 700 !important;
}
.ds-timer-bar {
  text-align: center; font-size: 13px; color: #FFD700; margin-bottom: 8px;
  padding: 10px 14px; border-radius: 10px;
  background: rgba(255,215,0,0.06); border: 1px solid rgba(255,215,0,0.15);
  animation: dsTimerPulse 2s ease-in-out infinite alternate;
}
@keyframes dsTimerPulse {
  0% { border-color: rgba(255,215,0,0.1); }
  100% { border-color: rgba(255,215,0,0.3); }
}
.ds-timer-expired { color: #ff4444; background: rgba(255,68,68,0.06); border-color: rgba(255,68,68,0.15); animation: none; }
.ds-timer-icon { margin-right: 4px; }
.ds-once-note {
  text-align: center; font-size: 11px; color: #6a8cbb; margin-bottom: 16px;
  padding: 8px 12px; background: rgba(100,200,255,0.04); border-radius: 8px;
  border: 1px solid rgba(100,200,255,0.08);
}

/* Bundle frame previews */
.ds-special-preview {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 12px 0 4px;
}
.ds-frame-preview {
  width: 72px; height: 72px; border-radius: 14px; overflow: hidden; position: relative;
}
.ds-frame-avatar {
  width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
}
.ds-frame-label {
  font-size: 9px; color: #6a8cbb; letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   AVATAR BACKGROUNDS — applied on avatar wrappers
   ══════════════════════════════════════════════════════════════ */
/* Avatar backgrounds — simple background color on the container.
   Avatar PNGs have transparent backgrounds so the color shows through. */
/* ══════════════════════════════════════════════════════════════
   AVATAR FRAMES — border/glow around avatar
   ══════════════════════════════════════════════════════════════ */
/* Wooden — simple brown border */
.gv-frame-wooden {
  border: 1.5px solid #8B6914 !important;
  box-shadow: 0 0 4px rgba(139,105,20,0.3);
}
/* Iron — steel grey border */
.gv-frame-iron {
  border: 1.5px solid #8899aa !important;
  box-shadow: 0 0 4px rgba(136,153,170,0.3);
}
/* Alpha Tester — purple animated */
.gv-frame-alpha {
  border: 1.5px solid #BF5FFF !important;
  box-shadow: 0 0 8px rgba(191,95,255,0.3);
  animation: gvFrameAlpha 2s ease-in-out infinite alternate;
}
@keyframes gvFrameAlpha {
  0% { box-shadow: 0 0 6px rgba(191,95,255,0.2); }
  100% { box-shadow: 0 0 14px rgba(191,95,255,0.5); }
}
/* Adventurer — animated cyan border */
.gv-frame-adventurer {
  border: 1.5px solid #40a0ff !important;
  box-shadow: 0 0 8px rgba(64,160,255,0.3);
  animation: gvFrameAdv 3s ease-in-out infinite alternate;
}
@keyframes gvFrameAdv {
  0% { border-color: #3090ee; box-shadow: 0 0 6px rgba(48,144,238,0.2); }
  100% { border-color: #60c0ff; box-shadow: 0 0 14px rgba(96,192,255,0.5); }
}
/* Champion — animated fire border */
.gv-frame-champion {
  border: 2px solid #ff8800 !important;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255,136,0,0.2);
  animation: gvFrameChamp 3s ease-in-out infinite alternate;
}
@keyframes gvFrameChamp {
  0% { box-shadow: 0 0 4px rgba(255,136,0,0.15); }
  100% { box-shadow: 0 0 6px rgba(255,170,48,0.25); }
}
/* Overlord — void purple with lightning flicker effect */
.gv-frame-overlord {
  border: 1.5px solid #a040e0 !important;
  box-shadow: 0 0 10px rgba(160,64,224,0.4), 0 0 20px rgba(180,60,255,0.15);
  animation: gvFrameOverlord 3s ease-in-out infinite;
}
@keyframes gvFrameOverlord {
  0% { border-color: #9030d0; box-shadow: 0 0 8px rgba(144,48,208,0.3), 0 0 16px rgba(100,0,200,0.1); }
  15% { border-color: #c060ee; box-shadow: 0 0 14px rgba(180,80,240,0.5), 0 0 24px rgba(160,40,255,0.3); }
  20% { border-color: #9030d0; box-shadow: 0 0 8px rgba(144,48,208,0.3), 0 0 16px rgba(100,0,200,0.1); }
  50% { border-color: #b050ee; box-shadow: 0 0 12px rgba(176,80,238,0.5), 0 0 20px rgba(180,60,255,0.2); }
  60% { border-color: #c060ee; box-shadow: 0 0 16px rgba(192,96,238,0.6), 0 0 28px rgba(180,60,255,0.3); }
  65% { border-color: #a040e0; box-shadow: 0 0 10px rgba(160,64,224,0.4), 0 0 18px rgba(180,60,255,0.15); }
  100% { border-color: #9030d0; box-shadow: 0 0 8px rgba(144,48,208,0.3), 0 0 16px rgba(100,0,200,0.1); }
}

/* Founder — Double Halo frame (upgraded from jelly wobble v23.0.760).
   Two counter-rotating conic-gradient rings around the avatar.
   Scales with avatar size via percentage inset. Keeps border-radius circular. */
.gv-frame-founder {
  border: 2px solid rgba(255,230,170,0.8) !important;
  border-radius: 50% !important;
  position: relative;
  box-shadow: 0 0 18px rgba(255,200,100,0.5), inset 0 0 6px rgba(255,240,180,0.3);
}
/* Inner halo — clockwise spin, sharper gold */
.gv-avatar-wrap .gv-frame-founder::before,
.hero-profile-avatar-wrap .gv-frame-founder::before,
.hpv9-avatar-wrap .gv-frame-founder::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255,240,180,0.55) 30deg,
      transparent 60deg,
      rgba(255,220,140,0.45) 120deg,
      transparent 150deg,
      rgba(255,250,200,0.65) 210deg,
      transparent 240deg,
      rgba(255,220,140,0.45) 300deg,
      transparent 330deg);
  filter: blur(5px);
  animation: gvFounderHaloSpin 10s linear infinite;
  pointer-events: none;
  z-index: -1;
}
/* Outer halo — counter-rotating, softer */
.gv-avatar-wrap .gv-frame-founder::after,
.hero-profile-avatar-wrap .gv-frame-founder::after,
.hpv9-avatar-wrap .gv-frame-founder::after {
  content: '';
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background:
    conic-gradient(from 180deg,
      transparent 0deg,
      rgba(255,215,140,0.25) 45deg,
      transparent 90deg,
      rgba(255,215,140,0.18) 180deg,
      transparent 225deg,
      rgba(255,215,140,0.25) 315deg,
      transparent 360deg);
  filter: blur(10px);
  animation: gvFounderHaloCounter 16s linear infinite;
  pointer-events: none;
  z-index: -2;
}
@keyframes gvFounderHaloSpin    { to { transform: rotate(360deg); } }
@keyframes gvFounderHaloCounter { to { transform: rotate(-360deg); } }

/* Tiny avatar contexts (rankings, chat, guild list) — shrink halo to stay subtle */
.dbf-rank-card-avatar.gv-frame-founder,
.chat-avatar-img.gv-frame-founder,
.arena-lb-avatar.gv-frame-founder,
.guild-member-avatar.gv-frame-founder {
  border-width: 1.5px !important;
}
.dbf-rank-card-avatar .gv-frame-founder::after,
.chat-avatar-img .gv-frame-founder::after,
.arena-lb-avatar .gv-frame-founder::after,
.guild-member-avatar .gv-frame-founder::after {
  display: none; /* hide outer halo — tight space */
}

/* Legacy jelly wobble kept as alias class for any hard-coded references */
.gv-frame-founder-legacy {
  border: 2.5px solid #FFD700 !important;
  animation: gvFrameFounder 3s ease-in-out infinite;
}
/* iOS Safari does NOT clip <video> content to border-radius — the video
   renders as a rectangle and the dark corners peek out past the frame.
   Fix: force the video onto its own compositing layer with a full-coverage
   mask. Compositing layers DO respect border-radius on iOS.
   Works for both circular (chat/profile) and rounded-square (ranking)
   avatar frames, no shape-specific rules needed. */
video.chat-avatar-img,
video.chat-profile-avatar-img,
video.arena-lb-avatar,
video.arena-fighter-img-lg,
video.header-avatar,
video.hero-avatar-img {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
          mask-image: radial-gradient(white, black);
  background: transparent;
}
@keyframes gvFrameFounder {
  0%, 100% { border-radius: 50% !important; transform: scale(1); }
  15% { border-radius: 46% 54% 50% 50% !important; transform: scale(1.02, 0.98); }
  30% { border-radius: 50% 50% 54% 46% !important; transform: scale(0.98, 1.02); }
  45% { border-radius: 54% 46% 46% 54% !important; transform: scale(1.01, 0.99); }
  60% { border-radius: 46% 54% 54% 46% !important; transform: scale(0.99, 1.01); }
  75% { border-radius: 50% 46% 50% 54% !important; transform: scale(1.01, 0.99); }
}
/* Founder background — ember particles */
.gv-bg-founder {
  background: radial-gradient(circle, #1a0c04, #0a0400) !important;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(255,140,0,0.3), 0 0 30px rgba(255,100,0,0.15);
  animation: gvBgFounder 4s ease-in-out infinite alternate;
}
@keyframes gvBgFounder {
  0% { box-shadow: 0 0 12px rgba(255,140,0,0.2), 0 0 24px rgba(255,100,0,0.1); }
  100% { box-shadow: 0 0 22px rgba(255,160,0,0.45), 0 0 40px rgba(255,120,0,0.25); }
}

/* ══════════════════════════════════════════════════════════════
   V2 WARFORGE PROFILE PANEL
   Octagonal avatar, corner brackets, bolts, horizontal head row,
   class-themed color palette (warrior red / mage purple / blade green).
   ══════════════════════════════════════════════════════════════ */
/* STREAM variant — no card frame, flows as a continuous column.
   Subtle bg gradient only, sections separated by .hp-section dividers.
   Decorative corners + bolts are hidden (see below). */
/* ════════════════════════════════════════════════════════════════════
   HERO PANEL v4 — Card-based V9 (from profile-avatar-mockup)
   Prefix .hpv9- — 3 cards stacked (Hero / Gear / Actions),
   silhouette body in Gear, prominent Power in Hero with emblem glow.
   Founder Pack owners get gold theme via .hpv9-founder on stack.
   ════════════════════════════════════════════════════════════════════ */
.hpv9-stack {
  background: #0a0612;
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 16px;
  padding: 4px;
  box-shadow: 0 10px 30px rgba(138,79,207,0.15);
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  overflow: hidden;
}
.hpv9-stack .hp-corner, .hpv9-stack .hp-bolt, .hpv9-stack .hp-mini-btns { display: none !important; }

.hpv9-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 6px 0;
  position: relative; z-index: 5;
}
.hpv9-iconbtn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer; color: #a89fc4;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; position: relative; transition: all .15s;
  font-family: inherit;
}
.hpv9-iconbtn:hover { border-color: #ffd44d; color: #ffd44d; }
.hpv9-badge {
  position: absolute; top: -4px; right: -4px;
  background: #FF4757; color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 1px 5px; border-radius: 8px;
  min-width: 16px; text-align: center;
}

/* Settings dropdown */
.hpv9-gear-wrap { position: relative; }
.hpv9-dropdown {
  position: absolute; top: 38px; left: 0;
  min-width: 200px;
  background: #1a1330;
  border: 1px solid rgba(199,122,252,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
  padding: 6px; display: none; z-index: 100;
}
.hpv9-gear-wrap.open .hpv9-dropdown { display: block; }
.hpv9-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: #e9e4f5; cursor: pointer;
  text-decoration: none;
}
.hpv9-dd-item:hover { background: rgba(199,122,252,0.15); color: #ffd44d; }
.hpv9-dd-item .ic { font-size: 15px; width: 20px; text-align: center; }
.hpv9-dd-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
.hpv9-dd-item.discord { color: #5865F2; }
.hpv9-dd-item.reddit { color: #FF4500; }
.hpv9-dd-item.danger { color: #ff6060; }

/* Event banner */
.hpv9-event-banner {
  width: calc(100% - 8px);
  margin: 0 4px;
  padding: 9px 12px;
  background: linear-gradient(90deg, rgba(255,60,60,0.15), rgba(255,100,40,0.15));
  border: 1px solid rgba(255,80,80,0.4);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; position: relative; overflow: hidden;
  color: #fff; font-family: inherit;
}
.hpv9-event-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,100,50,0.3), transparent);
  animation: hpv9EveSweep 3s infinite;
}
@keyframes hpv9EveSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hpv9-event-banner > * { position: relative; }
.hpv9-event-ic { font-size: 18px; }
.hpv9-event-body { flex: 1; text-align: left; }
.hpv9-event-ttl { color: #ff6660; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hpv9-event-sub { color: #a89fc4; font-size: 10px; }
.hpv9-event-live {
  background: #ff4444; color: #fff;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  animation: hpv9EveLive 1.2s infinite;
}
@keyframes hpv9EveLive { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Card shell */
.hpv9-card {
  background: linear-gradient(180deg, rgba(30,22,60,0.9), rgba(18,12,36,0.95));
  border: 1px solid rgba(199,122,252,0.12);
  border-radius: 14px;
  padding: 12px;
  position: relative;
  margin: 0 4px;
}
.hpv9-card-hdr { display: none; } /* hidden — HERO/GEAR labels were visual clutter */

/* ═══ Hero card — premium redesign ═══ */
.hpv9-hero { padding: 14px 14px 16px; overflow: hidden; }
.hpv9-hero::before {
  content: ''; position: absolute;
  top: -30%; left: 50%;
  width: 180%; aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,212,77,0.12), transparent 50%);
  pointer-events: none;
}
.hpv9-hero > * { position: relative; z-index: 1; }

.hpv9-hero-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 12px;
}
.hpv9-avatar-wrap {
  position: relative;
  width: 84px; height: 84px;
  flex-shrink: 0;
  border-radius: 50%;
  cursor: pointer;
}
/* The selected .gv-bg-* class stays visible — glow/gradient come from it.
   We only need to ensure the bg respects the circular shape (so it doesn't
   bleed past the avatar as a square). */
.hpv9-avatar-wrap[class*="gv-bg-"] { border-radius: 50%; overflow: visible; }
.hpv9-avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  /* border color/width supplied by the player's chosen .gv-frame-* class.
     Fallback border for players with no frame set. */
}
/* Default fallback border — gets overridden the moment any .gv-frame-* class is present. */
.hpv9-avatar:not([class*="gv-frame-"]) { border: 3px solid #ffd44d; }
@keyframes hpv9AvaSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hpv9-lvl {
  position: absolute; bottom: -2px; right: -6px;
  background: linear-gradient(135deg, #ffd44d, #ffa500);
  color: #1a0e0e;
  font-weight: 900; font-size: 11px;
  padding: 3px 9px; border-radius: 999px;
  border: 2px solid #0a0612;
  letter-spacing: 1px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(255,165,0,0.5);
}
.hpv9-hero-info { flex: 1; min-width: 0; }
.hpv9-name {
  color: #ffd44d;
  font-size: 22px; font-weight: 800;
  letter-spacing: 1.5px; line-height: 1.1;
  font-family: 'Cinzel', 'Georgia', serif;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 0 16px rgba(255,212,77,0.3);
  margin-bottom: 6px;
}
.hpv9-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hpv9-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid;
}
.hpv9-chip.cls { color: #FF4757; border-color: rgba(255,71,87,0.35); background: rgba(255,71,87,0.08); }
.hpv9-chip.elo { color: #ffd44d; border-color: rgba(255,215,0,0.35); background: rgba(255,215,0,0.08); cursor: pointer; }
.hp-class-mage .hpv9-chip.cls { color: #BF5FFF; border-color: rgba(191,95,255,0.35); background: rgba(191,95,255,0.08); }
.hp-class-blade_dancer .hpv9-chip.cls { color: #2ED573; border-color: rgba(46,213,115,0.35); background: rgba(46,213,115,0.08); }

.hpv9-xp {
  position: relative;
  height: 8px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,215,0,0.15);
  border-radius: 4px; overflow: hidden;
  margin-bottom: 3px;
}
.hpv9-xp-fill { height: 100%; background: linear-gradient(90deg, #8a4fcf, #c77afc, #ffd44d); border-radius: 3px; transition: width .6s; }
.hpv9-xp-txt { font-size: 10px; color: #a89fc4; text-align: center; margin-bottom: 10px; }

/* Top currency bar — sits right under sigil/topbar, always prominent */
.hpv9-curbar {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 4px 10px;
}

/* Centre-align name + chips when they live in the Gear card (ring stage layout) */
.hpv9-gear .hpv9-name { text-align: center; margin-top: 6px; }
.hpv9-gear .hpv9-chips { justify-content: center; margin-bottom: 10px; }

.hpv9-cur-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.hpv9-cur {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-weight: 700; font-size: 14px;
}
.hpv9-cur.gold { color: #ffd44d; border-color: rgba(255,215,0,0.25); }
.hpv9-cur.dia { color: #7ecdff; border-color: rgba(126,205,255,0.25); cursor: pointer; }
.hpv9-cur img { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 0 4px currentColor); }
.hpv9-cur-plus {
  margin-left: auto;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.4);
  color: #ffd44d;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 900; cursor: pointer;
}

/* POWER — featured centerpiece (compact version) */
.hpv9-power {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background:
    radial-gradient(ellipse at center, rgba(255,215,0,0.15), transparent 70%),
    linear-gradient(135deg, rgba(60,30,10,0.85), rgba(30,15,5,0.95));
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,216,144,0.15),
    0 0 14px rgba(255,165,0,0.18),
    0 4px 10px rgba(0,0,0,0.4);
  cursor: pointer; overflow: hidden;
  color: inherit; font-family: inherit; text-align: left;
  position: relative;
}
.hpv9-power::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,216,144,0.12), transparent);
  animation: hpv9PowerShine 5s infinite;
}
@keyframes hpv9PowerShine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hpv9-power > * { position: relative; }
.hpv9-power-emblem {
  width: 36px; height: 36px; flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,200,100,0.5)) drop-shadow(0 0 14px rgba(255,165,0,0.3));
  animation: hpv9PowerPulse 3s ease-in-out infinite;
}
@keyframes hpv9PowerPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.hpv9-power-body { flex: 1; min-width: 0; }
.hpv9-power-l {
  color: rgba(255,216,144,0.8);
  font-size: 9px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  font-family: 'Cinzel', 'Georgia', serif;
  margin-bottom: 1px;
}
.hpv9-power-v {
  font-size: 20px; font-weight: 900; line-height: 1;
  background: linear-gradient(180deg, #fff5c0, #ffc850);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 8px rgba(255,180,80,0.45);
  font-family: 'Cinzel', 'Georgia', serif;
  letter-spacing: 0.5px;
}
.hpv9-power-sub { color: rgba(255,216,144,0.45); font-size: 9px; font-weight: 600; margin-top: 1px; letter-spacing: 0.5px; }
.hpv9-power-caret { color: #ffd44d; font-size: 16px; flex-shrink: 0; opacity: 0.6; }

/* ═══ Gear card — ORB RING stage: avatar center + 8 slots in a circle ═══ */
.hpv9-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 340px;
  margin: 8px auto 10px;
}
.hpv9-hero-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 55%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,122,252,0.3), rgba(138,79,207,0.1) 40%, transparent 70%);
  animation: hpv9HeroPulse 4s ease-in-out infinite;
  z-index: 0;
}
@keyframes hpv9HeroPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.08); } }
.hpv9-stage .hpv9-avatar-wrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: 42% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  z-index: 3;
  max-width: none !important;
  flex-shrink: 0;
}
/* Ring-stage level badge — sibling of avatar-wrap. Reset base pill rules
   (bottom/right) that would otherwise make it a massive oval. */
.hpv9-stage > .hpv9-lvl {
  position: absolute !important;
  top: 72% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, 0) !important;
  width: auto !important;
  height: auto !important;
  background: linear-gradient(135deg, #c77afc, #8a4fcf);
  color: #fff;
  font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 900; font-size: 11px;
  padding: 3px 14px;
  border-radius: 999px;
  border: 2px solid #0a0612;
  letter-spacing: 1px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6), 0 0 12px rgba(138,79,207,0.35);
  z-index: 4;
  white-space: nowrap;
  display: inline-block;
}
/* 8 orb slots at 45° intervals. Flat dark bg + single thin glowing ring.
   Icons fill the orb (no padding). Inner rarity-frame border is suppressed
   — the orb's own border handles rarity colour + glow. */
.hpv9-stage .hpv9-slot {
  position: absolute !important;
  width: 15% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  max-width: none !important;
  background: radial-gradient(circle at 30% 30%, rgba(40,25,60,0.95), rgba(15,8,25,0.9)) !important;
  border: 2px solid rgba(199,122,252,0.45) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 12px rgba(138,79,207,0.25), inset 0 0 8px rgba(0,0,0,0.6) !important;
  cursor: pointer;
  z-index: 2;
  transition: all .15s;
  overflow: hidden !important;
  padding: 0 !important;
}
.hpv9-stage .hpv9-slot:hover { border-color: #ffd44d !important; box-shadow: 0 0 14px rgba(255,212,77,0.4), inset 0 0 8px rgba(0,0,0,0.6) !important; }
.hpv9-stage .hpv9-slot.filled.r-common    { border-color: #b0b0b0 !important; box-shadow: 0 0 10px rgba(180,180,180,0.3), inset 0 0 8px rgba(0,0,0,0.6) !important; }
.hpv9-stage .hpv9-slot.filled.r-uncommon  { border-color: #5ED87A !important; box-shadow: 0 0 12px rgba(94,216,122,0.4), inset 0 0 8px rgba(0,0,0,0.6) !important; }
.hpv9-stage .hpv9-slot.filled.r-rare      { border-color: #4FACFE !important; box-shadow: 0 0 14px rgba(79,172,254,0.5), inset 0 0 8px rgba(0,0,0,0.6) !important; }
.hpv9-stage .hpv9-slot.filled.r-epic      { border-color: #BF5FFF !important; box-shadow: 0 0 14px rgba(163,53,238,0.5), inset 0 0 8px rgba(0,0,0,0.6) !important; }
.hpv9-stage .hpv9-slot.filled.r-legendary { border-color: #FFB340 !important; box-shadow: 0 0 18px rgba(255,128,0,0.65), inset 0 0 8px rgba(0,0,0,0.6) !important; }
.hpv9-stage .hpv9-slot.filled.r-mythic    { border-color: #ff4444 !important; box-shadow: 0 0 18px rgba(255,60,60,0.7), inset 0 0 8px rgba(0,0,0,0.6) !important; }

/* Inner icon wrapper — suppress rarity-frame border + shadow, fill orb */
.hpv9-stage .hpv9-slot .item-icon-wrap {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
}
.hpv9-stage .hpv9-slot .item-icon-wrap::before,
.hpv9-stage .hpv9-slot .item-icon-wrap::after { display: none !important; }
.hpv9-stage .hpv9-slot .item-icon-wrap .item-img {
  width: 72% !important;
  height: 72% !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  display: block !important;
}
.hpv9-stage .hpv9-slot .item-lvl-badge { display: none !important; }
.hpv9-stage .hpv9-eq-label { font-size: 9px; color: rgba(199,122,252,0.55); font-weight: 700; letter-spacing: 0.5px; }

/* Ring positions — 8 slots at 45° intervals (top/right/bottom/left + 4 corners) */
.hpv9-stage .hpv9-slot.s-helmet  { top: 2%;    left: 50%; transform: translateX(-50%); }
.hpv9-stage .hpv9-slot.s-amulet  { top: 16%;   right: 10%; }
.hpv9-stage .hpv9-slot.s-weapon  { top: 50%;   right: 2%; transform: translateY(-50%); }
.hpv9-stage .hpv9-slot.s-armor   { top: 16%;   left: 10%; }
.hpv9-stage .hpv9-slot.s-offhand { top: 50%;   left: 2%;  transform: translateY(-50%); }
.hpv9-stage .hpv9-slot.s-ring    { bottom: 16%; left: 10%; }
.hpv9-stage .hpv9-slot.s-relic   { bottom: 16%; right: 10%; }
.hpv9-stage .hpv9-slot.s-boots   { bottom: 2%;  left: 50%; transform: translateX(-50%); }

/* Faction color overrides for the orb stage (base = purple default).
   These only apply to EMPTY orbs (no .filled class). Filled orbs keep their
   rarity-based border colour so rarity is never hidden by faction theme. */
.hpv9-fac-warden .hpv9-stage .hpv9-hero-glow {
  background: radial-gradient(circle, rgba(255,220,130,0.3), rgba(220,180,80,0.1) 40%, transparent 70%) !important;
}
.hpv9-fac-warden .hpv9-stage .hpv9-slot:not(.filled) {
  background: radial-gradient(circle at 30% 30%, rgba(60,45,18,0.9), rgba(20,14,6,0.9)) !important;
  border-color: rgba(255,220,130,0.45) !important;
  box-shadow: 0 0 12px rgba(220,180,80,0.3), inset 0 0 8px rgba(0,0,0,0.6) !important;
}
.hpv9-fac-warden .hpv9-stage > .hpv9-lvl {
  background: linear-gradient(135deg, #ffd890, #c89a4a);
  color: #1a0e0e;
}
.hpv9-fac-warden .hpv9-stage .hpv9-eq-label { color: rgba(255,220,130,0.55); }

.hpv9-fac-seeker .hpv9-stage .hpv9-hero-glow {
  background: radial-gradient(circle, rgba(150,70,220,0.35), rgba(90,30,160,0.1) 40%, transparent 70%) !important;
}
.hpv9-fac-seeker .hpv9-stage .hpv9-slot:not(.filled) {
  background: radial-gradient(circle at 30% 30%, rgba(40,18,60,0.9), rgba(15,6,25,0.92)) !important;
  border-color: rgba(180,110,240,0.45) !important;
  box-shadow: 0 0 12px rgba(120,50,200,0.3), inset 0 0 8px rgba(0,0,0,0.6) !important;
}
.hpv9-fac-seeker .hpv9-stage .hpv9-eq-label { color: rgba(180,110,240,0.6); }

/* Founder override — gold orbs (only empty ones, filled keep rarity colour) */
.hpv9-founder .hpv9-stage .hpv9-hero-glow {
  background: radial-gradient(circle, rgba(255,215,140,0.35), rgba(255,165,0,0.12) 40%, transparent 70%) !important;
}
.hpv9-founder .hpv9-stage .hpv9-slot:not(.filled) {
  background: radial-gradient(circle at 30% 30%, rgba(70,45,18,0.95), rgba(25,14,6,0.92)) !important;
  border-color: rgba(255,215,140,0.55) !important;
  box-shadow: 0 0 14px rgba(255,180,80,0.35), inset 0 0 8px rgba(0,0,0,0.6) !important;
}
.hpv9-founder .hpv9-stage > .hpv9-lvl {
  background: linear-gradient(135deg, #ffd890, #c89a4a);
  color: #1a0e0e;
}
.hpv9-founder .hpv9-stage .hpv9-eq-label { color: rgba(255,215,140,0.6); }

/* Legacy paper-doll figure kept hidden when using ring stage */
.hpv9-figure {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1.25;
  max-width: 420px;
  margin: 4px auto 8px;
  padding: 4px;
  display: none;
}
.hpv9-silhouette {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.35;
  filter: drop-shadow(0 0 12px rgba(255,212,77,0.15));
}
.hpv9-silhouette path, .hpv9-silhouette rect { fill: url(#hpv9SilGrad); stroke: rgba(255,215,0,0.25); stroke-width: 1.5; }
.hpv9-sil-s0 { stop-color: rgba(199,122,252,0.35); }
.hpv9-sil-s1 { stop-color: rgba(138,79,207,0.1); }

.hpv9-slot {
  position: absolute;
  width: 20%; aspect-ratio: 1;
  background: rgba(10,6,22,0.85);
  border: 1.5px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; overflow: hidden;
  z-index: 3;
}
.hpv9-slot:hover { border-color: #ffd44d; box-shadow: 0 0 12px rgba(255,212,77,0.25); }
.hpv9-slot.filled.r-rare      { border-color: #0070dd; box-shadow: 0 0 8px rgba(0,112,221,0.3); }
.hpv9-slot.filled.r-epic      { border-color: #a335ee; box-shadow: 0 0 10px rgba(163,53,238,0.3); }
.hpv9-slot.filled.r-legendary { border-color: #ff8000; box-shadow: 0 0 12px rgba(255,128,0,0.35); }
.hpv9-slot.filled.r-mythic    { border-color: #ff4444; box-shadow: 0 0 12px rgba(255,60,60,0.4); }
.hpv9-slot .item-icon-wrap { width: 100% !important; height: 100% !important; border-radius: 9px; background: transparent; }
.hpv9-slot .item-icon-wrap .item-img { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.hpv9-eq-label { color: #6c6385; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; }

/* Legacy paper-doll positions — scoped to .hpv9-figure which is display:none.
   Ring stage uses its own .hpv9-stage .hpv9-slot.s-X rules above. */
.hpv9-figure .hpv9-slot.s-helmet  { top: 0%;   left: 50%; transform: translateX(-50%); width: 22%; }
.hpv9-figure .hpv9-slot.s-amulet  { top: 15%;  right: 18%; width: 15%; }
.hpv9-figure .hpv9-slot.s-armor   { top: 34%;  left: 50%; transform: translateX(-50%); width: 26%; }
.hpv9-figure .hpv9-slot.s-weapon  { top: 40%;  right: 2%;  width: 20%; }
.hpv9-figure .hpv9-slot.s-offhand { top: 40%;  left: 2%;   width: 20%; }
.hpv9-figure .hpv9-slot.s-ring    { top: 63%;  left: 6%;   width: 18%; }
.hpv9-figure .hpv9-slot.s-relic   { top: 63%;  left: 50%; transform: translateX(-50%); width: 20%; }
.hpv9-figure .hpv9-slot.s-boots   { bottom: 4%; left: 50%; transform: translateX(-50%); width: 22%; }

.hpv9-gems-wrap { margin-top: 8px; }
.hpv9-inv {
  width: 100%; margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 13px;
  color: #e9e4f5; font-family: inherit;
}
.hpv9-inv:hover { border-color: #ffd44d; color: #ffd44d; }
.hpv9-inv img { width: 18px; height: 18px; flex-shrink: 0; }
.hpv9-inv-count { margin-left: auto; color: #a89fc4; font-size: 12px; }
.hpv9-inv-new { background: #FF4757; color: #fff; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 800; }

/* ═══ Actions card ═══ */
.hpv9-actions-card { padding: 10px; }
.hpv9-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.hpv9-act {
  padding: 10px 2px;
  background: rgba(138,79,207,0.1);
  border: 1px solid rgba(138,79,207,0.3);
  border-radius: 8px; text-align: center;
  color: #e9e4f5;
  font-size: 10px; font-weight: 700;
  cursor: pointer; position: relative;
  transition: all .15s; font-family: inherit;
}
.hpv9-act:hover { border-color: #c77afc; transform: translateY(-1px); }
.hpv9-act-ic { width: 20px; height: 20px; display: block; margin: 0 auto 3px; object-fit: contain; }
.hpv9-act-lbl { display: block; line-height: 1.2; }
.hpv9-act-badge {
  position: absolute; top: -4px; right: -4px;
  background: #FF4757; color: #fff;
  padding: 1px 5px; border-radius: 8px;
  font-size: 10px; font-weight: 800; min-width: 16px;
}
.hpv9-act-badge.gold { background: #ffd44d; color: #1a0e0e; }
.hpv9-act.prem {
  background: linear-gradient(135deg, rgba(255,100,200,0.12), rgba(255,215,0,0.08));
  border-color: rgba(255,130,200,0.4);
}
.hpv9-act.prem.active { box-shadow: 0 0 12px rgba(255,215,0,0.3); }
.hpv9-act.pass { background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(180,100,20,0.05)); border-color: rgba(255,215,0,0.35); color: #ffd44d; }

/* Corners (only shown in founder variant via CSS) */
.hpv9-corner { display: none; position: absolute; width: 22px; height: 22px; z-index: 2; pointer-events: none; }
.hpv9-particles { display: none; position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.hpv9-founder-badge { display: none; }

/* Social footer */
.hpv9-social-row { display: flex; gap: 6px; margin-top: 8px; }
.hpv9-social {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; text-decoration: none;
  color: #a89fc4;
  font-size: 11px; font-weight: 700;
  cursor: pointer; position: relative;
  font-family: inherit;
}
.hpv9-social:hover { border-color: #ffd44d; }
.hpv9-social.discord { color: #9BA3FF; }
.hpv9-social.discord:hover { border-color: #5865F2; color: #c4c9ff; }
.hpv9-social.reddit { color: #FF8866; }
.hpv9-social.reddit:hover { border-color: #FF4500; color: #ffad88; }
.hpv9-social img { width: 16px; height: 16px; }
.hpv9-social-bonus {
  position: absolute; top: -6px; right: -4px;
  display: flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, #ffd44d, #ffa500);
  color: #1a0e0e;
  padding: 1px 5px; border-radius: 10px;
  font-size: 9px; font-weight: 900;
}
.hpv9-social-bonus img { width: 10px; height: 10px; }

/* ═══ Founder Gold theme ═══ */
.hpv9-stack.hpv9-founder {
  background:
    radial-gradient(ellipse at top, rgba(255,200,100,0.2), transparent 70%),
    linear-gradient(180deg, #2a1708 0%, #140a03 100%);
  border-color: rgba(255,215,140,0.55);
  box-shadow:
    inset 0 1px 0 rgba(255,230,170,0.2),
    0 0 40px rgba(255,180,80,0.3),
    0 14px 40px rgba(0,0,0,0.7);
}
.hpv9-founder .hpv9-card {
  background: linear-gradient(180deg, rgba(80,45,18,0.85), rgba(40,22,10,0.95));
  border-color: rgba(255,215,140,0.4);
}
.hpv9-founder .hpv9-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 45%, rgba(255,230,170,0.07) 50%, transparent 55%);
  animation: hpv9FShimmer 6s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
.hpv9-founder .hpv9-card > * { position: relative; z-index: 1; }
.hpv9-founder .hpv9-card-hdr { background: #2a1708; color: #ffd890; }
.hpv9-founder .hpv9-hero {
  background:
    radial-gradient(ellipse at top, rgba(255,200,100,0.25), transparent 60%),
    linear-gradient(180deg, #3a2510 0%, #1a0e05 50%, #120806 100%);
  border-color: rgba(255,200,100,0.5);
  box-shadow: inset 0 1px 0 rgba(255,220,150,0.25), 0 0 24px rgba(255,165,0,0.25), 0 10px 30px rgba(0,0,0,0.6);
}
.hpv9-founder .hpv9-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,230,170,0.22) 50%, transparent 70%);
  animation: hpv9FShimmer 4.5s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes hpv9FShimmer { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(120%); } }

.hpv9-founder .hpv9-corner { display: block; border-color: rgba(255,215,140,0.7); }
.hpv9-founder .hpv9-corner.tl { top: 6px; left: 6px; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 8px; }
.hpv9-founder .hpv9-corner.tr { top: 6px; right: 6px; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: 8px; }
.hpv9-founder .hpv9-corner.bl { bottom: 6px; left: 6px; border-bottom: 2px solid; border-left: 2px solid; border-bottom-left-radius: 8px; }
.hpv9-founder .hpv9-corner.br { bottom: 6px; right: 6px; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 8px; }

.hpv9-founder .hpv9-particles { display: block; }
.hpv9-founder .hpv9-particles span {
  position: absolute; bottom: -6px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe4a0, rgba(255,200,100,0));
  animation: hpv9FFloat 6s infinite;
}
.hpv9-founder .hpv9-particles span:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 5.5s; }
.hpv9-founder .hpv9-particles span:nth-child(2) { left: 22%; animation-delay: 1.2s; animation-duration: 6.3s; }
.hpv9-founder .hpv9-particles span:nth-child(3) { left: 36%; animation-delay: 0.6s; animation-duration: 5s; }
.hpv9-founder .hpv9-particles span:nth-child(4) { left: 50%; animation-delay: 2.1s; animation-duration: 7s; }
.hpv9-founder .hpv9-particles span:nth-child(5) { left: 62%; animation-delay: 3.3s; animation-duration: 5.8s; }
.hpv9-founder .hpv9-particles span:nth-child(6) { left: 74%; animation-delay: 0.9s; animation-duration: 6.7s; }
.hpv9-founder .hpv9-particles span:nth-child(7) { left: 86%; animation-delay: 2.7s; animation-duration: 5.2s; }
.hpv9-founder .hpv9-particles span:nth-child(8) { left: 94%; animation-delay: 1.8s; animation-duration: 6.1s; }
@keyframes hpv9FFloat {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(-180px) scale(1.2); opacity: 0; }
}

.hpv9-founder .hpv9-founder-badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #ff9540, #ffd47a);
  color: #2a1708;
  font-size: 9px; font-weight: 900;
  letter-spacing: 1.5px;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,180,80,0.5);
  animation: hpv9FBadgePulse 2s ease-in-out infinite;
}
@keyframes hpv9FBadgePulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,180,80,0.5); }
  50%     { box-shadow: 0 0 16px rgba(255,200,100,0.85); }
}

/* ═══════════════════════════════════════════════════════════
   Sigil at top (Crown for Founder, Sun for Warden, Moon for Seeker)
   ═══════════════════════════════════════════════════════════ */
.hpv9-sigil {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  pointer-events: none;
  animation: hpv9SigilGlow 2.6s ease-in-out infinite;
}
.hpv9-sigil-crown  { color: #ffe4a0; }
.hpv9-sigil-warden { color: rgba(255,220,130,0.75); }
.hpv9-sigil-seeker { color: rgba(180,110,240,0.8); }
@keyframes hpv9SigilGlow {
  0%,100% { transform: translateX(-50%) scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 10px rgba(255,215,140,0.6)); }
  50%     { transform: translateX(-50%) scale(1.1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 22px rgba(255,235,170,0.95)); }
}
.hpv9-sigil-seeker { animation-duration: 2.8s; }
.hpv9-fac-seeker .hpv9-sigil-seeker {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(120,50,200,0.6));
}

/* The sigil takes the spot at top — push topbar down a bit to clear it */
.hpv9-stack .hpv9-sigil + .hpv9-top,
.hpv9-stack .hpv9-sigil ~ .hpv9-top { margin-top: 18px; }

/* ═══════════════════════════════════════════════════════════
   Faction banner — sigil + name + lore tagline
   ═══════════════════════════════════════════════════════════ */
.hpv9-faction-banner {
  width: calc(100% - 8px);
  margin: 0 4px 10px;
  padding: 7px 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(90deg, transparent, rgba(199,122,252,0.12), transparent);
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 8px;
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: #c77afc;
  cursor: pointer;
  font: inherit; font-family: 'Cinzel', 'Georgia', serif;
  font-weight: 800; font-size: 10px; letter-spacing: 2px;
}
.hpv9-faction-banner:hover { border-color: rgba(199,122,252,0.5); }
.hpv9-fac-sig { font-size: 13px; line-height: 1; }
.hpv9-fac-sep { opacity: 0.5; }
.hpv9-fac-lore { text-transform: none; letter-spacing: 0.5px; font-size: 9px; font-style: italic; opacity: 0.8; font-weight: 600; }

/* Warden faction tint (gold) */
.hpv9-fac-warden .hpv9-faction-banner {
  background: linear-gradient(90deg, transparent, rgba(255,220,130,0.18), transparent);
  border-color: rgba(255,220,130,0.4);
  color: #ffe9a0;
}
/* Seeker faction tint (purple) */
.hpv9-fac-seeker .hpv9-faction-banner {
  background: linear-gradient(90deg, transparent, rgba(180,110,240,0.18), transparent);
  border-color: rgba(180,110,240,0.45);
  color: #e8d0ff;
}
/* Founder keeps gold tint even without faction (or deeper gold with faction) */
.hpv9-founder .hpv9-faction-banner {
  background: linear-gradient(90deg, transparent, rgba(255,220,140,0.25), transparent);
  border-color: rgba(255,220,140,0.55);
  color: #ffe9a0;
}

/* ═══════════════════════════════════════════════════════════
   Founder-only premium animation layers
   ═══════════════════════════════════════════════════════════ */
.hpv9-rays,
.hpv9-sweep,
.hpv9-dust,
.hpv9-spark { display: none; } /* hidden by default — only .hpv9-founder enables them */

.hpv9-founder .hpv9-rays {
  display: block;
  position: absolute;
  top: -15%; left: 50%;
  transform: translateX(-50%);
  width: 180%; height: 120%;
  pointer-events: none;
  z-index: 1;
  background:
    conic-gradient(from 200deg at 50% 100%,
      transparent 0deg,
      rgba(255,220,150,0.12) 10deg,
      transparent 20deg,
      rgba(255,220,150,0.15) 35deg,
      transparent 50deg,
      rgba(255,220,150,0.08) 70deg,
      transparent 80deg,
      transparent 140deg);
  animation: hpv9RaysSway 18s ease-in-out infinite;
}
@keyframes hpv9RaysSway {
  0%,100% { transform: translateX(-50%) rotate(-4deg); }
  50%     { transform: translateX(-50%) rotate(4deg); }
}

.hpv9-founder .hpv9-sweep {
  display: block;
  position: absolute;
  top: -50%; left: -10%;
  width: 120%; height: 50%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(255,230,170,0.14) 50%, transparent 100%);
  filter: blur(8px);
  animation: hpv9SweepDown 8s ease-in-out infinite;
}
@keyframes hpv9SweepDown {
  0%   { top: -60%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { top: 110%; opacity: 0; }
}

.hpv9-founder .hpv9-dust {
  display: block;
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 5;
}
.hpv9-founder .hpv9-dust span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff4c8 0%, #ffd890 30%, rgba(255,200,120,0) 70%);
  box-shadow: 0 0 8px rgba(255,230,170,0.8), 0 0 14px rgba(255,200,100,0.4);
  opacity: 0;
  animation: hpv9Drift 14s ease-in-out infinite;
}
.hpv9-founder .hpv9-dust span:nth-child(1) {left:6%;  top:92%; animation-delay:0s;    animation-duration:11s}
.hpv9-founder .hpv9-dust span:nth-child(2) {left:18%; top:78%; animation-delay:2.5s;  animation-duration:13s}
.hpv9-founder .hpv9-dust span:nth-child(3) {left:30%; top:95%; animation-delay:5s;    animation-duration:12s}
.hpv9-founder .hpv9-dust span:nth-child(4) {left:42%; top:82%; animation-delay:1.5s;  animation-duration:14s}
.hpv9-founder .hpv9-dust span:nth-child(5) {left:54%; top:94%; animation-delay:7s;    animation-duration:11s}
.hpv9-founder .hpv9-dust span:nth-child(6) {left:66%; top:85%; animation-delay:3.5s;  animation-duration:13s}
.hpv9-founder .hpv9-dust span:nth-child(7) {left:78%; top:90%; animation-delay:9s;    animation-duration:12s}
.hpv9-founder .hpv9-dust span:nth-child(8) {left:88%; top:80%; animation-delay:6s;    animation-duration:14s}
.hpv9-founder .hpv9-dust span:nth-child(9) {left:48%; top:98%; animation-delay:0.8s;  animation-duration:11.5s}
@keyframes hpv9Drift {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(30px, -220px) scale(1); opacity: 0.9; }
  90%  { transform: translate(-20px, -460px) scale(1.1); opacity: 0.4; }
  100% { transform: translate(0, -540px) scale(0.8); opacity: 0; }
}

.hpv9-founder .hpv9-spark {
  display: block;
  position: absolute;
  width: 8px; height: 8px;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(circle, #fff8d0 0%, rgba(255,220,130,0.6) 20%, transparent 60%);
  border-radius: 50%;
  opacity: 0;
  animation: hpv9Twinkle 4s ease-in-out infinite;
}
.hpv9-founder .hpv9-spark:nth-of-type(1) { top: 12%; left: 15%;  animation-delay: 0s; }
.hpv9-founder .hpv9-spark:nth-of-type(2) { top: 35%; right: 10%; animation-delay: 1.2s; }
.hpv9-founder .hpv9-spark:nth-of-type(3) { top: 70%; left: 8%;   animation-delay: 2.4s; }
.hpv9-founder .hpv9-spark:nth-of-type(4) { bottom: 8%; left: 45%; animation-delay: 3s; }
.hpv9-founder .hpv9-spark:nth-of-type(5) { top: 55%; right: 25%; animation-delay: 0.6s; }
.hpv9-founder .hpv9-spark:nth-of-type(6) { top: 22%; right: 32%; animation-delay: 1.8s; }
@keyframes hpv9Twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  40%, 60% { opacity: 1; transform: scale(1.1); }
}

/* Ensure all Founder content stays above animation layers */
.hpv9-founder > .hpv9-top,
.hpv9-founder > .hpv9-event-banner,
.hpv9-founder > .hpv9-faction-banner,
.hpv9-founder > .hpv9-card,
.hpv9-founder > .hpv9-social-row {
  position: relative;
  z-index: 10;
}
.hpv9-founder .hpv9-name {
  background: linear-gradient(180deg, #fff5c8, #ffc850);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hpv9-founder .hpv9-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ffe4a0, #ff9540, #ffd47a, #ff8000, #ffe4a0);
  opacity: 1; filter: blur(3px);
  animation: hpv9AvaSpin 8s linear infinite;
  z-index: -1;
  pointer-events: none;
}
.hpv9-founder .hpv9-power {
  background:
    radial-gradient(ellipse at center, rgba(255,220,140,0.3), transparent 70%),
    linear-gradient(135deg, rgba(100,55,18,0.85), rgba(60,32,10,0.95));
  border-color: rgba(255,220,140,0.7);
  box-shadow: inset 0 1px 0 rgba(255,230,170,0.35), 0 0 30px rgba(255,180,80,0.4), 0 6px 20px rgba(0,0,0,0.6);
}
.hpv9-founder .hpv9-cur { background: rgba(20,10,4,0.5); border-color: rgba(255,215,140,0.25); }
.hpv9-founder .hpv9-xp { background: rgba(20,10,4,0.6); border-color: rgba(255,215,140,0.2); }
.hpv9-founder .hpv9-xp-fill { background: linear-gradient(90deg, #ff9540, #ffd47a, #fff5c8); }
.hpv9-founder .hpv9-chip.cls { color: #ff8f90; background: rgba(255,140,100,0.1); border-color: rgba(255,150,120,0.35); }
.hpv9-founder .hpv9-iconbtn { background: rgba(80,45,18,0.6); border-color: rgba(255,215,140,0.35); color: #ffd890; }
.hpv9-founder .hpv9-slot { background: rgba(50,28,10,0.75); border-color: rgba(255,215,140,0.35); }
.hpv9-founder .hpv9-slot:hover { border-color: #ffd890; }
.hpv9-founder .hpv9-inv { background: rgba(80,45,18,0.6); border-color: rgba(255,215,140,0.3); color: #ffd890; }
.hpv9-founder .hpv9-act { background: linear-gradient(135deg, rgba(100,55,18,0.7), rgba(60,32,10,0.85)); border-color: rgba(255,215,140,0.35); color: #ffd890; }
.hpv9-founder .hpv9-act.prem { background: linear-gradient(135deg, rgba(255,120,200,0.2), rgba(255,200,100,0.12)); border-color: rgba(255,150,200,0.5); }
.hpv9-founder .hpv9-act.pass { background: linear-gradient(135deg, rgba(255,215,0,0.18), rgba(180,100,20,0.12)); border-color: rgba(255,215,140,0.5); color: #ffe9a0; }

@media (max-width: 400px) {
  .hpv9-avatar-wrap { width: 70px; height: 70px; }
  .hpv9-figure { aspect-ratio: 1/1.1; }
}

/* ════════════════════════════════════════════════════════════════════
   .pstyle-gold — subtle Founder Gold theme applied to any player card
   (arena fighter rows, guild roster, LFG ads, rankings, chat popups).
   Lightweight — gold tinted border + bg + subtle shimmer.
   Bigger than the full hero-panel theme so cards stay readable.
   ════════════════════════════════════════════════════════════════════ */
.pstyle-gold {
  background:
    radial-gradient(ellipse at top, rgba(255,200,100,0.12), transparent 70%),
    linear-gradient(135deg, rgba(70,40,15,0.55), rgba(35,20,8,0.7)) !important;
  border-color: rgba(255,215,140,0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,220,150,0.15),
    0 0 14px rgba(255,180,80,0.15) !important;
  position: relative;
  overflow: hidden;
}
.pstyle-gold::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,230,170,0.1) 50%, transparent 60%);
  animation: pstyleGoldShine 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes pstyleGoldShine { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(120%); } }
.pstyle-gold > * { position: relative; z-index: 1; }
/* When name is golden — keep founder hues dominant */
.pstyle-gold .lb-name, .pstyle-gold .arena-lb-name,
.pstyle-gold .guild-member-name, .pstyle-gold .arena-fighter-name {
  color: #ffd890 !important;
}

/* Legacy hpe-* panel kept below for rollback safety but unused by new renderHero */
.hpe-panel {
  background: linear-gradient(180deg, rgba(26,20,48,0.95), rgba(13,11,26,0.98));
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative;
}
.hpe-panel .hp-corner, .hpe-panel .hp-bolt, .hpe-panel .hp-mini-btns { display: none !important; }

.hpe-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  position: relative; z-index: 5;
}
.hpe-iconbtn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer; color: #a89fc4;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; position: relative; transition: all .15s;
  font-family: inherit;
}
.hpe-iconbtn:hover { border-color: #ffd44d; color: #ffd44d; }
.hpe-badge {
  position: absolute; top: -4px; right: -4px;
  background: #FF4757; color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 1px 5px; border-radius: 8px;
  min-width: 16px; text-align: center;
}

.hpe-gear-wrap { position: relative; }
.hpe-dropdown {
  position: absolute; top: 38px; left: 0;
  min-width: 200px;
  background: #1a1330;
  border: 1px solid rgba(199,122,252,0.3);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
  padding: 6px; display: none; z-index: 100;
}
.hpe-gear-wrap.open .hpe-dropdown { display: block; }
.hpe-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: #e9e4f5; cursor: pointer;
  text-decoration: none;
}
.hpe-dd-item:hover { background: rgba(199,122,252,0.15); color: #ffd44d; }
.hpe-dd-item .ic { font-size: 15px; width: 20px; text-align: center; }
.hpe-dd-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; }
.hpe-dd-item.discord { color: #5865F2; }
.hpe-dd-item.reddit { color: #FF4500; }
.hpe-dd-item.danger { color: #ff6060; }

.hpe-event-banner {
  width: 100%; margin-bottom: 10px;
  padding: 9px 12px;
  background: linear-gradient(90deg, rgba(255,60,60,0.15), rgba(255,100,40,0.15));
  border: 1px solid rgba(255,80,80,0.4);
  border-radius: 8px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; position: relative; overflow: hidden;
  color: #fff; font-family: inherit;
}
.hpe-event-banner::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,100,50,0.3), transparent);
  animation: hpeEveSweep 3s infinite;
}
@keyframes hpeEveSweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.hpe-event-banner > * { position: relative; }
.hpe-event-ic { font-size: 18px; }
.hpe-event-body { flex: 1; text-align: left; }
.hpe-event-ttl { color: #ff6660; font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hpe-event-sub { color: #a89fc4; font-size: 10px; }
.hpe-event-live {
  background: #ff4444; color: #fff;
  padding: 2px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  animation: hpeEveLive 1.2s infinite;
}
@keyframes hpeEveLive { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.hpe-doll {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  gap: 6px; justify-items: center; align-items: center;
  margin-bottom: 12px; padding: 10px 8px;
  background:
    radial-gradient(ellipse at center, rgba(255,215,0,0.05), transparent 70%),
    rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px; position: relative;
}
.hpe-doll::before {
  content: ''; position: absolute;
  top: 10%; bottom: 10%; left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,215,0,0.08), rgba(255,215,0,0.15), rgba(255,215,0,0.08), transparent);
  pointer-events: none;
}
.hpe-slot {
  width: 100%; aspect-ratio: 1;
  max-width: 64px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  position: relative; overflow: hidden;
}
.hpe-slot:hover { border-color: #ffd44d; box-shadow: 0 0 12px rgba(255,212,77,0.25); }
.hpe-slot.filled.r-common    { border-color: #b0b0b0; }
.hpe-slot.filled.r-uncommon  { border-color: #1eff00; }
.hpe-slot.filled.r-rare      { border-color: #0070dd; box-shadow: 0 0 8px rgba(0,112,221,0.25); }
.hpe-slot.filled.r-epic      { border-color: #a335ee; box-shadow: inset 0 0 8px rgba(163,53,238,0.25); }
.hpe-slot.filled.r-legendary { border-color: #ff8000; box-shadow: inset 0 0 10px rgba(255,128,0,0.3); }
.hpe-slot.filled.r-mythic    { border-color: #ff4444; box-shadow: inset 0 0 10px rgba(255,60,60,0.35); }
/* Let .item-icon-wrap fill the slot (overrides the inline width/height:56px
   that renderItemIcon bakes in). Image styling then delegated to .item-img. */
.hpe-slot .item-icon-wrap {
  width: 100% !important;
  height: 100% !important;
  border-radius: 9px;
  background: transparent;
}
.hpe-slot .item-icon-wrap .item-img { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.hpe-eq-label { color: #6c6385; font-size: 9px; font-weight: 700; letter-spacing: 0.5px; }

.hpe-avatar-wrap {
  position: relative; cursor: pointer;
  width: 100%; aspect-ratio: 1; max-width: 110px;
  border-radius: 50%;
}
/* Kill any dark square bg (.gv-bg-founder/overlord/warrior/etc.) that bleeds
   past the circular avatar. Glow is already provided by .hpe-avatar box-shadow. */
.hpe-avatar-wrap[class*="gv-bg-"] {
  background: transparent !important;
  box-shadow: none !important;
}
.hpe-avatar {
  width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover;
  border: 3px solid #ffd44d;
  box-shadow: 0 0 22px rgba(255,212,77,0.35);
}
.hpe-lvl-badge {
  position: absolute; bottom: -6px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ffd44d, #ffa500);
  color: #1a0e0e;
  font-weight: 900; font-size: 11px;
  padding: 2px 11px; border-radius: 999px;
  border: 2px solid #0d0b1a;
  letter-spacing: 1px; white-space: nowrap;
}

.hpe-slot.s-helmet  { grid-column: 2 / 3; grid-row: 1 / 2; }
/* Amulet tucked into the upper-right, diagonal between helmet and offhand */
.hpe-slot.s-amulet  { grid-column: 3 / 4; grid-row: 1 / 2; max-width: 52px; align-self: end; }
.hpe-slot.s-weapon  { grid-column: 1 / 2; grid-row: 2 / 3; }
.hpe-avatar-wrap    { grid-column: 2 / 3; grid-row: 2 / 3; }
.hpe-slot.s-offhand { grid-column: 3 / 4; grid-row: 2 / 3; }
.hpe-slot.s-ring    { grid-column: 1 / 2; grid-row: 3 / 4; }
.hpe-slot.s-armor   { grid-column: 2 / 3; grid-row: 3 / 4; }
.hpe-slot.s-relic   { grid-column: 3 / 4; grid-row: 3 / 4; }
.hpe-slot.s-boots   { grid-column: 2 / 3; grid-row: 4 / 5; }

.hpe-name {
  color: #ffd44d;
  font-size: 20px; font-weight: 800;
  letter-spacing: 1px; text-align: center;
  text-shadow: 0 0 10px rgba(255,212,77,0.2);
}
.hpe-class-row {
  display: flex; justify-content: center; gap: 10px;
  color: #a89fc4;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 10px; margin-top: 2px;
}
.hpe-class-row .cls { color: #FF4757; }
.hpe-class-row .sep { color: #6c6385; }
.hpe-class-row .elo { color: #ffd44d; cursor: pointer; }

.hpe-xp {
  height: 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; overflow: hidden; position: relative;
}
.hpe-xp-fill { height: 100%; background: linear-gradient(90deg, #8a4fcf, #c77afc); border-radius: 5px; transition: width .6s; }
.hpe-xp-txt {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.hpe-cur-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.hpe-cur {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-weight: 700; font-size: 14px;
}
.hpe-cur.gold { color: #ffd44d; }
.hpe-cur.dia { color: #7ecdff; cursor: pointer; }
.hpe-cur img { width: 18px; height: 18px; flex-shrink: 0; }
.hpe-cur-plus {
  margin-left: auto;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.4);
  color: #ffd44d;
  padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 900; cursor: pointer;
}

.hpe-power {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  padding: 9px 12px;
  background: linear-gradient(90deg, rgba(199,122,252,0.08), transparent);
  border: 1px solid rgba(199,122,252,0.2);
  border-radius: 8px;
  cursor: pointer; color: inherit;
  font-family: inherit; text-align: left;
}
.hpe-power:hover { border-color: #c77afc; }
.hpe-power-l { color: #a89fc4; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; }
.hpe-power-v { color: #ffd44d; font-size: 17px; font-weight: 800; }
.hpe-power-caret { color: #6c6385; font-size: 12px; }

.hpe-gems-wrap { margin-top: 10px; }

.hpe-inv {
  width: 100%; margin-top: 8px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 13px;
  color: #e9e4f5; font-family: inherit;
}
.hpe-inv:hover { border-color: #ffd44d; color: #ffd44d; }
.hpe-inv img { width: 18px; height: 18px; flex-shrink: 0; }
.hpe-inv-count { margin-left: auto; color: #a89fc4; font-size: 12px; }
.hpe-inv-new {
  background: #FF4757; color: #fff;
  padding: 1px 6px; border-radius: 999px;
  font-size: 10px; font-weight: 800;
}

.hpe-actions {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5px; margin-top: 8px;
}
.hpe-act {
  padding: 10px 2px;
  background: linear-gradient(135deg, rgba(138,79,207,0.15), rgba(23,19,41,0.6));
  border: 1px solid rgba(199,122,252,0.3);
  border-radius: 8px; text-align: center;
  color: #e9e4f5;
  font-size: 10px; font-weight: 700;
  cursor: pointer; position: relative;
  transition: all .15s; font-family: inherit;
}
.hpe-act:hover { border-color: #c77afc; transform: translateY(-1px); }
.hpe-act-ic { width: 20px; height: 20px; display: block; margin: 0 auto 3px; object-fit: contain; }
.hpe-act-lbl { display: block; line-height: 1.2; }
.hpe-act-badge {
  position: absolute; top: -4px; right: -4px;
  background: #FF4757; color: #fff;
  padding: 1px 5px; border-radius: 8px;
  font-size: 10px; font-weight: 800; min-width: 16px;
}
.hpe-act-badge.gold { background: #ffd44d; color: #1a0e0e; }
.hpe-act.prem {
  background: linear-gradient(135deg, rgba(255,100,200,0.14), rgba(255,215,0,0.08));
  border-color: rgba(255,130,200,0.4);
}
.hpe-act.prem.active { box-shadow: 0 0 12px rgba(255,215,0,0.3); }
.hpe-act.pass { background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(180,100,20,0.05)); border-color: rgba(255,215,0,0.35); }

.hpe-social-row { display: flex; gap: 6px; margin-top: 8px; }
.hpe-social {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; text-decoration: none;
  color: #a89fc4;
  font-size: 11px; font-weight: 700;
  cursor: pointer; position: relative;
  font-family: inherit;
}
.hpe-social:hover { border-color: #ffd44d; }
.hpe-social.discord { color: #9BA3FF; }
.hpe-social.discord:hover { border-color: #5865F2; color: #c4c9ff; }
.hpe-social.reddit { color: #FF8866; }
.hpe-social.reddit:hover { border-color: #FF4500; color: #ffad88; }
.hpe-social img { width: 16px; height: 16px; }
.hpe-social-bonus {
  position: absolute; top: -6px; right: -4px;
  display: flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, #ffd44d, #ffa500);
  color: #1a0e0e;
  padding: 1px 5px; border-radius: 10px;
  font-size: 9px; font-weight: 900;
}
.hpe-social-bonus img { width: 10px; height: 10px; }

@media (max-width: 400px) {
  .hpe-doll { padding: 6px 4px; gap: 4px; }
  .hpe-slot { max-width: 54px; }
  .hpe-avatar-wrap { max-width: 92px; }
}

/* ════════════════════════════════════════════════════════════════════
   LEGACY .hp-* rules (kept for backward compat, unused by v3 panel)
   ════════════════════════════════════════════════════════════════════ */
.hp-panel {
  position: relative;
  padding: 10px 8px !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 10px;
}
.hp-panel::before {
  content: ''; position: absolute; inset: -8px -8px -8px -8px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120,70,200,0.18), transparent 55%),
    linear-gradient(180deg, rgba(26,14,56,0.55) 0%, rgba(12,5,28,0.2) 100%);
}
.hp-panel > * { position: relative; z-index: 1; }

/* Stream look hides the card's decorative corners + bolts */
.hp-panel .hp-corner,
.hp-panel .hp-bolt { display: none !important; }

/* GILDED variant — purple+gold base with class-colored accents on
   stat-bar borders, section labels, bolts, corners, class plate, and
   a gold+class blend on avatar frame + XP bar. Background, tiles,
   mini-buttons and top-bar currencies stay neutral purple+gold. */
.hp-class-warrior,
.hp-class-mage,
.hp-class-blade_dancer {
  --hp-border:   rgba(200,168,78,0.55);
  --hp-tint:     rgba(200,168,78,0.1);     /* gold inner glow */
  --hp-accent:   #ffd890;                  /* gold soft — mail text, mail label */
  --hp-mini-bg:  linear-gradient(180deg,#2a1850,#150825);
  --hp-mini-bd:  rgba(200,168,78,0.35);
  --hp-mini-tx:  #d0b890;
  --hp-bar-grad: linear-gradient(180deg, rgba(40,20,80,0.5), rgba(15,8,30,0.7));
  --hp-label:    #a895c0;
  --hp-eq-bg:    rgba(15,8,30,0.7);
  --hp-eq-bd:    rgba(200,168,78,0.25);
  --hp-eq-empty: #5a4a30;
  --hp-bg:
    radial-gradient(ellipse at 50% 0%, rgba(200,168,78,0.12), transparent 55%),
    linear-gradient(180deg, #1a0e38 0%, #120828 60%, #0c051c 100%);
}
.hp-class-warrior {
  --hp-cc:       #ff4d5f;
  --hp-cc-glow:  rgba(255,80,100,0.55);
  --hp-main:     #ff4d5f;
  --hp-class-text: #ff8a8a;
  --hp-bolt-grad: radial-gradient(circle at 30% 30%, #ff8a8a, #ff4d5f);
  --hp-xp-grad:  linear-gradient(90deg,#8a5510,#ff4d5f,#ffd890,#ff4d5f);
  --hp-avatar-grad: linear-gradient(135deg,#ffd890 0%, #ff4d5f 40%, #8a5510 70%, #ffd890 100%);
}
.hp-class-mage {
  --hp-cc:       #a970ff;
  --hp-cc-glow:  rgba(180,120,255,0.55);
  --hp-main:     #a970ff;
  --hp-class-text: #c9a3ff;
  --hp-bolt-grad: radial-gradient(circle at 30% 30%, #c9a3ff, #a970ff);
  --hp-xp-grad:  linear-gradient(90deg,#8a5510,#a970ff,#ffd890,#a970ff);
  --hp-avatar-grad: linear-gradient(135deg,#ffd890 0%, #a970ff 40%, #8a5510 70%, #ffd890 100%);
}
.hp-class-blade_dancer {
  --hp-cc:       #2ecc71;
  --hp-cc-glow:  rgba(60,220,120,0.55);
  --hp-main:     #2ecc71;
  --hp-class-text: #6fe39a;
  --hp-bolt-grad: radial-gradient(circle at 30% 30%, #6fe39a, #2ecc71);
  --hp-xp-grad:  linear-gradient(90deg,#8a5510,#2ecc71,#ffd890,#2ecc71);
  --hp-avatar-grad: linear-gradient(135deg,#ffd890 0%, #2ecc71 40%, #8a5510 70%, #ffd890 100%);
}

/* Corner brackets */
.hp-corner { position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 2; }
.hp-corner { filter: drop-shadow(0 0 4px var(--hp-cc-glow, transparent)); }
.hp-corner.tl { top: 3px; left: 3px; border-top: 2px solid var(--hp-cc, var(--hp-main)); border-left: 2px solid var(--hp-cc, var(--hp-main)); border-top-left-radius: 12px; }
.hp-corner.tr { top: 3px; right: 3px; border-top: 2px solid var(--hp-cc, var(--hp-main)); border-right: 2px solid var(--hp-cc, var(--hp-main)); border-top-right-radius: 12px; }
.hp-corner.bl { bottom: 3px; left: 3px; border-bottom: 2px solid var(--hp-cc, var(--hp-main)); border-left: 2px solid var(--hp-cc, var(--hp-main)); border-bottom-left-radius: 12px; }
.hp-corner.br { bottom: 3px; right: 3px; border-bottom: 2px solid var(--hp-cc, var(--hp-main)); border-right: 2px solid var(--hp-cc, var(--hp-main)); border-bottom-right-radius: 12px; }

/* Bolts */
.hp-bolt { position: absolute; width: 6px; height: 6px; background: var(--hp-bolt-grad); border-radius: 50%; box-shadow: inset 0 0 2px rgba(0,0,0,0.7), 0 0 6px var(--hp-cc-glow, transparent); z-index: 2; }

/* Mini action buttons */
.hp-mini-btns { display: flex; gap: 5px; margin-bottom: 9px; }
.hp-mini-btn {
  flex: 1; padding: 5px 6px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  border-radius: 4px;
  background: var(--hp-mini-bg); border: 1px solid var(--hp-mini-bd); color: var(--hp-mini-tx);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px;
  transition: filter 0.15s;
}
.hp-mini-btn:hover { filter: brightness(1.2); }
.hp-mini-btn img { width: 12px; height: 12px; }
.hp-mini-btn.bug { border-color: #4a6a2a; color: #9acc60; background: linear-gradient(180deg,#1a2a08,#0a1204); }

/* Top bar: 2-row grid so the currency numbers always have full panel width.
   Row 1: Gold + Diamonds (the important numbers, full width each half)
   Row 2: Mail + Shop (compact action buttons) */
.hp-topbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "gold dia"
    "mail shop";
  gap: 5px;
  margin-bottom: 10px;
}
.hp-topbar > * {
  padding: 6px 10px;
  background: rgba(0,0,0,0.5);
  border: 1px solid var(--hp-eq-bd);
  border-radius: 5px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 900;
  min-height: 32px;
  min-width: 0;
}
.hp-topbar .hp-cur.gold { grid-area: gold; color: #ffd890; border-color: rgba(255,216,144,0.35); background: linear-gradient(180deg, rgba(80,55,15,0.4), rgba(30,20,5,0.5)); font-size: 14px; letter-spacing: 0.3px; }
.hp-topbar .hp-cur.dia  { grid-area: dia; color: #c18fff; cursor: pointer; border-color: rgba(193,143,255,0.4); background: linear-gradient(180deg, rgba(55,25,95,0.4), rgba(20,10,40,0.5)); font-size: 14px; letter-spacing: 0.3px; }
.hp-topbar .hp-cur img { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 0 4px currentColor); }
.hp-topbar .hp-cur-plus { color: #2ED573; font-size: 11px; font-weight: 900; margin-left: auto; flex-shrink: 0; }
.hp-topbar .hp-mail {
  grid-area: mail; position: relative; cursor: pointer;
  background: linear-gradient(180deg, var(--hp-tint), rgba(0,0,0,0.55));
  border-color: var(--hp-main);
  color: var(--hp-accent, #c8a84e);
  justify-content: center; padding: 4px 8px;
  font-family: var(--font-display, 'Cinzel', serif);
  letter-spacing: 1.2px; font-size: 10px; text-transform: uppercase;
  transition: filter 0.15s;
}
.hp-topbar .hp-mail:hover { filter: brightness(1.25); }
.hp-topbar .hp-mail img { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 0 4px currentColor); }
.hp-topbar .hp-mail-lbl { color: var(--hp-accent, #e6d890); font-weight: 800; }
.hp-topbar .hp-mail-badge {
  position: absolute; top: -5px; right: -5px;
  background: linear-gradient(180deg, #ff5a7a, #c8263a);
  color: #fff; font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 900;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0,0,0,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,90,106,0.5);
  animation: hpMailPulse 1.6s ease-in-out infinite;
}
@keyframes hpMailPulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); }
}
.hp-topbar .hp-shop {
  grid-area: shop; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,215,0,0.28), rgba(160,106,16,0.25) 55%, rgba(0,0,0,0.55));
  border-color: rgba(255,215,0,0.6);
  color: #ffd890;
  font-family: var(--font-display, 'Cinzel', serif);
  letter-spacing: 1.2px; font-size: 10px; text-transform: uppercase; font-weight: 900;
  justify-content: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  box-shadow: inset 0 1px 0 rgba(255,240,170,0.25), 0 2px 8px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
  transition: filter 0.15s, transform 0.12s;
}
.hp-topbar .hp-shop::before {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,245,200,0.35), transparent);
  animation: hpShopShine 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hpShopShine {
  0%,55%,100% { left: -60%; }
  70%        { left: 130%; }
}
.hp-topbar .hp-shop:hover { filter: brightness(1.2); }
.hp-topbar .hp-shop:active { transform: translateY(1px); }
.hp-topbar .hp-shop img {
  width: 18px; height: 18px; flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.55));
}

/* Head row — avatar + stats side-by-side */
.hp-head { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.hp-av-block { position: relative; flex: none; width: 128px; }
.hp-av-wrap { position: relative; width: 128px; height: 128px; cursor: pointer; border-radius: 14px !important; }
.hp-av {
  width: 128px !important; height: 128px !important; object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
  z-index: 2; position: relative;
}
/* hp-av-frame only shows when no premium frame is selected — user's chosen
   frame (Overlord/Founder/Adventurer etc.) wins. Kept hidden by default, shown
   as subtle class-tinted outline when the default 'wooden'/'iron' frame is used. */
.hp-av-frame { display: none; }
.hp-av-lvl {
  position: absolute; top: -6px; left: -6px;
  width: 36px; height: 36px;
  background: radial-gradient(circle at 30% 30%, #ffd890, #8a5510);
  border: 2px solid #1a0426; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display, 'Cinzel', serif); font-size: 14px; font-weight: 900; color: #1a0426;
  box-shadow: 0 0 10px rgba(255,216,144,0.4); z-index: 6;
}
.hp-pets-row { display: flex; gap: 4px; justify-content: center; margin-top: 6px; }
.hp-pets-row .hero-pet-slot, .hp-pet {
  width: 34px !important; height: 34px !important; border-radius: 6px !important;
  font-size: 14px !important;
}
.hp-pets-row .hero-pet-slot img { max-width: 28px !important; max-height: 28px !important; }

/* Stats column */
.hp-stats-col { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hp-name { font-family: var(--font-display, 'Cinzel', serif); font-size: 17px; font-weight: 900; color: #ffd890; text-shadow: 0 0 12px var(--hp-tint); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-class { font-size: 9.5px; letter-spacing: 2px; color: var(--hp-class-text, var(--hp-accent)); text-transform: uppercase; font-weight: 800; margin-bottom: 3px; text-shadow: 0 0 8px var(--hp-cc-glow, transparent); }
.hp-stat-bar { display: flex; align-items: center; gap: 5px; padding: 5px 7px; background: var(--hp-bar-grad); border-left: 2px solid var(--hp-main); border-radius: 3px; font-size: 11px; font-weight: 800; cursor: pointer; }
.hp-stat-bar img { width: 18px; height: 18px; filter: drop-shadow(0 0 4px currentColor); }
.hp-stat-bar .sb-l { font-size: 8px; letter-spacing: 1.5px; color: var(--hp-label); text-transform: uppercase; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-stat-bar .sb-v { color: #ffd890; font-family: var(--font-display, 'Cinzel', serif); font-size: 13px; white-space: nowrap; }

/* Quick stats — ATK / DEF / HP */
.hp-qs { display: flex; gap: 4px; margin-bottom: 9px; }
.hp-qs-item { flex: 1; padding: 6px 4px; background: var(--hp-eq-bg); border: 1px solid var(--hp-eq-bd); border-left: 2px solid; text-align: center; border-radius: 3px; min-width: 0; }
.hp-qs-item.atk { border-left-color: #ff6b6b; }
.hp-qs-item.def { border-left-color: #4FACFE; }
.hp-qs-item.hp { border-left-color: #2ecc71; }
.hp-qs-v { font-family: var(--font-display, 'Cinzel', serif); font-size: 13px; font-weight: 900; line-height: 1; white-space: nowrap; }
.hp-qs-item.atk .hp-qs-v { color: #ff6b6b; }
.hp-qs-item.def .hp-qs-v { color: #4FACFE; }
.hp-qs-item.hp .hp-qs-v { color: #2ecc71; }
.hp-qs-l { font-size: 8px; color: var(--hp-label); letter-spacing: 1.3px; margin-top: 3px; text-transform: uppercase; }

/* XP bar */
.hp-xp { padding: 2px; background: rgba(0,0,0,0.7); border: 1px solid var(--hp-mini-bd); border-radius: 4px; position: relative; margin-bottom: 9px; }
.hp-xp-fill { height: 14px; background: var(--hp-xp-grad); background-size: 200% 100%; animation: hpXpShimmer 3s linear infinite; border-radius: 2px; }
@keyframes hpXpShimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }
.hp-xp-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.9); font-family: var(--font-display, 'Cinzel', serif); letter-spacing: 1px; }
.hp-xp-txt img { width: 12px; height: 12px; }

/* Section label */
.hp-section { font-family: var(--font-display, 'Cinzel', serif); font-size: 10px; color: var(--hp-main); letter-spacing: 3px; margin: 10px 0 6px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.hp-section::before, .hp-section::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hp-main), transparent); opacity: 0.5; }

/* Equipment grid 4x2 */
.hp-equip { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; margin-bottom: 6px !important; background: none !important; padding: 0 !important; border: none !important; }
.hp-eq { aspect-ratio: 1; background: var(--hp-eq-bg) !important; border: 1px solid var(--hp-eq-bd) !important; border-radius: 3px !important; padding: 3px !important; position: relative; display: flex !important; align-items: center; justify-content: center; }
.hp-eq.empty { color: var(--hp-eq-empty); }
.hp-eq-label { font-size: 8px !important; font-weight: 900; font-family: var(--font-display, 'Cinzel', serif); letter-spacing: 1px; color: var(--hp-eq-empty) !important; }

/* Override default hero-equip-grid styling to match V2 (the game reuses this class) */
.hp-equip.hero-equip-grid { grid-template-columns: repeat(4, 1fr) !important; }

/* Inventory button inside profile panel */
.hp-inv-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  margin: 6px 0 10px;
  background: linear-gradient(180deg, rgba(30,18,12,0.9), rgba(15,8,6,0.95));
  border: 1px solid var(--hp-eq-bd);
  border-left: 3px solid #c8a84e;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: #ffd890;
  transition: filter 0.15s, transform 0.12s;
  position: relative;
}
.hp-inv-btn:hover { filter: brightness(1.2); }
.hp-inv-btn:active { transform: translateY(1px); }
.hp-inv-btn img { width: 24px; height: 24px; filter: drop-shadow(0 0 4px rgba(200,168,78,0.4)); }
.hp-inv-lbl { flex: 1; text-align: left; }
.hp-inv-count { font-family: var(--font-display, 'Cinzel', serif); font-size: 13px; color: #fff; font-weight: 900; letter-spacing: 0.5px; }
.hp-inv-new {
  position: absolute; top: -5px; right: -5px;
  background: linear-gradient(180deg, #ff5a7a, #c8263a);
  color: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 900;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0,0,0,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,90,106,0.5);
}

/* Social row — Discord + Reddit under profile panel */
.hp-social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 6px; }
.hp-social {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 8px;
  border-radius: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  border: 1px solid;
  transition: filter 0.15s, transform 0.12s;
  font-family: 'Inter', sans-serif;
}
.hp-social img {
  height: 18px;
  width: auto;            /* preserve aspect ratio */
  max-width: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.hp-social:hover { filter: brightness(1.2); }
.hp-social:active { transform: translateY(1px); }
.hp-social.discord {
  background: linear-gradient(180deg, rgba(88,101,242,0.35), rgba(70,82,200,0.25));
  border-color: rgba(88,101,242,0.7);
  color: #e0e4ff;
  box-shadow: 0 3px 10px rgba(88,101,242,0.2);
  animation: hpDiscordPulse 2.4s ease-in-out infinite;
}
@keyframes hpDiscordPulse {
  0%,100% { box-shadow: 0 3px 10px rgba(88,101,242,0.2); }
  50%     { box-shadow: 0 3px 14px rgba(88,101,242,0.5), 0 0 12px rgba(88,101,242,0.3); }
}
.hp-social.reddit {
  background: linear-gradient(180deg, rgba(255,69,0,0.25), rgba(200,50,0,0.15));
  border-color: rgba(255,69,0,0.5);
  color: #ffb090;
}

/* +10 diamond bonus — overlay badge on top-right of Discord button,
   only rendered while bonus is unclaimed */
.hp-social-bonus {
  position: absolute;
  top: -7px; right: -6px;
  display: inline-flex; align-items: center; gap: 2px;
  background: linear-gradient(135deg, #ffd700, #c89a4e);
  color: #1a1410;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px; font-weight: 900; letter-spacing: 0.3px;
  border: 1.5px solid rgba(0,0,0,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,215,0,0.45);
  z-index: 3;
  pointer-events: none;
  animation: hpBonusPulse 1.8s ease-in-out infinite;
}
.hp-social-bonus img {
  width: 10px !important;
  height: 10px !important;
  max-width: 10px !important;
}
@keyframes hpBonusPulse {
  0%,100% { transform: scale(1); box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 10px rgba(255,215,0,0.45); }
  50%     { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 16px rgba(255,215,0,0.7); }
}

/* Hide floating Discord/Reddit buttons when desktop sidebar is visible
   (buttons are rendered INSIDE the hero profile panel instead) */
@media (min-width: 960px) {
  #socialBtns { display: none !important; }
}
html.gv-land-mobile #socialBtns { display: none !important; }

/* Desktop sidebar + landscape-mobile: restore V2 sizes over older sidebar overrides */
.desktop-sidebar .hp-panel { padding: 12px 10px !important; }
.desktop-sidebar .hp-av-wrap { width: 128px !important; height: 128px !important; }
.desktop-sidebar .hp-av { width: 128px !important; height: 128px !important; border-radius: 0 !important; }
html.gv-land-mobile .hp-panel { padding: 8px 6px !important; }
html.gv-land-mobile .hp-av-wrap { width: 96px !important; height: 96px !important; border-radius: 12px !important; }
html.gv-land-mobile .hp-av { width: 96px !important; height: 96px !important; border-radius: 12px !important; }
html.gv-land-mobile .hp-name { font-size: 14px; }
html.gv-land-mobile .hp-av-lvl { width: 30px; height: 30px; font-size: 12px; top: -4px; left: -4px; }

/* ══════════════════════════════════════════════════════════════
   HERO ACTION BUTTONS — 1×4 grid (Skill / Premium / Pass / Event)
   Icon on top, label under, gold-ish bordered tiles, hover lift + glow,
   per-button accent colors via --act-c / --act-tint / --act-glow vars.
   ══════════════════════════════════════════════════════════════ */
.hero-act-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 2px;
  width: 100%;
}
.hero-act {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 10px 2px 9px;
  border-radius: 8px; cursor: pointer; position: relative;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; text-align: center; line-height: 1.1;
  background: linear-gradient(180deg, rgba(30,18,12,0.85) 0%, rgba(15,8,6,0.95) 100%);
  border: 1px solid var(--act-c, #c8a84e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.15s, box-shadow 0.2s;
  overflow: visible;
  min-height: 62px;
  color: var(--act-c, #c8a84e);
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.hero-act::before {
  content: ''; position: absolute; inset: 0; border-radius: 7px;
  background: linear-gradient(180deg, var(--act-tint, rgba(200,168,78,0.12)) 0%, transparent 60%);
  pointer-events: none;
}
.hero-act:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 14px var(--act-glow, rgba(200,168,78,0.35));
}
.hero-act:active:not(:disabled) { transform: translateY(0); }
.hero-act:disabled { opacity: 0.55; cursor: default; }
.hero-act .hero-act-ic {
  width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 6px var(--act-glow, rgba(200,168,78,0.4)));
}
.hero-act .hero-act-lbl {
  color: var(--act-c, #c8a84e);
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  position: relative; z-index: 1;
  /* Allow wrap + soft hyphenation so long labels like Polish
     "DRZEWKO UMIEJĘTNOŚCI" don't overflow the button */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 100%;
  font-size: inherit;
}
/* Extra-shrink for buttons with very long labels (>14 chars) via
   JS-added class, plus a pure CSS :has fallback for modern browsers */
.hero-act .hero-act-lbl.long,
.hero-act:has(.hero-act-lbl:not(:empty)) .hero-act-lbl {
  /* neutral — actual size comes from .long-lbl below */
}
.hero-act .hero-act-lbl.long-lbl { font-size: 8px; letter-spacing: 0.3px; }
.hero-act .hero-act-emoji {
  font-size: 22px; line-height: 1;
  filter: drop-shadow(0 0 6px var(--act-glow, rgba(255,152,0,0.5)));
}
/* Per-button accent colors */
.hero-act.skill  { --act-c:#4FACFE; --act-tint:rgba(79,172,254,0.14);  --act-glow:rgba(79,172,254,0.4); }
.hero-act.prem   { --act-c:#FFD700; --act-tint:rgba(255,215,0,0.08);   --act-glow:rgba(255,215,0,0.3); }
.hero-act.prem.active { --act-tint:rgba(255,215,0,0.18); --act-glow:rgba(255,215,0,0.55); }
.hero-act.pass   { --act-c:#BF5FFF; --act-tint:rgba(191,95,255,0.14);  --act-glow:rgba(191,95,255,0.45); }
.hero-act.event  { --act-c:#FF9800; --act-tint:rgba(255,152,0,0.18);   --act-glow:rgba(255,152,0,0.55); }
.hero-act.event.live { animation: heroActEventPulse 2s ease-in-out infinite; }
@keyframes heroActEventPulse {
  0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 8px rgba(255,152,0,0.3); }
  50%     { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 16px rgba(255,152,0,0.6); }
}
/* Corner badges */
.hero-act-badge {
  position: absolute; top: -5px; right: -5px;
  background: linear-gradient(180deg, #ff5a7a, #c8263a);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 900; letter-spacing: 0.3px;
  min-width: 16px; height: 16px; padding: 0 5px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0,0,0,0.55);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,90,106,0.5);
  z-index: 2;
  white-space: nowrap;
}
.hero-act-badge.gold {
  background: linear-gradient(180deg, #ffd890, #a06a10); color: #1a0e00;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), 0 0 8px rgba(255,216,144,0.5);
}
.hero-act-badge.live {
  background: linear-gradient(180deg, #ff5a5a, #c82020);
  font-size: 7.5px; letter-spacing: 1px; padding: 0 4px;
  animation: heroActBadgeLive 1.2s ease-in-out infinite;
}
.hero-act-badge.soon {
  background: rgba(255,215,0,0.2); border-color: rgba(255,215,0,0.35); color: #FFD700;
  font-size: 7px; letter-spacing: 0.8px;
  box-shadow: none;
}
@keyframes heroActBadgeLive {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.15); }
}
/* Landscape-mobile / narrow panels: tighter padding + smaller icons to keep 4 in a row */
html.gv-land-mobile .hero-act {
  padding: 8px 3px 7px; min-height: 54px; font-size: 8.5px; letter-spacing: 0.8px;
}
html.gv-land-mobile .hero-act .hero-act-ic { width: 22px; height: 22px; }
html.gv-land-mobile .hero-act .hero-act-emoji { font-size: 18px; }
@media (max-width: 640px) {
  .hero-act { padding: 8px 3px 7px; min-height: 54px; font-size: 8.5px; letter-spacing: 0.8px; }
  .hero-act .hero-act-ic { width: 22px; height: 22px; }
  .hero-act .hero-act-emoji { font-size: 18px; }
}

/* Kill the dark square behind Founder/Overlord avatars in small lists
   (world boss ranking, guild/arena lists, chat, etc). The bg radial
   gradient used border-radius:inherit which reads from the DOM parent,
   not from .gv-avatar-wrap, so it rendered as a square behind the
   circular img. Frame glow from .gv-frame-founder / .gv-frame-overlord
   still communicates the pack without a dark square. */
.gv-avatar-wrap.gv-bg-founder,
.gv-avatar-wrap.gv-bg-overlord {
  background: transparent !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO SIDEBAR: Founder + Overlord pack glow — kill the dark square
   bg behind the avatar (was creating the "czarny kwadrat" look).
   Keep original CSS frame animations (gv-frame-founder wobble,
   gv-frame-overlord flicker). Replace box-shadow with drop-shadow
   so the glow follows the animated frame shape instead of a fixed square.
   ══════════════════════════════════════════════════════════════ */
.hero-profile-avatar-wrap.gv-bg-founder {
  background: transparent !important;
  box-shadow: none !important;
  animation: heroFounderGlow 4s ease-in-out infinite alternate !important;
}
@keyframes heroFounderGlow {
  0%   { filter: drop-shadow(0 0 10px rgba(255,140,0,0.4)) drop-shadow(0 0 20px rgba(255,100,0,0.25)); }
  100% { filter: drop-shadow(0 0 20px rgba(255,170,0,0.65)) drop-shadow(0 0 40px rgba(255,120,0,0.4)); }
}
.hero-profile-avatar-wrap.gv-bg-overlord {
  background: transparent !important;
  box-shadow: none !important;
  animation: heroOverlordGlow 3s ease-in-out infinite !important;
}
@keyframes heroOverlordGlow {
  0%,100% { filter: drop-shadow(0 0 5px rgba(144,48,208,0.35)) drop-shadow(0 0 10px rgba(100,0,200,0.18)); }
  33%     { filter: drop-shadow(0 0 10px rgba(200,60,255,0.6))  drop-shadow(0 0 18px rgba(180,60,255,0.3)); }
  66%     { filter: drop-shadow(0 0 7px rgba(160,64,224,0.45)); }
}

/* Founder frame — smaller avatars (rankings, chat, arena) get thinner
   border + more pronounced wobble so the jelly effect is actually visible. */
.dbf-rank-card-avatar.gv-frame-founder,
.chat-avatar-img.gv-frame-founder,
.arena-lb-avatar.gv-frame-founder,
.arena-fighter-img-lg.gv-frame-founder,
.guild-member-avatar.gv-frame-founder,
.header-avatar.gv-frame-founder {
  border-width: 1.5px !important;
  animation: gvFrameFounderSmall 2.4s ease-in-out infinite !important;
}
@keyframes gvFrameFounderSmall {
  0%, 100% { border-radius: 50% !important; transform: scale(1); }
  20% { border-radius: 42% 58% 52% 48% !important; transform: scale(1.05, 0.95); }
  40% { border-radius: 52% 48% 58% 42% !important; transform: scale(0.94, 1.06); }
  60% { border-radius: 58% 42% 44% 56% !important; transform: scale(1.04, 0.96); }
  80% { border-radius: 46% 54% 56% 44% !important; transform: scale(0.96, 1.04); }
}

/* Frame demo in picker */
.avp-frame-demo {
  width: 70px; height: 70px; border-radius: 10px; overflow: hidden;
}
.avp-frame-demo .avp-item-img { background: transparent; }
#avpTabFrames .avp-item { border-color: transparent; padding: 0; }
#avpTabFrames .avp-item.avp-selected { border-color: var(--gold); }

/* Default class-based avatar backgrounds */
.gv-bg-default-warrior { background: radial-gradient(circle at 50% 50%, #3a1520, #1a0a10) !important; border-radius: inherit; }
.gv-bg-default-mage { background: radial-gradient(circle at 50% 50%, #1a1545, #0a0820) !important; border-radius: inherit; }
.gv-bg-default-dancer { background: radial-gradient(circle at 50% 50%, #102a1a, #081510) !important; border-radius: inherit; }

/* Avatar backgrounds — gradient bg (visible in picker) + outer glow (visible on avatar) */
/* Adventurer — blue sky gradient + cyan glow */
.gv-bg-adventurer {
  background: radial-gradient(circle at 50% 50%, #1a4a70, #0a2240) !important;
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(40,160,255,0.5), 0 0 24px rgba(0,200,255,0.25);
  animation: gvBgAdv 2.5s ease-in-out infinite alternate;
}
@keyframes gvBgAdv {
  0% { box-shadow: 0 0 10px rgba(40,160,255,0.4), 0 0 20px rgba(0,200,255,0.2); }
  100% { box-shadow: 0 0 20px rgba(40,180,255,0.7), 0 0 40px rgba(0,220,255,0.35); }
}
/* Champion — fiery ember gradient + fire glow */
.gv-bg-champion {
  background: radial-gradient(circle at 50% 50%, #5a2000, #2a0c00) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(255,100,0,0.2);
  animation: gvBgChamp 1.5s ease-in-out infinite alternate;
}
@keyframes gvBgChamp {
  0% { box-shadow: 0 0 10px rgba(255,80,0,0.4), 0 0 20px rgba(255,120,0,0.2); }
  100% { box-shadow: 0 0 20px rgba(255,100,0,0.7), 0 0 40px rgba(255,60,0,0.3), 0 4px 15px rgba(255,40,0,0.25); }
}
/* Overlord — vibrant purple void gradient + pulsing purple glow */
.gv-bg-overlord {
  background: radial-gradient(circle at 50% 50%, #3a1070, #180040) !important;
  border-radius: inherit;
  box-shadow: 0 0 16px rgba(160,40,255,0.6), 0 0 32px rgba(180,60,255,0.3);
  animation: gvBgOverlord 3s ease-in-out infinite;
}
@keyframes gvBgOverlord {
  0% { box-shadow: 0 0 12px rgba(144,48,208,0.5), 0 0 24px rgba(100,0,200,0.25); }
  33% { box-shadow: 0 0 24px rgba(200,60,255,0.8), 0 0 48px rgba(180,60,255,0.4), 0 0 10px rgba(255,40,200,0.35); }
  66% { box-shadow: 0 0 14px rgba(160,64,224,0.6), 0 0 28px rgba(180,60,255,0.25); }
  100% { box-shadow: 0 0 12px rgba(144,48,208,0.5), 0 0 24px rgba(100,0,200,0.25); }
}

/* ══════════════════════════════════════════════════════════════
   AVATAR PICKER MODAL
   ══════════════════════════════════════════════════════════════ */
.avp-picker { text-align: center; }
.avp-title { font-family: var(--font-display); font-size: 16px; color: var(--gold); margin-bottom: 10px; }
.avp-preview { margin-bottom: 12px; }
.avp-preview-avatar {
  width: 90px; height: 90px; border-radius: 14px; margin: 0 auto;
  overflow: hidden; border: 2px solid rgba(140,120,255,0.3);
}
.avp-preview-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avp-tabs {
  display: flex; gap: 4px; margin-bottom: 12px;
  background: rgba(255,255,255,0.03); border-radius: 10px; padding: 3px;
}
.avp-tab {
  flex: 1; padding: 8px 4px; border: none; border-radius: 8px;
  background: transparent; color: #667; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.avp-tab:hover { color: #aaa; }
.avp-tab-active { background: rgba(140,120,255,0.15); color: var(--gold); }
.avp-grid {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}
.avp-item {
  cursor: pointer; border: 3px solid rgba(140,120,255,0.2); border-radius: 12px;
  padding: 3px; transition: all 0.15s; position: relative; text-align: center;
}
.avp-item:hover { border-color: rgba(140,120,255,0.5); }
.avp-selected { border-color: var(--gold) !important; box-shadow: 0 0 16px rgba(255,215,0,0.4); }
.avp-item-prem { border-color: rgba(255,215,0,0.3); }
.avp-item-alpha { border-color: rgba(191,95,255,0.3); }
.avp-item-locked { opacity: 0.5; cursor: default; }
.avp-item-img { width: 70px; height: 70px; display: block; border-radius: 8px; object-fit: cover; pointer-events: none; background: transparent; }
.avp-item-tag {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  font-size: 7px; font-weight: 900; padding: 1px 6px; border-radius: 3px;
  letter-spacing: 0.5px;
}
.avp-tag-prem { background: #FFD700; color: #1a1035; }
.avp-tag-alpha { background: #BF5FFF; color: #fff; }
.avp-lock-overlay {
  position: absolute; inset: 3px; display: flex; align-items: center;
  justify-content: center; border-radius: 9px; background: rgba(0,0,0,0.4);
}
.avp-lock-text { font-size: 9px; font-weight: 900; letter-spacing: 0.5px; }
.avp-lock-icon { font-size: 16px; }
.avp-item-name { font-size: 8px; color: #888; margin-top: 3px; }
/* Bg tab items — no outer border, the bg-demo IS the visual */
#avpTabBackgrounds .avp-item { border-color: transparent; padding: 0; }
#avpTabBackgrounds .avp-item.avp-selected { border-color: var(--gold); }
.avp-bg-demo {
  width: 70px; height: 70px; border-radius: 10px;
  position: relative; overflow: hidden;
}
.avp-bg-demo .avp-item-img { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent !important; border-radius: 8px; position: relative; z-index: 1; }
/* Title picker list */
.avp-titles-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; padding: 4px 0; }

/* Profile Style picker */
.avp-ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.avp-ps-item {
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: all .15s;
}
.avp-ps-item:hover:not(.avp-ps-locked) { border-color: rgba(255,212,77,0.4); transform: translateY(-1px); }
.avp-ps-item.avp-selected { border-color: #ffd44d; box-shadow: 0 0 16px rgba(255,212,77,0.3); }
.avp-ps-item.avp-ps-locked { opacity: 0.5; cursor: not-allowed; }
.avp-ps-preview {
  aspect-ratio: 4/3;
  border-radius: 8px;
  padding: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  margin-bottom: 8px;
  position: relative; overflow: hidden;
}
.avp-ps-default {
  background: linear-gradient(180deg, rgba(30,22,60,0.9), rgba(18,12,36,0.95));
  border: 1px solid rgba(199,122,252,0.2);
}
/* Founder panel preview — matches live hero-panel: deep crimson base
   with rose-gold accents (was gold, now synced with Y1 founder variant). */
.avp-ps-founder {
  background:
    radial-gradient(ellipse at top, rgba(255,100,160,0.25), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(160,20,60,0.2), transparent 60%),
    linear-gradient(180deg, #2a0812 0%, #150408 100%);
  border: 1px solid rgba(255,130,180,0.5);
  box-shadow: inset 0 1px 0 rgba(255,180,210,0.2), 0 0 14px rgba(220,60,130,0.3);
}
.avp-ps-founder::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,180,210,0.18) 50%, transparent 60%);
  animation: hpv9FShimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.avp-ps-header {
  font-size: 9px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,215,0,0.75);
  font-family: 'Cinzel', 'Georgia', serif;
}
.avp-ps-founder .avp-ps-header { color: #ff8ab4; text-shadow: 0 0 8px rgba(255,130,180,0.6); }
.avp-ps-power {
  font-size: 11px; font-weight: 800;
  color: #ffd44d;
  text-align: center;
  padding: 4px 8px;
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 6px;
  position: relative;
}
.avp-ps-power.gold {
  background: radial-gradient(ellipse at center, rgba(255,130,180,0.3), transparent 70%), linear-gradient(135deg, rgba(80,12,40,0.9), rgba(50,8,24,0.97));
  border-color: rgba(255,150,190,0.75);
  color: #ffeef4;
  box-shadow: 0 0 12px rgba(220,80,140,0.4);
}
.avp-ps-sparkle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffccdc;
  box-shadow: 0 0 6px rgba(255,150,190,0.9);
  animation: hpv9FBadgePulse 1.8s infinite;
}
.avp-ps-label {
  text-align: center;
  font-size: 11px; font-weight: 700;
  color: #e9e4f5;
}
.avp-ps-label-gold {
  background: linear-gradient(180deg, #fff0f4, #ff8ab4 60%, #b84870);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.avp-title-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.15s;
}
.avp-title-item:hover { background: rgba(140,120,255,0.1); border-color: rgba(140,120,255,0.2); }
.avp-title-active { background: rgba(255,215,0,0.08) !important; border-color: rgba(255,215,0,0.25) !important; }
.avp-title-name { font-size: 13px; font-weight: 600; }
.avp-title-check { color: var(--gold); font-size: 14px; font-weight: 700; }

/* Background preview in store bundle */
.ds-frame-preview {
  width: 80px; height: 80px; border-radius: 14px; overflow: hidden;
  position: relative;
}
.ds-frame-avatar {
  width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: transparent;
}
.ds-special-preview-row { display: flex; justify-content: center; gap: 16px; }
.ds-preview-item { text-align: center; }

/* Bundle cards — centered vertical layout, 3 in a row */
.ds-bundles-row {
  display: flex; gap: 12px; justify-content: center;
}
.ds-bcard {
  flex: 1; max-width: 200px; text-align: center;
  background: rgba(100,200,255,0.04); border: 1px solid rgba(100,200,255,0.15);
  border-radius: 14px; padding: 16px 12px 14px; position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.ds-bcard-fire {
  background: rgba(255,150,0,0.04); border-color: rgba(255,150,0,0.2);
}
.ds-bcard-overlord {
  background: rgba(180,60,255,0.06); border-color: rgba(180,60,255,0.25);
  box-shadow: 0 0 20px rgba(180,60,255,0.08);
}
.ds-bcard-tag {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  font-size: 7px; font-weight: 900; padding: 2px 10px; border-radius: 8px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24); color: #fff;
  letter-spacing: 0.5px; white-space: nowrap;
}
.ds-tag-fire { background: linear-gradient(135deg, #FFD700, #FF6B00) !important; color: #1a0a00 !important; }
.ds-tag-overlord { background: linear-gradient(135deg, #b040ff, #7020c0) !important; }
.ds-bcard-avatar {
  width: 72px; height: 72px; border-radius: 12px; overflow: hidden; margin-bottom: 8px;
}
.ds-bcard-img { width: 100%; height: 100%; object-fit: cover; display: block; background: transparent; }
.ds-bcard-name {
  font-family: var(--font-display); font-size: 14px; color: #fff;
  letter-spacing: 1px; margin-bottom: 8px;
}
.ds-bcard-perks { margin-bottom: 10px; }
.ds-bcard-perk {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 10px; color: #8aa8cc; font-weight: 600; line-height: 1.6;
}
.ds-bp-icon { width: 14px; height: 14px; flex-shrink: 0; }
.ds-bp-excl { color: #FFD700 !important; }
.ds-bcard-price {
  font-family: var(--font-display); font-size: 18px; color: #fff; margin-bottom: 8px;
}
.ds-bcard-old {
  font-size: 12px; color: #556; text-decoration: line-through; margin-right: 4px;
}
.ds-bcard .ds-buy-btn { width: 100%; padding: 8px; font-size: 11px; }
.ds-buy-overlord {
  background: linear-gradient(135deg, #b040ff, #7020c0) !important;
  box-shadow: 0 4px 12px rgba(150,50,220,0.3) !important;
}

/* NEW badge on tab */
.ds-tab-new {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #2ED573, #1abc54);
  color: #fff; font-size: 7px; font-weight: 900; letter-spacing: 0.5px;
  padding: 1px 4px; border-radius: 3px; line-height: 1.3;
  animation: dsNewPulse 2s ease-in-out infinite;
}
@keyframes dsNewPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
.ds-tab { position: relative; }

/* Founder tab — standalone golden banner */
.ds-tab-founder {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 24px); margin: 8px 12px 0;
  padding: 12px 16px !important; border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(255,140,0,0.15), rgba(255,215,0,0.08)) !important;
  border: 1.5px solid rgba(255,140,0,0.35) !important;
  color: #FFD700 !important; font-size: 14px !important; font-weight: 800 !important;
  letter-spacing: 0.5px;
  animation: dsFounderTabGlow 3s ease-in-out infinite alternate;
}
.ds-founder-tab-icon { width: 22px !important; height: 22px !important; }
@keyframes dsFounderTabGlow {
  0% { border-color: rgba(255,140,0,0.25); box-shadow: 0 0 8px rgba(255,140,0,0.1); }
  100% { border-color: rgba(255,215,0,0.5); box-shadow: 0 0 16px rgba(255,140,0,0.25); }
}
.ds-tab-founder.ds-tab-active {
  background: linear-gradient(135deg, rgba(255,140,0,0.25), rgba(255,215,0,0.15)) !important;
  border-color: rgba(255,215,0,0.6) !important;
  box-shadow: 0 0 20px rgba(255,140,0,0.3) !important;
}
/* Golden background for founder tab content */
#dsTabFounder {
  border-radius: 12px; margin-top: 4px;
}
/* Full overlay golden theme when founder tab active */
.ds-founder-active .ds-bg {
  background: radial-gradient(ellipse at 50% 20%, rgba(255,180,0,0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(200,140,0,0.08) 0%, transparent 50%),
              radial-gradient(ellipse at 20% 70%, rgba(255,160,0,0.06) 0%, transparent 50%) !important;
}
.ds-founder-active { background: #0a0806 !important; }

/* Founder preview section — base (overridden above) */
.ds-founder-preview-title { font-size: 10px; color: #888; letter-spacing: 1px; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; }
.ds-founder-ava-demo { margin-bottom: 12px; }
.ds-founder-jelly-ring {
  position: absolute; top: -3px; left: -3px;
  width: calc(100% + 6px); height: calc(100% + 6px);
  border: 2.5px solid #FFD700; border-radius: 50%;
  z-index: 2; pointer-events: none;
  animation: gvFrameFounder 3s ease-in-out infinite;
}
.ds-founder-name-demo { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 4px; }
.ds-founder-title-demo {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  display: inline-block; padding: 3px 12px; border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,140,0,0.15), rgba(255,215,0,0.08));
  border: 1px solid rgba(255,140,0,0.25);
  background-image: linear-gradient(90deg, #FF8C00, #FFD700, #FF6600, #FFD700, #FF8C00);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: gvNameFounder 2.5s ease-in-out infinite;
  margin-bottom: 14px;
}
/* Chat preview inside founder tab — matches real chat sizing */
.ds-founder-chat-demo {
  max-width: 300px; margin: 0 auto;
  background: rgba(10,6,20,0.9); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px; padding: 6px 8px; overflow: hidden;
}
.ds-fcd-label { font-size: 8px; color: #444; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; padding: 2px 4px; }
.ds-fcd-msg { display: flex; align-items: flex-start; gap: 6px; padding: 3px 4px; }
.ds-fcd-ava { width: 22px; height: 22px; border-radius: 8px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.08); }
.ds-fcd-hdr { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.ds-fcd-lvl { font-size: 8px; color: #555; font-weight: 600; }
.ds-fcd-tag { font-size: 8px; color: #555; }
.ds-fcd-time { font-size: 7px; color: #333; margin-left: 4px; }
.ds-fcd-txt { font-size: 10px; color: #999; margin-top: 1px; line-height: 1.3; }
.ds-fcd-ftag { font-size: 6px; font-weight: 900; padding: 1px 3px; border-radius: 2px; background: linear-gradient(135deg,#FF8C00,#FFD700); color: #1a0e00; letter-spacing: 0.3px; }
.ds-fcd-founder { background: rgba(255,140,0,0.04); border-radius: 4px; padding: 3px 4px; }
.ds-fcd-name { font-size: 10px; font-weight: 600; color: #e8d48e; }
.ds-fcd-msg .ds-founder-jelly-ring { border-width: 1.5px !important; }

/* Founder Pack card */
.ds-founder-section { margin-top: 20px; }
.ds-founder-card {
  background: none; border: none; border-radius: 0;
  max-width: none;
}
@media (min-width: 768px) {
  .ds-founder-card {
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto auto;
    gap: 0 24px;
  }
  .ds-founder-preview {
    grid-column: 1; grid-row: 1 / 3;
    background: rgba(20,14,8,0.5); border: 1px solid rgba(255,140,0,0.1);
    border-radius: 14px; padding: 20px 16px !important;
    align-self: start;
  }
  .ds-founder-body {
    grid-column: 2; grid-row: 1;
    padding: 0 !important;
  }
  .ds-founder-buy {
    grid-column: 1; grid-row: 3;
    padding: 12px 0 0 !important;
  }
}
.ds-founder-header { display: none; }
.ds-founder-preview { text-align: center; padding: 20px 20px 12px; }
.ds-founder-body { padding: 0 20px 12px; }
.ds-founder-buy { padding: 12px 20px 16px; text-align: center; }
.ds-founder-ava-wrap { flex-shrink: 0; }
.ds-founder-ava-wrap .gv-avatar-wrap { width: 56px; height: 56px; }
.ds-founder-ava-img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.ds-founder-title {
  font-family: Cinzel, serif; font-size: 18px; font-weight: 900; letter-spacing: 0.5px;
  background: linear-gradient(90deg, #FF8C00, #FFD700, #FF6600, #FFD700, #FF8C00);
  background-size: 300% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  animation: gvNameFounder 2.5s ease-in-out infinite;
}
.ds-founder-subtitle { font-size: 11px; color: #c89a4e; margin-top: 2px; }
.ds-founder-body { padding: 0; }
.ds-founder-hero-text {
  text-align: center; font-size: 12px; color: #c89a4e; line-height: 1.5;
  margin-bottom: 12px; font-weight: 600;
}
.ds-founder-rewards-section { margin-bottom: 10px; }
.ds-founder-rewards-label {
  font-size: 10px; font-weight: 800; color: #2ED573; margin-bottom: 5px;
  letter-spacing: 0.3px;
}
.ds-fr-gold { color: #FFD700 !important; }
.ds-founder-perks { display: flex; flex-direction: column; gap: 4px; }
.ds-founder-perk {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: #ddd; padding: 7px 10px;
  background: rgba(255,255,255,0.03); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.ds-founder-perk strong { display: block; font-weight: 700; font-size: 11px; }
.ds-fp-sub { font-size: 9px; color: #666; margin-top: 1px; }
.ds-fp-excl { border-color: rgba(255,215,0,0.1) !important; background: rgba(255,215,0,0.03) !important; }
.ds-fp-excl strong { color: #FFD700 !important; }
.ds-fp-note { font-size: 10px; color: #888; text-align: center; font-style: italic; margin-top: 8px; }
/* buy button base — overridden per context */
.ds-founder-buy-note { font-size: 10px; color: #666; margin-top: 8px; }
.ds-buy-founder {
  background: linear-gradient(135deg, #FF8C00, #FFD700) !important;
  color: #1a0e00 !important; font-weight: 900 !important; font-size: 13px !important;
  padding: 12px 20px !important; border-radius: 10px !important; width: 100%;
  box-shadow: 0 4px 16px rgba(255,140,0,0.35) !important;
  letter-spacing: 0.3px;
}
.ds-buy-founder:hover { box-shadow: 0 6px 24px rgba(255,140,0,0.5) !important; }
.ds-founder-owned {
  margin-top: 20px; text-align: center; padding: 16px;
  background: rgba(46,213,115,0.08); border: 1px solid rgba(46,213,115,0.2);
  border-radius: 12px; color: #2ED573; font-size: 13px; font-weight: 700;
}

@media (max-width: 600px) {
  .ds-bundles-row { flex-direction: column; align-items: center; }
  .ds-bcard { max-width: 280px; width: 100%; }
  .ds-founder-perks { flex-direction: column; }
  .ds-founder-card { display: block !important; }
  .ds-founder-preview { padding: 16px 12px 8px !important; }
  .ds-founder-body { padding: 0 12px 8px !important; }
  .ds-founder-buy { padding: 8px 12px 12px !important; }
  .ds-tab-founder { font-size: 11px !important; padding: 10px 12px !important; }
}

/* Premium packages centering */
.ds-prem-pkgs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.ds-prem-pkgs .ds-pkg {
  min-width: 0;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .ds-scroll { padding: 30px 14px 60px; }
  .ds-title { font-size: 28px; }
  .ds-icon { width: 60px; height: 60px; display: none; }
  .ds-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-starter-inner { flex-direction: column; text-align: center; }
  .ds-starter-left { flex-direction: column; }
  .ds-starter-perks { justify-content: center; }
  .ds-info-grid { grid-template-columns: repeat(3, 1fr); }
  .ds-prem-pkgs { grid-template-columns: repeat(2, 1fr); }
  .ds-benefits { grid-template-columns: 1fr; }
  .ds-tab { font-size: 11px; padding: 8px 4px; }
}
/* Sidebar wrapper — column on mobile, sticky sidebar on desktop */
.ds-sidebar { flex-shrink: 0; }

@media (min-width: 768px) {
  .ds-scroll {
    max-width: 1000px; padding: 20px 30px 40px;
  }
  .ds-header {
    display: flex; align-items: center; gap: 16px; text-align: left;
    padding: 0 0 12px; margin-bottom: 12px;
  }
  .ds-header-glow { display: none; }
  .ds-title { font-size: 22px !important; margin: 0 !important; }
  .ds-subtitle { display: none; }
  .ds-balance { margin: 0 !important; padding: 6px 14px !important; font-size: 14px !important; }
  .ds-currency-row { margin: 0 !important; }
  .ds-layout {
    display: flex; gap: 20px; align-items: flex-start;
  }
  .ds-sidebar {
    position: sticky; top: 20px; width: 190px; flex-shrink: 0;
  }
  .ds-tabs {
    flex-direction: column;
    margin-bottom: 0; padding: 6px; gap: 4px;
    background: rgba(255,255,255,0.02); border-radius: 14px;
    border: 1px solid rgba(100,200,255,0.06);
  }
  .ds-tab {
    justify-content: flex-start; padding: 12px 14px;
    border-radius: 10px; font-size: 13px;
  }
  .ds-tab-active { border: 1px solid rgba(100,200,255,0.2); }
  .ds-tab-founder {
    width: 100% !important; margin: 8px 0 0 !important;
    padding: 12px 14px !important; font-size: 12px !important;
    justify-content: flex-start !important;
  }
  .ds-founder-tab-icon { width: 18px !important; height: 18px !important; }
  .ds-content-area { flex: 1; min-width: 0; }
  .ds-header { margin-bottom: 20px; }
  .ds-title { font-size: 36px; letter-spacing: 3px; }
  .ds-subtitle { font-size: 14px; }
  .ds-balance { font-size: 18px; padding: 10px 24px; }
  .ds-section-title { font-size: 16px; margin-bottom: 16px; }
  .ds-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .ds-pkg { padding: 22px 12px 18px; }
  .ds-pkg-icon { width: 48px; height: 48px; }
  .ds-pkg-amount { font-size: 32px; }
  .ds-pkg-name { font-size: 12px; }
  .ds-starter-inner { padding: 24px; }
  .ds-starter-icon { width: 56px; height: 56px; }
  .ds-benefits { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ds-benefit-card { padding: 14px 16px; }
  .ds-benefit-title { font-size: 13px; }
  .ds-benefit-desc { font-size: 10px; }
  .ds-prem-pkgs { gap: 14px; }
  .ds-prem-pkgs .ds-pkg { flex: 0 1 180px; padding: 24px 14px 18px; }
  .ds-info-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .ds-info-item { font-size: 11px; padding: 10px 8px; }
  .ds-info-icon { width: 22px; height: 22px; }
  .ds-bundles-row { gap: 16px; }
  .ds-bcard { padding: 24px 20px; }
  .ds-tab { font-size: 14px; padding: 12px 20px; }
  .ds-tab-icon { width: 18px; height: 18px; }
  .ds-fair { font-size: 12px; margin-top: 20px; }
  .ds-buy-btn { font-size: 13px; padding: 10px 22px; }
}

/* ================================================================
 *  SOUL FORGE (Gemstone System)
 * ================================================================ */
#panelSoulforge { position: relative; min-height: 100%; background: #0a0814 url('../img/gems/forge_bg.jpg') center top / cover no-repeat; background-attachment: fixed; }
#panelSoulforge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,20,0.85) 0%, rgba(10,8,20,0.92) 40%, rgba(10,8,20,0.96) 100%); z-index: 0; pointer-events: none; }
.sf-wrap { max-width: 960px; margin: 0 auto; position: relative; z-index: 2; }
.sf-header { text-align: center; padding: 10px 12px 12px; background: rgba(0,0,0,0.4); border-radius: 12px; margin-bottom: 8px; }
.sf-title { font-size: 20px; font-weight: 800; color: #ffcc00; text-shadow: 0 0 12px rgba(255,204,0,0.4); letter-spacing: 1px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sf-currencies { display: flex; justify-content: center; gap: 16px; font-size: 13px; color: #ccc; }
.sf-currencies span { display: flex; align-items: center; gap: 4px; }
.sf-curr-icon { font-size: 14px; }

/* Info toggle */
.sf-info-toggle { text-align: center; font-size: 12px; font-weight: 700; color: #88eeff; cursor: pointer; margin-top: 6px; padding: 6px 16px; border-radius: 8px; background: rgba(136,238,255,0.08); border: 1px solid rgba(136,238,255,0.2); display: inline-block; transition: all 0.2s; }
.sf-info-toggle:hover { background: rgba(136,238,255,0.15); border-color: rgba(136,238,255,0.4); }
.sf-shop-owned { font-size: 10px; color: #888; margin-top: 2px; }

/* Equipped gems row */
.sf-equipped { display: flex; justify-content: center; gap: 8px; padding: 8px 0 14px; flex-wrap: wrap; }
.sf-slot { width: 56px; height: 56px; border-radius: 10px; border: 2px solid #333; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; cursor: pointer; transition: all 0.2s; }
.sf-slot:hover { border-color: #666; background: rgba(255,255,255,0.05); }
.sf-slot.occupied { border-color: var(--gem-color, #666); box-shadow: 0 0 8px var(--gem-color, transparent); }
.sf-slot.locked { opacity: 0.5; cursor: pointer; border-style: dashed; }
.sf-slot-gem { font-size: 24px; line-height: 1; }
.sf-slot-lvl { font-size: 10px; font-weight: 800; color: #fff; position: absolute; bottom: 2px; right: 4px; text-shadow: 0 0 4px #000; }
.sf-slot-lock { font-size: 16px; opacity: 0.5; }
.sf-slot-cost { font-size: 8px; color: #999; margin-top: 2px; white-space: nowrap; }
.sf-slot-empty { font-size: 20px; opacity: 0.3; }

/* Sub-tabs */
.sf-subtabs { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }
.sf-subtab { flex: 1; max-width: 120px; padding: 8px 4px; border: none; border-radius: 8px; background: rgba(0,0,0,0.5); color: #999; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.sf-subtab.active { background: rgba(255,204,0,0.2); color: #ffcc00; box-shadow: 0 0 8px rgba(255,204,0,0.2); }

/* Gem inventory grid */
.sf-inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; max-height: 320px; overflow-y: auto; padding: 4px; }
.sf-gem-card { background: rgba(0,0,0,0.6); border: 2px solid #333; border-radius: 8px; padding: 6px 4px; text-align: center; cursor: pointer; transition: all 0.15s; position: relative; }
.sf-gem-card:hover { border-color: #666; background: rgba(255,255,255,0.05); }
.sf-gem-card.selected { border-color: var(--gem-color, #ffcc00); box-shadow: 0 0 10px var(--gem-color, rgba(255,204,0,0.4)); background: rgba(255,255,255,0.08); }
.sf-gem-corrupted { border-color: rgba(170,0,255,0.4) !important; box-shadow: 0 0 8px rgba(170,0,255,0.3); }
.sf-gem-corrupted.selected { border-color: #aa00ff !important; box-shadow: 0 0 14px rgba(170,0,255,0.5); }

/* Gem row list (new single-page layout) */
.sf-gem-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px; margin-bottom: 4px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; transition: all 0.15s;
}
.sf-gem-row:hover { background: rgba(0,0,0,0.6); }
.sf-gem-row-selected { background: rgba(255,215,0,0.06) !important; border-color: rgba(255,215,0,0.2); }
.sf-gem-row-corrupted { border-color: rgba(170,0,255,0.25); }
.sf-row-btn {
  padding: 5px 8px; border-radius: 6px; font-size: 10px; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.4);
  color: #aaa; cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.sf-row-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #fff; }
.sf-row-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sf-row-upgrade { color: #FFD700; border-color: rgba(255,215,0,0.2); background: rgba(255,215,0,0.06); }
.sf-row-equip { color: #2ED573; border-color: rgba(46,213,115,0.2); background: rgba(46,213,115,0.06); }
.sf-row-corrupt { border-color: rgba(170,0,255,0.3); background: rgba(170,0,255,0.08); padding: 4px 6px; }
.sf-row-corrupt:hover:not(:disabled) { background: rgba(170,0,255,0.2); box-shadow: 0 0 8px rgba(170,0,255,0.3); }
.sf-row-more { color: #888; padding: 5px 6px; font-size: 14px; line-height: 1; }

/* Expand panel (upgrade details under selected gem) */
.sf-expand-panel {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,215,0,0.1);
  border-radius: 10px; padding: 12px; margin: -2px 0 6px;
}
.sf-scroll-check {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: #aaa; transition: all 0.15s;
}
.sf-scroll-check.active { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: #FFD700; }
.sf-gem-icon { display: block; margin-bottom: 4px; min-height: 36px; display: flex; align-items: center; justify-content: center; }
.sf-gem-lvl { font-size: 11px; font-weight: 800; color: #fff; display: block; }
.sf-gem-name { font-size: 9px; color: #999; margin-top: 2px; display: block; }
.sf-gem-bonus { font-size: 8px; color: var(--gem-color, #aaa); margin-top: 2px; display: block; }

/* ═══════════════════════════════════════════════════════════════
   NEW LAYOUT (test world only, body.gv-new-layout)
   Left categorized menu replaces old profile sidebar + bottom nav.
   Profile = the existing hero tab rendered in main content.
   ═══════════════════════════════════════════════════════════════ */
body.gv-new-layout .desktop-sidebar { display: none !important; }
body.gv-new-layout #tabBar { display: none !important; }
body.gv-new-layout .mob-quick-strip { display: none !important; }
body.gv-new-layout .quick-panel { display: none !important; }
body.gv-new-layout .mob-nav-bar { display: none !important; }
body.gv-new-layout #mainContent {
  margin-left: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 116px !important;  /* clear the fixed bottom nav (104 + 12 margin) */
  overflow-y: auto !important;
  min-height: 0 !important;
}
/* Keep gameLayout as flex-row so #mainContent inherits viewport-bounded
   height → overflow-y:auto can actually scroll content. */
body.gv-new-layout #gameHeader { display: none !important; }
body.gv-new-layout .gv-new-nav { display: none !important; }
/* Lift the Veil Orb above the bottom tile bar so it doesn't overlap. */
body.gv-new-layout .veil-orb-container { bottom: 140px !important; right: 20px !important; }
/* ═══════════════════════════════════════════════════════════════
   PROFILE PAGE — redesigned for the new test-world layout.
   Structure (top → bottom):
     · Optional event / faction banners (span full width)
     · HERO BANNER — horizontal band: avatar portrait | name + chips
       + XP bar | Power card.
     · ACTIONS row (4 buttons).
     · EQUIPMENT grid (4×2, big tiles).
     · GEMS row (6 slots).
     · INVENTORY button + Quick (Chat/Ach/Invite) + Social (Discord/Reddit).
   Set as a SINGLE-column flow so everything stacks cleanly.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   GV2 PROFILE — full-screen profile page (test world)
   Completely fresh design. Uses cathedral as hero banner background,
   fading into solid dark below for the rest of the page.
   Main layout: hero banner + action bar + 2-col (gear | stats) +
   manage row + quick row + social.
   ═══════════════════════════════════════════════════════════════ */

body.gv-new-layout #panelHero { display: none; padding: 0; }
body.gv-new-layout #panelHero.active {
  display: block !important;
  min-height: 100%;
  padding: 0 !important;
  background: linear-gradient(180deg, #0f0822 0%, #0a0616 40%, #070410 100%);
  position: relative;
}

.gv2-profile {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 0 40px;
  font-family: inherit;
}

/* ─────────────── TOPBAR (gear / currencies / mail) ─────────────── */
.gv2-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 12px;
  position: relative;
  z-index: 3;
}
.gv2-topbar .gv2-icon-btn {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: rgba(14,10,28,0.75);
  border: 1px solid rgba(199,122,252,0.35);
  color: #EADFFF;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease;
}
.gv2-topbar .gv2-icon-btn:hover { border-color: #c77afc; background: rgba(30,18,56,0.8); }
.gv2-topbar .gv2-cur-row { display: flex; gap: 10px; flex: 1; justify-content: center; flex-wrap: wrap; }
.gv2-topbar .gv2-cur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(14,10,28,0.75);
  border: 1px solid rgba(199,122,252,0.35);
  border-radius: 999px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 800;
  position: relative;
}
.gv2-topbar .gv2-cur.gold { color: #ffd890; border-color: rgba(255,215,140,0.4); }
.gv2-topbar .gv2-cur.dia  { color: #8fd6ff; border-color: rgba(143,214,255,0.4); cursor: pointer; padding-right: 34px; }
.gv2-topbar .gv2-cur img { width: 18px; height: 18px; }
.gv2-cur-plus {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8fd6ff, #4a9cd8);
  color: #082338;
  border: none;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gv2-mail-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: linear-gradient(135deg, #ff6b7a, #e63946);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 18px;
  text-align: center;
}

/* ─────────────── HERO BANNER (cathedral bg) ─────────────── */
.gv2-hero {
  position: relative;
  margin: 0 24px 18px;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(10,6,22,0.25) 0%,
      rgba(10,6,22,0.55) 55%,
      rgba(10,6,22,0.85) 100%),
    url('../img/ui/profile-bg.jpg') center top / cover no-repeat,
    #0a0616;
  border: 1px solid rgba(199,122,252,0.35);
  box-shadow: 0 14px 48px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,215,140,0.15);
  min-height: 260px;
}
.gv2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,215,140,0.14), transparent 60%),
    radial-gradient(ellipse at 50% 100%, transparent 0%, rgba(8,4,18,0.7) 75%);
  pointer-events: none;
}
.gv2-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 28px 32px;
}

/* Avatar column */
.gv2-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gv2-avatar {
  width: 200px;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(199,122,252,0.2), rgba(14,10,28,0.7));
  border: 2px solid rgba(199,122,252,0.5);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 30px rgba(199,122,252,0.15);
  transition: transform 0.2s ease, border-color 0.2s;
}
.gv2-avatar:hover { transform: translateY(-2px); border-color: #ffd890; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 40px rgba(255,215,140,0.3); }
.gv2-avatar-art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.gv2-avatar-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}
.gv2-pets { display: flex; gap: 8px; }
.gv2-pet {
  width: 42px; height: 42px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(14,10,28,0.85);
  border: 1px solid rgba(199,122,252,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.gv2-pet:hover { transform: translateY(-1px); border-color: #ffd890; }
.gv2-pet img { width: 80%; height: 80%; object-fit: contain; }
.gv2-pet.empty img { opacity: 0.3; }
.gv2-pet-lvl {
  position: absolute;
  bottom: 0; right: 0;
  background: #14091f;
  color: #ffd890;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 6px 0 0 0;
  border-top: 1px solid rgba(255,215,140,0.5);
  border-left: 1px solid rgba(255,215,140,0.5);
}
.gv2-pet.filled.r-rare      { border-color: rgba(80,180,255,0.7); box-shadow: 0 0 10px rgba(80,180,255,0.3); }
.gv2-pet.filled.r-epic      { border-color: rgba(191,95,255,0.7); box-shadow: 0 0 10px rgba(191,95,255,0.3); }
.gv2-pet.filled.r-legendary { border-color: rgba(255,180,64,0.85); box-shadow: 0 0 12px rgba(255,180,64,0.4); }
.gv2-pet.filled.r-mythic    { border-color: rgba(255,100,140,0.9); box-shadow: 0 0 14px rgba(255,100,140,0.5); }

/* Identity column */
.gv2-id-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gv2-name {
  font-family: 'Cinzel', serif;
  font-size: 36px;
  font-weight: 900;
  color: #fff4d8;
  letter-spacing: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 0 20px rgba(255,215,140,0.25);
  line-height: 1.1;
  word-break: break-word;
}
.gv2-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gv2-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(14,10,28,0.7);
  border: 1px solid rgba(199,122,252,0.4);
  border-radius: 999px;
  color: #EADFFF;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.gv2-tag.cls  { border-color: rgba(255,215,140,0.5); color: #ffd890; }
.gv2-tag.lvl  { background: rgba(255,215,140,0.15); border-color: rgba(255,215,140,0.6); color: #fff4d8; font-weight: 900; }
.gv2-tag.elo  { cursor: pointer; }
.gv2-tag.elo:hover { transform: translateY(-1px); }
.gv2-tag.fac.warden { border-color: rgba(255,200,80,0.7); color: #ffd890; }
.gv2-tag.fac.seeker { border-color: rgba(180,100,220,0.7); color: #d6a5ff; }
.gv2-tag-ic { font-size: 14px; }

.gv2-xp { display: flex; flex-direction: column; gap: 4px; max-width: 480px; }
.gv2-xp-bar {
  height: 10px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(199,122,252,0.4);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.gv2-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #c89a4a, #ffd890, #fff4c2);
  box-shadow: 0 0 12px rgba(255,215,140,0.6);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.gv2-xp-txt {
  display: flex;
  justify-content: space-between;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  color: #c4b5d9;
  letter-spacing: 0.5px;
}
.gv2-xp-txt strong { color: #ffd890; }
.gv2-xp-pct { color: #ffd890; font-weight: 900; }

/* Power emblem (right side of banner) */
.gv2-power {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 16px;
  background: linear-gradient(135deg, rgba(255,107,107,0.18), rgba(14,10,28,0.85));
  border: 1px solid rgba(255,107,107,0.55);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 20px rgba(255,107,107,0.2), inset 0 1px 0 rgba(255,240,240,0.1);
  transition: transform 0.15s ease, border-color 0.15s;
  min-width: 180px;
}
.gv2-power:hover { transform: translateY(-2px); border-color: #ff8fa3; }
.gv2-power img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(255,107,107,0.5)); }
.gv2-power-body { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.gv2-power-lbl { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px; color: #ff9aaa; font-weight: 800; text-transform: uppercase; }
.gv2-power-val { font-family: 'Cinzel', serif; font-size: 26px; font-weight: 900; color: #ff8fa3; line-height: 1; text-shadow: 0 0 12px rgba(255,107,107,0.4); }

/* Event banner (optional) */
.gv2-event-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 24px 18px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(255,180,64,0.1));
  border: 1px solid rgba(255,107,107,0.5);
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
  width: calc(100% - 48px);
  max-width: calc(1440px - 48px);
  font-family: inherit;
  box-sizing: border-box;
}
.gv2-event-ic { font-size: 28px; }
.gv2-event-body { flex: 1; text-align: left; }
.gv2-event-ttl { font-family: 'Cinzel', serif; font-size: 16px; font-weight: 900; color: #ffd890; }
.gv2-event-sub { font-size: 12px; color: #c4b5d9; }
.gv2-event-live { background: #e63946; color: #fff; font-weight: 900; padding: 4px 10px; border-radius: 999px; font-size: 11px; letter-spacing: 1px; animation: gv2Pulse 1.6s ease-in-out infinite; }
@keyframes gv2Pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ─────────────── ACTIONS ROW ─────────────── */
.gv2-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 24px 18px;
}
.gv2-act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 8px;
  background: linear-gradient(180deg, rgba(28,18,52,0.72), rgba(14,10,28,0.85));
  border: 1px solid rgba(199,122,252,0.35);
  border-radius: 14px;
  color: #EADFFF;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s, background 0.15s;
  position: relative;
  text-transform: uppercase;
}
.gv2-act:hover { transform: translateY(-2px); border-color: #c77afc; box-shadow: 0 8px 24px rgba(199,122,252,0.25); }
.gv2-act img { width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.gv2-act-lbl { line-height: 1.1; text-align: center; }
.gv2-act-bdg {
  position: absolute;
  top: -6px; right: -6px;
  background: linear-gradient(135deg, #ffd890, #c89a4a);
  color: #14091f;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 22px;
  text-align: center;
  box-shadow: 0 0 10px rgba(255,215,140,0.5);
}
.gv2-act.prem { background: linear-gradient(180deg, rgba(255,215,140,0.15), rgba(14,10,28,0.8)); border-color: rgba(255,215,140,0.5); }

/* ─────────────── MAIN — 2 cols ─────────────── */
.gv2-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin: 0 24px 18px;
}
.gv2-col { display: flex; flex-direction: column; gap: 16px; }

/* Card base */
.gv2-card {
  background: linear-gradient(180deg, rgba(20,14,40,0.88), rgba(12,8,28,0.92));
  border: 1px solid rgba(199,122,252,0.3);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(199,122,252,0.15);
}
.gv2-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(199,122,252,0.18);
}
.gv2-card-ic { font-size: 20px; line-height: 1; }
.gv2-card-ttl {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 900;
  color: #ffd890;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

/* Equipment grid — 4×2 with proper square tiles */
.gv2-eq-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.gv2-eq {
  aspect-ratio: 1;
  position: relative;
  background: linear-gradient(135deg, rgba(30,20,58,0.6), rgba(14,10,28,0.85));
  border: 1px solid rgba(199,122,252,0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s;
}
.gv2-eq:hover { transform: translateY(-2px); border-color: #c77afc; }
.gv2-eq .item-img { width: 76% !important; height: 76% !important; object-fit: contain !important; }
.gv2-eq.empty .item-img { display: none; }
.gv2-eq.empty::before {
  content: '';
  width: 46%; height: 46%;
  background: rgba(199,122,252,0.08);
  border: 1px dashed rgba(199,122,252,0.2);
  border-radius: 8px;
}
.gv2-eq.filled.r-common    { border-color: rgba(180,180,180,0.4); }
.gv2-eq.filled.r-uncommon  { border-color: rgba(100,200,120,0.55); box-shadow: inset 0 0 12px rgba(100,200,120,0.15); }
.gv2-eq.filled.r-rare      { border-color: rgba(80,180,255,0.65); box-shadow: inset 0 0 14px rgba(80,180,255,0.2); }
.gv2-eq.filled.r-epic      { border-color: rgba(191,95,255,0.7); box-shadow: inset 0 0 16px rgba(191,95,255,0.25); }
.gv2-eq.filled.r-legendary { border-color: rgba(255,180,64,0.85); box-shadow: inset 0 0 18px rgba(255,180,64,0.3); }
.gv2-eq.filled.r-mythic    { border-color: rgba(255,100,140,0.9); box-shadow: inset 0 0 20px rgba(255,100,140,0.35); }
.gv2-eq-slot-lbl {
  position: absolute;
  top: 4px; left: 4px;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  color: #8f84a0;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  pointer-events: none;
}
.gv2-eq-ilvl {
  position: absolute;
  bottom: 4px; right: 4px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,215,140,0.4);
  color: #ffd890;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1;
}

/* Gems wrap — keep Soul Forge's built-in layout but adjust */
.gv2-gems-wrap .sf-hero-slots {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.gv2-gems-wrap .sf-hero-title {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  display: none; /* hide duplicate title, card header already labels it */
}
.gv2-gems-wrap .sf-hero-slot {
  min-height: 64px !important;
  padding: 6px 4px !important;
}

/* Inventory pill */
.gv2-inv-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(28,18,52,0.72), rgba(14,10,28,0.85));
  border: 1px solid rgba(199,122,252,0.35);
  border-radius: 14px;
  color: #EADFFF;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.gv2-inv-btn:hover { transform: translateY(-1px); border-color: #c77afc; background: linear-gradient(180deg, rgba(36,24,68,0.82), rgba(18,12,34,0.92)); }
.gv2-inv-btn img { width: 26px; height: 26px; }
.gv2-inv-lbl { flex: 1; text-align: left; }
.gv2-inv-cnt {
  background: rgba(255,215,140,0.15);
  color: #ffd890;
  border: 1px solid rgba(255,215,140,0.45);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* Stats card — embed fills the card */
.gv2-stats-card { padding-bottom: 20px; }
.gv2-stats-embed .stats-panel-box {
  background: rgba(10,6,22,0.45) !important;
  border: 1px solid rgba(199,122,252,0.15) !important;
}
.gv2-stats-embed .stats-hero {
  background: linear-gradient(135deg, rgba(199,122,252,0.14), rgba(10,6,22,0.55)) !important;
  border: 1px solid rgba(199,122,252,0.25) !important;
}

/* ─────────────── MANAGE ROW ─────────────── */
.gv2-manage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 24px 14px;
}
.gv2-mgr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(28,18,52,0.7), rgba(14,10,28,0.85));
  border: 1px solid rgba(199,122,252,0.4);
  border-radius: 12px;
  color: #EADFFF;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.gv2-mgr-btn:hover { transform: translateY(-1px); border-color: #c77afc; background: linear-gradient(180deg, rgba(40,26,76,0.82), rgba(20,14,40,0.92)); }
.gv2-mgr-ic { font-size: 16px; display: inline-flex; align-items: center; }

/* ─────────────── QUICK ROW ─────────────── */
.gv2-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 24px 14px;
}
.gv2-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: rgba(14,10,28,0.6);
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 12px;
  color: #c4b5d9;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.gv2-quick-btn:hover { border-color: #c77afc; color: #EADFFF; }
.gv2-quick-ic { font-size: 18px; }

/* ─────────────── SOCIAL ─────────────── */
.gv2-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 24px;
}
.gv2-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  background: rgba(14,10,28,0.6);
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 12px;
  color: #EADFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
  position: relative;
}
.gv2-social-btn.discord { background: linear-gradient(135deg, #5865F2, #404eed); border-color: rgba(88,101,242,0.6); color: #fff; }
.gv2-social-btn.discord:hover { box-shadow: 0 6px 20px rgba(88,101,242,0.45); transform: translateY(-1px); }
.gv2-social-btn.reddit { background: linear-gradient(135deg, #FF4500, #cc3700); border-color: rgba(255,69,0,0.6); color: #fff; }
.gv2-social-btn.reddit:hover { box-shadow: 0 6px 20px rgba(255,69,0,0.45); transform: translateY(-1px); }
.gv2-social-btn img { width: 22px; height: 22px; }
.gv2-social-bonus {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255,215,140,0.2);
  border: 1px solid rgba(255,215,140,0.6);
  color: #ffd890;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  margin-left: 8px;
}
.gv2-social-bonus img { width: 12px; height: 12px; }

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 1024px) {
  .gv2-hero-inner { grid-template-columns: 180px minmax(0, 1fr); row-gap: 18px; }
  .gv2-power { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .gv2-main { grid-template-columns: 1fr; }
  .gv2-avatar { width: 180px; height: 180px; }
  .gv2-name { font-size: 28px; }
}
@media (max-width: 720px) {
  .gv2-profile { padding-bottom: 28px; }
  .gv2-topbar { padding: 10px 14px; gap: 8px; }
  .gv2-topbar .gv2-cur-row { gap: 6px; }
  .gv2-topbar .gv2-cur { font-size: 12px; padding: 6px 12px; padding-right: 30px; }
  .gv2-hero { margin: 0 12px 14px; min-height: 220px; }
  .gv2-hero-inner { grid-template-columns: 1fr; padding: 18px; gap: 14px; text-align: center; }
  .gv2-avatar-col { align-items: center; }
  .gv2-avatar { width: 140px; height: 140px; }
  .gv2-id-col { align-items: center; }
  .gv2-tags { justify-content: center; }
  .gv2-name { font-size: 24px; text-align: center; }
  .gv2-power { min-width: 0; justify-content: center; }
  .gv2-actions { margin: 0 12px 14px; gap: 8px; }
  .gv2-act { padding: 12px 6px; font-size: 10px; }
  .gv2-act img { width: 28px; height: 28px; }
  .gv2-main { margin: 0 12px 14px; gap: 12px; }
  .gv2-manage { grid-template-columns: repeat(2, 1fr); margin: 0 12px 12px; }
  .gv2-quick { margin: 0 12px 12px; }
  .gv2-social { margin: 0 12px; }
  .gv2-card { padding: 14px; }
  .gv2-card-ttl { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TILE BAR (test world new layout — active nav)
   Fixed at bottom, scrollable horizontally, tiles with icon + label
   + optional timer value / ready pulse / urgent tint.
   ═══════════════════════════════════════════════════════════════ */
.gv-bot-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 124px;
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 14px;
  background:
    linear-gradient(180deg, rgba(25,16,45,0.92) 0%, rgba(10,6,20,0.98) 100%);
  border-top: 1px solid rgba(200,168,78,0.4);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.6);
}
.gv-bot-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,140,0.55), rgba(199,122,252,0.55), rgba(255,215,140,0.55), transparent);
}

/* Leading hero pill — click opens Profile */
.gv-bot-hero {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background:
    radial-gradient(ellipse at top, rgba(199,122,252,0.2), transparent 70%),
    linear-gradient(180deg, rgba(40,24,70,0.85), rgba(20,12,40,0.92));
  border: 1px solid rgba(199,122,252,0.5);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.gv-bot-hero:hover { border-color: #ffd890; box-shadow: 0 0 14px rgba(255,215,140,0.35); }
.gv-bot-hero-ava {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #c77afc;
  background: linear-gradient(135deg, #2a1f4a, #0f0820);
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(199,122,252,0.5);
}
.gv-bot-hero-ava img { width: 100%; height: 100%; object-fit: cover; }
.gv-bot-hero-body { display: flex; flex-direction: column; gap: 2px; padding-right: 4px; }
.gv-bot-hero-lvl {
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 900;
  color: #ffd890;
  letter-spacing: 1px;
  line-height: 1;
}
.gv-bot-hero-pwr {
  font-family: 'Cinzel', serif;
  font-size: 13px; font-weight: 900;
  color: #ff9aaa;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Scrolling tile row (grouped) */
.gv-bot-scroll {
  display: flex;
  gap: 14px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,122,252,0.3) transparent;
  padding: 10px 4px 10px;
  align-items: flex-end;
  height: 100%;
}
.gv-bot-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  padding: 0 18px 0 6px;
  border-right: 2px solid transparent;
  border-image: linear-gradient(180deg, transparent, rgba(255,215,140,0.35) 40%, rgba(199,122,252,0.35) 80%, transparent) 1;
  height: 100%;
  justify-content: flex-end;
  min-width: fit-content;
  flex-shrink: 0;
}
.gv-bot-group:last-child { border-right: none; padding-right: 6px; }
.gv-bot-cat-lbl {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffd890;
  text-align: center;
  padding: 4px 10px 3px;
  background: linear-gradient(180deg, rgba(40,26,70,0.6), rgba(18,12,36,0.8));
  border: 1px solid rgba(255,215,140,0.35);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(255,215,140,0.15), inset 0 1px 0 rgba(255,215,140,0.15);
  text-shadow: 0 0 6px rgba(255,215,140,0.5);
  white-space: nowrap;
  line-height: 1.1;
  flex-shrink: 0;
  align-self: center;
}
.gv-bot-cat-tiles {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.gv-bot-hero-ready {
  position: absolute;
  top: 0; right: 0;
  background: linear-gradient(135deg, #ffd890, #c89a4a);
  color: #14091f;
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 18px; text-align: center;
  animation: gvBotHeroReady 1.6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(255,215,140,0.7);
  z-index: 2;
}
@keyframes gvBotHeroReady {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.gv-bot-hero-ava { position: relative; }
.gv-bot-scroll::-webkit-scrollbar { height: 4px; }
.gv-bot-scroll::-webkit-scrollbar-thumb { background: rgba(199,122,252,0.3); border-radius: 2px; }

.gv-bot-tile {
  flex: 0 0 76px;
  height: 72px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  padding: 6px 4px;
  background:
    radial-gradient(ellipse at top, rgba(199,122,252,0.14), transparent 70%),
    linear-gradient(180deg, rgba(40,24,70,0.7), rgba(18,12,36,0.88));
  border: 1px solid rgba(199,122,252,0.28);
  border-radius: 10px;
  color: #c4b5d9;
  font-family: inherit;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: all .12s;
}
.gv-bot-tile:hover { transform: translateY(-2px); border-color: rgba(199,122,252,0.7); }
.gv-bot-tile.active {
  background:
    radial-gradient(ellipse at top, rgba(255,215,140,0.35), transparent 70%),
    linear-gradient(180deg, rgba(100,70,25,0.7), rgba(50,35,12,0.85));
  border-color: #ffd890;
  color: #ffe9a0;
  box-shadow: 0 0 14px rgba(255,215,140,0.4), inset 0 1px 0 rgba(255,240,180,0.2);
}
.gv-bot-ic { width: 36px; height: 36px; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.gv-bot-ic-e { font-size: 28px; line-height: 1; }
.gv-bot-lbl {
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
}
.gv-bot-val {
  position: absolute;
  bottom: 3px; left: 50%; transform: translateX(-50%);
  background: #14091f;
  border: 1px solid #c4b5d9;
  color: #c4b5d9;
  font-family: 'Courier New', monospace;
  font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: 999px;
  white-space: nowrap;
  z-index: 2;
}
.gv-bot-tile.ready .gv-bot-val { border-color: #ffd890; color: #ffd890; background: #2a1608; }
.gv-bot-tile.urgent .gv-bot-val { border-color: #ff4757; color: #ff8f90; background: #2a0812; }
.gv-bot-tile.ready {
  border-color: rgba(255,215,0,0.7);
  animation: gvBotPulse 1.8s ease-in-out infinite;
}
.gv-bot-tile.ready:hover, .gv-bot-tile.ready { box-shadow: 0 0 14px rgba(255,215,0,0.5); }
@keyframes gvBotPulse {
  0%,100% { box-shadow: 0 0 8px rgba(255,215,0,0.4); }
  50%     { box-shadow: 0 0 18px 2px rgba(255,215,0,0.7); }
}
.gv-bot-tile.urgent {
  border-color: rgba(255,71,87,0.6);
}
.gv-bot-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: linear-gradient(135deg, #ff6b7a, #e63946);
  color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 5px; border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 18px; text-align: center;
  z-index: 2;
}
.gv-bot-ready-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ffd890;
  box-shadow: 0 0 6px rgba(255,215,140,0.9);
  z-index: 2;
}

/* Trailing currencies + settings */
.gv-bot-end {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid rgba(199,122,252,0.2);
}
.gv-bot-cur {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  font-size: 12px; font-weight: 800;
}
.gv-bot-cur img { width: 14px; height: 14px; }
.gv-bot-cur.gold { color: #ffd47a; border-color: rgba(255,215,0,0.3); }
.gv-bot-cur.dia { color: #7ecdff; cursor: pointer; border-color: rgba(126,205,255,0.3); }
.gv-bot-mini {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(40,24,70,0.75);
  border: 1px solid rgba(199,122,252,0.4);
  border-radius: 10px;
  color: #c4b5d9;
  font-size: 20px;
  cursor: pointer;
}
.gv-bot-mini:hover { border-color: #c77afc; color: #fff; }

/* Tighten up on narrow screens */
@media (max-width: 760px) {
  .gv-bot-hero-body { display: none; }
  .gv-bot-hero-ava { width: 48px; height: 48px; }
  .gv-bot-tile { flex-basis: 66px; height: 64px; font-size: 8px; }
  .gv-bot-ic { width: 30px; height: 30px; }
  .gv-bot-end { gap: 4px; padding-left: 4px; }
  .gv-bot-cur { font-size: 10px; padding: 4px 7px; }
  .gv-bot-cur img { width: 11px; height: 11px; }
}

.gv-new-nav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px 12px;
  background:
    radial-gradient(ellipse at top left, rgba(199,122,252,0.15), transparent 40%),
    radial-gradient(ellipse at bottom right, rgba(138,79,207,0.1), transparent 50%),
    linear-gradient(180deg, rgba(20,14,40,0.97) 0%, rgba(12,8,28,0.99) 100%);
  border-right: 1px solid rgba(199,122,252,0.4);
  box-shadow:
    4px 0 20px rgba(0,0,0,0.7),
    inset -1px 0 0 rgba(255,215,140,0.1),
    inset 1px 0 0 rgba(199,122,252,0.1);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,122,252,0.3) transparent;
}
/* Subtle rune-pattern overlay on the nav background */
.gv-new-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(199,122,252,0.015) 0 8px, transparent 8px 18px),
    repeating-linear-gradient(-45deg, rgba(255,215,140,0.012) 0 12px, transparent 12px 26px);
  pointer-events: none;
  z-index: 0;
}
.gv-new-nav > * { position: relative; z-index: 1; }
/* Thin gold top accent */
.gv-new-nav::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,140,0.5), rgba(199,122,252,0.6), rgba(255,215,140,0.5), transparent);
  z-index: 2;
}
.gv-new-nav::-webkit-scrollbar { width: 5px; }
.gv-new-nav::-webkit-scrollbar-thumb { background: rgba(199,122,252,0.3); border-radius: 3px; }

.gvnv-hero {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background:
    radial-gradient(ellipse at top, rgba(199,122,252,0.18), transparent 70%),
    linear-gradient(180deg, rgba(40,24,70,0.85), rgba(20,12,40,0.92));
  border: 1px solid rgba(199,122,252,0.4);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
  box-shadow: 0 4px 14px rgba(138,79,207,0.25), inset 0 1px 0 rgba(199,122,252,0.15);
  position: relative;
  overflow: hidden;
}
.gvnv-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,122,252,0.6), transparent);
}
.gvnv-hero:hover {
  border-color: rgba(255,215,140,0.65);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,215,140,0.3), inset 0 1px 0 rgba(255,215,140,0.2);
}
.gvnv-hero-ava {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 10px;
  overflow: visible;
  flex-shrink: 0;
  border: 2px solid rgba(199,122,252,0.65);
  background: linear-gradient(135deg, #2a1f4a, #0f0820);
  box-shadow: 0 0 12px rgba(138,79,207,0.5), inset 0 0 8px rgba(0,0,0,0.5);
}
.gvnv-hero-ava img + * { pointer-events: none; }
.gvnv-hero-ava img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  border-radius: inherit;
}
.gvnv-hero-lvl {
  position: absolute;
  bottom: -6px; right: -6px;
  background: linear-gradient(135deg, #c77afc, #8a4fcf);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 900;
  padding: 2px 7px;
  border-radius: 999px;
  border: 2px solid #0a0614;
  letter-spacing: 0.5px;
  min-width: 22px; text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.gvnv-hero-body { min-width: 0; flex: 1; }
.gvnv-hero-name {
  font-family: 'Cinzel', 'Georgia', serif;
  font-size: 15px; font-weight: 900;
  color: #fff;
  letter-spacing: 0.8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(199,122,252,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.gvnv-hero-pwr {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 5px;
  padding: 3px 8px 3px 6px;
  background: linear-gradient(135deg, rgba(255,100,100,0.22), rgba(100,20,20,0.15));
  border: 1px solid rgba(255,140,120,0.45);
  border-radius: 999px;
}
.gvnv-hero-pwr img { width: 14px; height: 14px; filter: drop-shadow(0 0 4px rgba(255,120,100,0.6)); }
.gvnv-hero-pwr span {
  font-family: 'Cinzel', serif;
  font-size: 12px; font-weight: 900;
  color: #ffcaca;
  letter-spacing: 0.5px;
}

.gvnv-cur-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 3px;
}
.gvnv-cur {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 4px 4px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-size: 11px; font-weight: 800;
  cursor: default;
}
.gvnv-cur img { width: 13px; height: 13px; }
.gvnv-cur.gold { color: #ffd47a; border-color: rgba(255,215,0,0.3); }
.gvnv-cur.dia { color: #7ecdff; border-color: rgba(126,205,255,0.3); cursor: pointer; }
.gvnv-cur.dia:hover { border-color: #7ecdff; }

/* Ornate section headers — gold gradient line flanking uppercase Cinzel */
.gvnv-sec-lbl {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #ffd890;
  padding: 6px 4px 5px;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 8px rgba(255,215,140,0.35), 0 1px 2px rgba(0,0,0,0.9);
}
.gvnv-sec-lbl::before,
.gvnv-sec-lbl::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,78,0.5), transparent);
}

/* Nav items — 2-column grid of compact icon+label tiles */
.gvnv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}
.gvnv-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 4px 6px;
  background:
    radial-gradient(ellipse at top, rgba(199,122,252,0.08), transparent 60%),
    linear-gradient(180deg, rgba(30,20,55,0.55), rgba(12,8,28,0.7));
  border: 1px solid rgba(199,122,252,0.25);
  border-radius: 9px;
  color: #d4c5e9;
  font-size: 9px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  text-align: center;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 4px rgba(0,0,0,0.3);
}
.gvnv-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 40%, rgba(199,122,252,0.12) 50%, transparent 60%);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.gvnv-item:hover {
  background:
    radial-gradient(ellipse at top, rgba(199,122,252,0.25), transparent 60%),
    linear-gradient(180deg, rgba(60,40,100,0.8), rgba(30,18,60,0.85));
  border-color: rgba(199,122,252,0.7);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(138,79,207,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
}
.gvnv-item:hover::before { opacity: 1; }
.gvnv-item.active {
  background:
    radial-gradient(ellipse at top, rgba(255,215,140,0.28), transparent 70%),
    linear-gradient(180deg, rgba(100,70,25,0.5), rgba(50,35,12,0.7));
  border-color: #ffd890;
  color: #ffe9a0;
  box-shadow:
    0 0 14px rgba(255,215,140,0.5),
    inset 0 1px 0 rgba(255,240,180,0.2),
    inset 0 0 12px rgba(255,215,140,0.1);
}
.gvnv-item.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -2px;
  transform: translateX(-50%);
  width: 30%; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd890, transparent);
  filter: blur(0.5px);
}
.gvnv-item .gvnv-ic {
  font-size: 18px;
  line-height: 1;
  display: block;
}
.gvnv-item .gvnv-ic-img {
  width: 22px; height: 22px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.gvnv-item .gvnv-lbl {
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
  text-transform: uppercase;
  font-size: 8px;
  font-weight: 800;
}
.gvnv-badge {
  position: absolute;
  top: -5px; right: -5px;
  background: linear-gradient(135deg, #ff6b7a, #e63946);
  color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 16px; text-align: center;
  box-shadow: 0 0 6px rgba(255,71,87,0.5);
}

/* ── Timers — own framed box, visually separate from nav lists ── */
.gvnv-timers-box {
  padding: 6px 6px 7px;
  background:
    radial-gradient(ellipse at top, rgba(255,215,140,0.08), transparent 70%),
    linear-gradient(180deg, rgba(40,30,14,0.5), rgba(18,12,6,0.75));
  border: 1px solid rgba(255,215,140,0.35);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,215,140,0.1), 0 2px 8px rgba(0,0,0,0.4);
  margin: 3px 0;
}
.gvnv-timers-title {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Cinzel', serif;
  font-size: 9px; font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffd890;
  padding: 1px 4px 5px;
  border-bottom: 1px solid rgba(255,215,140,0.2);
  margin-bottom: 4px;
  text-shadow: 0 0 6px rgba(255,215,140,0.3);
}
.gvnv-timers-title span { font-size: 12px; }
.gvnv-timers {
  display: flex; flex-direction: column;
  gap: 2px;
}
.gvnv-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: rgba(18,12,32,0.6);
  border: 1px solid rgba(199,122,252,0.22);
  border-left: 3px solid rgba(199,122,252,0.4);
  border-radius: 6px;
  color: #c4b5d9;
  font-size: 10px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
  text-align: left;
  width: 100%;
}
.gvnv-timer:hover {
  border-color: rgba(199,122,252,0.5);
  border-left-color: rgba(199,122,252,0.85);
  background: rgba(30,22,50,0.8);
}
.gvnv-timer .gvnv-t-ic,
.gvnv-timer .gvnv-t-ic-e {
  width: 18px; height: 18px;
  font-size: 14px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  object-fit: contain;
}
.gvnv-timer .gvnv-t-lbl { flex: 1; letter-spacing: 0.5px; text-transform: uppercase; font-size: 9px; }
.gvnv-timer .gvnv-t-val {
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.5px;
  color: #c7a6ff;
  white-space: nowrap;
}
.gvnv-timer.ready {
  background: linear-gradient(90deg, rgba(120,80,25,0.75), rgba(70,45,15,0.85));
  border-color: rgba(255,215,0,0.7);
  border-left-color: #ffd44d;
  animation: gvnvTimerPulse 1.8s ease-in-out infinite;
}
.gvnv-timer.ready .gvnv-t-lbl { color: #ffe9a0; }
.gvnv-timer.ready .gvnv-t-val { color: #fff5c8; font-weight: 900; }
@keyframes gvnvTimerPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,0.4); }
  50%     { box-shadow: 0 0 12px 1px rgba(255,215,0,0.6); }
}
.gvnv-timer.urgent {
  border-color: rgba(255,71,87,0.55);
  border-left-color: #ff4757;
  background: linear-gradient(90deg, rgba(80,16,28,0.7), rgba(40,8,16,0.85));
}
.gvnv-timer.urgent .gvnv-t-val { color: #ff8f90; }
.gvnv-timer.done { opacity: 0.55; }
.gvnv-timer.hint { opacity: 0.8; }
.gvnv-timer.hint .gvnv-t-lbl { color: #9fd8ff; }
.gvnv-timer.hint .gvnv-t-val { color: #7ecdff; }

/* Mobile: nav collapses to off-canvas drawer (future iteration) */
@media (max-width: 759px) {
  body.gv-new-layout #mainContent { margin-left: 0 !important; }
  body.gv-new-layout .gv-new-nav { transform: translateX(-100%); transition: transform .25s; }
  body.gv-new-layout .gv-new-nav.open { transform: translateX(0); }
}

/* Quick Panel — unified sidebar (desktop only).
   z-index 100 so it stays visible above the Rift active-quest fullscreen
   overlay (z-index 99). Modals still sit above (typically 999+). */
.quick-panel {
  position: fixed;
  left: 300px; /* right of sidebar */
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: linear-gradient(180deg, rgba(20,14,40,0.92), rgba(12,8,28,0.95));
  border: 1px solid rgba(255,215,0,0.15);
  border-left: none;
  border-radius: 0 12px 12px 0;
  padding: 6px 4px;
  box-shadow: 3px 0 16px rgba(0,0,0,0.5), 0 0 8px rgba(255,215,0,0.05);
  backdrop-filter: blur(8px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: none;
}
.quick-panel::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) {
  .quick-panel { left: 340px; }
}
.quick-panel-events {
  display: none; /* merged into main panel */
}
.qp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.qp-item:hover { background: rgba(255,255,255,0.06); }
.qp-icon { width: 26px; height: 26px; object-fit: contain; }
.qp-label { font-size: 9px; font-weight: 700; color: #ccc; white-space: nowrap; }
.qp-sub { font-size: 8px; color: #666; }
.qp-badge {
  position: absolute; top: 2px; right: 2px;
  background: #ff4757; color: #fff;
  font-size: 8px; font-weight: 800;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.qp-ad:hover { background: rgba(180,130,255,0.08); }
.qp-boss:hover { background: rgba(255,99,71,0.1); }

/* ═══════════════════════════════════════════════════════════
   Quick Panel — NEW tile design (desktop). Grouped sections
   (rewards / combat / social) with timers, ready-state pulse,
   clear labels + values. Applied when panel has .qp-tiles class.
   ═══════════════════════════════════════════════════════════ */
.quick-panel.qp-tiles {
  gap: 0;
  padding: 8px 5px;
  min-width: 76px;
  border-radius: 0 14px 14px 0;
  box-shadow: 4px 0 20px rgba(0,0,0,0.55), 0 0 14px rgba(255,215,0,0.06);
}
.quick-panel .qp-sec {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.quick-panel .qp-sep {
  height: 1px;
  margin: 7px 6px;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent);
  flex-shrink: 0;
}
.quick-panel .qp-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 4px;
  background: linear-gradient(180deg, rgba(40,24,70,0.75), rgba(18,12,36,0.9));
  border: 1px solid rgba(199,122,252,0.22);
  border-radius: 9px;
  cursor: pointer;
  position: relative;
  transition: transform .1s, box-shadow .15s, border-color .15s;
  flex-shrink: 0;
  min-height: 56px;
}
.quick-panel .qp-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(199,122,252,0.55);
  box-shadow: 0 4px 10px rgba(199,122,252,0.25);
}
.quick-panel .qp-tile:active { transform: scale(0.95); }
.quick-panel .qp-tile img { width: 26px; height: 26px; object-fit: contain; display: block; }
.quick-panel .qp-tile .qp-ic-e { font-size: 22px; line-height: 1; }
.quick-panel .qp-tile .qp-lbl {
  font-size: 9px; font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.5px; text-transform: uppercase;
  line-height: 1.1;
  margin-top: 1px;
  white-space: nowrap;
}
.quick-panel .qp-tile .qp-val {
  font-size: 10px; font-weight: 800;
  color: #c7a6ff;
  line-height: 1;
  margin-top: 1px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

/* Tile states — "ready" = claim-ready / action-ready (GOLD highlight,
   very obvious so players see what to do next). */
.quick-panel .qp-tile.ready {
  border-color: #ffd44d;
  border-width: 1.5px;
  background: linear-gradient(180deg, rgba(120,80,25,0.85), rgba(70,45,15,0.95));
  box-shadow: 0 0 10px rgba(255,215,0,0.45), inset 0 1px 0 rgba(255,240,180,0.3);
}
.quick-panel .qp-tile.ready .qp-lbl { color: #ffe9a0; }
.quick-panel .qp-tile.ready .qp-val {
  color: #fff5c8;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255,215,0,0.6);
}
.quick-panel .qp-tile.pulse {
  animation: qpTilePulse 1.8s ease-in-out infinite;
}
@keyframes qpTilePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.45), inset 0 1px 0 rgba(255,240,180,0.3); }
  50% { box-shadow: 0 0 22px 3px rgba(255,215,0,0.8), 0 0 36px rgba(255,200,80,0.4), inset 0 1px 0 rgba(255,240,180,0.5); }
}

/* SOON = disabled/greyed-out (Ads temporarily disabled) */
.quick-panel .qp-tile.soon {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: rgba(120,120,130,0.3);
  background: linear-gradient(180deg, rgba(30,28,40,0.7), rgba(18,16,28,0.85));
}
.quick-panel .qp-tile.soon:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(120,120,130,0.3);
}
.quick-panel .qp-val-soon {
  color: #888 !important;
  font-size: 9px !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.quick-panel .qp-tile.urgent {
  border-color: rgba(255,71,87,0.65);
  background: linear-gradient(180deg, rgba(80,16,28,0.85), rgba(40,8,16,0.95));
}
.quick-panel .qp-tile.urgent .qp-val { color: #ff8f90; }
.quick-panel .qp-tile.done { opacity: 0.5; }
.quick-panel .qp-tile.hint { opacity: 0.8; }
.quick-panel .qp-tile.hint .qp-val { color: #7ecdff; }
.quick-panel .qp-tile.info .qp-lbl { color: #7ecdff; }
.quick-panel .qp-tile.gold {
  border-color: rgba(255,215,140,0.4);
  background: linear-gradient(180deg, rgba(100,70,20,0.6), rgba(50,35,10,0.75));
}
.quick-panel .qp-tile.gold .qp-lbl { color: #ffd890; }

/* "New items" badge on Inventory tile */
.quick-panel .qp-new-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: linear-gradient(135deg, #ff6b7a, #e63946);
  color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1.5px solid #0a0614;
  min-width: 14px; text-align: center;
  box-shadow: 0 0 6px rgba(255,71,87,0.6);
}
.qp-pulse {
  position: absolute; inset: -2px; border-radius: 10px;
  border: 2px solid rgba(255,99,71,0.4);
  animation: qpPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes qpPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}
/* Quick Panel tooltips */
.qp-item[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(15,12,35,0.96);
  border: 1px solid rgba(255,215,0,0.25);
  color: #ddd;
  font-size: 11px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 8px;
  white-space: pre-line;
  width: max-content;
  max-width: 220px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 999;
  box-shadow: 4px 4px 16px rgba(0,0,0,0.6), 0 0 12px rgba(255,215,0,0.05);
}
.qp-item[data-tip]::before {
  content: '';
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: rgba(255,215,0,0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 999;
}
.qp-item[data-tip]:hover::after,
.qp-item[data-tip]:hover::before { opacity: 1; }

@media (max-width: 959px) { .quick-panel, .quick-panel-events { display: none; } }

/* ═══ LFG — Recruitment Board ═══ */
#panelLfg { background: url('../img/lfg/bg.jpg') center center/cover no-repeat; background-color: #0a0820; position: relative; }
#panelLfg::before { content: ''; position: absolute; inset: 0; background: rgba(10,8,32,0.7); pointer-events: none; z-index: 0; }
.lfg-page { max-width: 1400px; margin: 0 auto; padding: 0 24px 24px 70px; height: calc(100vh - 56px); overflow-y: auto; position: relative; z-index: 1; }
@media (max-width: 959px) { .lfg-page { padding-left: 16px; max-width: 100%; } }
.lfg-header {
  position: relative; text-align: center; padding: 24px 16px 16px; margin-bottom: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,165,0,0.1) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,165,0,0.12);
}
.lfg-header-glow { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 200px; height: 100px; background: radial-gradient(ellipse, rgba(255,165,0,0.15) 0%, transparent 70%); pointer-events: none; }
.lfg-header-title { font-family: var(--font-display); font-size: 22px; color: #FFA500; text-shadow: 0 0 16px rgba(255,165,0,0.25); letter-spacing: 1px; position: relative; z-index: 1; }
.lfg-header-sub { font-size: 12px; color: var(--text-dim); margin-top: 4px; position: relative; z-index: 1; }

.lfg-post {
  background: linear-gradient(135deg, rgba(255,165,0,0.06), rgba(255,165,0,0.02));
  border: 1px solid rgba(255,165,0,0.15); border-radius: 14px; padding: 16px; margin-bottom: 16px;
  max-width: 700px; margin-left: auto; margin-right: auto;
}
.lfg-post-label { font-size: 11px; font-weight: 700; color: #FFA500; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.lfg-select {
  width: 100%; padding: 10px 12px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; color: var(--text-bright); font-size: 13px; margin-bottom: 10px; box-sizing: border-box;
}
.lfg-select:focus { outline: none; border-color: rgba(255,165,0,0.4); }
.lfg-select option { background: #1a1035; color: #ddd; }
.lfg-post-btns { display: flex; gap: 8px; }
.lfg-post-btn {
  flex: 1; padding: 10px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s;
  background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,215,0,0.04));
  border: 1px solid rgba(255,215,0,0.25); color: #FFD700;
}
.lfg-post-btn:hover { background: rgba(255,215,0,0.15); transform: translateY(-1px); }
.lfg-post-prem { background: linear-gradient(135deg, rgba(180,130,255,0.12), rgba(180,130,255,0.04)); border-color: rgba(180,130,255,0.25); color: #b388ff; }
.lfg-post-prem:hover { background: rgba(180,130,255,0.15); }
.lfg-post-hint { font-size: 10px; color: var(--text-dim); margin-top: 8px; text-align: center; }

.lfg-filter { display: flex; gap: 0; margin-bottom: 14px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: rgba(0,0,0,0.2); }
.lfg-filter-btn {
  flex: 1; background: transparent; border: none; color: var(--text-dim); font-size: 12px; font-weight: 600;
  padding: 8px 4px; cursor: pointer; transition: all 0.2s; text-align: center;
}
.lfg-filter-btn:not(:last-child) { border-right: 1px solid var(--border); }
.lfg-filter-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.lfg-filter-active { background: linear-gradient(180deg, rgba(255,165,0,0.12), rgba(255,165,0,0.04)); color: #FFA500; font-weight: 700; box-shadow: inset 0 -2px 0 #FFA500; }

.lfg-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 1100px) { .lfg-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .lfg-list { grid-template-columns: 1fr; } }
.lfg-loading, .lfg-empty { text-align: center; color: var(--text-dim); padding: 40px 20px; font-size: 13px; grid-column: 1 / -1; }

.lfg-card {
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.07); transition: all 0.2s; position: relative; overflow: hidden;
}
.lfg-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); }
.lfg-card-premium {
  border-color: rgba(255,215,0,0.25); background: linear-gradient(135deg, rgba(255,215,0,0.06), rgba(255,215,0,0.02));
}
.lfg-card-premium::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.06), transparent);
  animation: mailShimmer 3s ease-in-out infinite;
  pointer-events: none; border-radius: inherit;
}
.lfg-card { overflow: hidden; }
.lfg-card-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 20px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.lfg-card-guild .lfg-card-icon { background: linear-gradient(135deg, rgba(140,120,255,0.12), rgba(140,120,255,0.04)); border-color: rgba(140,120,255,0.2); }
.lfg-card-player .lfg-card-icon { background: linear-gradient(135deg, rgba(79,195,247,0.12), rgba(79,195,247,0.04)); border-color: rgba(79,195,247,0.2); }
/* Guild recruitment card layout */
.lfg-card-guild { flex-direction: column; gap: 10px; padding: 16px; }
.lfg-g-header { display: flex; align-items: center; gap: 12px; width: 100%; }
.lfg-g-emblem { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); flex-shrink: 0; }
.lfg-g-title { flex: 1; min-width: 0; }
.lfg-g-name { font-size: 16px; font-weight: 800; color: var(--text-bright); display: flex; align-items: center; gap: 6px; }
.lfg-g-leader { font-size: 11px; color: #FFD700; margin-top: 2px; }
.lfg-g-msg { font-size: 13px; color: var(--text); line-height: 1.5; padding: 8px 12px; background: rgba(0,0,0,0.2); border-radius: 8px; border-left: 3px solid rgba(255,165,0,0.3); }
.lfg-g-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.lfg-g-stat { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; min-width: 52px; }
.lfg-g-stat-val { font-size: 15px; font-weight: 800; color: var(--gold); }
.lfg-g-stat-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; }
.lfg-g-buildings { display: flex; gap: 6px; flex-wrap: wrap; }
.lfg-g-bld { display: flex; align-items: center; gap: 3px; padding: 3px 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--text-dim); }
.lfg-g-bld-img { width: 18px; height: 18px; object-fit: contain; }
.lfg-g-bld-name { font-size: 10px; color: #aaa; }
.lfg-g-bld-lvl { font-size: 10px; color: var(--gold); }
.lfg-g-section-label { font-size: 9px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.lfg-g-details { display: flex; gap: 16px; flex-wrap: wrap; width: 100%; }
.lfg-g-tree-wrap { display: flex; flex-direction: column; align-items: center; }
.lfg-g-tree-canvas { border-radius: 8px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.06); }
.lfg-g-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.lfg-g-mode { font-size: 11px; color: var(--text-dim); }
.lfg-card-guild .lfg-card-actions { flex-direction: row; }
/* Player recruitment card */
.lfg-card-player { flex-direction: column; gap: 10px; padding: 16px; }
.lfg-p-header { display: flex; align-items: center; gap: 14px; width: 100%; }
.lfg-p-avatar-wrap { flex-shrink: 0; }
.lfg-p-bg { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; }
.lfg-p-info { flex: 1; min-width: 0; }
.lfg-p-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lfg-p-name { font-size: 15px; font-weight: 800; color: var(--text-bright); }
.lfg-p-title { font-size: 10px; color: #BF5FFF; font-weight: 600; margin-top: 1px; letter-spacing: 0.3px; }
.lfg-p-meta { display: flex; gap: 14px; margin-top: 4px; font-size: 11px; color: var(--text-dim); align-items: center; flex-wrap: wrap; }
.lfg-p-level { font-weight: 700; color: #aaa; }
.lfg-p-power { display: flex; align-items: center; gap: 3px; font-weight: 700; color: #FF6347; }
.lfg-p-class { font-weight: 700; }
.lfg-p-details { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lfg-p-detail-item { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; font-size: 11px; color: var(--text-dim); font-weight: 600; }
.lfg-p-veilstone { gap: 5px; }
.lfg-p-tree-canvas { border-radius: 6px; background: rgba(0,0,0,0.3); }
.lfg-card-player .lfg-card-actions { flex-direction: row; }
.lfg-card-player .lfg-g-footer { width: 100%; }

.lfg-card-emblem { width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.lfg-card-tag { font-family: var(--font-display); font-size: 11px; color: #8c78ff; font-weight: 800; letter-spacing: 0.5px; }
.lfg-card-class { font-size: 22px; }
.lfg-card-body { flex: 1; min-width: 0; }
.lfg-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lfg-card-name { font-size: 14px; font-weight: 700; color: var(--text-bright); display: flex; align-items: center; gap: 4px; }
.lfg-card-time { font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.lfg-card-text { font-size: 13px; color: var(--text); margin-top: 4px; line-height: 1.5; }
.lfg-card-meta { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--text-dim); flex-wrap: wrap; align-items: center; }
.lfg-card-leader { color: #FFD700; cursor: pointer; transition: opacity 0.15s; }
.lfg-card-leader:hover { opacity: 0.7; }
.lfg-card-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.lfg-card-action {
  padding: 8px 18px; border-radius: 8px; font-size: 11px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; text-align: center; white-space: nowrap;
}
.lfg-btn-join { background: linear-gradient(135deg, rgba(76,175,80,0.2), rgba(76,175,80,0.08)); border: 1px solid rgba(76,175,80,0.3); color: #4CAF50; }
.lfg-btn-join:hover { background: rgba(76,175,80,0.25); }
.lfg-btn-apply { background: linear-gradient(135deg, rgba(255,165,0,0.2), rgba(255,165,0,0.08)); border: 1px solid rgba(255,165,0,0.3); color: #FFA500; }
.lfg-btn-apply:hover { background: rgba(255,165,0,0.25); }
.lfg-btn-invite { background: linear-gradient(135deg, rgba(79,195,247,0.2), rgba(79,195,247,0.08)); border: 1px solid rgba(79,195,247,0.3); color: #4FC3F7; }
.lfg-btn-invite:hover { background: rgba(79,195,247,0.25); }
.lfg-btn-dm { background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,215,0,0.04)); border: 1px solid rgba(255,215,0,0.2); color: #FFD700; padding: 6px 12px; font-size: 14px; }
.lfg-btn-dm:hover { background: rgba(255,215,0,0.18); }
.lfg-card-action:hover { transform: translateY(-1px); }
.lfg-card-action:disabled { opacity: 0.5; cursor: default; transform: none; }

/* Dust Forge */
.sf-dust-forge { text-align: center; padding: 8px 0; }
.sf-dust-forge-title { font-size: 13px; font-weight: 700; color: #aa44ff; margin-bottom: 4px; }
.sf-dust-forge-desc { font-size: 10px; color: #888; margin-bottom: 6px; }
.sf-dust-forge-info { font-size: 12px; color: #ccc; margin-bottom: 8px; }

/* Scroll cards in inventory */
.sf-scroll-card { cursor: default; border-style: dashed; }
.sf-scroll-card:hover { border-style: dashed; }

/* Empty inventory */
.sf-inv-empty { text-align: center; color: #666; padding: 30px 10px; font-size: 13px; }

/* Upgrade panel */
.sf-upgrade { text-align: center; padding: 10px 0; }
.sf-up-gem { font-size: 48px; margin-bottom: 8px; display: inline-block; }
.sf-up-name { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.sf-up-level { font-size: 13px; color: #ccc; margin-bottom: 8px; }
.sf-up-stats { display: flex; justify-content: center; gap: 20px; font-size: 12px; color: #aaa; margin-bottom: 12px; }
.sf-up-stat { display: flex; flex-direction: column; align-items: center; }
.sf-up-stat-val { font-size: 15px; font-weight: 700; color: #fff; }
.sf-up-stat-label { font-size: 10px; color: #888; }

/* Scroll toggles */
.sf-scrolls { display: flex; justify-content: center; gap: 12px; margin-bottom: 12px; }
.sf-scroll-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid #444; cursor: pointer; font-size: 11px; color: #ccc; transition: all 0.2s; }
.sf-scroll-toggle.active { border-color: #ffcc00; background: rgba(255,204,0,0.1); color: #ffcc00; }
.sf-scroll-toggle.disabled { opacity: 0.4; cursor: not-allowed; }
.sf-scroll-count { font-size: 10px; color: #888; }

/* Action buttons */
.sf-actions { display: flex; justify-content: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sf-btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.2s; min-width: 110px; }
.sf-btn:active { transform: scale(0.96); }
.sf-btn-upgrade { background: linear-gradient(135deg, #ff8c00, #ff6600); color: #fff; box-shadow: 0 2px 10px rgba(255,102,0,0.3); }
.sf-btn-upgrade:hover { box-shadow: 0 4px 16px rgba(255,102,0,0.5); }
.sf-btn-fuse { background: linear-gradient(135deg, #9b30ff, #6a0dad); color: #fff; box-shadow: 0 2px 10px rgba(155,48,255,0.3); }
.sf-btn-fuse:hover { box-shadow: 0 4px 16px rgba(155,48,255,0.5); }
.sf-btn-equip { background: linear-gradient(135deg, #2196F3, #1565C0); color: #fff; }
.sf-btn-salvage { background: linear-gradient(135deg, #666, #444); color: #ccc; }
.sf-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sf-btn-small { padding: 6px 12px; font-size: 11px; min-width: 80px; }

/* Fusion info */
.sf-fuse-info { font-size: 11px; color: #888; margin-top: 6px; }
.sf-fuse-ready { color: #9b30ff; }

/* Shop */
.sf-shop { padding: 4px 0; }
.sf-shop-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(0,0,0,0.3); border-radius: 8px; margin-bottom: 6px; border: 1px solid #333; }
.sf-shop-item:hover { border-color: #555; }
.sf-shop-left { display: flex; align-items: center; gap: 10px; }
.sf-shop-icon { font-size: 22px; }
.sf-shop-icon-img { width: 36px; height: 36px; object-fit: contain; border-radius: 4px; }
.sf-shop-name { font-size: 13px; font-weight: 700; color: #eee; }
.sf-shop-desc { font-size: 10px; color: #888; }
.sf-shop-btn { padding: 6px 14px; border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.sf-shop-btn-gold { background: linear-gradient(135deg, #ffcc00, #e6a800); color: #1a1a2e; }
.sf-shop-btn-diamond { background: linear-gradient(135deg, #88eeff, #44bbdd); color: #1a1a2e; }
.sf-shop-btn-dust { background: linear-gradient(135deg, #aaa, #888); color: #1a1a2e; }
.sf-shop-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Shop grid (3x3) */
.sf-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sf-shop-tile { background: rgba(0,0,0,0.35); border: 1.5px solid #333; border-radius: 10px; padding: 8px 4px; text-align: center; cursor: pointer; transition: all 0.15s; }
.sf-shop-tile:hover { border-color: #666; background: rgba(255,255,255,0.05); transform: translateY(-1px); }
.sf-shop-tile.sf-shop-sold { opacity: 0.3; cursor: default; display: flex; align-items: center; justify-content: center; min-height: 100px; }
.sf-shop-tile.sf-shop-no-gold { opacity: 0.5; }
.sf-shop-tile-img { height: 44px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.sf-shop-tile-name { font-size: 11px; font-weight: 700; line-height: 1.2; }
.sf-shop-tile-lvl { font-size: 9px; color: #888; margin-bottom: 4px; }
.sf-shop-tile-price { font-size: 11px; font-weight: 700; color: #ffcc00; display: flex; align-items: center; justify-content: center; gap: 3px; }

/* Dust type selector */
.sf-dust-select { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.sf-dust-type { padding: 6px 10px; border-radius: 6px; border: 1px solid #444; background: rgba(0,0,0,0.3); color: #ccc; font-size: 11px; cursor: pointer; transition: all 0.15s; }
.sf-dust-type.active { border-color: var(--gem-color, #ffcc00); color: var(--gem-color, #ffcc00); background: rgba(255,255,255,0.08); }

/* Equip slot picker */
.sf-equip-slots { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.sf-equip-slot { width: 44px; height: 44px; border-radius: 8px; border: 2px solid #555; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all 0.15s; }
.sf-equip-slot:hover { border-color: #ffcc00; }
.sf-equip-slot.has-gem { border-color: var(--gem-color, #666); }

/* Upgrade animations */
@keyframes sfGemPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.15); filter: brightness(1.5); }
}
@keyframes sfGemSuccess {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); filter: brightness(2) drop-shadow(0 0 20px gold); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes sfGemFail {
  0% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}
.sf-anim-pulse { animation: sfGemPulse 0.6s ease-in-out infinite; }
.sf-anim-success { animation: sfGemSuccess 0.8s ease-out forwards; }
.sf-anim-fail { animation: sfGemFail 0.5s ease-out forwards; }

/* Upgrade result overlay */
.sf-result-overlay {
  display: flex; align-items: center; justify-content: center;
  padding: 20px; text-align: center; animation: sfResultFadeIn 0.4s ease-out;
}
.sf-result-content { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sf-result-icon { font-size: 40px; animation: sfResultBounce 0.5s ease-out; }
.sf-result-text { font-size: 14px; font-weight: 800; letter-spacing: 0.5px; }
.sf-result-success .sf-result-icon { filter: drop-shadow(0 0 12px rgba(46,213,115,0.6)); }
.sf-result-fail .sf-result-icon { filter: drop-shadow(0 0 12px rgba(255,71,87,0.6)); }
.sf-result-destroyed .sf-result-icon { filter: drop-shadow(0 0 16px rgba(255,0,200,0.7)); }
@keyframes sfResultFadeIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes sfResultBounce { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Corrupted gem glow */
.sf-corrupted { animation: sfCorruptGlow 2s ease-in-out infinite alternate; }
@keyframes sfCorruptGlow {
  0% { filter: drop-shadow(0 0 6px rgba(170,0,255,0.4)); }
  100% { filter: drop-shadow(0 0 14px rgba(255,0,200,0.6)); }
}

/* Result overlay */
.sf-result-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 16px; font-weight: 900; pointer-events: none; z-index: 2; }
.sf-result-success { background: rgba(255,204,0,0.2); color: #ffcc00; text-shadow: 0 0 10px rgba(255,204,0,0.6); }
.sf-result-fail { background: rgba(255,50,50,0.15); color: #ff4444; text-shadow: 0 0 10px rgba(255,50,50,0.6); }

/* Gem drop notification in quest rewards */
.sf-gem-drop { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: rgba(255,204,0,0.15); border: 1px solid rgba(255,204,0,0.3); font-size: 12px; color: #ffcc00; margin-top: 4px; }

/* Inline gem bar (arena, fight previews) */
.sf-gem-bar { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.sf-gem-bar-slot { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; border: 1px solid var(--gem-color, #444); background: rgba(0,0,0,0.3); box-shadow: 0 0 4px var(--gem-color, transparent); }
.sf-gem-bar-lvl { position: absolute; bottom: -2px; right: 0; font-size: 7px; font-weight: 800; color: #fff; text-shadow: 0 0 3px #000; }
.sf-gem-bar-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: rgba(15,12,30,0.95); border: 1px solid #444; border-radius: 6px; padding: 6px 10px; font-size: 10px; line-height: 1.5; color: #ccc; white-space: nowrap; z-index: 200; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.6); }
.sf-gem-bar-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #444; }
.sf-gem-bar-slot:hover .sf-gem-bar-tip { display: block; }
.sf-gem-bar-slot.sf-gem-empty { border: 1px dashed rgba(255,255,255,0.12); background: rgba(255,255,255,0.02); box-shadow: none; }
.sf-gem-bar-slot.sf-gem-locked { border: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.4); box-shadow: none; opacity: 0.5; }

/* Section dividers */
.sf-divider { height: 1px; background: linear-gradient(90deg, transparent, #333, transparent); margin: 12px 0; }

/* Hero panel gem slots (grid like equipment) */
.sf-hero-section { margin-top: 10px; }
.sf-hero-title { font-size: 11px; font-weight: 700; color: #999; text-align: center; margin-bottom: 6px; cursor: pointer; }
.sf-hero-title:hover { color: #ffcc00; }
.sf-hero-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.sf-hero-slot { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 1.5px solid #333; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: all 0.15s; }
.sf-hero-slot:hover { border-color: #666; background: rgba(255,255,255,0.05); }
.sf-hero-slot.filled { border-color: var(--gem-color, #666); box-shadow: 0 0 6px var(--gem-color, transparent); }
.sf-hero-slot.filled:hover { box-shadow: 0 0 12px var(--gem-color, transparent); }
.sf-hero-slot.locked { opacity: 0.3; border-style: dashed; cursor: default; }
.sf-hero-slot.empty { opacity: 0.5; }
.sf-hero-gem-lvl { position: absolute; bottom: 1px; right: 3px; font-size: 8px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.sf-hero-slot-cost { position: absolute; bottom: -1px; font-size: 7px; font-weight: 700; color: #888; white-space: nowrap; }
/* Tooltip on hover */
.sf-hero-tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; background: rgba(15,12,30,0.95); border: 1px solid #444; border-radius: 8px; padding: 8px 12px; font-size: 11px; line-height: 1.5; color: #ccc; white-space: nowrap; z-index: 100; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.6); }
.sf-hero-tooltip::after { content: ''; position: absolute; top: 100%; left: 16px; border: 5px solid transparent; border-top-color: #444; }
.sf-hero-slot:hover .sf-hero-tooltip { display: block; }

/* ── Soul Forge Redesign ── */
.sfn-hdr { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; background:linear-gradient(135deg, rgba(20,15,40,0.95), rgba(15,10,30,0.95)); border-bottom:1px solid rgba(255,215,0,0.15); }
.sfn-hdr-left { display:flex; align-items:center; gap:8px; }
.sfn-hdr-icon { width:24px; height:24px; object-fit:contain; }
.sfn-hdr-title { font-size:14px; font-weight:900; color:#FFD700; }
.sfn-hdr-cur { display:flex; gap:8px; font-size:10px; font-weight:600; }
.sfn-hdr-cur span { display:flex; align-items:center; gap:3px; }
.sfn-cur-ico { width:12px; height:12px; vertical-align:middle; }
.sfn-eq { display:flex; justify-content:center; gap:5px; padding:10px 14px; background:rgba(0,0,0,0.5); border-bottom:1px solid rgba(255,255,255,0.06); }
.sfn-sl { width:48px; height:48px; border-radius:10px; position:relative; background:rgba(255,255,255,0.03); border:2px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.sfn-sl:hover { border-color:rgba(255,215,0,0.3); }
.sfn-sl.occ { border-color:var(--gc); box-shadow:0 0 10px color-mix(in srgb, var(--gc) 25%, transparent); }
.sfn-sl.locked { opacity:0.3; border-style:dashed; cursor:pointer; }
.sfn-sl-lv { position:absolute; bottom:-2px; right:-2px; background:#1a1a2e; color:var(--gc); font-size:8px; font-weight:800; padding:1px 3px; border-radius:3px; border:1px solid var(--gc); }
.sfn-sl-empty { color:#333; font-size:18px; }
.sfn-tabs { display:flex; border-bottom:2px solid rgba(255,215,0,0.15); background:rgba(0,0,0,0.5); gap:2px; padding:4px 4px 0; }
.sfn-tab { flex:1; padding:10px 4px; text-align:center; font-size:11px; font-weight:800; color:#777; cursor:pointer; transition:all 0.2s; position:relative; text-transform:uppercase; letter-spacing:0.5px; border:none; background:rgba(255,255,255,0.04); border-radius:8px 8px 0 0; }
.sfn-tab:hover { color:#ccc; background:rgba(255,255,255,0.08); }
.sfn-tab.active { color:#FFD700; background:rgba(255,215,0,0.12); border:1px solid rgba(255,215,0,0.2); border-bottom:none; }
.sfn-tab.active::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px; background:#0e0e1a; }
.sfn-tab-badge { display:inline-block; min-width:13px; height:13px; line-height:13px; background:rgba(255,255,255,0.1); color:#aaa; font-size:8px; font-weight:700; border-radius:7px; padding:0 3px; }
.sfn-content { padding:10px 12px 14px; background:rgba(10,8,20,0.85); }
.sfn-filters { display:flex; gap:4px; margin-bottom:8px; flex-wrap:wrap; align-items:center; }
.sfn-filter { padding:4px 8px; border-radius:6px; font-size:9px; font-weight:700; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:#666; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; gap:3px; }
.sfn-filter:hover { color:#aaa; }
.sfn-filter.active { color:var(--fc, #FFD700); border-color:color-mix(in srgb, var(--fc, #FFD700) 30%, transparent); background:color-mix(in srgb, var(--fc, #FFD700) 8%, transparent); }
.sfn-sort { margin-left:auto; padding:4px 8px; border-radius:6px; font-size:9px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.03); color:#888; cursor:pointer; }
.sfn-inv-info { font-size:10px; color:#555; font-weight:600; margin-bottom:6px; display:flex; gap:8px; align-items:center; }

/* ═══════════════════════════════════════════════════════════
   Gem Forge — Two-pane split layout (My Gems tab)
   Left: scrollable grid of gem mini-tiles.
   Right: detail panel with actions.
   ═══════════════════════════════════════════════════════════ */
.sfn-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
}
@media (max-width: 760px) {
  .sfn-split { grid-template-columns: 1fr; }
}
.sfn-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
  padding: 10px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(199,122,252,0.18);
  border-radius: 10px;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(199,122,252,0.3) transparent;
}
.sfn-split-grid::-webkit-scrollbar { width: 6px; }
.sfn-split-grid::-webkit-scrollbar-thumb { background: rgba(199,122,252,0.3); border-radius: 3px; }
.sfn-split-mini {
  aspect-ratio: 1;
  background: linear-gradient(180deg, rgba(30,22,50,0.5), rgba(15,10,28,0.75));
  border: 1.5px solid rgba(199,122,252,0.3);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
}
.sfn-split-mini:hover { border-color: var(--gold, #ffd44d); box-shadow: 0 0 10px rgba(255,215,0,0.3); transform: translateY(-1px); }
.sfn-split-mini.selected {
  border-color: #ffd44d;
  background: linear-gradient(180deg, rgba(80,55,20,0.8), rgba(40,25,10,0.9));
  box-shadow: 0 0 14px rgba(255,215,0,0.55), inset 0 0 10px rgba(255,215,140,0.15);
}
.sfn-split-mini .sfn-split-lv {
  font-family: 'Cinzel', serif;
  font-size: 9px; font-weight: 900;
  color: #ffd890;
  letter-spacing: 0.5px;
  margin-top: 2px;
  line-height: 1;
}
.sfn-split-mini.t-ruby { border-color: rgba(255,71,87,0.55); }
.sfn-split-mini.t-sapphire { border-color: rgba(79,172,254,0.55); }
.sfn-split-mini.t-emerald { border-color: rgba(94,216,122,0.55); }
.sfn-split-mini.t-topaz { border-color: rgba(255,179,64,0.55); }
.sfn-split-mini.t-amethyst { border-color: rgba(191,95,255,0.55); }
.sfn-split-mini.t-diamond { border-color: rgba(232,244,255,0.55); }
.sfn-split-mini.equipped {
  box-shadow: 0 0 8px rgba(46,213,115,0.4);
}
.sfn-split-mini .sfn-split-eq-dot {
  position: absolute;
  top: 3px; right: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2ED573;
  box-shadow: 0 0 6px rgba(46,213,115,0.9);
}
.sfn-split-mini .sfn-split-corr-icon {
  position: absolute;
  top: 2px; left: 3px;
  color: #ff88ff;
  font-size: 11px;
  text-shadow: 0 0 4px rgba(255,136,255,0.7);
}
.sfn-split-mini.corrupted {
  background: linear-gradient(180deg, rgba(60,15,60,0.6), rgba(30,8,40,0.85));
  border-color: rgba(255,68,255,0.55);
}

/* Fuseable — 2+ duplicates of same type+level available. Subtle green
   pulsing glow + a small lightning badge in the bottom-right corner. */
.sfn-split-mini.fuseable {
  box-shadow: 0 0 8px rgba(94,216,122,0.35), inset 0 0 8px rgba(94,216,122,0.12);
  animation: sfFusePulse 2.4s ease-in-out infinite;
}
.sfn-split-mini.fuseable::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1.5px dashed rgba(94,216,122,0.55);
  pointer-events: none;
}
.sfn-split-mini.fuseable.selected {
  box-shadow: 0 0 14px rgba(255,215,0,0.6), 0 0 8px rgba(94,216,122,0.45), inset 0 0 10px rgba(255,215,140,0.15);
}
@keyframes sfFusePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(94,216,122,0.3), inset 0 0 6px rgba(94,216,122,0.08); }
  50%      { box-shadow: 0 0 14px rgba(94,216,122,0.7), inset 0 0 10px rgba(94,216,122,0.2); }
}
.sfn-split-fuse-badge {
  position: absolute;
  bottom: 2px; right: 3px;
  font-size: 10px;
  line-height: 1;
  color: #5ED87A;
  text-shadow: 0 0 4px rgba(94,216,122,0.8), 0 0 1px rgba(0,0,0,1);
  z-index: 2;
  pointer-events: none;
}

/* Right pane — detail */
.sfn-split-detail {
  background: linear-gradient(180deg, rgba(30,22,50,0.7), rgba(15,10,28,0.85));
  border: 1.5px solid rgba(255,215,0,0.35);
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 300px;
}
.sfn-split-empty {
  text-align: center;
  color: #8a7ca8;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  padding: 60px 10px;
  letter-spacing: 1px;
}
.sfn-split-icon {
  width: 72px; height: 72px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
.sfn-split-name {
  font-family: 'Cinzel', serif;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.2;
}
.sfn-split-name-lv {
  opacity: 0.75;
  font-size: 13px;
  font-weight: 700;
}
.sfn-split-corr-tag {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #ff88ff;
  text-shadow: 0 0 6px rgba(255,136,255,0.5);
}
.sfn-split-rows {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(199,122,252,0.15);
  border-bottom: 1px solid rgba(199,122,252,0.15);
}
.sfn-split-row {
  display: flex; justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
}
.sfn-split-row span:first-child { color: #8a7ca8; font-weight: 600; }
.sfn-split-row span:last-child { color: #e9e4f5; font-weight: 700; text-align: right; }
.sfn-split-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}
.sfn-split-btn {
  padding: 10px 6px;
  border: 1px solid rgba(199,122,252,0.35);
  background: rgba(138,79,207,0.12);
  color: #e9d8ff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 7px;
  cursor: pointer;
  transition: all .15s;
}
.sfn-split-btn:hover:not(:disabled) { transform: translateY(-1px); border-color: rgba(199,122,252,0.7); }
.sfn-split-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sfn-split-btn.equip {
  background: linear-gradient(135deg, rgba(46,213,115,0.22), rgba(20,100,50,0.15));
  color: #5ED87A;
  border-color: rgba(94,216,122,0.5);
}
.sfn-split-btn.upgrade {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(200,150,0,0.12));
  color: #ffd44d;
  border-color: rgba(255,215,0,0.5);
}
.sfn-split-btn.corrupt {
  background: rgba(255,68,255,0.12);
  color: #ff88ff;
  border-color: rgba(255,68,255,0.4);
}
.sfn-split-btn.purify {
  background: linear-gradient(135deg, rgba(255,215,140,0.18), rgba(180,130,40,0.12));
  color: #ffd890;
  border-color: rgba(255,215,140,0.5);
}
.sfn-split-btn.salvage {
  background: rgba(100,100,100,0.14);
  color: #b0a3cc;
  border-color: rgba(150,150,160,0.3);
}
.sfn-group { margin-bottom:2px; }
.sfn-grp-hdr { display:flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:8px; border:1px solid transparent; cursor:pointer; transition:all 0.15s; }
.sfn-grp-hdr:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.05); }
.sfn-grp-hdr.expanded { border-color:rgba(255,215,0,0.15); background:rgba(255,215,0,0.03); border-radius:8px 8px 0 0; }
.sfn-grp-gem { flex-shrink:0; }
.sfn-grp-info { flex:1; min-width:0; }
.sfn-grp-name { font-size:12px; font-weight:700; }
.sfn-grp-lv { color:#888; font-weight:400; }
.sfn-grp-sub { font-size:9px; color:#666; margin-top:1px; }
.sfn-grp-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.sfn-grp-eq { width:6px; height:6px; border-radius:50%; background:#2ED573; box-shadow:0 0 6px rgba(46,213,115,0.5); }
.sfn-grp-corr { font-size:10px; color:#ff44ff; }
.sfn-grp-upg { font-size:9px; font-weight:700; color:#2ED573; background:rgba(46,213,115,0.08); border:1px solid rgba(46,213,115,0.2); padding:3px 8px; border-radius:5px; cursor:pointer; }
.sfn-grp-upg:hover { background:rgba(46,213,115,0.15); }
.sfn-grp-count { font-size:10px; font-weight:800; color:#888; background:rgba(255,255,255,0.06); padding:2px 6px; border-radius:4px; }
.sfn-grp-arrow { color:#444; font-size:10px; transition:transform 0.2s; }
.sfn-grp-hdr.expanded .sfn-grp-arrow { transform:rotate(90deg); }
.sfn-grp-expand { border:1px solid rgba(255,215,0,0.1); border-top:none; border-radius:0 0 8px 8px; background:rgba(0,0,0,0.15); padding:4px 6px; }
.sfn-gem-item { display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; cursor:pointer; transition:all 0.15s; }
.sfn-gem-item:hover { background:rgba(255,255,255,0.04); }
.sfn-gem-item.selected { background:rgba(255,215,0,0.06); outline:1px solid rgba(255,215,0,0.2); }
.sfn-gem-ico { flex-shrink:0; }
.sfn-gem-info { flex:1; min-width:0; }
.sfn-gem-name { font-size:11px; font-weight:600; }
.sfn-gem-acts { display:flex; gap:5px; }
.sfn-gem-btn { padding:6px 10px; min-width:30px; min-height:28px; border-radius:6px; font-size:12px; line-height:1; font-weight:700; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:#aaa; cursor:pointer; transition:all 0.1s; display:inline-flex; align-items:center; justify-content:center; }
.sfn-gem-btn:hover { background:rgba(255,255,255,0.08); color:#fff; }
.sfn-gem-btn.equip { color:#2ED573; border-color:rgba(46,213,115,0.2); }
.sfn-gem-btn.corrupt { color:#cc66ff; border-color:rgba(170,0,255,0.2); }
.sfn-gem-btn.purify { color:#88bbff; border-color:rgba(68,136,255,0.2); }
.sfn-gem-btn.salvage { color:#ff6666; border-color:rgba(255,68,68,0.2); }
.sfn-gem-btn:disabled { opacity:0.3; cursor:not-allowed; }
@media (max-width:768px) {
  .sfn-gem-acts { gap:6px; }
  .sfn-gem-btn { padding:8px 12px; min-width:40px; min-height:40px; font-size:15px; border-radius:8px; }
  .sfn-gem-item { padding:8px 8px; gap:8px; }
}
.sfn-corr-tag { font-size:8px; color:#ff44ff; font-weight:700; background:rgba(170,0,255,0.1); padding:1px 4px; border-radius:3px; }
.sfn-mass-btn { width:100%; padding:6px; font-size:10px; font-weight:700; border:1px solid rgba(255,68,68,0.15); background:rgba(255,68,68,0.06); color:#ff6666; border-radius:6px; cursor:pointer; }
.sfn-mass-list { display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.sfn-mass-item { display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; cursor:pointer; font-size:11px; }
.sfn-mass-item input { width:16px; height:16px; accent-color:#ff4444; cursor:pointer; }
.sfn-mass-bar { display:flex; align-items:center; justify-content:space-between; padding:8px 10px; margin-top:6px; background:rgba(255,68,68,0.06); border:1px solid rgba(255,68,68,0.15); border-radius:8px; }
.sfn-mass-info { font-size:11px; color:#ff8888; font-weight:700; }
.sfn-upg-visual { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 0; margin-bottom:8px; }
.sfn-upg-slot { width:56px; height:56px; border-radius:10px; border:2px dashed rgba(255,140,0,0.25); background:rgba(255,140,0,0.04); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sfn-upg-slot.filled { border-style:solid; border-color:var(--gc); }
.sfn-upg-slot-lbl { font-size:8px; margin-top:2px; }
.sfn-upg-plus { font-size:20px; color:#FF8C00; font-weight:900; }
.sfn-upg-arrow { font-size:20px; color:#FFD700; }
.sfn-upg-result { width:56px; height:56px; border-radius:10px; border:2px solid rgba(46,213,115,0.25); background:rgba(46,213,115,0.04); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sfn-upg-result-lv { font-size:9px; color:#2ED573; font-weight:800; margin-top:2px; }
.sfn-upg-stats { display:flex; justify-content:center; gap:12px; font-size:11px; margin:6px 0 8px; }
.sfn-scroll-toggles { display:flex; gap:6px; justify-content:center; margin-bottom:10px; }
.sfn-scroll-toggle { font-size:10px; display:flex; align-items:center; gap:4px; cursor:pointer; padding:4px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.03); }
.sfn-scroll-toggle.minor { color:#4488ff; border-color:rgba(68,136,255,0.2); background:rgba(68,136,255,0.05); }
.sfn-scroll-toggle.blessed { color:#ffcc00; border-color:rgba(255,204,0,0.2); background:rgba(255,204,0,0.05); }
.sfn-scroll-toggle.active { box-shadow:0 0 8px rgba(255,215,0,0.15); }
.sfn-upg-btn { display:block; width:100%; padding:10px; border-radius:10px; font-size:13px; font-weight:800; border:none; cursor:pointer; background:linear-gradient(135deg,#FF8C00,#FFD700); color:#1a0e00; box-shadow:0 4px 16px rgba(255,140,0,0.2); transition:all 0.15s; }
.sfn-upg-btn:hover { transform:translateY(-1px); }
.sfn-upg-btn:disabled { opacity:0.4; cursor:not-allowed; transform:none; }
.sfn-upg-list { margin-top:12px; border-top:1px solid rgba(255,255,255,0.04); padding-top:8px; }
.sfn-upg-list-title { font-size:10px; color:#666; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.sfn-upg-pair { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; transition:all 0.15s; }
.sfn-upg-pair:hover { background:rgba(255,140,0,0.06); }
.sfn-upg-pair.active { background:rgba(255,140,0,0.08); outline:1px solid rgba(255,140,0,0.2); }
.sfn-upg-pair-gems { display:flex; align-items:center; gap:2px; }
.sfn-upg-pair-info { flex:1; font-size:11px; font-weight:600; }
.sfn-upg-pair-chance { font-size:10px; font-weight:700; }
.sfn-dust-section { margin-top:12px; padding:10px; background:linear-gradient(135deg, rgba(170,68,255,0.06), rgba(170,68,255,0.02)); border:1px solid rgba(170,68,255,0.12); border-radius:10px; }
.sfn-dust-title { font-size:11px; color:#cc88ff; font-weight:700; margin-bottom:6px; text-align:center; }
.sfn-dust-opts { display:flex; gap:6px; }
.sfn-dust-opt { flex:1; padding:10px; text-align:center; background:rgba(0,0,0,0.2); border:1px solid rgba(170,68,255,0.1); border-radius:8px; cursor:pointer; transition:all 0.15s; }
.sfn-dust-opt:hover { border-color:rgba(170,68,255,0.3); }
.sfn-dust-opt-name { font-size:11px; font-weight:700; color:#cc88ff; }
.sfn-dust-opt-desc { font-size:9px; color:#666; margin-top:2px; }
.sfn-dust-opt-rate { font-size:10px; font-weight:700; margin-top:4px; }

/* Upgrade result overlay */
.sfn-result-overlay {
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(4px);
  animation: sfnOverlayIn 0.3s ease-out;
}
@keyframes sfnOverlayIn { from { opacity:0; } to { opacity:1; } }
.sfn-result-card {
  text-align:center; padding:28px 40px; border-radius:16px;
  border:2px solid; background:rgba(0,0,0,0.8);
  animation: sfnCardIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
  max-width:320px; width:85%;
}
@keyframes sfnCardIn { from { opacity:0; transform:scale(0.5) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
.sfn-result-icon { font-size:56px; margin-bottom:10px; animation: sfnIconBounce 0.6s ease-out 0.2s both; }
@keyframes sfnIconBounce { 0% { transform:scale(0); } 50% { transform:scale(1.3); } 100% { transform:scale(1); } }
.sfn-result-title { font-size:22px; font-weight:900; letter-spacing:2px; margin-bottom:6px; text-shadow:0 0 20px currentColor; }
.sfn-result-msg { font-size:13px; font-weight:600; opacity:0.85; line-height:1.4; }

/* ══ Veilstone Pass ══ */
.vp-banner { position: relative; padding: 20px; border-radius: 16px; background: linear-gradient(135deg, #1a0a2e, #0d0620); background-image: url('../img/pass/pass-bg.jpg'); background-size: cover; background-position: center; border: 1px solid rgba(191,95,255,0.15); overflow: hidden; margin-bottom: 12px; }
.vp-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,6,32,0.7), rgba(13,6,32,0.9)); pointer-events: none; }
.vp-banner-glow { position: absolute; top: -40%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(191,95,255,0.12), transparent 70%); pointer-events: none; }
.vp-banner-content { position: relative; z-index: 2; }
.vp-banner-left { display: flex; align-items: center; gap: 14px; }
.vp-banner-icon { width: 48px; height: 48px; filter: drop-shadow(0 4px 16px rgba(191,95,255,0.5)); animation: vpFloat 3s ease-in-out infinite; }
@keyframes vpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vp-banner-title { color: #BF5FFF; font-size: 22px; font-weight: 900; font-family: Cinzel, serif; letter-spacing: 3px; text-shadow: 0 0 20px rgba(191,95,255,0.3); }
.vp-banner-season { color: #888; font-size: 12px; margin-top: 2px; }
.vp-banner-right { position: absolute; top: 20px; right: 20px; }
.vp-timer { background: rgba(191,95,255,0.1); border: 1px solid rgba(191,95,255,0.2); border-radius: 8px; padding: 6px 12px; color: #BF5FFF; font-size: 11px; font-weight: 700; }
.vp-timer.vp-timer-ended { background: rgba(255,87,87,0.1); border-color: rgba(255,87,87,0.35); color: #ff8b8b; }
.vp-season-ended-banner {
  background: linear-gradient(135deg, rgba(255,87,87,0.12), rgba(255,87,87,0.04));
  border: 1px solid rgba(255,87,87,0.30);
  color: #ffb8b8;
  letter-spacing: 0.5px;
}
/* Level progress bar */
.vp-prog { position: relative; z-index: 2; margin-top: 20px; }
.vp-prog-row { display: flex; align-items: center; gap: 14px; }
.vp-prog-lvl { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.vp-prog-lvl-num { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #BF5FFF, #7B1FA2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 900; font-family: Cinzel, serif; box-shadow: 0 0 24px rgba(191,95,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.15); }
.vp-prog-lvl-label { color: #BF5FFF; font-size: 8px; font-weight: 800; letter-spacing: 2px; margin-top: 3px; }
.vp-prog-next .vp-prog-lvl-num { background: rgba(255,255,255,0.04); color: #555; box-shadow: none; border: 2px dashed rgba(255,255,255,0.12); font-size: 16px; width: 42px; height: 42px; }
.vp-prog-bar-wrap { flex: 1; min-width: 0; }
.vp-prog-bar { height: 22px; background: rgba(255,255,255,0.06); border-radius: 11px; overflow: hidden; position: relative; border: 1px solid rgba(255,255,255,0.06); }
.vp-prog-fill { height: 100%; background: linear-gradient(90deg, #7B1FA2, #BF5FFF, #D580FF); border-radius: 11px; transition: width 0.6s ease; position: relative; min-width: 2px; }
.vp-prog-shine { position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent); border-radius: 11px 11px 0 0; }
.vp-prog-nums { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; color: #888; }
.vp-prog-nums span:first-child { color: #ccc; font-weight: 700; }
.vp-prog-miles { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 4px; }
.vp-prog-mile { font-size: 9px; font-weight: 800; color: #333; text-align: center; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
.vp-prog-mile.vp-mile-done { color: #BF5FFF; background: rgba(191,95,255,0.1); border-color: rgba(191,95,255,0.3); box-shadow: 0 0 6px rgba(191,95,255,0.2); }
@media (max-width: 600px) {
  .vp-prog-lvl-num { width: 42px; height: 42px; font-size: 16px; }
  .vp-prog-next .vp-prog-lvl-num { width: 34px; height: 34px; font-size: 13px; }
  .vp-prog-bar { height: 18px; }
  .vp-prog-nums { font-size: 10px; }
  .vp-prog-mile { width: 20px; height: 20px; line-height: 20px; font-size: 7px; }
  .vp-prog-row { gap: 8px; }
}
.vp-premium-cta { position: relative; margin: 0 0 16px; padding: 3px; border-radius: 16px; background: linear-gradient(135deg, #9C27B0, #BF5FFF, #FFD700, #BF5FFF, #9C27B0); background-size: 300% 300%; animation: vpCtaShine 4s ease infinite; overflow: hidden; }
@keyframes vpCtaShine { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.vp-premium-cta-shine { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,0.05) 10%, transparent 20%); animation: vpShineRotate 6s linear infinite; pointer-events: none; }
@keyframes vpShineRotate { 100% { transform: rotate(360deg); } }
/* Mobile: kill the rotating conic gradient + the 300%-bg shift. Both force
   full repaint every frame, which causes profile / war-chest animations
   elsewhere in the app to hitch while VP is even in the background. */
html.gv-port-mobile .vp-premium-cta-shine,
html.gv-land-mobile .vp-premium-cta-shine { display: none; }
html.gv-port-mobile .vp-premium-cta,
html.gv-land-mobile .vp-premium-cta { animation: none; background-size: 100% 100%; }
.vp-premium-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #1a0a2e, #130828); border-radius: 13px; z-index: 1; }
.vp-premium-cta-left { flex: 1; }
.vp-premium-cta-title { font-size: 15px; font-weight: 900; color: #fff; font-family: Cinzel, serif; letter-spacing: 1px; }
.vp-premium-cta-sub { font-size: 11px; color: #aaa; margin-top: 3px; }
.vp-buy-btn2 { display: flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, #9C27B0, #BF5FFF); border: none; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 20px rgba(156,39,176,0.4); white-space: nowrap; transition: all 0.2s; }
.vp-buy-btn2:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(156,39,176,0.5); }
.vp-buy-btn2 span { font-family: Cinzel, serif; }
.vp-premium-active { text-align: center; padding: 10px; color: #BF5FFF; font-size: 13px; font-weight: 700; background: rgba(191,95,255,0.05); border: 1px solid rgba(191,95,255,0.12); border-radius: 10px; margin-bottom: 12px; }
.vp-premium-active span { font-size: 16px; }
.vp-row-start { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; flex-shrink: 0; position: sticky; left: 0; z-index: 5; }
.vp-row-start-num { height: 28px; }
.vp-row-start-label { writing-mode: vertical-lr; text-orientation: mixed; font-size: 10px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; padding: 10px 4px; border-radius: 8px; min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.vp-rsl-free { color: #4CAF50; background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.15); }
.vp-rsl-prem { color: #BF5FFF; background: linear-gradient(180deg, rgba(191,95,255,0.12), rgba(156,39,176,0.06)); border: 1px solid rgba(191,95,255,0.2); box-shadow: 0 0 12px rgba(191,95,255,0.1); }
.vp-rsl-prem img { writing-mode: horizontal-tb; }
.vp-rew-ico { width: 14px; height: 14px; vertical-align: middle; }
.vp-track-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 0 16px; -webkit-overflow-scrolling: touch; }
.vp-track { display: flex; gap: 3px; padding: 0 12px; min-width: max-content; }
.vp-col { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 90px; flex-shrink: 0; position: relative; }
.vp-col-current .vp-num { background: linear-gradient(135deg, #BF5FFF, #9C27B0); color: #fff; box-shadow: 0 0 14px rgba(191,95,255,0.5), 0 0 4px rgba(191,95,255,0.3); animation: vpNumPulse 2s ease-in-out infinite; }
@keyframes vpNumPulse { 0%,100% { box-shadow: 0 0 10px rgba(191,95,255,0.4); } 50% { box-shadow: 0 0 18px rgba(191,95,255,0.6); } }
.vp-col-ms .vp-num { border-color: #FFD700; color: #FFD700; font-size: 11px; }
.vp-connector { position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: rgba(255,255,255,0.05); z-index: 0; border-radius: 1px; }
.vp-conn-done { background: linear-gradient(90deg, #BF5FFF, #9C27B0); }
.vp-num { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.08); background: rgba(13,11,26,0.9); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #444; transition: all 0.2s; }
.vp-num-done { border-color: #BF5FFF; color: #BF5FFF; background: rgba(191,95,255,0.12); }
.vp-num-cur { border-color: transparent; }
.vp-card {
  width: 82px; min-height: 74px; padding: 10px 6px; border-radius: 12px; text-align: center;
  position: relative; transition: all 0.25s ease; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  /* backdrop-filter removed — 50+ per-card blurs tanked mobile GPU and
     caused choppy animations on neighbouring pages (profile, war chests). */
}
.vp-card-free {
  border: 1px solid rgba(76,175,80,0.15);
  background: linear-gradient(160deg, rgba(76,175,80,0.06) 0%, rgba(76,175,80,0.01) 100%);
}
.vp-card-prem {
  border: 1px solid rgba(191,95,255,0.18);
  background: linear-gradient(160deg, rgba(191,95,255,0.06) 0%, rgba(156,39,176,0.02) 100%);
}
.vp-card.vp-avail { cursor: pointer; }
.vp-card-free.vp-avail {
  border-color: rgba(76,175,80,0.6);
  background: linear-gradient(160deg, rgba(76,175,80,0.12) 0%, rgba(76,175,80,0.04) 100%);
  box-shadow: 0 0 16px rgba(76,175,80,0.22), inset 0 1px 0 rgba(76,175,80,0.15);
  /* No infinite glow animation: 100 levels = up to 200 cards animating
     box-shadow at once, which thrashes paint on mobile. The brighter
     border + tinted background already mark "available" visually, and the
     "CLAIM" pill below the card has its own animation that's enough
     visual hook to draw the eye. */
}
.vp-card-prem.vp-avail {
  border-color: rgba(191,95,255,0.6);
  background: linear-gradient(160deg, rgba(191,95,255,0.12) 0%, rgba(191,95,255,0.04) 100%);
  box-shadow: 0 0 16px rgba(191,95,255,0.22), inset 0 1px 0 rgba(191,95,255,0.15);
}
.vp-card.vp-avail:hover { transform: translateY(-4px) scale(1.03); }
.vp-card.vp-claimed { opacity: 0.45; }
.vp-card:not(.vp-avail):not(.vp-claimed) { opacity: 0.25; }

/* ═══════════════════════════════════════════════════════════════
   Season 2 announcement popup (v23.0.864) — fires once per device
   per seasonId on first login after the new season ships.
   ═══════════════════════════════════════════════════════════════ */
.pass-announce-overlay {
  position: fixed; inset: 0;
  z-index: 9500;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: passAnnFadeIn 0.22s ease-out;
}
@keyframes passAnnFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pass-announce-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 26px 22px 20px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(105,212,255,0.15) 0%, transparent 70%),
    linear-gradient(180deg, #150e2e 0%, #08051a 100%);
  border: 1px solid rgba(168, 102, 255, 0.45);
  border-radius: 18px;
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.65),
    0 0 56px rgba(168, 102, 255, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
  animation: passAnnSlide 0.28s cubic-bezier(.2, .8, .2, 1);
}
@keyframes passAnnSlide {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pass-announce-x {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent;
  border: none;
  color: rgba(220, 220, 240, 0.55);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.pass-announce-x:hover { color: #fff; background: rgba(255,255,255,0.08); }
.pass-announce-icon {
  margin-bottom: 12px;
}
.pass-announce-icon img {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 14px rgba(168, 102, 255, 0.55));
}
.pass-announce-title {
  font-family: 'Cinzel', serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #69d4ff, #a866ff, #ffc857);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.pass-announce-sub {
  color: #ffd180;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.pass-announce-body {
  color: #cfc6e2;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.pass-announce-body b {
  color: #fff5c0;
  font-weight: 800;
}
.pass-announce-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pass-announce-btn {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.pass-announce-cta {
  background: linear-gradient(135deg, #a866ff 0%, #69d4ff 100%);
  color: #0c0820;
  box-shadow: 0 4px 16px rgba(168, 102, 255, 0.40);
}
.pass-announce-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(168, 102, 255, 0.55); }
.pass-announce-cta:active { transform: scale(0.98); }
.pass-announce-later {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(220, 220, 240, 0.7);
}
.pass-announce-later:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
@media (max-width: 600px) {
  .pass-announce-card { padding: 22px 18px 18px; }
  .pass-announce-title { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════
   Pass Modal (v23.0.862) — fixed-position overlay with its own
   scroll context. Page scroll is locked while open so the player
   can scroll the rewards rail without dragging the rest of the
   game with them.
   ═══════════════════════════════════════════════════════════════ */
body.vp-modal-open { overflow: hidden; }
/* Backdrop deliberately uses NO blur — backdrop-filter on a fullscreen
   surface paints every frame on a layer the size of the viewport, which
   dropped the modal to ~15fps on mid-range phones. Solid dim + the
   modal shell's own shadow gives the same visual separation cheaply. */
.vp-modal-backdrop {
  position: fixed; inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: vpModalFadeIn 0.18s ease-out;
}
@keyframes vpModalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.vp-modal-shell {
  position: relative;
  width: 100%;
  max-width: 760px;
  height: 100%;
  max-height: 92vh;
  background: linear-gradient(180deg, #0d0820 0%, #07041a 100%);
  border: 1px solid rgba(191, 95, 255, 0.30);
  border-radius: 18px;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.75),
    0 0 80px rgba(191, 95, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: vpModalSlideIn 0.22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes vpModalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vp-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #ddd;
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s, color 0.15s;
}
.vp-modal-close:hover {
  background: rgba(191, 95, 255, 0.25);
  color: #fff;
  transform: scale(1.06);
}
.vp-modal-close:active { transform: scale(0.95); }
.vp-modal-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}
.vp-modal-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 8, 32, 0.65) 0%, rgba(7, 4, 26, 0.92) 70%);
  z-index: 0;
  pointer-events: none;
}
.vp-modal-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Stop scroll-chaining so wheel/touch doesn't bubble to the page. */
  overscroll-behavior: contain;
  padding: 0;
}
.vp-modal-content {
  position: relative;
  z-index: 1;
  padding: 16px 18px 24px;
}
@media (max-width: 600px) {
  .vp-modal-backdrop { padding: 0; }
  .vp-modal-shell { max-height: 100vh; height: 100vh; border-radius: 0; border-left: none; border-right: none; }
  .vp-modal-content { padding: 14px 12px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   Vertical Rail Layout (v23.0.861) — replaces the horizontal
   scroller. Each row: free card · level badge on the spine ·
   premium card. The spine fills behind the badges with a
   gradient that brightens up to the player's current level.
   ═══════════════════════════════════════════════════════════════ */
.vp-vrail {
  margin: 12px auto 24px;
  max-width: 720px;
  position: relative;
}
.vp-vrail-head {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 12px;
  position: sticky;
  top: 0;
  z-index: 6;
  /* Solid-bottomed gradient instead of backdrop-filter — sticky elements
     with backdrop-filter recompute the blur every scroll frame, which
     compounds with content-visibility savings to keep the modal smooth. */
  background: linear-gradient(180deg, rgba(13,9,28,0.97) 0%, rgba(13,9,28,0.96) 70%, rgba(13,9,28,0.0) 100%);
}
.vp-vrail-head-free {
  text-align: center;
  color: #4CAF50;
  background: rgba(76,175,80,0.10);
  border: 1px solid rgba(76,175,80,0.25);
  border-radius: 999px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vp-vrail-head-prem {
  text-align: center;
  color: #BF5FFF;
  background: linear-gradient(135deg, rgba(191,95,255,0.18), rgba(156,39,176,0.08));
  border: 1px solid rgba(191,95,255,0.35);
  border-radius: 999px;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 0 14px rgba(191,95,255,0.18);
}
.vp-vrail-head-spine { /* placeholder column — empty under the spine */ }

.vp-vrail-track {
  position: relative;
  padding: 4px 0 24px;
}
.vp-vrail-spine {
  position: absolute;
  top: 8px; bottom: 8px;
  left: 50%;
  width: 3px;
  margin-left: -1.5px;
  background:
    repeating-linear-gradient(180deg, rgba(191,95,255,0.4) 0 6px, transparent 6px 12px);
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.vp-vrail[data-expired="1"] .vp-vrail-spine {
  background: repeating-linear-gradient(180deg, rgba(255,87,87,0.35) 0 6px, transparent 6px 12px);
}

.vp-vrow {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  position: relative;
  z-index: 1;
  /* content-visibility lets the browser skip layout/paint for rows that
     scroll out of view, cutting render cost from 100 rows to ~5-7 visible.
     Roughly halves frame time on mobile for the modal scroll. */
  content-visibility: auto;
  contain-intrinsic-size: 0 92px;
}
@media (max-width: 600px) {
  .vp-vrow { contain-intrinsic-size: 0 80px; }
}
.vp-vside {
  display: flex;
  align-items: center;
}
.vp-vside-left { justify-content: flex-end; }
.vp-vside-right { justify-content: flex-start; }
/* Cards stretch to fit the row inside the vertical layout — wider than
   the old 82px column allowance so reward labels don't truncate. */
.vp-vrow .vp-card {
  width: 100%;
  max-width: 240px;
  min-height: 78px;
}
/* Level badge on the spine — always visible above the rail line. */
.vp-vnum {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin: 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.10);
  background: radial-gradient(circle at 30% 30%, rgba(28,22,54,1) 0%, rgba(13,9,28,1) 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #555;
  font-family: 'Cinzel', serif;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.vp-vnum span { position: relative; z-index: 1; }
.vp-vnum-done {
  border-color: rgba(191,95,255,0.85);
  color: #fff;
  background: radial-gradient(circle at 30% 30%, rgba(191,95,255,0.85) 0%, rgba(120,55,180,0.95) 100%);
  box-shadow: 0 0 10px rgba(191,95,255,0.45), 0 2px 6px rgba(0,0,0,0.6);
}
.vp-vnum-cur {
  border-color: #fff;
  color: #fff;
  background: radial-gradient(circle at 30% 30%, #d896ff 0%, #BF5FFF 60%, #7837b4 100%);
  box-shadow: 0 0 18px rgba(191,95,255,0.7), 0 0 36px rgba(191,95,255,0.3);
  animation: vpVnumPulse 1.8s ease-in-out infinite;
  transform: scale(1.12);
}
@keyframes vpVnumPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(191,95,255,0.55), 0 0 28px rgba(191,95,255,0.25); }
  50%      { box-shadow: 0 0 22px rgba(191,95,255,0.8),  0 0 44px rgba(191,95,255,0.4); }
}
/* Milestone (every 5 levels) — gold ring + radial burst behind. */
.vp-vnum-ms {
  width: 48px; height: 48px;
  border-color: rgba(255,215,0,0.9);
  font-size: 13px;
  color: #FFD700;
  background: radial-gradient(circle at 30% 30%, rgba(60,38,12,1) 0%, rgba(28,18,8,1) 100%);
  box-shadow: 0 0 14px rgba(255,215,0,0.45), 0 4px 10px rgba(0,0,0,0.6);
}
.vp-vnum-ms.vp-vnum-done {
  background: radial-gradient(circle at 30% 30%, #ffd96b 0%, #c8932b 70%, #6e4a0f 100%);
  color: #1a1208;
  border-color: #fff5c0;
  box-shadow: 0 0 18px rgba(255,215,0,0.7), 0 0 36px rgba(255,180,0,0.3);
}
.vp-vnum-ms.vp-vnum-cur {
  background: radial-gradient(circle at 30% 30%, #fff2a8 0%, #ffd700 60%, #b07f00 100%);
  color: #1a1208;
  border-color: #fff;
}
.vp-vnum-burst {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.25) 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
  animation: vpVnumBurst 3s ease-in-out infinite;
}
@keyframes vpVnumBurst {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%      { transform: scale(1.18); opacity: 0.9; }
}
/* Reached-row marker: brighter spine segment between current row and the
   one above — cheap "you've earned this" feel without per-row backgrounds. */
.vp-vrow-reached + .vp-vrow-reached::before,
.vp-vrow-reached:first-child::before {
  /* (intentionally empty — gradient is on the spine itself, this hook is
     reserved for future per-row VFX) */
}

/* Mobile: collapse the inline grid further but keep the rail visible. */
@media (max-width: 600px) {
  .vp-vrail { margin: 8px 0 24px; }
  .vp-vrail-head { grid-template-columns: 1fr 48px 1fr; padding: 6px 4px 10px; }
  .vp-vrail-head-free, .vp-vrail-head-prem { font-size: 10px; letter-spacing: 1.2px; padding: 4px 0; }
  .vp-vrow { grid-template-columns: 1fr 48px 1fr; gap: 6px; margin: 6px 0; }
  .vp-vrow .vp-card { min-height: 70px; padding: 8px 4px; }
  .vp-vrow .vp-card-img { width: 26px; height: 26px; }
  .vp-vrow .vp-card-text { font-size: 8px; max-width: none; }
  .vp-vnum { width: 32px; height: 32px; font-size: 11px; }
  .vp-vnum-ms { width: 38px; height: 38px; font-size: 12px; }
}
.vp-card-locked { position: relative; }
.vp-card-lock-overlay { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; z-index: 2; background: rgba(0,0,0,0.6); border-radius: 5px; backdrop-filter: blur(2px); }
.vp-card-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); transition: transform 0.2s; }
.vp-card.vp-avail:hover .vp-card-img { transform: scale(1.1); }
.vp-card-text { font-size: 9px; color: #999; line-height: 1.3; word-break: break-word; max-width: 76px; font-weight: 500; }
.vp-check { color: #4CAF50; font-size: 14px; font-weight: 900; text-shadow: 0 0 6px rgba(76,175,80,0.4); }
.vp-card-claim {
  font-size: 8px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #4CAF50, #66BB6A);
  padding: 3px 10px; border-radius: 6px; margin-top: 2px;
  text-transform: uppercase; letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(76,175,80,0.35);
  /* Static glow — animation removed for the same reason as vp-avail. */
}
.vp-card-prem .vp-card-claim {
  background: linear-gradient(135deg, #9C27B0, #BF5FFF);
  box-shadow: 0 2px 8px rgba(191,95,255,0.35);
}
.vp-post50 { text-align: center; padding: 20px; margin-top: 8px; background: linear-gradient(135deg, rgba(255,215,0,0.04), rgba(255,107,53,0.04)); border: 1px solid rgba(255,215,0,0.12); border-radius: 14px; }
.vp-post50-header { color: #FFD700; font-size: 16px; font-weight: 900; font-family: Cinzel, serif; letter-spacing: 1px; margin-bottom: 8px; }
.vp-post50-desc { color: #999; font-size: 12px; line-height: 1.6; max-width: 500px; margin: 0 auto; }
.vp-post50-count { color: #888; font-size: 11px; margin-top: 10px; }
.vp-chest-open-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 28px; background: linear-gradient(135deg, #FF6B35, #FF8A65); border: none; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 20px rgba(255,107,53,0.3); transition: transform 0.2s; }
.vp-chest-open-btn:hover { transform: scale(1.03); }
.vp-chest-badge { background: #fff; color: #FF6B35; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 10px; }
.vp-xp-sources { padding: 16px; margin-top: 8px; background: rgba(191,95,255,0.03); border: 1px solid rgba(191,95,255,0.08); border-radius: 14px; }
.vp-xp-sources-title { color: #BF5FFF; font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 10px; letter-spacing: 0.5px; }
.vp-xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vp-xp-src { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(0,0,0,0.25); border-radius: 8px; border: 1px solid rgba(255,255,255,0.03); }
.vp-xp-src-icon { font-size: 14px; flex-shrink: 0; }
.vp-xp-src-name { flex: 1; color: #aaa; font-size: 11px; }
.vp-xp-src-val { color: #BF5FFF; font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.vp-xp-limit { color: #555; font-size: 8px; font-weight: 600; }
.vp-xp-min { display: block; color: #FF8C00; font-size: 8px; font-weight: 600; }
.vp-xp-cap { text-align: center; color: #666; font-size: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.04); }
/* Veilstone Pass frames — pure CSS, no images */
.gv-frame-veilstone_bronze {
  border: 2.5px solid #cd7f32 !important;
  box-shadow: 0 0 6px rgba(205,127,50,0.4), inset 0 0 4px rgba(205,127,50,0.15) !important;
  outline: 1.5px solid rgba(139,90,43,0.5);
  outline-offset: 1px;
}
.gv-frame-veilstone_silver {
  border: 2.5px solid #c0c0c0 !important;
  box-shadow: 0 0 8px rgba(192,192,192,0.5), inset 0 0 4px rgba(220,220,255,0.15) !important;
  outline: 1.5px solid rgba(160,160,180,0.5);
  outline-offset: 1px;
}
.gv-frame-veilstone_gold {
  border: 2.5px solid #FFD700 !important;
  box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,180,0,0.15), inset 0 0 6px rgba(255,215,0,0.15) !important;
  outline: 1.5px solid rgba(200,160,0,0.6);
  outline-offset: 1px;
  animation: vfGold 3s ease-in-out infinite;
}
@keyframes vfGold {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.5), 0 0 20px rgba(255,180,0,0.15); }
  50% { box-shadow: 0 0 14px rgba(255,215,0,0.7), 0 0 28px rgba(255,180,0,0.25); }
}
.gv-frame-veilstone_mythic {
  border: 2.5px solid #BF5FFF !important;
  box-shadow: 0 0 12px rgba(191,95,255,0.5), 0 0 24px rgba(140,40,220,0.2), inset 0 0 6px rgba(191,95,255,0.15) !important;
  outline: 1.5px solid rgba(160,60,255,0.5);
  outline-offset: 1px;
  animation: vfMythic 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   Season 2 — Tides of the Veil cosmetics (pure CSS, no images)
   v23.0.864
   ═══════════════════════════════════════════════════════════════ */

/* ── Frames (border + glow + outline; matches avatar sizes) ── */
.gv-frame-tides_bronze {
  border: 2.5px solid #d49860 !important;
  box-shadow:
    0 0 8px rgba(212, 152, 96, 0.55),
    inset 0 0 6px rgba(255, 220, 170, 0.20) !important;
  outline: 1.5px solid rgba(140, 90, 40, 0.55);
  outline-offset: 1px;
}
.gv-frame-tides_silver {
  border: 2.5px solid #b8d3e8 !important;
  box-shadow:
    0 0 10px rgba(186, 222, 242, 0.55),
    0 0 20px rgba(110, 170, 220, 0.22),
    inset 0 0 6px rgba(220, 240, 255, 0.22) !important;
  outline: 1.5px solid rgba(140, 180, 220, 0.55);
  outline-offset: 1px;
  animation: tfSilver 4.5s ease-in-out infinite;
}
@keyframes tfSilver {
  0%, 100% { box-shadow: 0 0 10px rgba(186,222,242,0.5),  0 0 20px rgba(110,170,220,0.18), inset 0 0 6px rgba(220,240,255,0.20); }
  50%      { box-shadow: 0 0 14px rgba(186,222,242,0.8),  0 0 28px rgba(110,170,220,0.35), inset 0 0 8px rgba(220,240,255,0.30); }
}
.gv-frame-tides_gold {
  border: 2.5px solid #ffc857 !important;
  box-shadow:
    0 0 10px rgba(255, 200, 87, 0.65),
    0 0 22px rgba(255, 130, 60, 0.28),
    inset 0 0 8px rgba(255, 230, 140, 0.25) !important;
  outline: 1.5px solid rgba(220, 140, 40, 0.65);
  outline-offset: 1px;
  animation: tfGold 3.5s ease-in-out infinite;
}
@keyframes tfGold {
  0%, 100% { box-shadow: 0 0 10px rgba(255,200,87,0.55), 0 0 22px rgba(255,130,60,0.25); }
  50%      { box-shadow: 0 0 16px rgba(255,200,87,0.85), 0 0 32px rgba(255,130,60,0.40); }
}
.gv-frame-tides_mythic {
  border: 2.5px solid #69d4ff !important;
  box-shadow:
    0 0 14px rgba(105, 212, 255, 0.65),
    0 0 28px rgba(168, 102, 255, 0.40),
    inset 0 0 10px rgba(190, 230, 255, 0.30) !important;
  outline: 2px solid rgba(168, 102, 255, 0.65);
  outline-offset: 1px;
  animation: tfMythic 2.6s ease-in-out infinite;
}
@keyframes tfMythic {
  0%, 100% {
    box-shadow:
      0 0 14px rgba(105,212,255,0.55),
      0 0 28px rgba(168,102,255,0.30),
      inset 0 0 8px rgba(190,230,255,0.25);
  }
  50% {
    box-shadow:
      0 0 22px rgba(105,212,255,0.95),
      0 0 44px rgba(168,102,255,0.55),
      inset 0 0 14px rgba(220,235,255,0.45);
  }
}

/* ── Backgrounds (radial / linear gradients behind avatar) ── */
.gv-bg-tides_calm {
  background:
    radial-gradient(ellipse 80% 90% at 50% 30%, rgba(174,216,232,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(54,128,168,0.65) 0%, transparent 70%),
    linear-gradient(180deg, #2a6e8c 0%, #1a4763 60%, #0d2738 100%) !important;
}
.gv-bg-tides_storm {
  background:
    radial-gradient(ellipse 60% 60% at 70% 30%, rgba(186,142,232,0.40) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 30% 80%, rgba(82,68,140,0.65) 0%, transparent 70%),
    linear-gradient(155deg, #3a2f5e 0%, #221a3d 50%, #110a26 100%) !important;
}
.gv-bg-tides_abyss {
  background:
    radial-gradient(circle at 50% 20%, rgba(40,90,180,0.55) 0%, transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(20,15,60,0.95) 0%, transparent 65%),
    linear-gradient(180deg, #0a1838 0%, #050b22 60%, #02040f 100%) !important;
}
.gv-bg-tides_eternal {
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(105,212,255,0.45) 0deg,
      rgba(168,102,255,0.45) 90deg,
      rgba(255,140,180,0.40) 180deg,
      rgba(255,200,87,0.40) 270deg,
      rgba(105,212,255,0.45) 360deg),
    radial-gradient(circle at 50% 50%, rgba(15,8,30,0) 35%, rgba(8,4,18,0.85) 75%) !important;
  background-blend-mode: overlay, normal !important;
}

/* ── Card preview swatches inside the pass modal ──
   The card icon slot is normally a 30×30 image. Frame previews show as a
   small circle styled with the same frame class so the player sees a
   true preview of what they'll equip. BG previews use a rounded square. */
.vp-frame-preview {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%, #3c2f6b 0%, #1a1233 100%) !important;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
.vp-bg-preview {
  width: 38px !important;
  height: 30px !important;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.12);
  display: inline-block;
  flex-shrink: 0;
  /* The class merged onto this element already contains the gradient
     stack; we just need a sized box for it. */
}
@keyframes vfMythic {
  0%, 100% { border-color: #BF5FFF; box-shadow: 0 0 12px rgba(191,95,255,0.5), 0 0 24px rgba(140,40,220,0.2); }
  50% { border-color: #e080ff; box-shadow: 0 0 18px rgba(224,128,255,0.7), 0 0 36px rgba(191,95,255,0.3); }
}
@keyframes vpMythicGlow { 0%,100% { box-shadow: 0 0 14px rgba(191,95,255,0.5); } 50% { box-shadow: 0 0 20px rgba(191,95,255,0.7), 0 0 40px rgba(191,95,255,0.3); } }
/* Frame overlay image — sits on top of avatar */
.avp-frame-demo { position: relative; }
.avp-frame-overlay { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); object-fit: cover; pointer-events: none; z-index: 2; }
.gv-bg-veilstone_mist { background-image: url('../img/pass/bg-mist.jpg') !important; background-size: cover !important; }
.gv-bg-veilstone_flame { background-image: url('../img/pass/bg-flame.jpg') !important; background-size: cover !important; }
.gv-bg-veilstone_nexus { background-image: url('../img/pass/bg-nexus.jpg') !important; background-size: cover !important; }

@media (max-width: 600px) {
  .vp-banner-title { font-size: 16px; letter-spacing: 1px; }
  .vp-banner-icon { width: 36px; height: 36px; }
  .vp-banner-right { top: 14px; right: 14px; }
  .vp-lvl-circle { width: 36px; height: 36px; font-size: 13px; }
  .vp-col { width: 76px; }
  .vp-card { width: 68px; min-height: 62px; padding: 8px 4px; }
  .vp-card-img { width: 24px; height: 24px; }
  .vp-card-text { font-size: 8px; }
  .vp-xp-grid { grid-template-columns: repeat(2, 1fr); }
  .vp-premium-cta { flex-direction: column; text-align: center; }
}

/* ── Expedition System ─────────────────────────────────────── */
/* Background covers the ENTIRE panel including desktop sidebar padding */
#panelExpedition {
  padding: 0 !important;
  position: relative;
  background-color: #0a0814;
  overflow: hidden;
}
/* ::before has FIXED height (100vh) so cover-scaling doesn't change when
   content height toggles (e.g. How Expedition Works accordion) — prevents zoom flicker */
#panelExpedition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  background-image: url('../img/expedition/veil.webp');
  background-size: cover;
  background-position: center top;
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
/* Overlay stretches with content but uses gradient (no cover rescale issue) */
#panelExpedition::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 6, 14, 0.35) 0%, rgba(8, 6, 14, 0.55) 40%, rgba(8, 6, 14, 0.82) 100%);
  z-index: 1;
  pointer-events: none;
}
#panelExpedition > * {
  position: relative;
  z-index: 2;
}

/* Tab badge — ready claims (gold pulsing), active timer (purple), free slots (green) */
.exp-tab-badge {
  position: absolute;
  top: -2px;
  right: 0;
  background: #f44336;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 18px;
  height: 16px;
  line-height: 16px;
  border-radius: 9px;
  text-align: center;
  padding: 0 5px;
  z-index: 2;
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.exp-tab-badge.exp-badge-free {
  background: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}
.exp-tab-badge.exp-badge-ready {
  background: linear-gradient(135deg, #FFD700, #ffaa00);
  color: #1a1410;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
  animation: exp-badge-pulse 1.6s ease-in-out infinite;
}
.exp-tab-badge.exp-badge-timer {
  background: linear-gradient(135deg, #9b4dff, #6a2fcc);
  color: #fff;
  box-shadow: 0 0 8px rgba(155, 77, 255, 0.55);
  font-size: 8px;
  font-weight: 900;
}
@keyframes exp-badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

/* Fishing energy badge on the nav tab — shows live energy + countdown */
.fishing-tab-badge {
  position: absolute;
  top: -3px;
  right: -2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  background: linear-gradient(135deg, #4ab8c8, #2c7a87);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  min-width: 30px;
  border-radius: 8px;
  padding: 2px 5px 3px;
  z-index: 2;
  box-shadow: 0 0 8px rgba(74, 184, 200, 0.55);
  letter-spacing: 0.3px;
  pointer-events: none;
}
.fishing-tab-badge .ftb-val {
  font-size: 9px;
  font-weight: 900;
}
.fishing-tab-badge .ftb-timer {
  font-size: 8px;
  font-weight: 700;
  opacity: 0.85;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.fishing-tab-badge.full {
  background: linear-gradient(135deg, #FFD700, #c8a200);
  color: #1a1410;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

/* Chat item-link chip — compact card shown in chat for shared items */
.chat-item-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 6px 10px 6px 6px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
  max-width: 320px;
}
.chat-item-chip:hover {
  transform: translateX(2px);
  background: rgba(255,255,255,0.07);
}
.chat-item-chip-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 5px;
  background: rgba(0,0,0,0.3);
  padding: 2px;
}
.chat-item-chip-body {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.chat-item-chip-name {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-item-chip-sub {
  font-size: 10px;
  color: #888;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pets tab — egg incubation timer badge */
.pets-tab-egg-badge {
  position: absolute;
  top: -3px;
  right: -2px;
  background: linear-gradient(135deg, #c89a4e, #7a5520);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  min-width: 28px;
  text-align: center;
  border-radius: 8px;
  padding: 2px 5px 3px;
  z-index: 2;
  box-shadow: 0 0 8px rgba(200, 154, 78, 0.55);
  letter-spacing: 0.3px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pets-tab-egg-badge.ready {
  background: linear-gradient(135deg, #FFD700, #c8a200);
  color: #1a1410;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.75);
  animation: petsEggReadyPulse 1.1s ease-in-out infinite;
  min-width: 16px;
  padding: 2px 6px 3px;
}
@keyframes petsEggReadyPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Hidden preload — keeps mission backgrounds in browser cache */
.exp-preload {
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}
.exp-preload > div {
  width: 1px;
  height: 1px;
  background-size: cover;
}
@media (min-width: 960px) {
  #mainContent > #panelExpedition {
    padding-left: 0 !important;
  }
}

.exp-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 14px 90px 14px;
  box-sizing: border-box;
}
@media (min-width: 960px) {
  .exp-content {
    padding-left: 70px;  /* keep desktop sidebar offset for content only, not bg */
    padding-right: 14px;
    max-width: 820px;
  }
}

/* Slot grid: 1 col mobile, 2 cols ≥640px */
.exp-slots-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .exp-slots-grid { grid-template-columns: 1fr 1fr; }
}

/* Picker layout: mobile = stacked, desktop = 4 standard left + 2 premium right */
.exp-picker-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.exp-picker-standard-col,
.exp-picker-premium-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exp-picker-standard-col { display: grid; grid-template-columns: 1fr; gap: 10px; }
.exp-picker-premium-col { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 700px) {
  .exp-picker-row {
    flex-direction: row;
    gap: 18px;
    align-items: stretch;
  }
  .exp-picker-standard-col {
    flex: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .exp-picker-premium-col {
    flex: 1;
    min-width: 240px;
    padding-left: 18px;
    border-left: 1px solid rgba(255, 215, 0, 0.18);
  }
  /* Wider modal to fit 3-col layout */
  #expPickerModal .exp-modal {
    max-width: 920px !important;
  }
}

@keyframes exp-glow {
  0%, 100% {
    box-shadow: 0 0 14px rgba(255, 215, 0, 0.5), 0 0 28px rgba(255, 170, 0, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 22px rgba(255, 215, 0, 0.9), 0 0 44px rgba(255, 170, 0, 0.55);
    transform: scale(1.015);
  }
}
.exp-slot {
  transition: transform 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
.exp-slot:hover {
  border-color: rgba(255, 215, 0, 0.25) !important;
}
.btn-exp-start:hover,
.btn-exp-claim:hover {
  filter: brightness(1.1);
}
.btn-exp-cancel:hover {
  background: rgba(255, 80, 80, 0.08) !important;
  border-color: rgba(255, 80, 80, 0.5) !important;
}
.exp-mastery-card {
  transition: border-color 0.18s ease;
}
.exp-mastery-card:hover {
  border-color: rgba(255, 215, 0, 0.45) !important;
}
.exp-mission-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.exp-mission-card:not([style*="not-allowed"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6);
}
.exp-modal-backdrop {
  animation: exp-fade-in 0.16s ease-out;
  will-change: opacity;
  /* NO backdrop-filter — kills perf when underlying page has gradients/filters */
}
.exp-modal-backdrop .exp-modal {
  animation: exp-modal-in 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.05);
  will-change: transform, opacity;
}
@keyframes exp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes exp-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .exp-content {
    padding: 0 10px 90px 10px !important;
  }
  .exp-modal {
    padding: 14px !important;
  }
}

/* Veil Codex — inventory indicator (item NOT yet in codex = can be added) */
.inv-slot.inv-codex-new { position: relative; }
.inv-slot.inv-codex-new::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 24px;
  height: 24px;
  background: url('../img/home/icon-codex.webp') no-repeat center/16px 16px;
  background-color: rgba(0,0,0,0.75);
  border-radius: 50%;
  z-index: 4;
  border: 2px solid rgba(255,215,0,0.7);
  box-shadow: 0 0 10px rgba(255,215,0,0.6), 0 0 4px rgba(0,0,0,0.8);
  animation: codexBadgePulse 2s ease-in-out infinite;
}
@keyframes codexBadgePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,215,0,0.6), 0 0 4px rgba(0,0,0,0.8); }
  50% { box-shadow: 0 0 16px rgba(255,215,0,0.9), 0 0 4px rgba(0,0,0,0.8); }
}

/* ============================================
   ARENA PET MINI AVATARS — beside player in fight
   ============================================ */
.arena-pet-minis {
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
  pointer-events: none;
}
.arena-pet-mini {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.6);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  animation: petBob 2s ease-in-out infinite;
}
.arena-pet-mini:nth-child(2) { animation-delay: 0.3s; }
.arena-pet-mini img { width: 100%; height: 100%; object-fit: cover; }
.arena-pet-mini.r-common    { border-color: #9aa0b0; }
.arena-pet-mini.r-uncommon  { border-color: #5ac878; }
.arena-pet-mini.r-rare      { border-color: #3b9dff; box-shadow: 0 0 8px rgba(59,157,255,0.6); }
.arena-pet-mini.r-epic      { border-color: #b86bff; box-shadow: 0 0 10px rgba(184,107,255,0.6); }
.arena-pet-mini.r-legendary { border-color: #ff9d2e; box-shadow: 0 0 12px rgba(255,157,46,0.7); }
.arena-pet-mini.r-mythic    { border-color: #ff4d7a; box-shadow: 0 0 14px rgba(255,77,122,0.8); }
.arena-pet-mini.r-unique    { border-color: #ffd700; box-shadow: 0 0 14px rgba(255,215,0,0.8); }
@keyframes petBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.arena-dmg-pet {
  pointer-events: none;
  z-index: 100;
}

/* ============================================
   HERO PET COMPANION SLOTS — left of avatar
   ============================================ */
.hero-pet-tooltip {
  display: none;
  position: fixed;
  z-index: 100000;
  width: 240px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20,14,40,0.98) 0%, rgba(8,5,20,0.98) 100%);
  border: 1px solid rgba(200,154,78,0.45);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 20px rgba(200,154,78,0.15);
  font-size: 12px;
  color: #e8e4f0;
}
.hero-pet-tooltip .hpt-name {
  font-size: 14px;
  font-weight: 900;
  font-family: 'Cinzel', serif;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  text-shadow: 0 0 8px currentColor;
}
.hero-pet-tooltip .hpt-meta {
  font-size: 10px;
  color: #b9a7d9;
  margin-bottom: 8px;
  letter-spacing: 0.4px;
}
.hero-pet-tooltip .hpt-section-label {
  font-size: 9px;
  font-weight: 800;
  color: #ffd166;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 8px 0 4px;
  border-bottom: 1px solid rgba(255,209,102,0.2);
  padding-bottom: 3px;
}
.hero-pet-tooltip .hpt-bonuses { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.hero-pet-tooltip .hpt-bonus-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #aaa;
}
.hero-pet-tooltip .hpt-bonus-val { color: #4cd964; font-weight: 700; }
.hero-pet-tooltip .hpt-skill {
  background: rgba(170,68,255,0.08);
  border: 1px solid rgba(170,68,255,0.25);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.4;
}
.hero-pet-tooltip .hpt-skill b { color: #bf5fff; font-size: 12px; }
.hero-pet-tooltip .hpt-skill span { color: #ccc; }
.hero-pet-tooltip .hpt-hint {
  margin-top: 8px;
  font-size: 9px;
  color: #6a5d85;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hero-pet-slots {
  position: absolute;
  left: -56px;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.hero-pet-slot {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0.6));
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  overflow: hidden;
}
.hero-pet-slot:hover { transform: translateY(-2px) scale(1.05); }
.hero-pet-slot.filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-pet-slot.filled.r-common    { border-color: #9aa0b0; box-shadow: 0 0 8px rgba(154,160,176,0.4); }
.hero-pet-slot.filled.r-uncommon  { border-color: #5ac878; box-shadow: 0 0 8px rgba(90,200,120,0.5); }
.hero-pet-slot.filled.r-rare      { border-color: #3b9dff; box-shadow: 0 0 10px rgba(59,157,255,0.6); }
.hero-pet-slot.filled.r-epic      { border-color: #b86bff; box-shadow: 0 0 10px rgba(184,107,255,0.6); }
.hero-pet-slot.filled.r-legendary { border-color: #ff9d2e; box-shadow: 0 0 12px rgba(255,157,46,0.7); }
.hero-pet-slot.filled.r-mythic    { border-color: #ff4d7a; box-shadow: 0 0 14px rgba(255,77,122,0.8); animation: heroPetPulse 2s ease-in-out infinite; }
.hero-pet-slot.filled.r-unique    { border-color: #ffd700; box-shadow: 0 0 14px rgba(255,215,0,0.8); animation: heroPetPulse 2s ease-in-out infinite; }
@keyframes heroPetPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
}
.hero-pet-slot .hero-pet-lvl {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: rgba(0,0,0,0.75);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}
.hero-pet-slot.empty {
  border-style: dashed;
  border-color: rgba(200,154,78,0.4);
  color: rgba(200,154,78,0.7);
}
.hero-pet-slot.empty .hero-pet-plus {
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
}
.hero-pet-slot.locked {
  border-color: rgba(100,80,60,0.4);
  background: rgba(30,20,30,0.5);
  cursor: default;
  opacity: 0.55;
  flex-direction: column;
  gap: 1px;
}
.hero-pet-slot.locked .hero-pet-lock { font-size: 14px; line-height: 1; }
.hero-pet-slot.locked .hero-pet-unlock-lvl {
  font-size: 8px;
  color: #8a7c70;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}

/* Mobile: stack horizontally below avatar instead of left */
@media (max-width: 768px) {
  .hero-pet-slots {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 8px;
    gap: 8px;
  }
  .hero-pet-slot { width: 40px; height: 40px; }
}

/* ============================================
   INVENTORY V2 — Folder Tabs Layout
   ============================================ */
.inv-v2 {
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: -24px -20px -32px;
  padding: 0;
  background:
    radial-gradient(ellipse at top, rgba(200,154,78,0.08) 0%, transparent 60%),
    linear-gradient(180deg, rgba(24,16,44,0.98) 0%, rgba(10,6,20,0.99) 100%);
  border: 2px solid rgba(200,154,78,0.35);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4) inset,
    0 20px 60px rgba(0,0,0,0.7),
    0 0 80px rgba(200,154,78,0.1);
  overflow: hidden;
  position: relative;
}
/* Decorative corner ornament (top-left only) */
.inv-v2::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255,209,102,0.6);
  pointer-events: none;
  top: -2px; left: -2px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 14px;
  box-shadow: 0 0 12px rgba(255,209,102,0.3);
  z-index: 5;
}
/* Hide default modal close X when inv-v2 is open (has its own Close button) */
.modal-card:has(.inv-v2) .modal-close-x {
  display: none;
}

/* Pinned header (no scroll) */
.inv-v2 .inv-modal-header {
  padding: 14px 20px 12px;
  margin: 0;
  background: linear-gradient(180deg, rgba(40,28,72,0.9) 0%, rgba(24,16,44,0.7) 100%);
  border-bottom: 1px solid rgba(200,154,78,0.35);
  flex-shrink: 0;
  position: relative;
}
.inv-v2 .inv-modal-header::after {
  content: '';
  position: absolute;
  left: 10%; right: 10%; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,209,102,0.6), transparent);
}
.inv-v2 .inv-modal-header .section-title {
  color: #ffd166;
  text-shadow: 0 0 12px rgba(255,209,102,0.5), 0 2px 4px rgba(0,0,0,0.8);
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  font-size: 18px;
}
.inv-v2 .inv-modal-header .inv-count {
  background: linear-gradient(135deg, rgba(200,154,78,0.2), rgba(140,90,40,0.15));
  color: #ffd166;
  border: 1px solid rgba(200,154,78,0.45);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Scrollable content area */
.inv-v2 .inv-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 18px 12px;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(200,154,78,0.5) transparent;
}
.inv-v2 .inv-scroll-area::-webkit-scrollbar { width: 8px; }
.inv-v2 .inv-scroll-area::-webkit-scrollbar-track { background: transparent; }
.inv-v2 .inv-scroll-area::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(200,154,78,0.5), rgba(140,90,40,0.4));
  border-radius: 4px;
}

/* Pinned action bar (bottom) */
.inv-v2 .inv-action-bar {
  flex-shrink: 0;
  padding: 12px 18px 14px;
  background: linear-gradient(0deg, rgba(40,28,72,0.9) 0%, rgba(24,16,44,0.7) 100%);
  border-top: 1px solid rgba(200,154,78,0.35);
  position: relative;
  display: flex;
  gap: 10px;
}
.inv-v2 .inv-action-bar::before {
  content: '';
  position: absolute;
  left: 10%; right: 10%; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,209,102,0.6), transparent);
}
.inv-v2 .inv-action-bar button {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'Cinzel', serif;
  transition: all 0.15s;
}
.inv-v2 .inv-action-bar button.inv-act-sell {
  background: linear-gradient(135deg, rgba(244,67,54,0.15), rgba(140,30,30,0.1));
  border: 1px solid rgba(244,67,54,0.4);
  color: #ff8a80;
}
.inv-v2 .inv-action-bar button.inv-act-sell:hover {
  background: linear-gradient(135deg, rgba(244,67,54,0.25), rgba(140,30,30,0.18));
  transform: translateY(-1px);
}
.inv-v2 .inv-action-bar button.inv-act-close {
  background: linear-gradient(135deg, rgba(200,154,78,0.2), rgba(140,90,40,0.1));
  border: 1px solid rgba(200,154,78,0.5);
  color: #ffd166;
}
.inv-v2 .inv-action-bar button.inv-act-close:hover {
  background: linear-gradient(135deg, rgba(200,154,78,0.35), rgba(140,90,40,0.2));
  transform: translateY(-1px);
}

/* Hide modal-card default padding impact when inv-v2 is inside */
.modal-card:has(.inv-v2) { padding: 24px 20px; }


/* Desktop 2-column layout — Equipment (left) + Pet Food/Mats (right) */
.inv-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}
.inv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (min-width: 768px) {
  .inv-cols {
    grid-template-columns: 1.6fr 1fr;
    gap: 18px;
  }
  .inv-col-right .inv-mat-grid { grid-template-columns: repeat(3, 1fr); }
}


.inv-sec-tab-wrap { margin-top: 14px; }
.inv-sec-tab-wrap:first-of-type { margin-top: 4px; }

.inv-sec-tab {
  display: inline-block;
  padding: 6px 14px 5px;
  background: linear-gradient(180deg, rgba(255,209,102,0.18), rgba(255,209,102,0.05));
  border: 1px solid rgba(255,209,102,0.35);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffd166;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
}
.inv-sec-tab .inv-sec-count {
  color: #b9a7d9;
  font-weight: 600;
  margin-left: 6px;
  font-size: 10px;
  background: rgba(0,0,0,0.25);
  padding: 1px 6px;
  border-radius: 6px;
}
.inv-sec-body {
  border: 1px solid rgba(255,209,102,0.35);
  border-radius: 0 10px 10px 10px;
  padding: 10px;
  background: rgba(10,6,24,0.4);
  position: relative;
  z-index: 1;
}

/* Currency rail inside currency tab */
.inv-currency-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (min-width: 768px) {
  .inv-currency-rail { grid-template-columns: repeat(6, 1fr); }
}
.inv-cur-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
  transition: all 0.15s;
}
.inv-cur-chip.clickable { cursor: pointer; }
.inv-cur-chip.clickable:hover {
  background: rgba(255,209,102,0.1);
  border-color: rgba(255,209,102,0.4);
  transform: translateY(-1px);
}
.inv-cur-chip.dim { opacity: 0.4; }
.inv-cur-ico {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex: 0 0 22px;
}
.inv-cur-val {
  color: #fff;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rarity filter pills */
.inv-rarity-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.inv-rarity-pill {
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #b9a7d9;
  transition: all 0.15s;
  user-select: none;
}
.inv-rarity-pill:hover { background: rgba(255,255,255,0.08); }
.inv-rarity-pill.active { background: rgba(255,209,102,0.18); border-color: #ffd166; color: #ffd166; }
.inv-rarity-pill.active.r-common    { background: rgba(154,160,176,0.2); border-color: #9aa0b0; color: #c7ccd9; }
.inv-rarity-pill.active.r-uncommon  { background: rgba(90,200,120,0.18); border-color: #5ac878; color: #9de0b0; }
.inv-rarity-pill.active.r-rare      { background: rgba(59,157,255,0.2);  border-color: #3b9dff; color: #7bc0ff; }
.inv-rarity-pill.active.r-epic      { background: rgba(184,107,255,0.2); border-color: #b86bff; color: #d7a6ff; }
.inv-rarity-pill.active.r-legendary { background: rgba(255,157,46,0.2);  border-color: #ff9d2e; color: #ffc878; }
.inv-rarity-pill.active.r-mythic    { background: rgba(255,77,122,0.2);  border-color: #ff4d7a; color: #ff9ab3; }

/* Rarity filter: hide non-matching slots */
.inv-equip-wrap[data-active-rarity="common"]    .inv-slot:not(.common):not(.empty),
.inv-equip-wrap[data-active-rarity="uncommon"]  .inv-slot:not(.uncommon):not(.empty),
.inv-equip-wrap[data-active-rarity="rare"]      .inv-slot:not(.rare):not(.empty),
.inv-equip-wrap[data-active-rarity="epic"]      .inv-slot:not(.epic):not(.empty),
.inv-equip-wrap[data-active-rarity="legendary"] .inv-slot:not(.legendary):not(.empty),
.inv-equip-wrap[data-active-rarity="mythic"]    .inv-slot:not(.mythic):not(.empty) {
  display: none;
}
/* When a specific rarity is active, also hide empty slots to avoid visual clutter */
.inv-equip-wrap:not([data-active-rarity="all"]) .inv-slot.empty {
  display: none;
}

/* Material grid (pet food, gem mats, anvil mats) */
.inv-mat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.inv-mat-slot {
  position: relative;
  min-height: 96px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 10px 6px 8px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.inv-mat-slot:hover { transform: translateY(-2px); }
.inv-mat-slot.dim { opacity: 0.45; }
.inv-mat-slot img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  flex: 0 0 42px;
  align-self: center;
}
.inv-mat-slot .inv-mat-qty {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 3px #000;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.inv-mat-slot .inv-mat-qty::before { content: '×'; opacity: 0.5; margin-right: 2px; }
.inv-mat-slot .inv-mat-label {
  font-size: 9px;
  font-weight: 700;
  color: #b9a7d9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.1;
  word-break: break-word;
  max-width: 100%;
}
.inv-mat-slot.r-common    { border-color: rgba(154,160,176,0.5); box-shadow: inset 0 0 10px rgba(154,160,176,0.15); }
.inv-mat-slot.r-uncommon  { border-color: rgba(90,200,120,0.5);  box-shadow: inset 0 0 10px rgba(90,200,120,0.15); }
.inv-mat-slot.r-rare      { border-color: rgba(59,157,255,0.6);  box-shadow: inset 0 0 12px rgba(59,157,255,0.2); }
.inv-mat-slot.r-epic      { border-color: rgba(184,107,255,0.6); box-shadow: inset 0 0 14px rgba(184,107,255,0.25); }
.inv-mat-slot.r-legendary { border-color: rgba(255,157,46,0.6);  box-shadow: inset 0 0 14px rgba(255,157,46,0.3); }
.inv-mat-slot.r-mythic    { border-color: rgba(255,77,122,0.6);  box-shadow: inset 0 0 16px rgba(255,77,122,0.35); }

/* Mobile tweaks */
@media (max-width: 600px) {
  .inv-currency-rail { grid-template-columns: repeat(3, 1fr); }
  .inv-mat-grid { grid-template-columns: repeat(3, 1fr); }
  .inv-cur-chip { font-size: 11px; }
  .inv-cur-ico { width: 18px; height: 18px; flex-basis: 18px; }
  .inv-mat-slot img { width: 34px; height: 34px; flex-basis: 34px; }
  .inv-rarity-pill { padding: 4px 9px; font-size: 10px; }
}

/* ─── ITEM POPUP V2 (Glass Card) ─── */
.ip2 {
  width:520px; max-width:95vw;
  background: rgba(16,12,30,0.85);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:20px;
  overflow:hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.ip2-header {
  text-align:center; padding:16px 20px;
  background:linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}
.ip2-power {
  font-size:28px; font-weight:900; letter-spacing:-0.5px;
}
.ip2-power.up { color:#00e676; }
.ip2-power.dn { color:#ff5252; }
.ip2-power-label { font-size:11px; color:#666; margin-top:2px; }

.ip2-items {
  display:grid; grid-template-columns:1fr auto 1fr;
  padding:8px 20px 16px; gap:0;
}
.ip2-item { text-align:center; padding:12px; border-radius:16px; }
.ip2-item.new { background:rgba(0,230,118,0.04); }
.ip2-item.old { background:rgba(255,255,255,0.02); }
.ip2-item-tag {
  font-size:10px; font-weight:700; margin-bottom:8px;
  text-transform:uppercase; letter-spacing:1px;
}
.ip2-item.new .ip2-item-tag { color:#00e676; }
.ip2-item.old .ip2-item-tag { color:#666; }
.ip2-item-icon {
  width:80px; height:80px; margin:0 auto 8px;
  border-radius:14px; overflow:hidden; background:rgba(0,0,0,0.3);
}
.ip2-item-icon img { width:110%; height:110%; margin:-5%; object-fit:contain; }
.ip2-item-name { font-size:14px; font-weight:800; margin-bottom:2px; }
.ip2-item-name .item-popup-name { font-size:inherit; margin:0; }
.ip2-item-sub { font-size:10px; color:#555; }
.ip2-item-pwr {
  margin-top:6px; font-size:18px; font-weight:900;
  display:inline-flex; align-items:center; gap:4px;
}
.ip2-item-pwr img { width:14px; height:14px; opacity:0.6; }
.ip2-vs {
  display:flex; align-items:center; color:rgba(255,255,255,0.1);
  font-size:13px; font-weight:900; padding:0 8px;
}

/* ─ Stat diff boxes (gains / losses) ─ */
.ip2-diffs {
  display:flex; gap:8px; padding:0 20px 14px;
}
.ip2-df-box {
  flex:1; border-radius:14px; padding:12px 14px;
}
.ip2-df-box.gains { background:rgba(0,230,118,0.06); border:1px solid rgba(0,230,118,0.15); }
.ip2-df-box.losses { background:rgba(255,82,82,0.06); border:1px solid rgba(255,82,82,0.15); }
.ip2-df-title {
  font-size:10px; font-weight:800; margin-bottom:6px;
  text-transform:uppercase; letter-spacing:1px;
}
.ip2-df-box.gains .ip2-df-title { color:#00e676; }
.ip2-df-box.losses .ip2-df-title { color:#ff5252; }
.ip2-df-row { display:flex; justify-content:space-between; padding:3px 0; font-size:12px; }
.ip2-df-row span:first-child { color:#999; font-weight:500; }
.ip2-df-box.gains .ip2-df-row span:last-child { color:#00e676; font-weight:800; }
.ip2-df-box.losses .ip2-df-row span:last-child { color:#ff5252; font-weight:800; }

/* ─ Action buttons ─ */
.ip2-actions {
  padding:8px 20px 18px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.ip2-btn {
  padding:10px 18px; border-radius:12px; border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.04); color:#ccc; font-size:11px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; gap:5px; transition:all 0.15s;
}
.ip2-btn:hover { background:rgba(255,255,255,0.08); transform:translateY(-1px); }
.ip2-btn:active { transform:translateY(0); }
.ip2-btn:disabled { opacity:0.5; pointer-events:none; transform:none; }
.ip2-btn img { width:16px; height:16px; }
.ip2-btn.equip {
  width:100%; justify-content:center; background:rgba(0,230,118,0.12);
  border-color:rgba(0,230,118,0.3); color:#00e676; font-size:15px; font-weight:900;
  padding:14px; letter-spacing:2px; text-transform:uppercase;
}
.ip2-btn.equip:hover {
  background:rgba(0,230,118,0.2);
  box-shadow:0 4px 24px rgba(0,230,118,0.2);
}

/* Share confirmation */
.ip2-share-confirm {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 12px;
  background:rgba(88,101,242,0.08);
  border:1px solid rgba(88,101,242,0.2);
  border-radius:12px;
  font-size:11px;
  color:#aaa;
}
.ip2-share-confirm button {
  padding:6px 16px;
  border-radius:8px;
  border:1px solid;
  font-weight:800;
  font-size:10px;
  cursor:pointer;
  text-transform:uppercase;
  font-family:inherit;
  letter-spacing:0.5px;
  background:none;
}
.ip2-share-confirm .ip2-share-yes {
  background:rgba(88,101,242,0.2);
  border-color:rgba(88,101,242,0.4);
  color:#7983ff;
}
.ip2-share-confirm .ip2-share-no {
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.1);
  color:#888;
}

/* Rarity icon frames */
.rf-common    { border:2px solid rgba(154,160,176,0.4); }
.rf-uncommon  { border:2px solid #5ac878; box-shadow:0 0 10px rgba(90,200,120,0.2); }
.rf-rare      { border:2px solid #3b9dff; box-shadow:0 0 10px rgba(59,157,255,0.25); }
.rf-epic      { border:2px solid #bf5fff; box-shadow:0 0 12px rgba(191,95,255,0.25); }
.rf-legendary { border:2px solid #ffb340; box-shadow:0 0 14px rgba(255,179,64,0.3); }
.rf-mythic    { border:2px solid #ff4d7a; box-shadow:0 0 14px rgba(255,77,122,0.3); animation:rfmp 2.5s ease-in-out infinite; }
@keyframes rfmp { 50% { box-shadow:0 0 22px rgba(255,77,122,0.5); } }

/* Rarity text colors */
.rc { color:#9aa0b0; } .ru { color:#5ac878; } .rr { color:#3b9dff; }
.re { color:#bf5fff; } .rl { color:#ffb340; } .rm { color:#ff4d7a; }
.rfe { border:2px solid #bf5fff; box-shadow:0 0 12px rgba(191,95,255,0.25); }
.rfu { border:2px solid #5ac878; box-shadow:0 0 10px rgba(90,200,120,0.2); }
.rfm { border:2px solid #ff4d7a; box-shadow:0 0 14px rgba(255,77,122,0.3); animation:rfmp 2.5s ease-in-out infinite; }

/* renderItemIcon inside ip2 */
.ip2-item-icon .item-icon-wrap { width:100% !important; height:100% !important; border-radius:14px; }
.ip2-item-icon .item-lvl-badge { display:none; }

/* Strip modal-card chrome when ip2 popup is inside */
.modal-card:has(.ip2) {
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  overflow:visible !important;
}
.modal-card:has(.ip2) .modal-close-x { display:none; }

/* Single item display (no comparison) */
.ip2-single {
  text-align:center;
  padding:20px 16px 14px;
}
.ip2-single-icon {
  width:96px; height:96px;
  margin:0 auto 12px;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  background:rgba(0,0,0,0.3);
}
.ip2-single-icon img {
  width:110%; height:110%;
  margin:-5%;
  object-fit:contain;
}
.ip2-single-icon .lvl {
  position:absolute;
  bottom:4px; right:4px;
  background:rgba(0,0,0,0.85);
  color:#ffd166;
  font-size:11px;
  font-weight:800;
  padding:2px 6px;
  border-radius:4px;
  border:1px solid rgba(200,154,78,0.3);
}
.ip2-single-name {
  font-size:14px;
  font-weight:800;
  margin-bottom:4px;
}
.ip2-single-name .item-popup-name {
  font-size:inherit;
  margin:0;
}
.ip2-single-meta {
  font-size:10px;
  color:#666;
  letter-spacing:0.5px;
  margin-bottom:8px;
}
.ip2-single-power {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  background:rgba(0,0,0,0.4);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  font-size:16px;
  font-weight:900;
  color:#ffd166;
  margin-bottom:12px;
}
.ip2-single-power img { width:18px; height:18px; }

/* Single item stat list */
.ip2-single-stats {
  padding:0 16px 14px;
}
.ip2-single-stat-row {
  display:flex;
  justify-content:space-between;
  padding:5px 12px;
  border-radius:8px;
  font-size:12px;
  margin-bottom:1px;
}
.ip2-single-stat-row:nth-child(odd) { background:rgba(255,255,255,0.015); }
.ip2-single-stat-row .ip2-stat-label { color:#aaa; font-weight:600; font-size:11px; }
.ip2-single-stat-row .ip2-stat-val { color:#ccc; font-weight:800; font-size:12px; }

.ip2-single-icon .item-icon-wrap { width:100% !important; height:100% !important; border-radius:14px; }
.ip2-single-icon .item-lvl-badge { display:none; }

/* Desktop */
@media (min-width:768px) {
  .modal-card:has(.ip2) { max-width:580px !important; }
  .item-overlay { align-items:center; padding-top:10px; padding-bottom:10px; }
  .ip2 { max-height:96vh; overflow-y:auto; }
  .ip2-items { padding:8px 24px 16px; }
  .ip2-diffs { padding:0 24px 14px; }
  .ip2-actions { padding:8px 24px 18px; }
  .ip2-single { padding:24px 20px 14px; }
  .ip2-single-icon { width:110px; height:110px; }
}

/* ══════════════════════════════════════════════════════════════
   HOME DASHBOARD — parallax + widgets + timers + wars + top3
   ══════════════════════════════════════════════════════════════ */
#panelHome {
  position: relative; overflow: hidden; padding: 0;
  background: url('../img/home/bg.webp?v=2') center/cover no-repeat !important;
  background-attachment: fixed !important;
  min-height: 100%;
}
@media (orientation: portrait) {
  #panelHome {
    background: url('../img/home/bg-portrait.webp?v=2') center/cover no-repeat !important;
    background-attachment: scroll !important;
  }
}
/* Dark overlay over the raster art so UI cards remain legible */
#panelHome::before {
  content: '' !important; display: block !important;
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,5,25,0.45) 0%, rgba(15,8,35,0.72) 100%) !important;
  pointer-events: none;
}
/* Hide the CSS-drawn parallax layers — the raster art supersedes them */
#panelHome .home-bg { display: none !important; }
/* Parallax bg fills panel full-width; dashboard content stays capped + centered */
#panelHome > .home-bg { max-width: none !important; width: 100% !important; }
#panelHome > .home-content {
  max-width: 980px !important;
  width: 100% !important;
  margin: 0 auto !important;
}

/* Parallax background layers */
#panelHome .home-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
#panelHome .home-bg-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(90,50,160,0.35), transparent 55%),
    radial-gradient(ellipse at 30% 90%, rgba(160,80,40,0.22), transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(80,40,140,0.25), transparent 55%),
    linear-gradient(180deg, #0a0418 0%, #120828 35%, #0a0418 70%, #040108 100%);
}
#panelHome .home-bg-stars {
  position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,216,144,0.5) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(193,143,255,0.6) 0%, transparent 60%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4) 0%, transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,216,144,0.45) 0%, transparent 60%),
    radial-gradient(1px 1px at 15% 70%, rgba(193,143,255,0.5) 0%, transparent 60%);
  animation: homeStarDrift 220s linear infinite;
  opacity: 0.6; will-change: transform;
}
@keyframes homeStarDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-200px,0,0); } }
#panelHome .home-bg-mountains {
  position: absolute; bottom: 0; left: -10%; right: -10%; height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(30,15,50,0.4) 30%, rgba(15,8,30,0.8) 70%, #0a0418 100%);
  clip-path: polygon(0 100%, 0 70%, 10% 50%, 18% 65%, 28% 35%, 38% 55%, 50% 25%, 62% 50%, 72% 30%, 82% 55%, 92% 40%, 100% 60%, 100% 100%);
}
#panelHome .home-bg-fog {
  position: absolute; bottom: 0; left: 0; right: 0; height: 35%;
  background: linear-gradient(180deg, transparent 0%, rgba(120,80,180,0.1) 40%, rgba(80,50,120,0.18) 100%);
  animation: homeFogDrift 50s ease-in-out infinite alternate; will-change: transform;
}
@keyframes homeFogDrift { from { transform: translate3d(-3%,0,0); } to { transform: translate3d(3%,0,0); } }
#panelHome #homeBgCanvas { position: absolute; inset: 0; }
@media (prefers-reduced-motion: reduce) {
  #panelHome .home-bg-stars, #panelHome .home-bg-fog { animation: none !important; }
  #panelHome #homeBgCanvas { display: none; }
}

/* Content above background */
#panelHome .home-content {
  position: relative; z-index: 2;
  max-width: 980px; margin: 0 auto; padding: 20px 16px 60px;
}

/* Greeting bar */
#panelHome .home-greet {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(255,80,100,0.14), rgba(15,8,30,0.55) 80%);
  border-left: 3px solid #ff4d5f;
  border-radius: 10px;
  margin-bottom: 12px;
}
#panelHome .home-greet-av {
  width: 60px !important; height: 60px !important; min-width: 60px;
  border-radius: 12px !important; overflow: visible !important;
  box-shadow: 0 0 0 2px rgba(200,168,78,0.5), 0 0 14px rgba(255,80,100,0.4);
  background: transparent !important;
  position: relative;
}
#panelHome .home-greet-av-img {
  width: 60px !important; height: 60px !important;
  border-radius: 12px !important; object-fit: cover;
  display: block;
}
#panelHome .home-greet-lvl {
  position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd890, #8a5510);
  border: 2px solid #1a0426;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cinzel',serif; font-size: 11px; font-weight: 900; color: #1a0426;
  z-index: 3;
}
#panelHome .home-greet-text { flex: 1; min-width: 0; }
#panelHome .home-greet-hi { font-size: 11px; letter-spacing: 2px; color: #a895c0; text-transform: uppercase; font-weight: 800; }
#panelHome .home-greet-nm {
  font-family: 'Cinzel',serif; font-size: 22px; font-weight: 900; color: #ffd890;
  letter-spacing: 1px; line-height: 1.1; margin-top: 2px;
}
#panelHome .home-greet-meta { font-size: 11.5px; color: #c9a3ff; margin-top: 4px; }
#panelHome .home-greet-meta strong { color: #fff; }

/* Section title */
#panelHome .home-st {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Cinzel',serif; font-size: 11px; letter-spacing: 3.5px;
  font-weight: 900; color: #ffd890; text-transform: uppercase;
  margin: 22px 0 10px;
  text-shadow: 0 0 8px rgba(255,216,144,0.2);
}
#panelHome .home-st::before, #panelHome .home-st::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,78,0.35), transparent);
}
#panelHome .home-st-count { color: #8a7ca8; font-weight: 700; letter-spacing: 2px; font-size: 10px; flex: none; }

/* ═══════════════════════════════════════════════════════════
   NEWS FEED on HOME — replaces the old timer list.
   Cards are categorised by color theme (patch/event/community/update).
   ═══════════════════════════════════════════════════════════ */
#panelHome .home-news-st { color: #ffd890; }
#panelHome .home-news {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
#panelHome .home-news-card {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26,18,46,0.88), rgba(15,10,30,0.95));
  border: 1px solid rgba(199,122,252,0.25);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transition: transform .15s, border-color .2s, box-shadow .2s;
  cursor: default;
}
#panelHome .home-news-card[data-news-tab] { cursor: pointer; }
#panelHome .home-news-card[data-news-tab]:hover {
  transform: translateY(-2px);
  border-color: rgba(199,122,252,0.6);
  box-shadow: 0 6px 22px rgba(138,79,207,0.35);
}
#panelHome .home-news-card.pinned::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  border-radius: 14px 14px 0 0;
  opacity: 0.6;
}
#panelHome .home-news-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 8px;
}
#panelHome .home-news-ic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
}
#panelHome .home-news-meta { flex: 1; min-width: 0; }
#panelHome .home-news-cat {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2.5px;
  color: currentColor;
  opacity: 0.85;
  margin-bottom: 3px;
}
#panelHome .home-news-title {
  font-family: 'Cinzel', serif;
  font-size: 16px;
  font-weight: 800;
  color: #fff5ff;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
#panelHome .home-news-date {
  font-size: 10px;
  color: #8a7ca8;
  font-weight: 600;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
#panelHome .home-news-summary {
  font-size: 13px;
  color: #d9cfec;
  line-height: 1.5;
  margin-bottom: 6px;
  font-weight: 500;
}
#panelHome .home-news-body {
  font-size: 12px;
  color: #a895c0;
  line-height: 1.55;
}

/* Category colors */
#panelHome .home-news-card.home-news-cat-patch {
  color: #ffd890;
  border-color: rgba(255,215,140,0.3);
}
#panelHome .home-news-card.home-news-cat-patch .home-news-ic {
  background: linear-gradient(180deg, rgba(100,70,20,0.55), rgba(50,35,10,0.7));
  border-color: rgba(255,215,140,0.4);
}
#panelHome .home-news-card.home-news-cat-event {
  color: #ff8f90;
  border-color: rgba(255,100,100,0.35);
}
#panelHome .home-news-card.home-news-cat-event .home-news-ic {
  background: linear-gradient(180deg, rgba(90,20,25,0.6), rgba(50,10,15,0.75));
  border-color: rgba(255,100,100,0.45);
}
#panelHome .home-news-card.home-news-cat-community {
  color: #d8b0ff;
  border-color: rgba(180,110,240,0.35);
}
#panelHome .home-news-card.home-news-cat-community .home-news-ic {
  background: linear-gradient(180deg, rgba(70,28,120,0.6), rgba(40,14,80,0.8));
  border-color: rgba(180,110,240,0.45);
}
#panelHome .home-news-card.home-news-cat-update {
  color: #7ecdff;
  border-color: rgba(126,205,255,0.35);
}
#panelHome .home-news-card.home-news-cat-update .home-news-ic {
  background: linear-gradient(180deg, rgba(28,60,100,0.6), rgba(14,30,60,0.8));
  border-color: rgba(126,205,255,0.45);
}

#panelHome .home-news-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8a7ca8;
  font-style: italic;
}

@media (max-width: 600px) {
  #panelHome .home-news-title { font-size: 14px; }
  #panelHome .home-news-summary { font-size: 12px; }
  #panelHome .home-news-ic { width: 40px; height: 40px; font-size: 20px; }
}

/* Key widgets grid */
#panelHome .home-kw-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
#panelHome .home-kw {
  position: relative; padding: 14px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(30,18,55,0.78), rgba(15,8,30,0.92));
  border: 1px solid rgba(200,168,78,0.22);
  min-height: 120px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: transform 0.15s, border-color 0.2s;
}
#panelHome .home-kw:hover { transform: translateY(-2px); border-color: rgba(200,168,78,0.5); }
#panelHome .home-kw-head { display: flex; align-items: center; gap: 8px; }
#panelHome .home-kw-img { width: 22px; height: 22px; flex-shrink: 0; }
#panelHome .home-kw-e { font-size: 22px; line-height: 1; flex-shrink: 0; }
#panelHome .home-kw-t {
  font-family: 'Cinzel',serif; font-size: 11px; color: #a895c0;
  letter-spacing: 2px; text-transform: uppercase; font-weight: 800; flex: 1;
}
#panelHome .home-kw-badge {
  padding: 2px 7px; border-radius: 999px;
  font-size: 8px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
}
#panelHome .home-kw-badge.live { background: #ff4757; color: #fff; animation: homeLivePulse 1.2s infinite; }
@keyframes homeLivePulse { 0%,100% { opacity: 1 } 50% { opacity: 0.5 } }
#panelHome .home-kw-badge.new { background: #2ecc71; color: #fff; }
#panelHome .home-kw-badge.gold { background: #c8a84e; color: #1a0a38; }
#panelHome .home-kw-badge.purp { background: #bf8fff; color: #fff; }
#panelHome .home-kw-badge.idle { background: rgba(200,168,78,0.2); color: #c8a84e; border: 1px solid rgba(200,168,78,0.4); }
#panelHome .home-kw-v { font-family: 'Cinzel',serif; font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }
#panelHome .home-kw-sub { font-size: 14px; color: #a895c0; font-weight: 700; }
#panelHome .home-kw-d { font-size: 10.5px; color: #8a7ca8; line-height: 1.45; margin-top: auto; }
#panelHome .home-kw-bar {
  height: 6px; border-radius: 999px; background: rgba(0,0,0,0.5);
  overflow: hidden; border: 1px solid rgba(200,168,78,0.2); margin-top: 4px;
}
#panelHome .home-kw-fill { height: 100%; }
#panelHome .home-kw-fill.red { background: linear-gradient(90deg,#ff4d5f,#ff8a8a,#ff4d5f); }
#panelHome .home-kw-fill.blue { background: linear-gradient(90deg,#4FACFE,#6fb8ff,#4FACFE); }
#panelHome .home-kw-fill.gold { background: linear-gradient(90deg,#ffd890,#c8a84e,#ffd890); }
#panelHome .home-kw-fill.purple { background: linear-gradient(90deg,#a970ff,#c9a3ff,#a970ff); }
#panelHome .home-kw-fill.green { background: linear-gradient(90deg,#2ecc71,#6fe39a,#2ecc71); }

/* Timers — 2-column grid (1 column on mobile) */
#panelHome .home-timers {
  background: linear-gradient(180deg, rgba(30,18,55,0.72), rgba(15,8,30,0.9));
  border: 1px solid rgba(200,168,78,0.2); border-radius: 12px;
  padding: 4px 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
}
@media (max-width: 720px) {
  #panelHome .home-timers { grid-template-columns: 1fr; }
}
#panelHome .home-tmr-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  padding: 10px 4px; align-items: center;
  border-bottom: 1px dashed rgba(200,168,78,0.1);
  min-width: 0;
}
#panelHome .home-tmr-row:last-child { border-bottom: 1px dashed rgba(200,168,78,0.1); }
#panelHome .home-tmr-row:nth-last-child(-n+2) { border-bottom: none; }
@media (max-width: 720px) {
  #panelHome .home-tmr-row:nth-last-child(-n+2) { border-bottom: 1px dashed rgba(200,168,78,0.1); }
  #panelHome .home-tmr-row:last-child { border-bottom: none; }
}
#panelHome .home-tmr-ic { font-size: 20px; text-align: center; width: 28px; }
#panelHome .home-tmr-ic img { width: 24px; height: 24px; object-fit: contain; }
/* shield.webp has more transparent padding than other icons — scale to match */
#panelHome .home-tmr-ic img[src*="shield"] { width: 30px; height: 30px; }
#panelHome .home-tmr-nm { font-size: 12.5px; color: #e6e1f2; font-weight: 800; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#panelHome .home-tmr-sub { display: block; font-size: 10.5px; color: #8a7ca8; font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panelHome .home-tmr-tm {
  font-family: 'Cinzel',serif; font-size: 13px; font-weight: 900;
  color: var(--tc, #ffd890); letter-spacing: 1px; white-space: nowrap;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(200,168,78,0.22);
}
#panelHome .home-tmr-row.urgent .home-tmr-tm { --tc: #ff6b7a; border-color: rgba(255,107,122,0.4); background: rgba(60,20,30,0.4); }
#panelHome .home-tmr-row.live .home-tmr-tm   { --tc: #2ecc71; border-color: rgba(46,204,113,0.4); background: rgba(20,60,30,0.4); animation: homeLivePulse 1.2s infinite; }
#panelHome .home-tmr-row.done .home-tmr-tm   { --tc: #ffd890; background: linear-gradient(135deg, rgba(255,216,144,0.2), rgba(138,106,26,0.15)); border-color: rgba(255,216,144,0.55); }
#panelHome .home-tmr-row.hint { opacity: 0.75; }
#panelHome .home-tmr-row.hint:hover { opacity: 1; }
#panelHome .home-tmr-row.hint .home-tmr-tm { --tc: #c8a84e; background: rgba(200,168,78,0.12); border-color: rgba(200,168,78,0.3); font-size: 11px; padding: 4px 8px; }
/* v23.0.722 — locked feature row. Grayed out, no hover lift, non-clickable.
   Uses lock icon on the timer pill to emphasise "level-gated". */
#panelHome .home-tmr-row.locked {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.8);
}
#panelHome .home-tmr-row.locked:hover { opacity: 0.55; transform: none; }
#panelHome .home-tmr-row.locked .home-tmr-ic img { filter: grayscale(1) brightness(0.7); }
#panelHome .home-tmr-row.locked .home-tmr-tm {
  --tc: #888;
  background: rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.08);
  font-size: 11px;
  padding: 4px 8px;
  color: #888;
}
#panelHome .home-tmr-row.locked .home-tmr-tm::before {
  content: '🔒 ';
  font-size: 10px;
  margin-right: 2px;
}
#panelHome .home-tmr-row[data-goto] { cursor: pointer; }
#panelHome .home-tmr-row[data-goto]:hover { background: rgba(200,168,78,0.05); }
#panelHome .home-tmr-empty { padding: 16px; text-align: center; color: #8a7ca8; font-size: 11px; }

/* Sub-grid (Top3 + Wars side by side) */
#panelHome .home-subgrid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 800px) {
  #panelHome .home-kw-grid { grid-template-columns: 1fr 1fr; }
  #panelHome .home-subgrid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #panelHome .home-kw-grid { grid-template-columns: 1fr; }
}

/* Top 3 cards */
#panelHome .home-lb3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#panelHome .home-lb3-card {
  position: relative; padding: 14px 12px;
  background: linear-gradient(180deg, rgba(30,18,55,0.78), rgba(15,8,30,0.92));
  border: 1px solid rgba(200,168,78,0.2); border-top: 3px solid var(--lbc, #c8a84e);
  border-radius: 10px; text-align: center;
  cursor: pointer; transition: transform 0.15s;
}
#panelHome .home-lb3-card:hover { transform: translateY(-2px); }
#panelHome .home-lb3-card.r1 { --lbc: #FFD700; background: linear-gradient(180deg, rgba(255,215,0,0.12), rgba(15,8,30,0.92)); }
#panelHome .home-lb3-card.r2 { --lbc: #C0C0C0; }
#panelHome .home-lb3-card.r3 { --lbc: #CD7F32; }
#panelHome .home-lb3-rank {
  font-family: 'Cinzel',serif; font-size: 26px; font-weight: 900; color: var(--lbc);
  line-height: 1; text-shadow: 0 0 14px var(--lbc);
}
#panelHome .home-lb3-rank::before { content: '#'; font-size: 16px; opacity: 0.7; margin-right: 2px; }
#panelHome .home-lb3-avatar {
  width: 50px; height: 50px; border-radius: 10px; overflow: hidden;
  margin: 8px auto 6px; background: #000;
  box-shadow: 0 0 0 2px var(--lbc), 0 0 12px rgba(0,0,0,0.5);
}
#panelHome .home-lb3-avatar img { width: 100%; height: 100%; object-fit: cover; }
#panelHome .home-lb3-name { font-family: 'Cinzel',serif; font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 1px; }
#panelHome .home-lb3-class { font-size: 9px; color: #a895c0; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; font-weight: 700; }
#panelHome .home-lb3-pow {
  margin-top: 8px; display: inline-block; padding: 4px 10px;
  background: rgba(0,0,0,0.4); border-radius: 999px;
  font-family: 'Cinzel',serif; font-size: 11px; font-weight: 900; color: #ffd890;
}

/* Wars */
#panelHome .home-wars {
  background: linear-gradient(180deg, rgba(30,18,55,0.72), rgba(15,8,30,0.9));
  border: 1px solid rgba(200,168,78,0.2); border-radius: 12px;
  padding: 8px 14px;
}
#panelHome .home-war-row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 12px; padding: 10px 0; align-items: center;
  border-bottom: 1px dashed rgba(200,168,78,0.1); font-size: 12px;
}
#panelHome .home-war-row:last-child { border-bottom: none; }
#panelHome .home-war-res {
  font-family: 'Cinzel',serif; font-size: 11px; font-weight: 900;
  padding: 4px 10px; border-radius: 5px; letter-spacing: 1.5px;
  min-width: 56px; text-align: center;
}
#panelHome .home-war-res.win { color: #2ecc71; background: rgba(46,204,113,0.15); border: 1px solid rgba(46,204,113,0.4); }
#panelHome .home-war-res.loss { color: #ff6b7a; background: rgba(255,71,87,0.1); border: 1px solid rgba(255,71,87,0.35); }
#panelHome .home-war-vs { font-weight: 700; color: #e6e1f2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#panelHome .home-war-vs .tg { color: #c9a3ff; font-weight: 600; }
#panelHome .home-war-score { font-family: 'Cinzel',serif; font-weight: 900; color: #ffd890; letter-spacing: 0.5px; }
#panelHome .home-war-dt { color: #8a7ca8; font-size: 11px; font-weight: 600; }

#panelHome .home-loading {
  padding: 16px; text-align: center; color: #8a7ca8; font-size: 11px; letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   VEIL WAR — faction choice modal + header meter
   ══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   VEIL ORB — floating Eclipse Orb (bottom-right, above tab bar)
   ──────────────────────────────────────────────────────────── */
.veil-orb-container {
  position: fixed; z-index: 850;
  right: 24px;
  bottom: 150px; /* above tab bar (~52) + mob quick-strip (~44) + margin */
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; user-select: none;
  transition: right 0.25s ease, bottom 0.25s ease, transform 0.2s;
  /* Expand invisible hit area so stylus/touch easily registers */
  padding: 10px 8px;
  margin: -10px -8px;
  -webkit-tap-highlight-color: rgba(255,215,0,0.15);
}
.veil-orb-container:hover { transform: translateY(-2px); }
/* Ensure children don't swallow clicks — entire container is the target */
.veil-orb-container > * { pointer-events: none; }
/* Shift when other panels have fixed UI at bottom-right */
body[data-active-tab="guild"] .veil-orb-container { right: 100px; }
/* Rift (tavern) panel has a stamina refill + quest start button stack at the
   bottom — hide the orb when idle, but keep it visible during an active
   mission so players can still react to Veil War events mid-quest. */
body[data-active-tab="tavern"]:not([data-rift-active]) .veil-orb-container { display: none !important; }
/* Hide Veil Orb while any modal/item popup is open — on mobile it sits right
   on top of action buttons (e.g. "Codex" on the item popup) and blocks taps. */
body:has(#itemOverlay[style*="flex"]) .veil-orb-container,
body:has(#modalOverlay[style*="flex"]) .veil-orb-container { display: none !important; }
@media (min-width: 960px) {
  /* Desktop — no tab bar at bottom; orb sits further from edge */
  .veil-orb-container { bottom: 40px; right: 32px; }
  body[data-active-tab="guild"] .veil-orb-container { right: 32px; } /* no overlap on desktop */
  /* tavern hidden via the general display:none !important rule above */
}
@media (max-width: 560px) {
  .veil-orb-container { bottom: 120px; right: 16px; gap: 9px; }
}

.veil-orb-label {
  padding: 8px 14px 6px;
  background: linear-gradient(180deg, rgba(15,8,32,0.95), rgba(10,4,22,0.98));
  border: 1px solid rgba(200,168,78,0.55);
  border-radius: 18px;
  white-space: nowrap;
  font-family: 'Cinzel', serif;
  font-weight: 900;
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.veil-orb-label .vol-title {
  font-size: 8.5px; letter-spacing: 3px; color: #c8a84e;
  text-transform: uppercase; opacity: 0.85;
}
.veil-orb-label .vol-pcts { font-size: 13px; letter-spacing: 1.5px; }
.veil-orb-label .vol-w { color: #ffd890; }
.veil-orb-label .vol-s { color: #c9a3ff; }
.veil-orb-label .vol-sep { color: #6a5a80; margin: 0 4px; }
.veil-orb-label .mine { text-shadow: 0 0 10px currentColor; }
.veil-orb-label .mine::before { content: '●'; font-size: 9px; margin-right: 4px; opacity: 0.9; }

.veil-orb {
  width: 82px; height: 82px; border-radius: 50%;
  position: relative; overflow: hidden;
  background: #000;
  border: 3px solid rgba(200,168,78,0.7);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.75),
    0 0 24px rgba(255,216,144,0.5),
    0 0 48px rgba(180,80,255,0.5),
    inset 0 0 20px rgba(0,0,0,0.45);
  transition: transform 0.2s;
}
.veil-orb:hover { transform: scale(1.08); }
.veil-orb.lead-warden { animation: veilOrbLeadW 3s ease-in-out infinite; }
.veil-orb.lead-seeker { animation: veilOrbLeadS 3s ease-in-out infinite; }
@keyframes veilOrbLeadW {
  0%,100% { box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 18px rgba(255,216,144,0.45), 0 0 36px rgba(180,80,255,0.4), inset 0 0 16px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 32px rgba(255,216,144,0.9), 0 0 48px rgba(180,80,255,0.35), inset 0 0 16px rgba(0,0,0,0.4); }
}
@keyframes veilOrbLeadS {
  0%,100% { box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 18px rgba(255,216,144,0.4),  0 0 36px rgba(180,80,255,0.45), inset 0 0 16px rgba(0,0,0,0.4); }
  50%     { box-shadow: 0 6px 20px rgba(0,0,0,0.7), 0 0 18px rgba(255,216,144,0.35), 0 0 52px rgba(180,80,255,0.95), inset 0 0 16px rgba(0,0,0,0.4); }
}
.veil-orb .vo-w {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: radial-gradient(circle at 30% 40%, #ffe4a0, #c8a84e 60%, #8a5510 100%);
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.veil-orb .vo-s {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 70% 40%, #d9b0ff, #7a3fd6 60%, #2a0850 100%);
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.veil-orb .vo-boundary {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.95), rgba(255,255,255,0.6));
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(255,255,255,0.7);
  transition: left 0.8s cubic-bezier(0.22,1,0.36,1);
}
@media (max-width: 560px) {
  .veil-orb { width: 64px; height: 64px; border-width: 2px; }
  .veil-orb-label { padding: 6px 11px 5px; }
  .veil-orb-label .vol-title { font-size: 7.5px; letter-spacing: 2px; }
  .veil-orb-label .vol-pcts { font-size: 11.5px; }
}

/* ────────────────────────────────────────────────────────────
   VEIL HUB — modal opened on orb click
   ──────────────────────────────────────────────────────────── */
.veil-hub-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(5,2,12,0.94);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 30px 14px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  animation: vhFadeIn 0.18s ease;
}
.veil-hub-overlay.closing { animation: vhFadeOut 0.18s ease forwards; }
@keyframes vhFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes vhFadeOut { from { opacity: 1; } to { opacity: 0; } }

.veil-hub-modal {
  position: relative;
  width: 100%; max-width: 640px;
  margin: auto; /* centers vertically when content is short; stays top-anchored when tall enough to scroll */
  background: linear-gradient(180deg, #140828 0%, #0a0418 50%, #06020d 100%);
  border: 1px solid rgba(200,168,78,0.5);
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}
/* Desktop: use more screen real estate for the explainer layout */
@media (min-width: 960px) {
  .veil-hub-modal { max-width: 960px; padding: 32px 36px 28px; }
  .veil-hub-modal .vh-grid-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  }
}

.veil-hub-modal .vh-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(200,168,78,0.35);
  color: #ffd890; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: background 0.15s;
}
.veil-hub-modal .vh-close:hover { background: rgba(200,168,78,0.25); }

.veil-hub-modal .vh-head { text-align: center; margin-bottom: 16px; }
.veil-hub-modal .vh-title {
  font-family: 'Cinzel', serif; font-size: 24px; font-weight: 900;
  letter-spacing: 4px; color: #ffd890;
  text-shadow: 0 0 18px rgba(255,216,144,0.5);
}
.veil-hub-modal .vh-subtitle {
  font-size: 11px; color: #a895c0; margin-top: 4px;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.veil-hub-modal .vh-subtitle b { color: #ffd890; }

/* Big eclipse visualization */
.veil-hub-modal .vh-eclipse-wrap {
  display: flex; justify-content: center; margin: 14px 0 18px;
}
.veil-hub-modal .vh-eclipse {
  width: 130px; height: 130px; border-radius: 50%;
  position: relative; overflow: hidden; background: #000;
  border: 3px solid rgba(200,168,78,0.7);
  box-shadow:
    0 0 30px rgba(255,216,144,0.4),
    0 0 60px rgba(180,80,255,0.4),
    inset 0 0 26px rgba(0,0,0,0.5);
}
.veil-hub-modal .vh-eclipse.lead-warden { animation: veilOrbLeadW 3s ease-in-out infinite; }
.veil-hub-modal .vh-eclipse.lead-seeker { animation: veilOrbLeadS 3s ease-in-out infinite; }
.veil-hub-modal .vh-eclipse .vo-w {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: radial-gradient(circle at 30% 40%, #ffe4a0, #c8a84e 60%, #8a5510 100%);
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.veil-hub-modal .vh-eclipse .vo-s {
  position: absolute; top: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 70% 40%, #d9b0ff, #7a3fd6 60%, #2a0850 100%);
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.veil-hub-modal .vh-eclipse .vo-boundary {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), #fff, rgba(255,255,255,0.6));
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(255,255,255,0.8);
  transition: left 0.8s cubic-bezier(0.22,1,0.36,1);
}

/* Faction totals */
.veil-hub-modal .vh-factions {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center; margin-bottom: 18px;
}
.veil-hub-modal .vh-fac {
  padding: 14px 12px;
  background: linear-gradient(180deg, rgba(30,18,55,0.6), rgba(15,8,30,0.85));
  border: 1px solid rgba(200,168,78,0.25);
  border-radius: 12px;
  text-align: center;
}
.veil-hub-modal .vh-fac.warden { border-color: rgba(255,216,144,0.5); box-shadow: inset 0 0 16px rgba(255,216,144,0.08); }
.veil-hub-modal .vh-fac.seeker { border-color: rgba(201,163,255,0.5); box-shadow: inset 0 0 16px rgba(201,163,255,0.08); }
.veil-hub-modal .vh-fac.mine { box-shadow: 0 0 20px currentColor, inset 0 0 16px rgba(255,255,255,0.05); }
.veil-hub-modal .vh-fac-sigil { font-size: 22px; margin-bottom: 4px; filter: drop-shadow(0 0 8px currentColor); }
.veil-hub-modal .vh-fac-name {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 3px;
  font-weight: 900; text-transform: uppercase;
}
.veil-hub-modal .vh-fac.warden .vh-fac-name { color: #ffd890; }
.veil-hub-modal .vh-fac.seeker .vh-fac-name { color: #c9a3ff; }
.veil-hub-modal .vh-fac-pct {
  font-family: 'Cinzel', serif; font-size: 28px; font-weight: 900; color: #fff;
  margin: 4px 0 2px; letter-spacing: 1px;
}
.veil-hub-modal .vh-fac-vp { font-size: 12px; color: #ffd890; font-weight: 800; letter-spacing: 0.5px; }
.veil-hub-modal .vh-fac.seeker .vh-fac-vp { color: #c9a3ff; }
.veil-hub-modal .vh-fac-count { font-size: 9px; color: #8a7ca8; letter-spacing: 1.5px; margin-top: 4px; text-transform: uppercase; }
.veil-hub-modal .vh-fac-vs {
  font-family: 'Cinzel', serif; font-size: 20px; font-weight: 900; color: #c8a84e;
  text-shadow: 0 0 12px rgba(200,168,78,0.6);
}

/* Sections */
.veil-hub-modal .vh-section { margin-top: 18px; }
.veil-hub-modal .vh-section-title {
  font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 3px;
  color: #c8a84e; text-transform: uppercase; font-weight: 900;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.veil-hub-modal .vh-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(200,168,78,0.35), transparent);
}

/* My contribution */
.veil-hub-modal .vh-mystats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.veil-hub-modal .vh-mystat {
  padding: 10px 8px; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(200,168,78,0.2);
  text-align: center;
}
.veil-hub-modal .vh-mystat-lbl {
  font-size: 9px; letter-spacing: 1.5px; color: #8a7ca8;
  text-transform: uppercase; font-weight: 800; margin-bottom: 4px;
}
.veil-hub-modal .vh-mystat-val {
  font-family: 'Cinzel', serif; font-size: 15px; font-weight: 900;
}
.veil-hub-modal .vh-mystat-val.warden { color: #ffd890; }
.veil-hub-modal .vh-mystat-val.seeker { color: #c9a3ff; }

/* Tide active banner */
.veil-hub-modal .vh-section.tide-active .vh-tide-info {
  padding: 10px 14px; border-radius: 10px;
  font-family: 'Cinzel', serif; font-size: 13px; font-weight: 800;
  letter-spacing: 1px; text-align: center;
}
.veil-hub-modal .vh-tide-info.warden {
  background: linear-gradient(135deg, rgba(255,216,144,0.25), rgba(200,168,78,0.12));
  border: 1px solid rgba(255,216,144,0.5);
  color: #ffd890;
}
.veil-hub-modal .vh-tide-info.seeker {
  background: linear-gradient(135deg, rgba(180,80,255,0.22), rgba(120,60,200,0.12));
  border: 1px solid rgba(201,163,255,0.5);
  color: #c9a3ff;
}

/* Sources */
.veil-hub-modal .vh-sources {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
@media (max-width: 520px) {
  .veil-hub-modal .vh-sources { grid-template-columns: 1fr; }
  .veil-hub-modal .vh-mystats { grid-template-columns: 1fr; }
}
.veil-hub-modal .vh-src {
  font-size: 11.5px; color: #a895c0;
  padding: 7px 10px; background: rgba(0,0,0,0.3);
  border-left: 2px solid rgba(200,168,78,0.4);
  border-radius: 0 6px 6px 0;
}
.veil-hub-modal .vh-src b { color: #ffd890; font-family: 'Cinzel', serif; }

/* History */
.veil-hub-modal .vh-history { display: flex; flex-direction: column; gap: 4px; }
.veil-hub-modal .vh-hist-row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 10px; align-items: center;
  padding: 7px 10px; background: rgba(0,0,0,0.3); border-radius: 7px;
  font-size: 11.5px;
}
.veil-hub-modal .vh-hist-date { color: #8a7ca8; font-family: monospace; font-size: 10.5px; }
.veil-hub-modal .vh-hist-win { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: 1px; }
.veil-hub-modal .vh-hist-win.warden { color: #ffd890; }
.veil-hub-modal .vh-hist-win.seeker { color: #c9a3ff; }
.veil-hub-modal .vh-hist-tie { color: #8a7ca8; font-style: italic; }
.veil-hub-modal .vh-hist-score { font-family: 'Cinzel', serif; font-size: 11px; color: #fff; letter-spacing: 0.5px; }

/* Slim Veil War bar — sits above TO-DO section, no click target */
.home-vw-slim {
  max-width: 820px;
  margin: 0 auto 10px;
  padding: 8px 14px 10px;
  background: linear-gradient(180deg, rgba(24,14,48,0.7), rgba(12,6,24,0.85));
  border: 1px solid rgba(200,168,78,0.25);
  border-radius: 10px;
  pointer-events: none; /* purely informational, no interaction */
}
.home-vw-slim-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.home-vw-slim-title {
  font-family: 'Cinzel', serif; font-weight: 800;
  color: #ffd890; letter-spacing: 1.5px;
  font-size: 12px;
  flex-shrink: 0;
}
.home-vw-slim-meta {
  color: #a898c8; font-size: 11px;
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-vw-slim-meta b { color: #fff; font-weight: 700; }
.home-vw-slim-reset {
  color: #c9a3ff;
  font-size: 11px; font-weight: 700;
  font-family: monospace;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.home-vw-slim-reset::before { content: '\23F3 '; opacity: 0.7; }
.home-vw-slim-bar {
  display: flex; width: 100%; height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px; overflow: hidden;
  margin-bottom: 4px;
}
.home-vw-slim-fill { height: 100%; transition: width 0.5s ease; }
.home-vw-slim-fill.warden { background: linear-gradient(90deg, #c8a84e, #ffd890); }
.home-vw-slim-fill.seeker { background: linear-gradient(90deg, #c9a3ff, #7a3fd6); }
.home-vw-slim-pcts {
  display: flex; justify-content: space-between;
  font-size: 10px;
}
.home-vw-slim-pw { color: #ffd890; }
.home-vw-slim-ps { color: #c9a3ff; }
.home-vw-slim-pcts b { font-family: 'Cinzel', serif; font-weight: 800; letter-spacing: 0.5px; }

/* Veil orb label: reset countdown */
.veil-orb-label .vol-reset {
  display: block; margin-top: 3px;
  font-size: 9px; font-weight: 600;
  color: #a898c8;
  letter-spacing: 0.5px;
  font-family: monospace;
  opacity: 0.85;
}
.veil-orb-label .vol-reset::before { content: '⏳ '; opacity: 0.7; }

/* Mail inbox: sealed chest tease card (before claim) */
.mail-chest-tease {
  padding: 18px 16px !important;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,216,144,0.12), transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(180,80,255,0.15), transparent 55%),
    linear-gradient(180deg, rgba(20,10,40,0.85), rgba(8,4,18,0.95)) !important;
  border: 1px solid rgba(200,168,78,0.4) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.mail-chest-tease-inner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
}
.mail-chest-tease-orb {
  position: relative; width: 58px; height: 58px; flex-shrink: 0;
  animation: mailChestFloat 3s ease-in-out infinite;
}
@keyframes mailChestFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.mail-chest-tease-w, .mail-chest-tease-s {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}
.mail-chest-tease-w {
  left: 0; top: 0;
  background: radial-gradient(circle at 35% 35%, #fff1c8, #ffd890 35%, #c8a84e 70%, #8a6a1a 100%);
  color: rgba(255,216,144,0.5);
}
.mail-chest-tease-s {
  right: 0; bottom: 0;
  background: radial-gradient(circle at 35% 35%, #e8d1ff, #c9a3ff 25%, #7a3fd6 60%, #2a1050 100%);
  color: rgba(201,163,255,0.5);
}
.mail-chest-tease-text { flex: 1; min-width: 0; }
.mail-chest-tease-title {
  font-family: 'Cinzel', serif; font-size: 14px; font-weight: 800;
  color: #ffd890; letter-spacing: 1.5px; margin-bottom: 3px;
}
.mail-chest-tease-sub {
  font-size: 11px; color: #a898c8; font-style: italic;
}
.mail-chest-tease .mail-chest-btn {
  width: 100%;
  background: linear-gradient(135deg, #ffd890 0%, #c9a3ff 100%) !important;
  color: #1a0e00 !important;
  border: none !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  letter-spacing: 3px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(201,163,255,0.35) !important;
  cursor: pointer;
  transition: transform 0.15s;
}
.mail-chest-tease .mail-chest-btn:hover { transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════
   FACTION VICTORY CHEST — Star Mandala animation + reward modal.
   Opened from mail attachment with kind:'factionChest'.
   ══════════════════════════════════════════════════════════ */
.fchest-overlay {
  position: fixed; inset: 0; z-index: 12000;
  background: rgba(3,1,10,0.96);
  display: flex; align-items: center; justify-content: center;
  padding: 20px 10px;
  overflow-y: auto;
  animation: fchFadeIn 0.25s ease;
}
.fchest-overlay.closing { animation: fchFadeOut 0.2s ease forwards; }
@keyframes fchFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fchFadeOut { from { opacity: 1; } to { opacity: 0; } }
.fchest-modal {
  position: relative; width: 100%; max-width: 540px;
  margin: auto;
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 20px 20px;
  background: linear-gradient(180deg, #140828 0%, #0a0418 100%);
  border: 1px solid rgba(200,168,78,0.4);
  border-radius: 16px;
  box-shadow: 0 14px 50px rgba(0,0,0,0.8);
}
.fchest-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(200,168,78,0.1); border: 1px solid rgba(200,168,78,0.3);
  color: #c8a84e; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fchest-head { text-align: center; margin-bottom: 12px; }
.fchest-title {
  font-family: 'Cinzel', serif; font-size: 20px; font-weight: 900;
  letter-spacing: 4px; color: #ffd890;
  text-shadow: 0 0 20px rgba(255,216,144,0.4);
}
.fchest-sub { font-size: 11px; color: #a898c8; font-style: italic; margin-top: 4px; }

.fchest-stage {
  position: relative; width: 100%; max-width: 460px; height: 420px;
  display: flex; align-items: center; justify-content: center;
}

/* Conjoined sigil (clickable trigger) */
.fchest-sigil {
  position: relative; width: 180px; height: 180px;
  cursor: pointer; transition: transform 0.3s;
  animation: fchSigilFloat 3s ease-in-out infinite;
}
@keyframes fchSigilFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.fchest-sigil:hover { transform: scale(1.04); }
.fchest-sigil.active { cursor: default; pointer-events: none; animation: none; }
.fchest-sigil-w {
  position: absolute; left: 0; top: 0; width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff1c8 0%, #ffd890 35%, #c8a84e 70%, #8a6a1a 100%);
  box-shadow: 0 0 32px rgba(255,216,144,0.65), inset 0 -8px 16px rgba(138,106,26,0.5);
  border: 2px solid rgba(255,255,255,0.15);
}
.fchest-sigil-s {
  position: absolute; right: 0; bottom: 0; width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e8d1ff 0%, #c9a3ff 25%, #7a3fd6 60%, #2a1050 100%);
  box-shadow: 0 0 32px rgba(201,163,255,0.65), inset 0 -8px 16px rgba(42,16,80,0.5);
  border: 2px solid rgba(255,255,255,0.15);
}
.fchest-sigil.active .fchest-sigil-w, .fchest-sigil.active .fchest-sigil-s {
  animation: fchSigilFadeOut 0.8s ease-out forwards;
}
@keyframes fchSigilFadeOut {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.5); }
}

/* Stars */
.fchest-star {
  position: absolute;
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px #fff, 0 0 18px #ffd890;
  opacity: 0; pointer-events: none;
  left: var(--fx); top: var(--fy);
  transform: translate(-50%, -50%);
}
.fchest-star.s2 { box-shadow: 0 0 10px #fff, 0 0 18px #c9a3ff; }
.fchest-star.converge { animation: fchStarFly 1.1s cubic-bezier(0.4,0.1,0.25,1) forwards; }
@keyframes fchStarFly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  15%  { opacity: 1; }
  100% {
    opacity: 1;
    left: calc(50% + var(--tx));
    top:  calc(50% + var(--ty));
    transform: translate(-50%, -50%) scale(1);
  }
}
.fchest-star.assembled { animation: fchStarPulse 1.8s ease-in-out; }
@keyframes fchStarPulse {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50%     { transform: translate(-50%, -50%) scale(1.5);
            box-shadow: 0 0 20px #fff, 0 0 36px #ffd890, 0 0 54px rgba(255,216,144,0.6); }
}
.fchest-star.assembled.s2 { animation: fchStarPulseS 1.8s ease-in-out; }
@keyframes fchStarPulseS {
  0%,100% { transform: translate(-50%, -50%) scale(1); }
  50%     { transform: translate(-50%, -50%) scale(1.5);
            box-shadow: 0 0 20px #fff, 0 0 36px #c9a3ff, 0 0 54px rgba(201,163,255,0.6); }
}
.fchest-star.fchest-burst { animation: fchStarBurst 0.9s cubic-bezier(0.5,0.1,0.6,0.9) forwards; }
@keyframes fchStarBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  100% {
    opacity: 0;
    left: calc(50% + var(--ex));
    top:  calc(50% + var(--ey));
    transform: translate(-50%, -50%) scale(0.2);
  }
}

/* Rings */
.fchest-ring {
  position: absolute; left: 50%; top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255,216,144,0.25);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}
.fchest-ring.inner { border-color: rgba(201,163,255,0.3); }
.fchest-stage.assembled .fchest-ring.outer { animation: fchRingDraw 1.2s ease-out 0.1s forwards; }
.fchest-stage.assembled .fchest-ring.inner { animation: fchRingDraw 1.2s ease-out 0.3s forwards; }
@keyframes fchRingDraw {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}

/* Burst flash */
.fchest-flash {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255,216,144,0.7) 30%, transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: 0;
}
.fchest-stage.burst .fchest-flash { animation: fchFlashBurst 0.55s ease-out forwards; }
@keyframes fchFlashBurst {
  0%   { width: 0; height: 0; opacity: 0; }
  30%  { width: 420px; height: 420px; opacity: 1; }
  100% { width: 640px; height: 640px; opacity: 0; }
}

/* Reward tiles */
.fchest-reward {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.fchest-stage.show-reward .fchest-reward {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.6s cubic-bezier(0.22,1.2,0.4,1) 0.1s;
  pointer-events: auto;
}
.fchest-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px;
  min-width: 260px;
  background: radial-gradient(ellipse at center, rgba(30,15,60,0.96), rgba(8,3,18,0.98));
  border: 1px solid #6b4ec0;
  border-radius: 40px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
  transform: translateY(20px); opacity: 0;
  position: relative;
}
.fchest-tile::before {
  content: ''; position: absolute; inset: -2px;
  border-radius: 40px; padding: 2px;
  background: linear-gradient(90deg, #ffd890, #c9a3ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.fchest-stage.show-reward .fchest-tile { animation: fchTileRise 0.5s cubic-bezier(0.22,1.4,0.4,1) forwards; }
.fchest-stage.show-reward .fchest-tile:nth-child(1) { animation-delay: 0.3s; }
.fchest-stage.show-reward .fchest-tile:nth-child(2) { animation-delay: 0.45s; }
.fchest-stage.show-reward .fchest-tile:nth-child(3) { animation-delay: 0.6s; }
@keyframes fchTileRise { to { transform: translateY(0); opacity: 1; } }
.fchest-ricon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fchest-ricon img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,216,144,0.4)); }
.fchest-ricon-emoji { font-size: 28px; filter: drop-shadow(0 0 6px currentColor); }
.fchest-tile.item[data-rarity="legendary"] .fchest-ricon img { filter: drop-shadow(0 0 10px rgba(255,154,60,0.7)); }
.fchest-tile.item[data-rarity="mythic"] .fchest-ricon img { filter: drop-shadow(0 0 12px rgba(255,60,255,0.8)); }
.fchest-rlabel { font-size: 10px; color: #a898c8; letter-spacing: 1.5px; text-transform: uppercase; }
.fchest-rvalue { font-family: 'Cinzel', serif; font-size: 18px; font-weight: 800; color: #ffd890; }
.fchest-tile.item[data-rarity="epic"]      { border-color: #a060e0; }
.fchest-tile.item[data-rarity="legendary"] { border-color: #ff9a3c; box-shadow: 0 0 22px rgba(255,154,60,0.4); }
.fchest-tile.item[data-rarity="mythic"]    { border-color: #ff3cff; animation: fchMythic 2s ease-in-out infinite; }
@keyframes fchMythic {
  0%,100% { box-shadow: 0 0 28px rgba(255,60,255,0.5); }
  50%     { box-shadow: 0 0 48px rgba(255,60,255,0.9); }
}
.fchest-rrarity { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; margin-top: 2px; }
.fchest-rrarity[data-r="epic"]      { color: #a060e0; }
.fchest-rrarity[data-r="legendary"] { color: #ff9a3c; }
.fchest-rrarity[data-r="mythic"]    { color: #ff3cff; }

.fchest-prompt {
  position: absolute; bottom: -10px; left: 0; right: 0; text-align: center;
  color: #ffd890; letter-spacing: 3px; font-size: 12px;
  animation: fchPromptPulse 1.8s ease-in-out infinite;
}
.fchest-stage.active .fchest-prompt { display: none; }
@keyframes fchPromptPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }

.fchest-claim {
  margin-top: 18px; padding: 12px 44px;
  background: linear-gradient(135deg, #ffd890 0%, #c9a3ff 100%);
  border: none; border-radius: 40px;
  color: #1a0e00; font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 14px; letter-spacing: 4px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(201,163,255,0.5);
  transition: transform 0.15s;
}
.fchest-claim:hover:not(:disabled) { transform: translateY(-2px); }
.fchest-claim:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 560px) {
  .fchest-stage { height: 380px; }
  .fchest-tile { min-width: 220px; padding: 7px 14px; }
  .fchest-ricon { font-size: 24px; width: 32px; }
  .fchest-rvalue { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   VP ICON — pure-CSS eclipse (Warden top half / Seeker bottom)
   Use <span class="vp-icon"></span> after any VP number.
   ══════════════════════════════════════════════════════════ */
.vp-icon {
  display: inline-block;
  width: 16px; height: 16px;
  vertical-align: -3px;
  margin-left: 3px;
  background: url('../img/veil-vp.png') center/contain no-repeat;
  background-size: 100% 100%;
  flex-shrink: 0;
  image-rendering: -webkit-optimize-contrast;
}
.vp-icon.lg { width: 22px; height: 22px; vertical-align: -5px; margin-left: 4px; }
.vp-icon.sm { width: 13px; height: 13px; vertical-align: -2px; margin-left: 2px; }

/* Hub v2: Explainer (how it works) */
.veil-hub-modal .vh-explainer .vh-ex-body {
  display: flex; flex-direction: column; gap: 9px;
  font-size: 12.5px; color: #d8d0e8; line-height: 1.55;
}
.veil-hub-modal .vh-explainer .vh-ex-body p { margin: 0; white-space: pre-line; }
.veil-hub-modal .vh-explainer .vh-ex-body b {
  color: #ffd890; font-family: 'Cinzel', serif;
  font-size: 12px; letter-spacing: 0.5px;
  display: block; margin-bottom: 2px;
}

/* Hub v2: VP sources as a clean table */
.veil-hub-modal .vh-sources-table {
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(0,0,0,0.22); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  padding: 4px;
}
.veil-hub-modal .vh-src-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 6px;
  font-size: 12px;
}
.veil-hub-modal .vh-src-row:hover { background: rgba(255,215,0,0.05); }
.veil-hub-modal .vh-src-icon { font-size: 15px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.veil-hub-modal .vh-src-img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 4px rgba(255,216,144,0.3)); }
.veil-hub-modal .vh-src-name { color: #ccc; }
.veil-hub-modal .vh-src-val {
  font-family: 'Cinzel', serif; font-weight: 800;
  color: #fff; font-size: 12px;
  letter-spacing: 0.3px;
}
.veil-hub-modal .vh-src-hint {
  color: #c9a3ff; font-size: 10px; font-weight: 600;
  margin-left: 4px;
}

/* Hub v2: VP source breakdown */
.veil-hub-modal .vh-sources-breakdown {
  margin-top: 12px; padding: 10px 12px;
  background: rgba(0,0,0,0.25); border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
}
.veil-hub-modal .vh-sbd-title {
  font-size: 10px; color: #8a7ca8; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 8px; font-weight: 700;
}
.veil-hub-modal .vh-sbd-row {
  display: grid; grid-template-columns: 110px 1fr auto;
  gap: 8px; align-items: center; margin-bottom: 5px;
  font-size: 11px;
}
.veil-hub-modal .vh-sbd-lbl { color: #ccc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.veil-hub-modal .vh-sbd-bar {
  height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden;
}
.veil-hub-modal .vh-sbd-fill {
  height: 100%; border-radius: 3px;
}
.veil-hub-modal .vh-sbd-fill.warden { background: linear-gradient(90deg, #ffd890, #c8a84e); }
.veil-hub-modal .vh-sbd-fill.seeker { background: linear-gradient(90deg, #c9a3ff, #7a3fd6); }
.veil-hub-modal .vh-sbd-val { color: #fff; font-weight: 700; min-width: 40px; text-align: right; font-family: 'Cinzel', serif; font-size: 11px; }

/* Hub v2: Faction change button */
.veil-hub-modal .vh-change-row {
  margin-top: 12px; text-align: center;
}
.veil-hub-modal .vh-change-btn {
  background: rgba(200,168,78,0.12); color: #ffd890;
  border: 1px solid rgba(200,168,78,0.35); border-radius: 8px;
  padding: 8px 18px; font-weight: 700; font-size: 12px; letter-spacing: 0.5px;
  cursor: pointer; transition: all 0.15s;
}
.veil-hub-modal .vh-change-btn:hover:not(:disabled) {
  background: rgba(200,168,78,0.25); color: #fff;
}
.veil-hub-modal .vh-change-btn:disabled {
  opacity: 0.45; cursor: not-allowed; background: rgba(255,255,255,0.04); color: #999; border-color: rgba(255,255,255,0.1);
}

/* Hub v2: Top contributors */
.veil-hub-modal .vh-top-wrap { min-height: 40px; }
.veil-hub-modal .vh-top-loading { text-align: center; color: #8a7ca8; font-size: 11px; padding: 10px; font-style: italic; }
.veil-hub-modal .vh-top-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.veil-hub-modal .vh-top-col {
  background: rgba(0,0,0,0.25); border-radius: 8px;
  padding: 8px 10px; border: 1px solid rgba(255,255,255,0.04);
}
.veil-hub-modal .vh-top-col.warden { border-color: rgba(200,168,78,0.25); }
.veil-hub-modal .vh-top-col.seeker { border-color: rgba(140,80,220,0.25); }
.veil-hub-modal .vh-top-col-head {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 12px;
  text-align: center; margin-bottom: 6px; letter-spacing: 1px;
}
.veil-hub-modal .vh-top-col.warden .vh-top-col-head { color: #ffd890; }
.veil-hub-modal .vh-top-col.seeker .vh-top-col-head { color: #c9a3ff; }
.veil-hub-modal .vh-top-empty {
  color: #666; font-size: 10px; text-align: center; padding: 10px 0; font-style: italic;
}
.veil-hub-modal .vh-top-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px;
  align-items: center; padding: 3px 0; font-size: 11px;
}
.veil-hub-modal .vh-top-rank { color: #8a7ca8; font-weight: 700; min-width: 22px; font-size: 10px; }
.veil-hub-modal .vh-top-name {
  color: #ddd; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.veil-hub-modal .vh-top-vp {
  color: #fff; font-family: 'Cinzel', serif; font-size: 10.5px; font-weight: 700;
}

@media (max-width: 520px) {
  .veil-hub-modal { padding: 20px 14px 16px; }
  .veil-hub-modal .vh-title { font-size: 18px; letter-spacing: 2.5px; }
  .veil-hub-modal .vh-eclipse { width: 100px; height: 100px; }
  .veil-hub-modal .vh-fac-pct { font-size: 22px; }
  .veil-hub-modal .vh-fac-vs { font-size: 15px; }
}

/* ────────────────────────────────────────────────────────────
   (Legacy top-bar meter styles — kept in case of rollback)
   ──────────────────────────────────────────────────────────── */
.veil-meter {
  position: relative; z-index: 100;
  width: 100%;
  padding: 6px 12px 4px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,216,144,0.08), transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(180,80,255,0.1), transparent 55%),
    linear-gradient(180deg, rgba(12,4,24,0.98) 0%, rgba(20,10,40,0.96) 50%, rgba(12,4,24,0.98) 100%);
  border-bottom: 1px solid rgba(200,168,78,0.3);
  box-shadow: 0 2px 10px rgba(0,0,0,0.5), inset 0 -1px 0 rgba(200,168,78,0.15);
  font-family: 'Cinzel', serif;
  cursor: pointer;
  transition: background 0.3s;
  user-select: none;
}
.veil-meter:hover {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,216,144,0.14), transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(180,80,255,0.18), transparent 55%),
    linear-gradient(180deg, rgba(16,6,30,1) 0%, rgba(26,14,50,1) 50%, rgba(16,6,30,1) 100%);
}

/* Frame — holds the main meter */
.veil-meter .vm-frame {
  position: relative;
  display: flex; align-items: stretch;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), rgba(0,0,0,0.85));
  box-shadow:
    inset 0 0 0 1px rgba(200,168,78,0.35),
    inset 0 0 16px rgba(0,0,0,0.6);
  overflow: hidden;
}

/* Corner brackets */
.veil-meter .vm-bracket {
  position: absolute; width: 10px; height: 10px;
  pointer-events: none; z-index: 5;
}
.veil-meter .vm-bracket.tl { top: -1px; left: -1px;
  border-top: 2px solid #c8a84e; border-left: 2px solid #c8a84e;
  border-top-left-radius: 6px; filter: drop-shadow(0 0 4px rgba(200,168,78,0.5)); }
.veil-meter .vm-bracket.tr { top: -1px; right: -1px;
  border-top: 2px solid #c8a84e; border-right: 2px solid #c8a84e;
  border-top-right-radius: 6px; filter: drop-shadow(0 0 4px rgba(200,168,78,0.5)); }
.veil-meter .vm-bracket.bl { bottom: -1px; left: -1px;
  border-bottom: 2px solid #c8a84e; border-left: 2px solid #c8a84e;
  border-bottom-left-radius: 6px; filter: drop-shadow(0 0 4px rgba(200,168,78,0.5)); }
.veil-meter .vm-bracket.br { bottom: -1px; right: -1px;
  border-bottom: 2px solid #c8a84e; border-right: 2px solid #c8a84e;
  border-bottom-right-radius: 6px; filter: drop-shadow(0 0 4px rgba(200,168,78,0.5)); }

/* Each side (Warden / Seeker) */
.veil-meter .vm-side {
  position: relative;
  display: flex; align-items: center;
  transition: flex-basis 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  min-width: 90px;
  overflow: hidden;
}
.veil-meter .vm-side.warden {
  justify-content: flex-start; padding-left: 6px;
}
.veil-meter .vm-side.seeker {
  justify-content: flex-end; padding-right: 6px;
}

/* Animated faction fill — tinted background that grows/shrinks */
.veil-meter .vm-fill {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
.veil-meter .vm-side.warden .vm-fill {
  background: linear-gradient(90deg, rgba(255,216,144,0.4) 0%, rgba(200,168,78,0.22) 55%, rgba(200,168,78,0.08) 100%);
  box-shadow: inset 2px 0 0 rgba(255,216,144,0.6);
}
.veil-meter .vm-side.seeker .vm-fill {
  background: linear-gradient(270deg, rgba(180,80,255,0.4) 0%, rgba(140,60,220,0.22) 55%, rgba(100,40,180,0.08) 100%);
  box-shadow: inset -2px 0 0 rgba(201,163,255,0.6);
}
/* Leading side pulses glow */
.veil-meter .vm-side.leading.warden .vm-fill {
  animation: vmWardenPulse 3s ease-in-out infinite;
}
.veil-meter .vm-side.leading.seeker .vm-fill {
  animation: vmSeekerPulse 3s ease-in-out infinite;
}
@keyframes vmWardenPulse {
  0%,100% { background: linear-gradient(90deg, rgba(255,216,144,0.4) 0%, rgba(200,168,78,0.22) 55%, rgba(200,168,78,0.08) 100%); }
  50%     { background: linear-gradient(90deg, rgba(255,236,180,0.55) 0%, rgba(200,168,78,0.35) 55%, rgba(200,168,78,0.12) 100%); }
}
@keyframes vmSeekerPulse {
  0%,100% { background: linear-gradient(270deg, rgba(180,80,255,0.4) 0%, rgba(140,60,220,0.22) 55%, rgba(100,40,180,0.08) 100%); }
  50%     { background: linear-gradient(270deg, rgba(220,120,255,0.55) 0%, rgba(170,90,240,0.35) 55%, rgba(120,50,200,0.12) 100%); }
}

/* Sigil — faction icon circle */
.veil-meter .vm-sigil {
  position: relative; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid;
}
.veil-meter .vm-sigil.warden {
  background: radial-gradient(circle at 30% 30%, #ffd890, #8a6a1a);
  border-color: #ffd890;
  box-shadow: 0 0 10px rgba(255,216,144,0.55), inset 0 0 6px rgba(255,255,255,0.2);
}
.veil-meter .vm-sigil.seeker {
  background: radial-gradient(circle at 30% 30%, #c9a3ff, #4a1d82);
  border-color: #c9a3ff;
  box-shadow: 0 0 10px rgba(201,163,255,0.55), inset 0 0 6px rgba(255,255,255,0.2);
}
.veil-meter .vm-sigil-icon { font-size: 13px; filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); }

/* Name + % */
.veil-meter .vm-info {
  position: relative; z-index: 2;
  display: flex; align-items: baseline; gap: 6px;
  padding: 0 8px;
  min-width: 0; overflow: hidden;
}
.veil-meter .vm-name {
  font-family: 'Cinzel', serif;
  font-size: 10px; font-weight: 900;
  letter-spacing: 2.5px; text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
}
.veil-meter .vm-side.warden .vm-name { color: #ffd890; }
.veil-meter .vm-side.seeker .vm-name { color: #c9a3ff; }
.veil-meter .vm-pct {
  font-family: 'Cinzel', serif;
  font-size: 17px; font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.veil-meter .vm-side.warden .vm-pct {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,216,144,0.6), 0 1px 3px rgba(0,0,0,0.8);
}
.veil-meter .vm-side.seeker .vm-pct {
  color: #fff;
  text-shadow: 0 0 8px rgba(201,163,255,0.6), 0 1px 3px rgba(0,0,0,0.8);
}
.veil-meter .vm-pct-mark {
  font-size: 10px; opacity: 0.65; margin-left: 1px;
}

/* Center piece — crossed swords + countdown */
.veil-meter .vm-center {
  position: relative; z-index: 3; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 8px;
  background: linear-gradient(180deg, rgba(12,4,24,1), rgba(28,14,52,1));
  border-left:  1px solid rgba(200,168,78,0.4);
  border-right: 1px solid rgba(200,168,78,0.4);
  box-shadow: 0 0 14px rgba(200,168,78,0.25);
}
.veil-meter .vm-center-swords {
  font-size: 15px; color: #c8a84e; line-height: 1;
  text-shadow: 0 0 8px rgba(200,168,78,0.65);
  transform: rotate(-5deg);
}
.veil-meter .vm-center-timer {
  font-family: 'Cinzel', serif;
  font-size: 9px; font-weight: 800; letter-spacing: 1px;
  color: #fff; margin-top: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.veil-meter .vm-tide-lbl {
  color: #c8a84e; margin-right: 2px; letter-spacing: 1.5px;
}

/* Bottom mini-strip — player contribution */
.veil-meter .vm-mystat {
  display: flex; align-items: center; gap: 5px;
  margin-top: 3px; padding: 2px 8px;
  font-family: 'Cinzel', serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 1.2px;
  width: fit-content;
  background: rgba(0,0,0,0.35);
  border-radius: 0 0 6px 6px;
  border-left: 1px solid rgba(200,168,78,0.2);
  border-right: 1px solid rgba(200,168,78,0.2);
  border-bottom: 1px solid rgba(200,168,78,0.2);
  margin-left: auto; margin-right: auto;
}
.veil-meter .vm-mystat.warden { color: #ffd890; }
.veil-meter .vm-mystat.seeker { color: #c9a3ff; }
.veil-meter .vm-mystat-icon { font-size: 11px; filter: drop-shadow(0 0 3px currentColor); }
.veil-meter .vm-mystat-lbl { text-transform: uppercase; }
.veil-meter .vm-mystat-sep { opacity: 0.5; margin: 0 2px; }
.veil-meter .vm-mystat-val { color: #fff; letter-spacing: 0.5px; }
.veil-meter .vm-mystat-unit { opacity: 0.6; font-size: 8.5px; }

/* Mobile tightening */
@media (max-width: 560px) {
  .veil-meter { padding: 4px 8px 3px; }
  .veil-meter .vm-frame { height: 28px; }
  .veil-meter .vm-sigil { width: 22px; height: 22px; }
  .veil-meter .vm-sigil-icon { font-size: 11px; }
  .veil-meter .vm-info { padding: 0 5px; gap: 4px; }
  .veil-meter .vm-name { font-size: 8.5px; letter-spacing: 1.5px; }
  .veil-meter .vm-pct { font-size: 14px; }
  .veil-meter .vm-center { padding: 0 5px; }
  .veil-meter .vm-center-swords { font-size: 12px; }
  .veil-meter .vm-center-timer { font-size: 7.5px; }
}

/* Faction choice modal */
.veil-choice-modal {
  padding: 24px 20px; max-width: 560px; margin: 0 auto;
}
.veil-choice-head { text-align: center; margin-bottom: 22px; }
.veil-choice-title {
  font-family: 'Cinzel', serif; font-size: 28px; font-weight: 900;
  color: #ffd890; letter-spacing: 4px;
  text-shadow: 0 0 24px rgba(255,216,144,0.5);
  margin-bottom: 10px;
}
.veil-choice-sub {
  font-size: 13px; color: #a895c0; line-height: 1.5;
  max-width: 440px; margin: 0 auto;
}
.veil-choice-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 520px) {
  .veil-choice-cards { grid-template-columns: 1fr; }
}
.veil-choice-card {
  position: relative;
  padding: 22px 16px 18px; border-radius: 16px;
  cursor: pointer; text-align: center;
  transition: transform 0.18s, box-shadow 0.2s, border-color 0.2s, opacity 0.2s;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.veil-choice-card.vcc-busy { pointer-events: none; opacity: 0.55; }
.veil-choice-card.vcc-pressed {
  transform: scale(0.96);
  box-shadow: 0 0 40px rgba(255,216,144,0.6), inset 0 0 40px rgba(255,216,144,0.15);
}
.veil-choice-card.vcc-pressed.seeker {
  box-shadow: 0 0 40px rgba(201,163,255,0.6), inset 0 0 40px rgba(140,80,220,0.2);
}
.veil-choice-card.warden {
  background: linear-gradient(180deg, rgba(255,216,144,0.12), rgba(138,106,26,0.18));
  border: 2px solid rgba(255,216,144,0.45);
  color: #ffd890;
}
.veil-choice-card.seeker {
  background: linear-gradient(180deg, rgba(140,80,220,0.18), rgba(60,20,100,0.22));
  border: 2px solid rgba(201,163,255,0.45);
  color: #c9a3ff;
}
.veil-choice-card:hover {
  transform: translateY(-4px);
}
.veil-choice-card.warden:hover {
  box-shadow: 0 0 30px rgba(255,216,144,0.45), inset 0 0 30px rgba(255,216,144,0.12);
  border-color: #ffd890;
}
.veil-choice-card.seeker:hover {
  box-shadow: 0 0 30px rgba(201,163,255,0.5), inset 0 0 30px rgba(140,80,220,0.18);
  border-color: #c9a3ff;
}
.veil-choice-card .vcc-icon {
  font-size: 54px; margin-bottom: 6px; line-height: 1;
  filter: drop-shadow(0 0 18px currentColor);
}
.veil-choice-card .vcc-name {
  font-family: 'Cinzel', serif; font-size: 22px; font-weight: 900;
  letter-spacing: 3px; margin-bottom: 8px;
  text-transform: uppercase;
}
/* v23.0.891 — live faction split % + underdog tag on each card. */
.veil-choice-card .vcc-pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(220, 200, 240, 0.75);
  margin: -4px 0 10px;
  letter-spacing: 0.4px;
}
.veil-choice-card .vcc-pct-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  background: linear-gradient(90deg, rgba(255,180,60,0.25), rgba(255,140,30,0.18));
  border: 1px solid rgba(255,180,60,0.55);
  border-radius: 999px;
  color: #ffd28a;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.veil-choice-card.warden .vcc-pct-tag,
.veil-choice-card.seeker .vcc-pct-tag {
  /* same tag styling on both — tag conveys "underdog" not faction colour */
}
.veil-choice-card .vcc-lore {
  font-size: 11.5px; color: #c2b3db; line-height: 1.5;
  min-height: 50px;
  font-family: 'Inter', sans-serif;
}
.veil-choice-card .vcc-ratio {
  margin-top: 10px; padding: 4px 10px;
  background: rgba(0,0,0,0.4); border-radius: 12px;
  display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: 1.5px; color: inherit;
}
.veil-choice-card.underdog {
  animation: veilUnderdogPulse 2s ease-in-out infinite;
}
@keyframes veilUnderdogPulse {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.veil-choice-card .vcc-underdog {
  margin-top: 10px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(200,168,78,0.2), rgba(138,106,26,0.15));
  border: 1px solid rgba(255,216,144,0.5);
  border-radius: 10px;
  color: #fff;
  display: block;
  box-shadow: 0 0 18px rgba(255,216,144,0.25);
  animation: veilUnderdogPulse 2.2s ease-in-out infinite;
}
.veil-choice-card .vcc-underdog-title {
  font-family: 'Cinzel', serif; font-weight: 900;
  font-size: 10px; letter-spacing: 1.5px;
  color: #ffd890; margin-bottom: 6px;
  text-transform: uppercase; text-align: center;
}
.veil-choice-card .vcc-underdog-rows {
  display: flex; flex-direction: column; gap: 3px;
}
.veil-choice-card .vcc-ub-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #fff;
  justify-content: flex-start;
}
.veil-choice-card .vcc-ub-ico {
  font-size: 12px; flex-shrink: 0; width: 16px; text-align: center;
}
.veil-choice-card .vcc-ub-starter {
  margin-top: 2px; padding-top: 5px;
  border-top: 1px dashed rgba(255,216,144,0.3);
  color: #ffd890;
  text-shadow: 0 0 8px rgba(255,216,144,0.4);
}
.veil-choice-foot {
  text-align: center; font-size: 10.5px; color: #8a7ca8;
  margin-top: 6px; letter-spacing: 0.3px; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT METHOD PICKER MODAL (Stripe / PayPal)
   ═══════════════════════════════════════════════════════════ */
.gv-pay-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gv-pay-modal-bg { position: absolute; inset: 0; background: rgba(8, 6, 16, 0.78); backdrop-filter: blur(4px); cursor: pointer; }
.gv-pay-modal-content {
  position: relative; z-index: 1;
  background: linear-gradient(165deg, #1a1428 0%, #0f0a1e 100%);
  border: 1px solid rgba(255, 215, 130, 0.22);
  border-radius: 14px; padding: 24px 22px 22px;
  width: 100%; max-width: 380px;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 215, 130, 0.05) inset;
}
.gv-pay-modal-close {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: 0; color: #b8a8d8;
  font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.gv-pay-modal-close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.gv-pay-title {
  text-align: center; font-size: 16px; font-weight: 700;
  color: #ffd782; letter-spacing: 0.4px; margin-bottom: 18px;
  text-transform: uppercase;
}
.gv-pay-method-btn {
  width: 100%; padding: 14px 16px; border-radius: 10px; border: 0;
  font-size: 14px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.gv-pay-method-btn.gv-pay-stripe {
  background: linear-gradient(135deg, #5c7cfa 0%, #4361ee 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(67, 97, 238, 0.35);
}
.gv-pay-method-btn.gv-pay-stripe:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gv-pay-stripe-icon { font-size: 17px; }
.gv-pay-or {
  text-align: center; margin: 16px 0 14px; position: relative;
  color: #7a6c95; font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
}
.gv-pay-or::before, .gv-pay-or::after {
  content: ""; position: absolute; top: 50%; width: 38%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 130, 0.22));
}
.gv-pay-or::before { left: 0; }
.gv-pay-or::after { right: 0; transform: scaleX(-1); }
.gv-pay-or span { background: #0f0a1e; padding: 0 10px; position: relative; z-index: 1; }
.gv-pay-paypal-container { min-height: 48px; }
.gv-pay-loading {
  text-align: center; padding: 14px; color: #8a7ca8; font-size: 13px;
}
.gv-pay-error {
  text-align: center; padding: 12px; color: #ffb1b1; font-size: 12px;
  background: rgba(255, 80, 80, 0.08); border-radius: 8px;
}
@media (max-width: 480px) {
  .gv-pay-modal-content { padding: 20px 16px 16px; max-width: 340px; }
  .gv-pay-title { font-size: 14px; margin-bottom: 14px; }
  .gv-pay-method-btn { padding: 12px 14px; font-size: 13px; }
}

.gv-pay-stripe-foot {
  text-align: center; margin-top: 8px;
  font-size: 11px; color: #7a6c95; letter-spacing: 0.3px;
}
.gv-pay-stripe-foot span {
  color: #635bff; font-weight: 700;
}