/* ===== Carpediem custom styles =====
   Bootstrap 5 is loaded from base.html for layout, components, dark mode.
   This file only contains what Bootstrap doesn't cover out of the box. */

:root {
  --bg: #0f172a;
  --bg-card-2: #1e293b;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --success: #34d399;
  --ms-purple: #A855F7;
  --ms-purple-glow: #C084FC;
  --ms-purple-light: #E9D5FF;
  --ms-blue: #3B82F6;
  --ms-blue-glow: #60A5FA;
  --ms-blue-light: #DBEAFE;
  --ms-gradient: linear-gradient(135deg, var(--ms-purple) 0%, var(--ms-blue) 100%);
}

/* ===== Enhanced Background ===== */
/* Animated gradient background with multiple layers */
@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%, 100% 50%, 50% 0%;
  }

  33% {
    background-position: 100% 50%, 0% 50%, 50% 100%;
  }

  66% {
    background-position: 50% 100%, 50% 0%, 0% 50%;
  }
}

@keyframes gradient-hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
}

/* Layer 1: Deep base with animated gradient mesh */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(ellipse 100% 80% at 10% 0%, rgba(168, 85, 247, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse 80% 100% at 90% 100%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 50% 30%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 30% 70%, rgba(236, 72, 153, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 70% 20%, rgba(34, 197, 94, 0.06) 0%, transparent 65%),
    var(--bg);
  background-size: 200% 200%;
  animation: gradient-shift 20s ease-in-out infinite;
  pointer-events: none;
}

/* Layer 2: Subtle animated color wash */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background: linear-gradient(135deg,
      rgba(168, 85, 247, 0.02) 0%,
      rgba(59, 130, 246, 0.02) 25%,
      rgba(99, 102, 241, 0.015) 50%,
      rgba(236, 72, 153, 0.015) 75%,
      rgba(168, 85, 247, 0.02) 100%);
  background-size: 400% 400%;
  animation: gradient-shift 30s ease-in-out infinite;
  pointer-events: none;
}

/* Layer 3: Fine grid pattern with subtle motion (injected via JS) */
.grid-pattern {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(168, 85, 247, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: grid-drift 40s linear infinite;
  opacity: 0.6;
}

@keyframes grid-drift {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 80px 80px;
  }
}

/* Layer 4: Noise texture overlay for depth (injected via JS) */
.noise-texture {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: noise-shift 8s steps(10) infinite;
}

@keyframes noise-shift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  10% {
    transform: translate(-2px, 1px);
  }

  20% {
    transform: translate(1px, -1px);
  }

  30% {
    transform: translate(-1px, 2px);
  }

  40% {
    transform: translate(2px, -2px);
  }

  50% {
    transform: translate(-2px, -1px);
  }

  60% {
    transform: translate(1px, 2px);
  }

  70% {
    transform: translate(-1px, -2px);
  }

  80% {
    transform: translate(2px, 1px);
  }

  90% {
    transform: translate(-1px, 1px);
  }
}

/* Layer 5: Vignette for depth and focus (injected via JS) */
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(15, 23, 42, 0.35) 100%);
}

/* Layer 6: Floating particles - multiple ambient orbs */
.floating-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Large purple orb - top left */
.floating-particles::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  filter: blur(80px);
  background: radial-gradient(circle at 30% 30%, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0.08) 40%, transparent 70%);
  top: -50px;
  left: -50px;
  animation: particle-float-1 25s ease-in-out infinite;
}

/* Medium blue orb - bottom right */
.floating-particles::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.06) 45%, transparent 70%);
  bottom: -80px;
  right: -80px;
  animation: particle-float-2 20s ease-in-out infinite reverse;
}

/* Additional particles via child elements (added via JS) */
.floating-particles .particle {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  animation: particle-float-3 18s ease-in-out infinite;
}

.floating-particles .particle:nth-child(1) {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
  top: 20%;
  left: 15%;
  animation-delay: -2s;
}

.floating-particles .particle:nth-child(2) {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
  top: 60%;
  left: 80%;
  animation-delay: -6s;
}

