/* ═══════════════════════════════════════════════════════════════
   JUST DANCE NOW PLUS  —  Web Controller Stylesheet  v4.0
   Cosmic / Space theme  ·  Mobile-first portrait
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Custom Properties (Design Tokens) ────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #08001E;
  --bg-2:         #0D0133;
  --bg-card:      rgba(13, 6, 46, 0.90);
  --bg-card-2:    rgba(7, 22, 78, 0.88);
  --bg-overlay:   rgba(1, 9, 43, 0.96);

  /* Accent colours */
  --cyan:         #17FFCB;
  --cyan-dim:     rgba(23, 255, 203, 0.18);
  --cyan-glow:    rgba(23, 255, 203, 0.45);
  --blue:         #3784F9;
  --purple:       #A96AFF;
  --pink:         #F42193;
  --green:        #1FFB81;
  --yellow:       #FFF717;
  --red:          #FF4747;
  --orange:       #FD9802;

  /* Text */
  --text:         #FFFFFF;
  --text-dim:     rgba(255, 255, 255, 0.55);
  --text-muted:   rgba(255, 255, 255, 0.30);

  /* Borders */
  --border:       rgba(23, 255, 203, 0.22);
  --border-hover: rgba(23, 255, 203, 0.55);

  /* Gradients */
  --grad-card:    linear-gradient(135deg, rgba(23,255,203,.12), rgba(31,43,118,.82));
  --grad-card-h:  linear-gradient(135deg, rgba(23,255,203,.28), rgba(0,95,205,.80));
  --grad-btn:     linear-gradient(135deg, #17FFCB, #3784F9);
  --grad-page:    linear-gradient(180deg, #08001E 0%, #0D0133 100%);

  /* Layout */
  --tab-bar-h:    3.8rem;
  --topbar-h:     3.4rem;
  --preview-h:    min(17rem, calc(100vh - var(--topbar-h) - var(--tab-bar-h) - 15rem));
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
  --content-pb:   calc(var(--tab-bar-h) + var(--safe-bottom) + 0.5rem);

  /* Radii */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 100px;

  /* Shadows */
  --shadow-card:  2px 2px 12px rgba(55, 52, 105, 0.7);
  --shadow-glow:  0 0 14px rgba(23, 255, 203, 0.35);
  --shadow-deep:  0 4px 28px rgba(0, 0, 0, 0.55);

  /* Tap feedback */
  --tap-scale: 0.96;
  --tap-dur:   110ms;
}

/* ── 2. Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size:             16px;
  -webkit-text-size-adjust: 100%;
  height:                100%;
}

body {
  font-family:  'Roboto-JDN', 'Poppins', 'Evolventa', sans-serif;
  background:   var(--bg);
  color:        var(--text);
  height:       100%;
  width:        100%;
  overflow:     hidden;
  position:     fixed; /* Prevent iOS scroll bounce */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select:  none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html[lang="ru"] .settings-header,
html[lang="ru"] .coach-song-title,
html[lang="ru"] .newsLabelParent h2,
html[lang="ru"] .profileCreationTitle,
html[lang="ru"] .endScreenCongrats h2,
html[lang="pt-BR"] .settings-header,
html[lang="pt-BR"] .coach-song-title,
html[lang="pt-BR"] .newsLabelParent h2,
html[lang="pt-BR"] .profileCreationTitle,
html[lang="pt-BR"] .endScreenCongrats h2 {
  font-family: 'Roboto-JDN', 'Evolventa', sans-serif;
}

img, video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ── 3. Fonts ─────────────────────────────────────────────────── */
@font-face {
  font-family: 'JDN-Display';
  src: url('./fonts/4e279f8d41b13fbd15324354038380cd.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto-JDN';
  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Evolventa';
  src: url('./fonts/Evolventa-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ── 4. Scrollbar (cosmic cyan) ───────────────────────────────── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 4px; }

/* ── 5. Screen / Page System ─────────────────────────────────── */
.container {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  display:    flex;
  flex-direction: column;
  align-items: center;
  background: var(--grad-page);
  overflow:   hidden;
}

#welcomeGuest,
#welcomeGuestEnterNickname,
#welcomeGuestSelectAvatar,
#welcomeProfileEnd {
  justify-content: center;
  gap: 1rem;
  padding: calc(var(--safe-bottom) + 1rem) 1.2rem;
}

.inactive        { display: none !important; }
.inpagecontainer { display: flex; flex-direction: column; width: 100%; flex: 1; overflow: hidden; }

body.pc-mode #jdnplustitle,
body.pc-mode #leaderBoards,
body.pc-mode #playersAvatarMainPage,
body.pc-mode .controlPanel,
body.pc-mode .toast-notification,
body.pc-mode .connection-status {
  display: none !important;
}

.pcLanding {
  justify-content: center;
  padding: 2rem;
  background: #08001E;
  color: #fff;
  text-align: center;
}

.pcLanding::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(8, 0, 30, 0.28), rgba(8, 0, 30, 0.82));
}

.pcLandingVideo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcLandingContent {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(92vw, 32rem);
  padding: 2rem;
  border-radius: var(--r-md);
  background: rgba(8, 0, 30, 0.58);
  border: 1px solid rgba(23, 255, 203, 0.24);
  box-shadow: 0 0 28px rgba(23, 255, 203, 0.18);
  backdrop-filter: blur(10px);
}

.pcLandingLogo {
  height: 5rem;
  width: auto;
  object-fit: contain;
}

.pcLandingTitle {
  font-family: 'Evolventa', 'Roboto-JDN', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.16;
  color: var(--cyan);
  text-shadow: 0 0 18px var(--cyan-glow);
}

.pcLandingText {
  max-width: 24rem;
  font-family: 'Roboto-JDN', 'Evolventa', sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.pcLandingQr {
  width: 10rem;
  height: 10rem;
  object-fit: contain;
  padding: 0.35rem;
  border-radius: var(--r-md);
  background: #fff;
}

/* ── 6. Keyframe Animations ──────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.7; transform: scale(0.96); }
}

@keyframes bounceIn {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes quickZoom {
  0%   { transform: scale(1);    }
  50%  { transform: translateY(-1px) scale(1.08); }
  100% { transform: scale(1);    }
}

@keyframes quickZoomSwing {
  0%   { transform: scale(1)    rotate(0deg);   }
  20%  { transform: scale(1.12) rotate(0deg);   }
  40%  { transform: scale(1.12) rotate(-22deg); }
  60%  { transform: scale(1.12) rotate(22deg);  }
  85%  { transform: scale(1.05) rotate(0deg);   }
  100% { transform: scale(1)    rotate(0deg);   }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--cyan-glow); }
  50%       { box-shadow: 0 0 22px var(--cyan-glow), 0 0 40px rgba(23,255,203,0.2); }
}

@keyframes starbarFill {
  from { height: 0%; }
}

@keyframes loadingSpin {
  from { transform: rotate(0deg) translateZ(0); rotate: 0deg; }
  to   { transform: rotate(360deg) translateZ(0); rotate: 360deg; }
}
@-webkit-keyframes loadingSpin {
  from { -webkit-transform: rotate(0deg) translateZ(0); }
  to   { -webkit-transform: rotate(360deg) translateZ(0); }
}

@keyframes scoreCount {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1);   }
}

.animatIcon    { animation: quickZoom      0.24s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
.animateAvatar { animation: quickZoomSwing 1.6s  ease both; }

@keyframes uiSurfaceEnter {
  from {
    opacity: 0.42;
    transform: translate3d(var(--ui-surface-enter-x, 0.55rem), 0.28rem, 0) scale(0.994);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.ui-surface-enter {
  animation: uiSurfaceEnter 0.21s cubic-bezier(0.16, 0.78, 0.24, 1) both !important;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .ui-surface-enter,
  .animatIcon,
  .home-card,
  .room-browser-caret {
    animation: none !important;
  }

  .controlPanelButton,
  .controlPanelButton::before,
  .controlPanelButton img,
  .profile-item-card {
    transition: none !important;
  }
}

/* ── 7. Tap Feedback (universal) ──────────────────────────────── */
button, [onclick],
.controlPanelButton, .song, .avatar,
.numpad-key, .langbutton, .playlist-item,
.setting-row, .bottom-right-button,
.bottom-right-button-admin,
.backButton, .endScreenButton {
  transition: transform var(--tap-dur) ease, opacity var(--tap-dur) ease;
  cursor: pointer;
}
button:active, [onclick]:active,
.controlPanelButton:active, .song:active, .avatar:active,
.numpad-key:active, .langbutton:active, .playlist-item:active,
.setting-row:active, .bottom-right-button:active,
.bottom-right-button-admin:active,
.backButton:active, .endScreenButton:active {
  transform: scale(var(--tap-scale));
  opacity: 0.85;
}

/* ── 8. Global Title (JDN+) ───────────────────────────────────── */
.jdnplustitle {
  font-family:    'JDN-Display', sans-serif;
  font-size:      clamp(2.2rem, 7vw, 3rem);
  color:          var(--cyan);
  text-shadow:    0 0 20px var(--cyan-glow), 0 0 40px rgba(23,255,203,0.2);
  text-align:     center;
  padding:        0.5rem 1rem;
  letter-spacing: 0.02em;
  flex-shrink:    0;
}

/* ── 9. Fullscreen Error ──────────────────────────────────────── */
#fullScreenError {
  position:        fixed;
  inset:           0;
  z-index:         99999;
  background:      var(--bg-overlay);
  display:         none;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.5rem;
}
#fullScreenError h2 {
  color:      var(--text);
  text-align: center;
  font-size:  1.2rem;
  padding:    0 2rem;
}

/* ── 10. Login Screen ─────────────────────────────────────────── */
#loginWith {
  background:      url('./imgs/welcome/home_button/Background-2.jpg') center/cover no-repeat, var(--bg);
  justify-content: flex-start;
  padding:         2rem 1.5rem 2rem;
  gap:             1.5rem;
}

.login-help {
  font-family: 'Roboto-JDN';
  font-size:   0.95rem;
  color:       var(--text-dim);
  text-align:  center;
  line-height: 1.5;
}
.login-help.warning { color: var(--red); font-size: 0.85rem; margin-top: -0.5rem; }

.login-section-label {
  font-family:    'Roboto-JDN';
  font-size:      0.85rem;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  align-self:     flex-start;
  margin-bottom: -0.5rem;
}

.login-buttons {
  display:        flex;
  flex-direction: row;
  gap:            1rem;
  width:          100%;
  flex-wrap:      wrap;
  justify-content: center;
}

.login-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.5rem;
  width:           7rem;
  height:          7rem;
  border-radius:   var(--r-lg);
  border:          1.5px solid var(--border);
  background:      var(--grad-card);
  box-shadow:      var(--shadow-card);
  padding:         1rem;
  position:        relative;
  overflow:        hidden;
  /* No outline / background on tap for iOS */
  -webkit-tap-highlight-color: transparent;
}
.login-btn::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--grad-card-h);
  opacity:    0;
  transition: opacity 0.15s;
}
.login-btn:active::before { opacity: 1; }
.login-btn img  { width: 2.8rem; height: 2.8rem; object-fit: contain; position: relative; }
.login-btn span {
  font-family: 'Roboto-JDN';
  font-size:   0.78rem;
  color:       var(--text);
  text-align:  center;
  position:    relative;
}

/* ── 11. Accelerometer Permission ────────────────────────────── */
#accelerometerTrouble {
  gap:             2rem;
  padding:         3rem 2rem;
  justify-content: center;
}
.accelHelp {
  font-family: 'Roboto-JDN';
  font-size:   1.1rem;
  text-align:  center;
  color:       var(--text);
  line-height: 1.6;
  max-width:   18em;
}
.accelImg  { width: 6rem; height: 6rem; object-fit: contain; }
.accelerometerTrouble-button {
  background:    var(--grad-btn);
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  font-weight:   bold;
  padding:       0.8rem 2.5rem;
  border:        none;
  border-radius: var(--r-pill);
  box-shadow:    var(--shadow-glow);
}

/* ── 12. Fullscreen Required ──────────────────────────────────── */
#fullScreenRequired {
  gap:             2rem;
  justify-content: center;
}
.switch-button {
  background:    var(--grad-btn);
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  font-weight:   bold;
  padding:       0.8rem 2.5rem;
  border:        none;
  border-radius: var(--r-pill);
  box-shadow:    var(--shadow-glow);
}

/* ── 13. Loading Screen ───────────────────────────────────────── */
#loading {
  gap:             1.5rem;
  justify-content: center;
  background:      var(--grad-page);
}

.loadingImage {
  width:            7rem;
  height:           7rem;
  display:          block;
  animation:        loadingSpin 0.9s linear infinite !important;
  -webkit-animation: loadingSpin 0.9s linear infinite !important;
  transform-origin: 50% 50% !important;
  -webkit-transform-origin: 50% 50% !important;
  transform-box:    fill-box;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective:       1000px;
  will-change:      transform;
  filter:           drop-shadow(0 0 12px var(--cyan-glow));
}

#loadingStatus {
  font-family: 'Roboto-JDN';
  font-size:   0.9rem;
  color:       var(--text-dim);
  text-align:  center;
  padding:     0 2rem;
  max-width:   20rem;
  line-height: 1.5;
  /* Dark bg so white text is ALWAYS visible */
  background:  rgba(8, 0, 30, 0.75);
  border:      1px solid var(--border);
  border-radius: var(--r-md);
  padding:     0.5rem 1.2rem;
}

/* ── 14. Top Bar (inside songsCatalog) ───────────────────────── */
.topbar {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  height:          var(--topbar-h);
  padding:         0 0.8rem;
  background:      rgba(8, 0, 30, 0.85);
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
  position:        relative;
  z-index:         10;
}

.topbar-left, .topbar-right {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}

/* Leaderboard / trophy icon */
#leaderBoards {
  width:  2rem;
  height: 2rem;
  object-fit: contain;
}

/* Avatar circle in top bar */
#playersAvatarMainPage {
  display:     flex;
  align-items: center;
  gap:         0.4rem;
}
#playersAvatarMainPageIcon {
  width:         2.4rem;
  height:        2.4rem;
  border-radius: 50%;
  border:        2px solid var(--cyan);
  object-fit:    cover;
  background:    var(--bg-2);
  cursor:        pointer;
}

/* Player stats: coins etc. */
.playerStat       { display: flex; flex-direction: column; align-items: flex-start; }
.coinsBox {
  display:         flex;
  align-items:     center;
  gap:             0.25rem;
  min-height:      2rem;
  margin:          0;
  padding:         0.35rem 0.45rem;
  border:          0;
  border-radius:   var(--r-pill);
  background:      rgba(8, 0, 30, 0.34);
  color:           inherit;
  cursor:          pointer;
  -webkit-appearance: none;
  appearance:      none;
}
.coinsBox:active { background: rgba(23, 255, 203, 0.14); }
.coinsIcon        { width: 1rem; height: 1rem; }
#coinsCount       { font-family: 'Roboto-JDN'; font-size: 0.8rem; color: var(--yellow); }

.regenTimerParent {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  width: 100%;
}
.regenTimer       { width: 100%; height: 0.35rem; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; }
.coinsFill        { height: 100%; background: var(--cyan); border-radius: 4px; transition: width 1s linear; }
.coins-scrolling-text {
  display: block;
  margin: 0;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

/* VIP badge */
#vipBadge, .vipBadge, img[src*="vip"] {
  height:        1.6rem;
  width:         auto;
  object-fit:    contain;
}

