.layout-header {
  position: relative;
  z-index: 50;
  width: 100%;
  height: var(--layout-header-h);
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(230px,1fr) minmax(0,1fr);
  align-items: center;
  padding: 0 20px;
  background: var(--bar);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}

.layout-header__start,
.layout-header__end,
.layout-header__wallet { min-width: 0; }

.layout-header__start { display: flex; align-items: center; gap: 112px; }
.layout-header__wallet { justify-self: center; }
.layout-header__end { justify-self: end; }
.layout-header__mobile-end { display: none; }

.brand { width: 210px; height: 44px; flex: 0 0 210px; display: flex; align-items: center; overflow: hidden; }
.brand img { width: 210px; height: 44px; max-width: none; display: block; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.top-actions__divider { width: 1px; height: 24px; background: rgba(96,109,142,.25); }
.boost-actions { display: flex; align-items: center; gap: 6px; }

.square-btn,
.reward-btn,
.icon-btn,
.wallet,
.login-button { border: 0; cursor: pointer; }

.square-btn,
.icon-btn { width: 40px; height: 40px; padding: 0; border-radius: 8px; }
.square-btn img,
.reward-btn > img,
.icon-btn > img { width: 20px; height: 20px; display: block; margin: auto; }
.square-btn--claim { background: #191c29; }
.square-btn--xp { background: linear-gradient(180deg,rgba(255,84,58,.1),rgba(255,84,58,.5)); border: 1px solid rgba(255,84,58,.1); }

.reward-btn { position: relative; width: 124px; height: 40px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: #68892f; text-transform: uppercase; font-size: 12px; font-weight: 800; }
.reward-btn b,
.notify b { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid var(--bar); border-radius: 8px; background: #f03a00; color: #fff; font-size: 10px; }

.balance { width: 230px; height: 40px; display: flex; align-items: center; gap: 8px; padding-left: 12px; border: 1px solid rgba(54,128,190,.2); border-radius: 8px; background: linear-gradient(90deg,rgba(54,128,190,.52),rgba(54,128,190,.26)); }
.balance__amount { width: 86px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.balance__amount img { width: 20px; height: 20px; object-fit: contain; }
.wallet { width: 124px; height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 8px; background: var(--blue); text-transform: uppercase; font-size: 12px; font-weight: 800; }
.wallet img,
.login-button img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }

.userbar { display: flex; align-items: center; gap: 8px; }
.user-progress { width: 208px; height: 40px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; overflow: hidden; border-radius: 8px; background: #2c3243; }
.userbar__avatar { position: relative; width: 24px; height: 24px; flex: 0 0 24px; overflow: hidden; border-radius: 8px; }
.userbar__avatar img { position: absolute; top: -13.37%; left: -15.55%; width: 131.1%; height: 176.55%; max-width: none; }
.userbar__name { min-width: 0; width: 152px; height: 16px; display: flex; align-items: center; gap: 8px; font-family: "Roboto Condensed",sans-serif; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.userbar__name strong { width: 97px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userbar__name span { height: 14px; padding: 0 6px; border-radius: 4px; background: #3680be; font-size: 12px; line-height: 14px; }
.userbar__name > img { width: 16px; height: 16px; margin-left: auto; transform: scaleY(-1); }
.icon-btn { position: relative; background: #2c3243; color: var(--muted); }
.chat-toggle img { opacity: .8; }

@media (max-width: 1919px) {
  .layout-header__start { gap: 16px; }
  .brand { width: 40px; flex-basis: 40px; }
  .reward-btn { width: 40px; padding: 0; }
  .reward-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .user-progress { width: 168px; }
  .userbar__name { width: 112px; }
  .userbar__name strong { width: 66px; }
}

@media (max-width: 1279px) {
  .layout-header { grid-template-columns: 1fr auto 1fr; }
  .top-actions__divider,
  .boost-actions { display: none; }
  .user-progress { display: none; }
}

@media (max-width: 799px) {
  .layout-header { position: fixed; top: 0; left: 0; right: 0; height: calc(var(--layout-header-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; display: flex; justify-content: space-between; background: linear-gradient(180deg,rgba(18,19,26,.98),rgba(18,19,26,.9)); backdrop-filter: blur(16px); }
  .layout-header__start { display: block; }
  .brand { width: 40px; height: 40px; }
  .brand img { height: 40px; }
  .top-actions,
  .layout-header__wallet,
  .layout-header__end { display: none; }
  .layout-header__mobile-end { display: flex; align-items: center; gap: 8px; }
  .mobile-balance { height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 4px; border-radius: 8px; background: linear-gradient(90deg,rgba(54,128,190,.52),rgba(54,128,190,.26)); font-size: 13px; font-weight: 600; }
  .mobile-balance img { width: 18px; height: 18px; }
}

@media (max-width: 374px) {
  .mobile-balance { padding-inline: 8px; font-size: 12px; }
  .layout-header__mobile-end { gap: 5px; }
}