/* ==========================================================================
   Yer6Chat - Ultra Modern Professional Login & Portal Stylesheet
   Supports Dynamic Admin Theme Color System & Theme Transformations
   ========================================================================== */

/* Modern Font Imports & Standard Reset */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  
  /* Dark Glassmorphism Theme Base */
  --bg-dark: #0b0f19;
  --bg-card: rgba(18, 24, 38, 0.75);
  --bg-card-hover: rgba(26, 35, 54, 0.85);
  --bg-input: rgba(15, 23, 42, 0.6);
  --bg-input-focus: rgba(15, 23, 42, 0.9);
  
  /* Text Colors */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  /* Dynamic Accent Color Fallbacks (Default Gold) */
  --theme-primary: #6ca9c7;
  --theme-primary-rgb: 212, 175, 55;
  --theme-hover: #a1d1e9;
  --theme-glow: rgba(108, 169, 199, 0.35);
  --theme-dark: #36718e;
  --theme-gradient: linear-gradient(135deg, #a1d1e9 0%, #6ca9c7 50%, #2e80a9 100%);
  --theme-border: rgba(108, 169, 199, 0.3);
  --theme-badge-bg: rgba(108, 169, 199, 0.12);
  
  /* Universal Shadows & Borders */
  --card-border: 1px solid rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 25px -5px var(--theme-glow);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base resets for modern login portal */
.y6-login-portal {
  font-family: var(--font-family);
  background-color: var(--bg-dark);
  color: var(--text-main);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
}

.y6-login-portal * {
  box-sizing: border-box;
}

/* Background Animated Gradient Mesh & Ambient Glows */
.y6-portal-bg,
.y6-bg-decorations {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.y6-bg-glow-1 {
  position: absolute;
  top: -15%;
  left: 20%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--theme-glow) 0%, rgba(0,0,0,0) 70%);
  filter: blur(80px);
  opacity: 0.6;
  animation: y6GlowPulse 8s ease-in-out infinite alternate;
}

.y6-bg-glow-2 {
  position: absolute;
  bottom: -10%;
  right: 15%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--theme-primary-rgb), 0.25) 0%, rgba(0,0,0,0) 70%);
  filter: blur(90px);
  opacity: 0.4;
  animation: y6GlowPulse 12s ease-in-out infinite alternate-reverse;
}

@keyframes y6GlowPulse {
  0% { transform: scale(1) translate(0, 0); opacity: 0.4; }
  100% { transform: scale(1.15) translate(30px, -20px); opacity: 0.7; }
}

.y6-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);
}

/* ==========================================================================
   Header Navigation Bar
   ========================================================================== */
.y6-header {
  position: relative;
  z-index: 10;
  background: rgba(11, 15, 25, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 0;
}

.y6-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.y6-nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ==========================================================================
   Custom Scrollbar with Dynamic Theme Color
   ========================================================================== */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: #0a0d16;
}

::-webkit-scrollbar-thumb {
  background: var(--theme-primary, #6ca9c7) !important;
  border-radius: 6px;
  border: 2px solid #0a0d16;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--theme-hover, #a1d1e9) !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--theme-primary, #6ca9c7) #0a0d16;
}

.y6-brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.y6-brand-logo img {
  height: 85px !important;
  max-height: 95px !important;
  width: auto !important;
  max-width: 480px !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 16px var(--theme-glow));
  transition: transform var(--transition-fast);
  display: block;
}

.y6-brand-logo:hover img {
  transform: scale(1.04);
}

.y6-nav-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.y6-nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.y6-nav-link:hover, .y6-nav-link.active {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.y6-nav-link i {
  color: var(--theme-primary);
}

.y6-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   Live Radio Bar Ribbon
   ========================================================================== */
.y6-radio-ribbon {
  position: relative;
  z-index: 9;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
  border-bottom: 1px solid var(--theme-border);
  padding: 10px 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.y6-radio-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.y6-radio-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Animated Sound Wave Equalizer */
.y6-equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  padding: 0 4px;
}

.y6-eq-bar {
  width: 3px;
  background: var(--theme-gradient);
  border-radius: 3px;
  animation: y6Equalize 1.2s ease-in-out infinite alternate;
}

.y6-eq-bar:nth-child(1) { height: 40%; animation-delay: 0.1s; }
.y6-eq-bar:nth-child(2) { height: 80%; animation-delay: 0.3s; }
.y6-eq-bar:nth-child(3) { height: 100%; animation-delay: 0.2s; }
.y6-eq-bar:nth-child(4) { height: 50%; animation-delay: 0.4s; }
.y6-eq-bar:nth-child(5) { height: 70%; animation-delay: 0.15s; }

@keyframes y6Equalize {
  0% { height: 20%; }
  100% { height: 100%; }
}

.y6-radio-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.5px;
}

.y6-radio-text span {
  color: var(--theme-primary);
  font-weight: 700;
}

.y6-onair-dj-highlight {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: var(--theme-primary, #a1d1e9) !important;
  text-shadow: 0 0 12px var(--theme-glow, rgba(108, 169, 199, 0.6)), 0 2px 4px rgba(0,0,0,0.9) !important;
  padding: 2px 8px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.35)) !important;
  border-radius: 6px !important;
  display: inline-block !important;
}

.y6-play-btn {
  background: var(--theme-gradient);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px var(--theme-glow);
  transition: all var(--transition-fast);
}

.y6-play-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 18px var(--theme-glow);
}

.y6-istek-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast);
}

.y6-istek-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--theme-primary);
  color: var(--theme-primary);
}

/* ==========================================================================
   Söz Paneli Ticker (Quotes Ticker Bar)
   ========================================================================== */
.y6-ticker-bar {
  position: relative;
  z-index: 8;
  background: rgba(15, 23, 42, 0.85);
  border-bottom: 1px solid var(--theme-border, rgba(108, 169, 199, 0.2));
  padding: 8px 0;
  width: 100%;
}

.y6-ticker-flex {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.y6-ticker-badge {
  background: var(--theme-badge-bg, rgba(108, 169, 199, 0.15));
  color: var(--theme-primary, #6ca9c7);
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.4));
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.y6-ticker-wrap {
  flex: 1;
  min-width: 0 !important;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.y6-ticker-marquee {
  width: 100%;
  display: block;
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 500;
  color: #f1f5f9;
  line-height: 1.6;
}

.y6-ticker-item {
  display: inline-block;
  white-space: nowrap;
  margin-right: 35px;
  color: #f1f5f9;
}

/* ==========================================================================
   Hero & Main Login Section
   ========================================================================== */
.y6-hero-section {
  position: relative;
  z-index: 5;
  padding: 50px 0 80px;
}

.y6-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.y6-hero-intro {
  padding-right: 20px;
}

.y6-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--theme-badge-bg);
  border: 1px solid var(--theme-border);
  color: var(--theme-primary);
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.y6-hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 20px;
  color: var(--text-main);
  letter-spacing: -0.03em;
}

.y6-hero-title .y6-gradient-text {
  background: var(--theme-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.y6-hero-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 35px;
  max-width: 540px;
}

.y6-feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.y6-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.y6-feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--theme-badge-bg);
  color: var(--theme-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.y6-feature-text h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.y6-feature-text p {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* App Download Badges */
.y6-app-download {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.y6-app-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 24, 38, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-main);
  transition: all var(--transition-fast);
}

.y6-app-badge:hover {
  border-color: var(--theme-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

.y6-app-badge i {
  font-size: 1.8rem;
  color: var(--theme-primary);
}

.y6-app-badge-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.y6-app-badge-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Right Side: Glassmorphism Login Card */
.y6-card-wrapper {
  position: relative;
}

.y6-login-card {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: var(--card-border);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.y6-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--theme-gradient);
}

.y6-card-header {
  text-align: center;
  margin-bottom: 28px;
}

.y6-card-header h3 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--text-main);
}

.y6-card-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