.floating-particles .particle:nth-child(3) {
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.09) 0%, transparent 70%);
  bottom: 20%;
  right: 10%;
  animation-delay: -10s;
}

.floating-particles .particle:nth-child(4) {
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
  top: 40%;
  right: 20%;
  animation-delay: -14s;
}

@keyframes particle-float-1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }

  20% {
    transform: translate(40px, -30px) scale(1.08);
    opacity: 0.8;
  }

  40% {
    transform: translate(-25px, 35px) scale(0.95);
    opacity: 0.65;
  }

  60% {
    transform: translate(35px, 20px) scale(1.05);
    opacity: 0.75;
  }

  80% {
    transform: translate(-15px, -25px) scale(1.02);
    opacity: 0.7;
  }
}

@keyframes particle-float-2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.55;
  }

  25% {
    transform: translate(-35px, 25px) scale(1.1);
    opacity: 0.75;
  }

  50% {
    transform: translate(20px, -30px) scale(0.92);
    opacity: 0.6;
  }

  75% {
    transform: translate(-30px, -20px) scale(1.03);
    opacity: 0.7;
  }
}

@keyframes particle-float-3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.5;
  }

  16% {
    transform: translate(25px, -15px) scale(1.1) rotate(60deg);
    opacity: 0.7;
  }

  33% {
    transform: translate(-10px, 20px) scale(0.9) rotate(120deg);
    opacity: 0.55;
  }

  50% {
    transform: translate(20px, 15px) scale(1.05) rotate(180deg);
    opacity: 0.65;
  }

  66% {
    transform: translate(-20px, -10px) scale(1.0) rotate(240deg);
    opacity: 0.6;
  }

  83% {
    transform: translate(15px, -20px) scale(0.95) rotate(300deg);
    opacity: 0.55;
  }
}

/* Layer 7: Stars container (injected via JS) */
.stars-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.stars-layer .star {
  position: absolute;
  border-radius: 50%;
}

.stars-layer .spark {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: spark-drift var(--spark-duration, 15s) linear var(--spark-delay, 0s) infinite;
}

@keyframes star-twinkle {

  0%,
  100% {
    opacity: 0.15;
    transform: scale(0.7);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

@keyframes spark-drift {
  0% {
    transform: translateY(105vh) translateX(0) scale(0.5) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 0.9;
  }

  90% {
    opacity: 0.9;
  }

  100% {
    transform: translateY(-10vh) translateX(var(--drift-x, 80px)) scale(1.2) rotate(var(--drift-rot, 180deg));
    opacity: 0;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  body::before,
  body::after,
  .grid-pattern,
  .noise-texture,
  .floating-particles::before,
  .floating-particles::after,
  .floating-particles .particle,
  .stars-layer .star,
  .stars-layer .spark {
    animation: none !important;
  }

  .noise-texture {
    opacity: 0.015;
  }
}

/* Ensure main content stays above background layers */
main,
nav,
footer {
  position: relative;
  z-index: 10;
}

/* ===== Navbar Brand - MapleStory Leaf (Purple/Blue Theme) ===== */

.navbar-brand .ms-leaf {
  filter: drop-shadow(0 0 8px var(--ms-purple-glow)) drop-shadow(0 0 16px var(--ms-purple));
  animation: ms-leaf-pulse 3s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.navbar-brand:hover .ms-leaf {
  transform: rotate(-8deg) scale(1.1);
  filter: drop-shadow(0 0 12px var(--ms-purple-glow)) drop-shadow(0 0 24px var(--ms-purple)) drop-shadow(0 0 36px var(--ms-blue));
}

.navbar-brand .brand-text {
  font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fff 0%, var(--ms-purple-light) 25%, var(--ms-purple-glow) 50%, var(--ms-blue-glow) 75%, #fff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
  animation: brand-shimmer 4s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.navbar-brand:hover .brand-text {
  transform: scale(1.03);
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5));
}

@keyframes ms-leaf-pulse {

  0%,
  100% {
    filter: drop-shadow(0 0 8px var(--ms-purple-glow)) drop-shadow(0 0 16px var(--ms-purple));
  }

  50% {
    filter: drop-shadow(0 0 14px var(--ms-purple-glow)) drop-shadow(0 0 28px var(--ms-purple)) drop-shadow(0 0 42px var(--ms-blue));
  }
}

@keyframes brand-shimmer {

  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 200% center;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  .navbar-brand .ms-leaf,
  .navbar-brand .brand-text {
    animation: none;
  }
}

/* ===== Navbar Search Dropdown ===== */
#navbarSearch {
  position: relative;
}

@media (max-width: 991.98px) {
  #navbarSearch {
    margin-bottom: 0.75rem;
  }
}

#searchToggle {
  border-color: var(--ms-purple);
  color: var(--ms-purple);
  transition: all 0.2s ease;
}

