/* Filter modal styles */
.filter-modal {
  position: fixed; z-index: 1000; top: 0; left: 0; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.filter-modal.hidden { display: none !important; }
.filter-modal-backdrop {
  position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(30,41,59,0.35); backdrop-filter: blur(2px);
}
.filter-modal-content {
  position: relative; z-index: 1; background: var(--white); border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(30,41,59,0.18);
  padding: 2rem 1.5rem; min-width: 320px; max-width: 90vw;
  display: flex; flex-direction: column; gap: 1.25rem;
  animation: viewEnter 0.25s cubic-bezier(0.4,0,0.2,1);
}
.filter-modal-title {
  font-size: 1.25rem; font-weight: 700; color: var(--indigo-700); margin-bottom: 0.5rem;
}
.filter-group { display: flex; flex-direction: column; gap: 0.25rem; }
.filter-group label { font-size: 0.95rem; font-weight: 600; color: var(--slate-600); margin-bottom: 0.1rem; }
.filter-group select {
  font-size: 1rem; padding: 0.4rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--slate-200);
  background: var(--slate-50); color: var(--slate-700); font-family: inherit;
}
.filter-modal-actions {
  display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 0.5rem;
}
.filter-modal .btn-primary, .filter-modal .btn-secondary {
  font-size: 1rem; padding: 0.5rem 1.25rem; border-radius: 0.5rem;
}
/* Boss grid header for top pill */
.boss-grid-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  grid-column: 1 / -1;
  margin-bottom: -1rem;
}
.boss-sync-pill-top-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sync-pill.top-pill {
  margin: 0;
}
/* Reduce gap below the home view header (search bar → pill) */
#homeView .view-header {
  margin-bottom: 0.75rem;
}
/* Boss card sync pill wrap */
.boss-sync-pill-wrap {
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
}
/* Gold aura for VIP live icon */
.live-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.live-icon-vip svg {
  color: var(--amber-500) !important;
  stroke: var(--amber-500) !important;
}
.live-gold-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.75em;
  height: 1.75em;
  background: radial-gradient(circle, rgba(251,191,36,0.45) 0%, rgba(251,191,36,0.15) 70%, transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  animation: gold-aura-pulse 1.6s infinite cubic-bezier(0.4,0,0.2,1);
}
@keyframes gold-aura-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}
/* ══════════════════════════════════════════════════════════════════
   RaidSync — 1:1 match with Figma Tailwind design
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;

  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-900: #78350f;

  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;

  --pink-50:  #fdf2f8;
  --pink-100: #fce7f3;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;

  --rose-50:  #fff1f2;
  --rose-500: #f43f5e;

  --orange-400: #fb923c;
  --white: #ffffff;
  --red-100: #fee2e2;
  --red-300: #fca5a5;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
}

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

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

body {
  min-height: 100vh;
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--slate-800);
  background-color: rgba(238, 242, 255, 0.5); /* bg-indigo-50/50 */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(249, 168, 212, 0.3); } /* selection:bg-pink-300/30 */

img { display: block; max-width: 100%; }

button { cursor: pointer; font: inherit; border: none; background: none; }
input, select { font: inherit; }
a { text-decoration: none; color: inherit; }

.hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   NAVBAR  (fixed-bottom mobile, fixed-top desktop)
   ══════════════════════════════════════════════════════════════════ */
.navbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--white);
  border-top: 1px solid var(--indigo-100);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
}
.navbar-inner {
  max-width: 64rem; margin: 0 auto; padding: 0 1rem;
  display: flex; justify-content: space-between; align-items: center; height: 4rem;
}

/* Logo (desktop only) */
.navbar-logo {
  display: none; align-items: center; gap: 0.5rem; margin-right: 2rem;
  cursor: pointer; background: none; border: none; padding: 0;
}
.logo-icon {
  width: 2rem; height: 2rem; border-radius: 0.75rem; background: var(--indigo-400);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); color: var(--white);
}
.logo-icon svg { width: 1.25rem; height: 1.25rem; }
.navbar-logo span {
  font-weight: 700; font-size: 1.25rem; color: var(--slate-800); letter-spacing: -0.025em;
}

/* Nav links */
.navbar-links {
  display: flex; width: 100%; justify-content: space-around; gap: 0.25rem;
}
.nav-link {
  position: relative; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.25rem; padding: 0.5rem 0.25rem;
  border-radius: 0.75rem; transition: color 0.15s, background-color 0.15s;
  flex: 1; color: var(--slate-400); background: none; border: none;
}
.nav-link:hover { color: var(--indigo-500); background: rgba(238,242,255,0.5); }
.nav-link.active { color: var(--indigo-600); font-weight: 600; }
.nav-link.highlight:not(.active) { color: var(--amber-400); }

.nav-icon { position: relative; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 1.25rem; height: 1.25rem; }

.nav-label { font-size: 0.625rem; font-weight: 500; white-space: nowrap; }

/* Active indicator (mobile pill) */
.active-indicator { display: none; }
.nav-link.active .active-indicator {
  display: block; position: absolute; top: -0.25rem; left: 50%; transform: translateX(-50%);
  width: 2rem; height: 0.25rem; background: var(--indigo-400); border-radius: 0 0 9999px 9999px;
}

/* Queue badge */
.queue-badge {
  position: absolute; top: -0.5rem; right: -0.5rem;
  width: 1rem; height: 1rem; border-radius: 9999px;
  background: var(--pink-400); color: var(--white);
  font-size: 0.625rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Desktop breakpoint */
@media (min-width: 640px) {
  .navbar {
    top: 0; bottom: auto; border-top: none;
    border-bottom: 1px solid var(--indigo-100);
    box-shadow: none; padding-bottom: 0;
  }
  .navbar-logo { display: flex; }
  .navbar-links { width: auto; justify-content: flex-start; gap: 1.5rem; }
  .nav-link {
    flex-direction: row; gap: 0.5rem; flex: none; padding: 0.5rem 0.75rem;
  }
  .nav-link.active { background: var(--indigo-50); }
  .nav-label { font-size: 0.875rem; }
  .nav-link.active .active-indicator { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
  HAMBURGER BUTTON — always in-flow with view title row
   ══════════════════════════════════════════════════════════════════ */
.navbar-hamburger {
  flex-shrink: 0;
  margin-left: auto;
  width: 2.25rem; height: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.625rem;
  background: var(--white); border: 1px solid var(--indigo-100);
  color: var(--slate-600);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.navbar-hamburger:hover { color: var(--indigo-600); background: var(--indigo-50); }
.navbar-hamburger.active { color: var(--indigo-600); background: var(--indigo-50); }
/* VIP page hamburger — right-aligned in header */
.vip-header-hamburger {
  position: absolute; top: 1rem; right: 1rem;
}
/* Mobile: title-row hamburger visible; navbar hamburger hidden */
.hamburger-navbar { display: none; }
@media (min-width: 640px) {
  /* Desktop: navbar hamburger visible; title-row hamburgers hidden */
  .navbar-hamburger:not(.hamburger-navbar) { display: none; }
  .hamburger-navbar {
    display: flex;
    margin-left: 1.5rem;
    background: none; border: none; box-shadow: none;
    width: 2rem; height: 2rem; padding: 0.25rem;
    border-radius: 0.5rem;
    color: var(--slate-500);
    flex-shrink: 0;
    align-items: center; justify-content: center;
    transition: color 0.15s, background 0.15s;
  }
  .hamburger-navbar:hover { color: var(--indigo-600); background: var(--indigo-50); }
  .main-content { padding: 6rem 1rem 2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   VIP NAV — Sparkle animation (eye-catching)
   ══════════════════════════════════════════════════════════════════ */
.nav-link-vip { position: relative; overflow: visible; }

/* ── Teaser state (not yet subscribed): amber glow to attract ── */
.nav-link-vip.highlight:not(.active) { color: var(--amber-500); }
.nav-link-vip.highlight:not(.active) .nav-icon svg { filter: drop-shadow(0 0 3px var(--amber-400)); }

/* ── Premium state (subscribed VIP): always-on golden premium look ── */
.nav-link-vip.vip-subscribed { color: var(--amber-600); background: rgba(255,251,235,0.6); }
.nav-link-vip.vip-subscribed:hover { background: var(--amber-50); }
.nav-link-vip.vip-subscribed .nav-label { font-weight: 600; }
.nav-link-vip.vip-subscribed .nav-icon svg {
  animation: vip-crown-glow 2.4s ease-in-out infinite;
}

.vip-sparkles {
  position: absolute; inset: -4px; pointer-events: none;
}
.sparkle {
  position: absolute; width: 4px; height: 4px; border-radius: 9999px;
  background: var(--amber-400);
  opacity: 0; animation: sparkle-pop 2.4s ease-in-out infinite;
}

/* Teaser sparkles: show when highlight, hide when active (browsing VIP page unsubscribed) */
.nav-link-vip.highlight .sparkle { opacity: 1; }
.nav-link-vip.active:not(.vip-subscribed) .sparkle,
.nav-link-vip:not(.highlight):not(.vip-subscribed) .sparkle { animation: none; opacity: 0; }

/* Premium sparkles: larger, golden, always glowing — show even when active */
.nav-link-vip.vip-subscribed .sparkle {
  width: 5px; height: 5px;
  background: var(--amber-300);
  box-shadow: 0 0 5px var(--amber-400), 0 0 10px rgba(251,191,36,0.45);
  animation: sparkle-premium 2.8s ease-in-out infinite;
  opacity: 1;
}
.nav-link-vip.vip-subscribed .s1 { animation-delay: 0s; }
.nav-link-vip.vip-subscribed .s2 { animation-delay: 0.7s; }
.nav-link-vip.vip-subscribed .s3 { animation-delay: 1.4s; }
.nav-link-vip.vip-subscribed .s4 { animation-delay: 2.1s; }
.nav-link-vip.vip-subscribed .s5 { animation-delay: 0.35s; }
.nav-link-vip.vip-subscribed .s6 { animation-delay: 1.75s; }

/* Position of all sparkles */
.s1 { top: 0; left: 20%; animation-delay: 0s; }
.s2 { top: 15%; right: 0; animation-delay: 0.6s; }
.s3 { bottom: 10%; left: 5%; animation-delay: 1.2s; }
.s4 { bottom: 0; right: 20%; animation-delay: 1.8s; }
.s5 { top: 45%; right: 2%; opacity: 0; animation: none; }
.s6 { bottom: 45%; left: 2%; opacity: 0; animation: none; }

/* Teaser pop animation */
@keyframes sparkle-pop {
  0%, 100% { opacity: 0; transform: scale(0); }
  15% { opacity: 1; transform: scale(1.2); }
  30% { opacity: 0.6; transform: scale(0.8); }
  50% { opacity: 0; transform: scale(0); }
}

/* Premium burst animation — bigger, brighter, more magical */
@keyframes sparkle-premium {
  0%, 100% { opacity: 0;   transform: scale(0); }
  12%       { opacity: 1;   transform: scale(2); }
  30%       { opacity: 0.8; transform: scale(1.3); }
  60%       { opacity: 0.4; transform: scale(0.8); }
  80%       { opacity: 0.1; transform: scale(0.3); }
}

/* Crown icon golden pulse for subscribed VIP */
@keyframes vip-crown-glow {
  0%, 100% {
    filter: drop-shadow(0 0 3px var(--amber-400)) drop-shadow(0 0 6px rgba(251,191,36,0.25));
    color: var(--amber-500);
  }
  50% {
    filter: drop-shadow(0 0 7px var(--amber-400)) drop-shadow(0 0 14px rgba(251,191,36,0.55));
    color: var(--amber-400);
  }
}

/* ══════════════════════════════════════════════════════════════════
  SIDE DRAWER (right slide-in on mobile, left on desktop)
   ══════════════════════════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background 0.25s ease;
}
.drawer-overlay.open {
  background: rgba(0,0,0,0.35); pointer-events: auto;
}

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 70;
  width: 16rem; max-width: 80vw;
  background: var(--white);
  border-right: 1px solid var(--indigo-100);
  box-shadow: 4px 0 12px rgba(0,0,0,0.08);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer.open { transform: translateX(0); }
.drawer.open { transform: translateX(0); }

@media (max-width: 639px) {
  .drawer {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--indigo-100);
    box-shadow: -4px 0 12px rgba(0,0,0,0.08);
    transform: translateX(100%);
  }
  .drawer-header {
    flex-direction: row-reverse;
  }
}

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--indigo-100);
}
.drawer-title {
  font-size: 1rem; font-weight: 700; color: var(--slate-800);
}
.drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--slate-400); cursor: pointer;
  padding: 0.25rem; border-radius: 0.5rem;
  transition: color 0.15s, background 0.15s;
}
.drawer-close:hover { color: var(--slate-700); background: var(--slate-100); }

.drawer-nav {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem;
}
.drawer-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.75rem;
  font-size: 0.9375rem; font-weight: 500; color: var(--slate-600);
  background: none; border: none; cursor: pointer; width: 100%;
  text-align: left; transition: color 0.15s, background 0.15s;
}
.drawer-link:hover { background: var(--indigo-50); color: var(--indigo-600); }
.drawer-link.active { background: var(--indigo-50); color: var(--indigo-600); font-weight: 600; }
.drawer-link svg { flex-shrink: 0; color: var(--slate-400); }
.drawer-link:hover svg,
.drawer-link.active svg { color: var(--indigo-500); }

/* ══════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ══════════════════════════════════════════════════════════════════ */
.main-content {
  padding: 3.5rem 1rem 6rem; max-width: 64rem; margin: 0 auto;
}
@media (min-width: 640px) {
  .main-content { padding: 6rem 1rem 2rem; }
}

/* ══════════════════════════════════════════════════════════════════
   ACCOUNT VIEW
   ══════════════════════════════════════════════════════════════════ */
.account-container { max-width: 28rem; margin: 0 auto; }

.account-card {
  background: var(--white); border: 1px solid var(--indigo-50);
  border-radius: 1rem; padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 640px) { .account-card { padding: 2rem; } }

/* Auth tab toggle */
.auth-tabs {
  display: flex; background: var(--indigo-50); border-radius: 0.75rem;
  padding: 0.25rem; gap: 0.25rem; margin-bottom: 1.25rem;
}
.auth-tab {
  flex: 1; padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.875rem; font-weight: 600; color: var(--slate-500);
  background: none; border: none; cursor: pointer; transition: all 0.15s;
  white-space: nowrap;
}
.auth-tab:hover { color: var(--indigo-500); }
.auth-tab.active {
  background: var(--white); color: var(--indigo-600);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Confirm password shown only in signup mode */
.auth-form-inner .auth-confirm-field { display: none; }
.auth-form-inner[data-mode="signup"] .auth-confirm-field { display: grid; }

/* Email-sent confirmation banner */
.email-sent-banner {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.75rem 1rem; border-radius: 0.75rem; margin-bottom: 1.25rem;
  background: var(--teal-50); border: 1px solid var(--teal-400);
}
.email-sent-banner svg { flex-shrink: 0; margin-top: 1px; color: var(--teal-600); }
.email-sent-body { display: flex; flex-direction: column; gap: 0.25rem; }
.email-sent-title { font-size: 0.8125rem; font-weight: 700; margin: 0; color: var(--teal-700); }
.email-sent-desc { font-size: 0.8125rem; font-weight: 400; margin: 0; color: var(--teal-600); line-height: 1.5; }
.email-sent-desc strong { font-weight: 600; color: var(--teal-700); }

/* ── Player Identity Card ── */
.account-identity-card { padding-bottom: 1.25rem; }
.account-identity {
  display: flex; align-items: center; gap: 1rem;
}
.account-avatar-lg {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px;
  background: var(--indigo-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.account-avatar-lg svg { color: var(--indigo-400); }
.account-identity-info { flex: 1; min-width: 0; }
.account-name {
  font-size: 1.125rem; font-weight: 700; color: var(--slate-800);
  margin: 0 0 0.125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-email {
  font-size: 0.8125rem; color: var(--slate-500); margin: 0 0 0.5rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; }
.account-tier-free {
  font-size: 0.6875rem; font-weight: 700; color: var(--slate-400);
  padding: 0.1875rem 0.5rem; border-radius: 9999px;
  background: var(--slate-50); border: 1px solid var(--slate-200);
  display: inline-flex; align-items: center; line-height: 1.4;
}
.team-badge {
  font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.625rem;
  border-radius: 9999px; text-transform: capitalize;
  display: inline-flex; align-items: center; gap: 0.3rem; line-height: 1.4;
}
.team-badge.team-mystic { background: var(--indigo-50); color: var(--indigo-600); border: 1px solid var(--indigo-200); }
.team-badge.team-valor { background: var(--red-100); color: var(--red-700); border: 1px solid var(--red-300); }
.team-badge.team-instinct { background: var(--amber-50); color: var(--amber-600); border: 1px solid var(--amber-200); }

/* ── Team animated aura ── */
@keyframes auraMystic {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.08), 0 0 0 0 rgba(45, 212, 191, 0.12); }
  50% { box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1), 0 0 12px rgba(45, 212, 191, 0.22); }
}
@keyframes auraValor {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.08), 0 0 0 0 rgba(251, 146, 60, 0.12); }
  50% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1), 0 0 12px rgba(251, 146, 60, 0.24); }
}
@keyframes auraInstinct {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.08), 0 0 0 0 rgba(245, 158, 11, 0.12); }
  50% { box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.1), 0 0 12px rgba(245, 158, 11, 0.24); }
}
@keyframes auraMysticBar {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes auraValorBar {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0 0 rgba(251, 146, 60, 0); }
  50% { background-position: 100% 50%; box-shadow: 0 0 10px rgba(251, 146, 60, 0.2); }
}
@keyframes auraInstinctBar {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 0 0 rgba(245, 158, 11, 0); }
  50% { background-position: 100% 50%; box-shadow: 0 0 10px rgba(245, 158, 11, 0.22); }
}
/* Team select border highlight in edit mode */
.form-select.team-mystic   { border-color: var(--indigo-300); box-shadow: 0 0 0 3px var(--indigo-100); }
.form-select.team-valor    { border-color: var(--red-300);    box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
.form-select.team-instinct { border-color: var(--amber-300);  box-shadow: 0 0 0 3px var(--amber-100); }
/* Team preview strip below select in edit mode */
.team-select-preview {
  height: 6px; border-radius: 9999px; margin-top: 0.375rem;
  transition: opacity 0.3s ease; opacity: 0;
  background-size: 180% 100%;
}
.team-select-preview.team-mystic { opacity: 1; background: linear-gradient(90deg, var(--indigo-200), var(--teal-300), var(--indigo-300)); }
.team-select-preview.team-valor { opacity: 1; background: linear-gradient(90deg, var(--amber-300), var(--orange-400), var(--red-500)); }
.team-select-preview.team-instinct { opacity: 1; background: linear-gradient(90deg, var(--amber-200), var(--amber-400), var(--amber-500)); }
@media (prefers-reduced-motion: no-preference) {
  .team-badge.team-mystic { animation: auraMystic 2.6s ease-in-out infinite; }
  .team-badge.team-valor { animation: auraValor 2.3s ease-in-out infinite; }
  .team-badge.team-instinct { animation: auraInstinct 2.1s ease-in-out infinite; }
  .team-select-preview.team-mystic { animation: auraMysticBar 2.8s linear infinite alternate; }
  .team-select-preview.team-valor { animation: auraValorBar 2.2s ease-in-out infinite; }
  .team-select-preview.team-instinct { animation: auraInstinctBar 2s ease-in-out infinite; }
}

.level-badge {
  font-size: 0.6875rem; font-weight: 700; color: var(--slate-600);
  padding: 0.1875rem 0.5rem; border-radius: 9999px;
  background: var(--slate-100); border: 1px solid var(--slate-200);
  display: inline-flex; align-items: center; line-height: 1.4;
}

/* ── Quick Stats Row ── */
.account-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin-top: 1rem;
}
.account-stat-box {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.875rem 0.5rem; border-radius: 0.75rem;
  background: var(--indigo-50); border: 1px solid var(--indigo-100);
  text-align: center;
}
.account-stat-value {
  font-size: 1.125rem; font-weight: 800; color: var(--indigo-600);
  line-height: 1.2;
}
.account-stat-label {
  font-size: 0.625rem; font-weight: 600; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: 0.025em; margin-top: 0.25rem;
}

