/* Phone and tablet HUD (js/ui/mobile-hud.js). Art: /ui/mobile from the CO mobile client pack, see docs/asset-mapping.md. */
/* iOS can report a short 100dvh (after rotating, and in the installed app), leaving a band of page under the game.
   Pinning the game to the screen edges fills the screen whatever dvh says. */
body.mobile-ui #game{position:fixed;top:0;left:0;right:0;width:auto;height:var(--app-height,100%)}
/* iOS enlarges text in landscape unless told not to, which pushed chat rows out of their box. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* The browser's blue tap highlight stayed over NPC tap targets once a shop opened over them. Mobile controls have their
   own pressed and selected art. */
body.mobile-ui, body.mobile-ui *{-webkit-tap-highlight-color:transparent}
body.mobile-ui #classic-hud{display:none!important}
body.mobile-ui #world-status{display:none!important}
body.mobile-ui #alpha-testing-label{display:none!important}
/* The mobile chat panel replaces the classic chat history (js/ui/mobile-chat.js). */
body.mobile-ui #chat-log{display:none!important}
/* Game world text (not the HUD) is 1px larger on phones and tablets (user request): player names with their guild
   lines, NPC and monster names, and damage numbers. Desktop: styles.css, npc.css, mobs.css. Names also follow the
   player's Name size option (--world-name-size, hud.js). */
body.mobile-ui .player-name{font-size:calc(13px + var(--world-name-size))}
body.mobile-ui .npc-actor span{font-size:calc(13px + var(--world-name-size));line-height:calc(15px + var(--world-name-size))}
body.mobile-ui .mob-name{font-size:calc(14px + var(--world-name-size));line-height:calc(16px + var(--world-name-size))}
body.mobile-ui .combat-damage{font-size:22px;line-height:25px}
body.mobile-ui .combat-damage.killing{font-size:26px}
/* ...and bold with a 1px shadow (user request, 2026-10-20). Player and NPC names share the outlined shadow; monster and
   ground-item labels and damage numbers already cast theirs. */
