/* Arena window, fight bar, popups, chips and HUD button (js/windows/arena-ui.js). Frames, tabs, buttons and cards are the
   mobile kit (/ui/mobile); the arena art is the original 6609 set in /ui/arena (manifest.json). */
.arena-ui{--gold:#e2c47c;--gold2:#a8894a;--ink:#efe6cf;--mute:#a59f90;--serif:Palatino,"Book Antiqua",Georgia,serif;color:var(--ink);font:12px/1.35 system-ui,-apple-system,sans-serif;text-shadow:none;-webkit-user-select:none;user-select:none}
.arena-ui,.arena-ui *{box-sizing:border-box;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
.arena-ui :is(.m-title,.m-tab,.m-btn,.arena-rtab,.arena-serif,.arena-chip){font-family:var(--serif)!important}
:where(.arena-ui) button{appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.arena-ui button:disabled{cursor:default}
.arena-ui[hidden],.arena-ui [hidden]{display:none!important}
.arena-ui :is(button,[tabindex]):focus-visible,:is(.m-arena,.classic-arena):focus-visible{outline:2px solid #ffe07a;outline-offset:1px}
.arena-ui p,.arena-ui h2,.arena-ui h4,.arena-ui ul{margin:0}
.arena-art{display:inline-block;flex:none;background-repeat:no-repeat;vertical-align:middle}
.arena-gold{color:#ffe07a}.arena-blue{color:#9fd6ff}.arena-red{color:#ff8a80}.arena-mute{color:var(--mute)}.arena-small{font-size:11px}
.arena-grow{flex:1}

/* HUD button: ArenaBtnNormal/Click fill the top-left 51x49 of their 64x64 texture. Scaled so that box is 40 px tall like
   Auto Hunt, VIP and Mall (40 px boxes at top 4 px), cropped to it, left of Auto Hunt with the row's 10 px art gap. */
.m-arena,.classic-arena{position:absolute;width:42px;height:40px;padding:0;border:0;background:transparent url('/ui/arena/button.png?v=599f20edae3c93fd') no-repeat 0 0/52.25px 52.25px;cursor:pointer}
.m-arena{top:4px;right:calc(var(--safe-r) + var(--map-w,85px) + 204px);filter:drop-shadow(0 1px 2px #000c)}
.classic-arena{left:294px;top:-4px}
:is(.m-arena,.classic-arena):is(:active,[aria-expanded='true']){background-image:url('/ui/arena/button-pressed.png?v=952753f22b020e1d')}
.m-arena:active{transform:scale(.92)}
:is(.m-arena,.classic-arena)[data-alert]::after{content:'';position:absolute;right:1px;top:0;width:8px;height:8px;border-radius:50%;background:#e04a3a;box-shadow:0 0 0 1.5px #000}
.m-root:has(:is(.m-sheet,.m-inspection,.m-shop,.arena-sheet):not([hidden])) .m-arena{visibility:hidden}
.m-root:has(.arena-sheet:not([hidden])) :is(.m-bar,.m-strip,.m-chatbox,.m-plate,.m-menu,.m-vip,.m-mall,.m-credit,.m-autohunt,.m-pkmenu,.m-actions,.m-picker,.m-exp,.m-xpbar,.m-dm-btn,.m-sys,.arena-hud){visibility:hidden}

/* The sheet: full screen on phones, inset on tablets, a fixed 860x430 window on the desktop (scaled to fit like the Mall). */
.arena-sheet{position:absolute;inset:0;z-index:8;display:flex;background:#101215 url(/ui/mobile/sheetbg.png?v=f16b55896a7aa2db) center/cover;box-shadow:0 10px 40px #000d}
body.tablet-ui .arena-sheet{left:30px;right:30px;top:40px;bottom:40px;border-radius:6px;border:1px solid #a8894a88}
body:not(.mobile-ui) .arena-sheet{inset:auto;left:0;top:0;width:860px;height:430px;z-index:15;border:1px solid #a8894a88;border-radius:6px;overflow:hidden;transform:scale(var(--arena-scale,1));transform-origin:0 0}
.hud-reduced #mobile-hud .m-stage>.arena-sheet{inset:auto;left:50%;top:50%;width:calc(100% * var(--hud-ui-scale));height:calc(100% * var(--hud-ui-scale));transform:translate(-50%,-50%);transform-origin:center}
.arena-rail{width:calc(112px + var(--safe-l,8px));flex:none;display:flex;flex-direction:column;gap:6px;padding:46px 0 10px calc(var(--safe-l,8px) + 2px)}
.arena-rtab{position:relative;width:104px;height:36px;flex:none;display:grid;place-items:center;padding:0 8px;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) 0 0/100% 100%;font:600 12.5px/1.05 var(--serif);color:#1d2b3b;text-shadow:0 1px 0 #ffffff70;text-align:center}
.arena-rtab.on{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#2b1d05;text-shadow:0 1px 0 #fff6}
.arena-rtab i{position:absolute;right:7px;top:5px;width:8px;height:8px;border-radius:50%;background:#e04a3a;box-shadow:0 0 0 1px #000}
.arena-body{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;padding:8px calc(var(--safe-r,4px) + 8px) 6px 8px}
.arena-head{display:flex;align-items:center;gap:10px;height:34px;flex:none;margin-bottom:6px}
.arena-head .m-title{margin:0;white-space:nowrap}
.arena-banner{filter:drop-shadow(0 1px 1px #000)}
.arena-honor{font-size:11px;color:var(--mute);white-space:nowrap}
.arena-claims-btn{min-width:0;height:28px;padding:0 10px;font-size:11px}
.arena-notice{flex:none;min-height:15px;padding-top:3px;font-size:11px;color:#ffe9a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-cols{display:flex;gap:9px;flex:1;min-height:0}
.arena-record{width:228px;flex:none;align-self:flex-start;padding:18px 11px 9px}
.arena-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.arena-actions{display:flex;gap:8px;align-items:center;flex:none;min-height:30px;min-width:0}
.arena-actions>.m-btn{flex:none}
.arena-timer{font:700 12px system-ui;color:#ffd56a;white-space:nowrap;font-variant-numeric:tabular-nums}
.arena-hint{font-size:11px;color:var(--mute);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arena-subtabs{display:flex;gap:4px;flex:none}
.arena-subtabs .m-tab{width:80px;height:30px;font-size:11.5px;white-space:nowrap}
.arena-list{flex:1;min-height:0;overflow:auto;padding:16px 10px 8px}
.arena-pill{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:9px;background:#0007;border:1px solid #a8894a88;color:var(--gold);font:700 10px/14px system-ui;letter-spacing:0;vertical-align:1px;white-space:nowrap}
.arena-pill.queued,.arena-pill.offer{color:#9fd6ff;border-color:#5e87ca}
.arena-pill.fighting{color:#ff9a8a;border-color:#c0473a}
.arena-pill.watching{color:#8fe0a8;border-color:#4f8a5f}
.arena-empty{padding:14px 4px;color:var(--mute);font-size:12px;text-align:center}
.arena-foot{padding:6px 4px 2px;font-size:11px;color:#cfc6b0}
.arena-row{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px 6px;border-bottom:1px solid #ffffff10;font-size:12px}
.arena-row.me{background:#e2c47c14;box-shadow:inset 2px 0 0 var(--gold)}
.arena-rank{width:44px;flex:none;display:flex;justify-content:center;align-items:center}
.arena-rk{font:700 12px var(--serif);color:var(--gold)}
.arena-nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-nm small{margin-left:5px;color:var(--mute);font-size:10.5px}
.arena-pt{flex:none;min-width:64px;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.arena-vs{display:flex;align-items:center;gap:6px;min-height:34px;padding:3px 4px;border-bottom:1px solid #ffffff10;font-size:12px}
.arena-side{flex:1;min-width:0;display:flex}
.arena-side.r{justify-content:flex-end;text-align:right}
.arena-side .arena-nm small{display:block;margin:0;overflow:hidden;text-overflow:ellipsis}
.arena-live-clock{width:34px;flex:none;text-align:right;font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.arena-vs .m-btn{min-width:62px;height:26px;padding:0 8px;font-size:11px;flex:none}
.arena-pager{display:flex;align-items:center;justify-content:center;gap:10px;padding-top:6px}
.arena-mini{min-width:70px;height:26px;padding:0 8px;font-size:11px}
.arena-rules{padding-left:16px;font-size:11.5px;line-height:1.45;color:#d8cfb8}
.arena-rules li{margin:2px 0}

/* Tournament tabs */
.arena-tcols{flex-direction:column;gap:6px}
.arena-groups{display:flex;gap:4px;flex:none}
.arena-groups .m-tab{width:80px;height:30px;font-size:11.5px;white-space:nowrap}
.arena-phase{display:flex;align-items:center;gap:6px;flex:none;min-width:0;font-size:11px}
.arena-phase .arena-pill{margin:0;flex:none}
.arena-phase-text{min-width:0;color:#d8cfb8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-bracket{flex:1;min-height:0;overflow:auto;padding:16px 10px 8px}
.arena-bgrid{display:flex;gap:10px;min-height:100%;min-width:min-content;align-items:stretch}
.arena-bcol{flex:1 1 0;min-width:140px;display:flex;flex-direction:column;justify-content:space-around;gap:5px}
.arena-bcol>.m-h5{margin:0;flex:none}
.arena-bwait{flex:3 1 0;justify-content:center;align-items:center;text-align:center}
.arena-match{display:flex;flex-direction:column;gap:2px;padding:2px;border-radius:4px}
.arena-match.live{box-shadow:0 0 0 1px #c0473a,0 0 6px #c0473a88}
.arena-slot{display:flex;align-items:center;gap:4px;height:22px;padding:0 5px;border:1px solid #a8894a55;border-radius:3px;background:#0008;font-size:11px;white-space:nowrap;overflow:hidden}
.arena-slot.win{border-color:var(--gold);background:#e2c47c1a;color:#ffe9b0}
.arena-slot.lose{opacity:.5}
.arena-slot.lose .arena-nm{text-decoration:line-through}
.arena-watch{height:18px;border-radius:3px;background:url(/ui/mobile/btnR.png?v=f4b0de3fdd6bb610) 0 0/100% 100%;color:#fff;font:700 10px/18px var(--serif)!important;text-shadow:0 1px 1px #000}
.arena-watch:disabled{filter:grayscale(1) brightness(.6)}
.arena-third{margin-top:6px!important}
.arena-prizes{flex:1.25 1 0;min-width:150px;justify-content:flex-start}
.arena-champ{display:flex;align-items:center;justify-content:center;gap:6px;height:34px;flex:none;padding:0 8px;border:1px solid #ffe07a;border-radius:3px;background:#3a2a10aa;color:#ffe07a;font:600 13px var(--serif)!important}
.arena-prize-head{margin-top:6px!important}
.arena-prize{display:flex;align-items:flex-start;gap:5px;font-size:10.5px;line-height:1.3;color:#d8cfb8}
.arena-prize b{display:block;color:var(--gold);font-weight:600}
.arena-prize-text{min-width:0}
.arena-prizes .arena-hint{white-space:normal}

/* HUD layer: chips, fight bar, watchers, exit flame, countdown. Only its children take taps. */
.arena-hud{position:absolute;inset:0;z-index:6;pointer-events:none}
.m-stage>.arena-hud{pointer-events:none}
.arena-hud>*,.arena-fight-wrap>*{pointer-events:auto}
.arena-fight-wrap{position:absolute;inset:0;pointer-events:none!important}
.arena-chip{position:absolute;top:8px;right:calc(var(--safe-r,4px) + var(--map-w,85px) + 254px);display:flex;align-items:center;gap:6px;height:24px;max-width:300px;padding:0 10px;border:1px solid var(--gold2);border-radius:12px;background:#0b0c0ed9;box-shadow:0 1px 4px #000c;font:600 11px var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden}
.arena-chip b{color:var(--gold);font:700 11px system-ui!important;font-variant-numeric:tabular-nums}
.arena-chip-sub{color:#9fd6ff}
.arena-chip[data-kind=classpk]{cursor:default}
body:not(.mobile-ui) .arena-chip{right:auto;left:50%;top:10px;transform:translateX(-50%)}
@media (orientation:portrait){body.mobile-ui .arena-chip{right:auto;left:50%;top:68px;transform:translateX(-50%)}}
/* Nothing at the top reaches the Arena button. --arena-edge is 8 px left of it (the button's left edge is var(--map-w) +
   246 px from the right), measured against the stage through cqw; --arena-room is the centred width that stays clear of it.
   With 340 px or more the fight bar sits centred just under the launch banner; a narrower stage drops it below the button
   row and slides it left so it still ends at --arena-edge, never closer than 10 px to the left side. */
.m-stage{container-type:inline-size;--arena-edge:calc(100cqw - var(--safe-r,4px) - var(--map-w,85px) - 254px);--arena-room:calc(2 * var(--arena-edge) - 100cqw);
 --arena-top:clamp(26px,(340px - var(--arena-room)) * 1000,66px);
 --arena-w:min(440px,calc(100cqw - 20px),max(var(--arena-room),(340px - var(--arena-room)) * 1000));
 --arena-left:max(10px,min(calc(50cqw - var(--arena-w) / 2),calc(var(--arena-edge) - var(--arena-w))))}
/* The launch banner (mobile-hud.css) slides left the same way instead of running under the button. */
.m-stage>.m-alpha-testing{transform:translateX(calc(-50% + clamp(180px - 50cqw + 50%,var(--arena-edge) - 50cqw - 50%,0px)))}
.arena-fight{position:absolute;left:var(--arena-left,50%);top:var(--arena-top,66px);width:var(--arena-w,440px);display:flex;align-items:stretch;gap:6px}
body:not(.mobile-ui) .arena-fight-wrap{--arena-top:10px;--arena-w:min(440px,calc(100% - 20px));--arena-left:calc(50% - var(--arena-w) / 2)}
/* Centre notices (system-messages.css) move under the bar while it shows. */
.mobile-ui #mobile-hud .m-stage:has(>.arena-hud>.arena-fight-wrap:not([hidden]))>.system-messages-center{top:calc(var(--arena-top) + 56px)}
.mobile-ui #mobile-hud .m-stage:has(>.arena-hud>.arena-fight-wrap:not([hidden])>.arena-watchline)>.system-messages-center{top:calc(var(--arena-top) + 74px)}
.arena-fighter{flex:1;min-width:0;padding:4px 8px;background:#0b0c0ee6;border:1px solid var(--gold2);border-radius:5px}
.arena-fname{display:flex;justify-content:space-between;gap:6px;font:600 12px var(--serif)!important;white-space:nowrap}
.arena-fname .arena-nm{font-family:var(--serif)!important}
.arena-fighter.r .arena-fname{flex-direction:row-reverse}
.arena-fighter.r{text-align:right}
.arena-hp{height:7px;margin:3px 0;border-radius:3px;background:#300;overflow:hidden}
.arena-hp i{display:block;height:100%;background:linear-gradient(90deg,#c62b20,#ff5a3a);transition:width .3s}
.arena-fighter.r .arena-hp i{margin-left:auto}
.arena-dmg{font:700 11px system-ui;color:#ffd56a;font-variant-numeric:tabular-nums}
.arena-clock{width:78px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#0b0c0ee6;border:1px solid var(--gold);border-radius:5px}
.arena-clock small{font-size:9px;color:var(--mute);white-space:nowrap}
.arena-digits{display:inline-flex;align-items:center;flex:none}
.arena-watchline{position:absolute;left:var(--arena-left,50%);top:calc(var(--arena-top,66px) + 50px);width:var(--arena-w,440px);box-sizing:border-box;text-align:center;padding:2px 9px;border-radius:9px;background:#0b0c0ecc;font-size:10.5px;color:#f8dba7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.mobile-ui) .arena-watchline{--arena-top:10px}
.arena-count{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);pointer-events:none!important;filter:drop-shadow(0 0 12px #ff9a3a) drop-shadow(0 3px 0 #000)}
/* In the fight bar's row, right of the opponent: the HUD menu column owns the right edge below the minimap. */
.arena-flame{position:absolute;left:calc(50% + min(260px, 50% - 10px) + 6px);top:calc(var(--arena-top,66px) - 2px);width:52px;height:52px;background:no-repeat center/contain;filter:drop-shadow(0 1px 3px #000)}
body:not(.mobile-ui) .arena-flame{--arena-top:10px}
.arena-flame.quit{background-image:url('/ui/arena/quit.png?v=ae498dd0e692fb1e')}
.arena-flame.quit:active{background-image:url('/ui/arena/quit-pressed.png?v=1be5611a477d619d')}
.arena-flame.leave{background-image:url('/ui/arena/leave.png?v=15cc7840c977326a')}
.arena-flame.leave:active{background-image:url('/ui/arena/leave-pressed.png?v=5bcc4f062a1f42ef')}
.arena-flame:disabled{filter:grayscale(1) brightness(.6)}
.arena-watchers{position:absolute;left:var(--safe-l,8px);top:70px;width:150px;padding:6px 8px;background:#0b0c0ed9;border:1px solid var(--gold2);border-radius:5px;font-size:11px}
body:not(.mobile-ui) .arena-watchers{top:10px}
.arena-wtitle{font:600 11px var(--serif);color:var(--gold)}
.arena-wnames{white-space:normal!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.arena-cheer{display:flex;flex-direction:column;gap:4px;margin-top:5px}
.arena-cheer-btn{height:24px;padding:0 6px;border-radius:4px;background:url(/ui/mobile/btnB.png?v=6985addbe008ac4c) 0 0/100% 100%;color:#152433;font:700 10.5px var(--serif)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-cheer-btn:disabled{filter:grayscale(1) brightness(.6)}

/* Popups: the kit's card (world boss and booth prompts use the same frame). */
.arena-dim{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:10px;background:#0008}
body:not(.mobile-ui) .arena-dim{z-index:30}
.arena-pop{width:min(360px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:9px;padding:14px 16px 12px;background:#101215 url(/ui/mobile/sheetbg.png?v=f16b55896a7aa2db) center/cover;border:1px solid var(--gold2);border-radius:6px;box-shadow:0 10px 30px #000}
.arena-pop:focus{outline:none}
.arena-pop h4{font:600 15px var(--serif);color:var(--gold);letter-spacing:.5px}
.arena-pop p{font-size:12.5px;line-height:1.45}
.arena-pop-acts{display:flex;gap:8px}
.arena-pop-acts .m-btn{flex:1;min-width:0;height:32px}
.arena-opp{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0006;border:1px solid #ffffff14;border-radius:4px}
.arena-opp-text{min-width:0}
.arena-opp-text b{display:block;font:600 14px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena-opp-text small{color:var(--mute);font-size:11px}
.arena-bar{height:6px;border-radius:3px;background:#0009;overflow:hidden}
.arena-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffd56a,#e2a03a);transition:width .25s linear}
.arena-offer-timer{display:flex;justify-content:center;margin-top:-2px}
.arena-result{text-align:center;align-items:center}
/* The Victory/Defeat banner, 20% under its first 280 px (user request 2026-10-29). */
.arena-banner-img{display:block;width:min(224px,80%);height:auto;margin:-4px auto -8px}
.arena-draw{font-size:26px!important;letter-spacing:2px!important}
.arena-why{font-size:12px!important}
.arena-delta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.arena-delta.n2{grid-template-columns:repeat(2,1fr)}.arena-delta.n4{grid-template-columns:repeat(4,1fr)}
.arena-delta>div{padding:6px 4px;background:#0006;border:1px solid #ffffff14;border-radius:4px;font-size:10.5px;color:var(--mute)}
.arena-delta b{display:block;font:700 15px system-ui;color:var(--ink)}
.arena-result .arena-pop-acts{width:100%}
.arena-claims{max-height:180px;overflow:auto}
.arena-claim-icon{width:32px;height:32px;flex:none;background:url(/ui/mobile/islot.png?v=72510857d2f0baaf) center/100% 100%;display:grid;place-items:center}
.arena-claim-icon img{width:26px;height:26px;object-fit:contain}
.arena-claims .arena-nm small{display:block;margin:0}

/* A phone held upright: the stage is about 680 px wide, so the record card sits above the lists and the phase line wraps. */
@media (orientation:portrait){
 body.mobile-ui .arena-cols:not(.arena-tcols){flex-direction:column}
 body.mobile-ui .arena-record{width:auto;align-self:stretch}
 body.mobile-ui .arena-phase{flex-wrap:wrap}
 body.mobile-ui .arena-phase-text{white-space:normal}
}