/* ── Profile Form 2-col row ── */
.profile-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ── Support Info ── */
.account-support-card { margin-top: 1.25rem; }
.account-support-hint {
  font-size: 0.75rem; color: var(--slate-400); margin: -0.5rem 0 0.75rem;
}
.support-info-grid { display: flex; flex-direction: column; gap: 0.5rem; }
.support-info-row {
  display: flex; flex-direction: column; gap: 0.125rem;
}
.support-info-label {
  font-size: 0.6875rem; font-weight: 600; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: 0.025em;
}
.support-info-value {
  display: flex; align-items: center; gap: 0.375rem;
}
.support-info-value code {
  font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--slate-700); background: var(--slate-100);
  padding: 0.25rem 0.5rem; border-radius: 0.375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.support-copy-btn {
  flex-shrink: 0; padding: 0.375rem; border: 1px solid var(--indigo-100);
  border-radius: 0.5rem; background: var(--white); cursor: pointer;
  color: var(--slate-500); transition: all 0.15s;
}
.support-copy-btn:hover { color: var(--indigo-500); background: var(--indigo-50); }

.auth-form-inner { display: grid; gap: 0.75rem; }

/* ── Shared form elements ── */
.form-label {
  display: grid; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--slate-600);
}
.form-input {
  width: 100%; background: var(--white); border: 1px solid var(--indigo-100);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); border-radius: 0.75rem;
  padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--slate-800); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: var(--indigo-300); box-shadow: 0 0 0 3px var(--indigo-100); }
.form-input::placeholder { color: var(--slate-400); }

.form-select {
  width: 100%; background: var(--white); border: 1px solid var(--indigo-100);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); border-radius: 0.75rem;
  padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--slate-800);
  appearance: none; font-weight: 500; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-select:focus { border-color: var(--indigo-300); box-shadow: 0 0 0 3px var(--indigo-100); }

.pill-vip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
  border: 1px solid rgba(180, 83, 9, 0.40);
  color: #78350f;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.4;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(180, 83, 9, 0.22),
    0 2px 6px rgba(217, 119, 6, 0.32);
}
.pill-vip::after {
  content: "";
  position: absolute; inset: -2px; border-radius: 9999px;
  box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.60);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  will-change: opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .pill-vip::after { animation: pillPulseGold 2.2s ease-in-out infinite; }
}
@keyframes pillPulseGold {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}
.pill-vip svg { width: 0.75rem; height: 0.75rem; color: #78350f; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4)); }

.btn-sign-out {
  width: 100%; padding: 0.75rem; font-size: 0.875rem; font-weight: 600;
  color: var(--slate-500); border: 1px solid var(--indigo-100); border-radius: 0.75rem;
  background: var(--white); cursor: pointer; transition: all 0.15s; text-align: center;
}
.btn-sign-out:hover { color: var(--slate-700); background: var(--slate-50); }

/* ── Trainer Profile ── */
.section-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--slate-700);
  margin-bottom: 1rem;
}
.section-header svg { color: var(--indigo-400); flex-shrink: 0; }
.profile-form { display: flex; flex-direction: column; gap: 0.75rem; }

/* Profile view/edit header row */
.profile-view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.profile-view-header .section-header { margin-bottom: 0; }

/* Read-only profile readout */
.profile-readout {
  display: flex; flex-direction: column; gap: 0;
  margin: 0 0 0.25rem;
}
.profile-readout-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--indigo-50);
}
.profile-readout-row:last-child { border-bottom: none; }
.profile-readout-row dt {
  font-size: 0.8125rem; font-weight: 500; color: var(--slate-500);
  flex-shrink: 0; margin-right: 1rem;
}
.profile-readout-row dd {
  font-size: 0.9375rem; font-weight: 500; color: var(--slate-800);
  text-align: right;
}
.profile-fc-display {
  font-family: 'Plus Jakarta Sans', monospace; letter-spacing: 0.05em;
  color: var(--indigo-600); font-weight: 600;
}

/* Edit / Cancel profile buttons */
.btn-edit-profile {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.375rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 600;
  color: var(--indigo-600); background: var(--indigo-50);
  border: 1px solid var(--indigo-200);
  transition: background 0.15s, color 0.15s;
}
.btn-edit-profile:hover { background: var(--indigo-100); color: var(--indigo-700); }
.btn-cancel-profile {
  display: inline-flex; align-items: center;
  padding: 0.375rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.8125rem; font-weight: 500;
  color: var(--slate-500); background: none;
  border: 1px solid var(--slate-200);
  transition: background 0.15s, color 0.15s;
}
.btn-cancel-profile:hover { background: var(--slate-100); color: var(--slate-700); }
.qr-container {
  display: flex; justify-content: center; padding: 0.75rem 0;
}
.qr-container svg { width: 200px; height: 200px; }
.deeplink-row {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem;
}
.deeplink-url {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.6875rem;
}
.deeplink-copy-btn {
  flex-shrink: 0; padding: 0.375rem; border: 1px solid var(--indigo-100);
  border-radius: 0.5rem; background: var(--white); cursor: pointer;
  color: var(--slate-500); transition: all 0.15s;
}
.deeplink-copy-btn:hover { color: var(--indigo-500); background: var(--indigo-50); }

/* ── Phase 4: Visual Queue Line ── */
.queue-line {
  display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.75rem 0 0.25rem;
}
.queue-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.625rem; border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 600;
  background: var(--indigo-100); color: var(--indigo-600);
  border: 1.5px solid transparent;
}
.queue-pill.is-me {
  border-color: var(--indigo-400);
  box-shadow: 0 0 0 2px var(--indigo-400), 0 0 0 4px var(--indigo-50);
}
.queue-pill.vip {
  background: var(--amber-50); color: var(--amber-600);
  border-color: var(--amber-200);
}
.queue-pill.vip.is-me {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 2px var(--amber-400), 0 0 0 4px var(--amber-50);
}
.queue-pill svg { width: 0.75rem; height: 0.75rem; flex-shrink: 0; }
.queue-vip-divider {
  width: 100%; display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.625rem; font-weight: 700; color: var(--amber-600);
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0.125rem 0;
}
.queue-vip-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--amber-200);
}
.queue-fomo {
  font-size: 0.6875rem; font-weight: 600; color: var(--amber-600);
  margin-top: 0.375rem;
}
.queue-fomo a { color: var(--amber-600); text-decoration: underline; cursor: pointer; }

.btn-leave-queue-full {
  width: 100%;
  margin-top: 0.5rem;
  background: var(--rose-50);
  color: var(--rose-500);
  border: none;
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  height: 2.75rem;
}
.btn-leave-queue-full:hover {
  background: var(--rose-100);
  color: var(--rose-500);
}
.btn-leave-queue-full svg {
  width: 1.25rem;
  height: 1.25rem;
}
.queue-action-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.btn-leave-queue {
  background: var(--rose-50);
  color: var(--rose-500);
  border: none;
  border-radius: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  height: 2.5rem;
}
.btn-leave-queue:hover {
  background: var(--rose-100);
  color: var(--rose-500);
}
.btn-leave-queue svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Visual People Queue ──────────────────────────────────────── */
.queue-people-line {
  display: flex; align-items: flex-end; justify-content: center; gap: 0.5rem;
  overflow-x: auto; width: max-content; min-width: 100%;
  padding: 1.125rem 0.75rem 0.875rem;
  margin: 0.625rem auto 0.375rem;
  scrollbar-width: none;
}
.queue-people-line::-webkit-scrollbar { display: none; }

.qp-behind {
  font-size: 0.625rem; font-weight: 800; color: var(--slate-600);
  background: var(--slate-50); border-radius: 9999px;
  padding: 0.3125rem 0.5625rem; white-space: nowrap;
  align-self: center; flex-shrink: 0; margin-right: 0.375rem;
  border: 1px solid var(--slate-200);
}

