/* Header bar: [logo][nav] [search, flexible] [language][coins][avatar].
   Loaded after the other theme sheets; selectors are scoped to the site header. */

/* Language: short code (EN, 简中) in the header, full name elsewhere. */
.lang-b .lang-short{display:none}
.hd.vr-header .lang-b .lang-full{display:none}
.hd.vr-header .lang-b .lang-short{display:inline}

/* Layout: the search sits between the navigation and the actions and flexes. */
.hd.vr-header .vr-header-in{gap:24px!important}
.hd.vr-header .vr-nav{flex:0 1 auto;min-width:0}
.hd.vr-header .vr-nav a{white-space:nowrap}
.hd.vr-header .hb-search{flex:1 1 320px;width:auto;min-width:180px;max-width:320px;margin-left:auto}
.hd.vr-header .hd-r{margin-left:0;flex:none;gap:10px}

/* Coin balance chip. */
.hb-coins{display:flex;align-items:center;height:36px;border-radius:18px;background:#1c1f25;border:1px solid #31353e;overflow:hidden;flex:none}
.hb-coins a{display:flex;align-items:center;height:100%;color:inherit;transition:background .15s}
.hb-coins a:hover{background:rgba(255,255,255,.07)}
.hb-coins a:focus-visible{outline:2px solid var(--ps-accent,#ffb900);outline-offset:-2px}
.hb-coins-bal{gap:6px;padding:0 11px 0 8px;font-weight:800;font-size:14px;color:#ffd666;font-variant-numeric:tabular-nums;white-space:nowrap}
.hb-coin{width:19px;height:19px;flex:none}
.hb-coins-add{justify-content:center;width:32px;border-left:1px solid #31353e;color:#fff}
.hb-coins-add .ico{width:16px;height:16px}
.hb-coins.low{border-color:#c2662b}
.hb-coins.low .hb-coins-bal{color:#ff9c5a}

/* Avatar: a round initial instead of the full user name. */
.hd.vr-header .hb-avatar{width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#ffb900,#ff6a3d);color:#141414;font-weight:800;font-size:16px;line-height:1}
.hd.vr-header .hb-avatar:focus-visible{outline:2px solid #fff;outline-offset:2px}
.me-menu .hb-menu-wallet .hb-coin{width:18px;height:18px}
.me-menu .hb-menu-wallet b{margin-left:auto;color:#ffd666;font-variant-numeric:tabular-nums}
.me-menu{width:220px}

/* Wallet anchors land below the fixed header. */
#wallet,#dw-topup{scroll-margin-top:calc(var(--ps-head,64px) + 16px)}

/* Laptop: tighter navigation, narrower search, language as an icon. */
@media (max-width:1199px){
  .hd.vr-header .vr-header-in{gap:16px!important}
  .hd.vr-header .vr-nav{gap:14px}
  .hd.vr-header .vr-nav a{font-size:13px}
  .hd.vr-header .hb-search{flex-basis:200px;min-width:150px;max-width:200px}
  .hd.vr-header .hd-r{gap:8px}
  .hd.vr-header .lang-b .lang-full,.hd.vr-header .lang-b .lang-short,.hd.vr-header .lang-b .ico:last-child{display:none}
  .hd.vr-header .lang-b{width:38px;padding:0;justify-content:center}
}

/* Tablet and phone: navigation lives in the bottom tab bar, search opens full width. */
@media (max-width:960px){
  .hd.vr-header .hb-search{display:none}
  .hd.vr-header .hd-r{margin-left:auto;gap:6px}
  .hd.vr-header .lang{margin-left:0}
}

/* Phone: drop the "+" (the balance itself opens the wallet), keep 38px touch targets. */
@media (max-width:560px){
  .hb-coins .hb-coins-add{display:none}
  .hb-coins .hb-coins-bal{padding:0 10px 0 7px}
  .hd.vr-header .hd-r{gap:4px}
}
@media (max-width:340px){
  .hd.vr-header .logo>span:last-child{display:none}
  .hb-coins .hb-coins-bal{font-size:13px}
}