/* topnav.css — Pixelbones topbar styles for game pages */

:root {
  --r:#FF4510;--r2:#C83A0A;--r3:#8B2800;--r4:#5C1800;
  --r5:#300A00;--r6:#180400;--r7:#0A0100;
  --gold:#f0c000;--tr:.18s ease;
}

/* ── Topbar ── */
.topbar{display:flex;align-items:center;gap:12px;background:var(--r7);border-bottom:1px solid #2a0a00;padding:10px 16px;flex-wrap:wrap;position:sticky;top:0;z-index:1100}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-icon{width:32px;height:32px;background:var(--r);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:18px;color:#fff;clip-path:polygon(0 0,100% 0,100% 75%,75% 100%,0 100%)}
.logo-wrap{line-height:1}
.logo-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:#fff;display:block}
.logo-sub{font-size:9px;font-weight:700;letter-spacing:3px;color:var(--r);text-transform:uppercase}
.search-wrap{flex:1;min-width:160px;display:flex;align-items:stretch;border:1px solid #3a1000;border-radius:6px;overflow:hidden}
.search-wrap input{flex:1;min-width:0;background:#1a0500;border:none;color:#fff;padding:8px 12px;font-family:'Barlow',sans-serif;font-size:13px;outline:none}
.search-wrap input::placeholder{color:#7a3820}
.search-btn{flex-shrink:0;background:#1a0500;border:none;border-left:1px solid #3a1000;color:#b05030;padding:0 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color var(--tr),background var(--tr)}
.search-btn:hover{background:#2a0800;color:#ff6030}
.topbar-btns{display:flex;gap:8px;flex-shrink:0;align-items:center}
.btn-si{background:transparent;border:1px solid #4a1500;color:#ff8060;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:600;font-family:'Barlow',sans-serif;cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.btn-si:hover{background:#2a0800;border-color:var(--r)}
.btn-su{background:var(--r);border:none;color:#fff;padding:7px 14px;border-radius:6px;font-size:12px;font-weight:700;font-family:'Barlow',sans-serif;cursor:pointer;transition:background var(--tr)}
.btn-su:hover{background:var(--r2)}

/* ── User chip ── */
.user-chip{display:none;align-items:center;gap:8px;cursor:pointer}
.user-chip.visible{display:flex}
.user-avatar{width:30px;height:30px;border-radius:50%;background:var(--r3);border:2px solid var(--r);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;flex-shrink:0;overflow:hidden}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.user-info{line-height:1.2}
.user-name{font-size:12px;font-weight:700;color:#fff}
.user-uid{font-size:9px;color:#7a3820;font-weight:600;letter-spacing:.5px}
.btn-logout{background:transparent;border:1px solid #3a1000;color:#7a3820;padding:5px 10px;border-radius:5px;font-size:11px;font-weight:600;font-family:'Barlow',sans-serif;cursor:pointer;transition:color var(--tr),border-color var(--tr)}
.btn-logout:hover{color:#ff8060;border-color:var(--r)}

/* ── Coin chip ── */
.coin-chip{display:none;align-items:center;gap:5px;background:#1a1000;border:1px solid #5a4000;border-radius:20px;padding:4px 10px 4px 6px;cursor:pointer;transition:border-color var(--tr),background var(--tr)}
.coin-chip.visible{display:flex}
.coin-chip:hover{background:#2a1a00;border-color:#c8a000}
.coin-icon{font-size:14px;line-height:1;display:flex;align-items:center}
.coin-bal{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--gold);letter-spacing:1px}
.coin-label{font-size:9px;color:#a08000;font-weight:700;letter-spacing:1px;text-transform:uppercase}

/* ── Styled sidebar scrollbar (visible in mobile drawer) ─────── */
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--r3);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--r);
}
/* Firefox */
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: var(--r3) transparent;
}