.qp-slot {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.375rem; flex-shrink: 0; position: relative;
  min-width: 4.25rem;
}
.qp-icon {
  width: auto; height: auto;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.qp-icon svg { width: 4rem; height: 4rem; }
.qp-lbl {
  font-size: 0.625rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; line-height: 1;
  color: var(--slate-500);
  text-align: center;
}
.qp-crown-sm {
  position: absolute; top: -0.45rem; left: 50%; transform: translateX(-50%);
  line-height: 1; z-index: 1; color: var(--amber-500);
}
.qp-crown-sm svg { width: 1rem; height: 1rem; }

/* Slot colour variants */
.qp-free-ahead .qp-icon { color: var(--indigo-400); opacity: 0.88; }
.qp-vip-ahead  .qp-icon { color: var(--amber-400); opacity: 0.98; }
.qp-me-free    .qp-icon { color: var(--indigo-700); }
.qp-me-free    .qp-lbl  { color: var(--indigo-700); }
.qp-me-vip     .qp-icon { color: var(--amber-400); }
.qp-me-vip     .qp-lbl  { color: var(--amber-600); }
.qp-host       .qp-icon { color: var(--teal-400); }
.qp-host       .qp-lbl  { color: var(--teal-600); }

.qp-me-vip,
.qp-me-free,
.qp-host {
  z-index: 1;
}

.qp-me-vip .qp-icon,
.qp-me-free .qp-icon,
.qp-host .qp-icon {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}

.qp-gap {
  font-size: 0.625rem; font-weight: 800; color: var(--slate-600);
  align-self: center; flex-shrink: 0; padding: 0.2rem 0.45rem;
  white-space: nowrap;
  background: linear-gradient(to right, var(--white), var(--slate-50));
  border: 1px solid var(--slate-200);
  border-radius: 9999px;
}

@media (max-width: 640px) {
  .queue-people-line {
    gap: 0.3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .qp-icon svg {
    width: 3rem;
    height: 3rem;
  }
  .qp-slot {
    min-width: 3.25rem;
  }
  .qp-lbl {
    font-size: 0.5625rem;
  }
}
.queue-teammates {
  margin-top: 1rem;
  padding: 0.875rem;
  border-radius: 0.75rem;
  background: var(--white);
  border: 1px solid var(--indigo-100);
}
.queue-teammates-header {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; color: var(--slate-700);
  margin-bottom: 0.625rem;
}
.queue-teammates-header svg {
  width: 0.875rem; height: 0.875rem; color: var(--indigo-500); flex-shrink: 0;
}
.queue-teammates-empty {
  font-size: 0.75rem; color: var(--slate-500); margin: 0;
}
.queue-teammate-entry.is-me {
  background: var(--indigo-50); border-color: var(--indigo-200);
}
.lobby-avatar.is-me {
  background: var(--indigo-500); color: var(--white);
  font-size: 0.625rem;
}
.queue-teammate-list {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.queue-teammate-entry {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.625rem;
  border-radius: 0.75rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}
.queue-teammate-info {
  flex: 1; min-width: 0;
}
.queue-teammate-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
}
.trainer-meta-row {
  display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: 0.375rem;
}
.queue-pos-block { display: flex; flex-direction: column; gap: 0.125rem; }
.queue-pos-primary {
  font-size: 1.125rem; font-weight: 800; color: var(--indigo-600); line-height: 1;
}
.queue-pos-primary.vip { color: var(--amber-900); }
.queue-pos-secondary {
  font-size: 0.75rem; font-weight: 600; color: var(--amber-600);
  display: flex; align-items: center; gap: 0.2rem;
}
.queue-pos-secondary svg { width: 0.75rem; height: 0.75rem; }

.app-message { font-size: 0.8125rem; font-weight: 500; }
.app-message:not(:empty) { margin-bottom: 1rem; }
.app-message.ok    { color: var(--teal-600); }
.app-message.error { color: var(--red-600); }

/* ══════════════════════════════════════════════════════════════════
   VIEWS
   ══════════════════════════════════════════════════════════════════ */
.view { display: none; }
.view.active { display: block; }

/* ── Shared: heading row ── */
.view-header {
  display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .view-header { flex-direction: row; align-items: center; justify-content: space-between; }
}
/* Feature A — Premium animated view titles */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes titleShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.view-title-wrap {
  display: flex; flex-direction: column; gap: 0.25rem;
}
.view-title-row {
  display: flex; align-items: center; gap: 0.625rem; width: 100%;
}
.view-title {
  font-size: 1.875rem; font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.2;
  background: linear-gradient(135deg, var(--indigo-600) 0%, var(--indigo-400) 50%, var(--indigo-300) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .view-title { animation: titleShimmer 5s ease infinite; }
}
.view-title.vip-gradient {
  background: linear-gradient(135deg, var(--amber-500) 0%, var(--orange-400) 50%, var(--amber-600) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  .view-title.vip-gradient { animation: titleShimmer 4s ease infinite; }
}
.view-title-icon {
  flex-shrink: 0; color: var(--indigo-400); opacity: 0.9;
}
.view-title-icon.vip { color: var(--amber-500); }
.view-title-accent {
  width: 3rem; height: 3px; border-radius: 9999px;
  background: linear-gradient(90deg, var(--indigo-400), var(--indigo-600));
  margin-top: 0.25rem;
}
.view-title-accent.vip {
  background: linear-gradient(90deg, var(--amber-400), var(--orange-400));
}
.view-subtitle { color: var(--slate-500); margin-top: 0.25rem; font-weight: 500; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1rem; background: var(--indigo-400); color: var(--white);
  font-weight: 700; font-size: 0.875rem; border-radius: 0.75rem; border: none;
  transition: background-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-primary:hover { background: var(--indigo-500); }
.btn-primary:disabled {
  background: var(--slate-100); color: var(--slate-400); cursor: not-allowed; box-shadow: none;
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1rem; background: var(--white); color: var(--indigo-600);
  font-weight: 700; font-size: 0.875rem; border-radius: 0.75rem;
  border: 1px solid var(--indigo-200); transition: background-color 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-secondary:hover { background: var(--indigo-50); }

/* ══════════════════════════════════════════════════════════════════
   HOME VIEW
   ══════════════════════════════════════════════════════════════════ */
.search-bar { display: flex; width: 100%; gap: 0.5rem; }
@media (min-width: 640px) { .search-bar { width: auto; } }

.search-input-wrap { position: relative; flex: 1; }
@media (min-width: 640px) { .search-input-wrap { width: 16rem; } }

.search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--slate-400); pointer-events: none;
}
.search-input {
  width: 100%; background: var(--white); border: 1px solid var(--indigo-100);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); border-radius: 0.75rem;
  padding: 0.625rem 1rem 0.625rem 2.25rem; font-size: 0.875rem;
  color: var(--slate-800); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:focus { border-color: var(--indigo-300); box-shadow: 0 0 0 3px var(--indigo-100); }
.search-input::placeholder { color: var(--slate-400); }

.filter-btn {
  padding: 0.625rem; background: var(--white); border: 1px solid var(--indigo-100);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); border-radius: 0.75rem;
  color: var(--slate-500); transition: color 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.filter-btn:hover { color: var(--indigo-600); border-color: var(--indigo-200); }
.filter-btn svg { width: 1rem; height: 1rem; }

/* Boss Grid */
.boss-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .boss-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .boss-grid { grid-template-columns: repeat(3, 1fr); } }

.boss-grid-empty {
  grid-column: 1/-1; text-align: center; padding: 3rem 1rem;
  color: var(--slate-400); font-weight: 500;
}

/* Boss Card */
.boss-card {
  background: var(--white); border-radius: 1rem; border: 1px solid var(--indigo-50);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding: 1rem;
  display: flex; flex-direction: column; gap: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.boss-card:hover {
  border-color: var(--indigo-200);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}

.boss-top { display: flex; align-items: flex-start; gap: 1rem; }

.boss-img-wrap {
  position: relative; width: 5rem; height: 5rem; flex-shrink: 0;
  border-radius: 0.75rem; overflow: hidden;
  border: 1px solid var(--indigo-50); background: rgba(238,242,255,0.5);
}
@media (min-width: 640px) { .boss-img-wrap { width: 6rem; height: 6rem; } }
.boss-img-wrap img {
  width: 100%; height: 100%; object-fit: contain; padding: 0.375rem; transition: transform 0.5s;
}
.boss-card:hover .boss-img-wrap img { transform: scale(1.05); }

.boss-info { flex: 1; min-width: 0; }
.boss-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }

.tag-tier {
  padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 700;
  background: var(--slate-100); border-radius: 0.375rem; color: var(--slate-600);
  border: 1px solid var(--slate-200);
}
.tag-type {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.375rem 0.125rem 0.25rem; font-size: 0.625rem; font-weight: 700;
  background: var(--pink-50); color: var(--pink-500);
  border: 1px solid var(--pink-100); border-radius: 0.375rem;
}
.tag-type img {
  width: 0.875rem; height: 0.875rem; object-fit: contain; flex-shrink: 0;
}

.boss-name {
  font-size: 1.125rem; font-weight: 700; color: var(--slate-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0;
}
.boss-cp { font-size: 0.75rem; color: var(--slate-500); font-weight: 500; margin: 0; }

/* Stats row */
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.stat-box {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.75rem;
}
.stat-box.queue { background: rgba(238,242,255,0.5); border: 1px solid rgba(224,231,255,0.5); }
.stat-box.host  { background: rgba(240,253,250,0.5); border: 1px solid rgba(204,251,241,0.5); }

.stat-icon {
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon svg { width: 1rem; height: 1rem; }
.stat-icon.queue { background: var(--indigo-100); }
.stat-icon.queue svg { color: var(--indigo-500); }
.stat-icon.host { background: var(--teal-100); }
.stat-icon.host svg { color: var(--teal-600); }

.stat-value { font-weight: 700; font-size: 0.875rem; line-height: 1; color: var(--slate-700); }
.stat-label {
  font-size: 0.625rem; text-transform: uppercase; color: var(--slate-500);
  font-weight: 700; margin-top: 0.25rem;
}

/* Join area */
.join-area { margin-top: 0.25rem; }

.btn-queued {
  width: 100%; padding: 0.75rem; border-radius: 0.75rem;
  background: var(--slate-50); color: var(--slate-400);
  font-weight: 700; font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  cursor: not-allowed; border: 1px solid var(--slate-200);
}
.pulse-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 9999px;
  background: var(--teal-400); animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.btn-join {
  width: 100%; padding: 0.75rem; border-radius: 0.75rem;
  background: var(--indigo-50); border: 1px solid var(--indigo-100);
  color: var(--indigo-600); font-weight: 700; font-size: 0.875rem;
  transition: background-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-join:hover { background: var(--indigo-100); }

.join-options { display: grid; gap: 0.5rem; }
.btn-join-std {
  width: 100%; padding: 0.75rem; border-radius: 0.75rem;
  background: var(--indigo-400); color: var(--white);
  font-weight: 700; font-size: 0.875rem; border: none;
  transition: background-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-join-std:hover { background: var(--indigo-500); }

.btn-join-vip {
  width: 100%; padding: 0.75rem; border-radius: 0.75rem;
  background: var(--amber-200); color: var(--amber-900);
  font-weight: 700; font-size: 0.875rem; border: none;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-join-vip:hover { background: var(--amber-300); }
.btn-join-vip svg { width: 1rem; height: 1rem; }

.vip-hint {
  font-size: 0.75rem; text-align: center; color: var(--slate-400); font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════
   HOST VIEW
   ══════════════════════════════════════════════════════════════════ */
.host-container { max-width: 36rem; margin: 0 auto; }

.host-form {
  display: grid; gap: 1.5rem; background: var(--white); padding: 1.5rem;
  border-radius: 1rem; border: 1px solid var(--indigo-50);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 640px) { .host-form { padding: 2rem; } }

.form-group { display: grid; gap: 0.75rem; }
.form-group-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 700; color: var(--slate-600);
}
.form-group-label svg { width: 1rem; height: 1rem; color: var(--slate-400); }

.upload-area {
  border: 2px dashed var(--indigo-200); border-radius: 0.75rem; padding: 2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--indigo-400); cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  background: rgba(248,250,252,0.5);
}
.upload-area:hover {
  border-color: var(--indigo-400); background: rgba(238,242,255,0.5); color: var(--indigo-500);
}
.upload-area svg { width: 2rem; height: 2rem; margin-bottom: 0.75rem; }
.upload-title { font-size: 0.875rem; font-weight: 700; }
.upload-hint { font-size: 0.75rem; margin-top: 0.25rem; color: var(--slate-400); }

.trainer-code-input {
  width: 100%; background: var(--white); border: 1px solid var(--indigo-100);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); border-radius: 0.75rem;
  padding: 0.75rem 1rem; font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.05em; color: var(--slate-800); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.trainer-code-input:focus { border-color: var(--indigo-300); box-shadow: 0 0 0 3px var(--indigo-100); }
.trainer-code-input::placeholder { color: var(--slate-300); }

.range-header { display: flex; justify-content: space-between; align-items: center; }
.range-value {
  color: var(--indigo-600); font-weight: 800; background: var(--indigo-50);
  padding: 0.25rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem;
}
.range-input {
  width: 100%; height: 0.5rem; background: var(--indigo-100); border-radius: 0.5rem;
  appearance: none; -webkit-appearance: none; cursor: pointer; border: none;
}
.range-input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: var(--indigo-400); border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.range-input::-moz-range-thumb {
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  background: var(--indigo-400); border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.range-labels {
  display: flex; justify-content: space-between; font-size: 0.75rem;
  color: var(--slate-400); font-weight: 700;
}
/* Feature E — VIP capacity nudge below host slider */
.range-vip-nudge {
  font-size: 0.75rem; color: var(--amber-600); margin-top: 0.375rem;
}
.range-vip-nudge a {
  color: var(--amber-600); font-weight: 700; text-decoration: underline; cursor: pointer;
}

.host-submit-btn {
  width: 100%; padding: 0.875rem; border-radius: 0.75rem;
  background: var(--indigo-400); color: var(--white); font-weight: 700;
  border: none; transition: background-color 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.host-submit-btn:hover { background: var(--indigo-500); }
.host-submit-btn:disabled {
  background: var(--slate-100); color: var(--slate-400); cursor: not-allowed; box-shadow: none;
}

/* Host success state */
.host-success {
  position: relative;
  max-width: 28rem;
  margin: 0 auto 1.5rem;
  text-align: center;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--teal-100);
  border-radius: 1.25rem;
  background: linear-gradient(180deg, var(--teal-50), var(--white));
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.host-success-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--slate-400);
  background: var(--white);
  border: 1px solid var(--teal-100);
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.host-success-close:hover {
  color: var(--slate-700);
  background: var(--teal-50);
  border-color: var(--teal-300);
}
.host-success-icon {
  width: 5rem; height: 5rem; background: var(--teal-100); border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.host-success-icon svg { width: 2.5rem; height: 2.5rem; color: var(--teal-500); }
.host-success h2 { font-size: 1.5rem; font-weight: 700; color: var(--slate-800); margin-bottom: 1rem; }
.host-success p { color: var(--slate-500); font-weight: 500; }
.host-success-actions {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.host-success-link {
  color: var(--indigo-600);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(224, 231, 255, 0.6);
  transition: color 0.15s, background-color 0.15s;
}
.host-success-link:hover {
  color: var(--indigo-700);
  background: var(--indigo-100);
}

/* Global modal overlay */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(0,0,0,0); pointer-events: none;
  transition: background 0.2s ease;
}
.modal-overlay.open {
  background: rgba(15,23,42,0.45); pointer-events: auto;
}
.modal-card {
  width: 100%; max-width: 22rem;
  background: var(--white);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transform: translateY(0.5rem) scale(0.97);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}
.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.modal-icon {
  width: 3rem; height: 3rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.modal-icon.amber { background: var(--amber-100); color: var(--amber-600); }
.modal-card h3 {
  font-size: 1.125rem; font-weight: 800;
  color: var(--slate-800); text-align: center; margin-bottom: 0.5rem;
}
.modal-card p {
  font-size: 0.875rem; color: var(--slate-500);
  font-weight: 500; text-align: center; line-height: 1.5;
  margin-bottom: 1.25rem;
}
.modal-actions {
  display: flex; gap: 0.625rem;
}
.modal-actions .btn-secondary,
.modal-actions .btn-danger { flex: 1; text-align: center; }

/* ══════════════════════════════════════════════════════════════════
   QUEUES VIEW
   ══════════════════════════════════════════════════════════════════ */
/* Empty state */
.queues-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 60vh; text-align: center; max-width: 28rem; margin: 0 auto;
}
.queues-empty-icon {
  width: 6rem; height: 6rem; background: var(--indigo-100); border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.queues-empty-icon svg { width: 2.5rem; height: 2.5rem; color: var(--indigo-400); }
.queues-empty h2 { font-size: 1.5rem; font-weight: 800; color: var(--slate-800); margin-bottom: 0.5rem; }
.queues-empty p { color: var(--slate-500); font-weight: 500; margin-bottom: 1.5rem; }
.queues-actions {
  display: flex; gap: 1rem; width: 100%; padding-top: 1rem;
}
.queues-actions .btn-primary,
.queues-actions .btn-secondary { flex: 1; padding: 0.75rem 1rem; text-align: center; }

/* Section titles */
.section-title {
  font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid var(--indigo-100); padding-bottom: 0.5rem;
  color: var(--slate-700); margin-bottom: 1rem;
}
.section-count {
  font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem;
  font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.section-count.teal { background: var(--teal-100); color: var(--teal-700); }
.section-count.indigo { background: var(--indigo-100); color: var(--indigo-700); }

/* Host lobby cards */
.hosts-list { display: grid; gap: 1rem; margin-bottom: 2rem; }
.host-lobby-card {
  background: var(--white); border: 1px solid var(--teal-100); border-radius: 1rem;
  padding: 1rem; display: flex; flex-direction: column; gap: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 640px) {
  .host-lobby-card { flex-direction: row; align-items: center; padding: 1.5rem; gap: 1.5rem; }
}
.host-lobby-img {
  width: 4rem; height: 4rem; border-radius: 0.75rem; object-fit: contain; padding: 0.375rem;
  background: var(--indigo-50); border: 1px solid var(--indigo-100);
}
.host-lobby-info { flex: 1; }
.host-lobby-info h3 { font-weight: 700; font-size: 1.125rem; color: var(--slate-800); margin: 0 0 0.25rem; }
.host-lobby-info p { font-size: 0.875rem; color: var(--slate-500); font-weight: 500; margin: 0; }
.host-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.375rem; }
.host-meta-row .trainer-meta-row { margin-top: 0; }
.host-trainer-name { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: var(--slate-600); }
.code-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--slate-700);
  background: var(--slate-100); padding: 0.125rem 0.375rem; border-radius: 0.25rem;
}
.manage-btn {
  width: 100%; padding: 0.625rem 1.25rem; background: var(--indigo-50);
  color: var(--indigo-700); font-size: 0.875rem; font-weight: 700;
  border-radius: 0.75rem; border: none; transition: background-color 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
@media (min-width: 640px) { .manage-btn { width: auto; } }
.manage-btn:hover { background: var(--indigo-100); }

/* Queue cards */
.queue-cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .queue-cards { grid-template-columns: 1fr 1fr; } }

.queue-card {
  background: var(--white); border: 1px solid var(--indigo-100); border-radius: 1rem;
  padding: 1.25rem; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.vip-ribbon { position: absolute; top: 0; right: 0; width: 4rem; height: 4rem; overflow: hidden; pointer-events: none; }
.vip-ribbon-text {
  position: absolute; top: 1rem; right: -1.5rem;
  background: var(--amber-200); color: var(--amber-900);
  font-size: 0.625rem; font-weight: 800; padding: 0.25rem 2rem;
  transform: rotate(45deg); box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* VIP crown badge with subtle sparkle */
.vip-crown-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--amber-100);
  border-radius: 50%;
  border: 1.5px solid var(--amber-200);
  color: var(--amber-500);
  flex-shrink: 0;
  margin-left: auto;
  position: relative;
  overflow: visible;
}
.vip-crown-badge svg {
  width: 1.25rem;
  height: 1.25rem;
  z-index: 1;
  animation: crown-glow-tame 3.2s ease-in-out infinite;
}
@keyframes crown-glow-tame {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(251,191,36,0.2)); }
  50%       { filter: drop-shadow(0 0 3px rgba(251,191,36,0.5)); }
}
.vip-crown-sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--amber-300);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 4px var(--amber-400);
  animation: crown-sparkle-tame 2.8s ease-in-out infinite;
}
.vip-crown-sparkle-1 {
  top: 1px;
  left: 62%;
  animation-delay: 0s;
}
.vip-crown-sparkle-2 {
  bottom: 3px;
  right: 24%;
  animation-delay: 0.9s;
}
.vip-crown-sparkle-3 {
  top: 7px;
  left: 14%;
  animation-delay: 1.8s;
}
@keyframes crown-sparkle-tame {
  0%, 100% { opacity: 0; transform: scale(0.35); }
  18% { opacity: 0.95; transform: scale(1.25); }
  36% { opacity: 0.55; transform: scale(0.85); }
  58% { opacity: 0.15; transform: scale(0.5); }
}

.queue-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.queue-card-header img {
  width: 3rem; height: 3rem; border-radius: 0.75rem; object-fit: contain; padding: 0.375rem;
  border: 1px solid var(--indigo-100); background: var(--indigo-50);
}
.queue-card-hinfo { flex: 1; min-width: 0; }
.queue-card-hinfo h3 { font-weight: 800; font-size: 1.125rem; color: var(--slate-800); margin: 0; }
.queue-card-hinfo p { font-size: 0.75rem; color: var(--slate-500); font-weight: 500; margin: 0; }

/* Right-side icon group in queue card header */
.queue-card-icons {
  display: flex; align-items: center; gap: 0.375rem;
  flex-shrink: 0; margin-left: auto;
}
.queue-card-icons .vip-crown-badge { margin-left: 0; }

/* Info icon buttons */
.queue-info-btn {
  width: 2rem; height: 2rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-400);
  border: 1px solid var(--indigo-100); cursor: pointer; flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.queue-info-btn:hover { background: var(--indigo-100); color: var(--indigo-600); }
.queue-info-btn svg { width: 1rem; height: 1rem; }
.queue-info-btn-ready {
  background: var(--amber-50); color: var(--amber-500); border-color: var(--amber-100);
}
.queue-info-btn-ready:hover { background: var(--amber-100); color: var(--amber-700); }

/* Info speech bubble (in-flow, appears below header) */
.queue-info-bubble {
  background: var(--indigo-50); border: 1px solid var(--indigo-100);
  border-radius: 0.875rem; padding: 0.875rem 1rem;
  margin-bottom: 1rem; position: relative;
}
.queue-info-bubble::before {
  content: ''; position: absolute;
  top: -8px; right: 0.875rem;
  width: 13px; height: 13px;
  background: var(--indigo-50);
  border-left: 1px solid var(--indigo-100);
  border-top: 1px solid var(--indigo-100);
  transform: rotate(45deg);
}
.queue-info-bubble-ready { background: var(--amber-50); border-color: var(--amber-100); }
.queue-info-bubble-ready::before { background: var(--amber-50); border-color: var(--amber-100); }
.queue-info-title {
  font-size: 0.9375rem; font-weight: 700; color: var(--indigo-600);
  display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.25rem;
}
.queue-info-title svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.queue-info-bubble-ready .queue-info-title { color: var(--amber-700); }
.queue-info-desc { font-size: 0.8125rem; color: var(--slate-600); line-height: 1.5; }

.queue-card-leave {
  margin-left: auto; padding: 0.5rem; color: var(--slate-400); border-radius: 0.75rem;
  transition: color 0.15s, background-color 0.15s; border: none; background: none;
}
.queue-card-leave:hover { color: var(--rose-500); background: var(--rose-50); }
.queue-card-leave svg { width: 1.25rem; height: 1.25rem; }

.queue-stats { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.queue-pos-label { font-size: 0.875rem; color: var(--slate-500); font-weight: 700; margin-bottom: 0.25rem; }
.queue-pos-value {
  font-size: 1.875rem; font-weight: 800;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--indigo-500);
}
.queue-eta-label {
  font-size: 0.875rem; color: var(--slate-500); font-weight: 700;
  display: flex; align-items: center; gap: 0.25rem; justify-content: flex-end; margin-bottom: 0.25rem;
}
.queue-eta-label svg { width: 0.875rem; height: 0.875rem; }
.queue-eta-value { font-size: 1.125rem; font-weight: 800; color: var(--slate-700); text-align: right; }

/* Progress bar */
.progress-wrap {
  width: 100%; background: var(--indigo-50); border-radius: 9999px;
  height: 0.625rem; overflow: hidden; border: 1px solid var(--indigo-100);
}
.progress-bar {
  height: 100%; border-radius: 9999px; background: var(--indigo-400);
  transition: width 1s ease;
}
.progress-bar.vip { background: linear-gradient(to right, var(--amber-300), var(--amber-400)); }

/* ── Page load progress bar (top of screen) ─────────────────── */
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--indigo-400);
  box-shadow: 0 0 10px var(--indigo-300);
  border-radius: 0 9999px 9999px 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
}

/* Get Ready alert */
.get-ready {
  margin-top: 1rem; background: var(--amber-50); border: 1px solid var(--amber-200);
  border-radius: 0.75rem; padding: 0.75rem; display: flex; align-items: flex-start; gap: 0.75rem;
}
.get-ready svg { width: 1.25rem; height: 1.25rem; color: var(--amber-500); flex-shrink: 0; margin-top: 0.125rem; }
.get-ready strong { font-size: 0.875rem; font-weight: 700; color: var(--amber-700); display: block; }
.get-ready p { font-size: 0.75rem; color: var(--amber-600); font-weight: 500; margin-top: 0.125rem; }

/* Conflict alert */
.conflict-alert {
  margin-top: 0.75rem; background: #ffece3; border: 1px solid #f0c6b5;
  border-radius: 0.75rem; padding: 0.75rem; color: #8d3a27; font-size: 0.8125rem;
}

/* Invited card variant */
.queue-card-invited {
  border-color: var(--amber-300);
  background: linear-gradient(to bottom, var(--amber-50), var(--white));
}

/* Confirmed card variant */
.queue-card-confirmed {
  border-color: var(--teal-300);
  background: linear-gradient(to bottom, var(--teal-50), var(--white));
}

/* Status banners */
.alert-warning {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--amber-50); border: 1px solid var(--amber-200);
  border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1rem;
}
.alert-warning svg { width: 1rem; height: 1rem; color: var(--amber-500); flex-shrink: 0; margin-top: 0.125rem; }
.alert-warning strong { font-size: 0.875rem; font-weight: 700; color: var(--amber-700); display: block; }
.alert-warning p { font-size: 0.75rem; color: var(--amber-600); font-weight: 500; margin: 0.125rem 0 0; }
.alert-warning .countdown { font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--amber-700); }