#searchToggle:hover,
#searchToggle:focus {
  background: var(--ms-purple);
  color: #fff;
  border-color: var(--ms-purple);
  box-shadow: 0 0 12px var(--ms-purple-glow);
}

#searchToggle:focus-visible {
  outline: 2px solid var(--ms-purple-glow);
  outline-offset: 2px;
}

.search-shortcut {
  font-size: 0.65rem;
  padding: 0.1rem 0.3rem;
  background: var(--ms-purple);
  color: #fff;
  border-radius: 3px;
  margin-left: 0.25rem;
  opacity: 0.8;
}

#searchToggle:hover .search-shortcut {
  opacity: 1;
}

.search-dropdown {
  z-index: 1050;
  border-color: var(--ms-purple) !important;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 0 1px var(--ms-purple),
    0 0 24px var(--ms-purple-glow) !important;
  animation: searchDropdownIn 0.15s ease-out;
}

@keyframes searchDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-dropdown .input-group-text {
  color: var(--ms-purple);
  background: var(--bg-card-2);
  border-color: var(--ms-purple);
}

.search-dropdown .form-control {
  background: var(--bg);
  border-color: var(--ms-purple);
  color: var(--text);
  transition: box-shadow 0.2s, border-color 0.2s;
}

.search-dropdown .form-control:focus {
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25);
  border-color: var(--ms-purple-glow);
}

.search-dropdown .form-control::placeholder {
  color: var(--text-muted);
}

.search-dropdown .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-muted);
  background: var(--bg-card-2);
}

.search-dropdown .btn-outline-secondary:hover {
  background: var(--ms-purple);
  border-color: var(--ms-purple);
  color: #fff;
}

#searchClear {
  transition: transform 0.15s ease;
}

#searchClear:hover {
  transform: scale(1.1);
}

.search-hint kbd {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
}

/* ===== Search Results Dropdown ===== */
.search-results {
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.search-result-item {
  background: transparent;
  border-radius: 6px;
  transition: background 0.1s, transform 0.1s;
}

.search-result-item:hover,
.search-result-item.active {
  background: rgba(168, 85, 247, 0.12);
  transform: translateX(4px);
}

.search-result-item:focus-visible {
  outline: 2px solid var(--ms-purple-glow);
  outline-offset: -2px;
}

.search-result-item img {
  border: 2px solid var(--ms-purple);
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.search-result-item:hover img,
.search-result-item.active img {
  border-color: var(--ms-blue-glow);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.6);
}

/* ===== Char card with job background image ===== */
.char-card {
  position: relative;
  background: var(--bg-card-2);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--text);
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease-out, border-color 0.15s, box-shadow 0.15s;
}

.char-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(15, 23, 42, 0.55) 0%,
      rgba(15, 23, 42, 0.85) 60%,
      rgba(15, 23, 42, 0.95) 100%);
  z-index: 0;
}

.char-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    circle 180px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(192, 132, 252, 0.18) 0%,
    rgba(96, 165, 250, 0.08) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.char-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.15);
}

.char-card:hover::after {
  opacity: 1;
}

.char-card__img,
.char-card__body,
.char-card__uniform-info {
  transform: translateZ(25px);
  transform-style: preserve-3d;
}

.char-card__img {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  position: relative;
  z-index: 1;
  min-height: 180px;
  overflow: hidden;
}

.char-card__img img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  object-position: center 15%;
  image-rendering: pixelated;
  transition: transform 0.2s ease-out;
}

