/* ==========================================================================
   Plenilunio.wtf - Windows XP / 2000 / Aero Design System
   Aesthetic: Y2K Cyber Retro meets Windows XP Luna, Royale Dark & Aero Glass
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Comic+Neue:wght@400;700&family=Inter:wght@400;600;700&family=Outfit:wght@400;600;700;900&family=Pixelify+Sans:wght@400;600;700&family=Press+Start+2P&family=Share+Tech+Mono&family=Silkscreen:wght@400;700&family=VT323&display=swap');

:root {
  --font-system: 'Tahoma', 'Segoe UI', -apple-system, sans-serif;
  --font-retro: 'Pixelify Sans', 'Tahoma', monospace;

  /* XP Luna Default */
  --xp-blue-dark: #0055ea;
  --xp-blue-light: #3593ff;
  --xp-bg-grey: #ece9d8;
  --xp-border-dark: #003c90;
  --xp-window-bg: rgba(255, 255, 255, 0.92);
  --xp-text-main: #000000;
  --xp-accent-gold: #ffc800;

  --neon-glow: 0 0 15px rgba(59, 130, 246, 0.5);
  --glass-blur: blur(12px);
}

/* Base Setup */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: var(--font-system);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #000 url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
  color: var(--xp-text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 8px 60px 8px;
  box-sizing: border-box;
}

/* Background Types */
.bg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
}

.bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* Scanline Effect Toggle */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.03),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.03)
  );
  background-size: 100% 3px, 6px 100%;
  z-index: 99;
  opacity: 0.6;
}

/* ==========================================================================
   Click to Enter Splash Screen
   ========================================================================== */
.splash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s;
}

.splash-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-box {
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 30px 45px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 20px rgba(255, 255, 255, 0.05);
  animation: float 3s ease-in-out infinite;
}

.splash-title {
  font-family: var(--font-retro);
  font-size: 2.2rem;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4);
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.splash-subtitle {
  color: #94a3b8;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  animation: pulse 1.5s infinite;
}

/* ==========================================================================
   THEMES SYSTEM
   ========================================================================== */