.alert-success {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--teal-50); border: 1px solid var(--teal-300);
  border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1rem;
}
.alert-success svg { width: 1.125rem; height: 1.125rem; color: var(--teal-500); flex-shrink: 0; margin-top: 0.125rem; }
.alert-success strong { font-size: 0.875rem; font-weight: 700; color: var(--teal-700); display: block; }
.alert-success p { font-size: 0.75rem; color: var(--teal-600); font-weight: 500; margin: 0.125rem 0 0; }

.alert-info {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: var(--indigo-50); border: 1px solid var(--indigo-200);
  border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1rem;
}
.alert-info svg { width: 1.125rem; height: 1.125rem; color: var(--indigo-500); flex-shrink: 0; margin-top: 0.125rem; }
.alert-info strong { font-size: 0.875rem; font-weight: 700; color: var(--indigo-700); display: block; }
.alert-info p { font-size: 0.75rem; color: var(--indigo-600); font-weight: 500; margin: 0.125rem 0 0; }

/* Friend code display */
.friend-code-block {
  background: var(--slate-50); border: 1px solid var(--slate-200);
  border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1rem; text-align: center;
}
.friend-code-label {
  font-size: 0.6875rem; font-weight: 700; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem;
}
.friend-code-host-meta {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem; margin-bottom: 0.625rem;
}
.friend-code-host-name {
  display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; color: var(--slate-700);
}
.friend-code-host-name svg { color: var(--indigo-500); }
.friend-code-host-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin-top: 0;
}
.friend-code-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}
.copy-fc-btn {
  background: var(--slate-100);
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem;
  color: var(--slate-500);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.copy-fc-btn:hover, .copy-fc-btn.active {
  background: var(--indigo-50);
  color: var(--indigo-600);
}
.copy-fc-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.friend-code-value {
  font-size: 1.25rem; font-weight: 800; letter-spacing: 0.05em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--slate-800);
}

/* Confirm invite button */
.btn-confirm-invite {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-top: 1rem; padding: 0.75rem; border-radius: 0.75rem;
  font-weight: 700; font-size: 0.875rem;
}
.btn-confirm-invite svg { width: 1rem; height: 1rem; }
.btn-confirm-sent {
  background: var(--teal-100);
  color: var(--teal-700);
  border: 1px solid var(--teal-100);
  cursor: default;
}

.lobby-auto-fill-note {
  margin-top: 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-500);
  text-align: center;
}

.lobby-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  margin-left: auto;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  color: var(--slate-400);
  transition: color 0.15s ease, background 0.15s ease;
}
.lobby-info-btn:hover {
  background: var(--slate-100);
  color: var(--slate-600);
}
.lobby-info-btn:focus-visible {
  outline: 2px solid var(--indigo-400);
  outline-offset: 2px;
}
.lobby-info-btn svg {
  width: 1rem;
  height: 1rem;
}

/* ══════════════════════════════════════════════════════════════════
   VIP VIEW
   ══════════════════════════════════════════════════════════════════ */
.vip-container { max-width: 48rem; margin: 0 auto; }

.vip-header { text-align: center; margin-bottom: 3rem; position: relative; }
.vip-crown-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem; background: var(--amber-100); border-radius: 1.5rem;
  margin-bottom: 0.5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.vip-crown-wrap svg { width: 2.5rem; height: 2.5rem; color: var(--amber-500); }

