#ph-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px; background: rgba(6,6,12,0.85);
  backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex; align-items: center; padding: 0 24px;
  font-family: 'Inter', system-ui, sans-serif;
}
#ph-nav * { box-sizing: border-box; margin: 0; padding: 0; }
#ph-nav .nav-logo { display: flex; align-items: center; gap: 0; text-decoration: none; }
#ph-nav .penguin-icon { font-size: 1.4rem; filter: drop-shadow(0 0 6px rgba(96,176,255,0.3)); }
#ph-nav .nav-logo span { font-size: 0.72rem; font-weight: 800; color: #d0d0e0; letter-spacing: 2.5px; text-transform: uppercase; }
#ph-nav .nav-links { margin-left: auto; display: flex; align-items: center; }
#ph-nav .nav-links a { color: #5a5a78; font-size: 0.62rem; font-weight: 600; padding: 16px 14px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; transition: all .2s; }
#ph-nav .nav-links a:hover { color: #d0d0e0; }
#ph-nav .nav-links a.active { color: #60b0ff; border-bottom-color: #60b0ff; }
#ph-nav #auth-area { display: flex; align-items: center; gap: 8px; margin-left: 14px; }
#ph-nav .nav-user-wrap { display: flex; align-items: center; gap: 7px; text-decoration: none; transition: opacity .15s; }
#ph-nav .nav-user-wrap:hover { opacity: .8; }
#ph-nav .nav-avatar { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgba(96,176,255,0.12); }
#ph-nav .nav-avatar-placeholder { width: 24px; height: 24px; border-radius: 50%; background: rgba(96,176,255,0.08); border: 1.5px solid rgba(96,176,255,0.12); }
#ph-nav .nav-user { font-size: 0.65rem; color: #d0d0e0; font-weight: 600; }
#ph-nav .nav-vip { font-size: 0.7rem; cursor: default; }
#ph-nav .btn-logout { background: none; border: none; color: #3a3a50; font-size: 0.9rem; cursor: pointer; padding: 0 2px; line-height: 1; transition: color .15s; }
#ph-nav .btn-logout:hover { color: #e04040; }
#ph-nav .btn-login { border: none; color: #fff; font-size: 0.6rem; font-weight: 700; padding: 7px 14px; border-radius: 6px; cursor: pointer; transition: all .2s; }
#ph-nav .btn-login:hover { filter: brightness(1.15); transform: translateY(-1px); }
/* ── Mobile hamburger toggle ── */
#ph-nav .nav-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.2rem;cursor:pointer;padding:8px;margin-left:auto;line-height:1;z-index:102;}

@media(max-width:600px) {
  #ph-nav .nav-toggle{display:block;}
  #ph-nav .nav-links{
    position:fixed;top:56px;left:0;right:0;bottom:0;
    background:rgba(6,6,12,0.97);backdrop-filter:blur(24px);
    flex-direction:column;align-items:center;justify-content:flex-start;
    padding-top:30px;gap:0;
    transform:translateX(100%);transition:transform .3s ease;z-index:101;
  }
  #ph-nav .nav-links.open{transform:translateX(0);}
  #ph-nav .nav-links a{padding:16px 20px;font-size:.72rem;letter-spacing:2px;width:100%;text-align:center;border-bottom:1px solid rgba(255,255,255,0.03);}
  #ph-nav .nav-links a.active{border-bottom-color:var(--accent);}
  #ph-nav #auth-area{margin-left:0;margin-top:16px;padding:16px;justify-content:center;}
  #ph-nav .btn-login{padding:8px 20px;font-size:.62rem;}
}










@media(max-width:600px){}


/* ═══ Inline nav arrows (in #ph-nav) ═══ */
.nav-arrow-inline{background:none;border:none;color:var(--muted);cursor:pointer;width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .15s;margin:0 6px;opacity:.5;flex-shrink:0;}
.nav-arrow-inline:hover:not(:disabled){color:var(--accent);opacity:1;background:rgba(96,176,255,0.08);}
.nav-arrow-inline:disabled{opacity:.15;cursor:not-allowed;}
.nav-arrow-inline svg{transition:transform .15s;}
.nav-arrow-left:hover:not(:disabled) svg{transform:translateX(-2px);}
.nav-arrow-right:hover:not(:disabled) svg{transform:translateX(2px);}


