/* ================================================================
   sidebar.css v5.1 — PIXEL GAME SIDEBAR
   Updated: Player card matches Image 1 exactly
   ================================================================ */

   .sidebar {
    position:fixed;top:0;left:0;
    width:var(--sidebar-w);height:100vh;
    display:flex;flex-direction:column;
    z-index:500;overflow:hidden;
    background:linear-gradient(180deg,#070a14 0%,#0a0f1e 30%,#0c1428 60%,#070a14 100%);
    border-right:none;
    box-shadow:4px 0 0 rgba(255,215,0,.15), 8px 0 20px rgba(0,0,0,.5);
  }
  
  .sidebar::after {
    content:'';position:absolute;top:0;right:0;bottom:0;width:3px;
    background:linear-gradient(to bottom,
      var(--red) 0%,var(--orange) 16%,var(--yellow) 33%,
      var(--green) 50%,var(--blue) 66%,var(--violet) 83%,var(--red) 100%);
    background-size:100% 200%;
    animation:rainbowBorder 4s linear infinite;
    opacity:.8;
  }
  @keyframes rainbowBorder{0%{background-position:0 0}100%{background-position:0 200%}}
  
  .sidebar::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
      radial-gradient(circle at 10% 10%,rgba(123,47,255,.08) 0%,transparent 40%),
      radial-gradient(circle at 90% 90%,rgba(230,57,70,.06) 0%,transparent 40%);
  }
  
  /* ── Player Card — EXACT match to Image 1 ── */
  .sidebar-player{
    padding:1.2rem 1rem .85rem;
    border-bottom:2px solid rgba(255,215,0,.12);
    position:relative;z-index:2;flex-shrink:0;
    background:linear-gradient(135deg,rgba(15,52,96,.25) 0%,rgba(123,47,255,.08) 100%);
  }
  
  .player-row{
    display:flex;align-items:center;gap:.75rem;
    margin-bottom:0;
  }
  
  /* Avatar — Yellow bordered square with SP */
  .player-avatar{
    width:50px;height:50px;
    border-radius:4px;
    border:3px solid var(--yellow);
    box-shadow:var(--glow-yellow),3px 3px 0 rgba(0,0,0,.6);
    overflow:hidden;flex-shrink:0;
    background:#1a1a2e;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-pixel);font-size:1rem;font-weight:900;
    color:var(--yellow);
    text-shadow:var(--glow-yellow);
    image-rendering:pixelated;
    transition:all var(--t-base);
  }
  .player-avatar:hover{
    border-color:var(--orange-hi);
    box-shadow:var(--glow-orange),3px 3px 0 rgba(0,0,0,.6);
    transform:translate(-1px,-1px);
  }
  .player-avatar img{width:100%;height:100%;object-fit:cover;object-position:center;}
  
  /* Name + Title exactly like Image 1 */
  .player-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;}
  .player-name{
    font-family:var(--font-pixel);
    font-size:.65rem;
    letter-spacing:.04em;
    color:var(--yellow);
    text-shadow:var(--glow-yellow);
    line-height:1.4;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .player-title{
    font-family:var(--font-mono);
    font-size:.58rem;
    color:var(--text-dim);
    font-weight:700;
    letter-spacing:.03em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    line-height:1.3;
  }
  
  /* Online status + XP moved below row */
  .player-online{
    display:flex;align-items:center;gap:.4rem;
    font-family:var(--font-pixel);font-size:.42rem;
    color:var(--green);letter-spacing:.04em;
    margin-top:.65rem;
  }
  .online-dot{
    width:7px;height:7px;border-radius:0;
    background:var(--green);
    box-shadow:var(--glow-green);
    animation:pixelBlink 1.5s step-end infinite;
    transform:rotate(45deg);
  }
  @keyframes pixelBlink{0%,100%{opacity:1}50%{opacity:.2}}
  
  .player-xp{margin-top:.6rem;}
  .player-xp-top{display:flex;justify-content:space-between;margin-bottom:.3rem;font-family:var(--font-pixel);font-size:.4rem;}
  .player-xp-label{color:var(--text-muted);}
  .player-xp-val{color:var(--yellow);text-shadow:var(--glow-yellow);}
  .player-xp-bar{height:7px;background:rgba(10,14,26,.7);border:2px solid rgba(255,215,0,.2);overflow:hidden;position:relative;}
  .player-xp-fill{height:100%;width:78%;background:linear-gradient(90deg,var(--red),var(--orange),var(--yellow));box-shadow:0 0 8px rgba(255,215,0,.4);position:relative;}
  .player-xp-fill::after{content:'';position:absolute;right:0;top:0;width:3px;height:100%;background:var(--yellow-hi);box-shadow:0 0 6px var(--yellow);}
  
  /* ── Status badges ── */
  .sidebar-badges{
    display:flex;gap:.3rem;padding:.6rem .8rem;
    border-bottom:1px solid rgba(255,215,0,.08);
    flex-shrink:0;
  }
  .sb-badge{
    flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;
    padding:.35rem .25rem;
    font-family:var(--font-pixel);font-size:.4rem;
    cursor:default;transition:all var(--t-base);
    background:rgba(10,14,26,.6);
    border:2px solid rgba(69,123,189,.25);
    border-radius:2px;
    color:var(--text-muted);
  }
  .sb-badge .ico{font-size:.8rem;}
  .sb-badge:nth-child(1).active{background:rgba(230,57,70,.12);border-color:var(--red);color:var(--red-hi);box-shadow:2px 2px 0 var(--red-lo),inset 0 0 8px rgba(230,57,70,.1);}
  .sb-badge:nth-child(2).active{background:rgba(244,129,31,.12);border-color:var(--orange);color:var(--orange-hi);box-shadow:2px 2px 0 var(--pixel-orange-d);}
  .sb-badge:nth-child(3).active{background:rgba(123,47,255,.12);border-color:var(--violet);color:var(--violet-hi);box-shadow:2px 2px 0 #4a0fa8;}
  
  /* ── Navigation ── */
  .sidebar-nav{flex:1;padding:.4rem 0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;position:relative;z-index:2;}
  .sidebar-nav::-webkit-scrollbar{display:none;}
  
  .nav-section-label{font-family:var(--font-pixel);font-size:.42rem;color:var(--text-muted);letter-spacing:.18em;padding:.55rem .9rem .2rem;text-transform:uppercase;}
  
  .nav-link{
    display:flex;align-items:center;gap:.65rem;
    margin:.2rem .6rem;
    padding:.55rem .75rem;
    color:var(--text-dim);text-decoration:none;
    font-family:var(--font-pixel);font-size:.52rem;
    letter-spacing:.06em;
    font-weight:900;
    position:relative;transition:all .1s ease;
    background:rgba(10,14,26,.4);
    border:2px solid rgba(69,123,189,.15);
    border-radius:2px;
    white-space:nowrap;overflow:hidden;
  }
  .nav-link:hover{transform:translate(-1px,-1px);color:var(--text);}
  .nav-link:active{transform:translate(1px,1px);}
  
  .nav-link:nth-child(1):hover,.nav-link:nth-child(1).active{background:rgba(230,57,70,.15);border-color:var(--red);color:var(--red-hi);box-shadow:3px 3px 0 var(--red-lo);text-shadow:var(--glow-red);}
  .nav-link:nth-child(2):hover,.nav-link:nth-child(2).active{background:rgba(244,129,31,.15);border-color:var(--orange);color:var(--orange-hi);box-shadow:3px 3px 0 var(--pixel-orange-d);text-shadow:var(--glow-orange);}
  .nav-link:nth-child(3):hover,.nav-link:nth-child(3).active{background:rgba(255,214,10,.12);border-color:var(--yellow);color:var(--yellow-hi);box-shadow:3px 3px 0 var(--yellow-lo);text-shadow:var(--glow-yellow);}
  .nav-link:nth-child(4):hover,.nav-link:nth-child(4).active{background:rgba(6,214,160,.12);border-color:var(--green);color:var(--green-hi);box-shadow:3px 3px 0 var(--green-lo);text-shadow:var(--glow-green);}
  .nav-link:nth-child(5):hover,.nav-link:nth-child(5).active{background:rgba(69,123,189,.15);border-color:var(--blue-hi);color:var(--blue-hi);box-shadow:3px 3px 0 var(--blue-lo);text-shadow:var(--glow-blue);}
  .nav-link:nth-child(6):hover,.nav-link:nth-child(6).active{background:rgba(123,47,255,.15);border-color:var(--violet-hi);color:var(--violet-hi);box-shadow:3px 3px 0 #4a0fa8;text-shadow:var(--glow-violet);}
  .nav-link:nth-child(7):hover,.nav-link:nth-child(7).active{background:rgba(230,57,70,.15);border-color:var(--red);color:var(--red-hi);box-shadow:3px 3px 0 var(--red-lo);text-shadow:var(--glow-red);}
  .nav-link:nth-child(8):hover,.nav-link:nth-child(8).active{background:rgba(244,129,31,.15);border-color:var(--orange);color:var(--orange-hi);box-shadow:3px 3px 0 var(--pixel-orange-d);text-shadow:var(--glow-orange);}
  
  .nav-icon{font-size:.85rem;flex-shrink:0;transition:transform var(--t-base);}
  .nav-link:hover .nav-icon{transform:scale(1.2);}
  .nav-label{position:relative;z-index:1;flex:1;}
  .nav-dot{width:6px;height:6px;border-radius:0;margin-left:auto;flex-shrink:0;opacity:0;transition:opacity var(--t-base);transform:rotate(45deg);}
  .nav-link.active .nav-dot{opacity:1;}
  .nav-link:nth-child(1) .nav-dot,.nav-link:nth-child(7) .nav-dot{background:var(--red);box-shadow:var(--glow-red);}
  .nav-link:nth-child(2) .nav-dot,.nav-link:nth-child(8) .nav-dot{background:var(--orange);box-shadow:var(--glow-orange);}
  .nav-link:nth-child(3) .nav-dot{background:var(--yellow);box-shadow:var(--glow-yellow);}
  .nav-link:nth-child(4) .nav-dot{background:var(--green);box-shadow:var(--glow-green);}
  .nav-link:nth-child(5) .nav-dot{background:var(--blue-hi);box-shadow:var(--glow-blue);}
  .nav-link:nth-child(6) .nav-dot{background:var(--violet-hi);box-shadow:var(--glow-violet);}
  
  .nav-lvl{font-family:var(--font-pixel);font-size:.38rem;padding:.1rem .3rem;background:var(--grad-gold);color:#0a0e1a;border-radius:2px;margin-left:auto;flex-shrink:0;opacity:0;transition:opacity var(--t-base);font-weight:900;box-shadow:2px 2px 0 var(--yellow-lo);}
  .nav-link:hover .nav-lvl,.nav-link.active .nav-lvl{opacity:1;}
  
  /* ── Sidebar Footer — BIG SOCIAL BUTTONS ── */
  .sidebar-footer{
    padding:.7rem .6rem .8rem;
    border-top:2px solid rgba(255,215,0,.1);
    position:relative;z-index:2;flex-shrink:0;
    background:rgba(10,14,26,.4);
  }
  
  .sidebar-socials{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-bottom:.7rem;}
  
  /* BIG FULL-NAME social buttons — no icons, just bold text */
  .sidebar-social{
    display:flex;align-items:center;justify-content:center;
    padding:.6rem .25rem;
    font-family:var(--font-pixel);font-size:.44rem;
    text-decoration:none;letter-spacing:.05em;
    border-radius:2px;
    transition:all .1s ease;
    image-rendering:pixelated;
    text-align:center;
    min-height:36px;
    line-height:1.3;
  }
  .sidebar-social:active{transform:translate(2px,2px)!important;box-shadow:none!important;}
  .sidebar-social .s-ico{display:none;}  /* hide icons */
  .sidebar-social .s-lbl{display:block;font-weight:900;}
  
  /* LinkedIn — Blue */
  .sidebar-social:nth-child(1){
    background:var(--pixel-blue);color:#fff;
    box-shadow:3px 3px 0 var(--pixel-blue-d),inset 1px 1px 0 #64b5f6,inset -1px -1px 0 var(--pixel-blue-d);
  }
  .sidebar-social:nth-child(1):hover{background:#1976d2;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pixel-blue-d),0 0 12px rgba(21,101,192,.5);color:#fff;}
  
  /* GitHub — Violet */
  .sidebar-social:nth-child(2){
    background:var(--violet);color:#fff;
    box-shadow:3px 3px 0 #4a0fa8,inset 1px 1px 0 #b06dff,inset -1px -1px 0 #4a0fa8;
  }
  .sidebar-social:nth-child(2):hover{background:#9b4fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 #4a0fa8,0 0 12px rgba(123,47,255,.5);color:#fff;}
  
  /* Instagram — Red */
  .sidebar-social:nth-child(3){
    background:var(--red);color:#fff;
    box-shadow:3px 3px 0 var(--red-lo),inset 1px 1px 0 #ff8a80,inset -1px -1px 0 var(--red-lo);
  }
  .sidebar-social:nth-child(3):hover{background:#ff5a65;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--red-lo),0 0 12px rgba(230,57,70,.5);color:#fff;}
  
  /* Twitter/X — Orange */
  .sidebar-social:nth-child(4){
    background:var(--orange);color:#0a0e1a;
    box-shadow:3px 3px 0 var(--pixel-orange-d),inset 1px 1px 0 #ffcc80,inset -1px -1px 0 var(--pixel-orange-d);
  }
  .sidebar-social:nth-child(4):hover{background:#ffaa5c;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--pixel-orange-d),0 0 12px rgba(244,129,31,.5);color:#0a0e1a;}
  
  .sidebar-copy{font-family:var(--font-pixel);font-size:.38rem;color:var(--text-muted);letter-spacing:.04em;line-height:1.7;text-align:center;}
  
  /* ── Mobile topbar ── */
  .mobile-topbar{
    display:none;position:fixed;top:0;left:0;right:0;height:56px;
    background:rgba(7,10,20,.97);
    border-bottom:3px solid transparent;
    border-image:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--violet)) 1;
    backdrop-filter:blur(20px);z-index:600;
    align-items:center;justify-content:space-between;padding:0 1rem;
  }
  .mobile-logo{font-family:var(--font-pixel);font-size:.7rem;font-weight:900;background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none;}
  .hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:none;padding:4px;}
  .hamburger span{display:block;width:22px;height:3px;background:var(--yellow);transition:all var(--t-base);transform-origin:center;box-shadow:1px 1px 0 rgba(0,0,0,.4);}
  .hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,6px);background:var(--red-hi);}
  .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
  .hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px);background:var(--red-hi);}
  .mobile-drawer{
    /* CLOSED state — completely non-interactive */
    position:fixed;top:56px;left:0;right:0;
    background:rgba(7,10,20,.98);border-bottom:2px solid rgba(255,215,0,.15);
    padding:.5rem;z-index:599;
    /* Hidden: move off screen, invisible, and NO pointer events */
    transform:translateY(-110%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease, visibility .25s ease;
    display:block; /* always block — controlled by visibility+pointer-events */
  }
  .mobile-drawer.open{
    /* OPEN state — fully interactive */
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:all;
  }
  .mobile-drawer .nav-link{
    margin:.2rem .3rem;
    padding:.7rem .8rem;
    font-size:.55rem;
    /* Make sure links are clickable only when open */
    pointer-events:inherit;
  }
  
  @media(max-width:900px){
    .sidebar{display:none!important;}
    .mobile-topbar{display:flex;}
    .main-content{padding-top:56px;}
  }
  
  /* Desktop — completely hide drawer */
  @media(min-width:901px){
    .mobile-drawer{
      display:none!important;
      visibility:hidden!important;
      pointer-events:none!important;
    }
    .mobile-topbar{display:none!important;}
  }