.vip-page-title {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -0.025em; color: var(--slate-800);
}
.vip-gradient {
  background: linear-gradient(to right, var(--amber-400), var(--orange-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.vip-page-desc {
  font-size: 1.125rem; color: var(--slate-500); font-weight: 500;
  max-width: 36rem; margin: 1rem auto 0;
}

.vip-grid { display: grid; gap: 2rem; }
@media (min-width: 768px) { .vip-grid { grid-template-columns: 1fr 1fr; } }

.plan-card {
  border-radius: 1.5rem; padding: 2rem; position: relative; overflow: hidden;
  transition: border-color 0.15s;
}
.plan-card .glow {
  position: absolute; top: 0; right: 0; width: 8rem; height: 8rem;
  border-radius: 9999px; filter: blur(48px); margin-right: -2.5rem; margin-top: -2.5rem;
  pointer-events: none;
}
.plan-card.free-plan {
  background: var(--white); border: 1px solid var(--indigo-50);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.plan-card.free-plan:hover { border-color: var(--indigo-100); }
.plan-card.free-plan .glow { background: rgba(224,231,255,0.5); }

.plan-card.premium-plan {
  background: linear-gradient(to bottom, var(--amber-50), var(--white));
  border: 1px solid var(--amber-200);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
.plan-card.premium-plan .glow { background: rgba(253,230,138,0.5); }
@media (min-width: 768px) { .plan-card.premium-plan { transform: translateY(-1rem); } }

.most-popular {
  position: absolute; top: 0; right: 0;
  background: var(--amber-300); color: var(--amber-900);
  font-size: 0.75rem; font-weight: 800; padding: 0.375rem 1rem;
  border-bottom-left-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.plan-name { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; }
.free-plan .plan-name { color: var(--slate-800); }
.premium-plan .plan-name { color: var(--amber-600); }

.plan-desc { font-weight: 500; margin-bottom: 2rem; }
.free-plan .plan-desc { color: var(--slate-500); }
.premium-plan .plan-desc { color: rgba(180,83,9,0.7); }

.plan-features { display: grid; gap: 1rem; margin-bottom: 2rem; list-style: none; }
.plan-feature {
  display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem;
}
.feature-icon {
  width: 1.5rem; height: 1.5rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feature-icon svg { width: 1rem; height: 1rem; }

.free-plan .feature-icon { background: var(--indigo-50); }
.free-plan .feature-icon svg { color: var(--indigo-400); }
.free-plan .plan-feature span { color: var(--slate-600); font-weight: 500; }

.premium-plan .feature-icon {
  background: var(--white); border: 1px solid var(--amber-200);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.premium-plan .feature-icon svg { color: var(--amber-600); }
.premium-plan .plan-feature { font-weight: 700; }
.premium-plan .plan-feature span { color: var(--slate-700); }

.plan-price { font-size: 1.875rem; font-weight: 800; color: var(--slate-800); margin-bottom: 1.5rem; }
.plan-price-sub { font-size: 0.875rem; font-weight: 500; }
.free-plan .plan-price-sub { color: var(--slate-400); }
.premium-plan .plan-price-sub { color: var(--slate-500); }

.btn-downgrade {
  width: 100%; padding: 0.875rem; border-radius: 0.75rem;
  border: 2px solid var(--indigo-100); background: transparent;
  font-weight: 700; color: var(--indigo-600); transition: background-color 0.15s;
}
.btn-downgrade:hover { background: var(--indigo-50); }
.btn-downgrade:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-upgrade {
  width: 100%; padding: 0.875rem; border-radius: 0.75rem;
  font-weight: 800; border: none; transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-upgrade.is-vip {
  background: var(--amber-100); color: var(--amber-600); cursor: not-allowed;
  border: 2px solid var(--amber-200);
}
.btn-upgrade.not-vip {
  background: linear-gradient(to right, var(--amber-300), var(--amber-400));
  color: var(--amber-900); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.btn-upgrade.not-vip:hover {
  background: linear-gradient(to right, var(--amber-400), var(--amber-500));
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}

/* ══════════════════════════════════════════════════════════════════
   SYNC FOOTER
   ══════════════════════════════════════════════════════════════════ */
.sync-footer {
  margin-top: 2rem;
  padding-bottom: 1rem;
}
.sync-footer-inner {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  padding: 0.5rem 1rem; border-radius: 9999px;
  background: var(--white); border: 1px solid var(--indigo-50);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  max-width: fit-content; margin: 0 auto;
}
.sync-text {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 500; color: var(--slate-400);
}
.sync-text svg { color: var(--teal-500); }
.sync-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 600; color: var(--indigo-500);
  background: none; border: none; padding: 0; cursor: pointer;
  transition: color 0.15s;
}
.sync-btn:hover { color: var(--indigo-600); }
.sync-btn svg { width: 0.875rem; height: 0.875rem; }

/* ══════════════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════════════ */
.toast-container {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-radius: 0.75rem;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  pointer-events: auto;
  animation: toast-in 0.3s ease-out;
  max-width: 90vw;
}
.toast svg { flex-shrink: 0; width: 1.125rem; height: 1.125rem; }
.toast.toast-success {
  background: var(--teal-50); border: 1px solid var(--teal-400);
  color: var(--teal-700);
}
.toast.toast-error {
  background: var(--rose-50); border: 1px solid var(--rose-500);
  color: var(--red-600);
}
.toast.toast-info {
  background: var(--indigo-50); border: 1px solid var(--indigo-200);
  color: var(--indigo-700);
}
.toast.toast-out { animation: toast-out 0.25s ease-in forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(1rem); }
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 2 — Host Lobby & Raid Lifecycle
   ══════════════════════════════════════════════════════════════════ */

/* Raiding card variant */
.queue-card-raiding {
  border-color: var(--indigo-300);
  background: linear-gradient(to bottom, var(--indigo-50), var(--white));
}

/* Done card variant */
.queue-card-done {
  border-color: var(--slate-200);
  background: var(--slate-50);
  opacity: 0.7;
}

/* Raid in progress banner */
.raid-in-progress-banner {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--indigo-50); border: 1px solid var(--indigo-200);
  border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1rem;
  font-size: 0.875rem; font-weight: 700; color: var(--indigo-700);
}
.raid-in-progress-banner svg { width: 1rem; height: 1rem; color: var(--indigo-500); flex-shrink: 0; }

/* Raid done banner */
.raid-done-banner {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--teal-50); border: 1px solid var(--teal-300);
  border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1rem;
  font-size: 0.875rem; font-weight: 700; color: var(--teal-700);
}
.raid-done-banner svg { width: 1rem; height: 1rem; color: var(--teal-500); flex-shrink: 0; }

/* Start raid / finish raiding button */
.btn-start-raid {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem; border-radius: 0.75rem; border: none; cursor: pointer;
  font-weight: 700; font-size: 0.875rem; font-family: inherit;
  background: var(--indigo-600); color: var(--white);
  transition: background 0.15s ease;
}
.btn-start-raid:hover { background: var(--indigo-700); }
.btn-start-raid:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-start-raid svg { width: 1rem; height: 1rem; }

.btn-delete-lobby {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border-radius: 0.75rem; border: none; cursor: pointer;
  font-weight: 600; font-size: 0.8125rem; font-family: inherit;
  background: var(--red-100); color: var(--red-700);
  transition: background 0.15s ease; margin-top: 0.5rem;
}
.btn-delete-lobby:hover { background: var(--red-500); color: var(--white); }
.btn-delete-lobby svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; display: block; }

/* Danger / destructive action button */
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem; font-weight: 600;
  color: var(--red-700); background: var(--red-100);
  border: 1px solid var(--red-300); border-radius: 0.75rem;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.btn-danger:hover:not(:disabled) { background: var(--red-500); color: var(--white); }
.btn-danger:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Host Lobby Panel ──────────────────────────────────────────── */
.lobby-panel {
  background: var(--white); border: 1px solid var(--slate-200);
  border-radius: 1rem; padding: 1.25rem; margin-top: 0.5rem;
}

.lobby-panel-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
.lobby-back-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: var(--slate-100); border: 1px solid var(--slate-200);
  cursor: pointer; flex-shrink: 0; transition: background 0.15s ease;
}
.lobby-back-btn:hover { background: var(--slate-200); }
.lobby-back-btn svg { width: 1rem; height: 1rem; color: var(--slate-600); }
.lobby-panel-title-group { flex: 1; }
.lobby-panel-title { font-size: 1rem; font-weight: 700; color: var(--slate-800); margin: 0; }
.lobby-slots-wrap {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem;
}
.lobby-id-tag {
  font-size: 0.6875rem; font-weight: 700; color: var(--slate-400); letter-spacing: 0.03em;
}
.lobby-slots {
  display: flex; gap: 0.25rem; align-items: center;
}
.lobby-slot {
  width: 0.625rem; height: 0.625rem; border-radius: 9999px;
  background: var(--slate-200); border: 1px solid var(--slate-300);
}
.lobby-slot.filled {
  background: var(--teal-500); border-color: var(--teal-400);
}
.lobby-slots-count {
  font-size: 0.6875rem; font-weight: 700; color: var(--teal-600);
}
.lobby-host-strip {
  display: flex; align-items: center; gap: 0.875rem;
  padding: 0.75rem 0; border-top: 1px solid var(--slate-100);
  margin-bottom: 0.75rem;
}
.lobby-host-img-sm {
  width: 3rem; height: 3rem; border-radius: 0.75rem;
  object-fit: contain; padding: 0.375rem; background: var(--indigo-50);
  border: 1px solid var(--indigo-100); flex-shrink: 0;
}
.lobby-host-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.lobby-host-name {
  font-size: 0.8125rem; font-weight: 600; color: var(--slate-700);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.lobby-fc-line { font-size: 0.8125rem; color: var(--slate-500); font-weight: 500; margin: 0; }

/* Queue entry list */
.lobby-queue-list {
  display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;
}
.lobby-queue-entry {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem; border-radius: 0.75rem;
  background: var(--slate-50); border: 1px solid var(--slate-100);
}
.lobby-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--indigo-100); color: var(--indigo-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
  text-transform: uppercase;
}
.lobby-entry-info { flex: 1; min-width: 0; }
.lobby-entry-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.lobby-entry-name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem; font-weight: 700; color: var(--slate-800);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lobby-entry-top .status-pill {
  margin-left: auto;
  white-space: nowrap;
}
.lobby-entry-meta {
  display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: 0.375rem;
}
.lobby-fc {
  font-size: 0.6875rem; font-weight: 600; color: var(--slate-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem;
  flex-wrap: wrap;
}
.lobby-fc-empty {
  font-family: inherit;
}
.lobby-fc-empty em {
  color: var(--slate-400);
  font-style: italic;
}

/* Status pills */
.status-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.1875rem 0.5rem;
  border-radius: 9999px; flex-shrink: 0;
}
.status-queued { background: var(--slate-100); color: var(--slate-600); }
.status-invited { background: var(--amber-100); color: var(--amber-700); }
.status-confirmed { background: var(--teal-100); color: var(--teal-700); }
.status-raiding { background: var(--indigo-100); color: var(--indigo-700); }
.status-done { background: var(--teal-100); color: var(--teal-700); }

/* Inline hint shown in host manage-lobby when a joiner's invite has expired
   and the system auto-cycled a fresh invite (invite_attempts > 0). */
.lobby-reinvite-hint {
  display: inline-flex; align-items: center; gap: 0.3125rem;
  margin-top: 0.25rem;
  font-size: 0.6875rem; font-weight: 600;
  color: var(--amber-700);
  line-height: 1.2;
}
.lobby-reinvite-hint svg {
  width: 0.75rem; height: 0.75rem; flex-shrink: 0;
}

/* Pulsing dot for raiding status */
.pulse-dot-sm {
  width: 0.375rem; height: 0.375rem; border-radius: 50%;
  background: var(--indigo-500); animation: pulse-sm 1.5s ease-in-out infinite;
}
@keyframes pulse-sm {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* Copy friend code button */
.copy-fc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 0.25rem;
  background: transparent; border: none; cursor: pointer;
  color: var(--slate-400); transition: color 0.15s ease;
  padding: 0;
}
.copy-fc-btn:hover { color: var(--indigo-500); }
.copy-fc-btn.active {
  color: var(--indigo-600);
  background: var(--indigo-50);
}
.copy-fc-btn svg { width: 0.75rem; height: 0.75rem; }

.lobby-qr-preview {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--white);
  border: 1px solid var(--indigo-100);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.lobby-qr-preview p {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--slate-500);
  font-weight: 600;
}
.lobby-qr-canvas {
  display: flex;
  justify-content: center;
}
.lobby-qr-canvas svg {
  width: 120px;
  height: 120px;
}

/* Lobby action buttons row */
.lobby-actions {
  display: flex; gap: 0.5rem; margin-top: 0.75rem;
}
.lobby-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.375rem;
  padding: 0.625rem; border-radius: 0.75rem; border: none; cursor: pointer;
  font-weight: 700; font-size: 0.8125rem; font-family: inherit;
  transition: background 0.15s ease;
}
.lobby-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lobby-action-btn svg { width: 0.875rem; height: 0.875rem; }

.lobby-invite-btn {
  background: var(--amber-100); color: var(--amber-700);
}
.lobby-invite-btn:hover:not(:disabled) { background: var(--amber-200); }

.lobby-start-btn {
  background: var(--indigo-600); color: var(--white);
}
.lobby-start-btn:hover:not(:disabled) { background: var(--indigo-700); }

.lobby-finish-btn {
  background: var(--teal-500); color: var(--white);
}
.lobby-finish-btn:hover:not(:disabled) { background: var(--teal-600); }

/* Host done waiting message */
.host-done-msg {
  text-align: center; font-size: 0.8125rem; font-weight: 600;
  color: var(--slate-500); padding: 0.5rem 0;
}

/* Inactivity warning inside lobby */
.lobby-inactivity-warning {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--amber-50); border: 1px solid var(--amber-200);
  border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
  font-size: 0.75rem; font-weight: 600; color: var(--amber-700);
}
.lobby-inactivity-warning svg { width: 0.875rem; height: 0.875rem; color: var(--amber-500); flex-shrink: 0; }

/* Lobby raiding banner */
.lobby-raiding-banner {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--indigo-50); border: 1px solid var(--indigo-200);
  border-radius: 0.5rem; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
  font-size: 0.8125rem; font-weight: 700; color: var(--indigo-700);
}
.lobby-raiding-banner svg { width: 0.875rem; height: 0.875rem; color: var(--indigo-500); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   Admin — Boss status badges
   ═══════════════════════════════════════════════════════════════ */
.boss-status-badge {
  display: inline-flex; align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.02em; white-space: nowrap;
}
.boss-status-active   { background: var(--green-100);  color: var(--green-700); }
.boss-status-scheduled { background: var(--amber-100); color: var(--amber-700); }
.boss-status-hidden   { background: var(--red-100);    color: var(--red-700); }
.boss-status-expired  { background: var(--slate-100);  color: var(--slate-500); }

/* Admin — tabs */
.admin-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--indigo-100);
  margin-bottom: 1.5rem;
}
.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-tab:hover { color: var(--indigo-600); }
.admin-tab.active {
  color: var(--indigo-600);
  border-bottom-color: var(--indigo-400);
}
.admin-tab-panel { display: none; }
.admin-tab-panel.active { display: block; }
#admin-panel-audit { padding-top: 1.25rem; }
#admin-panel-audit.active { display: flex; flex-direction: column; gap: 1.25rem; }

/* Admin — section toolbar (title row + action button above a list) */
.admin-section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 0 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--slate-100);
  flex-wrap: wrap;
}
.admin-section-toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--slate-800);
  line-height: 1;
}
.admin-section-toolbar-title svg { color: var(--indigo-500); }
.admin-section-toolbar-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 0.4375rem;
  background: var(--slate-100);
  color: var(--slate-600);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.admin-toggle-add {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.5rem;
  white-space: nowrap;
}
.admin-toggle-add[aria-expanded="true"] {
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
  box-shadow: none;
}
.admin-toggle-add[aria-expanded="true"]:hover {
  background: var(--slate-200);
  color: var(--slate-800);
}
.admin-toggle-add svg { flex-shrink: 0; }
@media (max-width: 420px) {
  .admin-section-toolbar { padding-top: 0.625rem; }
  .admin-toggle-add { padding: 0.5rem 0.75rem; flex: 0 0 auto; }
}

