/* The ID arm preserves the previous selector specificity without a descendant search. */
/* Gameplay HUD uses compact CSS pixels, independent of arena/camera size. */
body:not(.touch-device) #match:not([hidden])>.heading{top:8px!important;left:10px!important;right:10px!important;min-height:30px!important;gap:8px!important}
body:not(.touch-device) #match .heading h1{font-size:14px!important;line-height:18px!important}
body:not(.touch-device) #match .heading>div:first-child{padding:5px 8px!important}
body:not(.touch-device) #match .settings{gap:6px!important}
body:not(.touch-device) #match .settings button{font-size:11px!important;min-height:32px!important;padding:5px 9px!important}
body:not(.touch-device) #match .hud{top:48px!important;left:10px!important;right:10px!important;grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr)!important;gap:10px!important;align-items:start!important}
body:not(.touch-device) #match .fighter{box-sizing:border-box;width:220px!important;max-width:100%!important;padding:7px 9px!important;transform:none!important;border-radius:14px!important;border-bottom-width:4px!important}
body:not(.touch-device) #match .name{font-size:11px!important;letter-spacing:0!important;gap:6px!important}
body:not(.touch-device) #match :is(#player-side,#botname){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:not(.touch-device) #match .hud-rank img{width:20px!important;height:20px!important}
body:not(.touch-device) #match :is(#php,#bhp){font-size:13px!important;padding:2px 4px!important;flex:none}
body:not(.touch-device) #match .health{height:8px!important;margin-top:5px!important}
body:not(.touch-device) #match #bot-rating{font-size:8px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.touch-device) #match .timer{box-sizing:border-box;width:84px!important;font-size:25px!important;line-height:1.1!important;padding:5px 4px!important;transform:none!important;border-width:2px!important;border-bottom-width:4px!important;border-radius:12px!important}
body:not(.touch-device) #match .timer:before{font-size:7px!important;letter-spacing:.5px!important}
body:not(.touch-device) #match .timer small{font-size:8px!important;line-height:1.2!important}
body:not(.touch-device) #match .bottom{right:10px!important;bottom:10px!important;grid-template-columns:repeat(2,130px)!important;gap:6px!important;width:auto!important}
body:not(.touch-device) #match .bottom .spell{box-sizing:border-box;grid-template-columns:30px minmax(0,1fr)!important;grid-template-rows:22px auto!important;gap:2px 6px!important;min-height:58px!important;padding:5px 7px!important;border-radius:11px!important}
body:not(.touch-device) #match .bottom .spell>.icon{width:30px!important;height:30px!important}
body:not(.touch-device) #match .bottom .spell strong{font-size:10px!important;line-height:12px!important}
body:not(.touch-device) #match .bottom .spell kbd{width:40px!important;height:22px!important}
body:not(.touch-device) #match .bottom .spell kbd>.hex-key-art{width:36px!important;height:23px!important}
body:not(.touch-device) #match .bottom .spell kbd>.hex-icon-mouse{width:19px!important;height:23px!important;min-width:0!important}
body:not(.touch-device) #match .bottom .spell[data-spell=ultimate]{grid-template-columns:30px minmax(0,1fr) 40px!important;grid-template-rows:auto!important;min-height:44px!important}
body:not(.touch-device) #match .team-roster{top:128px!important;left:10px!important;right:10px!important;grid-template-columns:minmax(0,220px) minmax(0,220px)!important;justify-content:space-between;gap:12px!important}
body:not(.touch-device) #match .notice{font-size:10px!important;right:286px!important;bottom:12px!important}
/* The local player's warning remains visible above the arena without blocking input. */
body.low-health:is(.hex-match-visible,#match[hidden]) #match::after{display:block!important;content:"";position:absolute;inset:0;z-index:6;pointer-events:none;box-shadow:inset 0 0 30px #ed42604d;animation:heartbeat-edge .95s ease-out infinite}
@media(prefers-reduced-motion:reduce){body.low-health #match::after{animation:none!important}}
/* Compact HUD applies only to the live arena; result/MVP screens retain their original layout. */
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .bottom,body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match>.footer{display:none!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .team-roster{top:62px!important;left:8px!important;right:8px!important;grid-template-columns:minmax(0,120px) minmax(0,120px)!important;gap:12px!important;pointer-events:none}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-member{padding:3px 5px!important;margin-bottom:3px!important;border-radius:7px!important;background:#19263bcc!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-name{font-size:9px!important;gap:3px!important;line-height:14px!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-name img{width:13px!important;height:13px!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-member progress{height:3px!important;margin:2px 0 0!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-spells{display:flex!important;gap:3px!important;margin-top:3px!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-spells small{display:none!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-spells :is(img,svg),body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .unknown-spell{width:14px!important;height:14px!important;font-size:9px!important;min-width:0!important}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #mobile-arena-map{top:auto!important;left:50%!important;bottom:6px!important;transform:translateX(-50%)!important;width:66px!important;height:38px!important;pointer-events:none}
body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .notice{top:auto!important;bottom:48px!important;left:30%!important;right:30%!important;font-size:9px!important;line-height:12px!important;letter-spacing:0!important;max-height:24px;overflow:hidden;pointer-events:none}
@media(max-width:600px){body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .team-roster{grid-template-columns:minmax(0,100px) minmax(0,100px)!important}body.touch-device:where([data-overlay-hidden]):not(#_ov):not(._ov) #match .battle-name{font-size:8px!important}}
/* Mobile team results: each team owns one full-width row. */
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto!important;gap:5px!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-team{grid-column:1!important;min-width:0!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-grid{grid-template-columns:repeat(var(--players),minmax(0,1fr))!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-card{grid-template-rows:26px 46px 16px 30px!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-card canvas:not(.hero-celebration-overflow){height:46px!important;width:100%!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-rank .rank-badge{width:22px!important;height:22px!important;flex-basis:22px!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-medals{padding:1px 5px!important}
body.touch-device #overlay #match-scoreboard .hero-board:not(.duel-board) .hero-numbers b{font-size:12px!important;line-height:14px!important}
/* Give the two result rows a real height budget instead of shrinking a clipped block. */
body.touch-device #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) .modal{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:22px minmax(0,1fr) 34px!important;gap:4px 8px!important;width:min(760px,calc(100vw - 16px))!important;max-width:100%!important;height:calc(100dvh - 12px)!important;max-height:calc(100dvh - 12px)!important;padding:4px 8px!important;zoom:1!important;margin:0!important;overflow:hidden!important;box-sizing:border-box!important}
body.touch-device #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) :is(.sigil,.eyebrow,#hint){display:none!important}
body.touch-device #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) #title{grid-column:1/-1!important;grid-row:1!important;font-size:18px!important;line-height:22px!important;margin:0!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes]{grid-column:1/-1!important;grid-row:2!important;display:flex!important;flex-direction:column!important;min-height:0!important;height:100%!important;gap:3px!important;overflow:hidden!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .score-tabs{flex:0 0 28px!important;margin:0!important;gap:6px!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .score-tabs button{padding:3px 12px!important;min-height:26px!important;font-size:12px!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .hero-board:not(.duel-board){flex:1!important;height:0!important;min-height:0!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;padding-bottom:5px!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .hero-team{min-height:0!important;gap:2px!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .hero-team h3{flex:0 0 12px!important;font-size:10px!important;line-height:12px!important;margin:0!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .hero-grid{min-height:0!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .hero-card{height:100%!important;box-sizing:border-box!important;grid-template-rows:24px minmax(0,1fr) 14px 28px!important}
body.touch-device #overlay #match-scoreboard[data-step=heroes] .hero-card canvas:not(.hero-celebration-overflow){height:100%!important;max-height:100%!important;min-height:0!important}
body.touch-device #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) :is(#start,#overlay-menu){grid-row:3!important;margin:0!important;padding:3px 10px!important;height:32px!important;min-height:32px!important;font-size:13px!important;align-self:end!important}
body.touch-device #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) #start{grid-column:1!important;width:100%!important}
body.touch-device #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) #overlay-menu{grid-column:2!important}
body.touch-device.touch-playing #overlay:where([data-score-step=heroes]):not(#_ms):not(._ms) .modal{height:calc(100dvh - 82px)!important;max-height:calc(100dvh - 82px)!important;margin-bottom:70px!important}