/* ── ULTRA-MODERN SOFT / APPLE-STYLE AESTHETIC (Global Overrides) ── */
body { 
  background-color: var(--bg-primary) !important; 
  color: var(--text-primary) !important; 
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; 
}
/* page-content: cap width but do NOT centre with auto margin — sidebar offset is handled by .main-content */
.page-content, .page-wrapper {
  max-width: 1200px !important;
  width: 100% !important;
  padding-top: 24px !important;
}
@media (max-width: 768px) {
  .page-content, .page-wrapper {
    max-width: 100% !important;
    padding: 12px !important;
  }
}
#dash-rank-shield { display: none !important; }

/* ── DEFAULT MOBILE TOPBAR LAYOUT ── */
.gaming-navbar { 
  background: rgba(255, 255, 255, 0.75) !important; 
  backdrop-filter: blur(24px) !important; 
  -webkit-backdrop-filter: blur(24px) !important; 
  box-shadow: 0 8px 32px rgba(0,0,0,0.04) !important; 
  border: 1px solid rgba(255,255,255,0.4) !important; 
  height: 60px !important; 
  position: sticky !important; top: 20px !important; z-index: 100 !important;
  max-width: 1100px !important;
  margin: 20px auto !important;
  border-radius: 100px !important;
  padding: 0 24px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.gn-left, .gn-center, .gn-right { display: flex !important; align-items: center !important; gap: 16px !important; }
.gn-item { position: relative !important; display: flex !important; align-items: center !important; height: 100% !important; }
.gn-left .gn-logo { display: flex !important; align-items: center !important; gap: 10px !important; text-decoration: none !important; }
.gn-left .gn-logo img { width: 24px; height: auto; }
.gn-left .gn-logo span { font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.5px !important; }

.gn-link { color: #86868b !important; font-weight: 600 !important; font-size: 14px !important; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important; padding: 8px 16px !important; border-radius: 100px !important; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.gn-link:hover { color: var(--text-primary) !important; background: rgba(0,0,0,0.03) !important; text-shadow: none !important; }
.gn-link.active { color: #007aff !important; background: rgba(0, 122, 255, 0.08) !important; text-shadow: none !important; }
.gn-link.active::after { display: none !important; }

.has-dropdown { position: relative !important; }
.gn-dropdown { 
  display: none !important; 
  position: absolute !important; 
  top: 100% !important; 
  left: 0 !important; 
  min-width: 180px !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin-top: 8px !important;
  z-index: 200 !important;
  background: #ffffff !important; 
  border: 1px solid rgba(0,0,0,0.08) !important; 
  box-shadow: 0 10px 25px rgba(0,0,0,0.05) !important; 
  border-radius: 12px !important; 
  padding: 8px !important; 
}
.gn-dropdown::before { content: '' !important; position: absolute !important; top: -15px !important; left: 0 !important; right: 0 !important; height: 15px !important; background: transparent !important; }
.has-dropdown:hover .gn-dropdown { display: flex !important; }

/* OVERRIDE LAYOUT TO SUPPORT VERTICAL SIDEBAR ON DESKTOP REMOVED TO RESTORE LEGACY SIDEBAR */
.gn-dropdown a { display: block; color: #4b5563 !important; font-weight: 500 !important; font-size: 14px !important; border-radius: 8px !important; transition: all 0.2s !important; text-decoration: none !important; padding: 8px 12px !important; white-space: nowrap !important; }
.gn-dropdown a:hover { background: #f3f4f6 !important; color: #111827 !important; padding-left: 16px !important; }
.gn-dropdown a i { color: #6b7280 !important; width: 20px !important; text-align: center !important; margin-right: 6px !important; }

/* Global Settings Button (Board Settings) */
.btn-settings {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(212,168,67,0.07); border: 1px solid rgba(212,168,67,0.18);
  color: #86868b; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.btn-settings::after { content:''; position:absolute; inset:0; border-radius:11px; background:radial-gradient(circle at 50% 50%,rgba(212,168,67,0.3) 0%,transparent 70%); opacity:0; transition:opacity 0.3s; }
.btn-settings:hover { color:#007aff; background:rgba(0,122,255,0.08); border-color:rgba(0,122,255,0.4); transform:rotate(60deg); box-shadow:0 0 16px rgba(0,122,255,0.2); }
.btn-settings:hover::after { opacity:1; }
.btn-settings.active { color:#007aff; background:rgba(0,122,255,0.15); border-color:rgba(0,122,255,0.5); transform:rotate(30deg); box-shadow:0 0 20px rgba(0,122,255,0.25); }
.btn-settings .sp-pulse { position:absolute; top:-3px; right:-3px; width:9px; height:9px; background:#007aff; border-radius:50%; border:2px solid #fff; animation:spulse 2s infinite; display:none; }
.btn-settings.has-custom .sp-pulse { display:block; }
@keyframes spulse { 0%,100%{box-shadow:0 0 0 0 rgba(0,122,255,0.6);}50%{box-shadow:0 0 0 6px rgba(0,122,255,0);} }

/* Super Rounded, Soft Cards (From Screenshot) */
.hero-card, .section-card, .form-input, .tab-btn { 
  background: rgba(20, 20, 25, 0.6) !important; 
  backdrop-filter: blur(16px) !important; 
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important; 
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; 
  border-radius: 32px !important; padding: 32px !important; 
  color: var(--text-primary) !important;
}
.form-input { padding: 12px 16px !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.15) !important; color: var(--text-primary) !important; background: rgba(0,0,0,0.2) !important; }
.tab-btn { padding: 14px 20px !important; border-radius: 16px !important; color: var(--text-primary) !important; }

.hero-avatar, .pb-avatar { background: rgba(255,255,255,0.1) !important; border: none !important; color: #007aff !important; box-shadow: none !important; width: 80px !important; height: 80px !important; font-size: 32px !important; border-radius: 24px !important; }
.hero-name, .pb-info h2 { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.5px !important; font-size: 28px !important; }
.hero-label, .tile-label, .pb-label, .form-label { color: var(--text-muted) !important; font-weight: 600 !important; letter-spacing: 0px !important; font-size: 12px !important; text-transform: none !important; }
.avatar-initial { background: linear-gradient(135deg, #34c759, #30b0c7) !important; color: var(--text-primary) !important; box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3) !important; font-weight: 600 !important; border: none !important; }

.stat-tile, .card { 
  background: rgba(20, 20, 25, 0.6) !important; 
  backdrop-filter: blur(16px) !important; 
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important; 
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; 
  border-radius: 28px !important; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; padding: 24px !important; 
  color: var(--text-primary) !important;
}
.stat-tile:hover, .card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important; transform: translateY(-4px) scale(1.01) !important; }
.stat-tile::after { display: none !important; }
.tile-icon { background: rgba(255,255,255,0.1) !important; color: #007aff !important; width: 44px !important; height: 44px !important; font-size: 18px !important; border-radius: 16px !important; }

.btn-primary, .btn-action { background: #007aff !important; color: var(--text-primary) !important; box-shadow: none !important; text-shadow: none !important; font-weight: 600 !important; border-radius: 100px !important; padding: 12px 24px !important; letter-spacing: 0 !important; transition: all 0.3s !important; border: none !important; }
.btn-primary:hover, .btn-action:hover { background: #0056b3 !important; transform: scale(1.02) !important; }
.iq-pill, .m-iq { background: rgba(255,255,255,0.1) !important; border: none !important; color: var(--text-primary) !important; font-weight: 600 !important; font-size: 13px !important; border-radius: 100px !important; padding: 6px 16px !important; }
.badge-bronze, .m-rank { background: rgba(255,255,255,0.1) !important; border: none !important; color: var(--text-primary) !important; font-weight: 600 !important; border-radius: 100px !important; padding: 6px 16px !important; }

.live-stat-row { background:var(--bg-tertiary) !important; border: 1px solid rgba(255,255,255,0.08) !important; box-shadow: none !important; border-radius: 20px !important; transition: all 0.3s !important; padding: 16px !important; margin-bottom: 8px !important; color: var(--text-primary) !important; }
.live-stat-row:hover { background: rgba(255,255,255,0.1) !important; border-color: transparent !important; }
.live-stat-val.gold, .live-stat-val.orange { color: var(--text-primary) !important; font-weight: 700 !important; font-size: 24px !important; }
.live-stat-row i { display: none !important; }

.section-hdr-title, .section-header { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.5px !important; font-size: 18px !important; display: flex !important; align-items: center !important; border: none !important; }
.section-hdr-title .dot { background: #34c759 !important; box-shadow: none !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; margin-right: 8px !important; }
.page-title { font-size: 28px !important; color: var(--text-primary) !important; text-shadow: 0 2px 10px rgba(0,0,0,0.8) !important; font-weight: 800 !important; }
.page-title::before, .section-header::after { display: none !important; }

.wr-ring-fill { stroke: #007aff !important; stroke-width: 8 !important; stroke-linecap: round !important; }
.wr-ring-bg { stroke: #f5f5f7 !important; stroke-width: 8 !important; }
.wr-ring-text { fill: var(--text-primary) !important; font-family: -apple-system, sans-serif !important; font-weight: 800 !important; font-size: 24px !important; }

.gn-left span { color: var(--text-primary) !important; font-weight: 700 !important; letter-spacing: -0.5px !important; font-size: 20px !important; }
.gn-left img { filter: grayscale(100%) !important; width: 28px !important; }
.tile-value { color: var(--text-primary) !important; font-weight: 700 !important; font-size: 40px !important; letter-spacing: -1px !important; line-height: 1 !important; margin-top: 8px !important; }
.synced-email-pill { background: var(--bg-tertiary) !important; border: none !important; color: var(--text-primary) !important; border-radius: 12px !important; }
.live-badge { display: none !important; }
.dot { border-radius: 50% !important; box-shadow: none !important; }

.mobile-nav-toggle { display: none; background: transparent; border: none; font-size: 20px; color: var(--text-primary); cursor: pointer; }

@media (max-width: 900px) {
  .gn-center { display: none !important; }
  .gaming-navbar { padding: 0 16px !important; margin: 10px auto !important; height: 50px !important; }
  .mobile-nav-toggle { display: block !important; }
}

/* ── BOARD SETTINGS PANEL (play.html & game.html) ── */
#ps-panel, #settings-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border-left: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: -20px 0 60px rgba(0,0,0,0.05) !important;
  color: var(--text-primary) !important;
}
.psp-header, .sp-header { background: transparent !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
.psp-title, .sp-header-title { color: var(--text-primary) !important; font-weight: 700 !important; }
.psp-icon, .sp-icon { background: #f5f5f7 !important; border: none !important; color: #007aff !important; box-shadow: none !important; }
.psp-close, .sp-close { background: #f5f5f7 !important; color: #86868b !important; }
.psp-close:hover, .sp-close:hover { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
.psp-tabs, .sp-tabs { background: #f5f5f7 !important; border-radius: 16px 16px 0 0 !important; padding: 6px 6px 0 !important; gap: 4px !important; }
.psp-tab, .sp-tab { color: #86868b !important; border-radius: 12px 12px 0 0 !important; font-weight: 600 !important; padding: 12px 6px 10px !important; }
.psp-tab:hover, .sp-tab:hover { background: rgba(0,0,0,0.03) !important; color: var(--text-primary) !important; }
.psp-tab.active, .sp-tab.active { background: #ffffff !important; color: #007aff !important; box-shadow: 0 -4px 12px rgba(0,0,0,0.02) !important; }
.psp-tab.active::after, .sp-tab.active::after { background: #007aff !important; height: 3px !important; border-radius: 3px 3px 0 0 !important; }
.psp-section-label, .sp-section-label { color: #86868b !important; font-weight: 700 !important; font-size: 11px !important; }
.psp-section-label i, .sp-section-label i { color: #007aff !important; }
.psp-section-label::after, .sp-section-label::after { background: rgba(0,0,0,0.06) !important; }

.psp-swatch, .sp-swatch { border: 2px solid rgba(0,0,0,0.06) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important; border-radius: 16px !important; }
.psp-swatch.selected, .sp-swatch.selected { border-color: #007aff !important; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2), 0 8px 24px rgba(0,0,0,0.08) !important; }
.psp-swatch .sw-label, .sp-swatch .swatch-label { background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.7)) !important; color: #111 !important; font-weight: 700 !important; }
.psp-swatch.selected .sw-label, .sp-swatch.selected .swatch-label { color: #007aff !important; }
.psp-swatch.selected .swatch-label::before { color: #007aff !important; }
.sw-check, .swatch-check { background: #007aff !important; color: var(--text-primary) !important; }

.psp-piece-card, .sp-piece-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important; border-radius: 16px !important; }
.psp-piece-card:hover, .sp-piece-card:hover { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.1) !important; }
.psp-piece-card.selected, .sp-piece-card.selected { border-color: #007aff !important; background: rgba(0, 122, 255, 0.04) !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2) !important; }
.psp-piece-card .pc-name, .sp-piece-card .pc-name { color: #86868b !important; }
.psp-piece-card.selected .pc-name, .sp-piece-card.selected .pc-name { color: #007aff !important; font-weight: 700 !important; }
.pc-check { background: #007aff !important; color: var(--text-primary) !important; }

.psp-bg-card, .sp-bg-card { border: 2px solid rgba(0,0,0,0.06) !important; border-radius: 16px !important; }
.psp-bg-card.selected, .sp-bg-card.selected { border-color: #007aff !important; box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2) !important; }
.psp-bg-card .bg-label, .sp-bg-card .bg-label { background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.7)) !important; color: #111 !important; font-weight: 700 !important; }
.psp-bg-card.selected .bg-label { color: #007aff !important; }
.sp-bg-card.selected .bg-label::before { color: #007aff !important; }

.psp-border-card, .sp-border-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 16px !important; }
.psp-border-card.selected, .sp-border-card.selected { border-color: #007aff !important; background: rgba(0, 122, 255, 0.04) !important; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2) !important; }
.psp-border-card .bc-name, .sp-border-card .bc-name { color: #86868b !important; }
.psp-border-card.selected .bc-name, .sp-border-card.selected .bc-name { color: #007aff !important; font-weight: 700 !important; }
.bc-check { background: #007aff !important; color: var(--text-primary) !important; }

.psp-footer, .sp-footer { background: #f5f5f7 !important; border-top: 1px solid rgba(0,0,0,0.05) !important; }

#ps-preview-wrap, .sp-live-preview { background: #f5f5f7 !important; border-top: 1px solid rgba(0,0,0,0.05) !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
.ps-preview-label, .sp-live-preview-label { color: var(--text-primary) !important; font-weight: 700 !important; }
.ps-preview-label i, .sp-live-preview-label i { color: #007aff !important; }
.ps-preview-label::after, .sp-live-preview-label::after { background: rgba(0,0,0,0.06) !important; }
.sp-preview-badge { background: rgba(0, 122, 255, 0.1) !important; color: #007aff !important; border: 1px solid rgba(0, 122, 255, 0.2) !important; font-weight: 700 !important; }

.sp-toggle-row { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 16px !important; }
.sp-toggle-row:hover { background: #f5f5f7 !important; border-color: rgba(0,0,0,0.1) !important; }
.sp-toggle-icon { background: #f5f5f7 !important; border: none !important; color: #007aff !important; }
.sp-toggle-title { color: var(--text-primary) !important; font-weight: 700 !important; }
.sp-toggle-desc { color: #86868b !important; }
.sp-switch-track { background: #e5e5ea !important; border: none !important; }
.sp-switch-track::after { background: #ffffff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; }
.sp-switch input:checked + .sp-switch-track { background: #34c759 !important; }
.sp-switch input:checked + .sp-switch-track::after { background: #ffffff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important; }
input[type=range].sp-slider { background: #e5e5ea !important; }
input[type=range].sp-slider::-webkit-slider-thumb { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; }
input[type=range].sp-slider:hover::-webkit-slider-thumb { box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important; }