/* Admin — boss cards */
.admin-boss-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-boss-card:hover { border-color: var(--slate-300); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.admin-boss-card.editing {
  border-color: var(--indigo-300); box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
  padding: 1rem 1.25rem 1.25rem;
}

.admin-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.admin-card-title-row {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.9375rem; line-height: 1.4;
}
.admin-card-title-row strong { font-weight: 700; color: var(--slate-800); }
.admin-card-label { font-weight: 500; color: var(--slate-500); font-size: 0.8125rem; }
.admin-tier-stars { color: var(--amber-500); font-size: 0.8125rem; letter-spacing: 0.05em; font-weight: 600; }

.admin-card-meta {
  font-size: 0.75rem; color: var(--slate-500); margin-top: 0.25rem;
  line-height: 1.5;
}

.admin-edit-boss, .admin-cancel-edit {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--slate-200); border-radius: 0.5rem;
  padding: 0.25rem 0.5rem; cursor: pointer; color: var(--slate-500);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.admin-edit-boss:hover { color: var(--indigo-600); border-color: var(--indigo-200); background: var(--indigo-50); }
.admin-cancel-edit { border: none; padding: 0.25rem; }
.admin-cancel-edit:hover { color: var(--red-500); }

.admin-card-body {
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid var(--slate-100);
  animation: adminSlideDown 0.25s ease-out;
}

/* Admin — empty state */
.admin-empty-state {
  text-align: center; padding: 2.5rem 1rem; color: var(--slate-400);
  font-size: 0.875rem; line-height: 1.6;
}
.admin-empty-state svg { color: var(--slate-300); margin-bottom: 0.5rem; }

/* Admin — Add form wrapper */
.admin-add-form-wrap {
  background: var(--white);
  border: 1px solid var(--indigo-200);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(99,102,241,0.08);
  animation: adminSlideDown 0.25s ease-out;
}
.admin-add-form-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--slate-100);
}
.admin-add-form-title { font-size: 1rem; font-weight: 700; color: var(--slate-800); }
.admin-close-add {
  display: inline-flex; align-items: center; background: none; border: none;
  color: var(--slate-400); cursor: pointer; padding: 0.25rem;
  transition: color 0.15s;
}
.admin-close-add:hover { color: var(--red-500); }

/* Admin — slide-down animation */
@keyframes adminSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Admin — form layout */
.admin-boss-form {
  display: flex; flex-direction: column; gap: 0.875rem;
}
.admin-boss-form .form-group {
  display: grid; gap: 0.25rem;
}
.admin-boss-form .form-row {
  gap: 0.75rem;
}
.admin-boss-form .form-row .form-group {
  min-width: 7rem;
}

/* Admin — form utilities */
.admin-form-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.25rem 0 0; color: var(--slate-400); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.admin-form-divider::before,
.admin-form-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--slate-200);
}

.admin-form-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem;
  padding-top: 0.75rem; margin-top: 0.25rem; border-top: 1px solid var(--slate-100);
}

/* Admin — scheduling rows (label + date + time) */
.admin-schedule-row {
  display: flex; flex-direction: column; gap: 0.25rem;
}
@media (min-width: 480px) {
  .admin-schedule-row {
    flex-direction: row; align-items: center; gap: 0.75rem;
  }
}
.admin-schedule-label {
  white-space: nowrap; min-width: 7rem; flex-shrink: 0;
}
.admin-schedule-inputs {
  display: flex; gap: 0.5rem; flex: 1;
}
.admin-schedule-inputs .form-input { flex: 1; }
.admin-schedule-time { max-width: 7.5rem; flex: 0 0 auto !important; }

/* Admin — form row (multi-column) */
.form-row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 8rem; }
.form-checkbox-row { flex-direction: row; align-items: center; gap: 0.5rem; }
.form-checkbox-row input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--indigo-500); }
.required-star { color: var(--red-500); }

/* Admin — improved boss card layout */
.admin-boss-card-inner {
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.admin-boss-img-wrap {
  flex-shrink: 0; width: 3.5rem; height: 3.5rem;
  background: var(--slate-50); border-radius: 0.625rem;
  border: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.admin-boss-img { width: 100%; height: 100%; object-fit: contain; }
.admin-boss-details { flex: 1; min-width: 0; }
.admin-boss-name { font-size: 0.9375rem; font-weight: 700; color: var(--slate-800); }
.admin-boss-type-row {
  display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.2rem; margin-bottom: 0.35rem;
}
.tag-type--sm {
  font-size: 0.6875rem; padding: 0.1rem 0.45rem;
}
.tag-type--sm img { width: 0.75rem; height: 0.75rem; }
.admin-boss-no-type { font-size: 0.75rem; color: var(--slate-400); }
.admin-boss-stats-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  margin-bottom: 0.3rem;
}
.admin-boss-stat {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.75rem; color: var(--slate-500);
}
.admin-boss-stat svg { flex-shrink: 0; }
.admin-boss-dates-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
  font-size: 0.75rem; color: var(--slate-500);
}
.admin-boss-date-label {
  font-weight: 600; color: var(--slate-400); text-transform: uppercase;
  font-size: 0.6875rem; letter-spacing: 0.04em;
}
.admin-boss-date-val { color: var(--slate-700); }
.admin-boss-date-sep { color: var(--slate-300); }
.admin-boss-actions {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 0.25rem;
}

/* Admin — Users tab */
#admin-panel-users { padding-top: 1rem; }
#admin-panel-users.active { display: block; }

.admin-user-card {
  background: var(--white);
  border: 1px solid var(--indigo-50);
  border-radius: 0.875rem;
  padding: 0.875rem 1rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-user-card:hover { border-color: var(--indigo-100); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.admin-user-card-main {
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.admin-user-avatar {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  background: var(--indigo-50); border-radius: 9999px;
  border: 1px solid var(--indigo-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--indigo-400);
}
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.375rem;
  font-size: 0.9375rem; font-weight: 700; color: var(--slate-800);
  line-height: 1.4;
}
.admin-user-email { font-size: 0.8125rem; color: var(--slate-500); margin-top: 0.1rem; word-break: break-all; }
.admin-user-meta-row { font-size: 0.75rem; color: var(--slate-500); margin-top: 0.15rem; }
.admin-user-meta-label { font-weight: 600; color: var(--slate-400); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.04em; margin-right: 0.25rem; }
.admin-user-dates {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 0.2rem;
  align-items: flex-end; text-align: right;
}
.admin-user-date-row {
  font-size: 0.75rem; color: var(--slate-500); white-space: nowrap;
}
.admin-user-date-row .admin-user-meta-label {
  display: block; margin-right: 0; margin-bottom: 0.05rem;
}

/* Admin — user badges */
.admin-user-badge {
  display: inline-flex; align-items: center; gap: 0.2rem;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.5;
}
.admin-user-badge--admin {
  background: var(--indigo-100); color: var(--indigo-600); border: 1px solid var(--indigo-200);
}
.admin-user-badge--vip {
  background: var(--amber-100); color: var(--amber-700); border: 1px solid var(--amber-200);
}

/* Admin — pagination */
.admin-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.admin-page-btn {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: var(--white); border: 1px solid var(--indigo-100);
  border-radius: 0.625rem; padding: 0.4rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--indigo-600);
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.admin-page-btn:disabled { color: var(--slate-400); border-color: var(--slate-200); cursor: default; }
.admin-page-btn:not(:disabled):hover { background: var(--indigo-50); border-color: var(--indigo-200); }
.admin-page-info {
  font-size: 0.8125rem; color: var(--slate-500); font-weight: 500;
}
.admin-page-size-select {
  background: var(--white); border: 1px solid var(--indigo-100);
  border-radius: 0.625rem; padding: 0.35rem 0.625rem;
  font-size: 0.8125rem; font-weight: 600; color: var(--indigo-600);
  cursor: pointer; outline: none;
}
.admin-page-size-select:hover { border-color: var(--indigo-200); }
.admin-page-size-select:focus { border-color: var(--indigo-400); }

/* Admin — loading state */
.admin-loading-state {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.75rem; padding: 3rem 1rem;
  color: var(--slate-400); font-size: 0.875rem;
}

/* Sync mode badge */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
}
.sync-pill--realtime {
  background: var(--teal-100);
  color: var(--teal-700);
  border: 1px solid var(--teal-300);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.35);
  position: relative;
}
@media (prefers-reduced-motion: no-preference) {
  .sync-pill--realtime { animation: liveGlow 1.8s ease-in-out infinite; }
}
@keyframes liveGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0.45), 0 0 6px rgba(20, 184, 166, 0.25); }
  50%      { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18), 0 0 14px rgba(20, 184, 166, 0.55); }
}
.sync-pill--polling {
  background: var(--slate-100);
  color: var(--slate-500);
  border: 1px solid var(--slate-200);
}

/* Slot stats label — inline beside sync pill in section header */
.slot-stats-label {
  font-size: 0.6875rem;
  color: var(--slate-500);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Generic card — used by admin audit panels
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--white);
  border: 1px solid var(--indigo-100);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  overflow: hidden;
}
.card-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--indigo-50);
  background: var(--indigo-50);
}
@media (min-width: 640px) { .card-header { padding: 1rem 1.5rem; } }
.card-header-title {
  font-size: 1rem; font-weight: 700; color: var(--slate-800);
  margin: 0; display: flex; align-items: center; gap: 0.5rem;
}
.card-header-title svg { width: 1rem; height: 1rem; color: var(--indigo-500); }
.card-body { padding: 1.25rem; }
@media (min-width: 640px) { .card-body { padding: 1.5rem; } }

/* Helpers: hint text, muted text, inline form row */
.form-group-hint {
  font-size: 0.75rem; color: var(--slate-400); line-height: 1.4;
  margin-top: -0.25rem;
}
.text-muted { color: var(--slate-400); }
.form-row--inline {
  display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap;
}

/* ── Audit config — master toggle ─────────────────────────────── */
.audit-master-toggle {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--indigo-50);
  border: 1px solid var(--indigo-100);
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}
.audit-master-toggle label {
  font-size: 0.875rem; font-weight: 700; color: var(--slate-700);
  cursor: pointer;
}

/* Audit config — tuning row */
.audit-tuning-row {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.audit-tuning-item { flex: 1; min-width: 8rem; }
.audit-tuning-item label {
  display: block; font-size: 0.75rem; font-weight: 600;
  color: var(--slate-500); margin-bottom: 0.375rem;
}
.audit-tuning-item .form-input { width: 100%; }

/* Audit config — category grid */
.audit-cat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem 1.5rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 640px) {
  .audit-cat-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.audit-cat-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem; border-radius: 0.5rem;
  transition: background 0.1s;
}
.audit-cat-item:hover { background: var(--indigo-50); }
.audit-cat-item label {
  font-size: 0.8125rem; font-weight: 500; color: var(--slate-700);
  cursor: pointer; display: flex; align-items: center; gap: 0.375rem;
}
.audit-cat-item input[type=checkbox] { width: 1rem; height: 1rem; accent-color: var(--indigo-500); cursor: pointer; }
.audit-cat-hint {
  font-size: 0.625rem; font-weight: 500; padding: 0.0625rem 0.375rem;
  border-radius: 9999px; line-height: 1.4;
}
.audit-cat-hint--locked { background: var(--indigo-100); color: var(--indigo-600); }
.audit-cat-hint--warn   { background: var(--amber-50); color: var(--amber-600); }

/* ── Danger zone — purge section ──────────────────────────────── */
.danger-zone {
  border: 1px solid var(--red-300);
  border-radius: 1rem;
  overflow: hidden;
}
.danger-zone-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--red-100);
  border-bottom: 1px solid var(--red-300);
  font-size: 0.875rem; font-weight: 700; color: var(--red-700);
}
.danger-zone-header svg { width: 1rem; height: 1rem; color: var(--red-500); }
.danger-zone-body { padding: 1.25rem; background: var(--white); }
.danger-zone-section { margin-bottom: 1.25rem; }
.danger-zone-section:last-child { margin-bottom: 0; }
.danger-zone-label {
  font-size: 0.8125rem; font-weight: 600; color: var(--slate-700);
  margin-bottom: 0.25rem;
}
.danger-zone-hint {
  font-size: 0.75rem; color: var(--slate-400);
  margin-bottom: 0.75rem; line-height: 1.4;
}
.danger-zone-divider {
  border: none; border-top: 1px solid var(--red-100); margin: 1rem 0;
}

