/* ════════════════════════════════════════
   FLOAT PANELS — Unified floating panel
   system for Profile, EditProfile, Admin,
   Shop, Streak, Challenges, About, Bug.

   Desktop  : centered modal with scrim
   Mobile   : fills the space between the
              mobile header and nav
════════════════════════════════════════ */

/* ════════════════════════════════════════
   OVERLAY (backdrop + positioning root)
════════════════════════════════════════ */

.fp-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim, rgba(0, 0, 0, 0.50));
  z-index: var(--z-modal, 200);
  display: none;
  align-items: center;
  justify-content: center;
  /* Smooth fade-in for the backdrop */
  animation: fpBackdropIn 0.2s ease both;
}

.fp-overlay.open {
  display: flex;
}

@keyframes fpBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ════════════════════════════════════════
   PANEL BOX
════════════════════════════════════════ */

.fp-panel {
  background: var(--fp-bg, var(--ui-modal-bg, var(--white)));
  border: var(--ui-modal-border, var(--border-card));
  border-radius: var(--ui-modal-radius, var(--radius-xl));
  box-shadow: var(--ui-modal-shadow, 0 20px 60px rgba(61, 43, 31, 0.35));
  width: min(640px, calc(100vw - var(--space-8) * 2));
  max-height: calc(100dvh - 120px);
  animation: fpPanelIn var(--transition-slow, 0.3s cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* Narrow variant — bug report */
.fp-panel.fp-narrow {
  width: min(460px, calc(100vw - var(--space-8) * 2));
}

@keyframes fpPanelIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}


/* ════════════════════════════════════════
   PANEL HEADER
════════════════════════════════════════ */

.fp-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-divider);
}

.fp-title {
  font-family: var(--font-display);
}

.fp-close {
  width: 30px;
  height: 30px;
}


/* ════════════════════════════════════════
   PANEL BODY
════════════════════════════════════════ */

.fp-body-no-pad {
  padding: 0 !important;
}


/* ════════════════════════════════════════
   TAB BAR (shared across any fp-panel)
════════════════════════════════════════ */

.fp-tabs {
  border-bottom: var(--border-divider);
  flex-shrink: 0;
  background: var(--fp-bg, var(--ui-modal-bg, var(--white)));
}

.fp-tab {
  padding: var(--space-3) var(--space-2);
  color: var(--stone-dark);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-base), border-color var(--transition-base);
  font-family: var(--font-primary);
}

.fp-tab.active {
  color: var(--moss);
  border-bottom-color: var(--moss);
}

.fp-tab-pane {
  display: none;
}

.fp-tab-pane.active {
  display: block;
}


/* ════════════════════════════════════════
   DARK MODE
════════════════════════════════════════ */

[data-theme="dark"] .fp-panel {
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .fp-close {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.80);
}

[data-theme="dark"] .fp-close:hover {
  background: rgba(229, 90, 77, 0.20);
  color: var(--red);
}

[data-theme="dark"] .fp-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .fp-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .fp-tab {
  color: rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .fp-tab.active {
  color: rgba(255, 255, 255, 0.95);
  border-bottom-color: rgba(255, 255, 255, 0.90);
}


/* ════════════════════════════════════════
   MOBILE — inset between header and nav
   Breakpoint matches the app's 480px mobile
   breakpoint defined throughout mobile.css
════════════════════════════════════════ */

@media (max-width: 479px) {

  .fp-overlay {
    --fp-mobile-nav-clearance: calc(60px + 16px + var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: transparent;
    z-index: var(--z-panel, 300);
    inset: var(--fp-mobile-top-inset, 52px) 0 0 0;
    border-radius: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    box-shadow: none;
    animation: none;
  }

  .fp-mob-panel-spacer {
    display: block;
    flex-shrink: 0;
    height: var(--fp-mobile-nav-clearance);
    background: var(--fp-bg, var(--ui-modal-bg, var(--white)));
  }

  .fp-panel {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
    border: none;
    animation: fpPanelInMob var(--transition-slow, 0.3s cubic-bezier(0.4, 0, 0.2, 1)) both;
  }

  @keyframes fpPanelInMob {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  .fp-panel.fp-narrow {
    width: 100%;
    max-width: 100%;
  }

  #fp-shop .mob-shop-grid {
    padding-bottom: var(--fp-mobile-nav-clearance);
  }

}


/* ════════════════════════════════════════
   PER-PANEL OVERRIDES
   These override fp-panel defaults to give
   each panel its own character without
   requiring a separate CSS file.
════════════════════════════════════════ */

/* ── Challenges — hacker / terminal theme ── */
#fp-challenges {
  background: rgba(0, 0, 0, 0.88);
}
#fp-challenges .fp-panel {
  --fp-bg: #000;
  font-family: var(--font-primary);
  border: 1px solid rgba(0, 255, 255, 0.45);
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, 0.08),
    0 0 40px rgba(0, 255, 255, 0.18),
    inset 0 0 80px rgba(0, 255, 255, 0.03);
  animation: chalModalSlideIn 0.25s cubic-bezier(0.2, 0, 0.2, 1) both;
}
#fp-challenges .fp-header {
  font-family: var(--font-primary);
  border-bottom-color: rgba(0, 255, 255, 0.20);
  background: #000;
  padding: 16px 20px 12px;
}
#fp-challenges .fp-title {
  color: #00ffff;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#fp-challenges .fp-close {
  background: rgba(0, 255, 255, 0.10);
  color: #0ff;
  border: 1px solid rgba(0, 255, 255, 0.30);
  border-radius: 0;
}
#fp-challenges .fp-close:hover {
  background: rgba(0, 255, 255, 0.20);
  color: #fff;
}
#fp-challenges .fp-body {
  background: #000;
  color: rgba(200, 240, 200, 0.90);
  padding: 0;
}
#fp-challenges .fp-tabs {
  background: #000;
  border-bottom-color: rgba(0, 255, 255, 0.20);
}
#fp-challenges .fp-tab {
  font-family: var(--font-primary);
  color: rgba(0, 255, 255, 0.60);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: var(--text-xs);
}
#fp-challenges .fp-tab.active {
  color: #0ff;
  border-bottom-color: #0ff;
}
@keyframes chalModalSlideIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}

