/* Nav V2 Skeleton (Phase P0)
   Only structural placeholders & tokens. No functional takeover yet. */

.primary-nav { position:relative; display:flex; align-items:center; gap:12px; }
.primary-nav[data-shadow] { opacity:.55; filter:grayscale(.15) brightness(.85); pointer-events:none; }
.primary-nav.hidden { display:none !important; }
.primary-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:4px; }
.primary-nav button.nav-item { appearance:none; border:1px solid rgba(var(--neon-accent-rgb,0,255,198),0.35); background:linear-gradient(180deg, rgba(var(--neon-accent-rgb,0,255,198),0.15), rgba(var(--neon-accent-rgb,0,255,198),0.05)); font:600 0.9rem/1 var(--font-display,Orbitron,sans-serif); letter-spacing:.05em; cursor:pointer; padding:10px 18px; border-radius:28px; position:relative; color:var(--color-fg,#dff9ff); box-shadow:0 0 0 1px rgba(var(--neon-accent-rgb,0,255,198),0.25),0 4px 14px -4px rgba(0,0,0,0.65),0 0 18px -6px rgba(var(--neon-accent-rgb,0,255,198),0.50); transition:background .35s, box-shadow .35s, color .35s; }
.primary-nav button.nav-item:focus-visible { outline:var(--focus-ring,2px solid rgba(0,194,255,.6)); outline-offset:2px; }
.primary-nav button.nav-item.active { color:#fff; background:linear-gradient(180deg, rgba(var(--neon-accent-rgb,0,255,198),0.32), rgba(var(--neon-accent-rgb,0,255,198),0.12)); box-shadow:0 0 0 1px rgba(var(--neon-accent-rgb,0,255,198),0.55),0 0 0 2px rgba(var(--neon-accent-rgb,0,255,198),0.25),0 6px 20px -2px rgba(var(--neon-accent-rgb,0,255,198),0.65),0 0 26px -4px rgba(var(--neon-accent-rgb,0,255,198),0.75); text-shadow:0 0 8px rgba(var(--neon-accent-rgb,0,255,198),0.65); }

/* Fallback: falls andere globale nav styles (styles.css) greifen, erzwinge Anzeige */
/* Mobile visibility fallback refined: only control container display, wrapping happens when expanded */
@media (max-width:760px){
  header .primary-nav { display:flex !important; width:100%; }
}

/* Ink placeholder (will be animated later) */
.primary-nav .nav-ink { position:absolute; bottom:0; height:3px; background:linear-gradient(90deg,var(--color-accent,#00ffc6),var(--color-accent-2,#00c2ff)); border-radius:3px; left:0; width:0; opacity:0; transform:translateX(0); transition:opacity var(--motion-ink-fade-duration,.25s) var(--motion-ink-fade-ease,ease), transform var(--motion-ink-duration,.35s) var(--motion-ink-ease,cubic-bezier(.4,.16,0,1)), width var(--motion-ink-duration,.35s) var(--motion-ink-ease,cubic-bezier(.4,.16,0,1)); }

/* Dropdown mount point containers (future) */
.primary-nav .nav-slot { position:relative; }

@media (max-width:760px){
  .primary-nav { flex-wrap:wrap; gap:4px; padding:4px 0 2px; }
  .primary-nav .nav-item { padding:8px 10px; font-size:.8rem; }
  .primary-nav .nav-slot { order:99; }
  .primary-nav[data-collapsed] ul.nav-list { display:flex; flex-direction:column; align-items:stretch; gap:2px; width:100%; }
  .primary-nav[data-collapsed] .nav-slot { display:flex; }
}

/* Mobile collapse states (JS can toggle data-mobile-open on header or nav later) */
@media (max-width:640px){
  header:not([data-mobile-open]) .primary-nav { overflow:hidden; }
  /* Collapsed: Show ONLY active tab (peek pattern for UX) */
  header:not([data-mobile-open]) .primary-nav .nav-list { max-height:48px; position:relative; overflow:hidden; opacity:1; padding:0; }
  header:not([data-mobile-open]) .primary-nav .nav-item:not(.active) { display:none; }
  header:not([data-mobile-open]) .primary-nav .nav-item.active { display:flex; width:100%; justify-content:center; }
  header[data-mobile-open] .primary-nav .nav-list { flex-wrap:wrap; row-gap:6px; }
  header[data-mobile-open] .primary-nav .nav-item { 
    flex:1 1 calc(50% - 6px); 
    text-align:left; 
    display:flex; 
    /* Mobile: Ensure touch-friendly heights */
    min-height: 44px;
    padding: 12px 14px;
    font-size: .85rem;
  }
  header[data-mobile-open] .primary-nav .nav-slot { flex:1 1 100%; justify-content:flex-start; }
  /* Micro animation for open/close */
  header .primary-nav .nav-list { transition:max-height var(--motion-duration-sm,140ms) var(--motion-ease-standard,cubic-bezier(.25,.1,.25,1)), opacity var(--motion-duration-sm,140ms) ease; opacity:1; }
  header:not([data-mobile-open]) .primary-nav .nav-list { opacity:1; }
  header[data-mobile-open] .primary-nav .nav-list { max-height:420px; opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  @media (max-width:640px){
    header .primary-nav .nav-list { transition:none !important; }
  }
}

/* Reduced motion adjustments (early P6 groundwork): eliminate transform/width tween, keep instant state */
@media (prefers-reduced-motion: reduce){
  .primary-nav .nav-ink { transition:none !important; animation:none !important; }
  .primary-nav button.nav-item { transition:none !important; }
}

/* Motion tokens (central draft) – will move to global theme root soon */
:root {
  --motion-duration-xs: 80ms;
  --motion-duration-sm: 140ms;
  --motion-duration-md: 220ms;
  --motion-duration-lg: 320ms;
  --motion-ease-standard: cubic-bezier(.25,.1,.25,1);
  --motion-ease-emphasized: cubic-bezier(.4,0,.2,1);
  --motion-ease-exit: cubic-bezier(.4,0,.6,1);
  --motion-ink-duration: var(--motion-duration-sm);
  --motion-ink-ease: var(--motion-ease-emphasized);
  --motion-ink-fade-duration: var(--motion-duration-xs);
  --motion-ink-fade-ease: var(--motion-ease-standard);
}

@media (prefers-reduced-motion: reduce){
  :root {
    --motion-ink-duration: 1ms;
    --motion-ink-fade-duration: 1ms;
  }
}

/* Placeholder / loading states for newly added lazy views */
.view .placeholder, .view .loading { font-size:.85rem; letter-spacing:.4px; color:#9ab7bd; animation:fadePulse 2.2s ease-in-out infinite; }
@keyframes fadePulse { 0%{opacity:.35} 50%{opacity:1} 100%{opacity:.35} }

/* Lazy init loading marker */
.view.loading .content-box,
.view.loading .postbox,
.view.loading .challenges-list { position: relative; }
.view.loading .content-box:after,
.view.loading .challenges-list:after,
.view.loading .postbox:after {
  content: 'Lädt…';
  position: absolute;
  top: 8px; right: 12px;
  font-size: .75rem;
  letter-spacing: .05em;
  opacity: .65;
}

/* Error shell (reuse global pattern but ensure base styles present if CSS not yet loaded) */
.error-shell { border:1px solid var(--color-danger, #ff2d55); padding: var(--space-16,16px); border-radius:8px; background: linear-gradient(145deg, rgba(40,0,10,.5), rgba(10,0,5,.6)); box-shadow: 0 0 0 1px rgba(255,0,80,.25), 0 0 12px -2px rgba(255,0,120,.35); }
.error-shell .error-header { font-family: var(--font-display, Orbitron, sans-serif); font-weight:600; margin:0 0 4px; text-transform:uppercase; letter-spacing:.06em; color: var(--color-danger, #ff2d55); }
.error-shell .actions { margin-top:12px; }
.error-shell .actions .btn.secondary { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.15); }
.error-shell .actions .btn.secondary:hover { background:rgba(255,255,255,.12); }

@media (prefers-reduced-motion: reduce) {
  .view .placeholder { animation: none; opacity:.6; }
}

/* User-Area Neon Styling */
header .user-area { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 4px 8px; 
  border-radius: 14px; 
  background: linear-gradient(145deg, rgba(12,18,24,.78), rgba(6,10,14,.88)); 
  backdrop-filter: blur(10px) saturate(140%); 
  -webkit-backdrop-filter: blur(10px) saturate(140%); 
  box-shadow: 0 0 0 1px rgba(var(--neon-accent-rgb,0,255,198),0.25), 0 2px 6px -2px rgba(0,0,0,.6), 0 0 18px -4px rgba(var(--neon-accent-rgb,0,255,198),0.45);
  
  /* CRITICAL: Must create top-level stacking context for dropdowns */
  position: relative;
  z-index: 9999;
  isolation: isolate;
}
header .user-area:focus-within { box-shadow:0 0 0 1px rgba(var(--neon-accent-rgb,0,255,198),0.45), 0 4px 18px -4px rgba(var(--neon-accent-rgb,0,255,198),0.6); }

/* Header Logo Sizing (Responsive, kompakt) */
header .app-logo {
  max-width: 120px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

header .player-logo {
  max-width: 40px;
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Mobile: Noch kompakter */
@media (max-width: 640px) {
  header .app-logo {
    max-width: 100px;
    max-height: 36px;
  }
  
  header .player-logo {
    max-width: 32px;
    max-height: 36px;
  }
}

/* Tablet: Mittelgroß */
@media (min-width: 641px) and (max-width: 1024px) {
  header .app-logo {
    max-width: 110px;
    max-height: 38px;
  }
  
  header .player-logo {
    max-width: 36px;
    max-height: 38px;
  }
}

/* Mobile nav toggle redesigned */
#mobileNavToggle.mobile-nav-toggle { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid rgba(var(--neon-accent-rgb,0,255,198),0.35); background:linear-gradient(180deg, rgba(var(--neon-accent-rgb,0,255,198),0.18), rgba(var(--neon-accent-rgb,0,255,198),0.06)); color:var(--color-accent,#00ffc6); cursor:pointer; padding:0; box-shadow:0 0 0 1px rgba(var(--neon-accent-rgb,0,255,198),0.25), 0 2px 8px -2px rgba(var(--neon-accent-rgb,0,255,198),0.55), 0 0 14px -2px rgba(var(--neon-accent-rgb,0,255,198),0.65); transition:background .25s, color .25s, transform .35s var(--motion-ease-emphasized); }
#mobileNavToggle.mobile-nav-toggle:hover,#mobileNavToggle.mobile-nav-toggle:focus-visible { color:#fff; background:linear-gradient(180deg, rgba(var(--neon-accent-rgb,0,255,198),0.28), rgba(var(--neon-accent-rgb,0,255,198),0.10)); outline:none; }
#mobileNavToggle.mobile-nav-toggle:active { transform:scale(.94); }
#mobileNavToggle.mobile-nav-toggle[aria-expanded="true"] { box-shadow:0 0 0 1px rgba(var(--neon-accent-rgb,0,255,198),0.5), 0 4px 18px -4px rgba(var(--neon-accent-rgb,0,255,198),0.75), 0 0 22px -2px rgba(var(--neon-accent-rgb,0,255,198),0.85); }
#mobileNavToggle.mobile-nav-toggle i { font-size:18px; }

@media (max-width:640px){
  header .user-area { padding:4px 6px; gap:6px; }
  #mobileNavToggle.mobile-nav-toggle { width:40px; height:40px; }
}