/* ── Egg Hosting Card ── */
.egg-card {
  position: relative;
  background: var(--indigo-50);
  border: 1.5px solid var(--indigo-200);
  border-radius: 0.875rem;
  box-shadow: 0 1px 4px rgba(80,112,255,0.07);
  padding: 1rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.22s, box-shadow 0.22s, background 0.22s;
  overflow: hidden;
}
.egg-card.active {
  border-color: var(--amber-300);
  box-shadow: 0 4px 18px rgba(251,191,36,0.13);
  background: var(--amber-50);
}
/* Toggle row */
.egg-toggle-label {
  display: flex; align-items: center; gap: 0.75rem;
  cursor: pointer; font-weight: 700; font-size: 0.9375rem;
  user-select: none;
}
/* Egg icon */
.egg-toggle-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--amber-100);
  border-radius: 50%;
  border: 1.5px solid var(--amber-200);
  color: var(--amber-500);
  transition: background 0.22s, border-color 0.22s, transform 0.18s, color 0.22s;
}
.egg-card.active .egg-toggle-icon {
  background: var(--amber-200);
  border-color: var(--amber-400);
  color: var(--amber-700);
  transform: scale(1.08);
}
/* Text stack */
.egg-toggle-text {
  display: flex; flex-direction: column; flex: 1; gap: 0.1rem;
}
.egg-toggle-text > :first-child {
  font-weight: 700; color: var(--slate-800); font-size: 0.9375rem; line-height: 1.3;
}
.egg-toggle-desc {
  font-size: 0.8125rem; font-weight: 400; color: var(--slate-500);
}
/* Custom toggle switch */
.egg-toggle-switch {
  flex-shrink: 0; display: inline-flex; align-items: center;
}
.egg-toggle-checkbox {
  display: none;
}
.egg-toggle-track {
  display: inline-flex; align-items: center;
  width: 2.75rem; height: 1.5rem;
  background: var(--slate-200);
  border-radius: 9999px;
  padding: 0.1875rem;
  transition: background 0.22s;
  cursor: pointer;
}
.egg-toggle-checkbox:checked + .egg-toggle-track {
  background: var(--amber-400);
}
.egg-toggle-thumb {
  width: 1.125rem; height: 1.125rem;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.egg-toggle-checkbox:checked + .egg-toggle-track .egg-toggle-thumb {
  transform: translateX(1.25rem);
}
/* Divider */
.egg-card-divider {
  height: 1px;
  background: var(--amber-200);
  margin: 0.75rem -1rem 0.875rem -1rem;
  opacity: 0.7;
}
/* Hatch time section */
.egg-card-content {
  display: none;
}
.egg-card.active .egg-card-content {
  display: block;
}
.egg-hatch-label {
  display: flex; align-items: center; gap: 0.375rem;
}
.egg-hatch-clock-icon {
  color: var(--amber-500); flex-shrink: 0;
}
.egg-hatch-time-row {
  display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0;
  min-width: 0;
}
.egg-hatch-input {
  width: 100%; min-width: 0; box-sizing: border-box; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  background: var(--white);
  border: 1.5px solid var(--amber-200);
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--slate-800);
  box-shadow: 0 1px 3px rgba(251,191,36,0.07);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.egg-hatch-input:focus {
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px var(--amber-100);
  outline: none;
}
.egg-hatch-optional {
  color: var(--slate-400); font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════
   Queue card — invited / confirmed flat variants
   ──────────────────────────────────────────────────────────────────
   When the card background is already tinted (amber for invited,
   teal for confirmed) the inner alert banner, friend-code block, and
   teammates list duplicate that tint with their own borders, creating
   a "boxes inside boxes" look. These overrides flatten those inner
   containers so the outer card does all the framing — content is
   separated by thin dividers instead of nested rectangles.
   ══════════════════════════════════════════════════════════════════ */

/* Alert banner becomes an inline strip — no box, no paragraph split */
.queue-card-invited > .alert-warning,
.queue-card-confirmed > .alert-success {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.875rem;
  align-items: center;
}
.queue-card-invited > .alert-warning strong,
.queue-card-confirmed > .alert-success strong {
  display: inline;
  font-size: 0.875rem;
}
.queue-card-invited > .alert-warning p,
.queue-card-confirmed > .alert-success p {
  display: inline;
  margin: 0 0 0 0.375rem;
  font-size: 0.75rem;
}
.queue-card-invited > .alert-warning svg {
  margin-top: 0;
  width: 1rem; height: 1rem;
}

/* Friend-code block: drop the slate panel, use a hairline divider */
.queue-card-invited .friend-code-block,
.queue-card-confirmed .friend-code-block {
  background: transparent;
  border: none;
  border-top: 1px solid var(--amber-200);
  border-radius: 0;
  padding: 0.875rem 0 0.5rem;
  margin: 0.875rem 0 0.25rem;
}
.queue-card-confirmed .friend-code-block {
  border-top-color: var(--teal-300);
}
.queue-card-invited .friend-code-host-meta,
.queue-card-confirmed .friend-code-host-meta {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.queue-card-invited .friend-code-value,
.queue-card-confirmed .friend-code-value {
  font-size: 1.375rem;
}
.queue-card-invited .copy-fc-btn,
.queue-card-confirmed .copy-fc-btn {
  background: transparent;
  color: var(--slate-500);
  padding: 0.375rem;
}
.queue-card-invited .copy-fc-btn:hover,
.queue-card-invited .copy-fc-btn.active {
  background: var(--amber-100);
  color: var(--amber-700);
}
.queue-card-confirmed .copy-fc-btn:hover,
.queue-card-confirmed .copy-fc-btn.active {
  background: var(--teal-100);
  color: var(--teal-700);
}

/* Teammates block: matches the same flat divider treatment */
.queue-card-invited .queue-teammates,
.queue-card-confirmed .queue-teammates {
  background: transparent;
  border: none;
  border-top: 1px solid var(--amber-200);
  border-radius: 0;
  padding: 0.875rem 0 0;
  margin-top: 0.875rem;
}
.queue-card-confirmed .queue-teammates {
  border-top-color: var(--teal-300);
}

/* Primary CTA stays full-width but gets slightly tighter top margin
   since the divider above already provides separation */
.queue-card-invited .queue-action-row,
.queue-card-confirmed .queue-action-row {
  margin-top: 0.875rem;
}

/* Subtle leave button — used on cards that already carry a primary CTA */
.btn-leave-subtle {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
.btn-leave-subtle:hover,
.btn-leave-subtle:focus-visible {
  color: var(--rose-500);
  background: var(--rose-50);
  outline: none;
}
.btn-leave-subtle svg {
  width: 0.875rem; height: 0.875rem;
}

/* Flat inline host identity — shown on the joiner card only during 'raiding'.
   Replaces the boxed .friend-code-block to reduce visual noise once the
   friend-code / QR affordances are no longer useful. */
.host-inline-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--slate-600);
}
.host-inline-line svg {
  color: var(--indigo-500);
  flex-shrink: 0;
}
.host-inline-line .host-inline-label {
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
}
.host-inline-line .host-inline-name {
  font-weight: 700;
  color: var(--slate-800);
}
.host-inline-line .host-inline-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-left: auto;
}

/* ── Analytics admin panel ─────────────────────────────────── */
/* Root admin panel that hosts analytics. Clamp to viewport so nothing escapes
   horizontally on mobile Safari (iPhone). */
#admin-panel-analytics {
  max-width: 100%;
  overflow-x: hidden;
}
.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  max-width: 100%;
}
.analytics-header-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-800);
}
.analytics-header-title svg { color: var(--indigo-500); }
.analytics-header-title h2 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.analytics-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.analytics-range-bar {
  display: inline-flex;
  background: var(--slate-100);
  border-radius: 0.625rem;
  padding: 0.1875rem;
  gap: 0.125rem;
  flex-wrap: wrap;
  max-width: 100%;
}
.analytics-range-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--slate-600);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.analytics-range-btn:hover { color: var(--slate-800); }
.analytics-range-btn.active {
  background: #fff;
  color: var(--indigo-700);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.analytics-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
}

.analytics-stat-grid {
  display: grid;
  /* 140px keeps two cards side-by-side on 375px iPhone (viewport - admin padding). */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.625rem;
  margin-bottom: 1.25rem;
  max-width: 100%;
}
.analytics-stat-card {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  min-width: 0;
  overflow: hidden;
}
.analytics-stat-card .analytics-stat-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analytics-stat-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.analytics-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--slate-800);
  margin-top: 0.25rem;
  line-height: 1.1;
}
.analytics-stat-sub {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 0.125rem;
}

.analytics-block {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  min-width: 0;       /* allow this block to shrink inside grid tracks */
  max-width: 100%;
  overflow: hidden;   /* clip any rogue inner content on mobile Safari */
}

/* ══════════════════════════════════════════════════════════════════
   Dark Mode (VIP-gated) — activated via [data-theme="dark"] on <html>
   Palette: GitHub-dimmed inspired — warm slate with layered elevation.
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  /* Surfaces — body is darkest, cards are +1 step, inner chips +2 */
  --white:     #1e293b;   /* card / modal surface */
  --slate-50:  #273449;   /* inner chip / subtle bg */
  --slate-100: #334155;   /* hover / divider */
  --slate-200: #3e4a63;   /* card border (visible against body + surface) */
  --slate-300: #4b5876;
  /* Muted icon / placeholder tier */
  --slate-400: #94a3b8;
  /* Text ramp (inverted — lighter = stronger) */
  --slate-500: #cbd5e1;
  --slate-600: #e2e8f0;
  --slate-700: #eef2f7;
  --slate-800: #f8fafc;

  /* Indigo tints → deep violet-slate so "subtle indigo" surfaces still read as accent */
  --indigo-50:  #1f2547;   /* subtle accent bg (e.g. nav hover, in-queue box) */
  --indigo-100: #2a3270;   /* stronger accent bg + card accent border */
  --indigo-200: #3c4494;
  /* Interactive indigo stays bright — lift shades a touch for contrast on dark */
  --indigo-400: #8b95ff;
  --indigo-500: #7c87ff;
  --indigo-600: #6b75f5;
  --indigo-700: #5b63dd;

  /* Status tints softened so pills don't glare */
  --amber-50:  #3a2a07;
  --amber-100: #4a360a;
  --teal-50:   #0b3b33;
  --teal-100:  #0f4f45;
  --pink-50:   #3a1132;
  --pink-100:  #4a1740;
  --rose-50:   #3a0f1a;
  --red-100:   #3a1414;
  --green-100: #0b3a23;

  /* Pill *text* tokens must stay bright on dark (light theme used the
     dark -700 shade against a light -100 bg; on dark we flip to light
     shades against our dark -100 bg so text remains legible). */
  --amber-600: #fcd34d;
  --amber-700: #fde68a;
  --amber-900: #fef3c7;
  --red-500:   #f87171;
  --red-600:   #fca5a5;
  --red-700:   #fecaca;
  --teal-500:  #5eead4;
  --teal-600:  #99f6e4;
  --teal-700:  #99f6e4;
  --teal-300:  #0d9488;    /* border stays mid-teal, visible on dark bg */
  --green-500: #4ade80;
  --green-600: #86efac;
  --green-700: #bbf7d0;
  --pink-400:  #f9a8d4;
  --pink-500:  #f472b6;
  --rose-500:  #fda4af;
  --orange-400: #fdba74;
}

/* Body: warm deep slate — slightly lighter than pure black for eye comfort */
:root[data-theme="dark"] body {
  background-color: #0f172a;
  color: var(--slate-700);
}

/* Stronger card separation: add subtle top highlight + visible border */
:root[data-theme="dark"] .boss-card,
:root[data-theme="dark"] .account-card,
:root[data-theme="dark"] .queue-card,
:root[data-theme="dark"] .filter-modal-content,
:root[data-theme="dark"] .analytics-block {
  background: var(--white);
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
              0 2px 8px rgba(0, 0, 0, 0.35);
}

/* In Queue / Open Hosts stat boxes — light rgbas become dead grey on dark;
   restore saturation with dark indigo/teal tints. */
:root[data-theme="dark"] .stat-box.queue {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.22);
}
:root[data-theme="dark"] .stat-box.host {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.22);
}

/* Specific hardcoded rgba overrides that don't flow through tokens */
:root[data-theme="dark"] .nav-link:hover { background: rgba(124, 135, 255, 0.10); }
:root[data-theme="dark"] .filter-modal-backdrop { background: rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .filter-modal-content { box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7); }

/* Navbar mirrors card treatment */
:root[data-theme="dark"] .navbar {
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.10);
}

/* Search input — keep it visible on dark */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: var(--slate-50);
  color: var(--slate-700);
  border-color: rgba(148, 163, 184, 0.18);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--slate-500); opacity: 0.7; }

/* VIP button on dark — rich gold gradient with crisp dark text for legibility */
:root[data-theme="dark"] .btn-join-vip,
:root[data-theme="dark"] .vip-join-btn {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 55%, #d97706 100%);
  color: #1f1204;                         /* near-black warm brown for max contrast */
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.65);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 6px 18px rgba(245, 158, 11, 0.30);
  filter: none;
}
:root[data-theme="dark"] .btn-join-vip:hover,
:root[data-theme="dark"] .vip-join-btn:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.25),
    0 8px 22px rgba(245, 158, 11, 0.42);
}
:root[data-theme="dark"] .btn-join-vip svg,
:root[data-theme="dark"] .vip-join-btn svg {
  color: #1f1204;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
}

/* ── Dark-mode pill glow amplification ─────────────────────────
   Uses a ::after pseudo-element that animates ONLY opacity for a
   buttery-smooth GPU-compositor pulse (no shadow-redraw jank). */
:root[data-theme="dark"] .team-badge,
:root[data-theme="dark"] .sync-pill--realtime {
  position: relative;
  isolation: isolate;
}
:root[data-theme="dark"] .team-badge::after,
:root[data-theme="dark"] .sync-pill--realtime::after {
  content: "";
  position: absolute; inset: -2px; border-radius: 9999px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  will-change: opacity;
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] .team-badge::after,
  :root[data-theme="dark"] .sync-pill--realtime::after {
    animation: pillPulseDark 2s ease-in-out infinite;
  }
}
@keyframes pillPulseDark {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* Team Mystic — indigo neon */
:root[data-theme="dark"] .team-badge.team-mystic {
  background: rgba(99, 102, 241, 0.18);
  border: 1px solid #818cf8;
  color: #e0e7ff;
  text-shadow: 0 0 6px rgba(129, 140, 248, 0.70);
  animation: none;   /* override light-mode box-shadow pulse */
}
:root[data-theme="dark"] .team-badge.team-mystic::after {
  box-shadow: 0 0 10px 2px rgba(129, 140, 248, 0.75);
}

/* Team Valor — red neon */
:root[data-theme="dark"] .team-badge.team-valor {
  background: rgba(239, 68, 68, 0.20);
  border: 1px solid #f87171;
  color: #fff1f2;
  text-shadow: 0 0 6px rgba(248, 113, 113, 0.80);
  animation: none;
}
:root[data-theme="dark"] .team-badge.team-valor::after {
  box-shadow: 0 0 10px 2px rgba(248, 113, 113, 0.80);
}

/* Team Instinct — amber neon */
:root[data-theme="dark"] .team-badge.team-instinct {
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid #fbbf24;
  color: #fffbeb;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.80);
  animation: none;
}
:root[data-theme="dark"] .team-badge.team-instinct::after {
  box-shadow: 0 0 10px 2px rgba(251, 191, 36, 0.80);
}

/* Sync Live pill — teal neon */
:root[data-theme="dark"] .sync-pill--realtime {
  background: rgba(20, 184, 166, 0.18);
  border: 1px solid #5eead4;
  color: #ccfbf1;
  text-shadow: 0 0 6px rgba(94, 234, 212, 0.80);
  animation: none;   /* drop base liveGlow, pseudo handles pulse */
}
:root[data-theme="dark"] .sync-pill--realtime::after {
  box-shadow: 0 0 10px 2px rgba(94, 234, 212, 0.85);
}
:root[data-theme="dark"] .sync-pill--polling {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.30);
  color: #cbd5e1;
}

/* VIP pill on dark — molten gold but tamed: keep inner enamel rich,
   shrink outer ember so it doesn't eclipse neighbors. */
:root[data-theme="dark"] .pill-vip {
  border-color: rgba(251, 191, 36, 0.70);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(180, 83, 9, 0.30),
    0 2px 8px rgba(217, 119, 6, 0.45);
}
:root[data-theme="dark"] .pill-vip::after {
  box-shadow: 0 0 12px 2px rgba(251, 191, 36, 0.70);
}

/* Stat card numbers on Account page — ensure high contrast on dark */
:root[data-theme="dark"] .account-stat-box {
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(129, 140, 248, 0.28);
}

/* Fancy QR frame in dark mode — gradient conic border + soft aura */
:root[data-theme="dark"] .qr-container {
  padding: 1rem 0 0.75rem;
}
:root[data-theme="dark"] .qr-container svg,
:root[data-theme="dark"] .qr-container canvas,
:root[data-theme="dark"] .qr-container img {
  position: relative;
  padding: 10px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),                 /* crisp inner hairline */
    0 0 0 3px rgba(129, 140, 248, 0.55),                 /* indigo neon ring */
    0 0 18px 2px rgba(129, 140, 248, 0.55),              /* indigo glow */
    0 0 36px 6px rgba(94, 234, 212, 0.25),               /* teal outer glow */
    0 8px 28px rgba(0, 0, 0, 0.55);                      /* soft drop shadow */
}