/* ── 15. Tab Navigation Bar ───────────────────────────────────── */
.controlPanel {
  display:          flex;
  flex-direction:   row;
  align-items:      stretch;
  justify-content:  space-around;
  width:            100%;
  height:           var(--tab-bar-h);
  background:       rgba(8, 0, 30, 0.97);
  border-top:       1px solid var(--border);
  padding-bottom:   var(--safe-bottom);
  position:         absolute;
  bottom:           0;
  left:             0;
  z-index:          50;
  flex-shrink:      0;
}

.controlPanelButton {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  flex:            1;
  gap:             0.18rem;
  padding:         0.3rem 0;
  border:          none;
  background:      transparent;
  border-top:      2px solid transparent;
  transition:      opacity var(--tap-dur), transform 0.14s ease;
}

.controlPanelButton::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 26%;
  right: 26%;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan-glow);
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.controlPanelButton.homePage {
  padding:         0.3rem 0;
  transform:       none;
}

.controlPanelButton img {
  width:     1.5rem;
  height:    1.5rem;
  object-fit: contain;
  filter:    brightness(0.5);
  transition: filter 0.15s, transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.controlPanelButton h2 {
  font-family: 'Roboto-JDN';
  font-size:   0.7rem;
  color:       var(--text-dim);
  transition:  color 0.15s;
  white-space: nowrap;
  line-height: 1;
  margin-top:  0.05rem;
}

/* VIP icon in tab bar must stay at the standard tab-icon size,
   overriding the broad img[src*="vip"] rule */
.controlPanelButton img,
.controlPanelButton #vipStatusIcon,
.controlPanelButton #homeStatusIcon {
  width:      1.5rem !important;
  height:     1.5rem !important;
  object-fit: contain;
}

.controlPanelButton #homeStatusIcon {
  border:  none !important;
  outline: none !important;
  filter:  drop-shadow(0 0 6px rgba(23,255,203,0.22)) brightness(0.72);
}

/* Active tab */
.controlPanelButton.activepage {
  border-top-color: transparent;
}
.controlPanelButton.activepage::before { opacity: 1; transform: scaleX(1); }
.controlPanelButton.activepage img { filter: none; transform: translateY(-1px) scale(1.04); }
.controlPanelButton.activepage h2  { color: var(--cyan); }

.controlPanelButton.locked { filter: blur(1.5px); pointer-events: none; }

body.profile-room-edit-mode .controlPanel {
  display: none !important;
  pointer-events: none !important;
}

.room-task-shortcut {
  position: fixed !important;
  bottom: calc(var(--safe-bottom) + 0.7rem);
  left: 50%;
  z-index: 110 !important;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.7rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--text);
  background: rgba(8, 0, 30, 0.82);
  box-shadow: 0 0.45rem 1.35rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.68rem;
  white-space: nowrap;
}

.room-task-shortcut img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.room-task-shortcut:active {
  transform: translateX(-50%) scale(0.95);
}

/* ── 16. Main App Content Area ────────────────────────────────── */
#songsCatalog {
  position: relative;
  overflow: hidden;
}

/* Inner page containers */
.inpagecontainer {
  display:        flex;
  flex-direction: column;
  width:          100%;
  /* Reserve space for topbar + tab bar */
  height:         calc(100% - var(--topbar-h) - var(--tab-bar-h) - var(--safe-bottom));
  margin-top:     var(--topbar-h);
  overflow:       hidden;
  position:       absolute;
  top:            0;
  left:           0;
}

/* ── 17. Scroll Catalogs ──────────────────────────────────────── */
.scrollCatalog {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  width:          100%;
  overflow-y:     auto;
  padding:        0.5rem 0.5rem var(--content-pb);
  box-sizing:     border-box;
  gap:            0.3rem;
  justify-content: flex-start;
  align-content:  flex-start;
  -webkit-overflow-scrolling: touch;
}

/* ── 18. Song / Avatar Cards ──────────────────────────────────── */
.song, .avatar {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          calc(33.33% - 0.4rem);
  max-width:      7.5rem;
  border-radius:  var(--r-md);
  overflow:       hidden;
  background:     rgba(13, 6, 46, 0.6);
  border:         1px solid transparent;
  transition:     border-color 0.15s, transform var(--tap-dur);
}
.song:active, .avatar:active { border-color: var(--cyan); }

.song-image, .avatar-image {
  width:               100%;
  aspect-ratio:        1 / 1;
  object-fit:          cover;
  display:             block;
  min-height:          0;
  flex:                0 0 auto;
  background-image:    url('./imgs/loading.gif');
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     30%;
  background-color:    rgba(13, 6, 46, 0.8);
  border-radius:       var(--r-md) var(--r-md) 0 0;
  /* Hide browser broken-image [?] icon */
  color:               transparent;
  transition:          opacity 0.2s;
}

.song h2, .avatar h2 {
  font-family:   'Roboto-JDN';
  font-size:     0.62rem;
  color:         var(--text-dim);
  text-align:    center;
  padding:       0.25rem 0.3rem;
  width:         100%;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  line-height:   1.3;
}

.song-title {
  font-family:   'Roboto-JDN', 'Poppins', sans-serif;
  font-size:     0.72rem;
  color:         var(--text);
  width:         100%;
  padding:       0.25rem 0.25rem 0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  line-height:   1.18;
}

.free_cover {
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  z-index: 10;
  display: block;
  max-width: 3rem;
  min-width: 1.8rem;
  padding: 0.08rem 0.18rem;
  border-radius: 4px;
  background: #17ffcb;
  color: #061133;
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  line-height: 0.65rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}

.song-card-fav {
  position: absolute;
  top: 0.18rem;
  right: 0.18rem;
  z-index: 11;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0.22rem;
  border-radius: 50%;
  background: rgba(8, 0, 30, 0.72);
  box-shadow: 0 0 10px rgba(0, 255, 210, 0.28);
  object-fit: contain;
  cursor: pointer;
  filter: none;
  transition: transform var(--tap-dur), background 0.15s, box-shadow 0.15s;
}

.song-card-fav.active {
  background: rgba(244, 33, 147, 0.78);
  box-shadow: 0 0 14px rgba(244, 33, 147, 0.5);
}

.song-card-fav:active {
  transform: scale(0.9);
}

/* Song difficulty bars */
.image-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.song__difficulty {
  position:    absolute;
  bottom:      0.2rem;
  left:        0.2rem;
  display:     flex;
  gap:         2px;
}
.song__difficulty-bar {
  width:         3px;
  border-radius: 2px;
  background:    rgba(255,255,255,0.4);
}
.song__difficulty-bar.filled { background: var(--cyan); }

/* Legacy score nodes stay hidden: records are shown only in the video preview. */
.songScore { position: absolute; bottom: 0.2rem; right: 0.2rem; }
.songScoreStar { display: none; }
.image-container .star-icon { width: 0.9rem; height: 0.9rem; }

.song.selected,
.song-image.selected,
.avatar-image.selected {
  outline: 3px solid var(--pink);
  outline-offset: -3px;
}

.song.selected {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(244, 33, 147, 0.25), 0 0 16px rgba(244, 33, 147, 0.34);
}

.song-image.selected {
  outline: none;
}

.avatar-image.selected {
  outline: none !important;
  filter: brightness(1.08) drop-shadow(0 0 12px var(--cyan-glow));
}

.avatar.selected-avatar {
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(244, 33, 147, 0.35), 0 0 16px rgba(244, 33, 147, 0.35);
  background: rgba(244, 33, 147, 0.12);
}

/* VIP locked overlay */
.song.vip-locked .song-image { filter: blur(0.3rem) brightness(0.6); }

/* ── 19. Preview Panel ────────────────────────────────────────── */
.preview, .playlist-preview, #playlist-preview-itself {
  display:        flex;
  flex-direction: column;
  width:          100%;
  background:     linear-gradient(180deg, rgba(8,0,30,0.98) 0%, rgba(13,6,46,0.92) 100%);
  border-bottom:  1px solid var(--border);
  padding:        0.45rem 0.8rem 0.5rem;
  gap:            0.32rem;
  position:       relative;
  flex-shrink:    0;
  animation:      slideDown 0.18s ease both;
}

#preview.preview {
  position: absolute;
  top:      var(--topbar-h);
  left:     0;
  z-index:  25;
  height:   var(--preview-h);
}

#songsCatalog.preview-active #scrollCatalog.inpagecontainer {
  margin-top: 0;
  top:        calc(var(--topbar-h) + var(--preview-h));
  height:     calc(100% - var(--topbar-h) - var(--preview-h) - var(--tab-bar-h) - var(--safe-bottom));
}

/* Cover-to-video preview */
.preview-media {
  position:      relative;
  width:         min(100%, 34rem);
  aspect-ratio:  16 / 9;
  height:        auto;
  max-height:    11.8rem;
  overflow:      hidden;
  border-radius: var(--r-md);
  background:    #000 url('./imgs/loading.gif') center/2.2rem no-repeat;
  align-self:    center;
}

.preview-video,
.preview-cover {
  position:      absolute;
  inset:         0;
  display:       block;
  width:         100%;
  height:        100%;
  object-fit:    cover;
}

.preview-video {
  z-index:    1;
  background: #000;
}

.preview-cover {
  z-index:        2;
  opacity:        1;
  visibility:     visible;
  background:     #08001e url('./imgs/loading.gif') center/2.2rem no-repeat;
  transition:     opacity 0.5s ease, visibility 0s linear 0s;
  pointer-events: none;
}

.preview-cover.is-hidden {
  opacity:    0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

.preview-cover.is-resetting {
  transition: none !important;
}

.preview-cover.is-switching {
  transition: opacity 0.24s cubic-bezier(0.2, 0.72, 0.25, 1), visibility 0s linear 0s;
}

.preview-cover.is-switching.is-hidden {
  transition: opacity 0.24s cubic-bezier(0.2, 0.72, 0.25, 1), visibility 0s linear 0.24s;
}

/* Overlay on video (score, stars, play button) */
.previewhelper, .previewhelper-2 {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  padding:         0 0.2rem;
  gap:             0.3rem;
}

.previewhelper {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0.68rem;
  left: 0.72rem;
  z-index: 4;
  width: auto;
  padding: 0;
  justify-content: flex-start;
  pointer-events: none;
}

.previewhelper > .song-preview__song__difficulty,
.previewhelper > .playlist-song-preview__song__difficulty {
  display: none;
}

.previewhelper .previewscoredata {
  min-height: 1.8rem;
  padding: 0.25rem 0.42rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(8, 0, 30, 0.84);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(5px);
}

.previewhelper-2 {
  position: absolute;
  top:      0.7rem;
  left:     0.9rem;
  right:    0.9rem;
  z-index:  5;
  pointer-events: none;
}

/* Song meta */
.preview-meta {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            0.12rem;
  flex:           1;
  overflow:       hidden;
}

.preview-title {
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  font-weight:   bold;
  color:         rgba(255,255,255,0.96);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  width:         100%;
  min-width:     0;
}

.preview-subline {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.preview-artist {
  font-family:   'Roboto-JDN';
  font-size:     0.78rem;
  color:         var(--text-dim);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  width:         100%;
  min-width:     0;
}

.preview-difficulty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1rem;
  padding: 0.08rem 0.38rem;
  border-radius: var(--r-pill);
  font-family: 'Roboto-JDN';
  font-size: 0.58rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #08001E;
  background: transparent;
  flex-shrink: 0;
}
.preview-difficulty:empty { display: none; }
.preview-difficulty.easy { background: #38d66b; }
.preview-difficulty.medium { background: #ff9f25; }
.preview-difficulty.hard { background: #ff4747; color: #fff; }

.preview-controls {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  justify-content: space-between;
  gap:            0.45rem;
  width:          min(100%, 34rem);
  align-self:     center;
}

/* Score in preview */
#previewscore, #playlist-previewscore {
  font-family: 'Roboto-JDN';
  font-size:   0.85rem;
  color:       var(--text-dim);
}

/* Stars row in preview */
#previewScoreStars, #playlist-previewScoreStars {
  display:     flex;
  flex-direction: row;
  align-items: center;
  gap:         0.1rem;
}
.previewStar {
  width:     1.2rem;
  height:    1.2rem;
  filter:    drop-shadow(0 0 3px rgba(255,215,0,0.6));
}
.previewStar.preview-star-super {
  filter: drop-shadow(0 0 4px rgba(70, 215, 255, 0.9));
}
.previewStar.preview-star-mega {
  filter: drop-shadow(0 0 4px rgba(255, 43, 221, 0.92));
}

/* Танцевать / Dance button */
.previewDanceBtn {
  background:    linear-gradient(135deg, var(--cyan), var(--blue));
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     0.9rem;
  font-weight:   bold;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.55rem 1.4rem;
  white-space:   nowrap;
  box-shadow:    var(--shadow-glow);
  flex-shrink:   0;
}

/* Fav button */
.favBtn {
  background:    none;
  border:        none;
  padding:       0.3rem;
}
.favBtn img { width: 1.4rem; height: 1.4rem; }

/* ── 20. Connect Room Window ──────────────────────────────────── */
.connectToRoomWindow {
  position:        fixed;
  inset:           0;
  z-index:         300;
  background:      rgba(1, 9, 43, 0.97);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1rem;
  animation:       pageIn 0.18s ease both;
}

/* Wrong room / Loading room overlays */
#wrongRoom, #loadingRoom {
  position:        fixed;
  inset:           0;
  z-index:         400;
  background:      rgba(1, 9, 43, 0.97);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.5rem;
}
#wrongRoom h2  { color: var(--red); font-size: 1.1rem; text-align: center; }
#loadingRoom h2 { color: var(--text-dim); font-size: 1rem; }

/* Room code display */
.roomCodeDisplay {
  display:     flex;
  flex-direction: row;
  gap:         0.5rem;
  align-items: center;
  justify-content: center;
}
.roomCodeDisplay h2 {
  font-family:    'JDN-Display';
  font-size:      3rem;
  color:          var(--cyan);
  text-shadow:    var(--shadow-glow);
  letter-spacing: 0.15em;
  min-width:      1em;
  text-align:     center;
}

/* Numpad */
.numpad-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.6rem;
  width:                 min(80vw, 16rem);
}
.numpad-key {
  aspect-ratio:    1 / 1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     'Roboto-JDN';
  font-size:       1.4rem;
  font-weight:     bold;
  color:           var(--text);
  background:      var(--grad-card);
  border:          1.5px solid var(--border);
  border-radius:   var(--r-md);
  box-shadow:      var(--shadow-card);
}
.numpad-key.delete-key { color: var(--red); font-size: 1rem; }
.numpad-key.ok-key     { background: linear-gradient(135deg, var(--cyan-dim), rgba(55,132,249,0.4)); border-color: var(--cyan); }

/* ── 21. Floating Connect / Leave Button ──────────────────────── */
.controlButtons {
  position:  fixed;
  right:     0;
  bottom:    calc(var(--tab-bar-h) + var(--safe-bottom) + 0.8rem);
  z-index:   200;
  display:   flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:       0.5rem;
}