body.mobile-ui :is(.player-name,.npc-actor span){font-weight:bold;text-shadow:0 2px 3px #000,1px 0 #000,-1px 0 #000,1px 1px 0 #000}
body.mobile-ui .mob-name,body.mobile-ui .ground-drop span{font-weight:bold}
/* Ship a real bold Courier-style font: device fallbacks and synthetic bold vary across phones.
   Descendants need the family too because styles.css assigns Courier New to every element. */
@font-face{font-family:'CoMobile World';src:url('/fonts/courier-prime/CourierPrime-Bold.ttf?v=ff1f38786c849d1c') format('truetype');font-style:normal;font-weight:700;font-display:swap}
body.mobile-ui :is(.player-name,.player-name *,.npc-actor span,.mob-name,.mob-name *,.ground-drop span){font-family:'CoMobile World','Courier New',Courier,monospace!important;font-weight:700;font-synthesis:none}
/* Classic windows opened from the mobile menu keep their art; on a short landscape phone they shrink to fit the height. */
@media (max-height:430px){
 body.mobile-ui .social-friends{top:6px;transform:scale(.9);transform-origin:top left}
}
/* Social prompts (Select a player to trade.) sit under the top bar, clear of the player plate and the city label. */
body.mobile-ui .team-notice{top:92px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:60%;text-align:center;z-index:10}
body.mobile-ui .social-notice{top:72px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:60%;text-align:center;z-index:10}
.m-root{position:absolute;inset:0;pointer-events:none;z-index:7;--m-scale:1;--gold:#e2c47c;--gold2:#a8894a;--ink:#efe6cf;--mute:#a59f90;--serif:Palatino,"Book Antiqua",Georgia,serif;
 --safe-l:max(8px,env(safe-area-inset-left));--safe-r:max(4px,env(safe-area-inset-right));--safe-b:max(4px,env(safe-area-inset-bottom));
 font-family:system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.m-root[hidden],.m-root [hidden]{display:none!important}
/* The classic client forces Courier New on every element (styles.css); the mobile kit uses a sans body face and a serif for titles. */
.m-root *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important}
.m-root :is(.m-name,.m-city,.m-title,.m-tab,.m-btn,.m-serif){font-family:var(--serif)!important}
.m-root img{-webkit-user-drag:none}
:where(.m-root) button{appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.m-stage{position:absolute;left:0;top:0;width:calc(100% / var(--m-scale));height:calc(100% / var(--m-scale));transform:scale(var(--m-scale));transform-origin:0 0}
.m-stage>*{pointer-events:auto}
.m-ts{text-shadow:0 1px 0 #000,0 0 3px #000,0 0 6px #000a}

/* Player plate */
.m-plate{position:absolute;left:var(--safe-l);top:6px;width:220px;height:58px}
/* headbar.png (322x59): the bowl's inner edge is a circle at (54.95, 14.56), r 42.7; lanes span rows 3-25 and 27-48 from x 97.
   Scaled by 28/42.7 so the 56 px portrait sits in the bowl: left 28 - 54.95s, top 28 - 14.56s. */
.m-plate-bar{position:absolute;left:-8.03px;top:18.45px;width:211.13px;height:38.69px;background:url(/ui/mobile/headbar.png?v=d6a858bd1b951e96) 0 0/100% 100%}
.m-portrait{position:absolute;left:0;top:0;width:56px;height:56px}
.m-portrait,.m-name,.m-orb{cursor:pointer}
.m-portrait .m-frame{position:absolute;inset:0;width:100%;height:100%}
.m-face{position:absolute;inset:4px;border-radius:50%;background:#111 center/cover}
.m-level{position:absolute;left:-4px;bottom:-3px;width:22px;height:22px;background:url(/ui/mobile/lvbadge.png?v=134228b000d50022) 0 0/100%;font:700 10px/22px system-ui;text-align:center;color:#fff}
.m-name{position:absolute;left:61px;top:19.6px;height:16px;font:600 12px/16px var(--serif);color:#f6e7b8;white-space:nowrap;max-width:118px;overflow:hidden;text-overflow:ellipsis}
.m-plate-row{position:absolute;left:61px;top:35px;height:16px;display:flex;gap:4px;align-items:center}
.m-pk,.m-pk img{width:52px;height:16px;display:block}
.m-pkmenu{position:absolute;left:calc(var(--safe-l) + 60px);top:56px;width:236px;padding:6px;background:#0b0c0ef2;border:1px solid var(--gold2);border-radius:6px;box-shadow:0 8px 20px #000c;z-index:6;display:flex;flex-direction:column}
.m-pkopt{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:5px;text-align:left}
.m-pkopt.on{background:#e2c47c1f;box-shadow:inset 2px 0 0 var(--gold)}
.m-pkopt img{width:70px;height:22px;flex:none}
.m-pkopt span{font:11px/1.25 system-ui;color:#cfc6b0}
.m-pkopt.on span{color:#f6e7b8}

/* City label beside the minimap, and the menu below it. --map-w/--map-h come from the world scale. */
/* Above the head bar, aligned with the name: the bar's top edge is at 18.45 px in the plate. */
.m-city{position:absolute;left:61px;top:1px;height:16px;font:600 12px/16px var(--serif);color:#f6e7b8;white-space:nowrap;pointer-events:none}
.m-alpha-testing{left:50%;top:7px;transform:translateX(-50%)}
.m-menu{position:absolute;right:calc(var(--safe-r) + 6px);top:calc(var(--map-h,64px) + 6px);width:73.6px;display:flex;flex-direction:column;align-items:center}
.m-chev,.m-chev img{width:28px;height:28px;display:block}
.m-chev img{filter:drop-shadow(0 1px 3px #000a)}
.m-menu-grid{display:grid;grid-template-columns:repeat(2,32px);gap:0 6.4px;margin-top:2px;transform-origin:top center;transition:transform .22s ease,opacity .22s ease}
.m-menu.closed .m-menu-grid{transform:scaleY(0);opacity:0;pointer-events:none}
/* The menu's box keeps its full height when folded; only the chevron and an open grid take taps, so the ground (and
   the revive buttons) under a folded menu stay reachable. */
.m-stage>.m-menu{pointer-events:none}
.m-menu>.m-chev,.m-menu:not(.closed)>.m-menu-grid{pointer-events:auto}
/* The defeat countdown and revive buttons sit where the menu column is; they stay above the phone layer. */
body.mobile-ui #revive-panel{z-index:9}
.m-tile{width:32px;height:36.8px;position:relative;transition:transform .08s}
.m-tile:active{transform:scale(.92)}
.m-tile img{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px #000c)}
.m-vip{position:absolute;top:4px;right:calc(var(--safe-r) + var(--map-w,85px) + 58px);width:42px;height:40px}
.m-vip img{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px #000c)}
.m-vip:active{transform:scale(.92)}

/* Action tile popover: emotes, left of the menu */
.m-actions{position:absolute;right:calc(var(--safe-r) + 104px);top:calc(var(--map-h,64px) + 40px);display:grid;grid-template-columns:repeat(5,44px);gap:6px;padding:8px;background:#0b0c0ef2;border:1px solid var(--gold2);border-radius:6px;box-shadow:0 8px 20px #000c;z-index:6}
.m-action{width:44px;height:44px;border-radius:50%;background:url(/ui/mobile/slot.png?v=06d9c480a9ec4c36) 0 0/100% 100%;display:grid;place-items:center}
.m-action img{width:78%;height:78%;border-radius:50%;object-fit:cover}
.m-action:active{filter:brightness(1.5)}

/* Bottom bar */
.m-bar{position:absolute;left:50%;bottom:calc(var(--safe-b) + 4px);transform:translateX(-50%);display:flex;align-items:flex-end;gap:3px;transition:transform .25s ease,opacity .25s;--slot:42px;--pot:36px;--orb:88px}
.m-bar.closed{transform:translate(-50%,130%);opacity:0;pointer-events:none}
/* The bar's box reaches up to the orb's top across its whole width; only its pieces take taps, so the ground above
   the slots (and the chat box beside it) still moves and jumps. */
.m-stage>.m-bar{pointer-events:none}
.m-bar:not(.closed)>*{pointer-events:auto}
.m-slots{pointer-events:none!important}
.m-slots>*{pointer-events:auto}
.m-slots{display:flex;gap:2px}
.m-slot{width:var(--slot);height:var(--slot);position:relative;flex:none}
.m-slot-bg{position:absolute;inset:0;width:100%;height:100%}
.m-slot-icon{position:absolute;inset:0}
.m-icon{position:absolute;left:11%;top:11%;width:78%;height:78%;border-radius:50%}
.m-icon-skill{object-fit:cover;clip-path:circle(47%)}
.m-icon-action{object-fit:cover;border-radius:50%}
.m-icon-item{left:18%;top:18%;width:64%;height:64%;border-radius:0;object-fit:contain}
.m-slot-count{position:absolute;right:4px;bottom:6px;font:700 9px/1 system-ui;color:#fff;text-shadow:0 1px 1px #000,0 0 3px #000}
.m-arrows{position:absolute;left:50%;bottom:calc(100% + 2px);width:19px;height:29px;transform:translateX(-50%);pointer-events:none}
.m-arrows-icon{display:block;width:100%;height:100%}
/* The count sits over the top-left of the quiver, white with a 1px black shadow, as the original client draws it. */
.m-arrows-count{position:absolute;left:-4px;top:-6px;font:700 10px/1 system-ui;color:#fff;text-shadow:-1px -1px 0 #000,1px 1px 0 #000,0 0 3px #000;white-space:nowrap}
.m-key{position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);font:700 9px/1 system-ui;color:#e9dcb4;text-shadow:0 1px 1px #000,0 0 3px #000}
.m-slot.unavailable .m-icon{filter:grayscale(1) brightness(.55)}
.m-slot.selected::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 2px var(--gold),0 0 8px #ffcf5a}
.m-slot.target::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 10px #ffe07a;animation:m-pulse 1s infinite}
@keyframes m-pulse{50%{opacity:.35}}
.m-slot:active .m-icon{filter:brightness(1.6)}
.m-pot{width:var(--pot);height:var(--pot);position:relative;flex:none;margin-bottom:calc((var(--slot) - var(--pot)) / 2)}
.m-pot-bg{position:absolute;inset:0;width:100%;height:100%}
.m-pot-icon{position:absolute;left:12%;top:18%;width:76%;height:64%;object-fit:contain}
.m-pot-count{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);font:700 10px/1 system-ui;color:#fff;text-shadow:0 1px 1px #000,0 0 3px #000}
.m-pot.empty .m-pot-icon{filter:grayscale(1) brightness(.45)}
.m-pot.empty .m-pot-count{color:#ff8a80}
.m-orb{width:var(--orb);height:var(--orb);position:relative;margin:0 2px -2px;flex:none}
.m-orb>*{position:absolute}
/* orbback.png's gold ring is centred at (56.79, 58.48) of 118 px, not (59, 59); the frame shifts so the ring lands on the box centre,
   where the XP ring (centred in its art) and the fill are. Its inner gold edge is at radius 55 of 118. */
.m-orb-back{left:1.88%;top:0.44%;width:100%;height:100%}
/* Dark glass behind the HP/MP halves, so an empty half reads as empty instead of showing the map through the ring. */
.m-orb-fill{left:6.82%;top:6.82%;width:86.36%;height:86.36%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 38%,#262a31 0%,#111317 55%,#050607 100%);box-shadow:inset 0 0 10px #000,0 0 0 2px #000a,0 2px 10px #000c}
.m-orb-fill img{position:absolute;top:0;height:100%}
.m-orb-hp{left:0;width:44%;clip-path:inset(calc(100% - var(--hp,0%)) 0 0 0);transition:clip-path .5s}
.m-orb-mp{right:0;width:44%;clip-path:inset(calc(100% - var(--mp,0%)) 0 0 0);transition:clip-path .5s}
.m-orb-st{left:44%;width:12%;clip-path:inset(calc(100% - var(--st,0%)) 0 0 0)}
/* Original Progress47: gold reserve fills from the top toward the middle, separate from the normal100. */
.m-orb-fill .m-orb-st-bonus{left:44%;width:12%;height:50%;clip-path:inset(0 0 calc(100% - var(--st-bonus,0%)) 0)}
.m-strip-track:has(.m-strip-st-bonus){position:relative}
.m-strip-track .m-strip-st-bonus{position:absolute;right:0;top:0;width:50%;height:100%;clip-path:inset(0 calc(100% - var(--st-bonus,0%)) 0 0)}
.m-orb-ring{inset:-6%;width:112%;height:112%;-webkit-mask:conic-gradient(#000 var(--xp,0%),transparent 0);mask:conic-gradient(#000 var(--xp,0%),transparent 0);transition:all .4s}
.m-orb-values{left:0;right:0;bottom:22%;display:flex;justify-content:space-between;padding:0 21%;font:700 9px/1 system-ui;color:#fff}
.m-orb-glow{inset:-14%;width:128%;height:128%;display:none;animation:m-glow 1.2s infinite}
.m-orb.ready .m-orb-glow{display:block}
@keyframes m-glow{50%{opacity:.4}}
/* XP window, bottom right above the right-hand skill slots and left of the menu column: the castable XP skills under a
   gold bar that runs down the window's time. Shown only while the XP window is open. */
.m-xpbar{position:absolute;right:calc(var(--safe-r) + 104px);bottom:calc(var(--safe-b) + 52px);width:210px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none!important;transition:opacity .25s}
.m-xpbar.closed{opacity:0}
.m-xpbar-track{position:relative;width:100%;height:14px;flex:none}
.m-xpbar-bg{position:absolute;inset:0;width:100%;height:100%}
.m-xpbar-lane{position:absolute;left:4.58%;width:90.85%;top:22%;height:56%}
.m-xpbar-fill{display:block;height:100%;width:0;transition:width .1s linear}
.m-xpbar-skills{display:flex;gap:6px;pointer-events:auto;margin-right:6px}
.m-xpbar.closed .m-xpbar-skills{pointer-events:none}
.m-xp-skill{position:relative;width:38px;height:38px;border-radius:50%;background:#000b;box-shadow:0 0 0 2px #a8894a,0 2px 6px #000c}
.m-xp-skill img{width:100%;height:100%;border-radius:50%;object-fit:cover;clip-path:circle(48%)}
.m-xp-skill.ready{animation:m-bob 1.2s infinite}
.m-xp-skill.ready img{filter:drop-shadow(0 0 6px #ffb300)}
.m-xp-skill.off img{filter:grayscale(1) brightness(.6)}
@keyframes m-bob{50%{transform:translateY(-3px)}}
.m-hud-chev{align-self:center;margin-left:1px}
.m-strip{position:absolute;left:50%;bottom:calc(var(--safe-b) + 4px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;background:#0a0b0dd9;border:1px solid #a8894a88;border-radius:20px;padding:5px 6px 5px 8px;--slot:32px;--pot:32px}
.m-strip .m-pot{margin:0}
.m-strip-bars{display:flex;flex-direction:column;gap:3px}
.m-strip-row{display:flex;align-items:center;gap:5px}
.m-strip-label{font:800 8px/1 system-ui;width:12px;text-shadow:0 1px 1px #000}
.m-strip-hp{color:#ff8a7a}.m-strip-mp{color:#8ab8ff}.m-strip-sp{color:#8fe39a}
.m-strip-track{width:140px;height:6px;border-radius:3px;background:#000b;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14}
.m-strip-track img{display:block;height:100%;width:0;transition:width .4s}
.m-exp{position:absolute;left:0;right:0;bottom:0;height:3px;background:#000b;pointer-events:none}
/* Bottom-right corner: date and time over the frame rate and ping, like the mobile client's status corner. */
.m-sys{position:absolute;right:calc(var(--safe-r) + 6px);bottom:calc(var(--safe-b) + 5px);display:flex;flex-direction:column;align-items:flex-end;gap:1px;font:600 9.5px/1.15 system-ui;color:#e9e2cf;pointer-events:none!important;white-space:nowrap}
.m-sys-net{display:flex;align-items:center;gap:4px}
.m-sys-wifi{width:11px;height:8px;display:block}
.m-sys-ping[data-quality=good]{color:#7ee081}.m-sys-ping[data-quality=fair]{color:#f2cd5c}.m-sys-ping[data-quality=poor]{color:#ff7a6e}
/* Flight and transformation countdowns above the date: the spell's own icon in the kit's gold ring and the time left. */
.m-sys-timers{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-bottom:3px}
.m-sys-timers[hidden]{display:none}
.m-sys-timer{display:flex;align-items:center;gap:4px;font:700 10.5px/1 system-ui;color:var(--ink)}
.m-sys-timer-icon{width:20px;height:20px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--gold2),0 1px 3px #000c}
.m-sys-timer-left{min-width:28px;text-align:right;color:var(--gold);font-variant-numeric:tabular-nums}
/* Total KO sits immediately above the date; shortcuts and their chevron cover it if they overlap. */
.m-sys>.m-kills{position:relative;z-index:-1;display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-bottom:0;pointer-events:none}
.m-kills[hidden]{display:none}
.m-kills-chip{pointer-events:auto;display:flex;align-items:center;gap:3px;max-width:168px;height:20px;padding:0 8px;border:1px solid var(--gold2);border-radius:10px;background:#0b0c0ed9;box-shadow:0 1px 4px #000c;font:600 11px/1 var(--serif);color:var(--ink);white-space:nowrap;cursor:pointer}
.m-kills-chip[aria-expanded=true]{border-color:var(--gold);box-shadow:0 0 0 1px #e2c47c55,0 1px 4px #000c}
.m-kills-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
.m-kills-x{color:var(--mute);font:600 10px/1 system-ui}
.m-kills-count{color:var(--gold);font:700 11px/1 system-ui;font-variant-numeric:tabular-nums}
.m-kills-chip.bump .m-kills-count{animation:m-kills-bump .35s ease-out}
/* The same pulse under a second name: mobile-hud.js alternates the two classes so each kill restarts it without a reflow. */
.m-kills-chip.bump-again .m-kills-count{animation:m-kills-bump-again .35s ease-out}
@keyframes m-kills-bump{0%{transform:scale(1.45);color:#fff2c4}100%{transform:scale(1)}}
@keyframes m-kills-bump-again{0%{transform:scale(1.45);color:#fff2c4}100%{transform:scale(1)}}
.m-kills-list{pointer-events:auto;min-width:150px;max-width:200px;max-height:156px;overflow-y:auto;padding:5px 6px;background:#0b0c0ef2;border:1px solid var(--gold2);border-radius:6px;box-shadow:0 8px 20px #000c}
.m-kills-list[hidden]{display:none}
.m-kills-head{font:600 11px var(--serif);color:var(--gold);padding:1px 2px 4px;border-bottom:1px solid #a8894a55;margin-bottom:3px}
.m-kills-row{display:flex;justify-content:space-between;gap:10px;padding:3px 4px;border-radius:4px;font:11px/1.2 system-ui;color:#cfc6b0}
.m-kills-row.on{background:#e2c47c1f;box-shadow:inset 2px 0 0 var(--gold);color:#f6e7b8}
.m-kills-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-kills-row-count{color:var(--gold);font-variant-numeric:tabular-nums}
.m-exp img{display:block;height:100%;width:0}

/* Shared kit: titles, tabs, buttons, close */
.m-title{font:600 16px var(--serif);color:var(--gold);letter-spacing:.3px;text-shadow:0 1px 0 #000}
.m-grow{flex:1}
.m-close,.m-close img{width:34px;height:34px;display:block;flex:none}
.m-tabs{display:flex;gap:4px}
.m-tab{width:84px;height:32px;display:grid;place-items:center;background:url(/ui/mobile/tab.png?v=3b5f3f0e7e8c4f3a) 0 0/100% 100%;font:600 12px var(--serif);color:#1d2b3b;text-shadow:0 1px 0 #ffffff70}
.m-tab.on{background-image:url(/ui/mobile/tabon.png?v=4532b1ded01984c6);color:#2b1d05;text-shadow:0 1px 0 #fff6}
.m-btn{display:inline-grid;place-items:center;font:700 12px var(--serif);height:30px;min-width:96px;padding:0 14px;background:url(/ui/mobile/btnY.png?v=be065432cc957cb3) 0 0/100% 100%;color:#3a2604;text-shadow:0 1px 0 #fff7;white-space:nowrap}
.m-btn.red{background-image:url(/ui/mobile/btnR.png?v=f4b0de3fdd6bb610);color:#fff;text-shadow:0 1px 1px #000}
.m-btn.blue{background-image:url(/ui/mobile/btnB.png?v=6985addbe008ac4c);color:#152433;text-shadow:0 1px 0 #fff8}
.m-btn:disabled{filter:grayscale(1) brightness(.6)}

/* Skill picker */
.m-picker{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 72px);width:min(620px,calc(100% - 24px));max-height:calc(100% - 90px);display:flex;flex-direction:column;padding:12px 14px;background:url(/ui/mobile/popbg.png?v=3add4e59f44b5c98) 0 0/100% 100%;border-radius:4px;box-shadow:0 10px 30px #000c;z-index:5}
.m-picker-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.m-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px 4px;overflow:auto;min-height:0}
.m-card{display:flex;flex-direction:column;align-items:center;padding:2px 0;position:relative;border-radius:8px}
.m-card:active{background:#ffffff14}
.m-card.off{opacity:.45}
.m-card-ring{width:50px;height:50px;position:relative}
.m-card-ring>img:first-child{position:absolute;inset:0;width:100%;height:100%}
.m-card-name{font:600 10px/1.15 system-ui;margin-top:2px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
.m-card-sub{font:10px system-ui;color:#c9b98e}
.m-card-at{position:absolute;right:4px;top:0;font:700 9px system-ui;background:var(--gold);color:#2b1d05;border-radius:4px;padding:1px 4px;z-index:2}
.m-picker-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:11px;color:var(--mute)}
.m-empty{grid-column:1/-1;margin:16px 0;text-align:center;color:var(--mute);font-size:12px}

.m-xpbar-active-fill{display:block;height:100%;mask:url('/ui/xp-counter/bar-green.png?v=27d39722ff7f7270') center/100% 100% no-repeat;-webkit-mask:url('/ui/xp-counter/bar-green.png?v=27d39722ff7f7270') center/100% 100% no-repeat}

.m-menu>.m-chev,.m-menu>.m-chev img{width:22.4px;height:22.4px}
.m-inspect-tile{display:flex;flex-direction:column;align-items:center;justify-content:center}
.m-inspect-tile img{width:24px;height:24px;object-fit:contain}
.m-inspect-tile span{font-size:9px;line-height:11px;color:var(--ink);text-shadow:0 1px 2px #000}

/* Compact top launchers use exactly the right menu's box/pitch; the row meets the map's outer box. */
body.mobile-ui .m-stage :is(.m-arena,.m-autohunt,.m-vip,.m-mall,.m-credit){width:32px;height:36.8px;top:4px}
body.mobile-ui .m-stage .m-credit{right:calc(var(--safe-r) + var(--map-w) - 8px);}
body.mobile-ui .m-stage .m-mall{right:calc(var(--safe-r) + var(--map-w) + 30.4px);background-size:32px 32px;background-position:center}
body.mobile-ui .m-stage .m-vip{right:calc(var(--safe-r) + var(--map-w) + 68.8px)}
body.mobile-ui .m-stage .m-autohunt{right:calc(var(--safe-r) + var(--map-w) + 107.2px)}
body.mobile-ui .m-stage .m-arena{right:calc(var(--safe-r) + var(--map-w) + 145.6px);background-size:40.16px 40.16px}
body.mobile-ui .m-stage :is(.m-credit,.m-vip,.m-autohunt) img{width:100%;height:100%;object-fit:contain}
body.mobile-ui .m-stage{--arena-edge:calc(100cqw - var(--safe-r,4px) - var(--map-w,120px) - 185.6px)}
@media(orientation:landscape){body.mobile-ui .m-stage .arena-chip{right:calc(var(--safe-r) + var(--map-w,120px) + 185.6px)}}
.m-minimap{position:absolute;right:var(--safe-r);top:5px;width:112px;height:112px;pointer-events:none;filter:drop-shadow(0 2px 4px #000b)}
.m-minimap-frame{position:absolute;inset:0;width:112px;height:112px;clip-path:circle(49%);pointer-events:none}
.m-minimap-view{position:absolute;inset:9px;border:0;padding:0;border-radius:50%;overflow:hidden;background:#162223;pointer-events:auto;cursor:pointer}
.m-minimap-canvas{display:block;width:100%;height:100%}
.m-minimap-marker{position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);filter:drop-shadow(0 0 2px #000);pointer-events:none}
.m-minimap-zoom{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font:700 9px/12px var(--serif)!important;color:#fff0bb;text-shadow:0 1px #000,0 0 3px #000;pointer-events:none}
.m-minimap-control{position:absolute;bottom:-3px;width:22px;height:22px;border:0;padding:0;border-radius:50%;background:transparent url('/ui/mobile/slot.png?v=06d9c480a9ec4c36') center/100% 100%;color:var(--ink);font:700 15px/22px var(--serif)!important;cursor:pointer;clip-path:circle(49%);pointer-events:auto}
.m-minimap-minus{left:4px}.m-minimap-plus{right:4px}
.m-minimap-control:disabled{opacity:.5}
.m-minimap-view:focus-visible,.m-minimap-control:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.m-map-expanded{position:absolute;inset:10px;z-index:15;padding:16px;background:#14191df5 url('/ui/mobile/popbg.png?v=3add4e59f44b5c98') center/100% 100%;border:1px solid var(--gold2);border-radius:6px;display:flex;flex-direction:column;pointer-events:auto;box-sizing:border-box}
.m-map-title{font:600 18px/24px var(--serif)!important;color:var(--gold);margin:0 32px 8px 0}
.m-map-close{position:absolute;right:10px;top:10px;width:28px;height:28px;background:transparent url('/ui/mobile/close.png?v=857481304f77e458') center/contain no-repeat;border:0;cursor:pointer}
.m-map-body{flex:1;min-height:0;min-width:0;position:relative}
.m-map-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.m-root:has(:is(.m-sheet,.m-inspection,.m-shop,.arena-sheet):not([hidden])) :is(.m-minimap,.m-map-expanded){visibility:hidden}