/* The viewport belongs to the arena in both browser and desktop clients. */
html:has(body.arena-shell), body.arena-shell { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body.arena-shell > header, body.arena-shell .bottom { display: none !important; }
body.arena-shell main { position: fixed; inset: 0; width: 100%; height: var(--game-viewport, 100dvh); max-width: none; margin: 0; padding: 0; }
body.arena-shell .arena { width: 100%; height: 100%; min-height: 0; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
body.arena-shell:is([data-game-state="menu"], [data-game-state="lobby"], [data-game-state="servers"]) :is(.hud, .wave-badge, .xp-track, #equipmentRail, #bossHud, #damageMeter, #partyFrames, #performanceHud) { visibility: hidden; }
body.arena-shell .floating-pause { display: none; }
body.arena-shell .game-fullscreen-toggle { display: none; position: absolute; z-index: 20; left: calc(env(safe-area-inset-left, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: 48px; height: 48px; padding: 2px; border: 0; background: transparent; border-radius: 8px; filter: drop-shadow(0 2px 3px #0009); touch-action: manipulation; }
body.arena-shell[data-game-state="playing"] .game-fullscreen-toggle { display: block; }
body.arena-shell .game-fullscreen-toggle img { display: block; width: 100%; height: 100%; }
body.arena-shell .game-fullscreen-toggle:hover { filter: drop-shadow(0 0 5px #a8c4b1); }
body.arena-shell[data-game-state="paused"] #dashButton { display: none; }
body.arena-shell .overlay:has(.nightfall-lobby) { background: #05090735; bottom: calc(env(safe-area-inset-bottom, 0px) + 64px); }
body.arena-shell .panel.nightfall-lobby { background: #111815ed; }
body.arena-shell .sprite-load-notice { bottom: auto; }
body.arena-shell .lobby-utility-actions { position: absolute; z-index: 25; right: calc(env(safe-area-inset-right, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 6px; background: #111815e8; border: 1px solid #46524b; border-radius: 10px; }
body.arena-shell .lobby-utility-actions[hidden] { display: none; }
body.arena-shell .lobby-utility-actions button { font-size: 12px; padding: 7px 12px; }
body.arena-shell .lobby-utility-actions .language-picker { margin: 0; }
body.arena-shell .lobby-utility-actions .language-picker select { width: auto; min-width: 0; padding: 7px 8px 7px 34px; color: #e5eee8; appearance: auto; }
body.arena-shell .lobby-brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
body.arena-shell .lobby-heading:has(.lobby-brand) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 4px; padding-bottom: 10px; margin-bottom: 12px; }
body.arena-shell .lobby-heading .lobby-brand { grid-column: 1; grid-row: 1; }
body.arena-shell .lobby-heading:has(.lobby-brand) .lobby-identity { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin: 0; }
body.arena-shell .lobby-brand-warden { flex: 0 0 80px; width: 80px; height: 90px; background: radial-gradient(ellipse at 50% 65%, #b3ce7133, #b3ce7100 68%); filter: drop-shadow(0 3px 8px #0008); }
body.arena-shell .lobby-heading .lobby-wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 38px; font-weight: 700; letter-spacing: 4px; line-height: 1.15; color: #ebd6a2; background: linear-gradient(#fff3c9 15%, #d8be7f 60%, #a5b98c); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px #0009); margin: 0 0 7px; }
body.arena-shell .pause-actions { flex-wrap: wrap; }
body.arena-shell .overlay:has(.pause-layout) { padding: 12px; }
body.arena-shell .panel.pause-layout { max-height: calc(var(--game-viewport, 100dvh) - 24px); overflow-y: auto; }
@media (pointer: coarse) {
    body.arena-shell .game-fullscreen-toggle { left: calc(50% + 62px); }
    body.arena-shell .player-profile-dialog { width: min(520px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(var(--game-viewport, 100dvh) - 24px); padding: 20px; overflow-y: auto; }
    body.arena-shell .player-profile-dialog:has(#playerNameInput) form { display: grid; grid-template-columns: 1fr; gap: 12px; }
    body.arena-shell .player-profile-dialog:has(#playerNameInput) h2 { font-size: 26px; margin: 0 0 18px; }
    body.arena-shell :is(.player-profile-dialog, .account-panel) input { font-size: 16px; min-height: 44px; width: 100%; }
    body.arena-shell .player-profile-dialog:has(#playerNameInput) button { min-height: 44px; font-size: 16px; }
    body.arena-shell[data-game-state="playing"] .floating-pause { display: block; position: absolute; z-index: 20; left: 50%; right: auto; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); min-width: 48px; min-height: 44px; padding: 10px 14px; background: #101e27dd; border: 1px solid #adbb8c88; border-radius: 12px; touch-action: manipulation; }
    body.arena-shell .lobby-utility-actions { gap: 4px; padding: 3px; right: calc(env(safe-area-inset-right, 0px) + 6px); bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); }
    body.arena-shell .lobby-utility-actions button { min-height: 32px; font-size: 11px; padding: 5px 8px; }
    body.arena-shell .lobby-utility-actions .language-picker select { width: 34px; height: 32px; min-height: 32px; padding: 0; color: transparent; appearance: none; -webkit-appearance: none; }
    body.arena-shell .lobby-utility-actions .language-globe { left: 8px; }
    body.arena-shell .hud { top: calc(env(safe-area-inset-top, 0px) + 12px); }
}
@media (pointer: coarse) and (orientation: portrait) {
    body.arena-shell .overlay:has(.nightfall-lobby) { top: clamp(130px, 22dvh, 200px); }
    body.arena-shell .overlay:has(.nightfall-lobby) { bottom: clamp(100px, 18dvh, 160px); }
}
@media (pointer: coarse) and (orientation: landscape) {
    body.arena-shell .overlay:has(.nightfall-lobby) { left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); }
    body.arena-shell .panel.nightfall-lobby { padding: 10px 12px; }
    body.arena-shell .lobby-brand { gap: 10px; }
    body.arena-shell .lobby-brand-warden { flex-basis: 56px; width: 56px; height: 63px; }
    body.arena-shell .lobby-heading .lobby-wordmark { font-size: 24px; letter-spacing: 2px; }
    body.arena-shell .lobby-heading p { font-size: 10px; }
    body.arena-shell .lobby-heading .lobby-identity { font-size: 10px; }
    body.arena-shell .lobby-scroll-layout .hero-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 6px; margin-bottom: 12px; }
    body.arena-shell .lobby-scroll-layout .hero-card-shell { min-width: 0; }
    body.arena-shell .lobby-scroll-layout .hero-card { min-width: 0; min-height: 120px; padding: 7px 4px; flex: 1 1 auto; }
    body.arena-shell .lobby-scroll-layout .hero-card canvas { width: 58px; height: 58px; }
    body.arena-shell .lobby-scroll-layout .hero-card b { font-size: 12px; }
    body.arena-shell .lobby-scroll-layout .hero-card span { font-size: 9px; }
}
@media (max-width: 700px) {
    body.arena-shell .lobby-brand { gap: 10px; }
    body.arena-shell .lobby-brand-warden { flex-basis: 64px; width: 64px; height: 72px; }
    body.arena-shell .lobby-heading .lobby-wordmark { font-size: 28px; letter-spacing: 2px; }
}
@media (pointer: coarse) and (orientation: landscape) {
    body.arena-shell .panel.pause-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
    body.arena-shell .pause-center { grid-column: 1 / -1; grid-row: 1; padding: 0; }
    body.arena-shell .pause-center h2 { font-size: 22px; margin: 6px 0; }
    body.arena-shell .pause-center p { margin-bottom: 6px; }
    body.arena-shell .pause-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
    body.arena-shell .pause-actions button { min-height: 44px; padding: 8px; font-size: 12px; }
}

body.arena-shell:is([data-game-state="market"],[data-game-state="talents"],[data-game-state="achievements"],[data-game-state="leaderboard"],[data-game-state="challenges"]) :is(.hud,.wave-badge,.xp-track,#equipmentRail,#bossHud,#damageMeter,#partyFrames,#performanceHud) { visibility: hidden; }
body.arena-shell:is([data-game-state="talents"],[data-game-state="achievements"],[data-game-state="challenges"]) .overlay { background: #05090755; }

body.arena-shell .game-fullscreen-toggle { left: auto; right: calc(env(safe-area-inset-right,0px) + 12px); }
body.arena-shell #damageMeter { right: calc(env(safe-area-inset-right,0px) + 12px); bottom: calc(env(safe-area-inset-bottom,0px) + 72px); }
body.arena-shell.cinematic-menu-active .lobby-utility-actions { bottom: calc(env(safe-area-inset-bottom,0px) + 52px); background: transparent; border: 0; padding: 0; gap: 8px; }
body.arena-shell.cinematic-menu-active .lobby-utility-actions button, body.arena-shell.cinematic-menu-active .lobby-utility-actions .language-picker select { border: 0; background: #071525df; color: #cfdfec; box-shadow: 0 2px 8px #02081166; border-radius: 5px; }
body.arena-shell.cinematic-menu-active .lobby-utility-actions button:hover { background: #112943; color: #f0e2bd; }
@media (pointer: coarse) {
 body.arena-shell .game-fullscreen-toggle { left: auto; right: calc(env(safe-area-inset-right,0px) + 8px); }
 body.arena-shell.cinematic-menu-active .lobby-utility-actions { bottom: calc(env(safe-area-inset-bottom,0px) + 44px); }
 body.arena-shell.cinematic-menu-active .lobby-utility-actions .language-picker select { color: transparent; }
 body.arena-shell.cinematic-menu-active .overlay:has(.title-menu) { bottom: calc(env(safe-area-inset-bottom,0px) + 84px); }
}
@media (pointer: coarse) {
 body.arena-shell[data-game-state="playing"] .game-fullscreen-toggle { display: none; }
 body.arena-shell #damageMeter { right: 4px; bottom: calc(env(safe-area-inset-bottom,0px) + 4px); }
 body.arena-shell .overlay:has(.pause-layout) { left: env(safe-area-inset-left,0px); right: env(safe-area-inset-right,0px); padding: 12px; }
 body.arena-shell .panel.pause-layout { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
}
@media (pointer: coarse) {
 body.arena-shell .hud { left: calc(env(safe-area-inset-left,0px) + 8px); }
 body.arena-shell .health > #dashButton { top: 0; left: calc(100% + 6px) !important; right: auto; }
 body.arena-shell #partyFrames { left: calc(env(safe-area-inset-left,0px) + 8px); }
 body.arena-shell .party-member { position: relative; }
 body.arena-shell .party-member > #dashButton { position: absolute; left: 180px; top: 0; }
}
@media (pointer: coarse) {
 body.arena-shell .party-member:has(> #dashButton:not([hidden])) { grid-template-columns: 174px 44px minmax(0,1fr); }
 body.arena-shell .party-member > #dashButton { position: static; grid-column: 2; grid-row: 1; }
 body.arena-shell .party-member:has(> #dashButton:not([hidden])) > .party-equipment { grid-column: 3; grid-row: 1; grid-template-columns: repeat(3,21px); }
}
@media (pointer: coarse) and (max-width:650px) {
 body.arena-shell .party-member:has(> #dashButton:not([hidden])) { grid-template-columns: 134px 44px minmax(0,1fr); }
}
@media (pointer: coarse) {
 body.arena-shell .overlay:has(.panel-achievements) { left: env(safe-area-inset-left,0px); right: env(safe-area-inset-right,0px); top: env(safe-area-inset-top,0px); bottom: env(safe-area-inset-bottom,0px); padding: 8px; align-items: center; }
 body.arena-shell .panel.panel-achievements { width: 100%; max-width: 100%; min-width: 0; max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 16px); overflow-y: auto; box-sizing: border-box; padding: 12px; }
 body.arena-shell .panel-achievements .chronicle-layout, body.arena-shell .panel-achievements .chronicle-content, body.arena-shell .panel-achievements .chronicle-cards { max-height: none; overflow: visible; min-height: 0; }
}
@media (pointer: coarse) and (orientation: landscape) {
 body.arena-shell .panel-achievements .chronicle-layout { grid-template-columns: 140px minmax(0,1fr); }
 body.arena-shell .panel-achievements > h2 { font-size: 24px; margin-block: 6px; }
 body.arena-shell .panel-achievements .chronicle-summary { margin-block: 6px; }
}
@media (pointer: coarse) {
 body.arena-shell .panel-achievements .chronicle-layout, body.arena-shell .panel-achievements .chronicle-cards { flex: none; }
 body.arena-shell .panel-achievements .chronicle-categories { overflow: visible; }
}
@media (pointer: coarse) {
 body.arena-shell .overlay:has(.upgrade-panel) { left: env(safe-area-inset-left,0px); right: env(safe-area-inset-right,0px); padding: 12px; }
 body.arena-shell .panel.upgrade-panel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; max-height: calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 24px); overflow-y: auto; }
 body.arena-shell[data-game-state="playing"] .floating-pause { left: auto; right: 4px; bottom: var(--pause-bottom,64px); transform: none; width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: grid; place-items: center; padding: 4px; border: 0; background: transparent; border-radius: 0; color: #d9eaf5; }
}
@media (pointer: coarse) and (orientation: landscape) {
 body.arena-shell .panel.panel-achievements { display: block; height: auto; overflow-y: auto; }
 body.arena-shell .panel-achievements .chronicle-layout { display: block; }
 body.arena-shell .panel-achievements .chronicle-categories { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; margin-bottom: 8px; }
 body.arena-shell .panel-achievements .chronicle-category { flex: 0 0 auto; padding: 5px 8px; }
 body.arena-shell .panel-achievements .chronicle-nav-heading { display: none; }
 body.arena-shell .panel-achievements .chronicle-content { display: block; }
 body.arena-shell .panel-achievements .chronicle-summary { display: none; }
 body.arena-shell .panel-achievements .eyebrow, body.arena-shell .panel-achievements > .hint { display: none; }
 body.arena-shell .panel-achievements .progression-navigation { margin-bottom: 4px; }
 body.arena-shell .panel-achievements .progression-navigation button { padding: 6px 12px; min-height: 32px; }
 body.arena-shell .panel.nightfall-lobby.shop-page-shell { display: block; height: auto; overflow-y: auto !important; }
 body.arena-shell .market-shop-page, body.arena-shell .market-shop-page > .market-content { display: block; }
 body.arena-shell .market-shop-page .lobby-heading { height: auto; min-height: 0; margin-bottom: 8px; padding-bottom: 6px; gap: 4px; }
 body.arena-shell .market-shop-page .lobby-heading h2 { font-size: 24px; margin: 0; }
 body.arena-shell .market-shop-page .lobby-heading p { display: none; }
 body.arena-shell .market-top-back { margin-bottom: 6px; }
 body.arena-shell .market-top-back button { min-height: 32px; padding-block: 6px; }
 body.arena-shell .market-shop-page .shop-layout { display: block; }
 body.arena-shell .market-shop-page .market-tabs { flex-direction: row; overflow-x: auto; margin-bottom: 8px; }
 body.arena-shell .market-shop-page .market-tabs button { padding: 6px 10px; }
 body.arena-shell .market-shop-page .shop-content { overflow: visible; }
 body.arena-shell .market-shop-page .market-toolbar { margin-bottom: 8px; min-height: 0; }
 body.arena-shell .market-shop-page .market-shop-layout { grid-template-columns: minmax(0,1fr) minmax(180px,.8fr); gap: 12px; }
 body.arena-shell .market-shop-page .market-status { position: static; }
}
@media (pointer: coarse) and (orientation: landscape) {
 body.arena-shell .panel.nightfall-lobby.challenge-page-shell { display: block; height: auto; overflow-y: auto !important; }
 body.arena-shell .challenge-page, body.arena-shell .challenge-page > .market-content { display: block; }
 body.arena-shell .challenge-page .lobby-heading { height: auto; min-height: 0; margin-bottom: 8px; padding-bottom: 6px; }
 body.arena-shell .challenge-page .lobby-heading h2 { font-size: 24px; margin: 0; }
 body.arena-shell .challenge-page .lobby-heading p { display: none; }
 body.arena-shell .challenge-page .chronicle-summary { display: none; }
 body.arena-shell .challenge-page .challenge-layout { display: block; }
 body.arena-shell .challenge-page .chronicle-categories { display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; margin-bottom: 8px; }
 body.arena-shell .challenge-page .chronicle-category { flex: 0 0 auto; padding: 5px 8px; }
 body.arena-shell .challenge-page .chronicle-nav-heading { display: none; }
 body.arena-shell .challenge-page .challenge-content { overflow: visible; }
}
@media (pointer: coarse) {
 body.arena-shell .lobby-utility-actions #lobbyPreviewToggle { order: 2; }
}
@media (pointer: coarse) and (orientation: portrait) {
 body.arena-shell .lobby-utility-actions { gap: 3px; }
 body.arena-shell .lobby-utility-actions button { padding-inline: 6px; font-size: 10px; }
}
body.arena-shell .lobby-utility-actions button[data-utility-icon] { display: grid; place-items: center; width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 6px; border: 0; border-radius: 6px; color: #ccdfef; }
body.arena-shell .lobby-utility-actions button[data-utility-icon] svg { width: 24px; height: 24px; }
body.arena-shell .lobby-utility-actions button[data-utility-icon][aria-pressed="false"] { color: #9aaaba; }
@media (pointer: coarse) and (orientation: landscape) {
 body.arena-shell .lobby-utility-actions, body.arena-shell:not(.cinematic-menu-active) .lobby-utility-actions, body.arena-shell.cinematic-menu-active .lobby-utility-actions { width: 36px; max-width: 36px; }
 body.arena-shell .lobby-utility-actions .language-picker select, body.arena-shell.cinematic-menu-active .lobby-utility-actions .language-picker select { color: transparent; width: 36px; padding: 0; }
 body.arena-shell .lobby-utility-actions .language-globe { left: 9px; }
}
.lobby-sound-control{position:relative;order:2;display:grid;place-items:center}.lobby-volume-popover{position:absolute;right:0;bottom:100%;box-sizing:border-box;display:none;place-items:center;padding:10px 0;width:36px;height:132px;background:#10263bee;border:1px solid #3a5b79;border-radius:18px;box-shadow:0 8px 24px #0008;z-index:20}.lobby-volume-popover input{writing-mode:vertical-lr;direction:rtl;appearance:auto;width:20px;height:110px;margin:0;accent-color:#9fd3f5;cursor:pointer}.lobby-volume-popover span,.lobby-volume-popover output{display:none}.lobby-sound-control:hover .lobby-volume-popover,.lobby-sound-control:focus-within .lobby-volume-popover{display:grid}