.bottom-right-button,
.bottom-right-button-admin {
  display:                   flex;
  flex-direction:            row;
  align-items:               center;
  justify-content:           center;
  gap:                       0.4rem;
  padding:                   0.7rem 1rem 0.7rem 1.2rem;
  background:                linear-gradient(135deg, #1FFB81, #17c96a);
  color:                     #08001E;
  font-family:               'Roboto-JDN';
  font-size:                 0.85rem;
  font-weight:               bold;
  border:                    none;
  border-radius:             var(--r-pill) 0 0 var(--r-pill);
  box-shadow:                0 3px 16px rgba(31, 251, 129, 0.4);
  white-space:               nowrap;
  min-width:                 8rem;
}

.bottom-right-button > div,
.bottom-right-button-admin > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

.bottom-right-button:active,
.bottom-right-button-admin:active {
  transform: scale(0.95);
  opacity:   0.9;
}

.bottom-right-button-icon,
.bottom-right-button-admin-icon {
  width:     1.5rem;
  height:    1.5rem;
  object-fit: contain;
  flex-shrink: 0;
}

.bottom-right-button-admin-label {
  font-size:  0.82rem;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-width:  6rem;
  line-height: 1.2;
}

/* Leave button (connected state — red) */
.bottom-right-button-admin {
  background: linear-gradient(135deg, #FF4747, #cc2222);
  box-shadow: 0 3px 16px rgba(255, 71, 71, 0.4);
  color:      white;
}

/* ── 22. Playlists Tab ────────────────────────────────────────── */
.playlist-scrollCatalog,
#playlist-scrollCatalog {
  display:        flex;
  flex-direction: column;
  width:          100%;
  overflow-y:     auto;
  padding:        0.5rem 0.8rem var(--content-pb);
  gap:            0.5rem;
  -webkit-overflow-scrolling: touch;
}

/* Featured (horizontal) playlist */
.horizontalPlaylistParent {
  position:      relative;
  display:       flex;
  width:         100%;
  min-height:    7.2rem;
  border-radius: var(--r-md);
  overflow:      hidden;
  background:    rgba(13, 6, 46, 0.72);
  border:        1px solid var(--border);
  box-shadow:    var(--shadow-card);
  margin-bottom: 0.5rem;
}

.horizontalPlaylistParent img {
  width:      100%;
  height:     7.2rem;
  object-fit: cover;
  display:    block;
}

.horizontalPlaylistParent h2 {
  position:    absolute;
  left:        0;
  right:       0;
  bottom:      0;
  padding:     1.4rem 0.7rem 0.45rem;
  background:  linear-gradient(transparent, rgba(8,0,30,0.92));
  font-family: 'Roboto-JDN';
  font-size:   0.9rem;
  color:       var(--text);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontalPlaylistItem {
  position:      relative;
  width:         100%;
  border-radius: var(--r-lg);
  overflow:      hidden;
  cursor:        pointer;
}
.horizontalPlaylistItem img {
  width:      100%;
  height:     8rem;
  object-fit: cover;
  display:    block;
}
.horizontalPlaylistItem h2 {
  position:    absolute;
  bottom:      0;
  left:        0;
  right:       0;
  padding:     0.4rem 0.7rem;
  background:  linear-gradient(transparent, rgba(8,0,30,0.9));
  font-family: 'Roboto-JDN';
  font-size:   0.9rem;
  color:       var(--text);
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Vertical playlist grid */
.verticalPlaylistParent,
.verticalPlaylistLastParent {
  position:       relative;
  display:        flex;
  flex-direction: column;
  width:          calc(33.33% - 0.4rem);
  max-width:      7.5rem;
  border-radius:  var(--r-md);
  overflow:       hidden;
  background:     rgba(13, 6, 46, 0.72);
  border:         1px solid var(--border);
  min-width:      0;
}

.verticalPlaylistParent img,
.verticalPlaylistLastParent img {
  width:       100%;
  aspect-ratio: 336 / 420;
  object-fit:  cover;
  display:     block;
  background:  rgba(13, 6, 46, 0.8);
}

.verticalPlaylistParent h2,
.verticalPlaylistLastParent h2 {
  font-family:   'Roboto-JDN';
  font-size:     0.62rem;
  color:         var(--text);
  padding:       0.3rem 0.35rem;
  line-height:   1.25;
  min-height:    2.1rem;
  overflow:      hidden;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.playlist-item {
  display:        flex;
  flex-direction: column;
  width:          calc(33.33% - 0.5rem);
  border-radius:  var(--r-md);
  overflow:       hidden;
  background:     rgba(13, 6, 46, 0.7);
  border:         1px solid var(--border);
}
.playlist-item img {
  width:       100%;
  aspect-ratio: 1 / 1;
  object-fit:  cover;
}
.playlisttitle {
  font-family:   'Roboto-JDN';
  font-size:     0.65rem;
  color:         var(--text);
  padding:       0.25rem 0.3rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.playlistdesc {
  font-family:         'Roboto-JDN';
  font-size:           0.58rem;
  color:               var(--text-dim);
  padding:             0 0.3rem 0.3rem;
  overflow:            hidden;
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  line-height:         1.4;
}

/* Playlist inner catalog (inside a playlist) */
.playlist-inview {
  display:        flex;
  flex-direction: column;
  width:          100%;
  height:         100%;
  overflow:       hidden;
}
.playlist-info {
  flex-shrink:    0;
  padding:        0.5rem 0.8rem;
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  border-bottom:  1px solid var(--border);
}
.playlist-info h2 {
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  color:         var(--text);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.playlist-info p, .playlist-info h3 {
  font-family:   'Roboto-JDN';
  font-size:     0.75rem;
  color:         var(--text-dim);
  overflow:      hidden;
  display:       -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── 23. Settings Tab ─────────────────────────────────────────── */
/* #settingsPage uses .inpagecontainer (position: absolute) and just hosts
   the four .settingContainer panels.  Each panel scrolls independently;
   #settingsPage itself doesn't scroll. */
#settingsPage {
  align-items: stretch;
  padding:     0;
}

/* settingContainer: only ONE is visible at a time (controlled by JS
   display:flex/none).  Each takes the full inpage area. */
.settingContainer {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.4rem;
}

/* Main settings page — no back button, normal top padding */
.mainSettingsPage {
  padding:    0.8rem 0.8rem var(--content-pb);
  gap:        0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-header {
  font-family:    'JDN-Display';
  font-size:      1.3rem;
  color:          var(--cyan);
  text-align:     center;
  margin-bottom:  1rem;
  text-shadow:    0 0 12px var(--cyan-glow);
}

.setting-row {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         0.85rem 1.1rem;
  background:      var(--grad-card);
  border:          1px solid var(--border);
  border-radius:   var(--r-md);
  margin-bottom:   0.4rem;
  gap:             0.5rem;
}
.setting-row:active { background: var(--grad-card-h); }

.setting-row-label {
  font-family: 'Roboto-JDN';
  font-size:   0.95rem;
  color:       var(--text);
  flex:        1;
}
.setting-row-icon {
  width:   1.1rem;
  height:  1.1rem;
  opacity: 0.5;
  flex-shrink: 0;
}

.setting-version {
  font-family: 'Roboto-JDN';
  font-size:   0.72rem;
  color:       var(--text-muted);
  text-align:  center;
  margin-top:  1rem;
}

/* Dancer card (profile editor) */
.dancerCard {
  background:    var(--grad-card);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       1rem;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           0.7rem;
  width:         min(90%, 18rem);
  box-shadow:    var(--shadow-card);
  margin-bottom: 1rem;
}
.dancerCard img {
  width:         7rem;
  height:        7rem;
  border-radius: 50%;
  border:        none;
  object-fit:    cover;
  box-shadow:    none;
}
.dancerCard input {
  background:    rgba(23, 255, 203, 0.1);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  text-align:    center;
  padding:       0.5rem 1rem;
  width:         14rem;
  outline:       none;
}
.dancerCard input:focus {
  border-color: var(--border);
  box-shadow:   none;
}

/* Avatars catalog (profile edit) */
.avatarsScrollCatalog,
.profile-items-catalog {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  width:          100%;
  overflow-y:     auto;
  padding:        0.5rem;
  gap:            0.4rem;
  justify-content: flex-start;
  max-height:     60vh;
  -webkit-overflow-scrolling: touch;
}

.profile-item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: calc(33.33% - 0.4rem);
  max-width: 7.5rem;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: rgba(13, 6, 46, 0.72);
  color: var(--text);
  font: inherit;
  text-align: center;
  transition:
    transform var(--tap-dur) ease,
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.profile-item-image-wrap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(13, 6, 46, 0.8);
}

.profile-item-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-image: url('./imgs/loading.gif');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30%;
  color: transparent;
}

.profile-item-title {
  display: block;
  width: 100%;
  padding: 0.32rem 0.3rem;
  overflow: hidden;
  color: var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.6rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-item-card.selected-profile-item {
  border-color: var(--pink);
  background: rgba(244, 33, 147, 0.12);
  box-shadow: 0 0 0 2px rgba(244, 33, 147, 0.3), 0 0 16px rgba(244, 33, 147, 0.28);
}

.profile-item-card.profile-item-target,
.avatar.profile-item-target {
  z-index: 2;
  outline: 2px solid #ffd36a;
  outline-offset: 2px;
  scroll-margin: 4rem;
  animation: profileRewardTarget 0.72s ease-in-out 2;
}

@keyframes profileRewardTarget {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 211, 106, 0); }
  50% { transform: scale(1.045); box-shadow: 0 0 20px rgba(255, 211, 106, 0.48); }
}

.profile-item-card.locked-profile-item .profile-item-image {
  filter: blur(0.22rem) brightness(0.48);
}

.profile-item-card-text {
  width: calc(50% - 0.25rem);
  max-width: none;
  min-height: 3.2rem;
  justify-content: center;
  padding: 0.2rem;
}

.profile-item-card-text .profile-item-title {
  padding: 0.65rem 0.45rem;
  color: var(--text);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: normal;
}

.profile-item-card-text.locked-profile-item {
  opacity: 0.42;
}

.profile-item-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  text-shadow: 0 2px 8px #000;
}

.profile-items-empty {
  width: 100%;
  padding: 2rem 1rem;
  color: var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.78rem;
  text-align: center;
}

/* Language settings */
.langsScrollCatalog {
  display:        flex;
  flex-direction: column;
  width:          100%;
  gap:            0.4rem;
  padding:        1rem;
}
.langbutton {
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           0.55rem;
  padding:       0.8rem 1.2rem;
  background:    var(--grad-card);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  color:         var(--text);
  text-align:    center;
}
.langbutton:active { background: var(--grad-card-h); border-color: var(--cyan); }

.lang-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
}

/* Credits */
.scrollCreditsCatalog {
  display:        flex;
  flex-direction: column;
  width:          100%;
  overflow-y:     auto;
  padding:        1rem;
  gap:            0.5rem;
  -webkit-overflow-scrolling: touch;
}
.vipStatusLabel {
  font-family:  'Roboto-JDN';
  font-size:    0.85rem;
  color:        var(--purple);
  text-align:   center;
}
.vipStatusLine {
  height:     1px;
  width:      100%;
  background: var(--border);
  margin:     0.15rem 0;
}
.vipNotify {
  font-family: 'Roboto-JDN';
  font-size:   0.85rem;
  color:       var(--text-dim);
  text-align:  center;
}

/* Logout confirm window */
.leaveAccountWindow {
  position:        fixed;
  inset:           0;
  z-index:         500;
  background:      var(--bg-overlay);
  display:         none;
  align-items:     center;
  justify-content: center;
}
.areYouSureWindow {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       2rem;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.5rem;
  box-shadow:    var(--shadow-deep);
}
.areYouSureWindowLabel {
  font-family: 'Roboto-JDN';
  font-size:   1.1rem;
  color:       var(--text);
  text-align:  center;
}
.confirmButtons {
  display: flex;
  gap:     1.5rem;
}
.confirmButtons img { width: 3.5rem; height: 3.5rem; }

/* ── 24. VIP Tab ──────────────────────────────────────────────── */
.vipPage {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  height:         100%;
  overflow-y:     auto;
  padding:        1rem 1rem var(--content-pb);
  gap:            1rem;
  -webkit-overflow-scrolling: touch;
}

#activateSubscription,
#activateSubscription_2 {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  width:          100%;
}

/* ── 25. Back Button ──────────────────────────────────────────── */
.backButton {
  position:        fixed;
  top:             calc(var(--topbar-h) + 0.5rem);
  left:            0.5rem;
  z-index:         100;
  width:           2.4rem;
  height:          2.4rem;
  border-radius:   50%;
  background:      var(--bg-card);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-card);
}
.backButton img { width: 1.2rem; height: 1.2rem; object-fit: contain; }

/* ── 26. In-Dance HUD ─────────────────────────────────────────── */
#selectionCoach,
#inDance,
#afterDance {
  background:      #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow:        hidden;
}

#inDance {
  justify-content: flex-start;
}

.motion-sensor-warning {
  position: fixed !important;
  top: calc(var(--safe-top) + 0.75rem);
  left: 50%;
  z-index: 80 !important;
  width: min(calc(100vw - 1.5rem), 32rem);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem 0.8rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 192, 53, 0.75);
  border-radius: var(--r-lg);
  background: rgba(24, 9, 45, 0.96);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.48), 0 0 18px rgba(255, 192, 53, 0.18);
  pointer-events: auto;
}

.motion-sensor-warning.inactive {
  display: none !important;
}

.motion-sensor-warning > img {
  width: 2.8rem;
  height: 2.8rem;
  object-fit: contain;
}

.motion-sensor-warning__copy {
  min-width: 0;
  color: #fff;
  font-family: 'Roboto-JDN', sans-serif;
}

.motion-sensor-warning__copy strong,
.motion-sensor-warning__copy span {
  display: block;
  overflow-wrap: anywhere;
}

.motion-sensor-warning__copy strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

.motion-sensor-warning__copy span {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  line-height: 1.3;
}

.motion-sensor-warning button {
  grid-column: 1 / -1;
  min-height: 2.45rem;
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #ffb52f, #ff7a2f);
  color: #160726;
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.motion-sensor-warning button:disabled {
  opacity: 0.55;
}

#selectionCoach::before,
#inDance::before,
#afterDance::before {
  content: "";
  position: absolute;
  inset: -1.2rem;
  background: inherit;
  filter: blur(8px) brightness(0.7);
  transform: scale(1.04);
  z-index: 0;
}

#selectionCoach > *,
#inDance > *,
#afterDance > * {
  position: relative;
  z-index: 1;
}

.playerBarParent {
  display:         flex;
  flex-direction:  row;
  align-items:     flex-end;
  width:           100%;
  position:        relative;
  flex:            1;          /* fill remaining height in #inDance flex column */
  min-height:      0;
  pointer-events:  none; /* transparent to touch — dance uses accelerometer */
}

/* Left pill: avatar + colour */
.playerBar {
  position:         absolute;
  top:              calc(var(--safe-bottom) + 3.2rem);
  left:             0;
  height:           4rem;
  min-width:        5rem;
  border-bottom-right-radius: var(--r-xl);
  border-top-right-radius:    0;
  display:          flex;
  align-items:      center;
  flex-direction:   row;
  padding:          0 1rem 0 0.5rem;
  z-index:          10;
}
.playerBar img { width: 3rem; height: 3rem; border-radius: 50%; border: none; }
.playerBar h2  { color: white; font-size: 0.7rem; margin-left: 0.4rem; white-space: nowrap; }