/* Mobile: challenges keeps dark background */
@media (max-width: 479px) {
  #fp-challenges {
    background: rgba(0, 0, 0, 0.95);
    box-shadow: none;
  }
  #fp-challenges .fp-panel {
    border-radius: 0;
    border-color: rgba(0, 255, 255, 0.30);
  }
}

/* ── About — friendly theme (uses design tokens) ── */
#fp-about {
  background: var(--overlay-scrim);
}
#fp-about .fp-panel {
  --fp-bg: var(--ui-modal-bg);
  box-shadow: var(--ui-modal-shadow);
}
#fp-about .fp-body {
  padding: var(--ui-modal-padding);
}
#fp-about .about-title { font-family: var(--font-display); }
#fp-about .about-desc { line-height: 1.6; }
#fp-about .about-meta { border-top: var(--border-divider); padding-top: var(--space-3); }
#fp-about .about-tnc-details {
  border: 1px solid var(--parchment);
  border-radius: var(--radius-md);
  background: var(--cream);
  padding: var(--space-2) var(--space-3);
}
#fp-about .about-tnc-summary {
  cursor: pointer;
  color: var(--bark);
  list-style: none;
}
#fp-about .about-tnc-summary::-webkit-details-marker {
  display: none;
}
#fp-about .about-tnc-details[open] .about-tnc-summary {
  margin-bottom: var(--space-1);
}
#fp-about .about-tnc-details .tnc-body {
  max-height: 280px;
  overflow-y: auto;
  padding-right: var(--space-1);
}

/* ── Shop — dark blue theme ── */
#fp-shop {
  background: rgba(0, 0, 0, 0.70);
}
#fp-shop .fp-panel {
  --fp-bg: linear-gradient(160deg, #0a1628, #0f2240, #0a1628);
  background: linear-gradient(160deg, #0a1628, #0f2240, #0a1628);
  border-color: rgba(77, 150, 255, 0.20);
  height: min(920px, calc(100dvh - 120px));
}
#fp-shop .fp-header {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
#fp-shop .fp-title {
  color: rgba(255, 255, 255, 0.95);
}
#fp-shop .fp-close {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.70);
}
#fp-shop .fp-close:hover {
  background: rgba(229, 90, 77, 0.25);
  color: #f06b5d;
}
#fp-shop .fp-body {
  padding: 0;
  color: rgba(255, 255, 255, 0.90);
}

@media (min-width: 480px) {
  #fp-shop .mob-shop-grid {
    gap: var(--space-3);
    padding: var(--space-3);
  }

  #fp-shop .mob-shop-card {
    border-radius: var(--radius-md);
  }

  #fp-shop .mob-shop-card-inner {
    border-radius: inherit;
  }
}
#fp-shop-body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
}

/* ── Streak — warm dark theme ── */
#fp-streak {
  background: rgba(0, 0, 0, 0.65);
}
#fp-streak .fp-panel {
  --fp-bg: linear-gradient(160deg, #3e1e0a, #5c2a10, #3e1e0a);
  background: linear-gradient(160deg, #3e1e0a, #5c2a10, #3e1e0a);
  border-color: rgba(255, 120, 40, 0.25);
}
#fp-streak .fp-header {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
#fp-streak .fp-title {
  color: rgba(255, 255, 255, 0.95);
}
#fp-streak .fp-close {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.70);
}
#fp-streak .fp-close:hover {
  background: rgba(229, 90, 77, 0.25);
  color: #f06b5d;
}
#fp-streak .fp-body {
  padding: 0;
  color: rgba(255, 255, 255, 0.90);
}
#fp-streak .streak-popup-shell {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
  overflow-y: visible;
  max-height: none;
}
#fp-streak .streak-popup-close {
  display: none;
}