.app-header{position:sticky;top:max(12px,calc(var(--telegram-content-safe-top, 0px) + 12px),calc(env(safe-area-inset-top) + 12px));z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 15px;padding:5px 8px;border:1px solid #ffffff0d;border-radius:16px;background:#0a0912ed;backdrop-filter:blur(14px);transition:background-color .24s ease,border-color .24s ease,backdrop-filter .24s ease,box-shadow .24s ease}
.app-header.is-scrolled{border-color:#ffffff16;background:#0a091280;backdrop-filter:blur(22px) saturate(145%);box-shadow:0 8px 28px #0002}
.app-header .lobby-identity{display:flex;min-width:0;align-items:center;gap:10px;color:inherit;text-decoration:none}
.app-header .lobby-avatar{display:grid;flex:0 0 44px;width:44px;height:44px;overflow:hidden;place-items:center;border:1px solid #a78bfa66;border-radius:50%;background:linear-gradient(145deg,#302347,#171522);color:#e0caff;font-size:1.1rem}
.app-header .lobby-avatar img{width:100%;height:100%;object-fit:cover}
.app-header .lobby-player-copy{display:grid;min-width:0;gap:3px}
.app-header .lobby-name-line{display:flex;min-width:0;align-items:center;gap:6px}
.app-header .lobby-name{overflow:hidden;font-size:.91rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}
.app-header .lobby-badges{display:flex;align-items:center;gap:6px}
.app-header .lobby-level{color:#b9a0ff;font-size:.64rem;font-weight:900;letter-spacing:.04em}
.app-header .lobby-badge-separator{width:1px;height:11px;background:#ffffff28}
.app-header .lobby-rank{overflow:hidden;background:linear-gradient(100deg,var(--rank-color,#a99aff),var(--rank-color-end,#c4bbff));background-clip:text;color:transparent;font-size:.64rem;font-weight:900;letter-spacing:.035em;text-overflow:ellipsis;white-space:nowrap}
.app-header .lobby-cosmetic-icon{display:inline-grid;flex:0 0 18px;width:18px;height:18px;place-items:center;border:1px solid #ffffff24;border-radius:6px;background:#ffffff0c;color:#e4d2ff;font-size:.63rem}
.app-header .notification-link{position:relative;display:grid;flex:0 0 48px;width:48px;height:48px;place-items:center;border:0;border-radius:15px;background:transparent;color:#e3dcf2;font-size:1.55rem;text-decoration:none}
.app-header .notification-link i{transform-origin:50% 12%}
.app-header .notification-link.has-unread i{animation:app-notification-alert 2.4s ease-in-out infinite}
.app-header .notification-count{position:absolute;top:1px;right:1px;display:grid;min-width:18px;height:18px;place-items:center;padding:0 4px;border:2px solid #11101b;border-radius:999px;background:#ff3f8e;color:white;font-size:.61rem;font-weight:900}
.app-header .notification-count[hidden]{display:none}
@keyframes app-notification-alert{0%,100%{color:#e3dcf2;filter:none;transform:rotate(0)}8%{color:#f18c98;filter:drop-shadow(0 0 3px #ff526455);transform:rotate(-9deg)}16%{color:#ffd0d3;filter:drop-shadow(0 0 4px #ff526466);transform:rotate(8deg)}24%{color:#f18c98;filter:drop-shadow(0 0 3px #ff526455);transform:rotate(-5deg)}32%{color:#e3dcf2;filter:none;transform:rotate(0)}}
@media(max-width:380px){.app-header .lobby-avatar{flex-basis:40px;width:40px;height:40px}.app-header .notification-link{flex-basis:42px;width:42px;height:42px}}
@media(max-width:560px){.app-header{top:max(88px,calc(var(--telegram-content-safe-top, 0px) + 12px),calc(env(safe-area-inset-top) + 46px))}}
@media(prefers-reduced-motion:reduce){.app-header .notification-link.has-unread i{animation:none}}