/* ── Unified navigation ── */
.top-nav{
  display:flex;align-items:center;gap:14px;padding:11px 22px;
  background:linear-gradient(180deg,#0a2029,#08171a);border-bottom:1px solid var(--line);
  box-shadow:0 2px 16px rgba(0,0,0,.4);position:sticky;top:0;z-index:50;
}

/* ── Brand ── */
.tn-brand{display:flex;flex-direction:column;gap:1px;text-decoration:none;flex-shrink:1;min-width:0}
.tn-logo{
  font-family:'Anton',sans-serif;font-weight:400;font-size:clamp(18px,3.2vw,25px);
  letter-spacing:.5px;margin:0;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#ffe69a,#f0a830);-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35));
  overflow:hidden;text-overflow:ellipsis;
}
.tn-sub{font-size:10px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Center menu ── */
.tn-center{flex:1;display:flex;align-items:center;justify-content:center;gap:16px}

/* ── Nav links ── */
.tn-nav-links{display:flex;align-items:center;gap:2px}
.tn-nav-link{
  display:flex;align-items:center;padding:7px 13px;border-radius:9px;color:var(--muted);
  text-decoration:none;font-size:13px;font-weight:600;transition:.14s;white-space:nowrap;
}
.tn-nav-link:hover{color:var(--cream);background:rgba(255,255,255,.06)}
.tn-nav-link.active{color:var(--tote)}

/* ── Reusable Store partial ── */
.store-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 12px;border:1px solid rgba(255,207,82,.42);border-radius:9px;background:linear-gradient(180deg,#3b2631,#251923);color:#ffe69a;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap;transition:.14s;box-sizing:border-box}
.store-button:hover{border-color:var(--tote);background:linear-gradient(180deg,#51313f,#321f2b);transform:translateY(-1px)}
.store-button-icon{font-size:16px;line-height:1}.store-button-preview{padding:2px 5px;border-radius:5px;background:rgba(255,207,82,.18);font-size:8px;letter-spacing:.6px;text-transform:uppercase}.store-button-drawer{width:100%;justify-content:flex-start;padding:10px 12px;margin-top:3px}.store-thanks-popup{cursor:pointer}

/* ── Drawer nav links ── */
.tn-drawer-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.tn-drawer-nav-link{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--cream);text-decoration:none;font-size:13px;font-weight:600;transition:.12s;
}
.tn-drawer-nav-link:hover{background:rgba(255,255,255,.07);color:var(--tote)}

/* ── Right ── */
.tn-right{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}

/* ── LIVE badge ── */
.tn-live{
  display:flex;align-items:center;gap:7px;background:linear-gradient(180deg,#f5474d,#cf2d33);
  color:#fff;font-weight:800;padding:6px 12px;border-radius:5px;font-size:12px;
  letter-spacing:1.5px;animation:nav-pulse 1.6s infinite;box-shadow:0 2px 10px rgba(239,59,65,.4);
  white-space:nowrap;flex-shrink:0;
}
.tn-live .dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
@keyframes nav-pulse{
  0%  {box-shadow:0 0 0 0 rgba(239,59,65,.5)}
  70% {box-shadow:0 0 0 10px rgba(239,59,65,0)}
  100%{box-shadow:0 0 0 0 rgba(239,59,65,0)}
}

/* ── Language picker ── */
.tn-lang{position:relative}
.tn-lang-btn{
  display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:9px;padding:7px 12px;cursor:pointer;
  color:var(--cream);font-family:'Outfit',system-ui,sans-serif;font-size:13px;font-weight:600;
  transition:.14s;white-space:nowrap;
}
.tn-lang-btn:hover{border-color:rgba(255,207,82,.5);background:rgba(255,207,82,.06)}
.tn-lang-code{font-family:'Space Mono',monospace;font-size:11px;color:var(--muted)}
.tn-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:200;min-width:160px;
  background:linear-gradient(180deg,#0e2a20,#08201a);border:1px solid rgba(255,207,82,.3);
  border-radius:11px;box-shadow:0 16px 40px rgba(0,0,0,.65);overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s,transform .15s;
}
.tn-lang:hover .tn-lang-menu,.tn-lang:focus-within .tn-lang-menu{opacity:1;pointer-events:auto;transform:translateY(0)}
.tn-lang-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;text-decoration:none;
  color:var(--cream);font-size:13px;transition:background .1s;
  background:none;border:none;width:100%;cursor:pointer;font-family:'Outfit',system-ui,sans-serif;
  text-align:left;
}
.tn-lang-item span{font-size:16px;line-height:1;width:20px;text-align:center}
.tn-lang-item:hover{background:rgba(255,255,255,.06)}
.tn-lang-item.active{color:var(--tote);background:rgba(255,207,82,.06);font-weight:700}
.tn-lang-section{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  padding:10px 14px 4px;border-top:1px solid rgba(255,255,255,.07);margin-top:2px;
}
.tn-lang-section:first-child{border-top:none;margin-top:0;padding-top:8px}
.tn-drawer-section{
  font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  padding:10px 4px 4px;border-top:1px solid rgba(255,255,255,.07);margin-top:4px;
}
.tn-drawer-section:first-child{border-top:none;margin-top:0;padding-top:2px}

/* ── Audio button (arena) ── */
.tn-snd-wrap{position:relative}
.tn-snd{
  width:40px;height:40px;border-radius:9px;background:linear-gradient(180deg,#0c2a22,#08201a);
  border:1px solid var(--line);color:var(--cream);font-size:17px;cursor:pointer;
  display:grid;place-items:center;transition:.12s;flex:0 0 auto;
}
.tn-snd:hover{border-color:var(--tote)}
.tn-snd.off{opacity:.55}

/* ── Profile pill ── */
.tn-profile{
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  background:linear-gradient(180deg,#0c2a22,#08201a);
  border:1px solid var(--line);border-radius:14px;padding:6px 13px;color:var(--cream);
  text-decoration:none;flex-shrink:0;transition:border-color .15s;
}
.tn-profile:hover{border-color:var(--tote)}
.tn-pname{font-size:12px;font-weight:700;color:var(--tote);max-width:110px;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tn-balance{display:flex;align-items:center;gap:4px;line-height:1.2}
.tn-chips{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:var(--cream)}
.tn-icon{font-size:13px;line-height:1}

/* ── Burger (mobile only) ── */
.tn-burger{
  display:none;width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--cream);font-size:18px;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto;
}

/* ── Mobile drawer ── */
.tn-drawer{
  display:none;position:fixed;top:0;right:0;width:240px;height:100%;
  background:linear-gradient(180deg,#0e2a20,#08201a);border-left:1px solid rgba(255,207,82,.3);
  z-index:300;flex-direction:column;padding:16px 14px;gap:4px;
  box-shadow:-8px 0 30px rgba(0,0,0,.55);
}
.tn-drawer.open{display:flex}
.tn-drawer-close{
  align-self:flex-end;background:none;border:none;color:var(--muted);font-size:20px;
  cursor:pointer;padding:4px 6px;margin-bottom:10px;line-height:1;
}
.tn-drawer-close:hover{color:var(--cream)}
.tn-drawer-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:6px 4px 4px}
.tn-drawer .tn-lang-item{border-radius:8px;padding:10px 12px}
.tn-drawer hr{border:none;border-top:1px solid var(--line);margin:8px 0}

/* ── Responsive ── */
@media (max-width:820px){
  .top-nav{justify-content:space-between;gap:8px;padding:9px 14px}
  .tn-center{display:none}
  .tn-burger{display:flex}
  .tn-live{display:none}
  .tn-snd-wrap{display:none}
  .tn-right{margin-left:0;gap:8px}
  .tn-chips{font-size:13px}
  .tn-brand{flex-shrink:1}
  .store-button-nav{width:36px;height:36px;padding:0;flex:0 0 36px}
  .store-button-nav .store-button-label{display:none}
  .store-button-nav .store-button-preview{display:none}
}
@media (max-width:480px){
  .top-nav{padding:9px 10px;gap:6px}
  .tn-pname{max-width:60px}
  .tn-profile{padding:5px 10px;border-radius:16px}
  .store-button-nav{width:32px;height:32px;min-height:32px;flex-basis:32px}
}

/* ── Mobile drawer audio section ── */
.tn-drawer-audio{padding:4px 0 6px;display:flex;flex-direction:column;gap:6px}
.tn-da-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:0 4px}
.tn-da-mute{background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--muted);border-radius:6px;font-size:11px;padding:3px 8px;cursor:pointer}
.tn-da-mute:hover{color:var(--cream)}
.tn-da-row{display:flex;align-items:center;gap:10px;padding:4px 4px;font-size:14px;cursor:pointer}
.tn-da-row input[type=range]{flex:1;height:4px;accent-color:var(--tote);cursor:pointer}
/* ── Bonus credit popup ── */
.bonus-popup{
  position:fixed;top:50%;left:50%;z-index:9999;pointer-events:none;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;transition:opacity .35s cubic-bezier(.34,1.56,.64,1),transform .35s cubic-bezier(.34,1.56,.64,1);
}
.bonus-popup.bp-show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bonus-popup.bp-interactive{pointer-events:auto;width:min(92vw,380px)}
.bp-inner{
  background:linear-gradient(160deg,#0f3828 0%,#09201a 100%);
  border:2px solid var(--tote);border-radius:22px;padding:30px 48px;text-align:center;
  box-shadow:0 0 60px rgba(255,207,82,.25),0 8px 40px rgba(0,0,0,.7);
  min-width:220px;
}
.bp-icon{font-size:44px;margin-bottom:6px;display:block}
.bp-chips{
  font-family:'Anton',sans-serif;font-size:52px;font-weight:400;letter-spacing:1px;
  background:linear-gradient(180deg,#ffe69a,#f0a830);-webkit-background-clip:text;
  background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4));
  line-height:1;
}
.bp-label{font-size:13px;font-weight:600;color:var(--tote);letter-spacing:.5px;margin-top:4px}
.bp-msg{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.gift-popup-card{position:relative;min-width:0;width:100%;padding:26px 24px}
.gift-popup-close{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#0a241c;color:var(--cream);cursor:pointer;font-size:15px}
.gift-popup-title{font-size:16px;line-height:1.4;margin:10px 0 16px;color:var(--cream)}
.gift-popup-title b{color:var(--tote)}
.gift-quick-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.gift-quick-replies{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.gift-quick-replies button,.gift-open-chat{border:1px solid rgba(255,207,82,.35);background:rgba(255,207,82,.08);color:var(--cream);border-radius:9px;padding:9px 11px;font-family:'Outfit',sans-serif;font-weight:700;cursor:pointer}
.gift-quick-replies button:hover,.gift-open-chat:hover{border-color:var(--tote);background:rgba(255,207,82,.14)}
.gift-open-chat{width:100%;margin-top:10px;background:linear-gradient(180deg,var(--tote),#d4920a);color:#08201a;border:none;padding:11px}

@media (max-width:480px){
  .gift-popup-card{padding:24px 16px 18px}
  .gift-quick-replies{display:grid;grid-template-columns:repeat(3,1fr)}
  .gift-quick-replies button{padding:9px 5px;font-size:12px}
}

/* ── Create room button ── */
.tn-create-btn{
  width:36px;height:36px;border-radius:9px;background:linear-gradient(180deg,#22543d,#173d2c);
  border:1px solid rgba(255,207,82,.4);color:var(--tote);font-size:20px;font-weight:700;
  cursor:pointer;display:grid;place-items:center;flex:0 0 auto;transition:.14s;line-height:1;
}
.tn-create-btn:hover{border-color:var(--tote);background:linear-gradient(180deg,#2d6b50,#1e4f3a)}

/* ── Create room overlay / modal ── */
.cr-overlay{
  display:none;position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.cr-overlay.open{display:flex}
body.cr-modal-open{overflow:hidden}
.cr-panel{
  background:linear-gradient(180deg,#0e2a20,#08201a);
  border:1px solid rgba(255,207,82,.3);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.8);
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;padding:28px;
}
.cr-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.cr-title{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.5px;color:var(--tote);text-transform:uppercase}
.cr-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 6px;line-height:1}
.cr-close:hover{color:var(--cream)}
.cr-form{display:flex;flex-direction:column;gap:14px}
.cr-field{display:flex;flex-direction:column;gap:5px}
.cr-field label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.cr-req{color:var(--hot)}
.cr-hint{font-size:11px;color:var(--muted)}
.cr-field input[type=text],.cr-field input[type=number],.cr-field select,.cr-field textarea{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;
  color:var(--cream);font-family:'Outfit',sans-serif;font-size:14px;padding:10px 13px;
  outline:none;transition:.14s;
}
.cr-field input:focus,.cr-field select:focus{border-color:rgba(255,207,82,.5);background:rgba(255,207,82,.04)}
.cr-field select option{background:#0e2a20}
.cr-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cr-new-category[hidden]{display:none}
.cr-new-category{padding:12px;border:1px dashed rgba(255,207,82,.3);border-radius:10px;background:rgba(255,207,82,.04)}
.cr-check{justify-content:flex-end;flex-direction:row;align-items:flex-end}
.cr-check label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--cream);text-transform:none;letter-spacing:0;cursor:pointer}
.cr-submit{
  background:linear-gradient(180deg,var(--tote),#d4920a);color:#000;border:none;
  border-radius:10px;padding:12px;font-weight:800;font-size:15px;cursor:pointer;
  font-family:'Outfit',sans-serif;margin-top:4px;transition:.14s;
}
.cr-submit:hover{filter:brightness(1.1)}
.cr-submit:disabled{opacity:.5;cursor:not-allowed}
.cr-msg{font-size:13px;min-height:18px}
.cr-msg.good{color:#7cdf9a}
.cr-msg.bad{color:var(--hot)}
.cr-msg a{color:var(--tote)}

@media (max-width:600px){
  .cr-overlay{align-items:flex-start;padding:10px}
  .cr-panel{
    max-height:calc(100dvh - 20px);padding:18px 16px;border-radius:14px;
  }
  .cr-head{margin-bottom:16px}
  .cr-form{gap:11px}
  .cr-row2{grid-template-columns:1fr}
  .cr-check{justify-content:flex-start;align-items:flex-start}
  .cr-field input[type=text],.cr-field input[type=number],.cr-field select,.cr-field textarea{
    width:100%;min-height:44px;font-size:16px;
  }
}