/* Score bar (right side) */
.starbar {
  position:         absolute;
  right:            0.8rem;
  bottom:           7.1rem;
  width:            3.1rem;
  height:           min(18rem, 55vh);
  max-height:       55vh;
  display:          flex;
  flex-direction:   column-reverse;
  justify-content:  flex-start;
  border-radius:    var(--r-md);
  overflow:         hidden;
  background:       rgba(255,255,255,0.12);
  border:           1px solid rgba(255,255,255,0.25);
  z-index:          10;
}

.racetrack {
  width:              100%;
  height:             0%;
  background:         var(--cyan);
  border-radius:      var(--r-md) var(--r-md) 0 0;
  transition:         height 0.4s ease-out;
  animation:          starbarFill 0.5s ease;
  box-shadow:         0 0 10px var(--cyan-glow);
}

/* Stars on the score bar */
.stars {
  position:       absolute;
  inset:          0;
  display:        block;
  pointer-events: none;
}
.stars img {
  position: absolute;
  left:     50%;
  width:    1.55rem;
  transform: translate(-50%, 50%);
  filter:  drop-shadow(0 0 4px rgba(255,215,0,0.8));
}
.stars img:nth-child(1) { bottom: 15%; }
.stars img:nth-child(2) { bottom: 30%; }
.stars img:nth-child(3) { bottom: 45%; }
.stars img:nth-child(4) { bottom: 60%; }
.stars img:nth-child(5) { bottom: 75%; }

/* Coach image (center) */
.danceCoach {
  position:            absolute;
  left:                50%;
  transform:           translateX(-50%);
  bottom:              5.8rem;
  width:               min(86vw, 27rem);
  height:              min(86vw, 27rem);
  background-image:    none;
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     20%;
  object-fit:          contain;
}
.danceCoach img, .danceCoach video {
  width:   100%;
  height:  100%;
  object-fit: contain;
}

.coach { display: flex; align-items: flex-end; justify-content: center; }
.coach.inactive { display: none !important; }

/* Tutorial text */
.tutorialTextParent {
  position:   absolute;
  bottom:     calc(var(--safe-bottom) + 1.2rem);
  left:       50%;
  right:      auto;
  transform:  translateX(-50%);
  width:      min(calc(100vw - 3rem), 26rem);
  max-width:  calc(100vw - 3rem);
  text-align: center;
  z-index:    5;
  pointer-events: none;
}
.tutorialText {
  font-family: 'Roboto-JDN';
  font-size:   0.9rem;
  color:       rgba(255,255,255,0.6);
  background:  rgba(0,0,0,0.5);
  border-radius: var(--r-md);
  padding:     0.45rem 0.8rem;
  display:     flex;
  align-items: center;
  justify-content: center;
  max-width:   100%;
  width:       100%;
  box-sizing:  border-box;
  overflow-wrap: break-word;
}

/* ── 27. After Dance (Results) Screen ────────────────────────── */
#afterDance {
  justify-content: flex-start;
  overflow-y:      auto;
  padding:         calc(var(--safe-bottom) + 1.3rem) 0 calc(var(--safe-bottom) + 1.1rem);
  gap:             0.9rem;
  -webkit-overflow-scrolling: touch;
}

/* Congratulations banner */
.endScreenCongrats {
  display:                    flex;
  flex-direction:             row;
  align-items:                center;
  justify-content:            flex-start;
  width:                      calc(100% - 2rem);
  margin:                     0 auto;
  padding:                    0.7rem 1.5rem;
  background:                 linear-gradient(90deg, #17FFCB, #3784F9);
  border-radius:              var(--r-pill);
  animation:                  bounceIn 0.4s ease both;
}
.endScreenCongrats h2 {
  font-family: 'JDN-Display';
  font-size:   1.1rem;
  color:       #08001E;
}

.afterDanceSongMeta {
  width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-md);
  background: rgba(8, 0, 30, 0.58);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.afterDanceSongMeta img {
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-md);
  object-fit: cover;
  flex: 0 0 auto;
  background: rgba(13, 6, 46, 0.75) url('./imgs/loading.gif') center/35% no-repeat;
}

.afterDanceSongText {
  min-width: 0;
  flex: 1;
}

.afterDanceSongMeta h2 {
  font-family: 'Roboto-JDN', 'Evolventa', sans-serif;
  font-size: 1rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afterDanceSongMeta h3 {
  font-family: 'Roboto-JDN', 'Evolventa', sans-serif;
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Player row: avatar pill + name + score */
.endScreenPlayerBar {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  width:          100%;
  gap:            0.8rem;
  padding-right:  1rem;
}

.playerBarAfterDance {
  height:                     4rem;
  border-radius:              0 var(--r-xl) var(--r-xl) 0;
  display:                    flex;
  align-items:                center;
  padding:                    0 1.2rem 0 0.5rem;
  flex-shrink:                0;
  min-width:                  min(32vw, 8.5rem);
}
#danceAvatarAfterDance {
  width:         3.5rem;
  height:        3.5rem;
  border-radius: 50%;
  border:        none;
  object-fit:    cover;
}
.playerBarAfterDance h2 {
  font-family: 'Roboto-JDN';
  font-size:   0.75rem;
  color:       white;
  white-space: nowrap;
  margin-left: 0.5rem;
}

/* Score block */
.scoreResult {
  display:        flex;
  flex-direction: column;
  justify-content: center;
  flex:            1;
  min-width:       0;
  gap:             0.15rem;
  align-items:     center;
  min-height:      4rem;
  padding:         0.35rem 0.5rem;
  border-radius:   var(--r-md);
  background:      rgba(8, 0, 30, 0.42);
  border:          1px solid rgba(255,255,255,0.08);
}
.scoreResult h2 {
  font-family:   'JDN-Display';
  font-size:     1.6rem;
  color:         var(--cyan);
  text-shadow:   0 0 10px var(--cyan-glow);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  text-align:    center;
}
.scoreResulth2 { color: var(--pink) !important; }

/* Stars row */
.starsAfterDance {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: center;
  gap:             0.3rem;
  width:           100%;
  padding:         0.3rem 0;
}
.starsAfterDance img {
  width:   2rem;
  height:  2rem;
  filter:  drop-shadow(0 0 5px rgba(255, 215, 0, 0.7));
}

/* New avatar unlock banner */
.newAvatarBox {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  justify-content: center;
  width:          100%;
  padding:        0.8rem;
  background:     linear-gradient(135deg, #F42193, #A96AFF);
  border-radius:  var(--r-lg);
  gap:            0.8rem;
  animation:      bounceIn 0.45s 0.3s ease both;
  opacity:        0;
  animation-fill-mode: both;
}
.newAvatarBoxLabel {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  flex:            1;
}
.newAvatarLabel {
  font-family: 'Roboto-JDN';
  font-size:   0.85rem;
  color:       white;
}
#newAvatar {
  width:         4rem;
  height:        4rem;
  border-radius: 50%;
  border:        none;
  object-fit:    cover;
  animation:     bounceIn 0.5s 0.5s ease both;
}

.after-dance-completed-tasks {
  width: calc(100% - 2rem);
  margin: 0 auto;
  padding: 0.75rem;
  border: 1px solid rgba(23, 255, 203, 0.48);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(23, 255, 203, 0.16), rgba(91, 72, 255, 0.18));
  box-shadow: 0 0 18px rgba(23, 255, 203, 0.12);
  animation: bounceIn 0.45s 0.2s ease both;
}

.after-dance-completed-tasks.inactive {
  display: none !important;
}

.after-dance-completed-tasks__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.after-dance-completed-tasks__header img {
  width: 2.3rem;
  height: 2.3rem;
  object-fit: contain;
}

.after-dance-completed-tasks__header h2 {
  color: var(--cyan);
  font-family: 'JDN-Display', 'Roboto-JDN', sans-serif;
  font-size: 0.95rem;
}

.after-dance-completed-tasks__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.after-dance-task-card {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  background: rgba(8, 0, 30, 0.52);
}

.after-dance-task-title {
  color: var(--text);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.76rem;
  line-height: 1.3;
}

.after-dance-task-rewards-label {
  color: var(--text-dim);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.56rem;
  text-transform: uppercase;
}

.after-dance-task-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.after-dance-task-rewards .task-reward {
  flex: 1 1 7rem;
  max-width: none;
}

/* Result action buttons (Repeat / Menu) */
.endScreenButton {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.3rem;
  width:           5.8rem;
  height:          5.8rem;
  border-radius:   50%;
  background:      var(--grad-card);
  border:          1.5px solid var(--border);
  box-shadow:      var(--shadow-card);
}
.endScreenButton img { width: 2.45rem; height: 2.45rem; }
.endScreenButton h2  { font-family: 'Roboto-JDN'; font-size: 0.72rem; color: var(--text); }

.endScreenButtons {
  display:         flex;
  flex-direction:  row;
  justify-content: center;
  gap:             1.5rem;
  width:           100%;
  margin-top:      auto;
  padding-top:     1rem;
  padding-bottom:  calc(var(--safe-bottom) + 0.4rem);
}

/* ── 28. Profile Creation Screen ──────────────────────────────── */
#profileCreation {
  gap:             1rem;
  padding:         1rem 1rem var(--content-pb);
  overflow-y:      auto;
  -webkit-overflow-scrolling: touch;
}

.profileCreationTitle {
  font-family: 'JDN-Display';
  font-size:   1.4rem;
  color:       var(--cyan);
  text-align:  center;
  text-shadow: 0 0 12px var(--cyan-glow);
}

.profileNextBtn {
  background:    var(--grad-btn);
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     1.1rem;
  font-weight:   bold;
  padding:       0.8rem 3rem;
  border:        none;
  border-radius: var(--r-pill);
  box-shadow:    var(--shadow-glow);
  animation:     glowPulse 2s ease-in-out infinite;
}

/* ── 29. Misc UI elements ─────────────────────────────────────── */

/* Generic modal confirm window */
.areYouSureWindow {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--r-xl);
  padding:       2rem 1.5rem;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           1.5rem;
  max-width:     20rem;
  width:         90%;
}

/* Coin regen progress bar */
.regenTimer      { width: 100%; height: 0.3rem; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.coinsFill       { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); border-radius: 4px; }
.coins-scrolling-text {
  font-family: 'Roboto-JDN';
  font-size:   0.65rem;
  color:       var(--text-muted);
}

/* VIP Pass mini badge */
.vipPassMini { height: 1.5rem; width: auto; }

/* News items */
.newsItem {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  padding:        0.8rem;
  background:     var(--grad-card);
  border:         1px solid var(--border);
  border-radius:  var(--r-md);
}
.newsItem h2 { font-family: 'Roboto-JDN'; font-size: 0.9rem; color: var(--text); }
.newsItem p  { font-family: 'Roboto-JDN'; font-size: 0.75rem; color: var(--text-dim); line-height: 1.5; }

/* Move feedback (during dance) */
.playerFeedback {
  position:        absolute;
  left:            50%;
  top:             30%;
  transform:       translate(-50%, -50%);
  font-family:     'JDN-Display';
  font-size:       2rem;
  color:           var(--yellow);
  text-shadow:     0 0 20px rgba(255,247,23,0.7);
  pointer-events:  none;
  animation:       scoreCount 0.3s ease both;
  z-index:         20;
}

/* Scrolling text */
@keyframes scroll-text {
  0%   { transform: translateX(110%); }
  100% { transform: translateX(-110%); }
}
.scrolling-text {
  overflow:   hidden;
  width:      100%;
  white-space: nowrap;
}
.scrolling-text span {
  display:           inline-block;
  animation:         scroll-text 8s linear infinite;
  font-family:       'Roboto-JDN';
  font-size:         0.75rem;
  color:             var(--text-dim);
}

/* VIP subscribe button */
.vip-subscribe-btn {
  background:    linear-gradient(135deg, var(--yellow), var(--orange));
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  font-weight:   bold;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.8rem 2rem;
  box-shadow:    0 3px 16px rgba(255, 215, 0, 0.4);
}

/* Landscape warning (full overlay) */
.orientation-warning {
  display: none;
}

@media only screen and (orientation: landscape) {
  body.mobile-mode .orientation-warning {
    position:        fixed;
    inset:           0;
    z-index:         999999;
    background:      var(--bg);
    color:           var(--text-dim);
    font-family:     'Roboto-JDN';
    font-size:       1rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         2rem;
  }
}

body.pc-mode .orientation-warning {
  display: none !important;
}

/* Activation input for VIP */
.vipActivationInput {
  background:    rgba(23, 255, 203, 0.08);
  border:        1.5px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  padding:       0.6rem 1rem;
  text-align:    center;
  width:         min(90%, 16rem);
  outline:       none;
}
.vipActivationInput:focus { border-color: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }

/* Generic primary button */
.btn-primary {
  background:    var(--grad-btn);
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     0.95rem;
  font-weight:   bold;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.7rem 2rem;
  box-shadow:    var(--shadow-glow);
}
.btn-danger {
  background:    linear-gradient(135deg, var(--red), #cc2222);
  color:         white;
  font-family:   'Roboto-JDN';
  font-size:     0.9rem;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.65rem 1.8rem;
}

/* Difficulty labels */
.difficulty-label {
  font-family:    'Roboto-JDN';
  font-size:      0.65rem;
  color:          var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Lock overlay (for locked VIP songs) */
.lock-overlay {
  position:       absolute;
  inset:          0;
  background:     rgba(8, 0, 30, 0.65);
  border-radius:  inherit;
  display:        flex;
  align-items:    center;
  justify-content: center;
}
.lock-overlay img { width: 2rem; opacity: 0.8; }

/* ── 30. Utility classes ──────────────────────────────────────── */
.text-cyan   { color: var(--cyan);  }
.text-pink   { color: var(--pink);  }
.text-dim    { color: var(--text-dim); }
.text-center { text-align: center;  }
.w-full      { width: 100%;         }
.mt-auto     { margin-top: auto;    }
.hidden      { display: none !important; }

/* Font helper classes */
.font-jdn  { font-family: 'JDN-Display', sans-serif; }
.font-body { font-family: 'Roboto-JDN', sans-serif;  }

/* Loc-id elements: invisible until text set by JS */
[loc-id]:empty { display: none; }

/* ════════════════════════════════════════════════════════════════
   § 31 — Global fixed topbar elements
   ════════════════════════════════════════════════════════════════ */

/* The global #jdnplustitle is hidden by default;
   it becomes visible only when .small is applied (catalog mode). */
#jdnplustitle {
  position:        fixed;
  top:             0;
  left:            0;
  right:           0;
  height:          var(--topbar-h);
  z-index:         110;
  pointer-events:  none;
  display:         none;   /* shown via .small below */
  align-items:     center;
  justify-content: center;
  padding:         0 0.4rem;
  font-size:       clamp(2.2rem, 7vw, 3rem); /* keep class value for non-small */
}
#jdnplustitle.small {
  display:        flex;
  font-size:      1.05rem;
  letter-spacing: 0.01em;
  /* keep title centered between the trophy icon (left) and player block (right);
     the icons sit at z-index 112 (above 110), so the title visually slips beneath them
     without affecting horizontal centering. */
}