.char-card:hover .char-card__img img {
  transform: scale(1.05);
}

.char-card__body {
  padding: 0.75rem 1rem;
  position: relative;
  z-index: 1;
}

.char-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.char-card__exp,
.char-card__guild {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.char-card__guild {
  color: #e2e8f0;
  font-size: 0.75rem;
  margin-top: 0.3rem;
}

.placeholder {
  font-size: 3rem;
  color: var(--text-muted);
}

/* ===== Custom badges ===== */
.badge-job {
  background: linear-gradient(135deg, var(--ms-blue) 0%, #1e40af 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.45em 0.85em;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.badge-job:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.badge-liberado {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0.45em 0.85em;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.badge-liberado:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
}

.badge-luna {
  background: linear-gradient(135deg, var(--ms-purple) 0%, #6d28d9 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.45em 0.85em;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(168, 85, 247, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.badge-luna:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.badge-eu {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.45em 0.85em;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
}

.badge-eu:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.badge-leader {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.45em 0.85em;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}

.badge-leader:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.55);
}

/* ===== Badge alignment (char cards & character detail) ===== */
.char-card__meta,
.badges {
  --badge-min-height: 2.2rem;
}

.char-card__meta .badge,
.badges .badge {
  min-height: var(--badge-min-height);
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

.char-card__meta .badge-job,
.badges .badge-job {
  min-height: var(--badge-min-height);
}

.char-card__meta .badge-leader,
.badges .badge-leader {
  min-height: var(--badge-min-height);
  padding-top: 0.35em;
  padding-bottom: 0.35em;
}

/* Job badge standalone (character detail page) - solo wrap text */
.character-detail__info .badge-job {
  min-height: auto;
  display: inline-flex;
  white-space: nowrap;
}

/* badge-leader override removed to use unified styling above */

/* ===== Character detail ===== */
.character-detail {
  background: var(--bg-card-2);
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}

.character-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(15, 23, 42, 0.4) 0%,
      rgba(15, 23, 42, 0.85) 70%,
      rgba(15, 23, 42, 0.95) 100%);
  z-index: 0;
}

.character-detail__header {
  position: relative;
  z-index: 1;
}

.character-detail>* {
  position: relative;
  z-index: 1;
}