/* Tab Switcher */
.y6-auth-tabs {
  display: flex;
  background: rgba(15, 23, 42, 0.8);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.y6-tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.y6-tab-btn.active {
  background: var(--theme-gradient);
  color: #ffffff;
  box-shadow: 0 4px 12px var(--theme-glow);
}

/* Form Controls */
.y6-form-group {
  margin-bottom: 20px;
  position: relative;
}

.y6-form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.y6-input-wrapper {
  position: relative;
}

.y6-input-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 1rem;
  transition: color var(--transition-fast);
  pointer-events: none;
}

.y6-form-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 14px 16px 14px 46px;
  font-size: 0.95rem;
  color: var(--text-main);
  font-family: var(--font-family);
  transition: all var(--transition-fast);
}

.y6-form-input:focus {
  outline: none;
  background: var(--bg-input-focus);
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px var(--theme-glow);
}

.y6-form-input:focus + .y6-input-icon {
  color: var(--theme-primary);
}

/* Password eye toggle */
.y6-pass-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1rem;
  transition: color var(--transition-fast);
  background: none;
  border: none;
  padding: 0;
}

.y6-pass-toggle:hover {
  color: var(--text-main);
}

/* Options row: remember & forgot password */
.y6-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 0.85rem;
}

.y6-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  cursor: pointer;
}

.y6-checkbox-label input {
  accent-color: var(--theme-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.y6-forgot-link {
  color: var(--theme-primary);
  text-decoration: none;
  font-weight: 600;
  transition: opacity var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.y6-forgot-link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Action Buttons */
.y6-btn-primary {
  width: 100%;
  background: var(--theme-gradient);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 15px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 8px 20px var(--theme-glow);
  transition: all var(--transition-fast);
}

.y6-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px var(--theme-glow);
  filter: brightness(1.08);
}

.y6-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.y6-btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-main);
  padding: 11px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition-fast);
}

.y6-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--theme-border);
  color: var(--theme-primary);
}

/* Social Logins Container */
.y6-social-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 24px 0 18px;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.y6-social-divider::before, .y6-social-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.y6-social-divider span {
  padding: 0 12px;
}

.y6-social-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.y6-social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.y6-social-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-2px);
}

.y6-social-btn img, .y6-social-btn i {
  width: 20px;
  height: 20px;
}

.y6-social-btn.fb i { color: #1877f2; }
.y6-social-btn.gg i { color: #ea4335; }
.y6-social-btn.tw i { color: #1da1f2; }

/* ==========================================================================
   Son Giriş Yapanlar (Last Active 30 Users Slider)
   ========================================================================== */
.y6-recent-users-section {
  position: relative;
  z-index: 5;
  padding: 40px 0;
  background: rgba(15, 23, 42, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.y6-slider-container {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 8px 4px 16px !important;
  width: 100% !important;
  position: relative !important;
}

.y6-slider-container::-webkit-scrollbar {
  display: none !important;
}

.y6-user-slide-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 24, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50px;
  padding: 6px 16px 6px 6px;
  min-width: 170px;
  transition: all var(--transition-fast);
}

.y6-user-slide-card:hover {
  border-color: var(--theme-border);
  background: rgba(30, 41, 59, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.y6-user-slide-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--theme-primary);
}

.y6-user-slide-info {
  display: flex;
  flex-direction: column;
}

.y6-user-slide-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
}

.y6-user-slide-status {
  font-size: 0.75rem;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Management Team & DJ Showcase Section
   ========================================================================== */
.y6-section {
  position: relative;
  z-index: 5;
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.y6-section-title {
  text-align: center;
  margin-bottom: 40px;
}

.y6-section-title h3 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 10px;
  color: var(--text-main);
}

.y6-section-title p {
  color: var(--text-muted);
  font-size: 0.98rem;
  margin: 0;
}

.y6-grid-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.y6-team-card {
  background: rgba(18, 24, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  transition: all var(--transition-fast);
}

.y6-team-card:hover {
  transform: translateY(-5px);
  border-color: var(--theme-border);
  box-shadow: 0 10px 25px -5px var(--theme-glow);
  background: rgba(26, 35, 54, 0.8);
}

.y6-team-avatar-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 14px;
}

.y6-team-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--theme-primary);
  box-shadow: 0 0 15px var(--theme-glow);
}

.y6-online-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid var(--bg-dark);
}

.y6-team-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.y6-team-rank {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--theme-primary);
  background: var(--theme-badge-bg);
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
}

/* Blog & Categories Highlight */
.y6-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.y6-blog-card {
  background: rgba(18, 24, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.y6-blog-card:hover {
  transform: translateY(-5px);
  border-color: var(--theme-border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

.y6-blog-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.y6-blog-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.y6-blog-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
  text-decoration: none;
}

.y6-blog-title:hover {
  color: var(--theme-primary);
}

.y6-blog-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  flex: 1;
}

.y6-blog-link {
  color: var(--theme-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Footer */
.y6-footer {
  position: relative;
  z-index: 5;
  background: rgba(11, 15, 25, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 50px 0 30px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.y6-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

.y6-footer-brand h4 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 14px;
}

.y6-footer-brand p {
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
}

.y6-footer-social {
  display: flex;
  gap: 10px;
}

.y6-social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.y6-social-icon:hover {
  background: var(--theme-primary);
  color: #fff;
  transform: translateY(-3px);
}

.y6-footer-col h5 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 16px;
}

.y6-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.y6-footer-links li {
  margin-bottom: 10px;
}

.y6-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

.y6-footer-links a:hover {
  color: var(--theme-primary);
}

.y6-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.85rem;
}

/* Responsive Media Queries */
@media (max-width: 992px) {
  .y6-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
  
  .y6-card-wrapper {
    order: 1 !important;
  }
  
  .y6-hero-intro {
    order: 2 !important;
    text-align: center;
    padding-right: 0;
  }
  
  .y6-hero-desc {
    margin-left: auto;
    margin-right: auto;
  }
  
  .y6-feature-list {
    text-align: left;
  }
  
  .y6-app-download {
    justify-content: center;
  }
  
  .y6-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .y6-nav-menu {
    display: none;
  }
  
  .y6-hero-title {
    font-size: 2.1rem;
  }
  
  .y6-feature-list {
    grid-template-columns: 1fr;
  }
  
  .y6-login-card {
    padding: 24px;
  }
  
  .y6-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MODAL & POPUP HIGH CONTRAST & LEGIBILITY OVERRIDES
   ========================================================================== */
.modal_back, #global_modal, .small_modal_out, .large_modal_out, .over_modal_out {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal_in, .small_modal_in, .large_modal_in, #modal_content, #small_modal_in {
  background: #181c24 !important;
  background: linear-gradient(145deg, #1e293b, #0f172a) !important;
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.4)) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 25px var(--theme-glow, rgba(108, 169, 199, 0.2)) !important;
  color: #ffffff !important;
  padding: 20px !important;
}

.modal_content, .small_modal_content, .pad_box, #registration_form_box, #guest_form_box {
  color: #ffffff !important;
}

.modal_in .label,
.modal_content .label,
.pad_box .label,
#registration_form_box .label,
#guest_form_box .label,
.boom_form .label,
p.label,
label {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  margin-bottom: 6px !important;
  display: block !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  opacity: 1 !important;
}

.modal_in input.full_input,
.modal_content input.full_input,
.pad_box input.full_input,
#registration_form_box input.full_input,
#guest_form_box input.full_input,
.boom_form input[type="text"],
.boom_form input[type="password"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid var(--theme-primary, #6ca9c7) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

.modal_in input.full_input:focus,
.modal_content input.full_input:focus,
.pad_box input.full_input:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 12px var(--theme-glow, rgba(108, 169, 199, 0.6)) !important;
}

.modal_in select,
.modal_content select,
.pad_box select,
#registration_form_box select,
#guest_form_box select,
#login_select_gender,
#login_select_age,
#guest_gender,
#guest_age {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid var(--theme-primary, #6ca9c7) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  cursor: pointer !important;
  width: 100% !important;
}

.modal_in select option,
.modal_content select option,
.pad_box select option {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600 !important;
  padding: 6px !important;
}

.modal_in .theme_btn,
.modal_content .theme_btn,
.pad_box .theme_btn,
#register_button,
.full_button.large_button {
  background: var(--theme-gradient, linear-gradient(135deg, #6ca9c7, #2e80a9)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  width: 100% !important;
  margin-top: 15px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px var(--theme-glow, rgba(108, 169, 199, 0.4)) !important;
  transition: all 0.25s ease !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.rules_text_elem,
.rules_text,
.sub_text,
.modal_in .sub_text,
.modal_content .sub_text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 12px !important;
  text-align: center !important;
}

.rules_click,
.modal_in a,
.modal_content a {
  color: var(--theme-primary, #54acd8) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.close_modal,
.close_over,
.modal_top_element {
  color: #ffffff !important;
  font-size: 22px !important;
  opacity: 0.95 !important;
  cursor: pointer !important;
}

/* ==========================================================================
   DJ CAROUSEL & RICH MUSIC/RADIO BACKGROUND STYLES
   ========================================================================== */
.y6-dj-section {
  position: relative;
  padding: 60px 0;
  background: radial-gradient(circle at 50% 30%, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 1) 100%);
  border-top: 1px solid var(--theme-border, rgba(108, 169, 199, 0.2));
  border-bottom: 1px solid var(--theme-border, rgba(108, 169, 199, 0.2));
  overflow: hidden;
}

/* Background Decorative Elements */
.y6-dj-bg-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Ambient Glow Spotlights */
.y6-spotlight {
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--theme-glow, rgba(108, 169, 199, 0.25)) 0%, rgba(0,0,0,0) 70%);
  filter: blur(50px);
}

.y6-spot-1 {
  top: -120px;
  left: 8%;
  animation: y6GlowPulse 6s ease-in-out infinite alternate;
}

.y6-spot-2 {
  bottom: -120px;
  right: 8%;
  animation: y6GlowPulse 8s ease-in-out infinite alternate-reverse;
}

@keyframes y6GlowPulse {
  0% { transform: scale(0.8); opacity: 0.35; }
  100% { transform: scale(1.25); opacity: 0.75; }
}

/* Vinyl Disc Background Watermark */
.y6-vinyl-disc {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 2px, transparent 4px, transparent 10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  opacity: 0.35;
  animation: y6RotateDisc 30s linear infinite;
}

@keyframes y6RotateDisc {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

/* Floating Music Icons */
.y6-music-floating-icon {
  position: absolute;
  color: var(--theme-primary, #6ca9c7);
  opacity: 0.14;
  font-size: 2.2rem;
  animation: y6FloatIcon 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px var(--theme-glow));
}

.y6-floating-1 { top: 15%; left: 5%; animation-delay: 0s; font-size: 2.5rem; }
.y6-floating-2 { bottom: 18%; left: 14%; animation-delay: 1.5s; font-size: 2rem; }
.y6-floating-3 { top: 18%; right: 10%; animation-delay: 1s; font-size: 2.8rem; }
.y6-floating-4 { bottom: 15%; right: 4%; animation-delay: 2.5s; font-size: 2.2rem; }
.y6-floating-5 { top: 45%; left: 48%; animation-delay: 0.8s; font-size: 3rem; opacity: 0.06; }

@keyframes y6FloatIcon {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-18px) rotate(12deg); }
}

/* Header Row with Arrows */
.y6-dj-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  flex-wrap: wrap;
  gap: 15px;
}