/* Leaderboard icon — fixed top-left */
.global-leaderboard {
  display: none !important;
  position:   fixed;
  top:        calc((var(--topbar-h) - 1.9rem) / 2);
  left:       0.55rem;
  z-index:    112;
  width:      1.9rem;
  height:     1.9rem;
  object-fit: contain;
}

/* Player info block — fixed top-right */
.global-player-info {
  position:       fixed;
  top:            0;
  right:          0;
  height:         var(--topbar-h);
  display:        flex;
  flex-direction: row;
  align-items:    center;
  padding:        0 0.5rem;
  gap:            0.35rem;
  z-index:        112;
}

/* ════════════════════════════════════════════════════════════════
   § 32 — Profile creation / welcome flow
   ════════════════════════════════════════════════════════════════ */

.welcome-illustration {
  width:      min(60vw, 14rem);
  height:     auto;
  object-fit: contain;
  filter:     drop-shadow(0 0 18px var(--cyan-glow));
  flex-shrink: 0;
}

.nickname-input {
  background:    rgba(23, 255, 203, 0.08);
  border:        1.5px solid var(--border);
  border-radius: var(--r-md);
  color:         var(--text);
  font-family:   'Roboto-JDN';
  font-size:     1.2rem;
  padding:       0.7rem 1.2rem;
  text-align:    center;
  width:         min(90%, 18rem);
  outline:       none;
}
.nickname-input::placeholder { color: var(--text-muted); }
.nickname-input:focus {
  border-color: var(--cyan);
  box-shadow:   0 0 10px var(--cyan-glow);
}

/* 3×3 avatar picker grid */
.welcomeAvatarsBox {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   0.5rem;
  width:                 min(90%, 20rem);
  padding:               0.3rem;
  min-height:            11rem;
}

.welcomeAvatarsBox.is-loading {
  align-items: center;
}

.welcomeAvatarsLoader {
  grid-column:     1 / -1;
  min-height:      10rem;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             0.7rem;
  color:           var(--text);
  font-family:     'Roboto-JDN';
  font-size:       0.9rem;
  text-align:      center;
  text-shadow:     0 0 10px var(--cyan-glow);
}

.welcomeAvatarsLoader img {
  width:      4rem;
  height:     4rem;
  object-fit: contain;
  filter:     drop-shadow(0 0 14px var(--cyan-glow));
  border:     none;
  outline:    none;
}
.guestAvatar {
  border-radius: var(--r-md);
  overflow:      hidden;
  border:        2px solid transparent;
  background:    rgba(13, 6, 46, 0.7);
  cursor:        pointer;
  transition:    border-color 0.15s, transform var(--tap-dur);
}
.guestAvatar:active          { transform: scale(0.93); }
.guestAvatar.selected        { border-color: var(--cyan); }
.guestAvatar.active {
  border-color: var(--cyan);
  box-shadow:   0 0 14px var(--cyan-glow);
}
.guestAvatarImg {
  width:        100%;
  aspect-ratio: 1 / 1;
  object-fit:   cover;
  display:      block;
  /* suppress broken-image [?] */
  color:        transparent;
  background-image:    url('./imgs/loading.gif');
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     30%;
  border:              none;
  outline:             none;
}

.playerBar img,
.playersAvatarCoachSelectionIcon,
#playersAvatarMainPageIcon,
.adminAvatar,
.avatar-image,
.guestAvatar,
.guestAvatarImg {
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════════
   § 33 — Login page helpers
   ════════════════════════════════════════════════════════════════ */

/* VIP promotional note on login screen */
.login-help--vip {
  color:      var(--purple);
  font-size:  0.8rem;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   § 34 — Preview panel additions
   ════════════════════════════════════════════════════════════════ */

.fav-icon {
  width:      1.5rem;
  height:     1.5rem;
  object-fit: contain;
  cursor:     pointer;
  filter:     brightness(0.65);
  transition: filter 0.15s, transform var(--tap-dur);
  pointer-events: auto;
}
.fav-icon:active { transform: scale(0.88); filter: brightness(1.1); }

.dance-fav-button {
  position: fixed;
  top: calc(var(--safe-top) + 0.8rem);
  right: 0.8rem;
  z-index: 999;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: rgba(13, 6, 46, 0.76);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-glow);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dance-fav-icon {
  width: 1.48rem;
  height: 1.48rem;
  display: block;
  object-fit: contain;
  filter: none;
}

.dance-fav-button:active .dance-fav-icon {
  transform: scale(0.88);
  filter: brightness(1.1);
}

.previewscoredata {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            0.3rem;
}

/* class-level mirror of the #previewScoreStars ID rule */
.previewScoreStars {
  display:        flex;
  flex-direction: row;
  align-items:    center;
  gap:            0.1rem;
}

/* .dance-button = visual alias for .previewDanceBtn */
.dance-button {
  background:    linear-gradient(135deg, var(--cyan), var(--blue));
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     0.9rem;
  font-weight:   bold;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.55rem 1.4rem;
  white-space:   nowrap;
  box-shadow:    var(--shadow-glow);
  flex-shrink:   0;
  cursor:        pointer;
}

/* Difficulty level bars inside preview (BEM naming) */
.song-preview__song__difficulty,
.playlist-song-preview__song__difficulty {
  display:     flex;
  gap:         3px;
  align-items: flex-end;
}
.song-preview__song__difficulty--level,
.playlist-song-preview__song__difficulty--level {
  width:         3px;
  border-radius: 2px;
  background:    rgba(255, 255, 255, 0.22);
}
.song-preview__song__difficulty--level.level-1,
.playlist-song-preview__song__difficulty--level.level-1 { height: 0.4rem; }
.song-preview__song__difficulty--level.level-2,
.playlist-song-preview__song__difficulty--level.level-2 { height: 0.6rem; }
.song-preview__song__difficulty--level.level-3,
.playlist-song-preview__song__difficulty--level.level-3 { height: 0.8rem; }
.song-preview__song__difficulty--level.level-4,
.playlist-song-preview__song__difficulty--level.level-4 { height: 1.0rem; }
.song-preview__song__difficulty--level.filled,
.playlist-song-preview__song__difficulty--level.filled  { background: var(--cyan); }

/* ════════════════════════════════════════════════════════════════
   § 35 — Connect-to-room window internals
   ════════════════════════════════════════════════════════════════ */

/* Inner card of the connect-room modal */
.enterCodeWindow {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.8rem;
  width:          min(90vw, 22rem);
  max-height:     92vh;
  overflow-y:     auto;
  padding:        1rem 1rem 1.5rem;
  background:     var(--bg-card);
  border:         1px solid var(--border);
  border-radius:  var(--r-xl);
  box-shadow:     var(--shadow-deep);
}

/* Topbar row inside the enter-code card */
.enterCodeWindow-topbar {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         0 0.1rem;
}

/* Chromecast + close buttons */
.cast-btn,
.modal-close-btn {
  width:           2.4rem;
  height:          2.4rem;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.07);
  border:          1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  transition:      background 0.15s;
}
.cast-btn:active,
.modal-close-btn:active { background: rgba(255, 255, 255, 0.16); }
.cast-btn img,
.modal-close-btn img    { width: 1.15rem; height: 1.15rem; object-fit: contain; }

/* Room icon above the code display */
.room-number-icon {
  width:      3.5rem;
  height:     3.5rem;
  object-fit: contain;
}

/* Browser-address hint: tells players which page to open on the main screen. */
.room-browser-hint {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.35rem;
  width:          100%;
}

.room-browser-hint-label {
  color:       var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size:   0.72rem;
  line-height: 1.2;
  text-align:  center;
}

.room-browser-address {
  display:       flex;
  align-items:   center;
  width:         100%;
  min-height:    2.35rem;
  padding:       0.5rem 0.75rem;
  overflow:      hidden;
  color:         var(--text);
  background:    rgba(255, 255, 255, 0.09);
  border:        1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  box-shadow:    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 16px rgba(0, 0, 0, 0.18);
}

.room-browser-lock {
  position:      relative;
  flex:          0 0 auto;
  width:         0.72rem;
  height:        0.58rem;
  margin:        0.22rem 0.62rem 0 0.08rem;
  border:        1.5px solid var(--cyan);
  border-radius: 0.15rem;
  opacity:       0.9;
}

.room-browser-lock::before {
  content:       "";
  position:      absolute;
  left:          50%;
  bottom:        calc(100% - 0.05rem);
  width:         0.42rem;
  height:        0.4rem;
  border:        1.5px solid var(--cyan);
  border-bottom: 0;
  border-radius: 0.35rem 0.35rem 0 0;
  transform:     translateX(-50%);
}

.room-browser-address-text {
  min-width:      0;
  overflow:       hidden;
  font-family:    'Roboto-JDN', 'Poppins', sans-serif;
  font-size:      0.78rem;
  letter-spacing: 0.005em;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.room-browser-address-text > span {
  color: var(--text-dim);
}

.room-browser-address-text > strong {
  color:       var(--text);
  font-weight: 600;
}

@keyframes roomBrowserCaretBlink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

.room-browser-caret {
  flex:        0 0 auto;
  width:       1px;
  height:      1rem;
  margin-left: 0.12rem;
  background:  var(--cyan);
  animation:   roomBrowserCaretBlink 1.05s step-end infinite;
}

@media (max-height: 43rem) {
  .room-browser-hint-label { display: none; }
}

/* Code digits + delete row */
.room-code-row {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         0.2rem;
  width:       100%;
  min-height:  3.2rem;
  position:    relative;
}
.room-code-text {
  font-family:    'JDN-Display';
  font-size:      2.6rem;
  line-height:    3.2rem;
  min-height:     3.2rem;
  color:          var(--cyan);
  text-shadow:    var(--shadow-glow);
  letter-spacing: 0.18em;
  width:          100%;
  padding-left:   0.18em;
  text-align:     center;
}
.room-code-delete {
  width:     2rem;
  height:    2rem;
  display:   flex;
  align-items: center;
  justify-content: center;
  cursor:    pointer;
  opacity:   0.65;
  transition: opacity var(--tap-dur);
  position: absolute;
  right:    0.1rem;
}
.room-code-delete:active { opacity: 1; transform: scale(0.88); }
.room-code-delete img    { width: 1.35rem; }

/* "0" key spans all three columns */
.numpad-key--wide {
  grid-column:  span 3;
  aspect-ratio: auto;
  padding:      0.65rem;
}

/* Join room CTA */
.join-room-btn {
  background:    var(--grad-btn);
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     1rem;
  font-weight:   bold;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.75rem 2.5rem;
  box-shadow:    var(--shadow-glow);
  text-align:    center;
  cursor:        pointer;
  animation:     glowPulse 2s ease-in-out infinite;
  width:         100%;
}
.join-room-btn:active { transform: scale(0.95); animation: none; }

#inDance,
#selectionCoach {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#inDance input,
#inDance textarea,
#inDance [contenteditable="true"] {
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   § 36 — Fullscreen overlays (wrong-room, loading-room, etc.)
   ════════════════════════════════════════════════════════════════ */

/* Base class for full-viewport modal overlays.
   ID rules (#wrongRoom etc.) already add specific colours/sizes.   */
.fullscreen-overlay {
  position:        fixed;
  inset:           0;
  z-index:         400;
  background:      rgba(1, 9, 43, 0.97);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             1.5rem;
  animation:       pageIn 0.15s ease both;
}
.fullscreen-overlay h2 {
  font-family: 'Roboto-JDN';
  font-size:   1.05rem;
  color:       var(--text);
  text-align:  center;
  padding:     0 2rem;
}
.overlay-anim {
  width:      6rem;
  height:     6rem;
  object-fit: contain;
}

/* ════════════════════════════════════════════════════════════════
   § 37 — Settings sub-pages (as class, not just ID)
   ════════════════════════════════════════════════════════════════ */

/* These are inside #settingsPage — they fill the available area and
   delegate scrolling to the inner catalog (not the whole panel) so that
   the dancer-card / heading stays pinned at the top. */
.DCEditionSettingsPage,
.LangSettingsPage,
.Creditos {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.6rem;
  padding:        3rem 0.6rem 0.4rem; /* 3rem top = clear back btn */
  overflow:       hidden;
}

/* DCEdition: dancer card pinned, avatar grid fills the rest and scrolls */
.DCEditionSettingsPage #dancerCard,
.DCEditionSettingsPage .dancerCard { flex-shrink: 0; margin-bottom: 0; }

.DCEditionSettingsPage .dancerCard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.DCEditionSettingsPage .dancerCard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(8, 0, 30, 0.22), rgba(8, 0, 30, 0.78)),
    var(--profile-banner-image, none);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.2s ease, transform 0.24s ease;
}

.DCEditionSettingsPage .dancerCard.has-profile-banner::before { opacity: 1; }
.DCEditionSettingsPage .dancerCard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(8, 0, 30, 0.18), rgba(8, 0, 30, 0.74)),
    var(--profile-preview-banner-image, none);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.24s ease, transform 0.3s ease;
  pointer-events: none;
}
.DCEditionSettingsPage .dancerCard.has-profile-banner-preview::after {
  opacity: 1;
  transform: scale(1);
}
.DCEditionSettingsPage .dancerCard > * { position: relative; z-index: 1; }

#dancerCardAvatar {
  transition: opacity 0.18s ease, transform 0.24s ease, filter 0.24s ease;
}

#dancerCardAvatar.profile-avatar-switching {
  opacity: 0.18 !important;
  transform: scale(0.92);
  filter: saturate(0.7);
}

.locked-profile-preview-source {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 16px rgba(23, 255, 203, 0.42) !important;
  transform: scale(0.975);
}

.dancerCardAlias {
  max-width: 100%;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(23, 255, 203, 0.34);
  border-radius: 999px;
  background: rgba(8, 0, 30, 0.66);
  color: var(--cyan);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: center;
  transition: opacity 0.18s ease, transform 0.22s ease;
}

.dancerCardAlias.profile-alias-switching {
  opacity: 0.12;
  transform: translateY(0.18rem) scale(0.96);
}

.profile-item-tabs {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  gap: 0.35rem;
  padding: 0 0.2rem 0.1rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.profile-item-tabs::-webkit-scrollbar { display: none; }

.profile-item-tab {
  flex: 1 0 auto;
  min-height: 2.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.42rem 0.68rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.65rem;
  line-height: 1.15;
  white-space: nowrap;
}

.profile-item-tab img {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
}

.profile-item-tab.active {
  border-color: var(--cyan);
  background: rgba(23, 255, 203, 0.14);
  color: var(--cyan);
  box-shadow: 0 0 10px rgba(23, 255, 203, 0.16);
}

/* override the earlier avatar-grid max-height — use flex instead */
.avatarsScrollCatalog,
.DCEditionSettingsPage .profile-items-catalog {
  flex:           1;
  min-height:     0;
  max-height:     none;
  width:          100%;
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  align-content:  flex-start;
  justify-content: flex-start;
  overflow-y:     auto;
  padding:        0.4rem 0.2rem var(--content-pb);
  gap:            0.4rem;
  -webkit-overflow-scrolling: touch;
}

/* Language picker — list takes remaining space, no nested absolute */
.LangSettingsPage .langsScrollCatalog,
#langsScrollCatalog.langsScrollCatalog {
  flex:           1;
  min-height:     0;
  width:          100%;
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  padding:        0.5rem 0.5rem var(--content-pb);
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
}

