.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}
.lobby-header-stack{position:sticky;top:max(12px,calc(var(--telegram-content-safe-top, 0px) + 12px),calc(env(safe-area-inset-top) + 12px));z-index:5;isolation:isolate;overflow:hidden;margin:0 0 15px;padding-bottom:26px;border:0;border-radius:16px;background:transparent}
.lobby-header-stack::before{position:absolute;top:0;right:0;left:0;z-index:-1;height:100%;border:1px solid #ffffff0d;border-radius:16px;background:#0a0912ed;backdrop-filter:blur(14px);content:"";transition:height .8s cubic-bezier(.4,0,.2,1),background-color .4s ease,border-color .4s ease,box-shadow .4s ease}
.lobby-header-stack.is-scrolled::before{height:calc(100% - 26px);border-color:#ffffff16;background:#0a091280;backdrop-filter:blur(22px) saturate(145%);box-shadow:0 8px 28px #0002}
.lobby-header-stack .app-header,.lobby-header-stack .app-header.is-scrolled{position:relative;top:auto;z-index:2;margin:0;padding:5px 8px;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none}
.lobby-header-stack .lobby-progress-collapse{position:absolute;right:0;bottom:0;left:0;z-index:1;opacity:1;transform:translateY(0);clip-path:inset(0);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1),clip-path .8s cubic-bezier(.4,0,.2,1)}
.lobby-header-stack.is-scrolled .lobby-progress-collapse{opacity:0;transform:translateY(-8px);clip-path:inset(100% 0 0);pointer-events:none}
.lobby-header-stack .lobby-level-progress{display:grid;gap:5px;padding:1px 13px 8px}
.lobby-header-stack .lobby-level-progress-copy{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#a9a1bb;font-size:.57rem;font-weight:850;letter-spacing:.075em;line-height:1;text-transform:uppercase}
.lobby-header-stack .lobby-level-progress-copy span:last-child{color:#d7c3ff;font-variant-numeric:tabular-nums;letter-spacing:.025em}
.lobby-header-stack .lobby-level-progress-track{position:relative;height:3px;overflow:hidden;border-radius:999px;background:#ffffff18}
.lobby-header-stack .lobby-level-progress-track span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#8b5cf6,#ff4bba);box-shadow:0 0 8px #ba66ff99;transition:width .4s ease}
.lobby-header-stack.is-progress-loaded .lobby-level-progress-track span{transition:width 1s cubic-bezier(.18,.72,.22,1)}
.lobby-header-stack.is-progress-loaded .lobby-level-progress-track::after{position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,#ffffffa8,transparent);animation:level-progress-sheen 1.15s .12s ease-out both;content:""}
@keyframes level-progress-sheen{to{transform:translateX(100%)}}
.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))}.lobby-header-stack{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}}
@media(prefers-reduced-motion:reduce){.lobby-header-stack::before,.lobby-header-stack .lobby-level-progress-track span,.lobby-header-stack .lobby-progress-collapse{transition:none}.lobby-header-stack.is-progress-loaded .lobby-level-progress-track::after{animation:none}}