/* Navigation Arrow Buttons */
.y6-dj-nav-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

.y6-dj-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.4));
  color: #ffffff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

.y6-dj-nav-btn:hover {
  background: var(--theme-gradient, linear-gradient(135deg, #6ca9c7, #2e80a9));
  color: #ffffff;
  border-color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 6px 20px var(--theme-glow, rgba(108, 169, 199, 0.55));
}

.y6-dj-nav-btn:active {
  transform: scale(0.95);
}

/* DJ Slider Wrapper & Track */
.y6-dj-slider-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0 20px;
}

.y6-dj-slider {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  overflow-x: auto !important;
  scroll-behavior: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 10px 5px !important;
  justify-content: flex-start !important;
}

.y6-dj-slider::-webkit-scrollbar {
  display: none;
}

/* DJ Team Card - Full Size (Unshrunk) */
.y6-dj-slider .y6-team-card {
  min-width: 230px;
  width: 230px;
  flex-shrink: 0;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.35));
  border-radius: 20px;
  padding: 24px 16px;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  position: relative;
}

.y6-dj-slider .y6-team-card:hover {
  transform: translateY(-8px);
  border-color: var(--theme-primary, #6ca9c7);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.65), 0 0 25px var(--theme-glow, rgba(108, 169, 199, 0.4));
}

.y6-dj-slider .y6-team-avatar-wrap {
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
  position: relative;
}

.y6-dj-slider .y6-team-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--theme-primary, #6ca9c7);
  box-shadow: 0 0 20px var(--theme-glow, rgba(108, 169, 199, 0.45));
  transition: transform 0.3s ease;
}

.y6-dj-slider .y6-team-card:hover .y6-team-avatar {
  transform: scale(1.06);
}

.y6-dj-slider .y6-online-dot {
  width: 16px;
  height: 16px;
  background: #10b981;
  border: 3px solid #0f172a;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  right: 6px;
  box-shadow: 0 0 8px #10b981;
}
.y6-dj-slider .y6-online-dot.is-offline {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, .72);
}