/* Credits — same pattern */
.Creditos .scrollCreditsCatalog,
#creditsCatalog.scrollCreditsCatalog {
  flex:           1;
  min-height:     0;
  width:          100%;
  overflow-y:     auto;
  padding:        0.7rem 0.8rem var(--content-pb);
  -webkit-overflow-scrolling: touch;
}

.credit_head {
  width:         100%;
  margin:        0.45rem 0 0.25rem;
  padding:       0.55rem 0.75rem;
  border-left:   3px solid var(--cyan);
  border-radius: var(--r-sm);
  background:    linear-gradient(90deg, rgba(23,255,203,0.16), rgba(55,132,249,0.08));
  color:         var(--cyan);
  font-family:   'Roboto-JDN', 'Poppins', sans-serif;
  font-size:     0.82rem;
  line-height:   1.25;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow:    0 0 12px rgba(23,255,203,0.08);
}

.credit_body {
  width:         100%;
  margin:        0.18rem 0;
  padding:       0.5rem 0.75rem;
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-sm);
  background:    rgba(255,255,255,0.045);
  color:         rgba(255,255,255,0.88);
  font-family:   'Roboto-JDN', 'Poppins', sans-serif;
  font-size:     0.86rem;
  font-weight:   400;
  line-height:   1.25;
}

/* ════════════════════════════════════════════════════════════════
   § 38 — Playlist sub-areas
   ════════════════════════════════════════════════════════════════ */

/* Playlists tab: ONE scroll container holds both the featured (horizontal)
   banner row and the vertical playlists grid.  Each section is a normal
   flex-flow child of #playlistsCatalog and they share one outer scroll. */
.playlistsHorizontalScrollCatalog {
  display:        flex;
  flex-direction: column;
  width:          100%;
  padding:        0.5rem 0.8rem 0.3rem;
  gap:            0.5rem;
  flex-shrink:    0;
}

.playlistsVerticalScrollCatalog {
  display:         flex;
  flex-direction:  row;
  flex-wrap:       wrap;
  width:           100%;
  padding:         0 0.8rem var(--content-pb);
  gap:             0.6rem;
  align-content:   flex-start;
  flex:            1;
  min-height:      0;
}

.playlist-library-tabs {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  flex: 0 0 auto;
  gap: 0.35rem;
  width: 100%;
  padding: 0.5rem 0.8rem 0.42rem;
  background: linear-gradient(180deg, rgba(8, 0, 30, 0.98) 78%, rgba(8, 0, 30, 0));
}

.playlist-library-tab {
  flex: 1;
  min-width: 0;
  padding: 0.58rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform var(--tap-dur);
}

.playlist-library-tab.active {
  color: #08001e;
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(23, 255, 203, 0.28);
}

.playlist-library-tab:active { transform: scale(0.97); }

.user-playlists-section {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
  min-height: 12rem;
  padding: 0.2rem 0.8rem var(--content-pb);
}

.user-playlists-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.35rem 0 0.7rem;
}

.user-playlists-heading h2 {
  min-width: 0;
  color: var(--text);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 1rem;
}

.user-playlist-create-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid rgba(23, 255, 203, 0.58);
  border-radius: var(--r-pill);
  background: rgba(23, 255, 203, 0.12);
  color: var(--cyan);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.7rem;
  cursor: pointer;
}

.user-playlist-create-button > span:first-child { font-size: 1.05rem; line-height: 0.8; }
.user-playlist-create-button:active { transform: scale(0.97); }

.user-playlists-status {
  padding: 1.4rem 0.5rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
}

.user-playlists-status:empty { display: none; }
.user-playlists-status.error { color: #ff8a9d; }

.user-playlists-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  width: 100%;
}

.user-playlist-card {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: rgba(13, 6, 46, 0.78);
  color: var(--text);
  text-align: left;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform var(--tap-dur), border-color 0.18s ease;
}

.user-playlist-card:active { transform: scale(0.97); border-color: var(--cyan); }

.user-playlist-card-artwork {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.user-playlist-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
  padding: 0.48rem 0.52rem 0.55rem;
}

.user-playlist-card-meta strong {
  overflow: hidden;
  color: var(--text);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-playlist-card-meta small {
  color: var(--text-muted);
  font-size: 0.62rem;
}

.user-playlist-collage {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(244, 33, 147, 0.4), rgba(23, 255, 203, 0.28));
}

.user-playlist-collage.playlist-collage-count-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.user-playlist-collage.playlist-collage-count-2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.user-playlist-collage.playlist-collage-count-3,
.user-playlist-collage.playlist-collage-count-4 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.user-playlist-collage.playlist-collage-count-5,
.user-playlist-collage.playlist-collage-count-6 { grid-template-rows: repeat(2, 1fr); }

.user-playlist-collage img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  min-height: 0;
  object-fit: cover !important;
}

.user-playlist-collage-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.88);
  font-size: 2.2rem;
}

.official-playlist-artwork { display: block; overflow: hidden; }
.official-playlist-artwork img { width: 100%; height: 100%; object-fit: cover; }

.playlist-info-actions {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  margin-top: auto;
}

.playlist-info-actions .previewDanceBtn { margin: 0; align-self: auto; }

.playlist-edit-button {
  min-height: 2.35rem;
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.68rem;
}

.playlist-dialog {
  position: fixed;
  top: var(--playlist-dialog-viewport-top, 0px);
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--playlist-dialog-viewport-height, 100dvh);
  padding: max(0.8rem, env(safe-area-inset-top)) max(0.8rem, env(safe-area-inset-right)) max(0.8rem, env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-left));
  background: rgba(3, 0, 18, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: playlistDialogFadeIn 0.18s ease both;
}

.playlist-dialog.inactive { display: none !important; }

.playlist-dialog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: min(100%, 28rem);
  max-height: min(calc(var(--playlist-dialog-viewport-height, 100dvh) - 2rem), 38rem);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: rgba(13, 6, 46, 0.98);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.58), var(--shadow-glow);
  animation: playlistDialogSlideIn 0.22s cubic-bezier(0.16, 0.78, 0.24, 1) both;
}

.playlist-dialog-card h2 {
  padding-right: 2rem;
  color: var(--text);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 1.08rem;
}

.playlist-dialog-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.playlist-dialog-field {
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  color: var(--text-dim);
  font-size: 0.7rem;
}

.playlist-dialog-field input,
.playlist-dialog-field textarea {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  padding: 0.7rem 0.78rem;
  border: 1px solid var(--border);
  border-radius: 0.72rem;
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  caret-color: var(--cyan);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  resize: none;
}

.playlist-dialog-field input:focus,
.playlist-dialog-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(23, 255, 203, 0.12); }

.playlist-field-counter {
  align-self: flex-end;
  margin-top: -0.2rem;
  color: var(--text-muted);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
}

.playlist-field-counter.limit-reached { color: var(--yellow); }

.playlist-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.42rem;
  margin-top: 0.2rem;
}

.playlist-dialog-actions button {
  min-height: 2.35rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-pill);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.7rem;
}

.playlist-dialog-primary { border: 1px solid var(--cyan); background: var(--cyan); color: #08001e; }
.playlist-dialog-secondary { border: 1px solid var(--border); background: rgba(255, 255, 255, 0.08); color: var(--text); }
.playlist-dialog-delete { margin-right: auto; border: 1px solid rgba(255, 71, 71, 0.6); background: rgba(255, 71, 71, 0.12); color: #ff8a9d; }

.playlist-save-dialog-card { padding-bottom: 0.9rem; }
.playlist-save-song-name { margin-top: -0.55rem; color: var(--text-dim); font-size: 0.72rem; }

.playlist-save-options {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.playlist-save-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 3.65rem;
  padding: 0.34rem;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.playlist-save-option:active { background: rgba(255, 255, 255, 0.08); }

.playlist-save-option-artwork {
  display: grid;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: 0.52rem;
  background: rgba(255, 255, 255, 0.08);
}

.playlist-save-option-artwork > img { width: 100%; height: 100%; object-fit: cover; }

.playlist-save-option-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.14rem;
  min-width: 0;
}

.playlist-save-option-text strong { overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.playlist-save-option-text small { color: var(--text-muted); font-size: 0.62rem; }

.playlist-save-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.45rem;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  color: #08001e;
  font-size: 0.76rem;
  font-weight: bold;
}

.playlist-save-check.active { border-color: var(--cyan); background: var(--cyan); }
.playlist-save-loading { padding: 0.8rem; border: 0; background: none; color: var(--text-muted); font-size: 0.7rem; text-align: center; }
.playlist-save-loading.error { color: #ff8a9d; }
.playlist-save-create { align-self: stretch; flex-shrink: 0; }

@keyframes playlistDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes playlistDialogSlideIn { from { opacity: 0; transform: translateY(1.2rem) scale(0.98); } to { opacity: 1; transform: none; } }

/* #playlistsCatalog itself becomes the single scrolling viewport */
#playlistsCatalog.inpagecontainer {
  overflow-y:                 auto;
  -webkit-overflow-scrolling: touch;
}

/* Full-width playlist detail panel (overlays the inpage area) */
.playlist-preview-panel {
  position:       absolute;
  inset:          0;
  background:     var(--grad-page);
  z-index:        30;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  animation:      slideUp 0.18s ease both;
}

#backButtonInPlaylist {
  position: absolute;
  top:      0.15rem;
  left:     0.6rem;
  z-index:  40;
}

#playlist-preview-itself {
  padding-top: 2.95rem;
}

#playlist-preview-itself .previewhelper-2 {
  top: 0.7rem;
}

/* Playlist icon/thumbnail in playlist info bar */
.playlist-info-icon {
  width:         4rem;
  height:        4rem;
  border-radius: var(--r-md);
  object-fit:    cover;
  border:        1px solid var(--border);
  flex-shrink:   0;
}

/* Text area next to the icon */
.playlistinfolist {
  display:        flex;
  flex-direction: column;
  flex:           1;
  min-width:      0;
  gap:            0.15rem;
}

.playlistdur {
  font-family:   'Roboto-JDN';
  font-size:     0.68rem;
  color:         var(--text-muted);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Songs list inside an opened playlist */
.activePlaylistSonglist {
  display:        flex;
  flex-direction: row;
  flex-wrap:      wrap;
  width:          100%;
  overflow-y:     auto;
  padding:        0.5rem 0.5rem 0.8rem;
  gap:            0.3rem;
  flex:           1;
  min-height:     0;
  align-content:  flex-start;
  -webkit-overflow-scrolling: touch;
}

/* ════════════════════════════════════════════════════════════════
   § 39 — VIP page sections
   ════════════════════════════════════════════════════════════════ */

.vipStatus {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  width:          100%;
  gap:            0.8rem;
  padding:        0.5rem 1rem;
}
.vipCoinRegenCard {
  display:        flex;
  flex-direction: column;
  width:          min(100%, 20rem);
  gap:            0.75rem;
  padding:        1rem;
  border:         1px solid rgba(23, 255, 203, 0.34);
  border-radius:  var(--r-md);
  background:     rgba(16, 29, 76, 0.78);
  box-shadow:     0 0 18px rgba(23, 255, 203, 0.1);
}
.vipCoinRegenTitle {
  margin:      0;
  color:       var(--text);
  font-family: 'Roboto-JDN';
  font-size:   1rem;
  text-align:  center;
}
.vipCoinBalance {
  display:     flex;
  align-items: center;
  gap:         0.7rem;
}
.vipCoinBalance img {
  width:      2.25rem;
  height:     2.25rem;
  object-fit: contain;
}
.vipCoinBalance div {
  display:        flex;
  flex-direction: column;
  gap:            0.12rem;
}
.vipCoinBalance span,
.vipCoinRegenHint,
.coinRegenFull {
  margin:      0;
  color:       var(--text-dim);
  font-family: 'Roboto-JDN';
  font-size:   0.72rem;
  line-height: 1.35;
}
#vipCoinsCount {
  color:       var(--yellow);
  font-family: 'Roboto-JDN';
  font-size:   1.25rem;
}
.coinRegenFull {
  display:    none;
  color:      var(--cyan);
  text-align: center;
}
.vipCoinRegenCard .coins-scrolling-text {
  color:       var(--text);
  font-size:   0.86rem;
  line-height: 1.35;
}
.vipCoinRegenCard .regenTimer { height: 0.42rem; }
.vipCoinRegenHint { text-align: center; }
.vip-illustration {
  width:      min(55vw, 12rem);
  height:     auto;
  object-fit: contain;
  opacity:    0.88;
  filter:     drop-shadow(0 0 12px var(--cyan-glow));
}

#homePage.homePage {
  overflow-y: auto;
  padding: 0.6rem 1rem var(--content-pb);
  gap: 1rem;
  -webkit-overflow-scrolling: touch;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  width: 100%;
}

.home-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 7.2rem;
  gap: 0.55rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--grad-card);
  color: var(--text);
  font-family: 'Roboto-JDN';
  font-size: 0.9rem;
  box-shadow: var(--shadow-card);
}

.home-tile img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
}

/* Modern home dashboard */
#homePage.homePage {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0.8rem 0.75rem var(--content-pb);
  gap: 0.75rem;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 33, 147, 0.14), transparent 38%),
    radial-gradient(circle at 0% 34%, rgba(23, 255, 203, 0.09), transparent 34%);
}

#homePage > .settings-header,
.home-grid--legacy {
  display: none;
}

.home-hero {
  position: relative;
  flex: 0 0 auto;
  min-height: 8.4rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 1.05rem 7.2rem 1.05rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.35rem;
  background:
    linear-gradient(120deg, rgba(27, 15, 74, 0.96), rgba(71, 20, 104, 0.86) 58%, rgba(12, 102, 117, 0.78));
  box-shadow:
    0 18px 35px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  isolation: isolate;
}

.home-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 9rem;
  height: 9rem;
  top: -4.7rem;
  left: 31%;
  border-radius: 50%;
  background: rgba(244, 33, 147, 0.2);
  filter: blur(0.25rem);
}

.home-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.36rem;
}

.home-hero h2 {
  max-width: 15rem;
  color: #fff;
  font-family: 'JDN-Display', 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: clamp(1.18rem, 5vw, 1.55rem);
  line-height: 1.06;
  text-align: left;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.home-hero p {
  max-width: 15.5rem;
  color: rgba(255, 255, 255, 0.68);
  font-family: 'Poppins', sans-serif;
  font-size: 0.64rem;
  line-height: 1.35;
  text-align: left;
}

.home-hero-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -0.3rem;
  width: 7.2rem;
  height: 7.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
}

.home-hero-art img {
  position: relative;
  z-index: 2;
  width: 4.6rem;
  height: 4.6rem;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(23, 255, 203, 0.42));
  animation: homeLogoFloat 4s ease-in-out infinite;
}

.home-hero-orbit {
  position: absolute;
  inset: 0.4rem;
  border: 1px solid rgba(23, 255, 203, 0.25);
  border-radius: 50%;
  box-shadow:
    inset 0 0 24px rgba(23, 255, 203, 0.09),
    0 0 22px rgba(244, 33, 147, 0.12);
  animation: homeOrbit 12s linear infinite;
}