/* Theme: Windows XP Luna */
.theme-xp-luna {
  --win-border: #0055ea;
  --title-bg: linear-gradient(180deg, #0058ee 0%, #3593ff 4%, #288eff 6%, #0055ea 10%, #0055ea 90%, #0046be 95%, #003c90 100%);
  --title-text: #ffffff;
  --card-bg: rgba(236, 233, 216, 0.95);
  --text-color: #000000;
  --btn-bg: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
  --btn-border: #707070;
  --btn-hover: linear-gradient(180deg, #e3f2ff 0%, #c4e0e5 100%);
  --accent-color: #0055ea;
}

/* Theme: Royale Dark / XP Noir */
.theme-xp-royale-dark {
  --win-border: #3b82f6;
  --title-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --title-text: #60a5fa;
  --card-bg: rgba(15, 23, 42, 0.88);
  --text-color: #f8fafc;
  --btn-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --btn-border: rgba(59, 130, 246, 0.4);
  --btn-hover: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  --accent-color: #3b82f6;
}

/* Theme: Windows 2000 Silver */
.theme-win-2000 {
  --win-border: #dfdfdf;
  --title-bg: linear-gradient(90deg, #000080 0%, #1084d0 100%);
  --title-text: #ffffff;
  --card-bg: #c0c0c0;
  --text-color: #000000;
  --btn-bg: #c0c0c0;
  --btn-border: #ffffff #808080 #808080 #ffffff;
  --btn-hover: #d4d4d4;
  --accent-color: #000080;
}

/* Theme: Aero Glass */
.theme-aero-glass {
  --win-border: rgba(255, 255, 255, 0.35);
  --title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
  --title-text: #ffffff;
  --card-bg: rgba(255, 255, 255, 0.15);
  --text-color: #ffffff;
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-border: rgba(255, 255, 255, 0.25);
  --btn-hover: rgba(255, 255, 255, 0.25);
  --accent-color: #38bdf8;
}

/* Theme: Cyber Neon Y2K */
.theme-cyber-neon {
  --win-border: #a855f7;
  --title-bg: linear-gradient(90deg, #581c87 0%, #7e22ce 50%, #c084fc 100%);
  --title-text: #ffffff;
  --card-bg: rgba(13, 10, 25, 0.92);
  --text-color: #f3e8ff;
  --btn-bg: rgba(88, 28, 135, 0.4);
  --btn-border: rgba(192, 132, 252, 0.5);
  --btn-hover: rgba(126, 34, 206, 0.7);
  --accent-color: #c084fc;
}

/* Theme: Windows XP Silver Edition */
.theme-xp-silver {
  --win-border: #9ca3af;
  --title-bg: linear-gradient(180deg, #f3f4f6 0%, #d1d5db 50%, #9ca3af 100%);
  --title-text: #1f2937;
  --card-bg: rgba(243, 244, 246, 0.96);
  --text-color: #111827;
  --btn-bg: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);
  --btn-border: #9ca3af;
  --btn-hover: linear-gradient(180deg, #f9fafb 0%, #d1d5db 100%);
  --accent-color: #4b5563;
}

/* Theme: Frutiger Aero Day (Sunlit Nature & Clear Water) */
.theme-frutiger-day {
  --win-border: rgba(56, 189, 248, 0.7);
  --title-bg: linear-gradient(180deg, rgba(125, 211, 252, 0.95) 0%, rgba(14, 165, 233, 0.9) 100%);
  --title-text: #ffffff;
  --card-bg: rgba(240, 253, 250, 0.85);
  --text-color: #064e3b;
  --btn-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(187, 247, 208, 0.85) 100%);
  --btn-border: rgba(34, 197, 94, 0.5);
  --btn-hover: linear-gradient(180deg, #ffffff 0%, #86efac 100%);
  --accent-color: #10b981;
}

/* Theme: Frutiger Aero Night (Bioluminescent Aqua Glow) */
.theme-frutiger-night {
  --win-border: rgba(6, 182, 212, 0.7);
  --title-bg: linear-gradient(180deg, rgba(8, 51, 68, 0.95) 0%, rgba(4, 120, 87, 0.85) 100%);
  --title-text: #67e8f9;
  --card-bg: rgba(4, 28, 44, 0.88);
  --text-color: #e0f2fe;
  --btn-bg: linear-gradient(180deg, rgba(8, 51, 68, 0.85) 0%, rgba(6, 78, 59, 0.85) 100%);
  --btn-border: rgba(34, 211, 238, 0.5);
  --btn-hover: linear-gradient(180deg, rgba(14, 116, 144, 0.9) 0%, rgba(4, 120, 87, 0.9) 100%);
  --accent-color: #06b6d4;
}

/* Theme: Y2K Millennium (Chrome & Hot Pink) */
.theme-y2k-millennium {
  --win-border: #f43f5e;
  --title-bg: linear-gradient(90deg, #f43f5e 0%, #ec4899 50%, #06b6d4 100%);
  --title-text: #ffffff;
  --card-bg: rgba(20, 10, 30, 0.92);
  --text-color: #ffe4e6;
  --btn-bg: linear-gradient(180deg, rgba(244, 63, 94, 0.35) 0%, rgba(236, 72, 153, 0.25) 100%);
  --btn-border: #f43f5e;
  --btn-hover: linear-gradient(180deg, rgba(244, 63, 94, 0.65) 0%, rgba(6, 182, 212, 0.45) 100%);
  --accent-color: #f43f5e;
}

/* Theme: Vaporwave 95 (Pastel Sunset & Grid) */
.theme-vaporwave-95 {
  --win-border: #d946ef;
  --title-bg: linear-gradient(90deg, #701a75 0%, #a21caf 50%, #0284c7 100%);
  --title-text: #fdf4ff;
  --card-bg: rgba(46, 16, 68, 0.92);
  --text-color: #fae8ff;
  --btn-bg: linear-gradient(180deg, #86198f 0%, #4a044e 100%);
  --btn-border: #e879f9;
  --btn-hover: linear-gradient(180deg, #a21caf 0%, #701a75 100%);
  --accent-color: #e879f9;
}

/* Theme: Gothic Cyber Noir (Crimson Velvet & Chrome) */
.theme-gothic-cyber {
  --win-border: #991b1b;
  --title-bg: linear-gradient(180deg, #450a0a 0%, #1c0505 100%);
  --title-text: #fca5a5;
  --card-bg: rgba(10, 5, 5, 0.95);
  --text-color: #fef2f2;
  --btn-bg: linear-gradient(180deg, #2b0c0c 0%, #170404 100%);
  --btn-border: #dc2626;
  --btn-hover: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
  --accent-color: #ef4444;
}

/* Theme: Matrix Green Phosphor */
.theme-matrix-green {
  --win-border: #22c55e;
  --title-bg: linear-gradient(180deg, #052e16 0%, #022c10 100%);
  --title-text: #4ade80;
  --card-bg: rgba(2, 20, 8, 0.95);
  --text-color: #86efac;
  --btn-bg: linear-gradient(180deg, #052e16 0%, #021a0a 100%);
  --btn-border: #22c55e;
  --btn-hover: linear-gradient(180deg, #15803d 0%, #052e16 100%);
  --accent-color: #22c55e;
}

/* Theme: Kawaii Pastel Dream */
.theme-kawaii-pastel {
  --win-border: #f9a8d4;
  --title-bg: linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #93c5fd 100%);
  --title-text: #ffffff;
  --card-bg: rgba(255, 245, 248, 0.94);
  --text-color: #4a044e;
  --btn-bg: linear-gradient(180deg, #ffffff 0%, #fce7f3 100%);
  --btn-border: #f472b6;
  --btn-hover: linear-gradient(180deg, #fff1f2 0%, #fbcfe8 100%);
  --accent-color: #ec4899;
}

/* Theme: Tokyo Neon Synthwave */
.theme-tokyo-neon {
  --win-border: #06b6d4;
  --title-bg: linear-gradient(90deg, #0f172a 0%, #3b0764 50%, #083344 100%);
  --title-text: #38bdf8;
  --card-bg: rgba(15, 10, 30, 0.94);
  --text-color: #f1f5f9;
  --btn-bg: linear-gradient(180deg, rgba(6, 182, 212, 0.25) 0%, rgba(168, 85, 247, 0.25) 100%);
  --btn-border: #38bdf8;
  --btn-hover: linear-gradient(180deg, rgba(6, 182, 212, 0.55) 0%, rgba(168, 85, 247, 0.55) 100%);
  --accent-color: #06b6d4;
}

/* Theme: Minimal Glass (Sleek Modern Glass) */
.theme-minimal-glass {
  --win-border: rgba(255, 255, 255, 0.22);
  --title-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  --title-text: #f8fafc;
  --card-bg: rgba(18, 18, 22, 0.82);
  --text-color: #e2e8f0;
  --btn-bg: rgba(255, 255, 255, 0.08);
  --btn-border: rgba(255, 255, 255, 0.15);
  --btn-hover: rgba(255, 255, 255, 0.18);
  --accent-color: #ffffff;
}

/* Theme: Coquette Pink Satin */
.theme-coquette-pink {
  --win-border: #f472b6;
  --title-bg: linear-gradient(90deg, #fbcfe8 0%, #f472b6 50%, #fda4af 100%);
  --title-text: #831843;
  --card-bg: rgba(255, 245, 248, 0.95);
  --text-color: #4c0519;
  --btn-bg: linear-gradient(180deg, #fff1f2 0%, #fce7f3 100%);
  --btn-border: #f472b6;
  --btn-hover: linear-gradient(180deg, #ffe4e6 0%, #fbcfe8 100%);
  --accent-color: #f43f5e;
}

/* Theme: Sweet Lolita Dollhouse */
.theme-sweet-lolita {
  --win-border: #f9a8d4;
  --title-bg: linear-gradient(90deg, #fdf2f8 0%, #fce7f3 50%, #e0f2fe 100%);
  --title-text: #be185d;
  --card-bg: rgba(255, 250, 252, 0.96);
  --text-color: #701a75;
  --btn-bg: linear-gradient(180deg, #ffffff 0%, #fdf2f8 100%);
  --btn-border: #f472b6;
  --btn-hover: linear-gradient(180deg, #fce7f3 0%, #fbcfe8 100%);
  --accent-color: #ec4899;
}

/* Theme: Victorian Gothic Lolita */
.theme-gothic-lolita {
  --win-border: #71717a;
  --title-bg: linear-gradient(180deg, #18181b 0%, #09090b 100%);
  --title-text: #f43f5e;
  --card-bg: rgba(18, 18, 22, 0.94);
  --text-color: #e4e4e7;
  --btn-bg: linear-gradient(180deg, #27272a 0%, #18181b 100%);
  --btn-border: #e11d48;
  --btn-hover: linear-gradient(180deg, #3f3f46 0%, #27272a 100%);
  --accent-color: #e11d48;
}

/* ==========================================================================
   MYSPACE FONTS SYSTEM
   ========================================================================== */
.font-tahoma, .font-tahoma * { font-family: 'Tahoma', 'Segoe UI', sans-serif !important; }
.font-w95, .font-w95 * { font-family: 'MS Sans Serif', 'Tahoma', monospace, sans-serif !important; }
.font-pixelify, .font-pixelify * { font-family: 'Pixelify Sans', cursive, sans-serif !important; }
.font-share-tech-mono, .font-share-tech-mono * { font-family: 'Share Tech Mono', monospace !important; }
.font-vt323, .font-vt323 * { font-family: 'VT323', monospace !important; font-size: 1.15em; }
.font-silkscreen, .font-silkscreen * { font-family: 'Silkscreen', monospace !important; }
.font-press-start, .font-press-start * { font-family: 'Press Start 2P', monospace !important; font-size: 0.82em; }
.font-outfit, .font-outfit * { font-family: 'Outfit', sans-serif !important; }
.font-cinzel, .font-cinzel * { font-family: 'Cinzel', serif !important; }
.font-comic-sans, .font-comic-sans * { font-family: 'Comic Sans MS', 'Comic Neue', cursive, sans-serif !important; }
.font-inter, .font-inter * { font-family: 'Inter', -apple-system, sans-serif !important; }

/* ==========================================================================
   MYSPACE AVATAR SHAPES & DECORATIONS
   ========================================================================== */
.profile-avatar-container {
  position: relative;
  display: inline-block;
  margin: 0 auto 12px;
}

.profile-avatar {
  width: 104px;
  height: 104px;
  object-fit: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

/* Shapes */
.avatar-shape-circle, .avatar-shape-circle img { border-radius: 50% !important; }
.avatar-shape-rounded, .avatar-shape-rounded img { border-radius: 18px !important; }
.avatar-shape-squircle, .avatar-shape-squircle img { border-radius: 30% !important; }
.avatar-shape-xp, .avatar-shape-xp img {
  border-radius: 4px !important;
  border: 3px outset #ece9d8 !important;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5) !important;
}
.avatar-shape-hexagon, .avatar-shape-hexagon img {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
  border-radius: 0 !important;
}

/* Decoration Effects */
.avatar-dec-glow img {
  box-shadow: 0 0 20px var(--accent-color, #0055ea), 0 0 40px var(--accent-color, #0055ea) !important;
}

.avatar-dec-halo {
  position: relative;
}
.avatar-dec-halo::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotateX(65deg);
  width: 80px;
  height: 35px;
  border-radius: 50%;
  border: 4px solid #facc15;
  box-shadow: 0 0 15px #fde047, inset 0 0 10px #fde047;
  pointer-events: none;
  animation: halo-float 2.5s ease-in-out infinite alternate;
}
@keyframes halo-float {
  from { transform: translateX(-50%) translateY(-2px) rotateX(65deg); }
  to { transform: translateX(-50%) translateY(4px) rotateX(65deg); }
}

.avatar-dec-pixel img {
  box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff, 0 0 0 9px var(--accent-color, #0055ea) !important;
  image-rendering: pixelated;
}

.avatar-dec-rainbow img {
  animation: rainbow-border 3s linear infinite;
}
@keyframes rainbow-border {
  0% { box-shadow: 0 0 18px #ff0000; }
  20% { box-shadow: 0 0 18px #ff9900; }
  40% { box-shadow: 0 0 18px #33cc33; }
  60% { box-shadow: 0 0 18px #0099ff; }
  80% { box-shadow: 0 0 18px #9933ff; }
  100% { box-shadow: 0 0 18px #ff0000; }
}

.avatar-dec-cyberpunk img {
  box-shadow: -5px -3px 0 #ff0055, 5px 3px 0 #00f0ff !important;
}

.avatar-dec-chrome img {
  border: 3px solid #e2e8f0 !important;
  box-shadow: inset 0 0 10px #ffffff, 0 0 20px rgba(255,255,255,0.8), 0 0 40px rgba(148,163,184,0.4) !important;
}

.avatar-dec-flame img {
  box-shadow: 0 0 15px #ff4500, 0 0 30px #ff8c00, 0 0 50px #ffd700 !important;
  animation: flame-pulse 1.8s ease-in-out infinite alternate;
}
@keyframes flame-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.2) contrast(1.1); }
}

/* Coquette Satin Pink Bow */
.avatar-dec-coquette_bow {
  position: relative;
}
.avatar-dec-coquette_bow img {
  box-shadow: 0 0 16px rgba(244, 114, 182, 0.6) !important;
}
.avatar-dec-coquette_bow::before {
  content: '🎀';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.2rem;
  z-index: 10;
  filter: drop-shadow(0 4px 8px rgba(244, 63, 94, 0.45));
  animation: coquette-bow-float 2.2s ease-in-out infinite alternate;
}
@keyframes coquette-bow-float {
  from { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  to { transform: translateX(-50%) translateY(-4px) rotate(3deg); }
}

/* Floral Crown / Wreath */
.avatar-dec-flower_crown {
  position: relative;
}
.avatar-dec-flower_crown img {
  box-shadow: 0 0 18px rgba(251, 207, 232, 0.8), 0 0 30px rgba(244, 114, 182, 0.4) !important;
}
.avatar-dec-flower_crown::before {
  content: '🌸';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.9rem;
  z-index: 10;
  filter: drop-shadow(0 2px 8px rgba(236, 72, 153, 0.5));
  animation: flower-crown-bob 3s ease-in-out infinite alternate;
}
@keyframes flower-crown-bob {
  0% { transform: translateX(-50%) translateY(0) scale(1); }
  50% { transform: translateX(-50%) translateY(-3px) scale(1.04); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* Doll Lolita Frilly Lace Bonnet */
.avatar-dec-doll_bonnet {
  position: relative;
}
.avatar-dec-doll_bonnet img {
  border: 3px double #f472b6 !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 16px rgba(244, 114, 182, 0.7) !important;
}
.avatar-dec-doll_bonnet::before {
  content: '👒';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.1rem;
  z-index: 10;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* Soft White Angel Wings */
.avatar-dec-angel_wings {
  position: relative;
}
.avatar-dec-angel_wings img {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(254, 205, 211, 0.5) !important;
}
.avatar-dec-angel_wings::before {
  content: '🪽';
  position: absolute;
  top: 50%;
  left: -28px;
  transform: translateY(-50%) scaleX(-1);
  font-size: 2rem;
  z-index: 0;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  animation: wing-left 2s ease-in-out infinite alternate;
}
.avatar-dec-angel_wings::after {
  content: '🪽';
  position: absolute;
  top: 50%;
  right: -28px;
  transform: translateY(-50%);
  font-size: 2rem;
  z-index: 0;
  opacity: 0.9;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  animation: wing-right 2s ease-in-out infinite alternate;
}
@keyframes wing-left {
  from { transform: translateY(-50%) scaleX(-1) rotate(-5deg); }
  to { transform: translateY(-53%) scaleX(-1) rotate(5deg); }
}
@keyframes wing-right {
  from { transform: translateY(-50%) rotate(-5deg); }
  to { transform: translateY(-53%) rotate(5deg); }
}

/* Kawaii Anime Cat Ears */
.avatar-dec-cat_ears {
  position: relative;
}
.avatar-dec-cat_ears img {
  box-shadow: 0 0 16px rgba(244, 114, 182, 0.5) !important;
}
.avatar-dec-cat_ears::before {
  content: '🐱';
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  z-index: 10;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
}

/* ==========================================================================
   KAWAII / COQUETTE / DOLL LOLITA SCREEN BORDER OVERLAYS
   ========================================================================== */
.screen-border-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99996;
  overflow: hidden;
}

.screen-border-overlay.border-none {
  display: none !important;
}

.screen-border-left,
.screen-border-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  background-repeat: repeat-y;
  background-position: center top;
  pointer-events: none;
}

.screen-border-left {
  left: 0;
}

.screen-border-right {
  right: 0;
  transform: scaleX(-1);
}

/* 1. Sakura Blossom Vines */
.border-sakura-vines .screen-border-left,
.border-sakura-vines .screen-border-right {
  background-image: url('/borders/sakura_vines.svg');
  animation: sakura-side-sway 4s ease-in-out infinite alternate;
}
@keyframes sakura-side-sway {
  from { transform: translateX(0); }
  to { transform: translateX(4px); }
}
.border-sakura-vines .screen-border-right {
  animation: sakura-side-sway-right 4s ease-in-out infinite alternate;
}
@keyframes sakura-side-sway-right {
  from { transform: scaleX(-1) translateX(0); }
  to { transform: scaleX(-1) translateX(4px); }
}

/* 2. Coquette Ribbons & French Lace */
.border-coquette-ribbons .screen-border-left,
.border-coquette-ribbons .screen-border-right {
  background-image: url('/borders/coquette_ribbons.svg');
  filter: drop-shadow(0 4px 10px rgba(244, 114, 182, 0.25));
}

/* 3. Victorian Doll Lolita Roses */
.border-doll-lolita-roses .screen-border-left,
.border-doll-lolita-roses .screen-border-right {
  background-image: url('/borders/doll_lolita_roses.svg');
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

/* 4. Kawaii Pastel Stars & Clouds */
.border-kawaii-pastel-stars .screen-border-left,
.border-kawaii-pastel-stars .screen-border-right {
  background-image: url('/borders/kawaii_pastel_stars.svg');
  filter: drop-shadow(0 4px 10px rgba(244, 114, 182, 0.3));
  animation: kawaii-side-bounce 3s ease-in-out infinite alternate;
}
@keyframes kawaii-side-bounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
.border-kawaii-pastel-stars .screen-border-right {
  animation: kawaii-side-bounce-right 3s ease-in-out infinite alternate;
}
@keyframes kawaii-side-bounce-right {
  0% { transform: scaleX(-1) translateY(0); }
  100% { transform: scaleX(-1) translateY(-8px); }
}

/* 5. Sweet Coquette Cherries */
.border-sweet-cherries .screen-border-left,
.border-sweet-cherries .screen-border-right {
  background-image: url('/borders/sweet_cherries.svg');
  filter: drop-shadow(0 3px 8px rgba(225, 29, 72, 0.25));
}

/* 6. Fairy Garden */
.border-fairy-garden .screen-border-left,
.border-fairy-garden .screen-border-right {
  background-image: url('/borders/fairy_garden.svg');
  filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.4));
  animation: fairy-pulse 2.8s ease-in-out infinite alternate;
}
@keyframes fairy-pulse {
  from { filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.3)); }
  to { filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.5)); }
}

@media (max-width: 768px) {
  .screen-border-left,
  .screen-border-right {
    width: 60px;
    background-size: 60px auto;
    opacity: 0.75;
  }
}

/* ==========================================================================
   MYSPACE BACKGROUND FX
   ========================================================================== */
.fx-stars-canvas, .fx-matrix-canvas, .fx-bubbles-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   MYSPACE WIDGETS SYSTEM
   ========================================================================== */
.widgets-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}

.myspace-widget-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--btn-border);
  border-radius: 8px;
  padding: 12px 14px;
  backdrop-filter: blur(8px);
  color: var(--text-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.myspace-widget-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

.myspace-widget-card.is-floating-widget,
.myspace-widget-card.is-floating-widget:hover,
.myspace-widget-card.is-drag-edit-mode,
.myspace-widget-card.is-drag-edit-mode:hover {
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}

.myspace-widget-card.widget-type-roblox,
.myspace-widget-card.widget-type-brawlstars {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  margin: 0 auto !important;
  text-align: center !important;
  backdrop-filter: none !important;
  transition: none !important;
  width: 100%;
}
.myspace-widget-card.widget-type-brawlstars.widget-mode-card_stats,
.myspace-widget-card.widget-type-roblox.roblox-mode-card_stats {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}
.myspace-widget-card.widget-type-roblox:hover,
.myspace-widget-card.widget-type-brawlstars:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: none !important;
}
.myspace-widget-card.is-floating-widget.widget-type-roblox,
.myspace-widget-card.is-floating-widget.widget-type-roblox:hover,
.myspace-widget-card.is-floating-widget.widget-type-brawlstars,
.myspace-widget-card.is-floating-widget.widget-type-brawlstars:hover {
  transform: translate(-50%, -50%) !important;
}
.myspace-widget-card:not(.is-floating-widget).widget-type-roblox,
.myspace-widget-card:not(.is-floating-widget).widget-type-roblox:hover,
.myspace-widget-card:not(.is-floating-widget).widget-type-brawlstars,
.myspace-widget-card:not(.is-floating-widget).widget-type-brawlstars:hover {
  transform: none !important;
}

.widget-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 0.88rem;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
  padding-bottom: 5px;
}

.widget-note-content {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0.92;
}

.widget-media-frame {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: none;
}


/* ==========================================================================
   XP / AERO WINDOW STRUCTURE
   ========================================================================== */
.xp-window {
  width: 94%;
  max-width: 540px;
  background: var(--card-bg);
  border: 3px solid var(--win-border);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), var(--neon-glow);
  backdrop-filter: var(--glass-blur);
  overflow: hidden;
  margin: 16px auto;
  position: relative;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .xp-window {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto !important;
    border-width: 2px !important;
  }
  .xp-content {
    padding: 16px 10px !important;
    gap: 14px !important;
  }
}

/* Titlebar */
.xp-titlebar {
  background: var(--title-bg);
  color: var(--title-text);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.xp-titlebar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xp-title-icon {
  width: 16px;
  height: 16px;
}

.xp-title-controls {
  display: flex;
  gap: 3px;
}

.xp-control-btn {
  width: 20px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(180deg, #0058ee 0%, #3593ff 100%);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.xp-control-btn.close {
  background: linear-gradient(180deg, #e34c34 0%, #bd1000 100%);
  border-color: #800000;
}

.xp-control-btn:hover {
  filter: brightness(1.2);
}

/* Content Container */
.xp-content {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--text-color);
}

/* Profile Header */
.profile-avatar-container {
  position: relative;
  width: 110px;
  height: 110px;
  margin-bottom: 4px;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--win-border);
  box-shadow: 0 0 15px rgba(0,0,0,0.5), 0 0 20px var(--accent-color);
  transition: transform 0.3s ease;
}

.profile-avatar:hover {
  transform: scale(1.05) rotate(2deg);
}

.profile-display-name {
  font-family: var(--font-retro);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.profile-bio {
  font-size: 0.92rem;
  text-align: center;
  opacity: 0.9;
  line-height: 1.4;
  max-width: 90%;
  word-break: break-word;
}

/* Badges System */
.profile-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.xp-badge {
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-color);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Discord Presence Widget */
.discord-presence-card {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.discord-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.discord-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #000;
}

.status-online { background-color: #23a55a; }
.status-idle { background-color: #f0b232; }
.status-dnd { background-color: #f23f43; }
.status-offline { background-color: #80848e; }

.discord-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 0.82rem;
}

.discord-username {
  font-weight: bold;
  font-size: 0.9rem;
}

.discord-activity {
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   AUDIO PLAYER STYLING: BUBBLE STYLES, BUTTON SHAPES, LAYOUTS, HOLOGRAPHIC
   ========================================================================== */

/* ==========================================================================
   AUDIO PLAYER STYLING: BUBBLE STYLES, BUTTON SHAPES, LAYOUTS, HOLOGRAPHIC
   ========================================================================== */

/* 1. Base Variables & Fallbacks */
.audio-widget {
  --audio-accent: var(--accent-color, #38bdf8);
  --audio-accent-glow: rgba(56, 189, 248, 0.35);
  width: 100%;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.audio-widget-top-banner {
  display: none;
  width: 100%;
}

.audio-widget-controls-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

/* 2. Bubble Styles */
/* Glass Capsula Glassmorphism */
.audio-widget.audio-bubble-glass_capsule,
.audio-widget.audio-bubble-glass {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1.5px solid var(--audio-accent, rgba(255, 255, 255, 0.28)) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Frutiger Aero Glossy Card */
.audio-widget.audio-bubble-aero_card,
.audio-widget.audio-bubble-aero {
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.22) 100%) !important;
  border: 2px solid var(--audio-accent, #38bdf8) !important;
  box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.8), inset 0 -3px 6px rgba(0, 0, 0, 0.3), 0 10px 30px var(--audio-accent-glow, rgba(56, 189, 248, 0.45)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Cyberpunk Neon HUD */
.audio-widget.audio-bubble-neon_cyber,
.audio-widget.audio-bubble-neon {
  border-radius: 4px !important;
  background: rgba(5, 10, 24, 0.95) !important;
  border: 2px solid var(--audio-accent, #00f0ff) !important;
  box-shadow: 0 0 20px var(--audio-accent-glow, rgba(0, 240, 255, 0.5)), inset 0 0 14px rgba(0, 240, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
}

/* Retro Walkman Cassette Tape */
.audio-widget.audio-bubble-retro_cassette,
.audio-widget.audio-bubble-cassette {
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2e2e2e 0%, #171717 100%) !important;
  border: 2.5px solid #525252 !important;
  border-top-color: #737373 !important;
  border-bottom-color: #0a0a0a !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 28px rgba(0, 0, 0, 0.75) !important;
}
.audio-widget.audio-bubble-retro_cassette::after,
.audio-widget.audio-bubble-cassette::after {
  content: 'WALKMAN STEREO';
  position: absolute;
  top: 4px;
  right: 12px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

/* Vinyl Audiophile Dock */
.audio-widget.audio-bubble-vinyl_dock,
.audio-widget.audio-bubble-vinyl {
  border-radius: 16px !important;
  background: radial-gradient(circle at 35% 50%, #24242e 0%, #0c0c10 100%) !important;
  border: 2px solid var(--audio-accent, #f59e0b) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Minimalist Pill */
.audio-widget.audio-bubble-minimal_pill,
.audio-widget.audio-bubble-pill {
  border-radius: 9999px !important;
  padding: 8px 18px !important;
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1.5px solid var(--audio-accent, rgba(255, 255, 255, 0.25)) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 3. Play Button Shapes & Styles */
.audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--audio-accent, var(--accent-color, #38bdf8));
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 8px var(--audio-accent-glow, rgba(0, 0, 0, 0.3));
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  flex-shrink: 0;
}
.audio-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px var(--audio-accent-glow, rgba(0, 0, 0, 0.4));
}

/* Circle */
.audio-play-btn.audio-btn-circle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
}

/* Squircle */
.audio-play-btn.audio-btn-squircle {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
}

/* Pill with Text */
.audio-play-btn.audio-btn-pill,
.audio-play-btn.audio-btn-pill-text {
  width: auto !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-weight: 800 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.5px !important;
}

/* Spinning Vinyl Record */
.audio-play-btn.audio-btn-vinyl {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  background: #09090b !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}
.audio-vinyl-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: repeating-radial-gradient(
    circle at center,
    #0d0d0f 0px,
    #0d0d0f 2px,
    #1e1e24 3px,
    #0d0d0f 4px
  );
}
.audio-play-btn.is-playing .audio-vinyl-disc,
.audio-widget.audio-playing .audio-vinyl-disc,
.audio-vinyl-disc.is-spinning {
  animation: vinylSpin 2.5s linear infinite !important;
}
@keyframes vinylSpin {
  100% { transform: rotate(360deg); }
}
.audio-vinyl-center {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--audio-accent, #f59e0b);
  color: #000;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* Hi-Fi Vintage Box Toggle */
.audio-play-btn.audio-btn-retro_box,
.audio-play-btn.audio-btn-hifi {
  width: 36px !important;
  height: 36px !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg, #444 0%, #202020 100%) !important;
  border: 1.5px solid #666 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5) !important;
  font-size: 13px !important;
}
.audio-play-btn.audio-btn-retro_box.is-playing,
.audio-play-btn.audio-btn-hifi.is-playing,
.audio-widget.audio-playing .audio-play-btn.audio-btn-retro_box,
.audio-widget.audio-playing .audio-play-btn.audio-btn-hifi {
  border-color: var(--audio-accent, #ec4899) !important;
  box-shadow: inset 0 0 6px var(--audio-accent, #ec4899), 0 0 10px var(--audio-accent-glow, rgba(236, 72, 153, 0.4)) !important;
}

/* 4. Details, Progress Bar & Visualizer */
.audio-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}

.audio-inline-title {
  font-size: 0.82rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.audio-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
}

.audio-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--audio-accent, var(--accent-color, #38bdf8));
  transition: width 0.1s linear;
}

.audio-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 18px;
  flex-shrink: 0;
}

.eq-bar {
  width: 3px;
  background: var(--audio-accent, var(--accent-color, #38bdf8));
  border-radius: 1px;
  height: 4px;
  transition: height 0.1s ease;
}

.audio-playing .eq-bar:nth-child(1) { animation: eqBounce 0.6s ease infinite alternate; }
.audio-playing .eq-bar:nth-child(2) { animation: eqBounce 0.8s ease 0.2s infinite alternate; }
.audio-playing .eq-bar:nth-child(3) { animation: eqBounce 0.5s ease 0.4s infinite alternate; }
.audio-playing .eq-bar:nth-child(4) { animation: eqBounce 0.7s ease 0.1s infinite alternate; }

@keyframes eqBounce {
  0% { height: 4px; }
  100% { height: 18px; }
}

/* 5. Layout Modes */
/* Mode: right_inline (Default) */
.audio-widget.audio-layout-right_inline .audio-widget-top-banner,
.audio-widget.audio-layout-inline-right .audio-widget-top-banner {
  display: none !important;
}
.audio-widget.audio-layout-right_inline .audio-inline-title,
.audio-widget.audio-layout-inline-right .audio-inline-title {
  display: block !important;
}

/* Mode: title_above (Title Prominent on Top) */
.audio-widget.audio-layout-title_above .audio-widget-top-banner {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.audio-widget.audio-layout-title_above .audio-title-ticker {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--audio-accent, #ffffff) !important;
  text-shadow: 0 0 10px var(--audio-accent-glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.audio-widget.audio-layout-title_above .audio-inline-title {
  display: none !important;
}

/* Mode: marquee_ticker (LCD Screen Box) */
.audio-widget.audio-layout-marquee_ticker .audio-widget-top-banner,
.audio-widget.audio-layout-marquee .audio-widget-top-banner {
  display: flex !important;
  align-items: center;
  width: 100%;
  background: #030712 !important;
  border: 1.5px solid var(--audio-accent, #00f0ff) !important;
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9), 0 0 10px var(--audio-accent-glow);
  position: relative;
}
.audio-widget.audio-layout-marquee_ticker .audio-title-ticker,
.audio-widget.audio-layout-marquee .audio-title-ticker {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 0.88rem !important;
  font-weight: 900 !important;
  color: var(--audio-accent, #00f0ff) !important;
  letter-spacing: 2px !important;
  text-shadow: 0 0 8px currentColor !important;
  white-space: nowrap !important;
  animation: marqueeScroll 12s linear infinite;
}
.audio-widget.audio-layout-marquee_ticker .audio-inline-title,
.audio-widget.audio-layout-marquee .audio-inline-title {
  display: none !important;
}

@keyframes marqueeScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Mode: centered_column (Vertical Centered Stack) */
.audio-widget.audio-layout-centered_column,
.audio-widget.audio-layout-column {
  align-items: center !important;
  text-align: center !important;
  padding: 16px 14px !important;
  gap: 12px !important;
}
.audio-widget.audio-layout-centered_column .audio-widget-top-banner,
.audio-widget.audio-layout-column .audio-widget-top-banner {
  display: none !important;
}
.audio-widget.audio-layout-centered_column .audio-widget-controls-row,
.audio-widget.audio-layout-column .audio-widget-controls-row {
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}
.audio-widget.audio-layout-centered_column .audio-play-btn,
.audio-widget.audio-layout-column .audio-play-btn {
  margin: 0 auto !important;
}
.audio-widget.audio-layout-centered_column .audio-details,
.audio-widget.audio-layout-column .audio-details {
  width: 100% !important;
  align-items: center !important;
  text-align: center !important;
  gap: 6px !important;
}
.audio-widget.audio-layout-centered_column .audio-inline-title,
.audio-widget.audio-layout-column .audio-inline-title {
  display: block !important;
  text-align: center !important;
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  width: 100% !important;
  color: var(--audio-accent, #ffffff) !important;
}
.audio-widget.audio-layout-centered_column .audio-progress-bar,
.audio-widget.audio-layout-column .audio-progress-bar {
  width: 100% !important;
  height: 7px !important;
}
.audio-widget.audio-layout-centered_column .audio-visualizer,
.audio-widget.audio-layout-column .audio-visualizer {
  margin: 0 auto !important;
}

/* Mode: compact_dock (Slim Minimal Dock) */
.audio-widget.audio-layout-compact_dock,
.audio-widget.audio-layout-compact {
  padding: 5px 12px !important;
  gap: 0 !important;
}
.audio-widget.audio-layout-compact_dock .audio-widget-top-banner,
.audio-widget.audio-layout-compact .audio-widget-top-banner {
  display: none !important;
}
.audio-widget.audio-layout-compact_dock .audio-widget-controls-row,
.audio-widget.audio-layout-compact .audio-widget-controls-row {
  gap: 8px !important;
}
.audio-widget.audio-layout-compact_dock .audio-play-btn:not(.audio-btn-pill),
.audio-widget.audio-layout-compact .audio-play-btn:not(.audio-btn-pill) {
  width: 28px !important;
  height: 28px !important;
  font-size: 11px !important;
}
.audio-widget.audio-layout-compact_dock .audio-inline-title,
.audio-widget.audio-layout-compact .audio-inline-title {
  display: block !important;
  font-size: 0.76rem !important;
  max-width: 160px !important;
}
.audio-widget.audio-layout-compact_dock .audio-progress-bar,
.audio-widget.audio-layout-compact .audio-progress-bar {
  height: 4px !important;
}

/* 6. Holographic Mode for Audio */
.audio-widget.audio-color-holographic {
  border: 1.5px solid var(--holo-1, #ff007f) !important;
  box-shadow: 0 0 20px var(--holo-2, #00f0ff) !important;
}
.audio-widget.audio-color-holographic .audio-play-btn {

/* NEW MUSIC BUBBLE STYLES / FORMS */
/* 1. Deluxe Spinning Turntable Vinyl */
.audio-widget.audio-bubble-spinning_vinyl {
  border-radius: 20px !important;
  background: linear-gradient(135deg, #1c1917 0%, #0c0a09 100%) !important;
  border: 2px solid var(--audio-accent, #eab308) !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 18px var(--audio-accent-glow, rgba(234, 179, 8, 0.35)) !important;
  position: relative;
  overflow: hidden;
}
.audio-widget.audio-bubble-spinning_vinyl::before {
  content: 'TURNTABLE HIFI';
  position: absolute;
  top: 5px;
  right: 12px;
  font-size: 0.58rem;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--audio-accent, #eab308);
  opacity: 0.7;
}

/* 2. Y2K CD Jewel Case */
.audio-widget.audio-bubble-cd_jewel {
  border-radius: 6px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.12) 100%) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: inset 2px 2px 5px rgba(255, 255, 255, 0.6), inset -2px -2px 6px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative;
}
.audio-widget.audio-bubble-cd_jewel::after {
  content: 'COMPACT DISC';
  position: absolute;
  bottom: 4px;
  right: 10px;
  font-size: 0.55rem;
  letter-spacing: 1.5px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
}

/* 3. Cyber Equalizer LED Rack */
.audio-widget.audio-bubble-cyber_equalizer {
  border-radius: 6px !important;
  background: #05050d !important;
  border: 2px solid var(--audio-accent, #06b6d4) !important;
  box-shadow: 0 0 24px var(--audio-accent-glow, rgba(6, 182, 212, 0.45)), inset 0 0 16px rgba(6, 182, 212, 0.12) !important;
  position: relative;
}
.audio-widget.audio-bubble-cyber_equalizer .audio-progress-bar {
  background: #111827 !important;
  height: 8px !important;
  border: 1px solid var(--audio-accent, #06b6d4) !important;
}

/* 4. Winamp 2000 Classic Audio */
.audio-widget.audio-bubble-winamp_classic {
  border-radius: 4px !important;
  background: #1e2029 !important;
  border: 2px solid #5a5d72 !important;
  border-top-color: #8f93aa !important;
  border-left-color: #8f93aa !important;
  border-right-color: #121319 !important;
  border-bottom-color: #121319 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75) !important;
  position: relative;
}
.audio-widget.audio-bubble-winamp_classic .audio-inline-title {
  font-family: 'Courier New', monospace !important;
  color: #00ff66 !important;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.7) !important;
  background: #09120c;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #1a3320;
}

/* 5. Ultra Floating Glassmorphism Pill */
.audio-widget.audio-bubble-glassmorphism_pill {
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  padding: 8px 18px !important;
}

/* NEW PLAY BUTTON SHAPES */
/* Neon Hexagon */
.audio-play-btn.audio-btn-neon_hex {
  width: 40px !important;
  height: 40px !important;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%) !important;
  border-radius: 0 !important;
  background: var(--audio-accent, #00f0ff) !important;
  box-shadow: 0 0 14px var(--audio-accent-glow, rgba(0, 240, 255, 0.6)) !important;
}

/* Radar Pulse Ring */
.audio-play-btn.audio-btn-pulse_ring {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  position: relative;
  background: var(--audio-accent, #ec4899) !important;
}
.audio-widget.audio-playing .audio-play-btn.audio-btn-pulse_ring::after,
.audio-play-btn.audio-btn-pulse_ring.is-playing::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--audio-accent, #ec4899);
  animation: radarPulseRing 1.5s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  pointer-events: none;
}
@keyframes radarPulseRing {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* NEW AUDIO LAYOUTS */
/* Sticky Bottom Dock */
.audio-widget.audio-layout-sticky_bottom_dock {
  position: fixed !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(92%, 480px) !important;
  z-index: 9999 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 20px var(--audio-accent-glow, rgba(56, 189, 248, 0.4)) !important;
}

/* Hero Showcase Card */
.audio-widget.audio-layout-hero_card {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  align-items: center !important;
  text-align: center !important;
}
.audio-widget.audio-layout-hero_card .audio-widget-top-banner {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.audio-widget.audio-layout-hero_card .audio-title-ticker {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  text-shadow: 0 0 12px var(--audio-accent-glow);
}
.audio-widget.audio-layout-hero_card .audio-inline-title {
  display: none !important;
}
.audio-widget.audio-layout-hero_card .audio-widget-controls-row {
  width: 100% !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.audio-widget.audio-layout-hero_card .audio-play-btn {
  width: 50px !important;
  height: 50px !important;
  font-size: 1.2rem !important;
  margin: 0 auto !important;
}
.audio-widget.audio-layout-hero_card .audio-details {
  width: 100% !important;
}

/* Minimal Line Marquee */
.audio-widget.audio-layout-minimal_marquee {
  padding: 6px 12px !important;
  width: 100% !important;
}
.audio-widget.audio-layout-minimal_marquee .audio-widget-top-banner {
  display: none !important;
}
.audio-widget.audio-layout-minimal_marquee .audio-progress-bar {
  display: none !important;
}
.audio-widget.audio-layout-minimal_marquee .audio-inline-title {
  display: inline-block !important;
  font-size: 0.8rem !important;
  animation: marqueeScroll 10s linear infinite;
  white-space: nowrap !important;
}

/* Spacers & Empty Gap Blocks */
.profile-spacer {
  width: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
}

/* PleniBot Assistant Mascot & Speech Bubble */
.dash-mascot-container {
  position: fixed;
  bottom: 22px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
}
.dash-mascot-avatar {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%);
  border: 2.5px solid #ffffff;
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: mascotFloat 3s ease-in-out infinite alternate;
}
.dash-mascot-avatar:hover {
  transform: scale(1.12) rotate(-5deg);
}
.mascot-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.mascot-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
}
.mascot-speech-bubble {
  pointer-events: auto;
  position: relative;
  max-width: 280px;
  margin-bottom: 12px;
  background: rgba(15, 23, 42, 0.95);
  border: 1.5px solid #38bdf8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(56, 189, 248, 0.25);
  border-radius: 14px 14px 2px 14px;
  padding: 10px 12px;
  color: #f8fafc;
  font-size: 0.82rem;
  line-height: 1.45;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: mascotBubblePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mascot-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 3px;
}
.mascot-bubble-title {
  font-weight: 700;
  font-size: 0.78rem;
  color: #38bdf8;
}
.mascot-bubble-close {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 2px;
}
.mascot-bubble-tip-tag {
  font-size: 0.68rem;
  color: #94a3b8;
  margin-top: 6px;
  text-align: right;
}
@keyframes mascotFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
@keyframes mascotBubblePop {
  0% { opacity: 0; transform: scale(0.8) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 900px) {
  .dash-mascot-container {
    bottom: 78px;
    right: 14px;
  }
}
  background: linear-gradient(135deg, var(--holo-1, #ff007f), var(--holo-2, #00f0ff), var(--holo-3, #ffe600)) !important;
  background-size: 200% 200% !important;
  animation: holoGradientShift 3s ease infinite alternate !important;
  color: #fff !important;
  border: none !important;
}
.audio-widget.audio-color-holographic .audio-progress-fill {
  background: linear-gradient(90deg, var(--holo-1, #ff007f), var(--holo-2, #00f0ff), var(--holo-3, #ffe600)) !important;
}
.audio-widget.audio-color-holographic .eq-bar {
  background: linear-gradient(180deg, var(--holo-1, #ff007f), var(--holo-2, #00f0ff)) !important;
}

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

/* 6. Widget Cards Holographic & Shiny effect */
.myspace-widget-card.widget-card-holographic,
.brawl-stats-card.widget-card-holographic,
.brawl-trophy-badge-card.widget-card-holographic {
  border: 1.5px solid var(--holo-1, #ff007f) !important;
  box-shadow: 0 0 16px var(--holo-2, #00f0ff) !important;
  background: rgba(15, 23, 42, 0.85) !important;
}

.myspace-widget-card.widget-card-shiny,
.brawl-stats-card.widget-card-shiny,
.brawl-trophy-badge-card.widget-card-shiny {
  position: relative !important;
  overflow: hidden !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: crystalGlint 3.5s ease-in-out infinite;
}

.myspace-widget-card.widget-card-shiny::before,
.brawl-stats-card.widget-card-shiny::before,
.brawl-trophy-badge-card.widget-card-shiny::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: crystalShineSweep 7.5s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
}


/* Social Links List */
.links-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.xp-link-card {
  width: 100%;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--text-color);
  font-weight: 600;
  font-size: 0.92rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  cursor: pointer;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.xp-link-card:hover {
  background: var(--btn-hover);
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 10px var(--accent-color);
}

.link-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 3;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.link-left span,
.link-badge-tag {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.link-icon {
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transform: translateZ(0);
}

.link-badge-tag {
  font-size: 0.7rem;
  opacity: 0.7;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0,0,0,0.2);
  position: relative;
  z-index: 3;
}

/* Connection Size Variants */
.xp-link-card.link-size-small {
  padding: 6px 12px !important;
  min-height: 36px !important;
  font-size: 0.82rem !important;
  border-width: 1px !important;
}
.xp-link-card.link-size-small .link-icon img {
  width: 16px !important;
  height: 16px !important;
}
.xp-link-card.link-size-small .link-left span {
  font-size: 0.82rem !important;
}

.xp-link-card.link-size-medium {
  padding: 12px 16px !important;
  min-height: 48px !important;
  font-size: 0.95rem !important;
  border-width: 2px !important;
}
.xp-link-card.link-size-medium .link-icon img {
  width: 20px !important;
  height: 20px !important;
}
.xp-link-card.link-size-medium .link-left span {
  font-size: 0.95rem !important;
}

.xp-link-card.link-size-large {
  padding: 18px 22px !important;
  min-height: 64px !important;
  font-size: 1.15rem !important;
  border-width: 3px !important;
  font-weight: 700 !important;
}
.xp-link-card.link-size-large .link-icon img {
  width: 28px !important;
  height: 28px !important;
}
.xp-link-card.link-size-large .link-left span {
  font-size: 1.12rem !important;
}

/* Connection Shiny Crystal Effect */
@keyframes crystalShineSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes crystalGlint {
  0%, 100% {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), 0 0 4px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 12px rgba(255, 255, 255, 0.45);
  }
}

.xp-link-card.link-card-shiny {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: crystalGlint 7s ease-in-out infinite;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.xp-link-card.link-card-shiny::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.35) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: crystalShineSweep 7.5s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

.xp-link-card.link-card-shiny::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}

/* Chrome scroll preservation for roblox character */
.roblox-character-avatar,
.roblox-avatar-container,
.roblox-widget-wrap,
.roblox-stats-card {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
}

/* Views Counter & Footer */
.xp-footer {
  margin-top: 10px;
  font-size: 0.78rem;
  opacity: 0.75;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 10px;
  border-top: 1px dashed var(--btn-border);
}

.view-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-retro);
}

.branding-tag a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: bold;
}

/* Tooltip Feedback */
.copied-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: rgba(0, 0, 0, 0.9);
  color: #60a5fa;
  border: 1px solid #3b82f6;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 2000;
  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.copied-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ==========================================================================
   HOMEPAGE & DASHBOARD WINDOWS (DESKTOP SHELL)
   ========================================================================== */

.desktop-shell {
  width: 100vw;
  height: 100vh;
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: 40px; /* Taskbar height */
  overflow: hidden;
}

.desktop-icons {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.desktop-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
}

.desktop-icon-btn:hover {
  background: rgba(59, 130, 246, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.desktop-icon-img {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

/* Taskbar */
.xp-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 38px;
  background: linear-gradient(180deg, #1f2f98 0%, #245edb 10%, #245edb 90%, #1941a5 100%);
  border-top: 1px solid #4282f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 500;
}

.xp-start-btn {
  height: 100%;
  padding: 0 16px;
  background: linear-gradient(180deg, #388e3c 0%, #2e7d32 100%);
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 0 8px 8px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 2px 0 5px rgba(0,0,0,0.3);
  cursor: pointer;
}

.xp-start-btn:hover {
  filter: brightness(1.15);
}

.xp-taskbar-tasks {
  flex: 1;
  display: flex;
  padding: 0 10px;
  gap: 6px;
}

.taskbar-item {
  background: linear-gradient(180deg, #245edb 0%, #1941a5 100%);
  border: 1px solid #102a70;
  color: #fff;
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 160px;
  cursor: pointer;
}

.taskbar-item.active {
  background: linear-gradient(180deg, #1941a5 0%, #0d235c 100%);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.xp-systray {
  background: linear-gradient(180deg, #0e70b9 0%, #094e82 100%);
  height: 100%;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 0.78rem;
  border-left: 1px solid #105991;
}

/* ==========================================================================
   RESPONSIVE MODIFIERS FOR PHONE & TABLET
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal overflow on mobile */
  body.desktop-mode {
    overflow: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
  }

  .desktop-workspace {
    padding: 0;
    overflow: hidden;
  }

  /* Force all window instances to fit mobile screen gracefully */
  .xp-window.window-instance {
    position: fixed !important;
    left: 8px !important;
    top: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100vh - 54px) !important;
    max-height: calc(100vh - 54px) !important;
    border-radius: 8px 8px 0 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .window-scroll-body {
    max-height: calc(100vh - 105px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
  }

  /* Tagboard window keyboard-adaptive height on mobile */
  #win-retro-forum {
    height: calc(100dvh - 54px - var(--keyboard-offset, 0px)) !important;
    max-height: calc(100dvh - 54px - var(--keyboard-offset, 0px)) !important;
    transition: height 0.15s ease;
  }

  #win-retro-forum .retro-forum-body-wrap {
    height: 100% !important;
    max-height: 100% !important;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #win-retro-forum .retro-shoutbox-stream {
    flex: 1;
    min-height: 100px;
    overflow-y: auto !important;
  }

  /* Floating toast keyboard offset on mobile */
  .desktop-chat-toast-container {
    bottom: calc(46px + var(--keyboard-offset, 0px)) !important;
    transition: bottom 0.15s ease;
  }

  /* Hide resizing handles on mobile to prevent accidental dragging */
  .xp-resizer-se,
  .xp-resizer-e,
  .xp-resizer-s {
    display: none !important;
  }

  /* Desktop icons on mobile */
  .desktop-icons-container {
    top: 10px;
    left: 10px;
    gap: 8px;
  }

  .desktop-icon-btn {
    width: 70px;
    padding: 4px 2px;
    font-size: 0.7rem;
  }

  .desktop-icon-img {
    width: 38px;
    height: 38px;
  }

  /* Discord window mobile */
  .discord-hero-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 8px;
  }

  .discord-stats-row {
    flex-direction: column;
    gap: 8px;
  }

  /* Arcade tabs mobile */
  .arcade-nav-tabs {
    gap: 4px;
  }

  .arcade-tab-btn {
    padding: 4px 8px;
    font-size: 0.72rem;
  }

  .patente-buttons-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .arcade-options-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .holo-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Taskbar on mobile */
  .xp-taskbar {
    height: 38px;
  }

  .start-btn-brand {
    font-size: 0.85rem;
  }

  .systray-btn, .clock-pill {
    font-size: 0.72rem;
    padding: 2px 6px;
  }

  .xp-start-menu {
    width: 290px;
    left: 4px;
    bottom: 42px;
  }
}

/* ==========================================================================
   DESKTOP XP & WINDOW MANAGER SUITE
   ========================================================================== */
body.desktop-mode {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  inset: 0;
  background: #0b1120;
}

.desktop-workspace {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 38px;
  overflow: hidden;
  pointer-events: auto;
}

/* ==========================================================================
   DESKTOP DYNAMIC WALLPAPERS & VISTA AERO TRANSITIONS
   ========================================================================== */
.desktop-wallpaper-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.desktop-wallpaper-bg.active {
  opacity: 1;
  transform: scale(1);
}

#desktop-wallpaper-bg-1 {
  background-image: url('/wallpapers/classic_default.jpg');
}

.desktop-wallpaper-bg {
  will-change: opacity, transform;
}

/* Windows Vista Aero Glass DWM Cross-Dissolve Flash */
.desktop-wallpaper-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(56, 189, 248, 0.3) 40%, rgba(2, 132, 199, 0.2) 70%, transparent 95%);
}

.desktop-wallpaper-overlay.flash {
  animation: vistaAeroFlash 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes vistaAeroFlash {
  0% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transform: scale(0.98);
  }
  30% {
    opacity: 0.95;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: scale(1);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transform: scale(1.02);
  }
}

/* Windows Vista / XP On-Screen Display HUD */
.vista-wallpaper-hud {
  position: fixed;
  top: 48px;
  left: 50%;
  transform: translateX(-50%) translateY(-25px) scale(0.92);
  z-index: 999999;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.55);
  border-radius: 12px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.75), 0 0 25px rgba(56, 189, 248, 0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f1f5f9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-system);
}

.vista-wallpaper-hud.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.vista-wallpaper-hud .hud-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25) 0%, rgba(30, 58, 138, 0.45) 100%);
  border: 1px solid rgba(56, 189, 248, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.vista-wallpaper-hud .hud-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vista-wallpaper-hud .hud-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vista-wallpaper-hud .hud-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  font-weight: 700;
}

.vista-wallpaper-hud .hud-counter {
  font-size: 0.68rem;
  background: rgba(56, 189, 248, 0.2);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.vista-wallpaper-hud .hud-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.vista-wallpaper-hud .hud-desc {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* Desktop Icons Grid */
.desktop-icons-container {
  position: absolute;
  top: 14px;
  left: 14px;
  max-height: calc(100vh - 54px);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px 14px;
  z-index: 20;
  pointer-events: none;
}

.desktop-icon-btn {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 84px;
  padding: 5px 3px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.76rem;
  font-family: var(--font-system);
  text-shadow: 1px 1px 2px #000, 0 0 4px #000;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.desktop-icon-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.desktop-icon-btn:hover {
  background: rgba(49, 130, 206, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(2px);
  transform: translateY(-2px);
}

.desktop-icon-btn.selected,
.desktop-icon-btn:active {
  background: rgba(11, 87, 208, 0.45);
  border: 1px dotted #ffffff;
}

.desktop-icon-badge {
  position: absolute;
  top: -2px;
  right: 12px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Compact screens / laptops with 1366x768 or 1080p 125%-150% scaling */
@media (max-height: 760px) {
  .desktop-icons-container {
    top: 10px;
    left: 10px;
    max-height: calc(100vh - 48px);
    gap: 8px 10px;
  }
  .desktop-icon-btn {
    width: 78px;
    padding: 4px 2px;
    font-size: 0.72rem;
    gap: 3px;
  }
  .desktop-icon-img {
    width: 36px;
    height: 36px;
  }
}

@media (max-height: 580px) {
  .desktop-icons-container {
    top: 8px;
    left: 8px;
    max-height: calc(100vh - 44px);
    gap: 6px 8px;
  }
  .desktop-icon-btn {
    width: 72px;
    padding: 3px 2px;
    font-size: 0.68rem;
    gap: 2px;
  }
  .desktop-icon-img {
    width: 32px;
    height: 32px;
  }
}

/* Window Instance System */
.xp-window.window-instance {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--xp-bg-grey);
  border: 3px solid #0055ea;
  border-top: 3px solid #0055ea;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0,0,0,0.3);
  z-index: 100;
  user-select: text;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.xp-window.window-instance.inactive {
  border-color: #7697c6;
  opacity: 0.96;
}

.xp-window.window-instance.inactive .xp-titlebar {
  background: linear-gradient(180deg, #7697c6 0%, #8eaad6 20%, #7697c6 80%, #6181b0 100%);
  border-bottom-color: #55729c;
}

.xp-window.window-instance.minimized {
  display: none !important;
}

.xp-window.window-instance.maximized {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(100vh - 38px) !important;
  border-radius: 0;
  border-width: 2px;
}

.xp-titlebar {
  cursor: grab;
  user-select: none;
}
.xp-titlebar:active {
  cursor: grabbing;
}

.window-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  max-height: calc(82vh - 80px);
  scrollbar-width: thin;
  scrollbar-color: #245edb #ece9d8;
}

.window-scroll-body::-webkit-scrollbar {
  width: 12px;
}
.window-scroll-body::-webkit-scrollbar-track {
  background: #ece9d8;
  border-left: 1px solid #d4d0c8;
}
.window-scroll-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #3593ff 0%, #0055ea 100%);
  border: 1px solid #003c90;
  border-radius: 2px;
}

/* Window Toolbar (Explorer Style) */
.xp-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #f0ede1 0%, #e0dcce 100%);
  border-bottom: 1px solid #c0bcb0;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.xp-address-bar {
  flex: 1;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  padding: 2px 8px;
  gap: 6px;
  font-size: 0.82rem;
  color: #333;
}

.xp-address-bar input {
  border: none;
  outline: none;
  width: 100%;
  font-family: var(--font-system);
  font-size: 0.82rem;
}

/* Feed Window Explorer Grid */
.feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.feed-card {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.feed-card:hover {
  transform: translateY(-2px);
  border-color: #0055ea;
  box-shadow: 0 4px 10px rgba(0, 85, 234, 0.2);
  background: #f8fbff;
}

.feed-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #0055ea;
  object-fit: cover;
  flex-shrink: 0;
  background: #ece9d8;
}

.feed-info {
  flex: 1;
  overflow: hidden;
}

.feed-name {
  font-weight: bold;
  font-size: 0.95rem;
  color: #003c90;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feed-username {
  font-size: 0.78rem;
  color: #666;
  margin-bottom: 3px;
}

.feed-bio {
  font-size: 0.8rem;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.feed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.74rem;
  color: #555;
}

/* Discord Window Styles */
.discord-card-widget {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.discord-hero-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  color: #ffffff;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #363db5;
  box-shadow: 0 4px 12px rgba(88, 101, 242, 0.35);
}

.discord-server-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.discord-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}

.discord-stat-pill {
  background: #f0ede1;
  border: 1px solid #c0bcb0;
  border-radius: 4px;
  padding: 8px 12px;
  text-align: center;
}

.discord-stat-val {
  font-size: 1.3rem;
  font-weight: bold;
  color: #003c90;
}

.discord-stat-lbl {
  font-size: 0.75rem;
  color: #666;
}

/* User Account Section inside Discord Window */
.user-auth-box {
  background: #fdfdfd;
  border: 1px solid #b5c7de;
  border-radius: 6px;
  padding: 14px;
}

.user-profile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.user-profile-row img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #0055ea;
}

.user-quick-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.xp-btn-secondary {
  background: linear-gradient(180deg, #ffffff 0%, #e0dcce 100%);
  border: 1px solid #7f9db9;
  border-radius: 3px;
  padding: 6px 12px;
  color: #000;
  font-size: 0.82rem;
  font-family: var(--font-system);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

.xp-btn-secondary:hover {
  background: linear-gradient(180deg, #f5f5f5 0%, #d4cfbe 100%);
  border-color: #0055ea;
}

.xp-btn-primary {
  background: linear-gradient(180deg, #0058ee 0%, #0046be 100%);
  border: 1px solid #003c90;
  border-radius: 3px;
  padding: 7px 16px;
  color: #ffffff;
  font-size: 0.85rem;
  font-family: var(--font-system);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.35);
}

.xp-btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* my.site Window Styles */
.mypage-status-banner {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 12px;
  line-height: 1.4;
}

.mypage-status-banner.granted {
  background: #e8f5e9;
  border: 1px solid #81c784;
  color: #1b5e20;
}

.mypage-status-banner.locked {
  background: #fff8e1;
  border: 1px solid #ffd54f;
  color: #e65100;
}

.mypage-panel-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-border, #7f9db9);
  padding: 14px;
  border-radius: 6px;
  color: var(--text-color, #0f172a);
}

.mypage-heading {
  font-size: 0.85rem;
  font-weight: bold;
  color: #003c90;
  margin-bottom: 4px;
}

.mypage-url-badge {
  font-size: 0.95rem;
  font-family: monospace;
  background: #f0ede1;
  padding: 8px 12px;
  border: 1px solid #c0bcb0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #0f172a;
}

.mypage-label {
  font-size: 0.82rem;
  font-weight: bold;
  color: #333;
}

.mypage-muted-text {
  font-size: 0.85rem;
  color: #555;
}

.mypage-studio-link {
  font-weight: bold;
  color: #003c90;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.slug-input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #7f9db9;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.slug-prefix {
  background: #ece9d8;
  padding: 6px 10px;
  font-weight: bold;
  font-size: 0.85rem;
  color: #555;
  border-right: 1px solid #c0bcb0;
}

.slug-input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  padding: 6px 10px;
  font-family: var(--font-system);
  font-size: 0.9rem;
  font-weight: 600;
  color: #003c90;
}

/* Paradoxes Arcade Window Styles */
.arcade-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.arcade-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1e1b4b;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid #4338ca;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.arcade-score-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.1rem;
}

.arcade-score-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.arcade-nav-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 2px solid #0055ea;
  padding-bottom: 6px;
}

.arcade-tab-btn {
  background: #ece9d8;
  border: 1px solid #7f9db9;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-family: var(--font-system);
  font-weight: bold;
  cursor: pointer;
  color: #333;
}

.arcade-tab-btn.active {
  background: #0055ea;
  color: #ffffff;
  border-color: #003c90;
}

.arcade-arena {
  background: #0f172a;
  color: #ffffff;
  border-radius: 6px;
  border: 2px solid #3b82f6;
  padding: 24px 20px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
  box-sizing: border-box;
}

.arcade-statement-box {
  background: #1e293b;
  border: 2px solid #38bdf8;
  padding: 18px 24px;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f8fafc;
  width: 100%;
  max-width: 720px;
  line-height: 1.5;
  margin-top: 4px;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  text-align: center;
}

.arcade-cultura-box {
  background: #1e293b;
  border: 2px solid #a855f7;
  padding: 18px 24px;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f8fafc;
  width: 100%;
  max-width: 720px;
  line-height: 1.5;
  margin-top: 4px;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(168,85,247,0.3);
  word-wrap: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  text-align: center;
}

.arcade-next-round-box {
  margin-top: 16px;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Utily Dual Emojis (Seamless Attached Emoji Pair) */
.game-dual-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  gap: 0;
  margin: 0 4px;
}

.game-dual-emoji img {
  height: 24px;
  width: auto;
  image-rendering: pixelated;
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  pointer-events: none;
}

.arcade-tab-btn .game-dual-emoji {
  margin: 0 4px 0 0;
}
.arcade-tab-btn .game-dual-emoji img {
  height: 18px;
}

.arcade-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.3rem;
  font-family: 'Pixelify Sans', monospace;
  color: #38bdf8;
  margin-bottom: 6px;
}

.arcade-title .game-dual-emoji img {
  height: 32px;
}

.desktop-icon-btn .game-dual-emoji {
  margin: 0 auto;
}
.desktop-icon-btn .game-dual-emoji img {
  height: 30px;
}

.arcade-desc {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 16px;
}

.arcade-expression-box {
  background: #1e293b;
  border: 2px solid #60a5fa;
  padding: 16px 28px;
  border-radius: 8px;
  font-size: 2.2rem;
  font-weight: bold;
  font-family: 'Pixelify Sans', monospace;
  letter-spacing: 2px;
  color: #facc15;
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.4);
  margin-bottom: 16px;
}

.arcade-timer-bar-wrap {
  width: 80%;
  max-width: 360px;
  height: 8px;
  background: #334155;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}

.arcade-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
  transition: width 0.1s linear;
}

.arcade-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  margin-top: 12px;
}

.arcade-option-btn {
  background: #1e293b;
  border: 1px solid #475569;
  color: #f8fafc;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.arcade-option-btn:hover {
  background: #2563eb;
  border-color: #60a5fa;
  transform: translateY(-2px);
}

.arcade-option-btn.correct {
  background: #16a34a !important;
  border-color: #4ade80 !important;
}

.arcade-option-btn.wrong {
  background: #dc2626 !important;
  border-color: #f87171 !important;
}

.arcade-flag-preview {
  width: 130px;
  height: 86px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  margin-bottom: 12px;
}

.arcade-word-scramble {
  font-family: 'Pixelify Sans', monospace;
  font-size: 2rem;
  letter-spacing: 6px;
  color: #a855f7;
  background: #1e1b4b;
  border: 2px dashed #818cf8;
  padding: 12px 24px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.arcade-input-group {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  justify-content: center;
}

.arcade-input {
  flex: 1;
  background: #0f172a;
  border: 2px solid #3b82f6;
  border-radius: 4px;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 1.05rem;
  font-family: var(--font-system);
  text-align: center;
  outline: none;
}

.arcade-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.arcade-history-log {
  width: 100%;
  max-height: 120px;
  overflow-y: auto;
  background: #020617;
  border: 1px solid #334155;
  border-radius: 4px;
  padding: 6px 10px;
  margin-top: 12px;
  font-size: 0.8rem;
  text-align: left;
  font-family: monospace;
}

.arcade-history-log p {
  margin: 3px 0;
  line-height: 1.3;
}

/* XP Start Menu */
.xp-start-menu {
  position: fixed;
  bottom: 38px;
  left: 0;
  width: 380px;
  max-width: calc(100vw - 10px);
  max-height: calc(100vh - 42px);
  background: #ffffff;
  border: 2px solid #0055ea;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  display: none;
  flex-direction: column;
  z-index: 600;
  overflow: hidden;
  font-family: var(--font-system);
}

.xp-start-menu.open {
  display: flex;
}

.start-menu-header {
  background: linear-gradient(180deg, #0058ee 0%, #0046be 100%);
  color: #ffffff;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: bold;
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  flex-shrink: 0;
}

.start-menu-header img {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: 2px solid #ffffff;
}

.start-menu-body {
  display: flex;
  min-height: 200px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.start-menu-left {
  flex: 1.2;
  background: #ffffff;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.start-menu-right {
  flex: 1;
  background: #d3e5fa;
  border-left: 1px solid #95bdee;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.start-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
  font-size: 0.84rem;
}

.start-menu-item:hover {
  background: #2f71cd;
  color: #ffffff;
}

.start-menu-item:hover .start-subtext {
  color: #e0edff;
}

.start-menu-item img {
  width: 26px;
  height: 26px;
}

.start-item-text {
  display: flex;
  flex-direction: column;
}

.start-subtext {
  font-size: 0.72rem;
  color: #666;
}

.start-menu-footer {
  background: linear-gradient(180deg, #4282f5 0%, #1f5edb 100%);
  padding: 8px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #3270e0;
}

.start-footer-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--font-system);
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}

.start-footer-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Maximized Window Body Height Fix */
.xp-window.window-instance.maximized .window-scroll-body {
  max-height: calc(100vh - 38px - 65px) !important;
  height: 100% !important;
}

/* ==========================================================================
   MY DISCORD: HOLOGRAPHIC & CUTE Y2K PROFILE CARD
   ========================================================================== */
.holographic-card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.holographic-card {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(240, 246, 255, 0.85) 50%, rgba(253, 242, 248, 0.8) 100%);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  box-shadow: 0 10px 35px rgba(236, 72, 153, 0.25), 0 0 20px rgba(59, 130, 246, 0.25);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  padding: 20px;
  color: #1e293b;
  font-family: var(--font-system);
}

.holographic-shimmer {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: linear-gradient(
    45deg,
    transparent 20%,
    rgba(255, 255, 255, 0.35) 25%,
    rgba(244, 114, 182, 0.25) 30%,
    rgba(96, 165, 250, 0.25) 35%,
    rgba(167, 139, 250, 0.3) 40%,
    transparent 45%
  );
  pointer-events: none;
  animation: holoShine 8s infinite linear;
}

@keyframes holoShine {
  0% { transform: translateY(-50%) rotate(25deg); }
  50% { transform: translateY(20%) rotate(25deg); }
  100% { transform: translateY(-50%) rotate(25deg); }
}

.holo-banner {
  height: 90px;
  width: calc(100% + 40px);
  margin: -20px -20px 0 -20px;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #5865f2;
}

.holo-header-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: -38px;
  position: relative;
  z-index: 2;
}

.holo-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25), 0 0 15px rgba(236,72,153,0.5);
  object-fit: cover;
  background: #f1f5f9;
}

.holo-names {
  flex: 1;
}

.holo-display-name {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.holo-username {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 600;
}

.holo-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.holo-stat-box {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(203, 213, 225, 0.8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.holo-stat-val {
  font-size: 1.25rem;
  font-weight: bold;
  color: #2563eb;
  font-family: 'Pixelify Sans', monospace;
}

.holo-stat-lbl {
  font-size: 0.72rem;
  color: #64748b;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 2px;
}

.holo-badges-rack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.holo-badge-pill {
  background: linear-gradient(135deg, rgba(236,72,153,0.15) 0%, rgba(59,130,246,0.15) 100%);
  border: 1px solid rgba(236,72,153,0.4);
  color: #475569;
  font-size: 0.74rem;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.holo-meta-row {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(203, 213, 225, 0.8);
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #64748b;
}

/* ==========================================================================
   DISCORD CONTROL PANEL (ADMIN CENTER)
   ========================================================================== */
.admin-control-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.admin-tile-card {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-tile-card:hover {
  transform: translateY(-2px);
  border-color: #0055ea;
  box-shadow: 0 6px 16px rgba(0, 85, 234, 0.2);
}

.admin-tile-icon {
  width: 42px;
  height: 42px;
}

.admin-tile-title {
  font-weight: bold;
  font-size: 1.05rem;
  color: #003c90;
}

.admin-tile-desc {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.35;
  flex: 1;
}

/* Event Creator Form */
.event-creator-box {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 6px;
  padding: 16px;
  margin-top: 14px;
}

.event-creator-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.event-creator-row label {
  font-size: 0.85rem;
  font-weight: bold;
  color: #333;
}

.event-creator-row input,
.event-creator-row textarea,
.event-creator-row select {
  border: 1px solid #7f9db9;
  border-radius: 3px;
  padding: 8px 10px;
  font-family: var(--font-system);
  font-size: 0.85rem;
  outline: none;
}

.event-creator-row input:focus,
.event-creator-row textarea:focus {
  border-color: #0055ea;
  box-shadow: 0 0 5px rgba(0, 85, 234, 0.35);
}

/* Patente Quiz True/False Buttons */
.patente-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin-top: 8px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.patente-btn {
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 1.25rem;
  font-weight: bold;
  font-family: var(--font-system);
  cursor: pointer;
  border: 2px solid;
  transition: transform 0.15s ease, filter 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
}

.patente-btn.vero {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border-color: #4ade80;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.patente-btn.falso {
  background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
  border-color: #f87171;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.patente-btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.1);
}

/* ==========================================================================
   PIXEL EMOJI ART & CRISP RENDERING
   ========================================================================== */
img.pixel-icon,
.desktop-icon-img,
.xp-title-icon,
.admin-tile-icon,
.start-menu-item img {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ==========================================================================
   WINDOW RESIZE HANDLES (Interactive XP Dimensions)
   ========================================================================== */
.xp-window.window-instance {
  min-width: 320px;
  min-height: 220px;
  max-width: 98vw;
  max-height: calc(100vh - 42px);
  position: absolute;
  box-sizing: border-box;
}

.xp-window.window-instance.resizing {
  transition: none !important;
  box-shadow: 0 14px 40px rgba(0, 85, 234, 0.4), 0 0 15px rgba(236, 72, 153, 0.35) !important;
}

.xp-resizer-se {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: se-resize;
  z-index: 60;
  background: radial-gradient(circle, #7f9db9 1.5px, transparent 1.5px);
  background-size: 4px 4px;
  background-position: bottom right;
  border-radius: 0 0 4px 0;
}

.xp-resizer-se:hover {
  background-color: rgba(236, 72, 153, 0.25);
}

.xp-resizer-e {
  position: absolute;
  right: 0;
  top: 30px;
  bottom: 18px;
  width: 6px;
  cursor: e-resize;
  z-index: 55;
}

.xp-resizer-s {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 18px;
  height: 6px;
  cursor: s-resize;
  z-index: 55;
}

/* ==========================================================================
   SEMI-KAWAII & KUROMI INTERACTIVE REACTION EFFECTS
   ========================================================================== */
.kawaii-floating-reaction {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: kawaiiPopAnim 1.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.kawaii-reaction-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(236, 72, 153, 0.5));
  animation: kawaiiBounce 0.4s infinite alternate ease-in-out;
}

.kawaii-reaction-bubble {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #f472b6;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: bold;
  color: #be185d;
  font-family: var(--font-system);
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3), inset 0 1px 0 #fff;
  white-space: nowrap;
}

@keyframes kawaiiPopAnim {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.6) rotate(-8deg);
  }
  20% {
    opacity: 1;
    transform: translateY(-8px) scale(1.1) rotate(4deg);
  }
  75% {
    opacity: 1;
    transform: translateY(-24px) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-45px) scale(0.85);
  }
}

@keyframes kawaiiBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* Click Sparkle Particles */
.pixel-click-sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 22px;
  height: 22px;
  animation: sparkleFade 0.8s ease-out forwards;
}

@keyframes sparkleFade {
  0% {
    opacity: 1;
    transform: scale(0.5) translate(0, 0);
  }
  100% {
    opacity: 0;
    transform: scale(1.4) translate(var(--dx, 0px), var(--dy, -25px));
  }
}

/* ==========================================================================
   FRUTIGER AERO AMBIENT EFFECTS & DYNAMICS
   ========================================================================== */

/* Ambient Floating Liquid Bubbles (Interactive Poppable) */
.aero-bubbles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

.aero-bubble {
  position: absolute;
  bottom: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(125, 211, 252, 0.35) 60%, rgba(56, 189, 248, 0.55) 100%);
  box-shadow: inset -2px -3px 6px rgba(14, 165, 233, 0.6), inset 2px 3px 5px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(56, 189, 248, 0.35);
  animation: aeroBubbleRise var(--duration, 14s) infinite linear;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.25s ease;
}

/* Light Mode: Crystal Frutiger Daylight Aero Bubbles */
body.theme-mode-light .aero-bubble {
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(186, 230, 253, 0.4) 60%, rgba(56, 189, 248, 0.6) 100%);
  box-shadow: inset -2px -3px 6px rgba(14, 165, 233, 0.55), inset 2px 3px 5px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(56, 189, 248, 0.35);
}

/* Dark Mode: Midnight Neon / Vista Glass Bubbles */
body.theme-mode-dark .aero-bubble {
  background: radial-gradient(circle at 35% 30%, rgba(224, 242, 254, 0.85) 0%, rgba(56, 189, 248, 0.3) 30%, rgba(30, 58, 138, 0.45) 65%, rgba(14, 165, 233, 0.55) 100%);
  box-shadow: inset -2px -3px 7px rgba(2, 132, 199, 0.8), inset 2px 3px 5px rgba(255, 255, 255, 0.85), 0 0 16px rgba(56, 189, 248, 0.45);
}

/* Blind Mode: High Contrast Bubbles */
body.theme-mode-blind .aero-bubble {
  border: 2px solid #ffffff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0.85) 100%);
  box-shadow: inset 0 0 6px #ffffff, 0 0 12px rgba(255, 255, 255, 0.8);
}

.aero-bubble:hover {
  transform: scale(1.18);
  filter: brightness(1.3) drop-shadow(0 0 10px rgba(56, 189, 248, 0.7));
}

/* Water Pop Explosion Effect & Ambient Floating Bubbles */
.aero-pop-container {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.aero-pop-skin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 25%, rgba(125, 211, 252, 0.55) 60%, rgba(14, 165, 233, 0.95) 100%);
  box-shadow: inset -2px -3px 8px rgba(14, 165, 233, 0.9), inset 2px 3px 6px rgba(255, 255, 255, 1), 0 0 22px rgba(56, 189, 248, 0.95);
  animation: aeroSkinPop 0.24s cubic-bezier(0.12, 0.8, 0.25, 1) forwards;
}

.aero-pop-skin::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 35%;
  height: 25%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  transform: rotate(-35deg);
  filter: blur(0.5px);
}

@keyframes aeroSkinPop {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1.2);
  }
  35% {
    transform: scale(1.4) rotate(8deg);
    opacity: 0.95;
    filter: brightness(2.8) drop-shadow(0 0 15px #38bdf8);
    clip-path: polygon(50% 0%, 82% 12%, 100% 38%, 88% 72%, 100% 100%, 65% 88%, 35% 100%, 0% 82%, 12% 40%, 0% 12%);
  }
  70% {
    transform: scale(1.75) rotate(-12deg);
    opacity: 0.45;
    filter: brightness(4) blur(2px) drop-shadow(0 0 25px #7dd3fc);
    clip-path: polygon(50% 0%, 95% 5%, 100% 50%, 85% 95%, 50% 100%, 15% 95%, 0% 50%, 5% 15%);
  }
  100% {
    transform: scale(2.1);
    opacity: 0;
    filter: brightness(5) blur(6px);
  }
}

.aero-pop-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid rgba(186, 230, 253, 0.95);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.9), inset 0 0 8px rgba(255, 255, 255, 0.8);
  pointer-events: none;
  animation: aeroRingExpand 0.32s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
}

.aero-pop-ring.inner {
  border: 2px dashed rgba(255, 255, 255, 0.9);
  animation-duration: 0.22s;
}

@keyframes aeroRingExpand {
  0% {
    transform: scale(0.35);
    opacity: 1;
  }
  60% {
    opacity: 0.85;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.aero-pop-droplet {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #7dd3fc 45%, #0284c7 100%);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.9), 0 0 2px #fff;
  pointer-events: none;
  animation: aeroDropletFly var(--fly-time, 0.35s) cubic-bezier(0.08, 0.82, 0.2, 1) forwards;
}

@keyframes aeroDropletFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(0.1);
    opacity: 0;
  }
}

.aero-pop-sparkle {
  position: absolute;
  color: #e0f2fe;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 8px #38bdf8, 0 0 14px #ffffff;
  animation: aeroSparkleBurst 0.34s ease-out forwards;
}

@keyframes aeroSparkleBurst {
  0% {
    transform: translate(0, 0) scale(0) rotate(0deg);
    opacity: 1;
  }
  40% {
    transform: translate(var(--sx), var(--sy)) scale(1.4) rotate(90deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--sx) * 1.25), calc(var(--sy) * 1.25)) scale(0) rotate(180deg);
    opacity: 0;
  }
}

.aero-bubble::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 30%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  transform: rotate(-35deg);
  filter: blur(0.5px);
}

@keyframes aeroBubbleRise {
  0% {
    transform: translate3d(0, 0, 0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  50% {
    transform: translate3d(12px, calc(-50vh - 60px), 0) scale(0.95);
  }
  85% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(-10px, calc(-100vh - 120px), 0) scale(1.1);
    opacity: 0;
  }
}

/* Frutiger Aero Glossy Shimmer on Titlebars & Cards */
.xp-titlebar::after,
.discord-hero-box::after,
.holographic-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-180%) skewX(-25deg);
  pointer-events: none;
  animation: aeroLiquidShimmer 8s infinite cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

@keyframes aeroLiquidShimmer {
  0%, 70% {
    transform: translateX(-180%) skewX(-25deg);
  }
  100% {
    transform: translateX(350%) skewX(-25deg);
  }
}

/* Draggable Desktop Icons */
.desktop-icon-btn.is-dragging {
  opacity: 0.82 !important;
  z-index: 9999 !important;
  cursor: grabbing !important;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
  transition: none !important;
}

.desktop-icon-btn.custom-positioned {
  position: absolute !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.desktop-icon-btn:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   DESKTOP LIVE CHAT TOAST & QUICK-REPLY STYLES
   ========================================================================== */

/* Retro Forum Emojis */
.retro-forum-emoji {
  display: inline-block;
  vertical-align: -3px;
  margin: 0 2px;
  height: 18px;
  width: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Floating Desktop Chat Toast Container (Right Side) */
.desktop-chat-toast-container {
  position: fixed;
  right: 20px;
  bottom: 46px; /* Just above taskbar */
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: Tahoma, 'Segoe UI', sans-serif;
  pointer-events: auto;
  max-height: calc(100vh - 54px);
}

/* Single Message Tagboard Toast Window Box */
.desktop-chat-toast {
  width: 340px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 90px);
  background: #ffffff;
  border: 1px solid #0055ea;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 85, 234, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: retroToastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.desktop-chat-toast.minimized-hidden {
  display: none !important;
}

@keyframes retroToastSlideIn {
  0% {
    opacity: 0;
    transform: translateX(40px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast-header {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 40%, #1e40af 100%);
  color: #ffffff;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-system);
  font-size: 0.78rem;
  font-weight: bold;
  border-bottom: 1px solid #1e3a8a;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  user-select: none;
  flex-shrink: 0;
}

.toast-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toast-header-icon {
  width: 16px;
  height: 16px;
}

.toast-title {
  letter-spacing: 0.3px;
}

.toast-live-dot {
  font-size: 0.65rem;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid #22c55e;
  color: #86efac;
  padding: 1px 5px;
  border-radius: 10px;
}

.toast-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.toast-nav-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 0.68rem;
  padding: 2px 5px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.toast-nav-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

.toast-counter-badge {
  font-family: monospace;
  font-size: 0.7rem;
  color: #dbeafe;
  padding: 0 3px;
}

.toast-ctrl-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.toast-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Toast Single Message Body */
.toast-body {
  background: #fdfdfd;
  padding: 10px 12px;
  min-height: 58px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  position: relative;
}

.toast-body:hover {
  background: #f8fafc;
}

.toast-body.msg-changing {
  opacity: 0;
  transform: translateY(-4px);
}

.toast-msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.toast-author-tag {
  font-weight: bold;
  color: #003c90;
}

.toast-author-tag.discord {
  color: #4f46e5;
}

.toast-time-tag {
  font-family: monospace;
  font-size: 0.7rem;
  color: #94a3b8;
}

.toast-message-text {
  font-size: 0.85rem;
  color: #1e293b;
  line-height: 1.4;
  word-break: break-word;
}

.toast-body-reply-hint {
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.75;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.toast-body:hover .toast-body-reply-hint {
  opacity: 1;
  color: #0055ea;
  text-decoration: underline;
}

/* Quick-Reply Popup Flyout */
.toast-reply-popup {
  background: #ece9d8;
  padding: 8px 10px;
  border-top: 1px solid #7f9db9;
  box-shadow: inset 0 1px 0 #fff;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  animation: toastPopupSlide 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastPopupSlide {
  0% {
    opacity: 0;
    max-height: 0;
    transform: translateY(-6px);
  }
  100% {
    opacity: 1;
    max-height: 220px;
    transform: translateY(0);
  }
}

.toast-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  font-size: 0.72rem;
  color: #334155;
  font-weight: bold;
}

.toast-popup-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748b;
  font-size: 0.75rem;
  padding: 0 4px;
  border-radius: 2px;
}
.toast-popup-close-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.toast-reply-form {
  display: flex;
  gap: 4px;
  align-items: center;
}

.toast-reply-input {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.82rem;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  background: #ffffff;
  font-family: Tahoma, sans-serif;
}

.toast-reply-input:focus {
  outline: none;
  border-color: #0055ea;
  box-shadow: 0 0 4px rgba(0, 85, 234, 0.35);
}

.toast-emoji-btn {
  background: #f0ede1;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  padding: 4px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-emoji-btn:hover {
  background: #e2e8f0;
}

.toast-send-btn {
  background: linear-gradient(180deg, #3593ff 0%, #0055ea 100%);
  border: 1px solid #003c90;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: bold;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s ease;
}

.toast-send-btn:hover {
  background: linear-gradient(180deg, #4da3ff 0%, #0066ff 100%);
}

.toast-emoji-shelf {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 6px;
  margin-top: 6px;
  max-height: 110px;
  overflow-y: auto;
}

.toast-status-tip {
  font-size: 0.68rem;
  color: #64748b;
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Online Badge in Toolbar */
.retro-online-badge {
  font-size: 0.72rem;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Floating Docked Pill Button */
.toast-docked-pill {
  background: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
  border: 1px solid #7a96df;
  border-radius: 16px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  font-family: var(--font-system);
  font-size: 0.8rem;
  font-weight: bold;
  color: #003c90;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.toast-docked-pill:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ffffff 0%, #dbeafe 100%);
  border-color: #2563eb;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.toast-pill-dot {
  font-size: 0.65rem;
}

/* Tagboard Window Message Stream */
/* Retro Forum Tagboard Desktop Layout */
#win-retro-forum {
  height: 520px;
  max-height: calc(100vh - 45px);
  display: flex;
  flex-direction: column;
}

#win-retro-forum .retro-forum-body-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

#win-retro-forum .retro-shoutbox-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  font-family: Tahoma, Verdana, sans-serif;
  font-size: 0.82rem;
  line-height: 1.45;
  scroll-behavior: smooth;
}

.retro-msg-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s ease;
  position: relative;
}

.retro-msg-row:nth-child(even) {
  background: #f8fafc;
}

.retro-msg-row:hover {
  background: #eff6ff;
}

.retro-msg-main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.retro-msg-content-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.retro-msg-time {
  font-family: monospace;
  font-size: 0.7rem;
  color: #94a3b8;
  white-space: nowrap;
  user-select: none;
}

.retro-msg-author {
  font-weight: bold;
  color: #003c90;
  white-space: nowrap;
}

.retro-msg-author.discord-user {
  color: #4f46e5;
}

.retro-msg-author.guest-user {
  color: #059669;
}

.retro-msg-content {
  color: #1e293b;
  overflow-wrap: anywhere;
  word-break: break-word;
  flex: 1;
}

/* Image & Media Previews in Messages */
.retro-msg-media-link {
  display: block;
  margin-top: 4px;
  max-width: 100%;
}

.retro-msg-img-preview {
  display: block;
  max-height: 140px;
  max-width: 240px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  object-fit: contain;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.retro-msg-img-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.retro-msg-link {
  color: #0284c7;
  text-decoration: underline;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.retro-msg-link:hover {
  color: #0369a1;
}

/* Reply Sub-bar in Message Row */
.retro-msg-reply-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: #64748b;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 7px;
  border-left: 2px solid #3b82f6;
  border-radius: 3px;
  margin-bottom: 2px;
  width: fit-content;
  max-width: 100%;
}

.retro-msg-reply-bar b {
  color: #1e40af;
}

.retro-msg-reply-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
  font-style: italic;
}

/* Highlight message if replying to current user */
.retro-msg-row.reply-to-me {
  background: #fef3c7 !important;
  border-left: 3px solid #f59e0b !important;
  box-shadow: inset 0 0 8px rgba(245, 158, 11, 0.2);
}

.reply-badge-me {
  background: #f59e0b;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  display: inline-block;
  user-select: none;
}

.retro-msg-reply-action-btn {
  opacity: 0;
  cursor: pointer;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 0.7rem;
  color: #475569;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.retro-msg-row:hover .retro-msg-reply-action-btn {
  opacity: 1;
}

.retro-msg-reply-action-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

@media (max-width: 768px) {
  .retro-msg-reply-action-btn {
    opacity: 0.85 !important;
  }
}

/* Floating Jump to Bottom Button */
.retro-scroll-bottom-pill {
  position: absolute;
  bottom: 12px;
  right: 18px;
  z-index: 25;
  background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 4px 12px;
  border: 1px solid #1e40af;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.12s ease, background 0.15s ease;
}

.retro-scroll-bottom-pill:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
}

.retro-scroll-bottom-pill:active {
  transform: translateY(0);
}

/* Active Reply Context Bar in Composer */
.retro-reply-context-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  border-left: 3px solid #0284c7;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: #0369a1;
  margin-bottom: 6px;
  animation: fadeIn 0.15s ease;
}

.retro-reply-context-bar .reply-context-info {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.retro-reply-context-bar .reply-context-snippet {
  color: #64748b;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.cancel-reply-btn {
  background: transparent;
  border: none;
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
  color: #64748b;
  padding: 0 4px;
  line-height: 1;
}

.cancel-reply-btn:hover {
  color: #ef4444;
}

.retro-forum-body-wrap {
  min-height: 280px;
  height: 420px;
  max-height: calc(100vh - 110px);
}

.retro-forum-post-area {
  background: #ece9d8;
  border-top: 2px solid #7f9db9;
  padding: 8px 12px;
}

.retro-post-identity-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: #334155;
  margin-bottom: 6px;
  gap: 8px;
  flex-wrap: wrap;
}

/* Anonymous Circular Toggle Pill ("tondo con scritto anonimo") */
.retro-anon-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e2e8f0;
  border: 1px solid #94a3b8;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.76rem;
  font-weight: 600;
  color: #475569;
}

.retro-anon-toggle-pill.small {
  padding: 2px 8px;
  font-size: 0.7rem;
}

.retro-anon-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.retro-anon-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.retro-anon-toggle-pill:hover {
  background: #f1f5f9;
  border-color: #64748b;
  color: #1e293b;
}

.retro-anon-toggle-pill:has(.retro-anon-input:checked),
.retro-anon-toggle-pill.active {
  background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 100%);
  border-color: #818cf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.4);
}

.retro-anon-toggle-pill:has(.retro-anon-input:checked) .retro-anon-circle,
.retro-anon-toggle-pill.active .retro-anon-circle {
  background: #a855f7;
  border-color: #ffffff;
  box-shadow: 0 0 6px #c084fc;
}

.retro-anon-toggle-pill:has(.retro-anon-input:checked) .retro-anon-text,
.retro-anon-toggle-pill.active .retro-anon-text {
  color: #e0e7ff;
  font-weight: 700;
}

.retro-discord-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #5865f2;
  color: #ffffff !important;
  font-size: 0.72rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid #4752c4;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.retro-discord-login-btn:hover {
  background: #4752c4;
  transform: translateY(-1px);
}


.retro-chat-input {
  flex: 1;
  background: #fff;
  border: 1px solid #7f9db9;
  padding: 6px 8px;
  font-family: Tahoma, sans-serif;
  font-size: 0.85rem;
  border-radius: 2px;
}
.retro-chat-input:focus {
  outline: none;
  border-color: #0055ea;
  box-shadow: 0 0 4px rgba(0, 85, 234, 0.4);
}

.retro-emoji-picker-shelf {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 8px;
  margin-top: 4px;
  max-height: 140px;
  overflow-y: auto;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.retro-emoji-shelf-title {
  font-size: 0.7rem;
  font-weight: bold;
  color: #64748b;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.retro-emojis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
  gap: 4px;
}

.retro-emoji-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.1s ease, border-color 0.1s ease;
}

.retro-emoji-btn:hover {
  transform: scale(1.25);
  background: #e0f2fe;
  border-color: #38bdf8;
  z-index: 2;
}

.retro-emoji-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ==========================================================================
   DESKTOP TOP-RIGHT SUPPORT LAUNCHER & WIDGET
   ========================================================================== */
.desktop-top-right-bar {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: calc(100vw - 36px);
  pointer-events: auto;
}

@media (max-height: 600px) and (min-width: 769px) {
  .desktop-top-right-bar {
    top: 8px;
    right: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
  }
}

.desktop-online-wtfs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  user-select: none;
  cursor: default;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.desktop-online-wtfs-pill:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
  transform: translateY(-1px);
}

.wtfs-pulse-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

.wtfs-count-num {
  font-family: var(--font-system);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.wtfs-label-text {
  font-family: var(--font-system);
  font-size: 0.72rem;
  font-weight: 600;
  color: #a7f3d0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  letter-spacing: 0.2px;
}

.desktop-support-widget {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.desktop-support-widget:hover {
  background: rgba(30, 58, 138, 0.85);
  border-color: rgba(96, 165, 250, 0.8);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.desktop-support-widget:active {
  transform: translateY(0) scale(0.98);
}

.support-widget-glow {
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(59, 130, 246, 0.2), transparent);
  pointer-events: none;
}

.support-widget-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-widget-icon {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.support-pulse-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: #22c55e;
  border: 1.5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #22c55e; }
  50% { transform: scale(1.3); opacity: 0.8; box-shadow: 0 0 12px #4ade80; }
}

.support-widget-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.support-widget-title {
  font-family: var(--font-system);
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.support-widget-subtitle {
  font-family: var(--font-system);
  font-size: 0.65rem;
  font-weight: 600;
  color: #86efac;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  letter-spacing: 0.3px;
}

/* ==========================================================================
   SUPPORT TICKET WINDOW (XP LUNA / AERO)
   ========================================================================== */
.support-status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.support-status-badge.online {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

.support-status-badge.closed {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fca5a5;
}

.support-hero-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  border: 1px solid #bae6fd;
  border-radius: 6px;
  margin-bottom: 12px;
}

.support-hero-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.support-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.support-avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #94a3b8;
  object-fit: cover;
}

.support-quick-tag {
  background: #ffffff;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-family: var(--font-system);
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
}

.support-quick-tag:hover {
  background: #eff6ff;
  border-color: #3b82f6;
  color: #1d4ed8;
}

.support-alert-error {
  padding: 8px 10px;
  background: #fef2f2;
  border: 1px solid #f87171;
  border-radius: 4px;
  color: #b91c1c;
  font-size: 0.78rem;
  font-weight: 500;
}

.support-operator-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.support-channel-badge {
  font-family: monospace;
  font-size: 0.72rem;
  padding: 2px 6px;
  background: #e2e8f0;
  color: #475569;
  border-radius: 4px;
}

.support-messages-stream {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 82%;
}

.support-msg-row.user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.support-msg-row.staff {
  align-self: flex-start;
}

.support-msg-row.system {
  align-self: center;
  max-width: 90%;
}

.support-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #3b82f6;
  object-fit: cover;
  flex-shrink: 0;
  background: #e2e8f0;
}

.support-msg-bubble {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.83rem;
  line-height: 1.4;
  word-break: break-word;
  position: relative;
}

.support-msg-row.user .support-msg-bubble {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff;
  border-bottom-right-radius: 2px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

.support-msg-row.staff .support-msg-bubble {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-bottom-left-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.support-msg-row.system .support-msg-bubble {
  background: #fef3c7;
  border: 1px dashed #f59e0b;
  color: #92400e;
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
}

.support-msg-header-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 0.72rem;
}

.support-staff-tag {
  background: #5865f2;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.support-msg-author-name {
  font-weight: 700;
  color: #0f172a;
}

.support-msg-row.user .support-msg-author-name {
  color: #dbeafe;
}

.support-msg-time-tag {
  color: #94a3b8;
  font-size: 0.68rem;
}

.support-msg-row.user .support-msg-time-tag {
  color: #bfdbfe;
}

.support-msg-img-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
  margin-top: 6px;
  display: block;
  border: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
}

.support-input-area {
  padding: 8px 12px;
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
}

.support-chat-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 0.85rem;
  border: 1px solid #94a3b8;
  border-radius: 3px;
}

.support-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 4px;
}

@media (max-width: 768px) {
  .desktop-top-right-bar {
    top: 10px;
    right: 10px;
    gap: 6px;
    flex-direction: column;
    align-items: flex-end;
  }
  .support-widget-subtitle {
    display: none;
  }
  /* Ambient sotto a Sound per cellulare */
  .desktop-aero-sound-widget {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    border-radius: 12px !important;
    min-width: 112px;
  }
  .desktop-aero-sound-widget .aero-sound-toggle-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    padding: 3px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
  }
  .desktop-aero-sound-widget .aero-audio-text {
    display: inline-block;
    white-space: nowrap;
  }
  .desktop-aero-sound-widget .aero-audio-text b {
    display: inline !important;
  }
  .desktop-aero-sound-widget .aero-audio-text span {
    display: inline !important;
  }
}

/* ==========================================================================
   Frutiger Aero Sound & Chill Ambient Controller (Top-Right Windows Style)
   ========================================================================== */
.desktop-aero-sound-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-bottom: 1px solid rgba(0, 85, 234, 0.3);
  box-shadow: 0 4px 14px rgba(0, 50, 120, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 3px 6px;
  z-index: 50;
}

.aero-sound-toggle-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(224, 242, 254, 0.5) 50%, rgba(186, 230, 253, 0.65) 100%);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(2, 132, 199, 0.4);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
  border-radius: 14px;
  padding: 4px 9px;
  font-size: 0.74rem;
  font-family: var(--font-system);
  font-weight: 600;
  color: #0369a1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.aero-sound-toggle-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, rgba(186, 230, 253, 0.7) 50%, rgba(125, 211, 252, 0.8) 100%);
  box-shadow: 0 3px 10px rgba(56, 189, 248, 0.4), inset 0 1px 0 #ffffff;
  color: #0284c7;
  transform: translateY(-1px);
}

.aero-sound-toggle-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(0, 0, 0, 0.15);
}

.aero-sound-toggle-btn.active {
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.95) 0%, rgba(186, 230, 253, 0.85) 50%, rgba(56, 189, 248, 0.45) 100%);
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.5), inset 0 1px 0 #ffffff;
  color: #0284c7;
}

.aero-sound-toggle-btn.muted {
  background: linear-gradient(180deg, rgba(254, 242, 242, 0.95) 0%, rgba(254, 202, 202, 0.85) 50%, rgba(248, 113, 113, 0.35) 100%);
  border-color: #f87171;
  color: #b91c1c;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25), inset 0 1px 0 #ffffff;
}

.aero-audio-eq-wave {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  width: 12px;
}

.aero-audio-eq-wave i {
  display: block;
  width: 2px;
  background: #0284c7;
  border-radius: 1px;
  height: 3px;
}

.aero-audio-eq-wave.active i:nth-child(1) {
  animation: aeroEqPulse 0.8s ease-in-out infinite alternate;
}
.aero-audio-eq-wave.active i:nth-child(2) {
  animation: aeroEqPulse 1.1s ease-in-out infinite alternate 0.2s;
}
.aero-audio-eq-wave.active i:nth-child(3) {
  animation: aeroEqPulse 0.9s ease-in-out infinite alternate 0.4s;
}

@keyframes aeroEqPulse {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* 90s/2000s Retro Arcade Sound FX Toggle Pill */
.arcade-sfx-pill {
  background: #0f172a;
  border: 1px solid #4ade80;
  color: #4ade80;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-family: 'Share Tech Mono', monospace;
  font-weight: bold;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.3);
}

.arcade-sfx-pill:hover {
  background: #1e293b;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
  transform: scale(1.03);
}

.arcade-sfx-pill:active {
  transform: scale(0.97);
}

/* ==========================================================================
   DESKTOP THEME SELECTOR WIDGET (Auto-Sync, Dark, Light, Colorblind Mode)
   ========================================================================== */
.desktop-aero-theme-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.aero-theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 4px 11px;
  color: #ffffff;
  font-size: 0.76rem;
  font-family: var(--font-system);
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.aero-theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 12px rgba(56, 189, 248, 0.45);
  transform: translateY(-1px);
}

.aero-theme-toggle-btn:active {
  transform: translateY(1px) scale(0.98);
}

.theme-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.theme-caret {
  font-size: 0.7rem;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.aero-theme-dropdown {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  min-width: 240px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 20px rgba(56, 189, 248, 0.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10000;
}

.aero-theme-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.theme-dropdown-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  padding: 6px 10px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  border: 1px solid transparent;
}

.theme-option:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.35);
  color: #ffffff;
  transform: translateX(2px);
}

.theme-option.active {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.2);
}

.theme-option .opt-icon {
  font-size: 1.15rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

.theme-option .opt-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.theme-option .opt-info b {
  font-size: 0.82rem;
  font-weight: 600;
}

.theme-option .opt-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}

.theme-option.active .opt-sub {
  color: #7dd3fc;
}

/* ==========================================================================
   THEME 1: DARK MODE (Royale Noir & Vista Midnight Aero Glass)
   ========================================================================== */
html.theme-mode-dark,
body.theme-mode-dark {
  --xp-bg-grey: #111827;
  --card-bg: rgba(17, 24, 39, 0.94);
  --win-border: #38bdf8;
  --title-bg: linear-gradient(180deg, #1e293b 0%, #334155 10%, #1e293b 30%, #0f172a 90%, #020617 100%);
  --title-text: #38bdf8;
  --text-color: #f1f5f9;
  --xp-text-main: #f1f5f9;
  --btn-bg: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  --btn-border: #334155;
  --btn-hover: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  --accent-color: #38bdf8;
  --neon-glow: 0 0 20px rgba(56, 189, 248, 0.35);

  background: #060913 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .scanlines {
  opacity: 0.3;
}

/* Dark Mode Windows */
body.theme-mode-dark .xp-window.window-instance {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.75), 0 0 18px rgba(56, 189, 248, 0.3) !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .xp-window.window-instance .xp-titlebar {
  background: linear-gradient(180deg, #1e293b 0%, #334155 12%, #1e293b 35%, #0f172a 90%, #020617 100%) !important;
  color: #38bdf8 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.25) !important;
}

body.theme-mode-dark .xp-window.window-instance.inactive {
  border-color: #334155 !important;
  opacity: 0.94;
}

body.theme-mode-dark .xp-window.window-instance.inactive .xp-titlebar {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  color: #94a3b8 !important;
  text-shadow: none !important;
}

body.theme-mode-dark .window-scroll-body {
  background: #0f172a !important;
  color: #f1f5f9 !important;
  scrollbar-color: #0284c7 #0b1120 !important;
}

body.theme-mode-dark .window-scroll-body::-webkit-scrollbar-track {
  background: #0b1120 !important;
  border-left: 1px solid #1e293b !important;
}

body.theme-mode-dark .window-scroll-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  border-color: #0369a1 !important;
}

body.theme-mode-dark .xp-toolbar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 1px solid #334155 !important;
  color: #94a3b8 !important;
}

body.theme-mode-dark .xp-address-bar {
  background: #0b1120 !important;
  border-color: #334155 !important;
  color: #38bdf8 !important;
}

body.theme-mode-dark .xp-footer {
  background: #0b1120 !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}

/* Dark Mode Window Cards & Inner Containers (Fix inverted white boxes & dark text) */
body.theme-mode-dark .discord-card-widget,
body.theme-mode-dark .feed-card,
body.theme-mode-dark .user-auth-box,
body.theme-mode-dark #mypage-content-area > div,
body.theme-mode-dark .retro-forum-post-area,
body.theme-mode-dark .support-view-pane,
body.theme-mode-dark .support-view-pane#support-view-chat,
body.theme-mode-dark .admin-panel,
body.theme-mode-dark .admin-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.theme-mode-dark .feed-card:hover {
  background: #273549 !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.25) !important;
}

body.theme-mode-dark .feed-name,
body.theme-mode-dark .discord-stat-val,
body.theme-mode-dark .retro-msg-author {
  color: #38bdf8 !important;
}

body.theme-mode-dark .feed-username,
body.theme-mode-dark .feed-bio,
body.theme-mode-dark .discord-stat-lbl,
body.theme-mode-dark .retro-msg-content,
body.theme-mode-dark .retro-msg-time,
body.theme-mode-dark .retro-post-identity-bar,
body.theme-mode-dark .support-operator-bar span {
  color: #cbd5e1 !important;
}

body.theme-mode-dark .retro-msg-row.reply-to-me {
  background: #3b2005 !important;
  border-left: 3px solid #f59e0b !important;
  box-shadow: inset 0 0 10px rgba(245, 158, 11, 0.3) !important;
}
body.theme-mode-dark .retro-reply-context-bar {
  background: #0f172a !important;
  border-color: #0284c7 !important;
  color: #38bdf8 !important;
}
body.theme-mode-dark .retro-msg-reply-bar {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  border-left-color: #38bdf8 !important;
}
body.theme-mode-dark .retro-msg-reply-bar b {
  color: #38bdf8 !important;
}
body.theme-mode-dark .retro-msg-reply-action-btn {
  background: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

body.theme-mode-dark .retro-forum-body-wrap,
body.theme-mode-dark #win-retro-forum .retro-shoutbox-stream {
  background: #0b1120 !important;
}

body.theme-mode-dark .retro-msg-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body.theme-mode-dark .retro-msg-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.03) !important;
}

body.theme-mode-dark .retro-msg-row:hover {
  background: rgba(56, 189, 248, 0.12) !important;
}

body.theme-mode-dark .retro-forum-footer-bar {
  background: #0b1120 !important;
  color: #64748b !important;
  border-top: 1px solid #1e293b !important;
}

body.theme-mode-dark .support-msg-row.staff .support-msg-bubble {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #334155 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body.theme-mode-dark .discord-stat-pill {
  background: #0b1120 !important;
  border-color: #334155 !important;
}

body.theme-mode-dark .feed-avatar {
  border-color: #38bdf8 !important;
  background: #0f172a !important;
}

body.theme-mode-dark input[type="text"],
body.theme-mode-dark input[type="search"],
body.theme-mode-dark textarea,
body.theme-mode-dark select,
body.theme-mode-dark .xp-input,
body.theme-mode-dark .support-chat-input {
  background: #0b1120 !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

body.theme-mode-dark input::placeholder,
body.theme-mode-dark textarea::placeholder {
  color: #64748b !important;
}

body.theme-mode-dark .slug-input-wrapper {
  background: #0b1120 !important;
  border-color: #334155 !important;
}

body.theme-mode-dark .slug-prefix {
  background: #162032 !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

body.theme-mode-dark .slug-input-wrapper input {
  background: transparent !important;
  color: #ffffff !important;
}

body.theme-mode-dark .mypage-panel-card {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .mypage-heading {
  color: #38bdf8 !important;
}

body.theme-mode-dark .mypage-url-badge {
  background: #0b1120 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .mypage-label {
  color: #e2e8f0 !important;
}

body.theme-mode-dark .mypage-muted-text {
  color: #94a3b8 !important;
}

body.theme-mode-dark .mypage-studio-link {
  color: #38bdf8 !important;
}

body.theme-mode-dark .retro-anon-toggle-pill {
  background: #0b1120 !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.theme-mode-dark .retro-anon-circle {
  background: #1e293b !important;
  border-color: #475569 !important;
}

/* Dark Mode Desktop Top-Right Widgets (Borders & Glows) */
.desktop-aero-theme-widget,
body.theme-mode-dark .desktop-aero-theme-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.theme-mode-dark .desktop-aero-sound-widget {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.55) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.theme-mode-dark .aero-sound-toggle-btn {
  background: rgba(30, 41, 59, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  border-radius: 6px !important;
  color: #cbd5e1 !important;
}

body.theme-mode-dark .aero-sound-toggle-btn:hover {
  background: rgba(51, 65, 85, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

body.theme-mode-dark .aero-sound-toggle-btn.active {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.4) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

body.theme-mode-dark .aero-sound-toggle-btn.muted {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.25) !important;
}

/* Dark Mode Theme Button - Crisp Rounded Pill */
body.theme-mode-dark .aero-theme-toggle-btn {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 999px !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

body.theme-mode-dark .aero-theme-toggle-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border: 1px solid #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 18px rgba(56, 189, 248, 0.35) !important;
}

body.theme-mode-dark .aero-theme-toggle-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Dark Mode Theme Dropdown */
body.theme-mode-dark .aero-theme-dropdown {
  background: rgba(15, 23, 42, 0.96) !important;
  border: 1px solid #0284c7 !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.3) !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .theme-dropdown-header {
  border-bottom: 1px solid #334155 !important;
  color: #38bdf8 !important;
}

body.theme-mode-dark .theme-option {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: #cbd5e1 !important;
}

body.theme-mode-dark .theme-option:hover {
  background: rgba(56, 189, 248, 0.18) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #ffffff !important;
}

body.theme-mode-dark .theme-option.active {
  background: rgba(56, 189, 248, 0.25) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.2) !important;
}

/* Dark Mode Support Widget & Visitors Pill */
body.theme-mode-dark .desktop-support-widget {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

body.theme-mode-dark .desktop-support-widget:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35) !important;
}

body.theme-mode-dark .desktop-online-wtfs-pill {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.12) !important;
}

body.theme-mode-dark .desktop-online-wtfs-pill:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35) !important;
}

/* Dark Mode Buttons (XP Primary, Secondary, General) */
body.theme-mode-dark .xp-btn-primary {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border: 1px solid #38bdf8 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body.theme-mode-dark .xp-btn-primary:hover {
  background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
  border-color: #7dd3fc !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}

body.theme-mode-dark .xp-btn-secondary {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
  border-radius: 4px !important;
  color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.theme-mode-dark .xp-btn-secondary:hover {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

body.theme-mode-dark .xp-btn {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid #334155 !important;
  border-radius: 4px !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .xp-btn:hover {
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

/* Dark Mode Taskbar & Start Menu */
body.theme-mode-dark .xp-taskbar {
  background: linear-gradient(180deg, #1e293b 0%, #090d16 100%) !important;
  border-top: 1px solid rgba(56, 189, 248, 0.35) !important;
  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.6) !important;
}

body.theme-mode-dark .xp-start-btn {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.3) !important;
}

body.theme-mode-dark .xp-task-btn {
  background: rgba(30, 41, 59, 0.8) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #cbd5e1 !important;
}

body.theme-mode-dark .xp-task-btn.active {
  background: rgba(2, 132, 199, 0.35) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
  box-shadow: inset 0 0 8px rgba(56, 189, 248, 0.3) !important;
}

body.theme-mode-dark .xp-systray {
  background: rgba(11, 17, 32, 0.85) !important;
  border-left: 1px solid #1e293b !important;
  color: #94a3b8 !important;
}

body.theme-mode-dark .xp-start-menu {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.25) !important;
}

body.theme-mode-dark .start-menu-header {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 100%) !important;
  color: #38bdf8 !important;
}

body.theme-mode-dark .start-menu-left {
  background: #0f172a !important;
}

body.theme-mode-dark .start-menu-right {
  background: #1e293b !important;
  border-left: 1px solid #334155 !important;
}

body.theme-mode-dark .start-menu-footer {
  background: #0b1120 !important;
  border-top: 1px solid #334155 !important;
}

body.theme-mode-dark .start-menu-item:hover {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #ffffff !important;
}

body.theme-mode-dark .start-menu-item b {
  color: #f1f5f9 !important;
}

body.theme-mode-dark .start-subtext {
  color: #94a3b8 !important;
}

/* Dark Mode Tagboard Chat & Flyout Toast */
body.theme-mode-dark .desktop-chat-toast {
  background: rgba(15, 23, 42, 0.96) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.25) !important;
}

body.theme-mode-dark .toast-titlebar {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
  border-bottom: 1px solid #334155 !important;
  color: #38bdf8 !important;
}

body.theme-mode-dark .toast-input {
  background: #0b1120 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .toast-msg-bubble {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .tagboard-shoutbox {
  background: #0b1120 !important;
  border-color: #1e293b !important;
}

body.theme-mode-dark .shoutbox-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Dark Mode Arcade Minigames */
body.theme-mode-dark .arcade-container {
  background: #0b1120 !important;
  border-color: #1e293b !important;
}

body.theme-mode-dark .arcade-active-arena {
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #090d16 100%) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

body.theme-mode-dark .arcade-input {
  background: #060913 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

/* ==========================================================================
   THEME 2: COLORBLIND MODE (High-Contrast Accessibility)
   Aesthetic: High-Contrast Gold (#ffc700), Cyan (#00e5ff),
   Neon Magenta (#ff2a6d), Deep Slate (#091428) & High-Contrast Outlines!
   ========================================================================== */
html.theme-mode-blind,
body.theme-mode-blind {
  --xp-bg-grey: #091428;
  --card-bg: rgba(9, 20, 40, 0.96);
  --win-border: #ffc700;
  --title-bg: linear-gradient(180deg, #091428 0%, #0a323c 15%, #091428 85%, #010a13 100%);
  --title-text: #ffc700;
  --text-color: #f0e6d2;
  --xp-text-main: #f0e6d2;
  --btn-bg: linear-gradient(180deg, #1e282d 0%, #091428 100%);
  --btn-border: #c8aa6e;
  --btn-hover: linear-gradient(180deg, #00e5ff 0%, #00b4d8 100%);
  --accent-color: #ffc700;
  --neon-glow: 0 0 25px rgba(255, 199, 0, 0.45);

  background: #010a13 radial-gradient(circle at 50% 20%, rgba(0, 229, 255, 0.18) 0%, transparent 60%),
              radial-gradient(circle at 80% 80%, rgba(255, 199, 0, 0.15) 0%, transparent 50%),
              radial-gradient(ellipse at center, #091428 0%, #010a13 100%) fixed !important;
  color: #f0e6d2 !important;
}

body.theme-mode-blind .scanlines {
  opacity: 0.15;
}

/* Colorblind Mode Windows (High-Contrast Gold & Cyan Accents) */
body.theme-mode-blind .xp-window.window-instance {
  background: rgba(9, 20, 40, 0.97) !important;
  border: 3px solid #ffc700 !important;
  box-shadow: 0 0 25px rgba(0, 229, 255, 0.4), 0 15px 45px rgba(0, 0, 0, 0.85) !important;
  color: #f0e6d2 !important;
}

body.theme-mode-blind .xp-window.window-instance .xp-titlebar {
  background: linear-gradient(180deg, #091428 0%, #0a323c 18%, #091428 80%, #010a13 100%) !important;
  color: #ffc700 !important;
  text-shadow: 0 0 10px rgba(255, 199, 0, 0.6) !important;
  border-bottom: 2px solid #c8aa6e !important;
  letter-spacing: 0.8px;
}

body.theme-mode-blind .xp-window.window-instance.inactive {
  border-color: #785a28 !important;
  opacity: 0.94;
}

body.theme-mode-blind .xp-window.window-instance.inactive .xp-titlebar {
  background: linear-gradient(180deg, #1e282d 0%, #091428 100%) !important;
  color: #a09b8c !important;
  text-shadow: none !important;
}

body.theme-mode-blind .xp-control-btn {
  border: 2px solid #c8aa6e !important;
  font-weight: 900 !important;
}

body.theme-mode-blind .xp-control-btn.minimize,
body.theme-mode-blind .xp-control-btn.maximize {
  background: linear-gradient(180deg, #00e5ff 0%, #0077b6 100%) !important;
  color: #010a13 !important;
}

body.theme-mode-blind .xp-control-btn.close {
  background: linear-gradient(180deg, #ff2a6d 0%, #c1121f 100%) !important;
  color: #ffffff !important;
}

body.theme-mode-blind .window-scroll-body {
  background: #091428 !important;
  color: #f0e6d2 !important;
  scrollbar-color: #ffc700 #010a13 !important;
}

body.theme-mode-blind .window-scroll-body::-webkit-scrollbar-track {
  background: #010a13 !important;
  border-left: 2px solid #785a28 !important;
}

body.theme-mode-blind .window-scroll-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffc700 0%, #c8aa6e 100%) !important;
  border: 1px solid #785a28 !important;
}

body.theme-mode-blind .xp-toolbar {
  background: linear-gradient(180deg, #1e282d 0%, #091428 100%) !important;
  border-bottom: 2px solid #785a28 !important;
  color: #f0e6d2 !important;
}

body.theme-mode-blind .xp-address-bar {
  background: #010a13 !important;
  border: 2px solid #00e5ff !important;
  color: #ffc700 !important;
  font-weight: bold;
}

body.theme-mode-blind .xp-footer {
  background: #010a13 !important;
  border-top: 2px solid #785a28 !important;
  color: #c8aa6e !important;
}

/* Colorblind Mode Window Cards & Inner Containers (Fix inverted white boxes) */
body.theme-mode-blind .discord-card-widget,
body.theme-mode-blind .feed-card,
body.theme-mode-blind .user-auth-box,
body.theme-mode-blind #mypage-content-area > div,
body.theme-mode-blind .retro-forum-post-area,
body.theme-mode-blind .support-view-pane,
body.theme-mode-blind .support-view-pane#support-view-chat,
body.theme-mode-blind .admin-panel,
body.theme-mode-blind .admin-card {
  background: #0f1e36 !important;
  border: 2px solid #ffc700 !important;
  color: #f0e6d2 !important;
  box-shadow: 0 0 15px rgba(255, 199, 0, 0.2) !important;
}

body.theme-mode-blind .feed-card:hover {
  background: #142848 !important;
  border-color: #00e5ff !important;
  box-shadow: 0 0 20px rgba(0, 229, 255, 0.45) !important;
}

body.theme-mode-blind .feed-name,
body.theme-mode-blind .discord-stat-val,
body.theme-mode-blind .retro-msg-author {
  color: #ffc700 !important;
  font-weight: 800 !important;
}

body.theme-mode-blind .feed-username,
body.theme-mode-blind .feed-bio,
body.theme-mode-blind .discord-stat-lbl,
body.theme-mode-blind .retro-msg-content,
body.theme-mode-blind .retro-msg-time,
body.theme-mode-blind .retro-post-identity-bar,
body.theme-mode-blind .support-operator-bar span {
  color: #f0e6d2 !important;
}

body.theme-mode-blind .discord-stat-pill {
  background: #010a13 !important;
  border: 2px solid #00e5ff !important;
}

body.theme-mode-blind .feed-avatar {
  border: 2px solid #00e5ff !important;
  background: #091428 !important;
}

body.theme-mode-blind input[type="text"],
body.theme-mode-blind input[type="search"],
body.theme-mode-blind textarea,
body.theme-mode-blind select,
body.theme-mode-blind .xp-input,
body.theme-mode-blind .support-chat-input {
  background: #010a13 !important;
  border: 2px solid #ffc700 !important;
  color: #ffffff !important;
}

body.theme-mode-blind input::placeholder,
body.theme-mode-blind textarea::placeholder {
  color: #a09b8c !important;
}

body.theme-mode-blind .slug-prefix {
  background: #010a13 !important;
  color: #ffc700 !important;
  border: 2px solid #c8aa6e !important;
}

body.theme-mode-blind .retro-anon-toggle-pill {
  background: #010a13 !important;
  border: 2px solid #00e5ff !important;
  color: #00e5ff !important;
}

body.theme-mode-blind .retro-anon-circle {
  background: #091428 !important;
  border: 2px solid #ffc700 !important;
}

body.theme-mode-blind .desktop-aero-theme-widget {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.theme-mode-blind .desktop-aero-sound-widget {
  background: #091428 !important;
  border: 2px solid #ffc700 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 15px rgba(255, 199, 0, 0.35) !important;
}

body.theme-mode-blind .aero-sound-toggle-btn {
  background: #010a13 !important;
  border: 2px solid #c8aa6e !important;
  border-radius: 6px !important;
  color: #ffc700 !important;
}

body.theme-mode-blind .aero-sound-toggle-btn:hover {
  background: #0a2030 !important;
  border-color: #00e5ff !important;
  color: #00e5ff !important;
}

body.theme-mode-blind .aero-theme-toggle-btn {
  background: #010a13 !important;
  border: 2px solid #c8aa6e !important;
  border-radius: 999px !important;
  color: #ffc700 !important;
}

body.theme-mode-blind .aero-theme-toggle-btn:hover {
  background: #0a2030 !important;
  border-color: #00e5ff !important;
  color: #00e5ff !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5) !important;
}

body.theme-mode-blind .aero-sound-toggle-btn.muted {
  background: #1a0505 !important;
  border: 2px solid #ff2a6d !important;
  color: #ff2a6d !important;
  box-shadow: 0 0 10px rgba(255, 42, 109, 0.5) !important;
}

body.theme-mode-blind .aero-theme-dropdown {
  background: #091428 !important;
  border: 2px solid #ffc700 !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 199, 0, 0.3) !important;
  color: #f0e6d2 !important;
}

body.theme-mode-blind .theme-dropdown-header {
  border-bottom: 2px solid #c8aa6e !important;
  color: #ffc700 !important;
}

body.theme-mode-blind .theme-option {
  color: #f0e6d2 !important;
}

body.theme-mode-blind .theme-option:hover,
body.theme-mode-blind .theme-option.active {
  background: rgba(0, 229, 255, 0.2) !important;
  color: #ffc700 !important;
}

/* Colorblind Mode Buttons (High-Contrast Gold & Cyan Hover) */
body.theme-mode-blind .xp-btn-primary {
  background: linear-gradient(180deg, #1e282d 0%, #091428 100%) !important;
  border: 2px solid #ffc700 !important;
  color: #ffc700 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 10px rgba(255, 199, 0, 0.3) !important;
}

body.theme-mode-blind .xp-btn-primary:hover {
  background: linear-gradient(180deg, #00e5ff 0%, #0077b6 100%) !important;
  border-color: #00e5ff !important;
  color: #010a13 !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.6) !important;
}

body.theme-mode-blind .xp-btn-secondary {
  background: #091428 !important;
  border: 2px solid #00e5ff !important;
  color: #00e5ff !important;
  font-weight: 700 !important;
}

body.theme-mode-blind .xp-btn-secondary:hover {
  background: rgba(0, 229, 255, 0.2) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.5) !important;
}

/* Colorblind Mode Taskbar & Start Menu */
body.theme-mode-blind .xp-taskbar {
  background: linear-gradient(180deg, #0a1428 0%, #010a13 100%) !important;
  border-top: 2px solid #ffc700 !important;
  box-shadow: 0 -2px 20px rgba(255, 199, 0, 0.3) !important;
}

body.theme-mode-blind .xp-start-btn {
  background: linear-gradient(180deg, #ffc700 0%, #c8aa6e 50%, #785a28 100%) !important;
  border: 2px solid #ffd700 !important;
  color: #010a13 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 15px rgba(255, 199, 0, 0.7) !important;
}

body.theme-mode-blind .xp-task-btn {
  background: rgba(30, 40, 45, 0.85) !important;
  border: 1px solid #785a28 !important;
  color: #f0e6d2 !important;
}

body.theme-mode-blind .xp-task-btn.active {
  background: rgba(0, 229, 255, 0.25) !important;
  border: 2px solid #00e5ff !important;
  color: #00e5ff !important;
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) !important;
}

body.theme-mode-blind .xp-systray {
  background: #010a13 !important;
  border-left: 2px solid #785a28 !important;
  color: #ffc700 !important;
}

body.theme-mode-blind .xp-start-menu {
  background: rgba(9, 20, 40, 0.98) !important;
  border: 3px solid #ffc700 !important;
  box-shadow: 0 0 35px rgba(255, 199, 0, 0.35) !important;
}

body.theme-mode-blind .start-menu-header {
  background: linear-gradient(90deg, #010a13 0%, #0a323c 100%) !important;
  color: #ffc700 !important;
  border-bottom: 2px solid #c8aa6e !important;
}

body.theme-mode-blind .start-menu-left {
  background: #091428 !important;
}

body.theme-mode-blind .start-menu-right {
  background: #0a1824 !important;
  border-left: 2px solid #785a28 !important;
}

body.theme-mode-blind .start-menu-footer {
  background: #010a13 !important;
  border-top: 2px solid #785a28 !important;
}

body.theme-mode-blind .start-menu-item:hover {
  background: rgba(0, 229, 255, 0.18) !important;
  border-left: 3px solid #00e5ff !important;
}

body.theme-mode-blind .start-menu-item b {
  color: #ffc700 !important;
}

body.theme-mode-blind .start-subtext {
  color: #a09b8c !important;
}

/* Colorblind Mode Tagboard & Chat (High-Contrast Badges) */
body.theme-mode-blind .desktop-chat-toast {
  background: rgba(9, 20, 40, 0.98) !important;
  border: 3px solid #ffc700 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 199, 0, 0.35) !important;
}

body.theme-mode-blind .toast-titlebar {
  background: linear-gradient(180deg, #091428 0%, #010a13 100%) !important;
  border-bottom: 2px solid #c8aa6e !important;
  color: #ffc700 !important;
}

body.theme-mode-blind .toast-input {
  background: #010a13 !important;
  border: 2px solid #ffc700 !important;
  color: #f0e6d2 !important;
}

body.theme-mode-blind .toast-msg-bubble {
  background: #0a1824 !important;
  border: 2px solid #00e5ff !important;
  color: #f0e6d2 !important;
}

/* Colorblind Mode Arcade Minigames (Gold/Cyan High-Contrast HUD) */
body.theme-mode-blind .arcade-container {
  background: #010a13 !important;
  border: 2px solid #785a28 !important;
}

body.theme-mode-blind .arcade-active-arena {
  background: radial-gradient(circle at 50% 30%, #0a2030 0%, #010a13 100%) !important;
  border: 2px solid #ffc700 !important;
  box-shadow: inset 0 0 25px rgba(255, 199, 0, 0.15) !important;
}

body.theme-mode-blind .arcade-input {
  background: #010a13 !important;
  border: 3px solid #00e5ff !important;
  color: #ffc700 !important;
  font-weight: 800;
}

body.theme-mode-blind .arcade-score-badge {
  border: 2px solid #ffc700 !important;
  background: #091428 !important;
}

body.theme-mode-blind .arcade-score-num {
  color: #ffc700 !important;
  text-shadow: 0 0 8px rgba(255, 199, 0, 0.6);
}

body.theme-mode-blind .desktop-online-wtfs-pill {
  border: 2px solid #00e5ff !important;
  background: rgba(9, 20, 40, 0.9) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.4) !important;
}

body.theme-mode-blind .wtfs-pulse-dot {
  background: #ffc700 !important;
  box-shadow: 0 0 8px #ffc700 !important;
}

body.theme-mode-blind .wtfs-count-num {
  color: #00e5ff !important;
  font-weight: 900 !important;
}

body.theme-mode-blind .desktop-icon-btn {
  text-shadow: 0 0 6px #000, 0 0 12px #000, 1px 1px 2px #000 !important;
}

body.theme-mode-blind .desktop-icon-btn:hover {
  border: 2px solid #ffc700 !important;
  background: rgba(255, 199, 0, 0.2) !important;
  box-shadow: 0 0 15px rgba(255, 199, 0, 0.4) !important;
}

/* ==========================================================================
   ADMIN CONTROL PANEL: ANNUNCIO & SERATA BUILDER + DISCORD LIVE PREVIEW
   ========================================================================== */
.admin-tab-nav {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid #cbd5e1;
  margin: 12px 0 16px 0;
  padding-bottom: 2px;
  overflow-x: auto;
}

.admin-tab-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 8px 16px;
  font-family: var(--font-system);
  font-size: 0.85rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.admin-tab-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.admin-tab-btn.active {
  background: #ffffff;
  color: #0058ee;
  border-color: #0058ee;
  border-bottom: 2px solid #ffffff;
  margin-bottom: -2px;
  box-shadow: 0 -2px 8px rgba(0, 88, 238, 0.12);
}

.admin-builder-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 860px) {
  .admin-builder-container {
    grid-template-columns: 1fr;
  }
}

.admin-builder-form {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.admin-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  position: relative;
}

.admin-form-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-form-group input[type="text"],
.admin-form-group input[type="time"],
.admin-form-group select {
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-system);
  font-size: 0.85rem;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
}

.admin-form-group textarea {
  border: 1px solid #7f9db9;
  border-radius: 0 0 4px 4px;
  padding: 8px 10px;
  font-family: var(--font-system);
  font-size: 0.85rem;
  outline: none;
  background: #ffffff;
  color: #0f172a;
  box-sizing: border-box;
  resize: vertical;
  min-height: 90px;
}

.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
  border-color: #0055ea;
  box-shadow: 0 0 5px rgba(0, 85, 234, 0.35);
}

/* Channel Combobox */
.channel-combobox-wrap {
  position: relative;
  width: 100%;
}

.channel-combobox-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  font-family: var(--font-system);
  font-size: 0.85rem;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
}

.channel-combobox-input:focus {
  border-color: #0055ea;
  box-shadow: 0 0 6px rgba(0, 85, 234, 0.3);
}

.channel-dropdown-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 1000;
  display: none;
}

.channel-dropdown-list.open {
  display: block;
}

.channel-category-header {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  padding: 6px 10px 2px 10px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.channel-option-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.1s ease;
}

.channel-option-item:hover,
.channel-option-item.highlighted {
  background: #eff6ff;
  color: #0058ee;
  font-weight: 600;
}

.channel-selected-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 5px;
}

.channel-selected-chip .chip-remove {
  cursor: pointer;
  color: #ef4444;
  font-weight: 800;
}

/* Discord Formatting Toolbar */
.discord-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  position: relative;
}

.format-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  padding: 4px 7px;
  font-family: var(--font-system);
  font-size: 0.75rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  line-height: 1;
  transition: all 0.12s ease;
  user-select: none;
}

.format-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #0f172a;
}

.format-btn:active {
  transform: scale(0.95);
}

.emoji-picker-toggle-btn {
  background: linear-gradient(180deg, #fef08a 0%, #fde047 100%);
  border: 1px solid #eab308;
  color: #713f12;
  font-weight: bold;
}

.emoji-picker-toggle-btn:hover {
  background: #fef08a;
  border-color: #ca8a04;
}

/* Bot Emoji Palette */
.bot-emoji-picker {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 320px;
  max-width: 90vw;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  padding: 10px;
  z-index: 10050;
}

.bot-emoji-picker.open {
  display: block;
}

.emoji-search-input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.emoji-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 2px;
}

.emoji-item-btn {
  width: 32px;
  height: 32px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s ease, transform 0.1s ease;
}

.emoji-item-btn:hover {
  background: #e0f2fe;
  border-color: #38bdf8;
  transform: scale(1.15);
}

.emoji-item-btn img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

/* Color Picker Palette */
.color-picker-palette {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.color-choice-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  background: #f8fafc;
  color: #334155;
}

.color-choice-pill .color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.color-choice-pill:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.color-choice-pill.selected {
  border-color: #0058ee;
  background: #eff6ff;
  color: #0058ee;
  box-shadow: 0 0 8px rgba(0, 88, 238, 0.3);
  transform: scale(1.04);
}

/* Discord Live Preview Pane */
.discord-preview-pane {
  background: #313338;
  border-radius: 8px;
  padding: 14px;
  color: #dbdee1;
  font-family: 'gg sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  position: sticky;
  top: 10px;
}

.discord-preview-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #949ba4;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.discord-preview-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.discord-bot-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.discord-bot-name {
  font-weight: 600;
  color: #f2f3f5;
  font-size: 0.95rem;
}

.discord-bot-tag {
  background: #5865f2;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: middle;
}

.discord-preview-timestamp {
  font-size: 0.7rem;
  color: #949ba4;
  margin-left: 6px;
}

.discord-ping-content {
  color: #dbdee1;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 8px;
  white-space: pre-wrap;
}

.discord-mention {
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 500;
}

.discord-embed-card {
  background: #2b2d31;
  border-left: 4px solid #570fff;
  border-radius: 4px;
  padding: 12px 14px;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

.discord-embed-title-text {
  font-size: 1.15rem;
  font-weight: 700;
  color: #f2f3f5;
  margin-bottom: 8px;
  line-height: 1.3;
}

.discord-embed-body-text {
  font-size: 0.88rem;
  color: #dbdee1;
  line-height: 1.45;
  white-space: pre-wrap;
}

.discord-embed-field-item {
  margin-top: 10px;
  font-size: 0.85rem;
  color: #dbdee1;
  line-height: 1.4;
  white-space: pre-wrap;
}

.discord-embed-image-preview {
  margin-top: 10px;
  border-radius: 4px;
  max-width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}

.discord-embed-thumb-preview {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
}

.discord-embed-footer-text {
  margin-top: 10px;
  font-size: 0.72rem;
  color: #949ba4;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 6px;
}

.discord-custom-emoji {
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  display: inline-block;
  object-fit: contain;
}

/* Dark Mode Overrides for Admin Center */
body.theme-mode-dark .admin-tab-btn {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #94a3b8 !important;
}

body.theme-mode-dark .admin-tab-btn:hover {
  background: #334155 !important;
  color: #ffffff !important;
}

body.theme-mode-dark .admin-tab-btn.active {
  background: #0f172a !important;
  border-color: #38bdf8 !important;
  border-bottom-color: #0f172a !important;
  color: #38bdf8 !important;
  box-shadow: 0 -2px 10px rgba(56, 189, 248, 0.2) !important;
}

body.theme-mode-dark .admin-builder-form {
  background: #0b1120 !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .admin-form-group label {
  color: #cbd5e1 !important;
}

body.theme-mode-dark .channel-combobox-input,
body.theme-mode-dark .admin-form-group input[type="text"],
body.theme-mode-dark .admin-form-group input[type="time"],
body.theme-mode-dark .admin-form-group textarea,
body.theme-mode-dark .admin-form-group select {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}

body.theme-mode-dark .channel-dropdown-list {
  background: #0f172a !important;
  border-color: #334155 !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.7) !important;
}

body.theme-mode-dark .channel-category-header {
  background: #1e293b !important;
  color: #94a3b8 !important;
  border-color: #334155 !important;
}

body.theme-mode-dark .channel-option-item {
  color: #e2e8f0 !important;
}

body.theme-mode-dark .channel-option-item:hover,
body.theme-mode-dark .channel-option-item.highlighted {
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
}

body.theme-mode-dark .discord-format-toolbar {
  background: #1e293b !important;
  border-color: #334155 !important;
}

body.theme-mode-dark .format-btn {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.theme-mode-dark .format-btn:hover {
  background: #334155 !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}

body.theme-mode-dark .bot-emoji-picker {
  background: #0b1120 !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
}

body.theme-mode-dark .emoji-search-input {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #ffffff !important;
}

body.theme-mode-dark .color-choice-pill {
  background: #0f172a !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

body.theme-mode-dark .color-choice-pill.selected {
  border-color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  color: #38bdf8 !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.3) !important;
}

/* ==========================================================================
   AUTHENTIC WINDOWS XP & VISTA AERO CONTEXT MENU (TASTO DESTRO FORZATO)
   ========================================================================== */
.xp-context-menu {
  position: fixed;
  z-index: 99999999;
  background: #ffffff;
  border: 1px solid #716f64;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
  font-family: var(--font-system, Tahoma, 'Segoe UI', sans-serif);
  font-size: 11px;
  color: #000000;
  padding: 2px;
  min-width: 195px;
  user-select: none;
  -webkit-user-select: none;
  display: none;
  border-radius: 0;
}

body.theme-mode-dark .xp-context-menu {
  background: rgba(15, 23, 42, 0.97) !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 14px rgba(56, 189, 248, 0.3) !important;
  color: #f1f5f9 !important;
  backdrop-filter: blur(10px);
}

.xp-context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 14px 3px 6px;
  cursor: pointer;
  height: 22px;
  white-space: nowrap;
  position: relative;
  font-size: 11px;
}

.xp-context-item:hover,
.xp-context-item.active {
  background: #316ac5;
  color: #ffffff !important;
}

body.theme-mode-dark .xp-context-item:hover,
body.theme-mode-dark .xp-context-item.active {
  background: linear-gradient(90deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
}

.xp-ctx-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.xp-ctx-label {
  flex: 1;
  font-weight: 500;
}

.xp-ctx-shortcut {
  color: #716f64;
  font-size: 10px;
  margin-left: 12px;
}

.xp-context-item:hover .xp-ctx-shortcut {
  color: rgba(255, 255, 255, 0.85);
}

body.theme-mode-dark .xp-ctx-shortcut {
  color: #94a3b8;
}

.xp-ctx-arrow {
  font-size: 9px;
  color: #555;
  margin-left: 8px;
}

.xp-context-item:hover .xp-ctx-arrow {
  color: #ffffff;
}

body.theme-mode-dark .xp-ctx-arrow {
  color: #94a3b8;
}

.xp-context-separator {
  height: 1px;
  background: #aca899;
  border-bottom: 1px solid #ffffff;
  margin: 3px 1px;
}

body.theme-mode-dark .xp-context-separator {
  background: #334155 !important;
  border-bottom: 1px solid #1e293b !important;
}

/* Submenu */
.xp-ctx-has-submenu:hover > .xp-context-submenu {
  display: block;
}

.xp-context-submenu {
  display: none;
  position: absolute;
  left: 98%;
  top: -3px;
  background: #ffffff;
  border: 1px solid #716f64;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  padding: 2px;
  min-width: 180px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100000000;
}

.xp-context-submenu.submenu-flip-left {
  left: auto;
  right: 98%;
}

body.theme-mode-dark .xp-context-submenu {
  background: rgba(15, 23, 42, 0.97) !important;
  border: 1px solid #0284c7 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
  color: #f1f5f9 !important;
}

/* ==========================================================================
   CLASSIC MYSPACE 2000s & STEAM SOCIAL PROFILE SYSTEM
   ========================================================================== */

/* Profile Type Selector (Dashboard UI) */
.profile-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 640px) {
  .profile-type-cards {
    grid-template-columns: 1fr;
  }
}
.profile-type-card {
  border: 2px solid #cbd5e1;
  background: #ffffff;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  user-select: none;
}
.profile-type-card:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}
.profile-type-card.selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.profile-type-badge-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.profile-type-info h4 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: #1e293b;
  font-weight: 700;
}
.profile-type-info p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.35;
}
.profile-type-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0.75rem;
  font-weight: bold;
}
.profile-type-card.selected .profile-type-check {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* ==============================================
   MYSPACE CLASSIC 2000s PROFILE PAGE WRAPPER
   ============================================== */
.myspace-classic-layout {
  --ms-bg: #e5e5e5;
  --ms-page-bg: #ffffff;
  --ms-header-blue: #003399;
  --ms-subnav-blue: #6699cc;
  --ms-accent-orange: #ff6600;
  --ms-table-head: #b5c7de;
  --ms-table-alt: #f0f4f8;
  --ms-border: #6699cc;
  --ms-text: #000000;
  --ms-link: #003399;
  --ms-font: Verdana, Arial, Helvetica, sans-serif;

  min-height: 100vh;
  background-color: var(--ms-bg);
  font-family: var(--ms-font);
  color: var(--ms-text);
  font-size: 12px;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

/* Classic Themes */
.myspace-classic-layout.myspace-theme-classic_blue {
  --ms-bg: #dbe4ef;
  --ms-page-bg: #ffffff;
  --ms-header-blue: #003399;
  --ms-subnav-blue: #6699cc;
  --ms-accent-orange: #ff7700;
  --ms-table-head: #b5c7de;
  --ms-table-alt: #f1f5fa;
  --ms-border: #759abf;
  --ms-text: #1a1a1a;
  --ms-link: #003399;
}

.myspace-classic-layout.myspace-theme-scene_pink {
  --ms-bg: #0b020a;
  --ms-page-bg: #140816;
  --ms-header-blue: #ff1493;
  --ms-subnav-blue: #9b1368;
  --ms-accent-orange: #00ffff;
  --ms-table-head: #380a31;
  --ms-table-alt: #21081e;
  --ms-border: #ff1493;
  --ms-text: #ffffff;
  --ms-link: #ff69b4;
}

.myspace-classic-layout.myspace-theme-steam_dark {
  --ms-bg: #1b2838;
  --ms-page-bg: #171a21;
  --ms-header-blue: #171a21;
  --ms-subnav-blue: #2a475e;
  --ms-accent-orange: #66c0f4;
  --ms-table-head: #212c3d;
  --ms-table-alt: #1a2330;
  --ms-border: #3b5771;
  --ms-text: #c6d4df;
  --ms-link: #66c0f4;
}

.myspace-classic-layout.myspace-theme-aero_aqua {
  --ms-bg: #cde4ee;
  --ms-page-bg: rgba(255, 255, 255, 0.92);
  --ms-header-blue: #0284c7;
  --ms-subnav-blue: #38bdf8;
  --ms-accent-orange: #0ea5e9;
  --ms-table-head: #bae6fd;
  --ms-table-alt: #f0f9ff;
  --ms-border: #7dd3fc;
  --ms-text: #0f172a;
  --ms-link: #0284c7;
}

.myspace-classic-layout.myspace-theme-gothic_cyber {
  --ms-bg: #000000;
  --ms-page-bg: #0d1117;
  --ms-header-blue: #161b22;
  --ms-subnav-blue: #00ff66;
  --ms-accent-orange: #00ff66;
  --ms-table-head: #003311;
  --ms-table-alt: #051408;
  --ms-border: #00ff66;
  --ms-text: #e6edf3;
  --ms-link: #00ff66;
}

.myspace-classic-layout.myspace-theme-vaporwave_90s {
  --ms-bg: #18002e;
  --ms-page-bg: #24003d;
  --ms-header-blue: #ff71ce;
  --ms-subnav-blue: #01cdfe;
  --ms-accent-orange: #05ffa1;
  --ms-table-head: #4b0082;
  --ms-table-alt: #310052;
  --ms-border: #ff71ce;
  --ms-text: #fffb96;
  --ms-link: #01cdfe;
  --ms-font: 'Trebuchet MS', 'Lucida Sans', Arial, sans-serif;
}

.myspace-classic-layout.myspace-theme-matrix_terminal {
  --ms-bg: #020702;
  --ms-page-bg: #081408;
  --ms-header-blue: #002200;
  --ms-subnav-blue: #005511;
  --ms-accent-orange: #00ff41;
  --ms-table-head: #0d280d;
  --ms-table-alt: #051205;
  --ms-border: #00ff41;
  --ms-text: #00ff66;
  --ms-link: #33ff77;
  --ms-font: 'Courier New', Courier, monospace;
}

.myspace-classic-layout.myspace-theme-vampire_goth {
  --ms-bg: #090003;
  --ms-page-bg: #140308;
  --ms-header-blue: #590211;
  --ms-subnav-blue: #8a031a;
  --ms-accent-orange: #e60026;
  --ms-table-head: #38030b;
  --ms-table-alt: #20040b;
  --ms-border: #a3001e;
  --ms-text: #f5d8de;
  --ms-link: #ff3b5c;
}

.myspace-classic-layout.myspace-theme-y2k_silver {
  --ms-bg: #cbd5e1;
  --ms-page-bg: #f8fafc;
  --ms-header-blue: #334155;
  --ms-subnav-blue: #0284c7;
  --ms-accent-orange: #0284c7;
  --ms-table-head: #cbd5e1;
  --ms-table-alt: #f1f5f9;
  --ms-border: #94a3b8;
  --ms-text: #0f172a;
  --ms-link: #0369a1;
}

/* Page Frame Container */
.myspace-body-container {
  max-width: 980px;
  margin: 0 auto;
  background-color: var(--ms-page-bg);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--ms-border);
  min-height: 100vh;
}

/* Top MySpace Bar */
.myspace-top-bar {
  background-color: var(--ms-header-blue);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #001a4e;
  gap: 12px;
}
.myspace-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #ffffff;
}
.myspace-logo-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.myspace-search-bar {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  padding: 2px 4px;
  gap: 6px;
  max-width: 320px;
  flex: 1;
}
.myspace-search-bar input {
  border: none;
  outline: none;
  font-size: 0.75rem;
  flex: 1;
  background: transparent;
  color: #000000;
}
.myspace-search-bar button {
  background: #003399;
  color: #ffffff;
  border: 1px solid #002266;
  font-size: 0.72rem;
  padding: 2px 6px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 2px;
}
.myspace-top-account {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  color: #ffffff;
}
.myspace-top-account a {
  color: #ffffff;
  text-decoration: underline;
}

/* Subnav Menu Bar */
.myspace-subnav {
  background-color: var(--ms-subnav-blue);
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ffffff;
  overflow-x: auto;
  white-space: nowrap;
}
.myspace-subnav a {
  color: #ffffff;
  text-decoration: none;
}
.myspace-subnav a:hover {
  text-decoration: underline;
}
.myspace-subnav span.sep {
  opacity: 0.6;
}

/* Two-Column Grid */
.myspace-main-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  padding: 16px;
}
@media (max-width: 768px) {
  .myspace-main-grid {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 12px;
  }
}

/* LEFT COLUMN ELEMENTS */
.myspace-col-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.myspace-user-heading {
  border-bottom: 2px solid var(--ms-table-head);
  padding-bottom: 8px;
}
.myspace-user-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ms-text);
  margin: 0 0 2px 0;
  word-break: break-word;
}
.myspace-user-headline {
  font-size: 0.82rem;
  font-weight: bold;
  color: #666;
  margin: 0 0 6px 0;
}
.myspace-theme-scene_pink .myspace-user-headline { color: #ff69b4; }
.myspace-theme-steam_dark .myspace-user-headline { color: #8f98a0; }
.myspace-theme-gothic_cyber .myspace-user-headline { color: #00ff66; }

.myspace-avatar-wrap {
  text-align: center;
  margin: 8px 0;
}
.myspace-avatar-img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border: 2px solid var(--ms-border);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
  background: #ffffff;
}
.myspace-avatar-sublinks {
  font-size: 0.72rem;
  margin-top: 6px;
  color: var(--ms-link);
}
.myspace-avatar-sublinks a {
  color: var(--ms-link);
  text-decoration: underline;
}

.myspace-meta-details {
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 6px;
}
.myspace-online-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #009900;
  font-weight: bold;
  margin-top: 4px;
}
.myspace-views-badge {
  font-weight: bold;
  margin-top: 2px;
}

/* Contacting Box */
.myspace-box {
  border: 1px solid var(--ms-border);
  background: var(--ms-page-bg);
}
.myspace-box-header {
  background-color: var(--ms-table-head);
  color: #000000;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 4px 8px;
  border-bottom: 1px solid var(--ms-border);
}
.myspace-theme-scene_pink .myspace-box-header {
  background-color: var(--ms-table-head);
  color: #ff69b4;
}
.myspace-theme-steam_dark .myspace-box-header {
  background-color: var(--ms-table-head);
  color: #ffffff;
}
.myspace-theme-gothic_cyber .myspace-box-header {
  background-color: var(--ms-table-head);
  color: #00ff66;
}

.myspace-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  padding: 8px;
  background: var(--ms-table-alt);
}
.myspace-contact-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ms-link);
  font-size: 0.73rem;
  font-weight: bold;
  padding: 3px;
  cursor: pointer;
  border-radius: 2px;
}
.myspace-contact-btn:hover {
  background: rgba(0,0,0,0.05);
  text-decoration: underline;
}
.myspace-contact-icon {
  font-size: 0.95rem;
  line-height: 1;
}

/* MySpace URL Box */
.myspace-url-box {
  padding: 6px 8px;
  background: var(--ms-table-alt);
  border: 1px solid var(--ms-border);
  font-size: 0.72rem;
  word-break: break-all;
}
.myspace-url-box strong {
  display: block;
  margin-bottom: 2px;
}

/* General Info Table */
.myspace-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.73rem;
}
.myspace-info-table th {
  background-color: var(--ms-table-head);
  text-align: left;
  padding: 4px 6px;
  width: 38%;
  color: var(--ms-text);
  border: 1px solid var(--ms-border);
  vertical-align: top;
}
.myspace-info-table td {
  padding: 4px 6px;
  background-color: var(--ms-table-alt);
  border: 1px solid var(--ms-border);
  color: var(--ms-text);
  vertical-align: top;
}

/* RIGHT COLUMN ELEMENTS */
.myspace-col-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Authentic MySpace Music Player */
.myspace-music-player {
  border: 1px solid #333333;
  background: #111111;
  color: #ffffff;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
  position: relative;
}
.myspace-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #333333;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.myspace-player-brand {
  font-weight: 900;
  font-size: 1.05rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.myspace-player-popout {
  font-size: 0.7rem;
  color: #aaaaaa;
  cursor: pointer;
}
.myspace-player-main {
  display: flex;
  gap: 12px;
  align-items: center;
}
.myspace-player-disc-art {
  width: 58px;
  height: 58px;
  background: #222222;
  border: 1px solid #444444;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.myspace-player-disc-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.myspace-player-info {
  flex: 1;
  min-width: 0;
}
.myspace-player-now-playing {
  font-size: 0.85rem;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.myspace-player-artist {
  font-size: 0.75rem;
  color: #999999;
}
.myspace-player-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.myspace-player-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(180deg, #6699cc 0%, #003399 100%);
  border: 1px solid #ffffff;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.myspace-player-scrub {
  flex: 1;
  height: 6px;
  background: #333333;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
}
.myspace-player-scrub-fill {
  height: 100%;
  background: #6699cc;
  border-radius: 3px;
  width: 0%;
}
.myspace-player-time {
  font-size: 0.68rem;
  color: #999999;
  font-family: monospace;
}

/* Playlist / Tracklist */
.myspace-tracklist {
  margin-top: 10px;
  background: #1a1a1a;
  border: 1px solid #333333;
}
.myspace-track-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid #282828;
  font-size: 0.74rem;
  color: #cccccc;
  cursor: pointer;
}
.myspace-track-item:last-child {
  border-bottom: none;
}
.myspace-track-item:hover,
.myspace-track-item.is-active {
  background: #2a2a2a;
  color: #ffffff;
}
.myspace-track-name {
  font-weight: bold;
}
.myspace-track-plays {
  font-size: 0.68rem;
  color: #777777;
}

/* Blurbs / About Box */
.myspace-blurb-box {
  border: 1px solid var(--ms-border);
}
.myspace-blurb-section-head {
  background-color: var(--ms-accent-orange);
  color: #ffffff;
  font-weight: bold;
  font-size: 0.8rem;
  padding: 4px 8px;
}
.myspace-blurb-body {
  padding: 10px 12px;
  background: var(--ms-page-bg);
  font-size: 0.8rem;
  line-height: 1.5;
  word-break: break-word;
}
.myspace-blurb-body p {
  margin: 0 0 8px 0;
}
.myspace-blurb-body p:last-child {
  margin-bottom: 0;
}

/* TOP 8 FRIENDS GRID */
.myspace-friends-box {
  border: 1px solid var(--ms-border);
}
.myspace-friends-header-bar {
  background-color: var(--ms-table-head);
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: bold;
}
.myspace-friends-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
  background: var(--ms-table-alt);
}
@media (max-width: 500px) {
  .myspace-friends-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.myspace-friend-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--ms-link);
}
.myspace-friend-name {
  font-size: 0.72rem;
  font-weight: bold;
  margin-bottom: 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.myspace-friend-avatar {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border: 1px solid var(--ms-border);
  background: #ffffff;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* GUESTBOOK / COMMENTS WALL */
.myspace-comments-box {
  border: 1px solid var(--ms-border);
}
.myspace-comments-header {
  background-color: var(--ms-table-head);
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: bold;
}
.myspace-comment-form {
  padding: 10px;
  background: var(--ms-table-alt);
  border-bottom: 1px solid var(--ms-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.myspace-comment-form input,
.myspace-comment-form textarea {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--ms-border);
  font-family: inherit;
  font-size: 0.75rem;
  border-radius: 2px;
  background: var(--ms-page-bg);
  color: var(--ms-text);
  box-sizing: border-box;
}
.myspace-comment-form button {
  align-self: flex-end;
  background: var(--ms-header-blue);
  color: #ffffff;
  border: 1px solid #000000;
  font-weight: bold;
  font-size: 0.72rem;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 2px;
}
.myspace-comment-form button:hover {
  filter: brightness(1.15);
}
.myspace-comment-table {
  width: 100%;
  border-collapse: collapse;
}
.myspace-comment-row {
  border-bottom: 1px solid var(--ms-border);
}
.myspace-comment-author-col {
  width: 90px;
  padding: 8px;
  background: var(--ms-table-head);
  text-align: center;
  vertical-align: top;
  font-size: 0.72rem;
}
.myspace-comment-author-name {
  font-weight: bold;
  margin-bottom: 4px;
  word-break: break-word;
}
.myspace-comment-author-avatar {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border: 1px solid #666;
}
.myspace-comment-text-col {
  padding: 8px 10px;
  background: var(--ms-table-alt);
  vertical-align: top;
  font-size: 0.75rem;
  line-height: 1.4;
}
.myspace-comment-date {
  font-size: 0.68rem;
  color: #666;
  margin-bottom: 4px;
}
.myspace-theme-scene_pink .myspace-comment-date { color: #ff69b4; }
.myspace-theme-steam_dark .myspace-comment-date { color: #8f98a0; }
.myspace-theme-gothic_cyber .myspace-comment-date { color: #00ff66; }

/* Custom Embedded Paragraphs & Widgets in MySpace Mode */
.myspace-custom-sections {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.myspace-embed-container {
  margin-top: 10px;
}

/* ==========================================================================
   MYSPACE 2000s ATMOSPHERE FX, BADGES, MOOD, COUNTER & PLAYER SKINS
   ========================================================================== */

/* Fullscreen Atmosphere Canvas */
#myspace-screen-fx-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99998;
}

/* Retro CRT Monitor Overlay */
.myspace-crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99997;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              radial-gradient(circle at center, transparent 65%, rgba(0, 0, 0, 0.4) 100%);
  background-size: 100% 4px, 100% 100%;
  opacity: 0.85;
}
.myspace-crt-overlay::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(18, 16, 16, 0.05);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: crtFlicker 0.15s infinite;
}
@keyframes crtFlicker {
  0% { opacity: 0.08; }
  50% { opacity: 0; }
  100% { opacity: 0.05; }
}

/* MSN Messenger Mood Widget */
.myspace-msn-mood-box {
  margin-top: 8px;
  padding: 6px 8px;
  background: #f0f7ff;
  border: 1px solid #7ba4cf;
  border-radius: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.myspace-theme-scene_pink .myspace-msn-mood-box {
  background: #250821;
  border-color: #ff1493;
  color: #ffb6c1;
}
.myspace-theme-steam_dark .myspace-msn-mood-box {
  background: #1e2633;
  border-color: #3b5771;
  color: #c6d4df;
}
.myspace-theme-matrix_terminal .myspace-msn-mood-box {
  background: #091709;
  border-color: #00ff41;
  color: #00ff66;
}
.myspace-theme-vampire_goth .myspace-msn-mood-box {
  background: #23060c;
  border-color: #a3001e;
  color: #f5d8de;
}
.myspace-msn-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.myspace-msn-content {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.myspace-msn-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #0044aa;
  letter-spacing: 0.5px;
}
.myspace-theme-scene_pink .myspace-msn-label { color: #ff69b4; }
.myspace-theme-steam_dark .myspace-msn-label { color: #66c0f4; }
.myspace-theme-matrix_terminal .myspace-msn-label { color: #00ff41; }
.myspace-theme-vampire_goth .myspace-msn-label { color: #ff3b5c; }
.myspace-msn-text {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Web 1.0 Retro Hit / Visitor Counter Box */
.myspace-hit-counter-box {
  margin-top: 10px;
  padding: 8px;
  text-align: center;
  border: 1px solid var(--ms-border);
  background: var(--ms-table-alt);
}
.myspace-hit-counter-title {
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ms-text);
  margin-bottom: 5px;
}
/* Odometer Style */
.myspace-odometer-wrap {
  display: inline-flex;
  border: 2px solid #222222;
  background: #111111;
  padding: 2px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.8), 1px 1px 3px rgba(255,255,255,0.4);
  border-radius: 2px;
}
.odometer-digit {
  width: 17px;
  height: 24px;
  background: linear-gradient(180deg, #2b2b2b 0%, #151515 50%, #000000 51%, #222222 100%);
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #333333;
  position: relative;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
}
.odometer-digit:last-child {
  border-right: none;
  background: linear-gradient(180deg, #990000 0%, #660000 50%, #440000 51%, #880000 100%);
}
/* Green LED Style */
.myspace-led-wrap {
  display: inline-flex;
  padding: 3px 8px;
  background: #020e02;
  border: 2px solid #004400;
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,255,65,0.3);
}
.led-digit {
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 1.15rem;
  color: #00ff66;
  text-shadow: 0 0 6px #00ff66, 0 0 12px #00ff41;
  letter-spacing: 2px;
}
/* Retro Gold Plated Style */
.myspace-gold-wrap {
  display: inline-flex;
  padding: 2px;
  background: linear-gradient(135deg, #d4af37, #f7e7a9, #aa8010);
  border: 1px solid #775500;
  border-radius: 2px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
.gold-digit {
  width: 18px;
  height: 24px;
  background: #1a1a1a;
  color: #f7e7a9;
  font-family: 'Courier New', Courier, monospace;
  font-weight: 900;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #333;
}
.gold-digit:last-child { border-right: none; }

/* 88x31 Badges & Blinkies Shelf */
.myspace-badges-shelf {
  border: 1px solid var(--ms-border);
  background: var(--ms-page-bg);
}
.myspace-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  justify-content: center;
  background: var(--ms-table-alt);
}
.myspace-badge-item {
  width: 88px;
  height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
  transition: transform 0.15s ease, filter 0.15s ease;
  border: 1px solid rgba(0,0,0,0.3);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.15);
  cursor: pointer;
  overflow: hidden;
  background: #000000;
}
.myspace-badge-item:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.myspace-badge-item img,
.myspace-badge-item svg {
  width: 88px;
  height: 31px;
  display: block;
}

/* Audio Player Cassette Tape Mode */
.myspace-cassette-wrap {
  width: 100%;
  max-width: 260px;
  height: 70px;
  background: #2a2a2a;
  border-radius: 6px;
  border: 2px solid #111111;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.15), 0 3px 6px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  box-sizing: border-box;
}
.myspace-cassette-label {
  width: 90%;
  height: 32px;
  background: #fffae0;
  border: 1px solid #ccb060;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-sizing: border-box;
}
.myspace-spool {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px dashed #333333;
  box-sizing: border-box;
}
.myspace-spool.spinning {
  animation: spoolSpin 2s linear infinite;
}
@keyframes spoolSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.myspace-cassette-center-text {
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  font-weight: bold;
  color: #990000;
  text-align: center;
}

/* Animated Equalizer Visualizer */
.myspace-eq-wrap {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  padding: 2px 4px;
  background: #000000;
  border: 1px solid #333333;
  border-radius: 2px;
}
.myspace-eq-bar {
  width: 5px;
  height: 4px;
  background: #00ff66;
  border-radius: 1px;
  transition: height 0.1s ease;
}
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(1) { animation: eqJump1 0.4s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(2) { animation: eqJump2 0.6s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(3) { animation: eqJump3 0.35s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(4) { animation: eqJump4 0.5s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(5) { animation: eqJump2 0.45s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(6) { animation: eqJump1 0.7s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(7) { animation: eqJump3 0.55s ease-in-out infinite alternate; }
.myspace-eq-wrap.is-playing .myspace-eq-bar:nth-child(8) { animation: eqJump4 0.4s ease-in-out infinite alternate; }

@keyframes eqJump1 { from { height: 4px; } to { height: 26px; } }
@keyframes eqJump2 { from { height: 10px; } to { height: 32px; } }
@keyframes eqJump3 { from { height: 6px; } to { height: 22px; } }
@keyframes eqJump4 { from { height: 12px; } to { height: 28px; } }

/* ==========================================================================
   MASCOTTE LUNA - ARCADE PIXEL 2000s DIGITAL PET
   ========================================================================== */

.luna-play-stage {
  position: relative;
  width: 100%;
  height: 310px;
  background-color: #fef3c7;
  background-image: url('/mascot/pou_room_kitchen.svg');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  border-bottom: 2px solid #7f9db9;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 24px;
  cursor: default;
  overflow: hidden;
  user-select: none;
  transition: background-image 0.25s ease-in-out;
}

/* Pou Room Variations */
.luna-play-stage.room-kitchen {
  background-color: #fef3c7;
  background-image: url('/mascot/pou_room_kitchen.svg');
}

.luna-play-stage.room-playroom {
  background-color: #e0f2fe;
  background-image: url('/mascot/pou_room_playroom.svg');
}

.luna-play-stage.room-bedroom {
  background-color: #f3e8ff;
  background-image: url('/mascot/pou_room_bedroom.svg');
}

.luna-play-stage.room-garden {
  background-color: #7dd3fc;
  background-image: url('/mascot/pou_room_garden.svg');
}

.luna-play-stage.room-dark {
  filter: brightness(0.45) contrast(1.15);
}

/* Pou Style Room Navigation Bottom Bar (Under Stats) */
.pou-room-bottom-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  border-top: 1px solid #cbd5e1;
  padding: 6px 12px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
  user-select: none;
}

.pou-room-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #94a3b8;
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  color: #334155;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.15s ease;
}

.pou-room-nav-btn:hover {
  background: #e2e8f0;
  transform: scale(1.1);
}

.pou-room-nav-btn:active {
  transform: scale(0.95);
}

.pou-room-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.pou-room-icon {
  font-size: 1.1rem;
}

.pou-room-title {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.6px;
  color: #1e293b;
}

/* Maximized Window Adaptation for Mascot */
#win-luna-mascot.maximized .luna-play-stage {
  flex: 1 1 auto;
  height: auto;
  min-height: 440px;
  background-size: cover;
  background-position: center bottom;
  padding-bottom: 40px;
}

#win-luna-mascot.maximized .luna-pixel-dog {
  max-height: 320px;
  max-width: 420px;
  transform-origin: bottom center;
}

#win-luna-mascot.maximized .stage-bowl {
  bottom: 26px !important;
  transform: scale(1.25);
}

#win-luna-mascot.maximized .stage-bowl.bowl-kibble {
  left: calc(50% - 180px) !important;
}

#win-luna-mascot.maximized .stage-bowl.bowl-water {
  right: calc(50% - 180px) !important;
}

/* Mascot Selection Bar Tabs (Luna / Laika) */
.mascot-select-btn {
  font-size: 0.76rem !important;
  padding: 3px 10px !important;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s ease;
}

.mascot-select-btn.active {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
  border-color: #1e3a8a !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35) !important;
}

/* Carezza / Petting Cursor */
.luna-play-stage.mode-cuddle,
.luna-play-stage.mode-cuddle .luna-sprite-wrapper,
.luna-play-stage.mode-cuddle .luna-pixel-dog,
.luna-sprite-wrapper:hover,
.luna-pixel-dog:hover {
  cursor: url('/mascot/nintendo_hand.svg') 12 12, pointer !important;
}

/* Ball Game Track Mode */
.luna-play-stage.mode-ball {
  cursor: ew-resize !important;
}

.luna-sprite-wrapper {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10;
  transition: transform 0.15s ease, left 0.1s ease-out;
}

.luna-pixel-dog {
  max-height: 190px;
  max-width: 270px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.3));
  animation: lunaBreathe 3s ease-in-out infinite alternate;
  transform-origin: bottom center;
  transition: filter 0.15s ease;
}

.luna-pixel-dog:hover {
  filter: drop-shadow(0 8px 10px rgba(255, 105, 180, 0.5));
}

@keyframes lunaBreathe {
  0% { transform: scale(1, 1); }
  100% { transform: scale(1.02, 0.98) translateY(1px); }
}

.luna-bounce-happy {
  animation: lunaHappyJump 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes lunaHappyJump {
  0% { transform: translateY(0) scale(1, 1); }
  35% { transform: translateY(-26px) scale(0.95, 1.08) rotate(-4deg); }
  65% { transform: translateY(-8px) scale(1.05, 0.95) rotate(4deg); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* Catch Jump Animation for Flying Tennis Ball */
.luna-jump-catch {
  animation: lunaAirCatch 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

@keyframes lunaAirCatch {
  0% { transform: translate(0, 0) scale(1); }
  35% { transform: translate(15px, -45px) scale(1.08) rotate(-8deg); }
  70% { transform: translate(20px, -20px) scale(1.02) rotate(-3deg); }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

/* Walking Patrol Animation Across Meadow */
.luna-walking-patrol {
  animation: lunaWalkAcross 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

@keyframes lunaWalkAcross {
  0% { transform: translateX(-120px); }
  45% { transform: translateX(110px) scaleX(1); }
  50% { transform: translateX(110px) scaleX(-1); }
  95% { transform: translateX(-120px) scaleX(-1); }
  100% { transform: translateX(-120px) scaleX(1); }
}

/* Interactive Stage Bowls in Crisp Pixel Art (Kibble & Fresh Water) */
.luna-stage-item.stage-bowl {
  position: absolute;
  bottom: 24px;
  z-index: 8;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.luna-stage-item.stage-bowl:hover {
  transform: scale(1.12) translateY(-2px);
  filter: drop-shadow(0 6px 12px rgba(59, 130, 246, 0.5));
}

.stage-bowl.bowl-kibble {
  left: 20px;
}

.stage-bowl.bowl-water {
  right: 20px;
}

.stage-bowl .bowl-svg {
  width: 64px;
  height: 40px;
  display: block;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  shape-rendering: crispEdges;
}

.bowl-fill-glow {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #f59e0b 40%, transparent 80%);
  opacity: 0.8;
  pointer-events: none;
}

.bowl-fill-glow.water {
  background: radial-gradient(ellipse at center, #38bdf8 50%, transparent 80%);
}

/* Pouring / Dragging Tool Active State */
.luna-drag-tool {
  position: absolute;
  top: 45px;
  z-index: 35;
  cursor: grab;
  animation: toolFloatPulse 1.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}

.luna-drag-tool img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.luna-drag-tool .drag-tip {
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  margin-top: 3px;
  white-space: nowrap;
}

@keyframes toolFloatPulse {
  0% { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-6px) rotate(4deg); }
}

/* Pour Stream Particles */
.luna-pour-stream {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  animation: streamFall 0.8s linear forwards;
}

@keyframes streamFall {
  0% { opacity: 1; transform: translateY(0) scale(0.8); }
  100% { opacity: 0; transform: translateY(60px) scale(1.2); }
}

/* Poop on Meadow */
.luna-poop-item {
  position: absolute;
  bottom: 18px;
  left: 36%;
  z-index: 7;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 4px 5px rgba(0,0,0,0.3));
}

.luna-poop-item:hover {
  transform: scale(1.15);
}

.luna-poop-item img {
  width: 32px;
  height: 32px;
}

.poop-fly {
  position: absolute;
  top: -10px;
  right: -4px;
  font-size: 0.8rem;
  animation: flyBuzz 0.6s infinite alternate ease-in-out;
}

@keyframes flyBuzz {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-3px, -4px); }
}

/* Mini-game HUD Banner */
.luna-minigame-hud {
  position: absolute;
  top: 10px;
  right: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid #0055ea;
  border-radius: 14px;
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Tahoma, sans-serif;
  font-size: 0.76rem;
  font-weight: bold;
  color: #003c90;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), inset 0 1px 0 #fff;
  z-index: 25;
}

.luna-catch-badge {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

/* Stage Mode Hint */
.luna-stage-hint {
  position: absolute;
  bottom: 4px;
  font-size: 0.68rem;
  color: #1c3d18;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(136, 200, 48, 0.6);
  padding: 2px 10px;
  border-radius: 10px;
  pointer-events: none;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 15;
}

/* Speech Balloon */
.luna-speech-bubble {
  position: absolute;
  top: 16px;
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 8px;
  padding: 6px 14px;
  font-family: Tahoma, 'MS Sans Serif', sans-serif;
  font-size: 0.78rem;
  font-weight: bold;
  color: #111111;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
  max-width: 82%;
  text-align: center;
  opacity: 0;
  transform: translateY(-8px) scale(0.9);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 22;
}

.luna-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px 6px 0;
  border-style: solid;
  border-color: #ffffff transparent transparent;
  display: block;
  width: 0;
}

.luna-speech-bubble::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 9px 8px 0;
  border-style: solid;
  border-color: #000000 transparent transparent;
  display: block;
  width: 0;
}

.luna-speech-bubble.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Floating Hearts from simultaneous petting */
.luna-floating-heart {
  position: absolute;
  font-size: 1.5rem;
  z-index: 28;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  animation: lunaFloatHeart 1.2s ease-out forwards;
}

@keyframes lunaFloatHeart {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1.25) translateY(-12px) rotate(-8deg);
  }
  100% {
    opacity: 0;
    transform: scale(0.95) translateY(-75px) rotate(15deg);
  }
}

/* Tennis Ball Arc Physics */
.luna-flight-ball {
  position: absolute;
  z-index: 25;
  pointer-events: none;
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.35));
}

/* Zzz Nap Animation */
.luna-zzz-letter {
  position: absolute;
  font-family: 'Courier New', monospace;
  font-weight: 900;
  color: #2563eb;
  text-shadow: 1px 1px 0 #fff;
  z-index: 25;
  pointer-events: none;
  font-size: 1.2rem;
  animation: lunaZzzRise 2.2s ease-out forwards;
}

@keyframes lunaZzzRise {
  0% { opacity: 0; transform: scale(0.6) translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) translateY(-50px) translateX(25px); }
}

/* ==========================================================================
   LUNA STATS & AFFINITY BARS (TAMAGOTCHI RETRO STYLE)
   ========================================================================== */
.luna-stats-container {
  padding: 12px 14px;
  background: #ece9d8;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.luna-affinity-card {
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}

.luna-affinity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.78rem;
}

.luna-affinity-title {
  font-weight: 700;
  color: #db2777;
}

.luna-affinity-level {
  font-weight: 800;
  color: #1e293b;
}

.luna-affinity-pct {
  font-family: monospace;
  font-weight: 700;
  color: #db2777;
}

.luna-progress-track {
  width: 100%;
  height: 12px;
  background: #e2e8f0;
  border: 1px solid #94a3b8;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.luna-progress-track.small {
  height: 9px;
  border-radius: 4px;
}

.luna-progress-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fill-affinity {
  background: linear-gradient(90deg, #f472b6 0%, #ec4899 50%, #db2777 100%);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}

.fill-hunger {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}

.fill-thirst {
  background: linear-gradient(90deg, #38bdf8 0%, #0284c7 100%);
}

.fill-energy {
  background: linear-gradient(90deg, #fde047 0%, #eab308 100%);
}

.fill-happiness {
  background: linear-gradient(90deg, #4ade80 0%, #16a34a 100%);
}

/* 4 Vitals Grid */
.luna-vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  background: #ffffff;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  padding: 8px 12px;
}

.luna-vital-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.luna-vital-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
}

/* Action Buttons in Toolbar */
.luna-action-btn {
  transition: all 0.15s ease;
}

.luna-action-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.luna-action-btn.active {
  background: #d4d0c8 !important;
  border-color: #808080 #ffffff #ffffff #808080 !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3) !important;
  color: #000080 !important;
  font-weight: bold;
}

/* ==========================================================================
   LUNA DESKTOP BUDDY (FLOATING ABOVE TAGBOARD ON BOTTOM RIGHT)
   ========================================================================== */
.luna-desktop-buddy {
  position: fixed;
  bottom: 175px;
  right: 22px;
  z-index: 99998;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  animation: lunaBuddyFloat 4s ease-in-out infinite alternate;
}

.luna-desktop-buddy img {
  width: 84px;
  height: 84px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.luna-desktop-buddy:hover img {
  transform: scale(1.15) rotate(-6deg);
}

.luna-buddy-balloon {
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: bold;
  color: #000;
  margin-bottom: 5px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  pointer-events: none;
}

@keyframes lunaBuddyFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

/* ==========================================================================
   REAL LUNA PHOTOS POLAROID GALLERY
   ========================================================================== */
.luna-gallery-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.luna-polaroid-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

@media (max-width: 540px) {
  .luna-polaroid-grid {
    grid-template-columns: 1fr;
  }
}

.luna-polaroid-card {
  background: #ffffff;
  padding: 10px 10px 14px 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.2s ease;
}

.luna-polaroid-card:hover {
  transform: rotate(1deg) scale(1.02);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.polaroid-photo-frame {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  margin-bottom: 8px;
}

.polaroid-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.polaroid-photo-frame:hover img {
  transform: scale(1.05);
}

.polaroid-caption {
  font-family: 'Comic Sans MS', Tahoma, cursive, sans-serif;
  font-size: 0.76rem;
  color: #334155;
  font-weight: 600;
}