/* Header height is measured because mobile layouts and account tools can wrap. */
body{--game-header-height:82px;padding-top:var(--game-header-height)}
.topbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:100;background:#100d22}
.tabs{top:var(--game-header-height)}
html{scroll-padding-top:calc(var(--game-header-height,82px) + 12px)}
#modalBackdrop{top:var(--game-header-height);overflow-y:auto}
#openingModal{max-height:calc(100dvh - var(--game-header-height) - 40px);overflow-y:auto}
@media(max-width:768px){body{--game-header-height:160px}#openingModal{max-height:calc(100dvh - var(--game-header-height) - 16px)}}
.topbar .player-level{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:90px}
.player-level-heading{display:flex;align-items:baseline;justify-content:center;gap:6px}
.topbar .player-level-heading span{font-size:11px;letter-spacing:1.4px;line-height:1}
.topbar .player-level-heading strong{font-size:18px;line-height:1.1}
.player-level #xpLabel{font-size:10px;white-space:nowrap;color:var(--muted);line-height:1.3}
.player-level .progress{width:100%;min-width:65px;margin-top:4px;height:5px;border-radius:4px}
@media(max-width:768px){.topbar .player-level{min-width:0}.topbar .player-level-heading{gap:4px}.topbar .player-level-heading span{font-size:8px;letter-spacing:.7px}.topbar .player-level-heading strong{font-size:15px}.player-level #xpLabel{font-size:9px}}