.character-detail__img {
  width: 160px;
  height: 160px;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.character-detail__img img {
  width: 170%;
  height: 170%;
  object-fit: contain;
  object-position: center 20%;
  image-rendering: pixelated;
}

.character-detail__info {
  position: relative;
  z-index: 1;
}

.character-detail__info h1 {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.character-detail__level {
  position: relative;
  z-index: 1;
  min-width: 90px;
}

.character-detail__level-label {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.character-detail__level-value {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  margin-top: 0.15rem;
}

@media (max-width: 767.98px) {
  .character-detail__header {
    flex-direction: column;
    align-items: center !important;
    text-align: center;
    gap: 1rem !important;
  }
  .character-detail__info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .character-detail__info .badges {
    justify-content: center;
  }
  .character-detail__level {
    margin: 0 !important;
    text-align: center !important;
  }
  .character-detail__progress-labels {
    justify-content: center;
  }
}

.character-detail__progress {
  position: relative;
  z-index: 1;
}

.character-detail__progress-labels {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.character-detail__progress-labels .exp-current,
.character-detail__progress-labels .exp-target {
  font-variant-numeric: tabular-nums;
  color: #fff;
  font-weight: 600;
}

.character-detail__progress-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 3;
}

.character-detail__progress-bar {
  position: relative;
  height: 1.75rem;
  background:
    linear-gradient(90deg,
      rgba(37, 99, 235, 0.15) 0%,
      rgba(15, 23, 42, 0.85) 30%,
      rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 999px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.3);
}

.character-detail__progress-fill {
  position: relative;
  background:
    linear-gradient(90deg,
      #1e40af 0%,
      #2563eb 25%,
      #38bdf8 60%,
      #67e8f9 90%,
      #a5f3fc 100%);
  height: 100%;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 0 18px rgba(56, 189, 248, 0.7),
    0 0 36px rgba(56, 189, 248, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.character-detail__progress-fill::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.35) 0%,
      rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.character-detail__progress-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%);
  animation: character-detail__shimmer 2.4s linear infinite;
  pointer-events: none;
}

@keyframes character-detail__shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

@keyframes character-detail__glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 18px rgba(56, 189, 248, 0.7), 0 0 36px rgba(56, 189, 248, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  }

  50% {
    box-shadow: 0 0 24px rgba(56, 189, 248, 0.95), 0 0 48px rgba(56, 189, 248, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  }
}

.character-detail__progress-bar:hover .character-detail__progress-fill {
  animation: character-detail__glow-pulse 1.6s ease-in-out infinite;
}

/* ===== LIBERADO mark (translucent, top-right) ===== */
.character-detail__libb-mark {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  height: 300px;
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
  filter:
    drop-shadow(0 0 24px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 56px rgba(99, 102, 241, 0.55)) drop-shadow(0 0 12px rgba(0, 0, 0, 0.6));
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.character-detail__libb-mark img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 767.98px) {
  .character-detail__libb-mark {
    height: 50px;
    width: 50px;
    top: 0.5rem;
    right: 0.5rem;
    opacity: 0.9;
  }
}

.character-detail__libb-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
      rgba(56, 189, 248, 0) 0deg,
      rgba(125, 211, 252, 0.55) 3deg,
      rgba(56, 189, 248, 0) 7deg,
      rgba(56, 189, 248, 0) 22deg,
      rgba(99, 102, 241, 0.45) 25deg,
      rgba(56, 189, 248, 0) 29deg,
      rgba(56, 189, 248, 0) 44deg,
      rgba(56, 189, 248, 0.5) 47deg,
      rgba(56, 189, 248, 0) 51deg,
      rgba(56, 189, 248, 0) 66deg,
      rgba(125, 211, 252, 0.55) 69deg,
      rgba(56, 189, 248, 0) 73deg,
      rgba(56, 189, 248, 0) 88deg,
      rgba(99, 102, 241, 0.45) 91deg,
      rgba(56, 189, 248, 0) 95deg,
      rgba(56, 189, 248, 0) 110deg,
      rgba(56, 189, 248, 0.5) 113deg,
      rgba(56, 189, 248, 0) 117deg,
      rgba(56, 189, 248, 0) 132deg,
      rgba(125, 211, 252, 0.55) 135deg,
      rgba(56, 189, 248, 0) 139deg,
      rgba(56, 189, 248, 0) 154deg,
      rgba(99, 102, 241, 0.45) 157deg,
      rgba(56, 189, 248, 0) 161deg,
      rgba(56, 189, 248, 0) 176deg,
      rgba(56, 189, 248, 0.5) 179deg,
      rgba(56, 189, 248, 0) 183deg,
      rgba(56, 189, 248, 0) 198deg,
      rgba(125, 211, 252, 0.55) 201deg,
      rgba(56, 189, 248, 0) 205deg,
      rgba(56, 189, 248, 0) 220deg,
      rgba(99, 102, 241, 0.45) 223deg,
      rgba(56, 189, 248, 0) 227deg,
      rgba(56, 189, 248, 0) 242deg,
      rgba(56, 189, 248, 0.5) 245deg,
      rgba(56, 189, 248, 0) 249deg,
      rgba(56, 189, 248, 0) 264deg,
      rgba(125, 211, 252, 0.55) 267deg,
      rgba(56, 189, 248, 0) 271deg,
      rgba(56, 189, 248, 0) 286deg,
      rgba(99, 102, 241, 0.45) 289deg,
      rgba(56, 189, 248, 0) 293deg,
      rgba(56, 189, 248, 0) 308deg,
      rgba(56, 189, 248, 0.5) 311deg,
      rgba(56, 189, 248, 0) 315deg,
      rgba(56, 189, 248, 0) 330deg,
      rgba(125, 211, 252, 0.55) 333deg,
      rgba(56, 189, 248, 0) 337deg,
      rgba(56, 189, 248, 0) 352deg,
      rgba(99, 102, 241, 0.45) 355deg,
      rgba(56, 189, 248, 0) 359deg);
  filter: blur(3px);
  animation: libb-rays-spin 18s linear infinite;
  z-index: -1;
  pointer-events: none;
}

.character-detail__libb-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  height: 160%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at center,
      rgba(165, 243, 252, 0.45) 0%,
      rgba(56, 189, 248, 0.25) 25%,
      rgba(56, 189, 248, 0) 65%);
  animation: libb-burst-pulse 2.4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes libb-rays-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes libb-burst-pulse {

  0%,
  100% {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 1.0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

.stat {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  position: relative;
  z-index: 1;
}

.stat__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.stat__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

/* ===== Daily exp chart ===== */
.exp-history {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.exp-history h2 {
  margin-top: 0;
}

.exp-chart {
  display: flex;
  align-items: stretch;
  gap: 6px;
  height: 220px;
  padding: 0.5rem 0.25rem 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.exp-chart__bar {
  flex: 1 0 36px;
  min-width: 36px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
}

.exp-chart__value {
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 600;
  height: 1.2em;
  line-height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exp-chart__fill-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.25rem 0;
}

.exp-chart__fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}

.exp-chart__bar--no-data .exp-chart__fill {
  background: var(--border);
  height: 2px !important;
}

.exp-chart__day {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

/* ===== Dashboard table ===== */
.dashboard-td-img img {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  object-fit: cover;
  background: linear-gradient(135deg, #1e3a8a, #312e81);
  image-rendering: pixelated;
}

.dashboard-td-img .placeholder {
  font-size: 1.5rem;
}

/* ===== Login card ===== */
.login-card {
  background: linear-gradient(160deg, var(--bg-elev), #1f2330);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.dashboard-job {
  margin-top: 0.15rem;
}

/* ===== Guild Rank Sidebar ===== */
.guild-rank {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
}

.guild-rank .card-header {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), transparent);
}

.guild-rank .table> :not(caption)>*>* {
  background-color: transparent;
}

.guild-rank .table-primary {
  --bs-table-bg: rgba(56, 189, 248, 0.15);
}

.guild-rank .table-hover tbody tr:hover {
  --bs-table-hover-bg: rgba(56, 189, 248, 0.08);
}

.guild-rank .table> :not(caption)>*>* {
  border-color: var(--border);
}

.guild-rank .placeholder {
  font-size: 0.7rem;
  background: var(--bg);
  color: var(--text-muted);
}

.guild-rank img[src*="serve_image"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Guild Rank List (memories.gg style) */
.guild-rank-list {
  display: flex;
  flex-direction: column;
}

.guild-rank-item {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

.guild-rank-item:last-child {
  border-bottom: none;
}

.guild-rank-item:hover {
  background-color: rgba(56, 189, 248, 0.08);
  text-decoration: none;
}

.guild-rank-item.active {
  background-color: rgba(56, 189, 248, 0.12);
}

.guild-rank-item.active .guild-rank-name {
  color: #60a5fa;
}

.guild-rank-position {
  color: var(--text-muted);
}

.guild-rank-item.active .guild-rank-position {
  color: #fbbf24;
}

.guild-rank-avatar {
  background: var(--bg);
  border: 1px solid var(--border);
}

/* Responsive sidebar: on small screens the sidebar stacks above the main content */
@media (max-width: 991.98px) {

  aside.col-12.col-lg-3,
  aside.col-12.col-lg-4 {
    order: 2;
  }

  main.col-12.col-lg-9,
  main.col-12.col-lg-8 {
    order: 1;
  }
}

/* ===== Skeleton Loading States ===== */
.skeleton {
  background: linear-gradient(90deg,
      var(--bg-card-2) 25%,
      rgba(56, 189, 248, 0.15) 50%,
      var(--bg-card-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* Character detail uniform info section */
.character-detail__uniform-info {
  background: var(--bg-card-2);
  border-radius: 12px;
  margin-top: 1.5rem;
  border: 1px solid var(--border);
}

.character-detail__uniform-info h3 {
  color: var(--ms-purple);
  font-size: 1.5rem;
}

.character-detail__uniform-info .exp-guild-info {
  font-size: 1.1rem;
  color: var(--text-muted);
}

.character-detail__uniform-info .exp-guild-info .text-warning {
  color: var(--ms-purple) !important;
}

.char-card__uniform-info {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(4px);
  border-radius: 0;
  margin-top: auto;
  border: none;
  border-top: 1px solid var(--border);
  padding: 0.75rem 1rem;
}

.char-card__uniform-info h3 {
  color: var(--ms-purple);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.char-card__uniform-info .exp-guild-info {
  font-size: 1rem;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.char-card__uniform-info .exp-guild-info .text-warning {
  color: var(--ms-purple) !important;
  font-weight: 600;
}

/* Match char-card__img: aspect-ratio 1:1 (square) */
.skeleton-img {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 0.5rem 0.5rem 0 0;
}

.skeleton-badge {
  display: inline-block;
  border-radius: 9999px;
}

.skeleton-badge-sm {
  width: 56px;
  height: 22px;
}

.skeleton-badge-lg {
  width: 90px;
  height: 26px;
}

.skeleton-text {
  border-radius: 0.375rem;
}

.skeleton-text-lg {
  width: 70%;
  height: 20px;
}

.skeleton-text-sm {
  width: 40%;
  height: 14px;
}

.skeleton-text-xs {
  width: 50%;
  height: 12px;
}

/* Skeleton card wrapper matches char-card */
.skeleton-card {
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--bg-card-2);
  }
}

/* ===== Welcome Character Popup ===== */
.welcome-popup-container {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1050;
  display: flex;
  align-items: center;
  gap: 16px;
  animation: welcomePopupFadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes welcomePopupFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.speech-bubble {
  position: relative;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  color: #fff;
  padding: 1rem 2.8rem 1rem 1.25rem;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(168, 85, 247, 0.25);
  font-size: 1.05rem;
  max-width: 320px;
  animation: bubbleWiggle 4s ease-in-out infinite;
}

/* Speech bubble pointer arrow pointing right to the avatar */
.speech-bubble::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(30, 41, 59, 0.95);
  display: block;
  width: 0;
  z-index: 1;
}

.speech-bubble::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(168, 85, 247, 0.35);
  display: block;
  width: 0;
  z-index: 0;
}

@keyframes bubbleWiggle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.btn-close-welcome {
  position: absolute;
  top: 6px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.2rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.btn-close-welcome:hover {
  color: #f87171;
}

.welcome-avatar-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  flex-shrink: 0;
}

.welcome-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--ms-purple);
  box-shadow: 0 0 0 4px #0f172a, 0 0 24px rgba(168, 85, 247, 0.55);
  background: linear-gradient(135deg, #1e3a8a, #312e81);
  image-rendering: pixelated;
  transition: transform 0.3s ease;
}

.welcome-avatar-wrap:hover .welcome-avatar {
  transform: scale(1.08);
  border-color: var(--ms-blue-glow);
  box-shadow: 0 0 0 4px #0f172a, 0 0 28px rgba(96, 165, 250, 0.7);
}

.welcome-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-card-2);
  border: 3px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
}

.welcome-crown {
  position: absolute;
  top: -12px;
  right: -6px;
  font-size: 1.25rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  animation: crownFloat 2s ease-in-out infinite;
}

@keyframes crownFloat {

  0%,
  100% {
    transform: translateY(0) rotate(15deg);
  }

  50% {
    transform: translateY(-3px) rotate(15deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .welcome-popup-container,
  .speech-bubble,
  .welcome-crown {
    animation: none !important;
  }
}

/* ===== News Cards Styling (3x3 Grid) ===== */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 991.98px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(30, 41, 59, 0.45);
  backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--ms-purple-glow);
  box-shadow: 0 12px 32px rgba(168, 85, 247, 0.25), 0 0 0 1px rgba(168, 85, 247, 0.2);
}

.news-card__img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.6);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-card:hover .news-card__img {
  transform: scale(1.05);
}

.news-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 0.35em 0.8em;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

/* Category-specific badge styling */
.badge-category-update {
  background-color: rgba(59, 130, 246, 0.85);
  /* Blue */
  border: 1px solid rgba(59, 130, 246, 0.5);
  color: #ffffff;
}

.badge-category-sale {
  background-color: rgba(168, 85, 247, 0.85);
  /* Purple */
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #ffffff;
}

.badge-category-events {
  background-color: rgba(236, 72, 153, 0.85);
  /* Pink */
  border: 1px solid rgba(236, 72, 153, 0.5);
  color: #ffffff;
}

.badge-category-maintenance {
  background-color: rgba(239, 68, 68, 0.85);
  /* Red */
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ffffff;
}

.badge-category-community {
  background-color: rgba(16, 185, 129, 0.85);
  /* Green */
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #ffffff;
}

.badge-category-general {
  background-color: rgba(100, 116, 139, 0.85);
  /* Slate */
  border: 1px solid rgba(100, 116, 139, 0.5);
  color: #ffffff;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.25rem;
}

.news-card__date {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.news-card__date i {
  color: var(--ms-purple-glow);
}

.news-card__title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 0.75rem;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 2.8em;
  /* Uniform height alignment */
}

.news-card__summary {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

.news-card__footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--ms-purple-glow);
  transition: color 0.2s ease;
}

.news-card:hover .news-card__footer {
  color: var(--ms-blue-glow);
}

/* ===== 3D Tilt & Interactive Glow Effects for Stats and Directory Cards ===== */
.stat-card, .hover-card {
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease-out, border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
  overflow: hidden;
}

.stat-card::after, .hover-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(192, 132, 252, 0.15) 0%,
    rgba(96, 165, 250, 0.08) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 5;
}

.stat-card:hover::after, .hover-card:hover::after {
  opacity: 1;
}

.stat-card > *, .hover-card > * {
  transform: translateZ(15px);
}

/* ===== Circular Avatar Glow Frame for Character Detail ===== */
.character-detail__img {
  border-radius: 50% !important;
  border: 3px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 15px rgba(168, 85, 247, 0.2);
  background: rgba(15, 23, 42, 0.6) !important;
  animation: avatar-glow-pulse 4s ease-in-out infinite;
  transition: transform 0.3s ease, border-color 0.3s, box-shadow 0.3s;
}

.character-detail__img:hover {
  transform: scale(1.06) rotate(3deg);
  border-color: var(--ms-purple-glow) !important;
  box-shadow: 0 0 30px rgba(168, 85, 247, 0.55), inset 0 0 20px rgba(168, 85, 247, 0.35);
}

@keyframes avatar-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), inset 0 0 15px rgba(168, 85, 247, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(96, 165, 250, 0.45), inset 0 0 20px rgba(96, 165, 250, 0.3);
    border-color: rgba(96, 165, 250, 0.35) !important;
  }
}

/* ===== Maple Leaves Particle System styles ===== */
.maple-leaves-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.maple-leaf {
  position: absolute;
  top: -50px;
  pointer-events: none;
  mix-blend-mode: screen;
}

.maple-leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes leaf-fall {
  0% {
    transform: translateY(0vh) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) translateX(var(--leaf-drift)) rotate(var(--leaf-rotation));
    opacity: 0;
  }
}

/* ===== Responsive Welcome Popup Overrides ===== */
@media (max-width: 576px) {
  .welcome-popup-container {
    bottom: 12px;
    right: 12px;
    left: 12px;
    gap: 8px;
    justify-content: flex-end;
  }
  
  .speech-bubble {
    font-size: 0.85rem;
    padding: 0.6rem 2.2rem 0.6rem 1.0rem;
    border-radius: 12px;
    max-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 12px rgba(168, 85, 247, 0.15);
  }
  
  .speech-bubble::after, .speech-bubble::before {
    display: none; /* Hide pointing arrows on small viewports */
  }

  .welcome-avatar-wrap {
    width: 64px !important;
    height: 64px !important;
  }
  
  .welcome-crown {
    width: 20px;
    height: 20px;
    top: -5px;
    left: -5px;
    font-size: 0.8rem;
  }
}