.home-hero-orbit::before,
.home-hero-orbit::after {
  content: "";
  position: absolute;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.home-hero-orbit::before {
  top: -0.28rem;
  left: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.home-hero-orbit::after {
  right: -0.25rem;
  bottom: 28%;
  background: var(--pink);
  box-shadow: 0 0 12px var(--pink);
}

.home-dashboard {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  padding-bottom: 0.2rem;
}

.home-card {
  position: relative;
  min-width: 0;
  min-height: 6.35rem;
  display: flex;
  align-items: flex-end;
  gap: 0.58rem;
  overflow: hidden;
  padding: 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.095);
  border-radius: 1.12rem;
  background: linear-gradient(145deg, rgba(28, 17, 71, 0.94), rgba(15, 9, 49, 0.94));
  color: #fff;
  text-align: left;
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.065);
  transform: translateZ(0);
  transition: transform 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.home-card:active {
  transform: scale(0.97);
  border-color: rgba(23, 255, 203, 0.42);
  filter: brightness(1.08);
}

.home-card--wide {
  grid-column: 1 / -1;
  min-height: 6.7rem;
  align-items: center;
}

.home-card::before {
  content: "";
  position: absolute;
  width: 6rem;
  height: 6rem;
  top: -3.4rem;
  right: -2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.075);
  pointer-events: none;
}

.home-card--tasks {
  background:
    linear-gradient(115deg, rgba(12, 84, 98, 0.92), rgba(37, 17, 94, 0.96) 56%, rgba(104, 18, 97, 0.92));
}

.home-card--vip {
  background: linear-gradient(145deg, rgba(93, 41, 126, 0.96), rgba(46, 19, 78, 0.96));
}

.home-card--leaderboard {
  background: linear-gradient(145deg, rgba(31, 47, 105, 0.94), rgba(25, 14, 61, 0.96));
}

.home-card--news {
  background: linear-gradient(145deg, rgba(19, 69, 112, 0.94), rgba(17, 20, 64, 0.96));
}

.home-card--settings {
  background: linear-gradient(145deg, rgba(52, 38, 93, 0.94), rgba(20, 14, 53, 0.96));
}

.home-card-icon {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 2.55rem;
  height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.85rem;
  background: rgba(8, 0, 30, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.home-card--wide .home-card-icon {
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 1rem;
}

.home-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.home-card-content {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.24rem;
}

.home-card-content strong {
  max-width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.76rem;
  line-height: 1.18;
  text-overflow: ellipsis;
}

.home-card-heading {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.42rem;
}

.home-card-description {
  display: block;
  max-width: 100%;
  color: rgba(255, 255, 255, 0.58);
  font-family: 'Poppins', sans-serif;
  font-size: 0.54rem;
  line-height: 1.3;
}

.home-count-badge {
  min-width: 1.35rem;
  padding: 0.15rem 0.38rem;
  border-radius: 999px;
  background: var(--cyan);
  color: #07152c;
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.55rem;
  line-height: 1;
  text-align: center;
  box-shadow: 0 0 11px rgba(23, 255, 203, 0.36);
}

.home-card-arrow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.52);
  font-family: Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 300;
  line-height: 1;
}

.home-mini-progress {
  width: 100%;
  height: 0.32rem;
  display: block;
  overflow: hidden;
  margin-top: 0.22rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.home-mini-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 8px var(--cyan-glow);
  transition: width 0.3s ease;
}

.home-soon-badge {
  position: absolute;
  z-index: 3;
  top: 0.55rem;
  right: 0.55rem;
  padding: 0.18rem 0.38rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(8, 0, 30, 0.5);
  color: rgba(255, 255, 255, 0.62);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.45rem;
  line-height: 1;
}

.home-card-glow {
  position: absolute;
  width: 5rem;
  height: 5rem;
  top: -2.4rem;
  right: -1.5rem;
  border-radius: 50%;
  background: rgba(255, 207, 74, 0.25);
  filter: blur(0.2rem);
}

@keyframes homeLogoFloat {
  0%, 100% { transform: translateY(-0.15rem) scale(1); }
  50%      { transform: translateY(0.2rem) scale(1.035); }
}

@keyframes homeOrbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 350px) {
  .home-hero {
    padding-right: 5.7rem;
  }
  .home-hero-art {
    right: -1.3rem;
  }
  .home-card {
    padding: 0.65rem;
    gap: 0.42rem;
  }
  .home-card-icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}

/* ── Leaderboards ─────────────────────────────────────────────── */
#leaderboardsPage.leaderboardsPage {
  overflow: hidden;
  padding: 3rem 0.7rem var(--content-pb);
  gap: 0.58rem;
}

.leaderboard-tabs {
  flex: 0 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(8, 0, 30, 0.58);
}

.leaderboard-tab {
  min-height: 2.35rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.67rem;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.leaderboard-tab.active {
  border-color: rgba(23, 255, 203, 0.34);
  background: linear-gradient(135deg, rgba(23, 255, 203, 0.2), rgba(55, 132, 249, 0.22));
  color: #fff;
  box-shadow: 0 0 13px rgba(23, 255, 203, 0.12);
}

.leaderboard-week-timer {
  flex: 0 0 auto;
  width: 100%;
  min-height: 2.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.48rem 0.68rem;
  border: 1px solid rgba(244, 33, 147, 0.25);
  border-radius: 0.85rem;
  background: linear-gradient(120deg, rgba(70, 21, 96, 0.78), rgba(26, 15, 69, 0.88));
}

.leaderboard-week-timer span {
  min-width: 0;
  color: rgba(255, 255, 255, 0.64);
  font-family: 'Poppins', sans-serif;
  font-size: 0.5rem;
  line-height: 1.25;
}

.leaderboard-week-timer strong {
  flex: 0 0 auto;
  color: #fff;
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.63rem;
  white-space: nowrap;
}

.leaderboard-search {
  flex: 0 0 auto;
  width: 100%;
  min-height: 2.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  background: rgba(8, 0, 30, 0.55);
  color: var(--cyan);
}

.leaderboard-search > span {
  flex: 0 0 auto;
  font-family: sans-serif;
  font-size: 1.05rem;
  line-height: 1;
}

.leaderboard-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.65rem;
}

.leaderboard-search input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.leaderboard-current-player {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.leaderboard-current-label {
  padding-left: 0.25rem;
  color: var(--cyan);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.52rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.leaderboard-catalog {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  overflow-y: auto;
  padding: 0.05rem 0.1rem 0.25rem;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.leaderboard-player {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: 100%;
  min-height: 4.45rem;
  display: grid;
  grid-template-columns: 2.15rem 3.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.58rem;
  overflow: hidden;
  padding: 0.52rem 0.62rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 1rem;
  background: linear-gradient(115deg, rgba(25, 16, 65, 0.96), rgba(12, 9, 42, 0.96));
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18);
}

.leaderboard-player::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image: var(--leaderboard-banner-image, none);
  background-position: center;
  background-size: cover;
  opacity: 0.2;
}

.leaderboard-player::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 0, 30, 0.4), rgba(8, 0, 30, 0.88) 72%);
}

.leaderboard-player.is-current {
  border-color: rgba(23, 255, 203, 0.62);
  box-shadow: 0 0 17px rgba(23, 255, 203, 0.14);
}

.leaderboard-player.rank-1 {
  border-color: rgba(255, 210, 73, 0.68);
  box-shadow: 0 0 18px rgba(255, 198, 45, 0.13);
}

.leaderboard-player.rank-2 { border-color: rgba(209, 222, 240, 0.52); }
.leaderboard-player.rank-3 { border-color: rgba(219, 139, 91, 0.55); }

.leaderboard-rank {
  min-width: 0;
  color: rgba(255, 255, 255, 0.68);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.72rem;
  text-align: center;
}

.rank-1 .leaderboard-rank { color: #ffd64f; font-size: 1rem; }
.rank-2 .leaderboard-rank { color: #dce8f7; font-size: 0.9rem; }
.rank-3 .leaderboard-rank { color: #e4a06f; font-size: 0.86rem; }

.leaderboard-avatar-wrap {
  position: relative;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  overflow: hidden;
  background: rgba(8, 0, 30, 0.7);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.26);
}

.leaderboard-avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.leaderboard-vip-badge {
  position: absolute;
  z-index: 2;
  right: -0.05rem;
  bottom: -0.05rem;
  min-width: 1.25rem;
  padding: 0.1rem 0.22rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd54b, #ff8a2a);
  color: #21092f;
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.38rem;
  line-height: 1;
  text-align: center;
  box-shadow: 0 1px 7px rgba(255, 176, 41, 0.42);
}

.leaderboard-player-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.leaderboard-player-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.leaderboard-player-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.72rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-country {
  flex: 0 0 auto;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 0.78rem;
  line-height: 1;
}

.leaderboard-title {
  min-height: 0.72rem;
  overflow: hidden;
  color: var(--cyan);
  font-family: 'Poppins', sans-serif;
  font-size: 0.48rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.48rem;
  color: rgba(255, 255, 255, 0.54);
  font-family: 'Poppins', sans-serif;
  font-size: 0.47rem;
  line-height: 1.25;
}

.leaderboard-score {
  color: #fff;
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.58rem;
}

.leaderboard-state {
  flex: 1;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.72rem;
  padding: 1rem;
  color: var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.75rem;
  text-align: center;
}

.leaderboard-state img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

.leaderboard-retry {
  min-height: 2.2rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: rgba(23, 255, 203, 0.12);
  color: var(--cyan);
  font-family: 'Roboto-JDN', sans-serif;
  font-size: 0.62rem;
}

.leaderboard-footer {
  flex: 0 0 auto;
  min-height: 0.8rem;
  color: rgba(255, 255, 255, 0.38);
  font-family: 'Poppins', sans-serif;
  font-size: 0.47rem;
  text-align: center;
}

@media (max-width: 350px) {
  .leaderboard-player {
    grid-template-columns: 1.8rem 2.85rem minmax(0, 1fr);
    gap: 0.42rem;
    padding: 0.46rem;
  }
  .leaderboard-avatar-wrap {
    width: 2.85rem;
    height: 2.85rem;
  }
}

#tasksPage.tasksPage {
  overflow: hidden;
  padding: 3rem 0.7rem var(--content-pb);
  gap: 0.65rem;
}

.tasks-catalog {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow-y: auto;
  padding: 0.2rem 0.15rem var(--content-pb);
  -webkit-overflow-scrolling: touch;
}

.tasks-state {
  flex: 1;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  color: var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.82rem;
  text-align: center;
}

.tasks-state > img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.tasks-retry {
  padding: 0.55rem 1rem;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: rgba(23, 255, 203, 0.13);
  color: var(--cyan);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
}

.task-card {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--grad-card);
  box-shadow: var(--shadow-card);
}

.task-card.completed {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  opacity: 0.7;
}

.task-card.completed .task-card-header img {
  opacity: 0.55;
  filter: grayscale(0.8);
}

.task-card.completed .task-time-status,
.task-card.completed .task-progress-row,
.task-card.completed .task-reward-type {
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.48);
}

.task-card.completed .task-progress-fill {
  background: rgba(255, 255, 255, 0.28);
  box-shadow: none;
}

.task-card.completed .task-reward {
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

.tasks-completed-divider {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.65rem 0 0.05rem;
  color: rgba(255, 255, 255, 0.42);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tasks-completed-divider::before,
.tasks-completed-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
}

.task-card--upcoming {
  border-color: rgba(119, 139, 255, 0.38);
}

.task-card--expired {
  opacity: 0.58;
  filter: saturate(0.65);
}

.task-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.task-card-header img {
  flex: 0 0 auto;
  width: 2.3rem;
  height: 2.3rem;
  object-fit: contain;
}

.task-card-header h3 {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.83rem;
  line-height: 1.25;
}

.task-time-status {
  align-self: flex-start;
  padding: 0.22rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text-dim);
  font-family: 'Poppins', sans-serif;
  font-size: 0.52rem;
  line-height: 1.2;
}

.task-time-status--unlimited {
  border-color: rgba(23, 255, 203, 0.22);
  color: var(--cyan);
}

.task-time-status--upcoming {
  border-color: rgba(119, 139, 255, 0.3);
  color: #aebaff;
}

.task-time-status--active {
  border-color: rgba(255, 196, 66, 0.26);
  color: #ffd472;
}

.task-time-status--expired {
  color: rgba(255, 255, 255, 0.46);
}

.task-progress-row {
  display: flex;
  justify-content: flex-end;
  color: var(--cyan);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.68rem;
}

.task-progress-track {
  width: 100%;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.task-progress-fill {
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  box-shadow: 0 0 10px var(--cyan-glow);
  transition: width 0.25s ease;
}

.task-rewards-label {
  margin-top: 0.2rem;
  color: var(--text-dim);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.62rem;
  text-transform: uppercase;
}

.task-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.task-reward {
  min-width: 4.8rem;
  max-width: 7.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-md);
  background: rgba(8, 0, 30, 0.58);
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.task-reward--link {
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.task-reward--link:active {
  transform: scale(0.96);
}

.task-reward--link:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.task-reward-image {
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--r-sm);
  object-fit: contain;
}

.task-reward-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.task-reward-type {
  max-width: 100%;
  overflow: hidden;
  color: var(--cyan);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.46rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-reward-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.57rem;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.task-reward-text-only {
  max-width: none;
  padding: 0.55rem 0.7rem;
  border-color: rgba(23, 255, 203, 0.34);
  color: var(--cyan);
}

.task-reward-text-only .task-reward-title {
  color: var(--cyan);
  font-size: 0.65rem;
}

.task-reward-text-only .task-reward-type {
  color: rgba(255, 255, 255, 0.55);
}

.task-linked-profile-item {
  position: relative;
}

.profile-item-task-badge {
  position: absolute;
  z-index: 4;
  top: 0.22rem;
  right: 0.22rem;
  width: 1.45rem;
  height: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-radius: 50%;
  background: rgba(8, 0, 30, 0.9);
  box-shadow: 0 0 9px rgba(23, 255, 203, 0.4);
}

.profile-item-task-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;
}

.profile-item-task-info {
  display: block;
  width: 100%;
  padding: 0.35rem 0.3rem;
  border-top: 1px solid rgba(23, 255, 203, 0.16);
  color: var(--cyan);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  font-size: 0.5rem;
  line-height: 1.25;
  text-align: center;
}

.profile-item-card-text .profile-item-task-info {
  padding-top: 0.25rem;
}

.task-linked-catalog-item {
  position: relative;
}

.catalog-task-badge {
  position: absolute;
  z-index: 14;
  top: 0.22rem;
  right: 0.22rem;
  width: 1.55rem;
  height: 1.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem;
  border: 1px solid rgba(23, 255, 203, 0.3);
  border-radius: 50%;
  background: rgba(8, 0, 30, 0.9);
  box-shadow: 0 0 10px rgba(23, 255, 203, 0.42);
  pointer-events: none;
}

.catalog-task-badge img,
.horizontalPlaylistParent .catalog-task-badge img,
.verticalPlaylistParent .catalog-task-badge img,
.verticalPlaylistLastParent .catalog-task-badge img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  display: block;
  object-fit: contain;
  filter: none;
}