.y6-dj-slider .y6-team-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.y6-dj-slider .y6-team-rank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--theme-badge-bg, rgba(108, 169, 199, 0.15));
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.4));
  border-radius: 20px;
  color: var(--theme-primary, #54acd8);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Dynamic Colorized Background & Floating Radio/Music/Chat Icons */
.y6-login-portal {
  background: radial-gradient(ellipse at 50% 10%, var(--theme-glow, rgba(108, 169, 199, 0.25)) 0%, rgba(15, 23, 42, 0.98) 45%, #070a12 100%) !important;
}

.y6-bg-floating-icon {
  position: absolute;
  color: var(--theme-primary, #6ca9c7);
  opacity: 0.16;
  font-size: 2.4rem;
  animation: y6FloatBgIcon 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 12px var(--theme-glow));
  pointer-events: none;
}

.y6-f-1 { top: 8%; left: 4%; font-size: 3rem; animation-delay: 0s; }
.y6-f-2 { top: 22%; right: 6%; font-size: 2.8rem; animation-delay: 1.2s; }
.y6-f-3 { top: 38%; left: 8%; font-size: 3.2rem; animation-delay: 2.4s; }
.y6-f-4 { top: 55%; right: 7%; font-size: 2.5rem; animation-delay: 0.8s; }
.y6-f-5 { top: 72%; left: 5%; font-size: 3rem; animation-delay: 3s; }
.y6-f-6 { top: 85%; right: 12%; font-size: 2.6rem; animation-delay: 1.8s; }
.y6-f-7 { top: 15%; left: 45%; font-size: 2.2rem; opacity: 0.08; animation-delay: 2s; }
.y6-f-8 { top: 65%; left: 48%; font-size: 2.7rem; opacity: 0.08; animation-delay: 3.5s; }

@keyframes y6FloatBgIcon {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  100% { transform: translateY(-22px) rotate(15deg) scale(1.08); }
}

/* ==========================================================================
   FULL WIDTH HORIZONTAL RADIO PLAYER (POST-LOGIN / HERO BAR)
   ========================================================================== */
.y6-radio-player-bar {
  width: 100%;
  position: relative;
  z-index: 10;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
  border-top: 1px solid var(--theme-border, rgba(108, 169, 199, 0.3));
  border-bottom: 1px solid var(--theme-border, rgba(108, 169, 199, 0.3));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--theme-glow, rgba(108, 169, 199, 0.2));
  padding: 14px 0;
  margin: 15px 0 35px;
}

.y6-player-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.y6-player-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.y6-player-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--theme-gradient, linear-gradient(135deg, #6ca9c7, #2e80a9));
  color: #ffffff;
  border: none;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 15px var(--theme-glow, rgba(108, 169, 199, 0.4));
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.y6-player-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px var(--theme-glow, rgba(108, 169, 199, 0.6));
  filter: brightness(1.1);
}

.y6-player-toggle:active {
  transform: scale(0.95);
}

.y6-player-eq-wide {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 48px;
  min-width: 80px;
  overflow: hidden;
}

.y6-player-wave-bars {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 650px !important;
  height: 38px !important;
  gap: 3px !important;
}

/* Authentic LED Segment Bar (Green bottom, Yellow mid, Red top) */
.y6-wave-bar {
  flex: 1 1 0 !important;
  min-width: 4px !important;
  max-width: 10px !important;
  height: 38px !important;
  border-radius: 2px !important;
  background-color: #0c101d !important;
  background-image: 
    repeating-linear-gradient(
      to top,
      transparent 0px,
      transparent 3px,
      #090d16 3px,
      #090d16 5px
    ),
    linear-gradient(
      to top,
      #00e600 0%,
      #00ff22 55%,
      #47acde 55%,
      #47acde 80%,
      #ff2200 80%,
      #ff0000 100%
    ) !important;
  background-size: 100% 100% !important;
  transform-origin: bottom center !important;
  transform: scaleY(0.08);
  box-shadow: 0 0 4px rgba(0, 230, 0, 0.2) !important;
  display: block !important;
  transition: opacity 0.2s ease;
}

/* Idle / Stopped State: Equalizer stays completely flat and silent */
.y6-player-eq-wide:not(.playing) .y6-wave-bar {
  transform: scaleY(0.08) !important;
  animation: none !important;
  opacity: 0.3 !important;
  box-shadow: none !important;
}

/* Distinct Rhythmic Patterns for Different Bars (Used as fallback/baseline) */
.y6-player-eq-wide.playing .y6-bar-0 {
  animation: y6LedBeat0 var(--y6-dur, 0.38s) var(--y6-del, 0s) infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.y6-player-eq-wide.playing .y6-bar-1 {
  animation: y6LedBeat1 var(--y6-dur, 0.45s) var(--y6-del, 0s) infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.y6-player-eq-wide.playing .y6-bar-2 {
  animation: y6LedBeat2 var(--y6-dur, 0.34s) var(--y6-del, 0s) infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.y6-player-eq-wide.playing .y6-bar-3 {
  animation: y6LedBeat3 var(--y6-dur, 0.48s) var(--y6-del, 0s) infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.y6-player-eq-wide.playing .y6-bar-4 {
  animation: y6LedBeat4 var(--y6-dur, 0.40s) var(--y6-del, 0s) infinite alternate cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Active Audio Mode - Full Opacity & Glow */
.y6-player-eq-wide.playing .y6-wave-bar {
  opacity: 1 !important;
  box-shadow: 0 0 8px rgba(0, 255, 34, 0.45), 0 0 16px rgba(255, 0, 0, 0.25) !important;
}

@keyframes y6LedBeat0 {
  0% { transform: scaleY(0.15); }
  35% { transform: scaleY(0.65); }
  70% { transform: scaleY(0.35); }
  100% { transform: scaleY(0.95); }
}

@keyframes y6LedBeat1 {
  0% { transform: scaleY(0.25); }
  50% { transform: scaleY(0.85); }
  80% { transform: scaleY(0.45); }
  100% { transform: scaleY(0.70); }
}

@keyframes y6LedBeat2 {
  0% { transform: scaleY(0.12); }
  25% { transform: scaleY(0.40); }
  60% { transform: scaleY(1.00); }
  85% { transform: scaleY(0.60); }
  100% { transform: scaleY(0.30); }
}

@keyframes y6LedBeat3 {
  0% { transform: scaleY(0.30); }
  40% { transform: scaleY(0.75); }
  75% { transform: scaleY(0.20); }
  100% { transform: scaleY(0.90); }
}

@keyframes y6LedBeat4 {
  0% { transform: scaleY(0.18); }
  45% { transform: scaleY(0.60); }
  70% { transform: scaleY(0.92); }
  100% { transform: scaleY(0.40); }
}

.y6-player-center {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.y6-player-station {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.3px;
}

.y6-player-song {
  font-size: 0.88rem;
  color: var(--text-muted, #94a3b8);
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.y6-pulse-icon {
  animation: y6IconPulse 2s ease-in-out infinite;
}

@keyframes y6IconPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
}

.y6-player-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.y6-player-req-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.3));
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.y6-player-req-btn:hover {
  background: var(--theme-primary, #6ca9c7);
  border-color: var(--theme-primary, #6ca9c7);
  color: #0f172a;
}

.y6-player-vol-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.y6-player-vol-btn {
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.y6-player-vol-btn:hover {
  color: var(--theme-primary, #6ca9c7);
}

.y6-vol-range {
  width: 80px;
  accent-color: var(--theme-primary, #6ca9c7);
  cursor: pointer;
}

/* ==========================================================================
   Game Toplist Sections (OKEY TOPLİST & PİŞTİ TOPLİST)
   ========================================================================== */
.y6-toplist-section {
  position: relative;
  z-index: 5;
  padding: 30px 0 35px;
  background: rgba(15, 23, 42, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.y6-game-card {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(145deg, #1e3946 0%, #0b1c24 100%);
  border: 1.5px solid var(--theme-border, #6ca9c7);
  border-radius: 18px;
  padding: 10px 18px 10px 12px;
  min-width: 210px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.y6-game-card:hover {
  transform: translateY(-4px);
  border-color: var(--theme-primary, #a1d1e9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px var(--theme-glow, rgba(108, 169, 199, 0.4));
}

.y6-game-avatar-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.y6-game-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--theme-primary, #6ca9c7);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  background: #1e293b;
}

.y6-game-crown {
  position: absolute;
  bottom: -4px;
  right: -5px;
  font-size: 1.15rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.y6-game-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.y6-game-name {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
  letter-spacing: 0.3px;
}

.y6-game-points {
  font-size: 0.84rem;
  font-weight: 700;
  color: #a1d1e9;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

@media (max-width: 991px) {
  .y6-hero-intro {
    display: none !important;
  }
  .y6-hero-grid {
    grid-template-columns: 1fr !important;
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  /* Hide hero presentation area completely on mobile */
  .y6-hero-intro {
    display: none !important;
  }

  .y6-brand-logo img {
    height: auto !important;
    max-height: 48px !important;
    max-width: 220px !important;
    width: auto !important;
  }

  .y6-hero-section {
    padding: 15px 0 20px !important;
  }

  .y6-login-card {
    padding: 20px 16px !important;
  }

  /* Single-line neat slider header on mobile */
  .y6-dj-header-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
  }

  .y6-dj-header-row .y6-section-title {
    margin-bottom: 0 !important;
    text-align: left !important;
    flex: 1 !important;
    min-width: 0 !important;
  }

  .y6-dj-header-row .y6-section-title h3 {
    font-size: 0.98rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    gap: 6px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.2px;
  }

  .y6-dj-header-row .y6-section-title p {
    display: none !important;
  }

  .y6-dj-nav-btns {
    display: flex !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }

  .y6-dj-nav-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
  }

  .y6-radio-player-bar {
    padding: 10px 0;
    margin: 10px 0 20px;
  }
  
  .y6-player-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 10px !important;
    justify-content: space-between !important;
  }
  
  /* 1. Play Button: Left */
  .y6-player-left {
    order: 1 !important;
    flex-shrink: 0 !important;
  }

  .y6-player-toggle {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* 2. Equalizer: IMMEDIATELY to the right of the Play button! */
  .y6-player-eq-wide {
    order: 2 !important;
    flex: 1 1 0 !important;
    min-width: 100px !important;
    max-width: none !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .y6-player-wave-bars {
    width: 100% !important;
    max-width: 100% !important;
    height: 32px !important;
    gap: 2px !important;
    display: flex !important;
    align-items: flex-end !important;
  }

  .y6-wave-bar {
    min-width: 3px !important;
    max-width: 7px !important;
    height: 32px !important;
    display: block !important;
  }

  /* 3. Right Controls: Top-Right */
  .y6-player-right {
    order: 3 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .y6-player-req-btn {
    padding: 6px 10px !important;
    font-size: 0.78rem !important;
    border-radius: 20px !important;
  }

  .y6-vol-range {
    width: 40px !important;
  }

  /* 4. DJ & Song Info: Full-width clean bottom bar */
  .y6-player-center {
    order: 4 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding-top: 6px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .y6-player-station {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
  }
  
  .y6-player-song {
    font-size: 0.8rem !important;
    max-width: 55% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .y6-brand-logo img {
    height: 65px !important;
    max-height: 75px !important;
    max-width: 340px !important;
  }
}

/* Strict page bounds to eliminate bottom whitespace and jumping */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.y6-login-portal {
  overflow: hidden !important;
  position: relative !important;
}

.y6-footer {
  margin-bottom: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* ==========================================================================
   Modals & Popups Modern Theme Engine Override
   ========================================================================== */
.modal_back {
  background: rgba(3, 7, 18, 0.85) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 99999 !important;
}

.modal_in,
.large_modal_in,
.small_modal_in,
.over_modal_in,
.over_emodal_in {
  background: #0f172a !important;
  border: 1px solid var(--theme-border, rgba(108, 169, 199, 0.35)) !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 30px var(--theme-glow, rgba(108, 169, 199, 0.2)) !important;
  overflow: hidden !important;
  color: #f8fafc !important;
}

.modal_top {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95)) !important;
  border-bottom: 1px solid var(--theme-border, rgba(108, 169, 199, 0.2)) !important;
  color: var(--theme-primary, #6ca9c7) !important;
  padding: 14px 18px !important;
  height: auto !important;
}

.modal_top_element {
  color: #94a3b8 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: color var(--transition-fast), transform var(--transition-fast) !important;
}

.modal_top_element:hover {
  color: var(--theme-primary, #6ca9c7) !important;
  transform: scale(1.15) !important;
}

.modal_top_text {
  color: var(--theme-primary, #6ca9c7) !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  text-shadow: 0 0 12px var(--theme-glow, rgba(108, 169, 199, 0.3)) !important;
}

.modal_content {
  background: transparent !important;
  color: #f8fafc !important;
}

.pad_box {
  padding: 22px 20px !important;
}

.theme_btn,
.full_button.large_button {
  background: var(--theme-gradient, linear-gradient(135deg, #6ca9c7, #36718e)) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px var(--theme-glow, rgba(108, 169, 199, 0.4)) !important;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.theme_btn:hover,
.full_button.large_button:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 6px 24px var(--theme-glow, rgba(108, 169, 199, 0.6)) !important;
}


/* Full-width announcement gallery, fed by the admin announcement list. */
.y6-announcements {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 400px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-dark);
  border-block: 1px solid var(--theme-border);
  box-shadow: 0 18px 50px -28px var(--theme-glow);
  touch-action: pan-y;
}
.y6-announcement-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .75s cubic-bezier(.22, .61, .36, 1);
}
.y6-announcement-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}
.y6-announcement-ambient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(28px) brightness(.42);
  transform: scale(1.12);
  z-index: -1;
}
.y6-announcement-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.y6-announcement-label,
.y6-announcement-controls,
.y6-announcement-arrow {
  position: absolute;
  z-index: 2;
  color: var(--text-main);
  background: rgba(11, 15, 25, .82);
  border: 1px solid var(--theme-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.y6-announcement-label {
  top: 18px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}
.y6-announcement-label i { color: var(--theme-primary); }
.y6-announcement-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 27px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.y6-announcement-prev { left: 24px; }
.y6-announcement-next { right: 24px; }
.y6-announcement-arrow:hover { background: var(--theme-dark); border-color: var(--theme-primary); }
.y6-announcement-controls {
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 32px);
  height: 42px;
  padding: 0 14px 0 6px;
  border-radius: 40px;
}
.y6-announcement-pause {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--theme-badge-bg);
  color: var(--theme-hover);
  font-size: 11px;
  cursor: pointer;
}
.y6-announcement-dots { display: flex; align-items: center; overflow-x: auto; }
.y6-announcement-dot {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.y6-announcement-dot::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 8px;
  background: var(--text-muted);
  transition: width .3s, left .3s, background .3s;
}
.y6-announcement-dot[aria-current="true"]::after { width: 20px; left: 2px; background: var(--theme-primary); }
.y6-announcement-count { white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.y6-announcements button:focus-visible { outline: 2px solid var(--theme-hover); outline-offset: 3px; }
@media (max-width: 600px) {
  .y6-announcement-label { top: 14px; left: 14px; }
  .y6-announcement-arrow { width: 36px; height: 36px; font-size: 23px; }
  .y6-announcement-prev { left: 10px; }
  .y6-announcement-next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .y6-announcement-track { transition: none; }
}

/* Showcase headers: centered titles with a compact two-tone theme underline. */
.y6-dj-header-row:has(> .y6-section-title.y6-showcase-title) {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 48px;
  margin-bottom: 24px !important;
  padding: 0 132px 15px;
}
.y6-dj-header-row > .y6-section-title.y6-showcase-title {
  width: 100%;
  text-align: center !important;
  margin: 0 !important;
}
.y6-showcase-title h3 {
  justify-content: center !important;
  margin: 0 !important;
  font-size: clamp(1.15rem, 2.1vw, 1.7rem) !important;
  font-weight: 800 !important;
  letter-spacing: .035em;
  text-align: center !important;
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.y6-showcase-title::after {
  content: '';
  display: block;
  width: clamp(100px, 12vw, 160px);
  height: 3px;
  margin: 13px auto 0;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--theme-primary) 0 52%, var(--theme-hover) 52% 100%);
}
.y6-dj-header-row > .y6-dj-nav-btns {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

/* Keep showcase and announcement arrows visually identical in every state. */
.y6-dj-nav-btn,
.y6-dj-nav-btn:hover,
.y6-dj-nav-btn:active,
.y6-dj-nav-btn:focus:not(:focus-visible) {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: var(--theme-border, rgba(108, 169, 199, 0.4)) !important;
  color: #fff !important;
  transform: none !important;
  transition: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4) !important;
}
.y6-announcement-arrow,
.y6-announcement-arrow:hover,
.y6-announcement-arrow:active,
.y6-announcement-arrow:focus:not(:focus-visible) {
  background: rgba(11, 15, 25, .82) !important;
  border-color: var(--theme-border) !important;
  color: var(--text-main) !important;
  transform: translateY(-50%) !important;
  transition: none !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25) !important;
}
.y6-announcement-arrow:focus-visible,
.y6-dj-nav-btn:focus-visible { outline: 2px solid var(--theme-hover); outline-offset: 3px; }

/* Fill the entire announcement frame so banners leave no side bars. */
.y6-announcement-slide { background: var(--bg-dark); }
.y6-announcement-image { object-fit: cover; }
.y6-announcement-ambient { display: none; }
.y6-announcement-label,
.y6-announcement-controls,
.y6-announcement-arrow {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {
  /* Low-end phones pay a high compositing cost for permanent blurred layers. */
  .y6-bg-glow-1,
  .y6-bg-glow-2,
  .y6-eq-bar { animation: none !important; }
  .y6-bg-glow-1,
  .y6-bg-glow-2 { filter: none; opacity: .18; }
  .y6-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .y6-dj-header-row:has(> .y6-section-title.y6-showcase-title) {
    min-height: 42px;
    margin-bottom: 19px !important;
    padding: 0 70px 12px;
  }
  .y6-showcase-title h3 { font-size: clamp(1rem, 4.3vw, 1.22rem) !important; }
  .y6-showcase-title::after { width: 92px; height: 3px; margin-top: 9px; }
  .y6-dj-header-row > .y6-dj-nav-btns { gap: 6px; }
  .y6-dj-nav-btn,
  .y6-dj-nav-btn:hover,
  .y6-dj-nav-btn:active { width: 32px !important; height: 32px !important; }
  .y6-announcement-track { transition-duration: .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .y6-announcement-track { transition: none; }
}

/* Transparent showcase sections with lightweight, theme-colored moving bubbles. */
.y6-recent-users-section,
.y6-toplist-section {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
.y6-recent-users-section > .y6-container,
.y6-toplist-section > .y6-container {
  position: relative;
  z-index: 1;
}
.y6-recent-users-section::before,
.y6-recent-users-section::after,
.y6-toplist-section::before,
.y6-toplist-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.y6-recent-users-section::before,
.y6-toplist-section::before {
  top: -125px;
  left: max(-120px, calc((100vw - 1400px) / 2));
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--theme-primary-rgb), .13) 0%, rgba(var(--theme-primary-rgb), .07) 28%, rgba(var(--theme-primary-rgb), .025) 53%, transparent 72%);
  animation: y6-showcase-bubble-drift 24s ease-in-out infinite alternate;
}
.y6-recent-users-section::after,
.y6-toplist-section::after {
  right: max(-145px, calc((100vw - 1400px) / 2));
  bottom: -190px;
  width: 410px;
  height: 410px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 30%, rgba(var(--theme-primary-rgb), .25) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 22%, rgba(var(--theme-primary-rgb), .28) 0 4px, transparent 5px),
    radial-gradient(circle at 62% 66%, rgba(var(--theme-primary-rgb), .20) 0 3px, transparent 4px),
    radial-gradient(circle at 34% 78%, rgba(var(--theme-primary-rgb), .25) 0 5px, transparent 6px),
    radial-gradient(circle at 83% 84%, rgba(var(--theme-primary-rgb), .18) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 43%, rgba(var(--theme-primary-rgb), .16) 0 16px, transparent 17px);
  animation: y6-showcase-dots-drift 31s ease-in-out infinite alternate;
}
@keyframes y6-showcase-bubble-drift {
  from { transform: translate3d(-12px, 8px, 0) scale(.96); }
  to { transform: translate3d(22px, -14px, 0) scale(1.04); }
}
@keyframes y6-showcase-dots-drift {
  from { transform: translate3d(10px, -8px, 0) rotate(-5deg); }
  to { transform: translate3d(-16px, 12px, 0) rotate(5deg); }
}

/* On phones, size the gallery from each banner's intrinsic ratio so no part is cropped. */
@media (max-width: 768px) {
  .y6-announcements {
    height: auto;
    aspect-ratio: var(--y6-announcement-ratio, 16 / 9);
  }
  .y6-announcement-track,
  .y6-announcement-slide,
  .y6-announcement-image {
    height: 100%;
  }
  .y6-announcement-image {
    object-fit: contain;
    object-position: center;
  }
  .y6-announcement-slide {
    background: transparent;
  }
  .y6-recent-users-section::before,
  .y6-toplist-section::before {
    width: 300px;
    height: 300px;
    top: -80px;
  }
  .y6-recent-users-section::after,
  .y6-toplist-section::after {
    width: 280px;
    height: 280px;
    bottom: -125px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .y6-recent-users-section::before,
  .y6-recent-users-section::after,
  .y6-toplist-section::before,
  .y6-toplist-section::after {
    animation: none;
  }
}

/* Brighten the charcoal surfaces while keeping the selected accent colors. */
:root {
  --bg-dark: #171d2a;
  --bg-card: rgba(34, 44, 62, .82);
  --bg-card-hover: rgba(49, 61, 81, .90);
  --bg-input: rgba(29, 40, 59, .82);
  --bg-input-focus: rgba(38, 50, 71, .94);
}
.y6-login-portal {
  background-image: linear-gradient(135deg, #1b2231 0%, #20293a 52%, #192638 100%);
}

/* Softer showcase layout for members, toplists, staff, and DJ sliders. */
.y6-recent-users-section,.y6-toplist-section,.y6-dj-section{margin:18px auto;padding:28px 0!important;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(var(--theme-primary-rgb),.08))!important;border:1px solid rgba(var(--theme-primary-rgb),.24)!important;border-radius:22px;box-shadow:0 12px 30px rgba(36,45,65,.08);}
.y6-recent-users-section .y6-container,.y6-toplist-section .y6-container,.y6-dj-section .y6-container{padding:0 24px;}
.y6-dj-header-row{padding-bottom:16px!important;margin-bottom:16px!important;border-bottom:1px solid rgba(var(--theme-primary-rgb),.18);}
.y6-showcase-title h3{color:#27334a!important;font-size:25px!important;font-weight:850!important;letter-spacing:.1px;}.y6-showcase-title h3::after{content:'';display:block;width:92px;height:4px;margin:10px 0 0;border-radius:99px;background:var(--theme-gradient);}
.y6-dj-nav-btn{width:40px!important;height:40px!important;border:1px solid rgba(var(--theme-primary-rgb),.45)!important;border-radius:50%!important;background:#fff!important;color:var(--theme-primary)!important;box-shadow:0 5px 13px rgba(var(--theme-primary-rgb),.16);}
.y6-user-slide-card{min-width:190px!important;padding:8px 16px 8px 8px!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(var(--theme-primary-rgb),.2)!important;box-shadow:0 5px 14px rgba(36,45,65,.07);}.y6-user-slide-card:hover{background:#fff!important;box-shadow:0 9px 20px rgba(var(--theme-primary-rgb),.17)!important;}.y6-user-slide-name{color:#27334a!important;font-size:14px!important;font-weight:800!important;}.y6-user-slide-status{color:#65728a!important;font-weight:650;}
.y6-game-card{min-width:220px!important;padding:11px 16px 11px 11px!important;background:linear-gradient(135deg,#fff,rgba(var(--theme-primary-rgb),.12))!important;border:1px solid rgba(var(--theme-primary-rgb),.35)!important;box-shadow:0 6px 16px rgba(36,45,65,.09)!important;}.y6-game-name{color:#27334a!important;font-weight:850!important;}.y6-game-points{color:var(--theme-dark)!important;font-weight:800!important;}.y6-game-avatar{background:#eef1f6!important;box-shadow:0 3px 9px rgba(var(--theme-primary-rgb),.18)!important;}
.y6-team-card{min-width:190px;padding:22px 18px!important;background:rgba(255,255,255,.9)!important;border:1px solid rgba(var(--theme-primary-rgb),.25)!important;box-shadow:0 7px 18px rgba(36,45,65,.08);}.y6-team-name{color:#27334a!important;font-size:17px!important;font-weight:850!important;}.y6-team-rank{background:rgba(var(--theme-primary-rgb),.12)!important;color:var(--theme-dark)!important;font-weight:750!important;}
@media(max-width:700px){.y6-recent-users-section,.y6-toplist-section,.y6-dj-section{margin:12px 8px;padding:20px 0!important;border-radius:16px;}.y6-recent-users-section .y6-container,.y6-toplist-section .y6-container,.y6-dj-section .y6-container{padding:0 14px;}.y6-showcase-title h3{font-size:19px!important;}.y6-dj-nav-btn{width:34px!important;height:34px!important;}.y6-user-slide-card{min-width:168px!important;}.y6-game-card{min-width:190px!important;}.y6-team-card{min-width:160px!important;}}

/* Theme-tinted wood panels: no image download and light enough for readable text. */
.y6-recent-users-section,.y6-toplist-section,.y6-dj-section{overflow:hidden;background:linear-gradient(115deg,rgba(255,255,255,.74),rgba(var(--theme-primary-rgb),.16),rgba(255,255,255,.7)),repeating-linear-gradient(0deg,rgba(69,45,35,.1) 0 2px,transparent 2px 35px),repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 140px)!important;}
.y6-recent-users-section::before,.y6-toplist-section::before,.y6-dj-section::before{content:'';position:absolute;inset:8px;border:1px solid rgba(var(--theme-primary-rgb),.3);border-radius:16px;pointer-events:none;opacity:.8;}

/* Richer theme panels: replace the bright surfaces with the selected theme's depth. */
.y6-recent-users-section,.y6-toplist-section,.y6-dj-section{background:linear-gradient(115deg,rgba(var(--theme-primary-rgb),.3),rgba(10,16,31,.74) 48%,rgba(var(--theme-primary-rgb),.22)),repeating-linear-gradient(0deg,rgba(0,0,0,.17) 0 2px,transparent 2px 35px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 140px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 30px rgba(10,16,31,.22);}
.y6-ticker-item{display:inline-flex!important;align-items:center;gap:8px;margin-right:38px!important;vertical-align:middle;}.y6-ticker-author{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 4px;border-radius:999px;background:rgba(var(--theme-primary-rgb),.18);border:1px solid rgba(var(--theme-primary-rgb),.48);color:#fff;font-size:12px;line-height:1;}.y6-ticker-author img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.72);}.y6-ticker-item>.fa-quote-left,.y6-ticker-item>.fa-heart{color:var(--theme-primary);}
.y6-management-section .y6-user-slide-card{min-width:242px!important;min-height:82px;padding:10px 20px 10px 10px!important;border-radius:18px;background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.42),rgba(16,20,38,.9))!important;border-color:rgba(var(--theme-primary-rgb),.78)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 9px 20px rgba(0,0,0,.26)!important;}.y6-management-section .y6-user-slide-avatar{width:58px!important;height:58px!important;border-width:3px;box-shadow:0 0 0 3px rgba(var(--theme-primary-rgb),.16);}.y6-management-section .y6-user-slide-name{font-size:17px!important;font-weight:900!important;}.y6-management-section .y6-user-slide-status{margin-top:4px;padding:3px 8px;border-radius:999px;background:rgba(var(--theme-primary-rgb),.2);color:#fff!important;font-size:12px!important;font-weight:800;}.y6-management-section .y6-user-slide-card:hover{transform:translateY(-3px) scale(1.015);}
@media(max-width:700px){.y6-management-section .y6-user-slide-card{min-width:210px!important;min-height:72px;}.y6-management-section .y6-user-slide-avatar{width:50px!important;height:50px!important;}.y6-management-section .y6-user-slide-name{font-size:15px!important;}}
.y6-dj-header-row{position:relative;}.y6-dj-header-row .y6-showcase-title{width:100%;}.y6-dj-header-row .y6-showcase-title h3{width:100%;justify-content:center!important;}.y6-dj-header-row .y6-showcase-title h3::before,.y6-dj-header-row .y6-showcase-title h3::after{content:'';display:block;flex:1;max-width:150px;height:3px;margin:0 14px;border-radius:999px;background:var(--theme-gradient);}.y6-dj-header-row .y6-showcase-title h3::after{width:auto;margin-top:0;}.y6-dj-header-row .y6-dj-nav-btns{position:absolute;right:0;top:50%;transform:translateY(-50%);}
.y6-last-active-section .y6-user-slide-card{min-width:258px!important;min-height:92px;padding:12px 22px 12px 12px!important;border-radius:20px;background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.48),rgba(17,23,43,.92))!important;border-color:rgba(var(--theme-primary-rgb),.88)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 11px 23px rgba(0,0,0,.28)!important;}.y6-last-active-section .y6-user-slide-avatar{width:64px!important;height:64px!important;border-width:3px;box-shadow:0 0 0 4px rgba(var(--theme-primary-rgb),.14);}.y6-last-active-section .y6-user-slide-name{font-size:18px!important;font-weight:900!important;}.y6-last-active-section .y6-user-slide-status{margin-top:5px;font-size:13px!important;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.1);}.y6-last-active-section .y6-user-slide-card:hover{transform:translateY(-4px) scale(1.012);}
@media(max-width:700px){.y6-dj-header-row .y6-showcase-title h3{justify-content:flex-start!important;padding-right:76px;}.y6-dj-header-row .y6-showcase-title h3::before,.y6-dj-header-row .y6-showcase-title h3::after{display:none;}.y6-last-active-section .y6-user-slide-card{min-width:220px!important;min-height:80px;}.y6-last-active-section .y6-user-slide-avatar{width:54px!important;height:54px!important;}.y6-last-active-section .y6-user-slide-name{font-size:16px!important;}}
.y6-showcase-title h3,.y6-user-slide-name,.y6-game-name,.y6-team-name{color:#fff!important;text-shadow:0 2px 4px rgba(0,0,0,.32);}.y6-user-slide-status{color:rgba(255,255,255,.76)!important;}.y6-game-points{color:rgba(255,255,255,.86)!important;}.y6-user-slide-card,.y6-game-card,.y6-team-card{background:linear-gradient(135deg,rgba(var(--theme-primary-rgb),.28),rgba(12,17,32,.76))!important;border-color:rgba(var(--theme-primary-rgb),.62)!important;box-shadow:0 7px 17px rgba(0,0,0,.22)!important;}.y6-team-rank{background:rgba(var(--theme-primary-rgb),.25)!important;color:#fff!important;}.y6-dj-nav-btn{background:rgba(12,17,32,.76)!important;color:#fff!important;border-color:rgba(var(--theme-primary-rgb),.72)!important;}

/* Give the announcement frame a refined, theme-colored outer edge. */
.y6-announcements {
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 17px;
  background:
    linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
    linear-gradient(115deg, var(--theme-primary), var(--theme-hover) 32%, var(--theme-dark) 68%, var(--theme-primary)) border-box;
  box-shadow:
    0 0 0 1px rgba(var(--theme-primary-rgb), .20),
    0 14px 42px -22px var(--theme-glow),
    inset 0 0 22px rgba(var(--theme-primary-rgb), .08);
}
.y6-announcement-track,
.y6-announcement-slide {
  border-radius: 14px;
}
.y6-showcase-title::after {
  width: clamp(150px, 17vw, 230px);
  height: 4px;
  margin-top: 15px;
  box-shadow: 0 0 14px rgba(var(--theme-primary-rgb), .28);
}

@media (max-width: 768px) {
  /* Keep the announcement image unobstructed on narrow screens. */
  .y6-announcement-controls { display: none !important; }
  .y6-showcase-title::after {
    width: 132px;
    height: 4px;
    margin-top: 11px;
  }
}

/* Keep the live DJ and auto-DJ labels on one compact line on phones. */
@media (max-width: 768px) {
  .y6-radio-flex {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    min-width: 0;
  }
  .y6-radio-info {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
  }
  .y6-radio-text {
    min-width: 0;
    max-width: calc(100vw - 78px);
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    gap: 5px;
    font-size: clamp(.68rem, 3.15vw, .86rem);
  }
  .y6-radio-text > span {
    min-width: 0;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: inherit !important;
    padding-inline: 5px !important;
  }
  .y6-player-center { min-width: 0 !important; gap: 4px !important; }
  .y6-player-station {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    gap: 5px;
    font-size: clamp(.68rem, 3.1vw, .83rem) !important;
  }
  .y6-player-station > i { flex: 0 0 auto; }
  .y6-player-song { flex: 0 1 48% !important; max-width: 48% !important; }
}

/* Make the phone banner taller without cropping its full-width artwork. */
@media (max-width: 768px) {
  .y6-announcement-image { object-fit: fill !important; }
  .y6-announcement-label,
  .y6-announcement-controls { display: none !important; }
}

/* Brighter charcoal foundation, lifted further with the active theme accent. */
:root {
  --bg-dark: #252e40;
  --bg-card: rgba(48, 59, 79, .88);
  --bg-card-hover: rgba(63, 76, 99, .94);
  --bg-input: rgba(41, 54, 76, .90);
  --bg-input-focus: rgba(53, 68, 93, .98);
}
.y6-login-portal {
  background: radial-gradient(
    ellipse at 50% 8%,
    rgba(var(--theme-primary-rgb), .12) 0%,
    #303b50 38%,
    #252f43 72%,
    #202b3d 100%
  ) !important;
}
.y6-announcements {
  box-shadow:
    0 0 0 1px rgba(var(--theme-primary-rgb), .26),
    0 0 24px rgba(var(--theme-primary-rgb), .14),
    0 14px 42px -22px var(--theme-glow),
    inset 0 0 22px rgba(var(--theme-primary-rgb), .10);
}
.y6-radio-player-bar {
  background: linear-gradient(135deg, rgba(50, 62, 83, .97), rgba(37, 50, 70, .99));
}
.y6-showcase-title::after {
  background: linear-gradient(90deg, var(--theme-primary) 0 50%, var(--theme-hover) 50% 100%);
}

/* Theme-lit masthead, balanced showcase title lines, and a fuller desktop volume control. */
.y6-header {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(var(--theme-primary-rgb), .42), transparent 48%),
    radial-gradient(ellipse at 82% 100%, rgba(var(--theme-primary-rgb), .22), transparent 56%),
    linear-gradient(118deg, #101826 0%, rgba(var(--theme-primary-rgb), .22) 48%, #111827 100%) !important;
  border-bottom-color: rgba(var(--theme-primary-rgb), .52) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 9px 26px rgba(var(--theme-primary-rgb), .18);
}
.y6-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .72;
  background: repeating-linear-gradient(110deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.y6-header .y6-nav-wrapper { position: relative; z-index: 1; }

.y6-dj-header-row { padding-bottom: 0 !important; border-bottom: 0 !important; }
.y6-showcase-title::after { content: none !important; display: none !important; }
.y6-dj-header-row .y6-showcase-title h3::before,
.y6-dj-header-row .y6-showcase-title h3::after {
  height: 3px;
  max-width: 150px;
  margin: 0 14px;
  box-shadow: 0 0 10px rgba(var(--theme-primary-rgb), .35);
}

@media (min-width: 769px) {
  .y6-player-right { flex: 1 1 300px; justify-content: flex-end; }
  .y6-player-vol-wrap { flex: 1 1 215px; max-width: 300px; }
  .y6-vol-range { width: 100%; min-width: 150px; }
}
@media (max-width: 700px) {
  .y6-dj-header-row .y6-showcase-title h3 { padding-right: 70px; }
  .y6-dj-header-row .y6-showcase-title h3::before,
  .y6-dj-header-row .y6-showcase-title h3::after { display: block; flex: 1 1 20px; max-width: 50px; margin: 0 7px; }
}

/* A heavier, polished frame keeps announcements visually separate from the page. */
.y6-announcements {
  box-sizing: border-box;
  border: 3px solid transparent !important;
  border-radius: 20px;
  background:
    linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
    linear-gradient(125deg, var(--theme-dark), var(--theme-primary) 30%, var(--theme-hover) 52%, var(--theme-primary) 74%, var(--theme-dark)) border-box !important;
  box-shadow:
    0 0 0 1px rgba(var(--theme-primary-rgb), .58),
    0 0 0 5px rgba(var(--theme-primary-rgb), .09),
    0 16px 40px rgba(7, 12, 25, .42),
    0 0 28px rgba(var(--theme-primary-rgb), .26),
    inset 0 0 22px rgba(var(--theme-primary-rgb), .16) !important;
}
.y6-announcement-track,
.y6-announcement-slide { border-radius: 16px; }
@media (max-width: 700px) {
  .y6-announcements { border-width: 2px !important; border-radius: 15px; box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb), .48), 0 0 0 3px rgba(var(--theme-primary-rgb), .08), 0 12px 26px rgba(7, 12, 25, .34), 0 0 18px rgba(var(--theme-primary-rgb), .20) !important; }
  .y6-announcement-track,
  .y6-announcement-slide { border-radius: 12px; }
}

/* Preserve the logo's original gold detail over the active-theme header. */
.y6-brand-logo { position: relative; z-index: 2; }
.y6-brand-logo img {
  opacity: 1;
  filter: brightness(1.22) saturate(1.22) contrast(1.12) drop-shadow(0 0 8px rgba(141, 204, 235, .62)) drop-shadow(0 0 16px var(--theme-glow)) !important;
}

/* On phones, the request action stays left while the volume track uses all remaining width. */
@media (max-width: 768px) {
  .y6-player-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .y6-player-vol-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .y6-vol-range {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Use the same no-gap ticker distance on phones as on desktop. */
@media (max-width: 768px) {
  .y6-player-song-title {
    animation: y6-song-travel var(--y6-song-duration, 12s) linear infinite !important;
  }
}

/* Slightly reduce mobile user-card height without changing its layout. */
@media (max-width: 480px) {
    #usersnames .user_item,
    #usersnames .user_item_custom {
        grid-template-rows: 42px 101px 25px !important;
        min-height: 178px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #usersnames .user_item_avatar {
        height: 101px !important;
    }
    #usersnames .user_item_avatar .acav,
    #usersnames .user_item_avatar > img {
        height: 93px !important;
    }
    #usersnames .user_item > .icrank,
    #usersnames .user_item_custom > .icrank {
        height: 23px !important;
    }
    #usersnames .game_scores {
        gap: 4px !important;
        margin-bottom: 5px !important;
    }
    #usersnames .game_scores span {
        min-height: 24px !important;
        padding-block: 2px !important;
    }
}

/* Recent-user carousel status reflects the current activity window. */
.y6-user-slide-status.is-online { color: #10b981; }
.y6-user-slide-status.is-offline { color: #98a4b5; }
.y6-user-slide-status.is-offline .fa-circle { color: #748095; }

/* Full song title ticker: single line, GPU-friendly and readable at full length. */
.y6-player-center {
  flex: 0 1 380px;
  min-width: 0;
}
.y6-player-song {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.y6-player-song-icon { flex: 0 0 auto; }
.y6-player-song-window {
  position: relative;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.y6-player-song-title {
  display: inline-block;
  width: max-content;
  min-width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: y6-song-travel var(--y6-song-duration, 18s) linear infinite;
}
@keyframes y6-song-travel {
  from { transform: translate3d(var(--y6-song-distance, 300px), 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}
@media (max-width: 768px) {
  .y6-player-center { flex: 0 0 100% !important; }
  .y6-player-song {
    flex: 0 1 48% !important;
    max-width: 48% !important;
    text-overflow: clip !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .y6-player-song-title { animation-duration: var(--y6-song-duration, 18s); }
}

/* Let every landing-page rail span the viewport, including inside the
   centered content column. The page shell clips the resulting bleed. */
.y6-login-portal .y6-slider-container,
.y6-login-portal .y6-dj-slider-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}
.y6-login-portal .y6-slider-container {
  padding-left: clamp(12px, 3.5vw, 60px) !important;
  padding-right: clamp(12px, 3.5vw, 60px) !important;
}
.y6-login-portal .y6-dj-slider-wrap {
  padding-left: clamp(7px, 2vw, 32px) !important;
  padding-right: clamp(7px, 2vw, 32px) !important;
}
.y6-login-portal .y6-dj-slider { width: 100% !important; box-sizing: border-box !important; }

/* The ticker starts at the visible edge, then travels right-to-left at once. */
.y6-player-song-title { animation-play-state: running !important; }
@keyframes y6-song-travel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--y6-song-offset, -300px), 0, 0); }
}
@media (max-width: 768px) {
  .y6-player-center { width: 100% !important; min-width: 0 !important; }
  .y6-player-station { flex: 0 1 46% !important; max-width: 46% !important; }
  .y6-player-song {
    flex: 1 1 54% !important;
    width: 54% !important;
    max-width: 54% !important;
    min-width: 0 !important;
  }
  .y6-player-song-window { flex: 1 1 0 !important; width: 0 !important; max-width: 100% !important; }
  .y6-player-song-title {
    animation: y6-song-travel-mobile 14s linear infinite !important;
    animation-play-state: running !important;
  }
  .y6-vol-range {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }
}
@keyframes y6-song-travel-mobile {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-100%, 0, 0); }
}

/* Final mobile player sizing: the volume range takes every pixel after its icon. */
@media (max-width: 768px) {
  .y6-player-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .y6-player-vol-wrap {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .y6-player-vol-wrap .y6-vol-range {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}