/* ── Appearance (theme toggle) card ─────────────────────────────── */
.appearance-card { margin-top: 1.25rem; }

.appearance-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  border-radius: 0.75rem;
  padding: 0.375rem;
  margin-top: 0.75rem;
}

.appearance-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--slate-600);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  min-width: 0;
}
.appearance-seg-btn:hover { color: var(--indigo-600); }
.appearance-seg-btn.active {
  background: var(--white);
  color: var(--indigo-600);
  border-color: var(--indigo-200);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.appearance-seg-btn svg { flex-shrink: 0; }

.appearance-hint {
  font-size: 0.75rem;
  color: var(--slate-500);
  margin-top: 0.5rem;
}

/* Locked (non-VIP) variant */
.appearance-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1rem 0.5rem 0.25rem;
}
.appearance-lock-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--amber-100), var(--amber-300));
  color: var(--amber-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.appearance-lock-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--slate-800);
  margin: 0;
}
.appearance-lock-sub {
  font-size: 0.8125rem;
  color: var(--slate-500);
  margin: 0;
  max-width: 22rem;
}
.appearance-lock-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8125rem;
  font-family: inherit;
  background: linear-gradient(135deg, var(--amber-400), var(--amber-500));
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.appearance-lock-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.45);
}
.analytics-block-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--slate-700);
  margin: 0 0 0.75rem;
}
.analytics-empty {
  color: var(--slate-500);
  font-size: 0.8125rem;
  padding: 0.5rem 0;
}
.analytics-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate-600);
  font-size: 0.875rem;
  padding: 1rem;
}
.analytics-loading svg { animation: spin 0.9s linear infinite; }

.analytics-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 0;
  max-width: 100%;
}
@media (min-width: 720px) {
  .analytics-two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.analytics-two-col > .analytics-block { margin-bottom: 1rem; }

.analytics-bar-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.analytics-bar-row {
  display: grid;
  /* minmax(0, ...) lets both tracks shrink to fit narrow iPhone widths */
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.analytics-bar-label {
  color: var(--slate-700);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.analytics-bar-track {
  position: relative;
  background: var(--slate-100);
  border-radius: 0.375rem;
  height: 1.5rem;
  overflow: hidden;
}
.analytics-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--indigo-500), var(--indigo-700));
  border-radius: 0.375rem;
  transition: width 0.25s ease;
}
.analytics-bar-value {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0 0.5rem;
  line-height: 1.5rem;
  mix-blend-mode: normal;
  text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
}
.analytics-bar-sub {
  font-weight: 500;
  opacity: 0.85;
  margin-left: 0.375rem;
}

.analytics-day-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  height: 140px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.25rem;
  max-width: 100%;
  /* momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.analytics-day-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 28px;
  flex: 1 0 28px;
}
.analytics-day-bar {
  width: 100%;
  max-width: 32px;
  background: linear-gradient(180deg, var(--indigo-500), var(--indigo-700));
  border-radius: 0.25rem 0.25rem 0 0;
  min-height: 2px;
}
.analytics-day-label {
  font-size: 0.6875rem;
  color: var(--slate-500);
  font-weight: 600;
}

.analytics-hour-grid {
  display: grid;
  /* minmax(0, 1fr) lets the 24 cells compress to fit even 320px-wide viewports
     on iPhone SE. Without this, the cells’ intrinsic content width pushes the
     grid out to ~576px and overflows the viewport. */
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 0.125rem;
  max-width: 100%;
}
.analytics-hour-cell {
  aspect-ratio: 1 / 1;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
.analytics-hour-label {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--slate-700);
  opacity: 0.75;
}
/* Hide every-other hour label on narrow iPhones so they don’t overlap. */
@media (max-width: 520px) {
  .analytics-hour-cell:nth-child(odd) .analytics-hour-label { display: none; }
}
@media (max-width: 380px) {
  .analytics-hour-cell .analytics-hour-label { display: none; }
}

.analytics-recent-table {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.analytics-recent-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.analytics-recent-table th,
.analytics-recent-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--slate-100);
  white-space: nowrap;
}
.analytics-recent-table th {
  background: var(--slate-50);
  font-weight: 700;
  color: var(--slate-600);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.analytics-recent-table td { color: var(--slate-700); }
.analytics-recent-table tbody tr:last-child td { border-bottom: none; }
.analytics-recent-path {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--slate-600);
}
@media (max-width: 520px) {
  .analytics-recent-path { max-width: 140px; }
  .analytics-recent-table th,
  .analytics-recent-table td { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
}
.analytics-recent-table code {
  font-size: 0.75rem;
  background: var(--slate-100);
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  color: var(--slate-700);
}
.analytics-badge-authed {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
  background: var(--teal-100);
  color: var(--teal-700);
  margin-left: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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


/* ══════════════════════════════════════════════════════════════════
   Per-type color scheme for .tag-type pills (light + dark)
   ══════════════════════════════════════════════════════════════════ */
.tag-type[data-type="normal"]   { background:#f5f5f4; color:#57534e; border-color:#e7e5e4; }
.tag-type[data-type="fire"]     { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.tag-type[data-type="water"]    { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.tag-type[data-type="grass"]    { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.tag-type[data-type="electric"] { background:#fefce8; color:#a16207; border-color:#fef08a; }
.tag-type[data-type="ice"]      { background:#ecfeff; color:#0e7490; border-color:#a5f3fc; }
.tag-type[data-type="fighting"] { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.tag-type[data-type="poison"]   { background:#faf5ff; color:#7e22ce; border-color:#e9d5ff; }
.tag-type[data-type="ground"]   { background:#fef3c7; color:#854d0e; border-color:#fde68a; }
.tag-type[data-type="flying"]   { background:#eff6ff; color:#0369a1; border-color:#bae6fd; }
.tag-type[data-type="psychic"]  { background:#fdf2f8; color:#be185d; border-color:#fbcfe8; }
.tag-type[data-type="bug"]      { background:#f7fee7; color:#4d7c0f; border-color:#d9f99d; }
.tag-type[data-type="rock"]     { background:#fafaf9; color:#78716c; border-color:#e7e5e4; }
.tag-type[data-type="ghost"]    { background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }
.tag-type[data-type="dragon"]   { background:#eef2ff; color:#3730a3; border-color:#c7d2fe; }
.tag-type[data-type="dark"]     { background:#f1f5f9; color:#334155; border-color:#cbd5e1; }
.tag-type[data-type="steel"]    { background:#f1f5f9; color:#475569; border-color:#cbd5e1; }
.tag-type[data-type="fairy"]    { background:#fdf2f8; color:#db2777; border-color:#fbcfe8; }

:root[data-theme="dark"] .tag-type[data-type="normal"]   { background:rgba(168,162,158,0.18); color:#e7e5e4; border-color:rgba(168,162,158,0.38); }
:root[data-theme="dark"] .tag-type[data-type="fire"]     { background:rgba(239,68,68,0.18);   color:#fca5a5; border-color:rgba(239,68,68,0.42); }
:root[data-theme="dark"] .tag-type[data-type="water"]    { background:rgba(59,130,246,0.20);  color:#93c5fd; border-color:rgba(59,130,246,0.45); }
:root[data-theme="dark"] .tag-type[data-type="grass"]    { background:rgba(34,197,94,0.18);   color:#86efac; border-color:rgba(34,197,94,0.42); }
:root[data-theme="dark"] .tag-type[data-type="electric"] { background:rgba(234,179,8,0.22);   color:#fde047; border-color:rgba(234,179,8,0.48); }
:root[data-theme="dark"] .tag-type[data-type="ice"]      { background:rgba(6,182,212,0.20);   color:#67e8f9; border-color:rgba(6,182,212,0.45); }
:root[data-theme="dark"] .tag-type[data-type="fighting"] { background:rgba(220,38,38,0.22);   color:#fca5a5; border-color:rgba(220,38,38,0.52); }
:root[data-theme="dark"] .tag-type[data-type="poison"]   { background:rgba(168,85,247,0.22);  color:#d8b4fe; border-color:rgba(168,85,247,0.48); }
:root[data-theme="dark"] .tag-type[data-type="ground"]   { background:rgba(217,119,6,0.22);   color:#fcd34d; border-color:rgba(217,119,6,0.48); }
:root[data-theme="dark"] .tag-type[data-type="flying"]   { background:rgba(125,211,252,0.18); color:#bae6fd; border-color:rgba(125,211,252,0.42); }
:root[data-theme="dark"] .tag-type[data-type="psychic"]  { background:rgba(236,72,153,0.22);  color:#f9a8d4; border-color:rgba(236,72,153,0.48); }
:root[data-theme="dark"] .tag-type[data-type="bug"]      { background:rgba(132,204,22,0.22);  color:#bef264; border-color:rgba(132,204,22,0.48); }
:root[data-theme="dark"] .tag-type[data-type="rock"]     { background:rgba(168,162,158,0.22); color:#d6d3d1; border-color:rgba(168,162,158,0.45); }
:root[data-theme="dark"] .tag-type[data-type="ghost"]    { background:rgba(99,102,241,0.24);  color:#a5b4fc; border-color:rgba(99,102,241,0.50); }
:root[data-theme="dark"] .tag-type[data-type="dragon"]   { background:rgba(79,70,229,0.24);   color:#a5b4fc; border-color:rgba(79,70,229,0.50); }
:root[data-theme="dark"] .tag-type[data-type="dark"]     { background:rgba(71,85,105,0.38);   color:#cbd5e1; border-color:rgba(71,85,105,0.58); }
:root[data-theme="dark"] .tag-type[data-type="steel"]    { background:rgba(100,116,139,0.24); color:#cbd5e1; border-color:rgba(100,116,139,0.48); }
:root[data-theme="dark"] .tag-type[data-type="fairy"]    { background:rgba(244,114,182,0.22); color:#f9a8d4; border-color:rgba(244,114,182,0.48); }

:root[data-theme="dark"] .tag-type img { opacity: 0.95; }

/* ══════════════════════════════════════════════════════════════════
   Dark Mode Unlock plan card (one-time $5)
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .vip-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .plan-card.premium-plan { transform: none; }
}

.plan-card.dark-plan {
  background: linear-gradient(to bottom, #eef2ff, var(--white));
  border: 1px solid #c7d2fe;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.plan-card.dark-plan:hover { border-color: #a5b4fc; }
.plan-card.dark-plan .glow { background: rgba(165,180,252,0.5); }
.dark-plan .plan-name { color: #4f46e5; }
.dark-plan .plan-desc { color: rgba(67,56,202,0.75); }
.dark-plan .feature-icon { background: #eef2ff; }
.dark-plan .feature-icon svg { color: #6366f1; }
.dark-plan .plan-feature span { color: var(--slate-700); font-weight: 500; }
.dark-plan .plan-price { color: #4338ca; }

.btn-dark-unlock {
  width: 100%; padding: 0.75rem; border-radius: 0.75rem;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff; font-weight: 700; font-size: 0.875rem; border: none;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 4px 10px rgba(99,102,241,0.32);
  cursor: pointer;
}
.btn-dark-unlock:hover:not(:disabled) {
  background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
  box-shadow: 0 6px 14px rgba(99,102,241,0.42);
}
.btn-dark-unlock:active:not(:disabled) { transform: translateY(1px); }
.btn-dark-unlock:disabled {
  background: var(--slate-100); color: var(--slate-400); box-shadow: none; cursor: not-allowed;
}

:root[data-theme="dark"] .plan-card.dark-plan {
  background: linear-gradient(160deg, rgba(99,102,241,0.18) 0%, rgba(30,41,59,0.6) 100%);
  border-color: rgba(129,140,248,0.45);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}
:root[data-theme="dark"] .plan-card.dark-plan .glow { background: rgba(129,140,248,0.35); }
:root[data-theme="dark"] .dark-plan .plan-name { color: #c7d2fe; }
:root[data-theme="dark"] .dark-plan .plan-desc { color: rgba(199,210,254,0.75); }
:root[data-theme="dark"] .dark-plan .feature-icon { background: rgba(99,102,241,0.22); }
:root[data-theme="dark"] .dark-plan .feature-icon svg { color: #a5b4fc; }
:root[data-theme="dark"] .dark-plan .plan-feature span { color: #e2e8f0; }
:root[data-theme="dark"] .dark-plan .plan-price { color: #e0e7ff; }
:root[data-theme="dark"] .btn-dark-unlock:disabled {
  background: rgba(51,65,85,0.6); color: rgba(203,213,225,0.55);
}

/* Queue card boss thumbnail: match the Home boss-card look exactly so the
   silhouette pops instead of fading into the dark indigo-50 token. */
:root[data-theme="dark"] .queue-card-header img {
  background: rgba(238, 242, 255, 0.5);
  border-color: rgba(199, 210, 254, 0.35);
}

/* ══════════════════════════════════════════════════════════════════
   Dark-mode polish for Your Queues view
   - richer "Waiting for a host" info alert (indigo glass look)
   - richer Leave Queue buttons (deep rose with inner highlight)
   ══════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] .alert-info {
  background: linear-gradient(160deg, rgba(99,102,241,0.16) 0%, rgba(30,41,59,0.45) 100%);
  border: 1px solid rgba(129,140,248,0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 4px 16px rgba(0,0,0,0.25),
    0 0 0 1px rgba(99,102,241,0.10);
}
:root[data-theme="dark"] .alert-info svg    { color: #a5b4fc; }
:root[data-theme="dark"] .alert-info strong { color: #e0e7ff; }
:root[data-theme="dark"] .alert-info p      { color: rgba(199,210,254,0.85); }

:root[data-theme="dark"] .btn-leave-queue-full,
:root[data-theme="dark"] .btn-leave-queue {
  background: linear-gradient(135deg, rgba(159,18,57,0.55) 0%, rgba(136,19,55,0.65) 100%);
  color: #fecaca;
  border: 1px solid rgba(244,63,94,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 12px rgba(190,18,60,0.25);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .btn-leave-queue-full:hover,
:root[data-theme="dark"] .btn-leave-queue:hover {
  background: linear-gradient(135deg, rgba(190,18,60,0.65) 0%, rgba(159,18,57,0.75) 100%);
  color: #fee2e2;
  border-color: rgba(244,63,94,0.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 6px 16px rgba(190,18,60,0.35);
}
:root[data-theme="dark"] .btn-leave-queue-full svg,
:root[data-theme="dark"] .btn-leave-queue svg { color: inherit; }

/* Lift the outer queue card slightly so the inner alert/button feel layered */
:root[data-theme="dark"] .queue-card,
:root[data-theme="dark"] .queue-card-invited {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 10px 28px rgba(0,0,0,0.35);
}