/* ════════════════════════════════════════════════════════════════
   § 40 — News page
   ════════════════════════════════════════════════════════════════ */

.news-list {
  display:        flex;
  flex-direction: column;
  width:          100%;
  overflow-y:     auto;
  padding:        0.3rem 0.8rem var(--content-pb);
  gap:            0.5rem;
  flex:           1;
  -webkit-overflow-scrolling: touch;
}

/* Expanded single news item */
.newsExtended {
  position:       absolute;
  inset:          0;
  z-index:        40;
  background:     var(--grad-page);
  overflow-y:     auto;
  display:        flex;
  flex-direction: column;
  padding:        0.8rem 1rem var(--content-pb);
  gap:            0.8rem;
  -webkit-overflow-scrolling: touch;
  animation:      slideUp 0.18s ease both;
}
.newsExtendedItem {
  display:        flex;
  flex-direction: column;
  gap:            0.8rem;
  width:          100%;
}
.newsLabelParent h2 {
  font-family: 'JDN-Display';
  font-size:   1.2rem;
  color:       var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
  line-height: 1.4;
}
.newsExtendedImage {
  width:         100%;
  border-radius: var(--r-lg);
  overflow:      hidden;
  flex-shrink:   0;
}
.newsExtendedImage img {
  width:      100%;
  max-height: 14rem;
  object-fit: cover;
  display:    block;
}
.newsExtendedDescParent h2 {
  font-family: 'Roboto-JDN';
  font-size:   0.9rem;
  color:       var(--text-dim);
  line-height: 1.65;
  white-space: pre-wrap;
}
.newsGoButton {
  align-self: center;
  margin-top: 0.4rem;
}

#newsPage.newsPage {
  overflow: hidden;
  padding: 0.4rem 0 0;
}

#newsPage #newsLabel {
  align-self: center;
  width: 100%;
  margin: 0 0 0.55rem;
  text-align: center;
}

.newsItem {
  width: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}

.newsItem:active {
  filter: brightness(1.08);
}

.newsItem .newsLabelParent {
  padding: 0.65rem 0.75rem 0.45rem;
}

.newsImage {
  width: 100%;
  aspect-ratio: 864 / 328;
  overflow: hidden;
  background: rgba(8, 0, 30, 0.65);
}

.newsImage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsDescParent {
  padding: 0.55rem 0.75rem 0.7rem;
}

.newsDescParent h2 {
  font-family: 'Roboto-JDN';
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.newsExtendedItem {
  padding-top: 2.8rem;
}

.newsExtended .newsLabelParent {
  padding: 0;
}

.newsExtended .newsLabelParent h2 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.newsExtendedImage {
  aspect-ratio: 720 / 366;
  background: rgba(8, 0, 30, 0.65);
}

.newsExtendedImage img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════
   § 41 — Pose canvas
   ════════════════════════════════════════════════════════════════ */

/* The canvas is used internally by JS; keep it invisible / zero size */
.pose-canvas {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  opacity:    0;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   § 42 — Coach selection screen
   ════════════════════════════════════════════════════════════════ */

#selectionCoach {
  justify-content: flex-start;
  gap:             0.75rem;
  padding:         calc(var(--safe-bottom) + 4.2rem) 0 calc(var(--safe-bottom) + 1rem);
  background-color: var(--bg);
  overflow:        hidden;
}

.coach-song-title {
  font-family:   'JDN-Display';
  font-size:     1.55rem;
  color:         var(--text);
  text-align:    center;
  text-shadow:   0 0 10px rgba(255, 255, 255, 0.2);
  padding:       0 1rem;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  width:         100%;
  flex-shrink:   0;
}
.coach-song-artist {
  font-family: 'Roboto-JDN';
  font-size:   1rem;
  color:       var(--text-dim);
  text-align:  center;
  flex-shrink: 0;
}

.playersAvatarCoachSelection {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.playersAvatarCoachSelectionIcon {
  width:         2.8rem;
  height:        2.8rem;
  border-radius: 50%;
  border:        2.5px solid var(--cyan);
  object-fit:    cover;
  box-shadow:    0 0 10px var(--cyan-glow);
}

/* Horizontal coach thumbnails row */
.coachList {
  display:         flex;
  flex-direction:  row;
  justify-content: center;
  align-items:     center;
  gap:             0.4rem;
  width:           100vw;
  max-width:       100vw;
  flex:            1;
  min-height:      0;
  padding:         0;
  margin-left:     calc(50% - 50vw);
  margin-right:    calc(50% - 50vw);
  overflow:        visible;
}

.coachList:has(.duo) {
  gap: 0;
  padding: 0;
}

.coachList:has(.trio),
.coachList:has(.quatro) {
  gap: 0;
  padding: 0;
  justify-content: center;
}

/* Override/extend the base .coach rule for the coachList context */
.coachList .coach {
  flex:          0 0 min(62vw, 15rem);
  max-width:     min(62vw, 15rem);
  height:        min(44vh, 22rem);
  cursor:        pointer;
  border-radius: 0;
  border:        none;
  overflow:      visible;
  background:    transparent;
  transition:    filter 0.15s, opacity 0.15s, transform var(--tap-dur);
  min-height:    12rem;
  opacity:       0.72;
  margin-inline: -1rem;
  position:      relative;
  z-index:       1;
}
.coachList .coach.solo {
  flex-basis: min(78vw, 20rem);
  max-width: min(78vw, 20rem);
  margin-inline: 0;
}

.coachList .coach.trio {
  flex-basis: min(39vw, 10.8rem);
  max-width: min(39vw, 10.8rem);
  margin-inline: -0.45rem;
}

.coachList .coach.quatro {
  flex-basis: min(34vw, 9rem);
  max-width: min(34vw, 9rem);
  margin-inline: -0.5rem;
}
.coachList .coach:active { transform: scale(0.96); }
.coachList .coach.selected,
.coachList .coach:focus-visible {
  border-color: transparent;
  filter: drop-shadow(0 0 18px var(--cyan-glow));
  opacity: 1;
  transform: scale(1.18) translateY(-0.45rem);
  z-index: 5;
}

.coachList .coach.trio.selected {
  transform: scale(1.2) translateY(-0.45rem);
}

.coachList .coach.quatro.selected {
  transform: scale(1.22) translateY(-0.45rem);
}
.coachList .coach img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  display:    block;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.72) 88%, transparent 100%);
  mask-image:         linear-gradient(to bottom, #000 0%, #000 78%, rgba(0,0,0,0.72) 88%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size:         100% 100%;
}

.coachName,
.coachDifficulty {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.coachName {
  bottom: 1.25rem;
  font-family: 'Roboto-JDN';
  font-size: 0.72rem;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}

.coachDifficulty {
  bottom: 0.05rem;
  padding: 0.08rem 0.42rem;
  border-radius: var(--r-pill);
  font-family: 'Roboto-JDN';
  font-size: 0.56rem;
  font-weight: bold;
  color: #08001E;
}
.coachDifficulty:empty { display: none; }
.coachDifficulty.easy { background: #38d66b; }
.coachDifficulty.medium { background: #ff9f25; }
.coachDifficulty.hard { background: #ff4747; color: #fff; }

/* "Dance!" button on coach selection */
.selectCoachDanceButton {
  display:       flex;
  flex-direction: column;
  justify-content: center;
  align-items:   center;
  gap:           0.18rem;
  background:    var(--grad-btn);
  color:         #08001E;
  font-family:   'Roboto-JDN';
  font-size:     1.1rem;
  font-weight:   bold;
  border:        none;
  border-radius: var(--r-pill);
  padding:       0.8rem 2.5rem;
  min-width:     10.5rem;
  min-height:    4.2rem;
  line-height:   1.15;
  box-shadow:    var(--shadow-glow);
  flex-shrink:   0;
  cursor:        pointer;
  animation:     glowPulse 2s ease-in-out infinite;
}
.selectCoachDanceButton:active { transform: scale(0.95); animation: none; }

/* "Not enough coins" inline indicator */
.noMoney {
  display:     inline-flex;
  align-items: center;
  justify-content: center;
  gap:         0.24rem;
  background:  rgba(0, 0, 0, 0.38);
  border-radius: var(--r-pill);
  padding:     0.12rem 0.5rem 0.14rem;
  font-family: 'Roboto-JDN';
  font-size:   0.76rem;
  line-height: 1;
  color:       var(--yellow);
  align-self:  center;
  min-width:   3.2rem;
  text-align:  center;
}
.noMoney .coinsIcon {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}

/* "Dance with World" toggle button */
.danceWithWorld {
  display:         flex;
  flex-direction:  row;
  align-items:     center;
  gap:             0.45rem;
  padding:         0.55rem 1.4rem;
  background:      rgba(23, 255, 203, 0.1);
  border:          1.5px solid var(--cyan);
  border-radius:   var(--r-pill);
  font-family:     'Roboto-JDN';
  font-size:       0.88rem;
  color:           var(--cyan);
  cursor:          pointer;
  flex-shrink:     0;
  transition:      background 0.15s;
}
.danceWithWorld:active    { background: var(--cyan-dim); }
.danceWithWorld.active    { background: var(--cyan-dim); border-color: var(--cyan-glow); }
.danceWithWorld img       { width: 1.3rem; height: 1.3rem; object-fit: contain; }

/* ════════════════════════════════════════════════════════════════
   § 43 — Admin choosing screen
   ════════════════════════════════════════════════════════════════ */

#adminChoosing {
  gap:             1rem;
  justify-content: center;
}

.adminAvatar {
  width:         6rem;
  height:        6rem;
  border-radius: 50%;
  border:        3px solid var(--cyan);
  object-fit:    cover;
  box-shadow:    0 0 16px var(--cyan-glow);
  flex-shrink:   0;
}
.admin-nickname {
  font-family: 'JDN-Display';
  font-size:   1.1rem;
  color:       var(--text);
  text-align:  center;
}
.adminSongChooseLabel {
  font-family: 'Roboto-JDN';
  font-size:   0.85rem;
  color:       var(--text-dim);
  text-align:  center;
  padding:     0 1.5rem;
}

/* ════════════════════════════════════════════════════════════════
   § 44 — VIP code activation form
   ════════════════════════════════════════════════════════════════ */

.activation-form {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  width:          100%;
  padding:        0 0.5rem;
}
.activation-form h2 {
  font-family: 'Roboto-JDN';
  font-size:   1.05rem;
  color:       var(--text);
  text-align:  center;
}

/* ════════════════════════════════════════════════════════════════
   § 45 — Misc tweaks & overrides
   ════════════════════════════════════════════════════════════════ */

/* .inactive inside .connectToRoomWindow must still hide children */
.connectToRoomWindow > .inactive { display: none !important; }

/* .roomCodeAllowed: text set by JS when connected; empty = invisible */
.roomCodeAllowed:empty { opacity: 0; }

/* Back-button positioned at topbar level for in-catalog settings sub-pages */
.settingContainer > .backButton {
  position: sticky;
  top:      0;
  z-index:  20;
  /* make it float left above the content */
  align-self: flex-start;
  margin-bottom: 0.2rem;
}

/* In-dance back button: override fixed to relative so it's in the flex flow */
#backButtonDance {
  position: fixed !important;
  top:      calc(var(--safe-top) + 0.8rem);
  left:     0.6rem;
  margin:   0;
  z-index:  999;
}

#backButtonCoachSelection {
  position: fixed !important;
  top:      calc(var(--safe-top) + 0.8rem);
  left:     0.6rem;
  margin:   0;
  z-index:  1000;
}

/* Starbar: coach img must escape the starbar, placed via JS outside or
   handled here by making starbar NOT overflow-hidden when coach is sibling */
/* NOTE: index.html places #danceCoach as a sibling of .starbar,
         not a child, so overflow: hidden on .starbar is safe. */

/* In-dance connect overlay sits over the full dance screen */
#connectToRoomWindowInDance {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(1, 9, 43, 0.56);
  pointer-events: auto;
}

#connectToRoomWindowInDance .areYouSureWindow {
  width: min(88vw, 24rem);
  max-width: 24rem;
  margin: 0 auto;
  position: relative;
  transform: none;
}

/* ── Toast / Snackbar notification (replaces alert()) ─────────── */
@keyframes toastIn  { from { transform: translate(-50%, 120%); opacity: 0; }
                      to   { transform: translate(-50%, 0);     opacity: 1; } }
@keyframes toastOut { from { transform: translate(-50%, 0);     opacity: 1; }
                      to   { transform: translate(-50%, 120%);  opacity: 0; } }

.toast-notification {
  position:        fixed;
  bottom:          calc(var(--tab-bar-h) + var(--safe-bottom) + 0.8rem);
  left:            50%;
  transform:       translate(-50%, 120%);
  opacity:         0;
  visibility:      hidden;
  z-index:         99998;
  background:      rgba(13, 6, 46, 0.97);
  border:          1px solid var(--cyan);
  border-radius:   var(--r-lg);
  color:           var(--text);
  font-family:     'Roboto-JDN';
  font-size:       0.9rem;
  padding:         0.7rem 1.4rem;
  max-width:       min(90vw, 22rem);
  text-align:      center;
  box-shadow:      0 4px 20px rgba(0, 0, 0, 0.6), var(--shadow-glow);
  pointer-events:  none;
  white-space:     pre-wrap;
  line-height:     1.5;
}
.toast-notification.visible {
  animation: toastIn 0.3s ease both;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.toast-notification.hiding {
  animation: toastOut 0.3s ease both;
  visibility: visible;
}

.connection-status {
  position: fixed;
  inset: 0;
  z-index: 99997;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(1, 9, 43, 0.46);
  color: var(--text);
  font-family: 'Roboto-JDN', 'Poppins', sans-serif;
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.18s ease, visibility 0.18s ease;
  pointer-events: none;
}

.connection-status.visible {
  opacity: 1;
  visibility: visible;
}

.connection-status__card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(78vw, 18rem);
  max-width: min(88vw, 24rem);
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(8, 0, 30, 0.92);
  box-shadow: var(--shadow-glow), 0 8px 28px rgba(0,0,0,0.55);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
}

.connection-status.reconnecting .connection-status__card::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.6rem;
  border: 2px solid rgba(255,255,255,0.22);
  border-top-color: var(--cyan);
  border-radius: 50%;
  flex: 0 0 auto;
  animation: loadingSpin 0.85s linear infinite;
}

.connection-status.connected .connection-status__card { border-color: rgba(31,251,129,0.7); }
.connection-status.error .connection-status__card { border-color: rgba(255,71,71,0.75); }

/* Ensure .scrollCatalog inside songsCatalog scrolls properly */
#scrollCatalog.inpagecontainer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--content-pb);
}

/* Playlist detail: .playlist-info row layout fix */
#playlist-info.playlist-info {
  flex-direction: row;
  gap:            0.7rem;
  align-items:    flex-start;
  padding:        3.4rem 0.8rem 0.6rem;
  flex-shrink:    0;
  max-height:     12.2rem;
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
}

#playlist-info .playlisttitle {
  font-size:   1rem;
  white-space: normal;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding:     0;
}

#playlist-info .playlistdesc {
  font-size: 0.72rem;
  line-height: 1.35;
  padding: 0;
  -webkit-line-clamp: 3;
}

#playlist-info .playlist-info-icon {
  width: 5.2rem;
  height: 5.2rem;
}