/* ═══ Friends dropdown ═══ */
.fr-dd{position:fixed;width:280px;max-height:500px;background:#0d0d1a;border:1px solid rgba(96,176,255,0.15);border-radius:10px;z-index:200;opacity:0;transform:translateY(-10px) scale(.95);transform-origin:top right;pointer-events:none;transition:opacity .2s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 12px 40px rgba(0,0,0,0.5),0 0 20px rgba(96,176,255,0.08);overflow:hidden;display:flex;flex-direction:column;}
.fr-dd.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.fr-dd-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.04);font-family:'Rajdhani',sans-serif;font-size:.56rem;font-weight:700;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;}
.fr-dd-close{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:0;width:20px;height:20px;line-height:1;}
.fr-dd-close:hover{color:var(--white);}
.fr-dd-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,0.04);}
.fr-dd-tab{flex:1;text-align:center;padding:9px 0;font-size:.46rem;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all .12s;font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.fr-dd-tab:hover{color:var(--text);}
.fr-dd-tab.active{color:var(--accent);border-color:var(--accent);}
.fr-dd-body{flex:1;overflow-y:auto;max-height:360px;}
.fr-dd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.02);transition:background .12s;}
.fr-dd-item:hover{background:rgba(255,255,255,0.02);}
.fr-dd-item:last-child{border-bottom:none;}
.fr-dd-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.12);flex-shrink:0;}
.fr-dd-dot.online{background:#5dbe7a;box-shadow:0 0 6px rgba(93,190,122,0.6);}
.fr-dd-info{flex:1;min-width:0;}
.fr-dd-name{font-size:.52rem;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fr-dd-rank{font-size:.4rem;color:var(--muted);}
.fr-dd-star{color:#ffb428;font-size:.56rem;}
.fr-dd-empty{padding:24px 14px;text-align:center;font-size:.46rem;color:var(--muted);}


/* ═══ Floating Friends Button (below user name) ═══ */
.fr-float-btn{position:fixed;z-index:60;background:rgba(13,13,26,0.9);backdrop-filter:blur(8px);border:1px solid rgba(96,176,255,0.12);color:var(--muted);cursor:pointer;padding:6px 12px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;transition:all .2s cubic-bezier(.2,.8,.2,1);font-size:.44rem;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 12px rgba(0,0,0,0.3);}
.fr-float-btn:hover{color:var(--accent);border-color:rgba(96,176,255,0.3);background:rgba(96,176,255,0.08);transform:translateY(-1px);box-shadow:0 6px 16px rgba(96,176,255,0.15);}
.fr-float-label{text-transform:uppercase;}
.fr-float-count{background:#5dbe7a;color:#fff;font-size:.32rem;font-weight:700;padding:1px 6px;border-radius:8px;min-width:14px;text-align:center;box-shadow:0 0 6px rgba(93,190,122,0.5);}

#ph-nav .nav-logo span + span { margin-left: 0; }
#ph-nav .nav-logo-accent { color: var(--accent); }





/* User+Admin stack: name on top, admin switch below */
#ph-nav .nav-user-stack{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:0;padding-top:0;}

/* iOS-style admin toggle switch */
.nav-admin-switch{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font-family:'Rajdhani',sans-serif;font-size:.4rem;font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(255,255,255,0.45);
  user-select:none;
  transition:color .2s;
}
.nav-admin-switch[data-on="1"]{color:#ffb428;}
.nav-admin-switch:hover{color:rgba(255,255,255,0.7);}
.nav-admin-switch[data-on="1"]:hover{color:#ffc960;}
.nav-admin-switch-track{
  position:relative;display:inline-block;width:26px;height:14px;
  background:rgba(255,255,255,0.08);border-radius:999px;
  transition:background .25s ease;
  border:1px solid rgba(255,255,255,0.06);
}
.nav-admin-switch[data-on="1"] .nav-admin-switch-track{
  background:rgba(255,180,40,0.4);
  border-color:rgba(255,180,40,0.6);
}
.nav-admin-switch-knob{
  position:absolute;top:1px;left:1px;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,0.7);
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s;
}
.nav-admin-switch[data-on="1"] .nav-admin-switch-knob{
  transform:translateX(12px);background:#fff;
}

#ph-nav .nav-user-stack .nav-admin-switch{
  position:absolute;top:100%;right:0;margin-top:8px;
}

/* Live-Cast pill in nav (cross-page) */
#ph-nav .nav-live-cast {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(145,70,255,0.14);
  border: 1px solid rgba(145,70,255,0.45);
  color: #c9a4ff; text-decoration: none;
  font-family: 'Rajdhani', sans-serif; font-size: .48rem; font-weight: 800;
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-right: 8px;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
#ph-nav .nav-live-cast:hover { background: rgba(145,70,255,0.22); border-color: rgba(145,70,255,0.7); transform: translateY(-1px); }
#ph-nav .nav-live-cast .nlc-dot { width: 6px; height: 6px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 6px rgba(255,77,77,0.7); animation: navLivePulse 1.6s ease-in-out infinite; }
@keyframes navLivePulse { 0%,100%{opacity:1;} 50%{opacity:.45;} }
#ph-nav .nav-live-cast .nlc-count { padding: 0 5px; border-radius: 3px; background: rgba(145,70,255,0.3); color: #fff; font-size: .44rem; }

/* BETA badge next to logo */
#ph-nav .nav-beta {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.42rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: #ffc850;
  background: rgba(255,200,80,0.08);
  border: 1px solid rgba(255,200,80,0.35);
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}