/* E2 short-edge/360 geometry retained; original-game image skins below.
 * Sources: mobile-ui/native-ui/manifest.json and battle-pass-assets/native-ui/manifest.json.
 * No icon canvas, input handler, saved binding or region geometry is changed by the skin. */
:root { --mobile-key-base: calc(40px * var(--mobile-ui-scale, 1)); --mobile-layout-key-size: max(var(--mobile-key-size), calc(var(--mobile-touch-min, 32px) / .9)); --mobile-key-size: calc(40px * var(--mobile-ui-scale, 1)); --mobile-key-opacity: 1;
  --mobile-left-gap: calc(24px * var(--mobile-ui-scale, 1)); --mobile-right-gap: calc(24px * var(--mobile-ui-scale, 1)); --mobile-bottom-gap: calc(14px * var(--mobile-ui-scale, 1));
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-controls-bottom: calc(var(--mobile-safe-bottom) + var(--mobile-bottom-gap));
  --mobile-side-inset: calc(env(safe-area-inset-left, 0px) + calc(16px * var(--mobile-ui-scale, 1))); }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body.mobile-game-active, body.mobile-game-active * {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
body.mobile-game-active :is(textarea, input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"])),
body.mobile-game-active [contenteditable="true"], body.mobile-game-active [contenteditable=""], body.mobile-game-active [contenteditable="plaintext-only"] {
  user-select: text; -webkit-user-select: text; -webkit-touch-callout: default;
}
input { font-size: 16px; }
.mobile-pad { touch-action: none; user-select: none; -webkit-user-select: none; }
#mobile-movement {
  --stick-x: 0px; --stick-y: 0px;
  width: calc(var(--mobile-key-size) * 2.45); height: calc(var(--mobile-key-size) * 2.45);
  left: var(--mobile-left-gap);
  bottom: var(--mobile-controls-bottom);
  border-radius:0; border: calc(2px * var(--mobile-ui-scale, 1)) solid #c9c8b966;
  background:transparent;
  box-shadow:none;
  opacity: var(--mobile-key-opacity); display: block !important;
  touch-action: none;
}
#mobile-joystick-thumb {
  position: absolute; left: 50%; top: 50%; width: 44%; height: 44%;
  min-width: 0; min-height: 0; margin: 0; padding: 9%; border: calc(2px * var(--mobile-ui-scale, 1)) solid #cfcec5;
  border-radius:0; background:transparent;
  color: #626461; box-shadow:none;
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));
  pointer-events: none; appearance: none; -webkit-appearance: none; flex: none;
}
#mobile-joystick-thumb svg { display: block; width: 100%; height: 100%; }
#mobile-joystick-thumb { isolation: isolate; }
#mobile-joystick-thumb::before { content: ""; position: absolute; inset: calc(-2px * var(--mobile-ui-scale, 1)); border-radius:0; z-index: -1;
  background: none center / 106% 106% no-repeat; filter:none; }
.joystick-direction { position: absolute; width: calc(13px * var(--mobile-ui-scale, 1)); height: calc(13px * var(--mobile-ui-scale, 1)); color: #d7dcd3b3; pointer-events: none; }
.joystick-direction svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.joystick-up { top: 5%; left: 50%; transform: translateX(-50%); }
.joystick-down { bottom: 5%; left: 50%; transform: translateX(-50%); }
.joystick-left { left: 5%; top: 50%; transform: translateY(-50%); }
.joystick-right { right: 5%; top: 50%; transform: translateY(-50%); }
#mobile-movement.is-pressed { border-color: #efdfb68c; opacity: 1; }
#mobile-movement.is-arrows { width: calc(var(--mobile-arrow-size, var(--mobile-key-size)) * 2.45); height: calc(var(--mobile-arrow-size, var(--mobile-key-size)) * 2.45); border-color: transparent; border-radius:0; background: none; box-shadow:none; }
#mobile-movement.is-arrows :is(#mobile-joystick-thumb, .joystick-direction) { display: none; }
#mobile-movement .mobile-direction {
  position: absolute; box-sizing: border-box; width: 33%; height: 33%; min-width: 0; min-height: 0;
  margin: 0; padding: 7%; border: calc(1px * var(--mobile-ui-scale, 1)) solid #b39358; border-radius:0;
  background:transparent;
  color: #ffe4a1; box-shadow:none; touch-action: none;
  appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; outline: none;
}
#mobile-movement .mobile-direction[hidden] { display: none !important; }
.mobile-direction svg { display: block; width: 100%; height: 100%; fill: currentColor; stroke: #493014; stroke-width: 1; filter:none; pointer-events: none; }
/* Align the lower row with the menu/utilities at the pad's outer bottom edge. */
.direction-up { bottom: calc(33% + calc(2px * var(--mobile-ui-scale, 1))); left: 33.5%; }
.direction-down { bottom: calc(-2px * var(--mobile-ui-scale, 1)); left: 33.5%; }
.direction-left { left: 0; bottom: calc(-2px * var(--mobile-ui-scale, 1)); }
.direction-right { right: 0; bottom: calc(-2px * var(--mobile-ui-scale, 1)); }
#mobile-movement .mobile-direction.is-pressed { background:transparent; color: #fff1bf; border-color: #ffdc86; box-shadow:none; }
#mobile-movement .mobile-direction:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) solid #ffe4a1; outline-offset: calc(-3px * var(--mobile-ui-scale, 1)); }
#mobile-actions {
  /* Reserve the target button's overhang within the screen-edge gap. */
  position: fixed; z-index: 5; right: calc(var(--mobile-right-gap) + var(--mobile-key-size) * .2);
  bottom: var(--mobile-controls-bottom); display: block;
  width: calc(var(--mobile-layout-key-size) * 6.1);
  /* Leave room for the conditional outer arc of up to five pet skills. */
  height: calc(var(--mobile-layout-key-size) * 5.6);
  opacity: var(--mobile-key-opacity);
  pointer-events: none;
}
#mobile-actions button { pointer-events: auto; }
.mobile-pad[hidden] { display: none !important; }
/* The touch toggle hides input without moving the function bar's layout anchors. */
#mobile-actions[hidden], #mobile-movement[hidden] {
  display: block !important; visibility: hidden; pointer-events: none;
}
#mobile-slot-grid { position: absolute; inset: 0; }
#mobile-slot-grid .mobile-slot { position: absolute; right: calc(var(--mobile-layout-key-size) * var(--slot-right));
  bottom: calc(var(--mobile-layout-key-size) * var(--slot-bottom)); }
#mobile-utility-actions { position: absolute; inset: 0; pointer-events: none; }
#mobile-actions #mobile-utility-actions .mobile-key { position: absolute; pointer-events: auto; }
#mobile-utility-actions [data-action="pickup"] { right: calc(var(--mobile-layout-key-size) * 2.35); bottom: 0; }
#mobile-utility-actions [data-action="target"] { right: calc(var(--mobile-layout-key-size) * -.4); bottom: calc(var(--mobile-layout-key-size) * 1.65); z-index: 2; }
/* Equal 1.04-key spacing, with the whole utility row shifted left. */
#mobile-utility-actions [data-action="meditate"] { right: calc(var(--mobile-layout-key-size) * 4.43); bottom: 0; }
#mobile-utility-actions [data-action="summon"] { right: calc(var(--mobile-layout-key-size) * 3.39); bottom: 0; }
.mobile-key {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: calc(44px * var(--mobile-ui-scale, 1)); min-height: calc(44px * var(--mobile-ui-scale, 1)); padding: calc(2px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #b998618c;
  border-radius:0; color: #f7e9ca; background: #1c1a17e8;
  font: 600 calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; line-height: 1.25;
  box-shadow:none; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.mobile-key small { color: #ccba98; font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 400; margin-top: calc(2px * var(--mobile-ui-scale, 1)); }
#mobile-actions .mobile-key, .mobile-slot {
  position: relative; isolation: isolate; width: var(--mobile-key-size); height: var(--mobile-key-size);
  min-width: 0; min-height: 0; padding: 0; border: calc(1px * var(--mobile-ui-scale, 1)) solid #c59b57;
  border-radius:0; color: #ffe3a6; background:transparent;
  box-shadow:none;
  touch-action: none; -webkit-tap-highlight-color: transparent; font-family: SimSun,"宋体","Songti SC",serif;
  text-shadow: 0 calc(1px * var(--mobile-ui-scale, 1)) calc(2px * var(--mobile-ui-scale, 1)) #000, calc(1px * var(--mobile-ui-scale, 1)) 0 calc(2px * var(--mobile-ui-scale, 1)) #000;
}
#mobile-actions .mobile-key::before, .mobile-slot::before {
  content: ""; position: absolute; inset: calc(-2px * var(--mobile-ui-scale, 1)); border-radius:0; z-index: -1;
  background: none center / 106% 106% no-repeat;
}
#mobile-actions .mobile-key svg { width: 57%; height: 57%; margin-top: calc(-8px * var(--mobile-ui-scale, 1)); flex: none;
  fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#mobile-actions .mobile-key > span { position: absolute; bottom: calc(2px * var(--mobile-ui-scale, 1)); font-size: calc(var(--mobile-key-size) * .28125); line-height: 1.1; }
#mobile-actions .mobile-key small { display: none; }
#mobile-actions .mobile-key canvas { position: absolute; top: 2%; left: 14%; width: 72%; height: 72%; display: none; }
#mobile-actions #mobile-utility-actions .mobile-key:not([data-action="target"]) {
  width: calc(var(--mobile-key-size) * .82); height: calc(var(--mobile-key-size) * .82);
  box-sizing: border-box; aspect-ratio: 1; flex: none;
}
#mobile-actions #mobile-utility-actions .mobile-key:not([data-action="target"]) svg,
#mobile-actions #mobile-utility-actions .mobile-key:not([data-action="target"]) canvas {
  position: absolute; top: 7%; left: 21%; width: 58%; height: 58%; margin: 0;
}
#mobile-actions .mobile-key.has-icon canvas { display: block; }
#mobile-actions .mobile-key.is-active { border-color: #afffc7; box-shadow:none; }
#mobile-actions .mobile-key[data-action="attack"] {
  position: absolute; right: calc(var(--mobile-layout-key-size) * 1.15 - var(--mobile-key-size) * .8); bottom: 0;
  width: calc(var(--mobile-key-size) * 1.6); height: calc(var(--mobile-key-size) * 1.6);
  border-color: #e9b668; box-shadow:none;
}
#mobile-actions .mobile-key[data-action="attack"] svg { width: 64%; height: 64%; color: #f8d48a; }
#mobile-actions .mobile-key[data-action="attack"] > span { bottom: calc(6px * var(--mobile-ui-scale, 1)); font-size: calc(var(--mobile-key-size) * .4375); }
.mobile-slot { display: grid; place-items: center; overflow: visible; border: 0; background: transparent; box-shadow:none;
  width: calc(var(--mobile-key-size) * .9); height: calc(var(--mobile-key-size) * .9); }
.mobile-slot::before { inset: calc(3px * var(--mobile-ui-scale, 1)); }
.mobile-slot canvas { position: absolute; inset: 12%; width: 76%; height: 76%; border-radius: 50%; display: none; }
.mobile-slot.has-icon canvas { display: block; }
.slot-placeholder { color: #b3a17a; font-size: calc(12px * var(--mobile-ui-scale, 1)); line-height: 1; font-weight: 400; }
.mobile-slot:not(.is-empty) .slot-placeholder { display: none; }
.slot-name { font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #ffe7b2; max-width: 80%; overflow: hidden; overflow-wrap: anywhere; line-height: 1.15; }
.mobile-slot.has-icon .slot-name { display: none; }
.slot-count { position: absolute; right: 0; bottom: 0; z-index: 3; font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 700; color: #fff; }
.slot-cooldown { display: none; position: absolute; inset: 8%; border-radius:0; z-index: 2;
  align-items: center; justify-content: center; background: #071221a6; font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 700; color: #fff2c9; }
.mobile-slot.is-cooling .slot-cooldown { display: flex; }
.mobile-slot:disabled { cursor: default; }
.mobile-pet-slot[hidden] { display: none !important; }
/* Static selection ring: no animation, blur, filter or extra image/canvas. */
.mobile-slot.is-skill-selected::after, .mobile-pet-slot.is-pet-selected::after {
  content: ""; position: absolute; inset: 8%; z-index: 3; border: calc(2px * var(--mobile-ui-scale, 1)) solid #ffdc7d;
  border-radius: 50%; box-sizing: border-box; pointer-events: none;
}
.mobile-slot.is-empty::before { opacity: .65; }
.mobile-slot.is-empty { color: #9d937e; }
.mobile-slot.is-pressed, #mobile-actions .mobile-key.is-pressed {
  filter:none; box-shadow:none;
}
.mobile-key.is-pressed, #mobile-movement .is-pressed {
  background: #bf8c39; color: #fff; border-color: #ffde9d;
}
#mobile-view-tools { right: var(--mobile-right-gap);
  top: calc(var(--mobile-safe-top, 0px) + calc(16px * var(--mobile-ui-scale, 1))); max-width: min(calc(460px * var(--mobile-ui-scale, 1)), calc(100vw - calc(48px * var(--mobile-ui-scale, 1)))); }
#view-tools-panel { max-height: min(65dvh, calc(300px * var(--mobile-ui-scale, 1))); overflow-y: auto; }
#view-tools-panel .mobile-key { padding: calc(5px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); }
#mobile-field-of-view { position: fixed; z-index: 7; isolation: isolate; box-sizing: border-box; min-width: 0; min-height: 0; flex: none; margin: 0; padding: 0; border: 0; border-radius:0; background: transparent; box-shadow:none; touch-action: manipulation; appearance: none; }
#mobile-field-of-view[hidden] { display: none !important; }
#mobile-field-of-view svg { display: block; width: 100%; height: 100%; pointer-events: none; }
#mobile-shortcuts { display: flex; flex-wrap: wrap; gap: calc(5px * var(--mobile-ui-scale, 1)); width: 100%; }
#mobile-feedback {
  position: fixed; z-index: 20; top: max(calc(12px * var(--mobile-ui-scale, 1)), max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px))); left: 50%;
  transform: translateX(-50%); max-width: calc(100vw - calc(32px * var(--mobile-ui-scale, 1))); padding: calc(9px * var(--mobile-ui-scale, 1)) calc(16px * var(--mobile-ui-scale, 1));
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #a68a5380; border-radius:0; color: #ffeac4; background: #181715ed;
  font-size: calc(12px * var(--mobile-ui-scale, 1)); text-align: center; pointer-events: none;
}
#mobile-feedback[hidden] { display: none; }
#mobile-notice-hud { position: fixed; z-index: 7; box-sizing: border-box; margin: 0; padding: 0; min-height: 0; border: 0; border-radius:0; background: transparent; color: #dbc598; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; text-align: center; pointer-events: none; text-shadow: calc(-1px * var(--mobile-ui-scale, 1)) 0 #17130d,calc(1px * var(--mobile-ui-scale, 1)) 0 #17130d,0 calc(-1px * var(--mobile-ui-scale, 1)) #17130d,0 calc(1px * var(--mobile-ui-scale, 1)) #17130d; }
#mobile-notice-hud[hidden] { display: none !important; }
#mobile-notice-hud { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#mobile-notice-hud:hover, #mobile-notice-hud:active, #mobile-notice-hud:focus { outline: none; box-shadow:none; background: transparent; }
#mobile-notice-hud .notice-heading { display: block; width: max-content; min-width: calc(78px * var(--mobile-ui-scale, 1)); min-height: calc(24px * var(--mobile-ui-scale, 1)); margin: 0 auto; padding: 0 calc(4px * var(--mobile-ui-scale, 1)); border: 0; border-radius:0; background: transparent; color: #cbb78f; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; text-shadow: inherit; pointer-events: auto; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
#mobile-notice-hud .notice-heading:hover, #mobile-notice-hud .notice-heading:active, #mobile-notice-hud .notice-heading:focus { outline: none; box-shadow:none; background: transparent; }
#mobile-notice-hud .notice-heading:active { cursor: grabbing; }
#mobile-notice-hud .notice-heading:focus-visible { text-decoration: underline; text-underline-offset: calc(2px * var(--mobile-ui-scale, 1)); }
.notice-recent { display: block; transition: opacity .25s; pointer-events: none; }
.notice-recent > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ebd26f; }
.mobile-broadcast-active #mobile-notice-hud:not(.is-custom-position) .notice-recent { margin-top: var(--mobile-broadcast-gap,calc(32px * var(--mobile-ui-scale, 1))); }
#mobile-broadcast-hud { position: fixed; z-index: 7; display: flex; align-items: center; gap: calc(5px * var(--mobile-ui-scale, 1)); box-sizing: border-box; height: calc(24px * var(--mobile-ui-scale, 1)); min-height: calc(24px * var(--mobile-ui-scale, 1)); margin: 0; padding: calc(3px * var(--mobile-ui-scale, 1)) calc(6px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #8f74454d; border-radius:0; background:transparent; color: #ead18c; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; font-weight: 400; text-align: left; appearance: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#mobile-broadcast-hud[hidden] { display: none !important; }
#mobile-broadcast-hud:hover, #mobile-broadcast-hud:active, #mobile-broadcast-hud:focus { outline: none; box-shadow:none; }
#mobile-broadcast-hud:focus-visible .broadcast-badge { text-decoration: underline; text-underline-offset: calc(2px * var(--mobile-ui-scale, 1)); }
.broadcast-badge { flex: none; color: #d0b881; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.broadcast-viewport { flex: 1; min-width: 0; overflow: hidden; }
.broadcast-track { display: inline-block; width: max-content; white-space: nowrap; text-shadow: 0 calc(1px * var(--mobile-ui-scale, 1)) calc(1px * var(--mobile-ui-scale, 1)) #000; }
.broadcast-count, .broadcast-arrow { flex: none; color: #bda678; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.broadcast-count { width: calc(14px * var(--mobile-ui-scale, 1)); text-align: right; }
.broadcast-count:empty { visibility: hidden; }
#mobile-broadcast-history { box-sizing: border-box; width: min(calc(360px * var(--mobile-ui-scale, 1)),calc(100vw - calc(32px * var(--mobile-ui-scale, 1)))); padding: calc(10px * var(--mobile-ui-scale, 1)); border: calc(2px * var(--mobile-ui-scale, 1)) solid #8a6845; border-radius:0; background: #29221bf5; color: #e3d5bd; }
#mobile-broadcast-history h2 { font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 400; }
#mobile-broadcast-history header button { flex: none; min-height: calc(24px * var(--mobile-ui-scale, 1)); min-width: calc(24px * var(--mobile-ui-scale, 1)); padding: 0; color: #ffe0a2; border: calc(1px * var(--mobile-ui-scale, 1)) solid #a17d4e; border-radius:0; background:transparent; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) sans-serif; }
.broadcast-history-list { max-height: min(calc(250px * var(--mobile-ui-scale, 1)),calc(100dvh - calc(105px * var(--mobile-ui-scale, 1)))); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.broadcast-history-item { padding: calc(8px * var(--mobile-ui-scale, 1)) calc(5px * var(--mobile-ui-scale, 1)); border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #70563866; color: #ead18c; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; overflow-wrap: anywhere; white-space: pre-wrap; }
.broadcast-history-item.is-current { background: #86623430; border-left: calc(2px * var(--mobile-ui-scale, 1)) solid #ad8350; }
#mobile-broadcast-history .broadcast-npc-link { display: inline; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius:0; color: inherit; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: calc(2px * var(--mobile-ui-scale, 1)); }
#mobile-notice-history .notice-broadcast-history { display: block; width: 100%; min-height: calc(26px * var(--mobile-ui-scale, 1)); margin-bottom: calc(5px * var(--mobile-ui-scale, 1)); padding: calc(4px * var(--mobile-ui-scale, 1)) calc(6px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #a17d4e; border-radius:0; background:transparent; color: #f2ddba; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; text-align: left; }
#mobile-notice-history .notice-broadcast-history[hidden] { display: none; }
#mobile-notice-history { width: min(calc(320px * var(--mobile-ui-scale, 1)),calc(100vw - calc(32px * var(--mobile-ui-scale, 1)))); padding: calc(10px * var(--mobile-ui-scale, 1)); border-radius:0; border: calc(2px * var(--mobile-ui-scale, 1)) solid #8a6845; background: #29221bf5; color: #e3d5bd; box-sizing: border-box; }
#mobile-notice-history h2 { font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 400; }
#mobile-notice-history header button { min-height: calc(24px * var(--mobile-ui-scale, 1)); min-width: calc(24px * var(--mobile-ui-scale, 1)); padding: 0; color: #ffe0a2; border: calc(1px * var(--mobile-ui-scale, 1)) solid #a17d4e; border-radius:0; background:transparent; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) sans-serif; }
#mobile-notice-history header [data-notice-reset] { margin-left: auto; padding: 0 calc(6px * var(--mobile-ui-scale, 1)); font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.notice-caption { font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; color: #baa788; margin: calc(5px * var(--mobile-ui-scale, 1)) 0; }
.notice-history-list { max-height: min(calc(220px * var(--mobile-ui-scale, 1)),calc(100dvh - calc(105px * var(--mobile-ui-scale, 1)))); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.notice-history-list p { margin: 0; padding: calc(5px * var(--mobile-ui-scale, 1)) calc(3px * var(--mobile-ui-scale, 1)); border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #70563866; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; color: #e4cf90; overflow-wrap: anywhere; }
.mobile-dialog {
  position: fixed; z-index: 25; width: min(calc(520px * var(--mobile-ui-scale, 1)), calc(100vw - calc(32px * var(--mobile-ui-scale, 1))));
  max-height: calc(100dvh - calc(32px * var(--mobile-ui-scale, 1)) - max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px)) - max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px)));
  overflow: auto; padding: calc(20px * var(--mobile-ui-scale, 1)); color: #eee; border: calc(1px * var(--mobile-ui-scale, 1)) solid #8c6b39;
  border-radius:0; background: #211e1a; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif;
}
.mobile-dialog::backdrop { background: #000b; }
.mobile-dialog:not(.is-embedded)[open] { inset: auto; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); }
.mobile-dialog header { display: flex; align-items: center; gap: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-dialog h2 { margin: 0; flex: 1; font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #f0c978; }
.mobile-dialog header button { flex: none; min-width: calc(44px * var(--mobile-ui-scale, 1)); min-height: calc(44px * var(--mobile-ui-scale, 1)); }
.mobile-dialog label { margin-top: calc(12px * var(--mobile-ui-scale, 1)); font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-dialog select {
  width: 100%; min-height: calc(44px * var(--mobile-ui-scale, 1)); padding: calc(6px * var(--mobile-ui-scale, 1)) calc(10px * var(--mobile-ui-scale, 1)); color: #fff; background: #151413;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #514a40; border-radius:0; font-size: calc(16px * var(--mobile-ui-scale, 1));
}
.mobile-dialog input[type="range"] { padding: 0; min-height: calc(28px * var(--mobile-ui-scale, 1)); accent-color: #d9ad54; }
.mobile-movement-mode { grid-column: 1 / -1; margin-top: calc(12px * var(--mobile-ui-scale, 1)); font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-arrow-size-option { grid-column: 1 / -1; }
.mobile-arrow-size-option[hidden], .mobile-portal-mode[hidden] { display: none !important; }
.mobile-movement-choices { display: flex; gap: calc(6px * var(--mobile-ui-scale, 1)); margin-top: calc(3px * var(--mobile-ui-scale, 1)); }
.mobile-dialog .mobile-movement-choices button { flex: 1; min-width: 0; min-height: calc(34px * var(--mobile-ui-scale, 1)); padding: calc(6px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #775939; border-radius:0; background:transparent; color: #cdbf9f; font: inherit; touch-action: manipulation; }
.mobile-dialog .mobile-movement-choices button[aria-pressed="true"] { border-color: #d4ac63; color: #ffecb5; background:transparent; box-shadow:none; }
.mobile-dialog .mobile-movement-choices button:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) solid #edc974; outline-offset: calc(-3px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded .mobile-movement-mode { margin-top: 0; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-settings.is-embedded .mobile-movement-choices button { min-height: calc(26px * var(--mobile-ui-scale, 1)); padding: calc(4px * var(--mobile-ui-scale, 1)) calc(6px * var(--mobile-ui-scale, 1)); font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
.mobile-portal-mode { display: block; grid-column: 1 / -1; margin-top: calc(12px * var(--mobile-ui-scale, 1)); font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-portal-mode small { display: block; margin-top: calc(4px * var(--mobile-ui-scale, 1)); color: #bea98a; font-size: calc(12px * var(--mobile-ui-scale, 1)); line-height: 1.5; }
.mobile-portal-picker { position: relative; margin-top: calc(3px * var(--mobile-ui-scale, 1)); }
.mobile-dialog .mobile-portal-toggle { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--mobile-ui-scale, 1)); width: 100%; min-width: 0; min-height: calc(34px * var(--mobile-ui-scale, 1)); padding: calc(6px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #a77d45; border-radius:0; background:transparent; color: #f2ddba; font: inherit; text-align: left; touch-action: manipulation; }
.mobile-portal-toggle svg { flex: none; width: calc(12px * var(--mobile-ui-scale, 1)); height: calc(12px * var(--mobile-ui-scale, 1)); fill: none; stroke: #d8bd87; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mobile-portal-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-portal-options { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% + calc(3px * var(--mobile-ui-scale, 1))); padding: calc(3px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #ad8350; border-radius:0; background: #29221b; box-shadow:none; }
.mobile-portal-options[hidden] { display: none !important; }
.mobile-dialog .mobile-portal-options button { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--mobile-ui-scale, 1)); width: 100%; min-width: 0; min-height: calc(34px * var(--mobile-ui-scale, 1)); padding: calc(6px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); border: 0; border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #705333; border-radius:0; background: transparent; color: #e7dcc5; font: inherit; text-align: left; touch-action: manipulation; }
.mobile-dialog .mobile-portal-options button:last-child { border-bottom: 0; }
.mobile-dialog .mobile-portal-options button[aria-selected="true"] { color: #ffe9ae; background:transparent; }
.mobile-portal-options i { flex: none; width: calc(8px * var(--mobile-ui-scale, 1)); height: calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #b39461; border-radius:0; }
.mobile-portal-options [aria-selected="true"] i { border: calc(2px * var(--mobile-ui-scale, 1)) solid #f0c675; background: #d89536; }
.mobile-dialog .mobile-portal-picker button:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) solid #edc974; outline-offset: calc(-2px * var(--mobile-ui-scale, 1)); }
.mobile-key-mappings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-layout-entry { grid-column: 1 / -1; margin-top: calc(8px * var(--mobile-ui-scale, 1)); }
.mobile-layout-entry button { width: 100%; min-height: calc(36px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #c39b58; border-radius:0; background:transparent; color: #ffe8b0; font: inherit; touch-action: manipulation; }
#mobile-settings.is-embedded .mobile-layout-entry { margin-top: calc(4px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded .mobile-layout-entry button { min-height: calc(28px * var(--mobile-ui-scale, 1)); font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-layout-editor { position: fixed; inset: 0; z-index: 21000; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; color: #e9d9b3; font: calc(12px * var(--mobile-ui-scale, 1))/1.4 SimSun,"宋体","Songti SC",serif; }
#mobile-layout-editor[hidden] { display: none !important; }
.touch-layout-frames { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.touch-layout-frames [data-layout-frame] { position: absolute; box-sizing: border-box; border: calc(1px * var(--mobile-ui-scale, 1)) dashed #b79b66; border-radius:0; background: #43301515; pointer-events: auto; cursor: grab; touch-action: none; }
.touch-layout-frames [data-layout-frame][hidden] { display: none; }
.touch-layout-frames [data-layout-frame].is-selected { z-index: 1; border: calc(2px * var(--mobile-ui-scale, 1)) dashed #ffe2a0; background: #74532425; }
.touch-layout-frames [data-layout-frame] span { position: absolute; top: 0; left: 0; max-width: 100%; padding: calc(2px * var(--mobile-ui-scale, 1)) calc(5px * var(--mobile-ui-scale, 1)); border-radius:0; background: #2b2218; color: #ffe4aa; white-space: nowrap; font-size: calc(12px * var(--mobile-ui-scale, 1)); pointer-events: none; }
.touch-layout-panel { position: absolute; z-index: 2; top: calc(var(--mobile-safe-top, 0px) + calc(8px * var(--mobile-ui-scale, 1))); left: 50%; transform: translateX(-50%); width: min(calc(370px * var(--mobile-ui-scale, 1)),calc(100vw - var(--mobile-safe-left, 0px) - var(--mobile-safe-right, 0px) - calc(16px * var(--mobile-ui-scale, 1)))); max-height: calc(100dvh - var(--mobile-safe-top, 0px) - var(--mobile-safe-bottom, 0px) - calc(16px * var(--mobile-ui-scale, 1))); box-sizing: border-box; display: flex; flex-direction: column; border: calc(2px * var(--mobile-ui-scale, 1)) solid #9a7842; border-radius:0; background: #292319; box-shadow:none; overflow: hidden; }
.touch-layout-panel header { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--mobile-ui-scale, 1)); flex: none; padding: calc(5px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); background:transparent; border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #92733f; cursor: move; touch-action: none; }
.touch-layout-panel strong { font-weight: 500; }
#mobile-layout-editor button { width: auto; min-width: calc(38px * var(--mobile-ui-scale, 1)); min-height: calc(30px * var(--mobile-ui-scale, 1)); padding: calc(4px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); margin: 0; border: calc(1px * var(--mobile-ui-scale, 1)) solid #92703f; border-radius:0; color: #e8d6b3; background:transparent; font: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-layout-editor button[aria-pressed="true"] { border-color: #e2b463; background:transparent; color: #fff0be; box-shadow:none; }
#mobile-layout-editor button:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) solid #ffe4a1; outline-offset: calc(-3px * var(--mobile-ui-scale, 1)); }
.touch-layout-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b79253 #292319; padding: calc(7px * var(--mobile-ui-scale, 1)) calc(9px * var(--mobile-ui-scale, 1)); }
.touch-layout-modes, .touch-layout-regions { display: flex; gap: calc(5px * var(--mobile-ui-scale, 1)); margin-bottom: calc(6px * var(--mobile-ui-scale, 1)); }
.touch-layout-regions[hidden] { display: none; }
.touch-layout-modes button, .touch-layout-regions button { flex: 1; min-width: 0; }
.touch-layout-selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(4px * var(--mobile-ui-scale, 1)); color: #e6bd72; margin-bottom: calc(4px * var(--mobile-ui-scale, 1)); }
[data-layout-position] { color: #c9b795; font-size: calc(12px * var(--mobile-ui-scale, 1)); font-variant-numeric: tabular-nums; }
.touch-layout-properties { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--mobile-ui-scale, 1)); }
.touch-layout-gaps { margin-top: calc(5px * var(--mobile-ui-scale, 1)); gap: 0 calc(12px * var(--mobile-ui-scale, 1)); }
.touch-layout-gaps[hidden] { display: none; }
.touch-layout-properties label { display: block; margin: 0; min-width: 0; font: inherit; }
.touch-layout-properties label[hidden] { display: none; }
.touch-layout-properties output { float: right; color: #edc375; font-variant-numeric: tabular-nums; }
.touch-layout-properties input[type="range"] { display: block; width: 100%; min-height: calc(25px * var(--mobile-ui-scale, 1)); height: calc(25px * var(--mobile-ui-scale, 1)); margin: 0; padding: 0; accent-color: #c99d53; }
.touch-layout-nudges { display: flex; align-items: center; gap: calc(5px * var(--mobile-ui-scale, 1)); }
.touch-layout-nudges span { margin-right: auto; color: #c9b795; }
.touch-layout-panel footer { display: flex; justify-content: flex-end; gap: calc(6px * var(--mobile-ui-scale, 1)); padding: calc(6px * var(--mobile-ui-scale, 1)) calc(9px * var(--mobile-ui-scale, 1)); border-top: calc(1px * var(--mobile-ui-scale, 1)) solid #705333; flex: none; }
#mobile-layout-editor [data-layout-reset] { margin-right: auto; }
#mobile-layout-editor [data-layout-save] { border-color: #ddb569; color: #ffecb8; background:transparent; }
.touch-layout-panel.is-collapsed .touch-layout-body { display: none; }
body.mobile-layout-editing #mobile-system-menu { clip-path: none !important; }
@media (pointer: coarse) {
  #mobile-layout-editor button { min-width: calc(44px * var(--mobile-ui-scale, 1)); min-height: calc(36px * var(--mobile-ui-scale, 1)); }
  .touch-layout-properties input[type="range"] { min-height: calc(30px * var(--mobile-ui-scale, 1)); height: calc(30px * var(--mobile-ui-scale, 1)); }
}
@media (max-height: 360px) {
  .touch-layout-panel { font-size: calc(12px * var(--mobile-ui-scale, 1)); }
  .touch-layout-body { padding: calc(5px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); }
  #mobile-layout-editor button { min-height: calc(28px * var(--mobile-ui-scale, 1)); }
}
.mobile-dialog .buttons { flex-wrap: wrap; }
.mobile-dialog .buttons button { min-height: calc(44px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded { position: fixed; inset: auto; margin: 0; box-sizing: border-box; max-width: none; max-height: none; padding: calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #775939; border-radius:0; background: #29221bf5; color: #e5d9c4; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ad8350 #29221b; }
#mobile-settings.is-embedded header { display: none; }
#mobile-settings.is-embedded .hint { margin: 0 0 calc(6px * var(--mobile-ui-scale, 1)); font: calc(12px * var(--mobile-ui-scale, 1))/1.5 SimSun,"宋体","Songti SC",serif; color: #bea98a; }
#mobile-settings.is-embedded .mobile-layout-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 calc(12px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded label { display: block; min-width: 0; margin: calc(4px * var(--mobile-ui-scale, 1)) 0 0; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-settings.is-embedded output { color: #e4b869; }
#mobile-settings.is-embedded .mobile-portal-mode { margin-top: calc(4px * var(--mobile-ui-scale, 1)); font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-settings.is-embedded .mobile-portal-picker button { min-height: calc(26px * var(--mobile-ui-scale, 1)); padding: calc(4px * var(--mobile-ui-scale, 1)) calc(6px * var(--mobile-ui-scale, 1)); font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-settings.is-embedded .mobile-portal-mode small { font-size: calc(12px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded input[type="range"] { display: block; width: 100%; min-height: calc(24px * var(--mobile-ui-scale, 1)); height: calc(24px * var(--mobile-ui-scale, 1)); margin: 0; accent-color: #c89d53; }
#mobile-settings.is-embedded input[type="checkbox"] { width: calc(12px * var(--mobile-ui-scale, 1)); height: calc(12px * var(--mobile-ui-scale, 1)); min-height: 0; padding: 0; margin: 0 calc(4px * var(--mobile-ui-scale, 1)) 0 0; accent-color: #c89d53; vertical-align: middle; }
#mobile-settings.is-embedded .mobile-bindings-title { margin: calc(10px * var(--mobile-ui-scale, 1)) 0 0; padding-top: calc(6px * var(--mobile-ui-scale, 1)); border-top: calc(1px * var(--mobile-ui-scale, 1)) solid #705333; color: #e1ba78; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-settings.is-embedded .mobile-key-mappings { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 calc(8px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded select { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: calc(26px * var(--mobile-ui-scale, 1)); height: calc(26px * var(--mobile-ui-scale, 1)); padding: calc(2px * var(--mobile-ui-scale, 1)) calc(5px * var(--mobile-ui-scale, 1)); margin-top: calc(3px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #88623b; border-radius:0; background: #17130f; color: #e5d9c4; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-settings.is-embedded .buttons { display: flex; justify-content: flex-end; gap: calc(8px * var(--mobile-ui-scale, 1)); margin-top: calc(10px * var(--mobile-ui-scale, 1)); }
#mobile-settings.is-embedded .buttons button { min-width: calc(58px * var(--mobile-ui-scale, 1)); min-height: calc(26px * var(--mobile-ui-scale, 1)); padding: calc(4px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #a77d45; border-radius:0; background:transparent; color: #f2ddba; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }

#mobile-slot-settings { box-sizing: border-box; width: min(calc(420px * var(--mobile-ui-scale, 1)),90vw); height: min(calc(300px * var(--mobile-ui-scale, 1)),88vh); max-width: none; max-height: none; padding: calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #a37c46; border-radius:0; background: #29221bf5; color: #e5d9c4; font: calc(12px * var(--mobile-ui-scale, 1))/1.3 SimSun,"宋体","Songti SC",serif; overflow: hidden; }
#mobile-slot-settings[open] { display: flex; flex-direction: column; gap: calc(6px * var(--mobile-ui-scale, 1)); }
#mobile-slot-settings::backdrop { background: #0008; }
#mobile-slot-settings.is-embedded { position: fixed; inset: auto; margin: 0; border: calc(1px * var(--mobile-ui-scale, 1)) solid #775939; border-radius:0; gap: calc(5px * var(--mobile-ui-scale, 1)); }
#mobile-slot-settings header { display: flex; justify-content: space-between; align-items: center; }
#mobile-slot-settings header strong { color: #e1ba78; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
#mobile-slot-settings header button { flex: none; width: calc(26px * var(--mobile-ui-scale, 1)); height: calc(26px * var(--mobile-ui-scale, 1)); padding: 0; }
#mobile-slot-settings.is-embedded header { display: none; }
#mobile-slot-settings button { min-width: 0; min-height: calc(26px * var(--mobile-ui-scale, 1)); margin: 0; padding: calc(3px * var(--mobile-ui-scale, 1)) calc(7px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #88623b; border-radius:0; background:transparent; color: #f2ddba; font: inherit; touch-action: manipulation; }
#mobile-slot-settings button.is-selected { border-color: #edc974; background:transparent; box-shadow:none; }
.slot-config-slots { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: calc(3px * var(--mobile-ui-scale, 1)); flex: none; }
#mobile-slot-settings .slot-config-slots button { height: calc(32px * var(--mobile-ui-scale, 1)); position: relative; padding: 0 calc(2px * var(--mobile-ui-scale, 1)); overflow: hidden; }
.slot-config-slots canvas { display: none; width: calc(27px * var(--mobile-ui-scale, 1)); height: calc(27px * var(--mobile-ui-scale, 1)); position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.slot-config-slots .has-icon canvas { display: block; }
.slot-config-slots small { position: absolute; left: calc(3px * var(--mobile-ui-scale, 1)); top: calc(1px * var(--mobile-ui-scale, 1)); font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #fff5d8; text-shadow: 0 calc(1px * var(--mobile-ui-scale, 1)) calc(2px * var(--mobile-ui-scale, 1)) #000; }
.slot-config-slots span { position: absolute; bottom: calc(1px * var(--mobile-ui-scale, 1)); left: calc(1px * var(--mobile-ui-scale, 1)); right: calc(1px * var(--mobile-ui-scale, 1)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(12px * var(--mobile-ui-scale, 1)); text-shadow: calc(-1px * var(--mobile-ui-scale, 1)) 0 #17110a,calc(1px * var(--mobile-ui-scale, 1)) 0 #17110a,0 calc(-1px * var(--mobile-ui-scale, 1)) #17110a,0 calc(1px * var(--mobile-ui-scale, 1)) #17110a; }
.slot-config-tools { display: flex; align-items: center; gap: calc(4px * var(--mobile-ui-scale, 1)); flex: none; }
.slot-config-tools strong { margin-right: auto; color: #e1ba78; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.slot-config-candidates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: calc(4px * var(--mobile-ui-scale, 1)); min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ad8350 #29221b; }
#mobile-slot-settings .slot-config-candidates button { display: grid; grid-template-columns: calc(28px * var(--mobile-ui-scale, 1)) minmax(0,1fr); grid-template-rows: auto auto; column-gap: calc(4px * var(--mobile-ui-scale, 1)); min-height: calc(36px * var(--mobile-ui-scale, 1)); padding: calc(3px * var(--mobile-ui-scale, 1)); text-align: left; background: #211b15; }
.slot-config-candidates canvas { grid-row: span 2; width: calc(28px * var(--mobile-ui-scale, 1)); height: calc(28px * var(--mobile-ui-scale, 1)); opacity: 0; }
.slot-config-candidates .has-icon canvas { opacity: 1; }
.slot-config-candidates span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.slot-config-candidates small { color: #c2aa87; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.slot-config-candidates p { grid-column: 1/-1; margin: calc(8px * var(--mobile-ui-scale, 1)) 0; color: #bea98a; }
#mobile-slot-settings footer { display: flex; gap: calc(5px * var(--mobile-ui-scale, 1)); align-items: center; flex: none; }
#mobile-slot-settings footer span { flex: 1; min-width: 0; font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #bea98a; }
#mobile-slot-settings footer button { flex: none; min-width: calc(48px * var(--mobile-ui-scale, 1)); }
#mobile-slot-settings [data-save] { border-color: #bc8e4c; color: #ffe4ac; }
body.mobile-keyboard-open .mobile-pad { display: none !important; }
body.mobile-keyboard-open #pan-handle { display: none !important; }
#orientation-hint button { margin-top: calc(16px * var(--mobile-ui-scale, 1)); min-height: calc(44px * var(--mobile-ui-scale, 1)); }
@media (max-height: 420px) {
  :root { --mobile-key-base: calc(36px * var(--mobile-ui-scale, 1)); --mobile-key-size: calc(36px * var(--mobile-ui-scale, 1)); }
  .mobile-dialog { padding: calc(12px * var(--mobile-ui-scale, 1)) calc(18px * var(--mobile-ui-scale, 1)); }
  #login { padding: calc(16px * var(--mobile-ui-scale, 1)) calc(24px * var(--mobile-ui-scale, 1)); }
  #login h1 { font-size: calc(12px * var(--mobile-ui-scale, 1)); }
  #login label { margin-top: calc(10px * var(--mobile-ui-scale, 1)); }
}
@media (max-width: 480px) { .mobile-key-mappings { grid-template-columns: repeat(2, 1fr); } }
#mobile-hud-dock { display: none !important; }
#mobile-system-menu { position: fixed; z-index: 9; width: calc(260px * var(--mobile-ui-scale, 1)); bottom: var(--mobile-controls-bottom); color: #e5cf9f; }
#mobile-system-menu[hidden] { display: none !important; }
.system-menu-row { display: flex; align-items: center; padding: 0; border: 0; background: transparent; }
.system-menu-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(2px * var(--mobile-ui-scale, 1)); }
#mobile-system-menu [data-menu-action] { position: relative; display: grid; justify-items: center; align-content: center; gap: 0; min-width: 0; min-height: calc(var(--mobile-key-size) * .875); height: calc(var(--mobile-key-size) * .875); padding: 0; border: 0; border-radius:0; background: transparent; color: #e7d7b1; font: calc(var(--mobile-key-size) * .28125)/1.22 SimSun,"宋体","Songti SC",serif; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-system-menu canvas { width: calc(var(--mobile-key-size) * .75); height: calc(var(--mobile-key-size) * .75); pointer-events: none; image-rendering: auto; }
.system-menu-name { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; pointer-events: none; white-space: nowrap; text-align: center; text-shadow: calc(-1px * var(--mobile-ui-scale, 1)) calc(-1px * var(--mobile-ui-scale, 1)) #17130d, calc(1px * var(--mobile-ui-scale, 1)) calc(-1px * var(--mobile-ui-scale, 1)) #17130d, calc(-1px * var(--mobile-ui-scale, 1)) calc(1px * var(--mobile-ui-scale, 1)) #17130d, calc(1px * var(--mobile-ui-scale, 1)) calc(1px * var(--mobile-ui-scale, 1)) #17130d; }
.system-menu-fallback { position: absolute; top: calc(7px * var(--mobile-ui-scale, 1)); font-size: calc(16px * var(--mobile-ui-scale, 1)); color: #b79b68; }
#mobile-system-menu .has-icon .system-menu-fallback { display: none; }
#mobile-system-menu [data-menu-action]:active, #mobile-system-menu [data-menu-action]:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) solid #b99454; background: #73522d66; }
#mobile-system-menu [data-menu-action]:disabled { opacity: .4; }
#mobile-system-more { flex: 1; min-width: 0; grid-template-columns: repeat(10, minmax(calc(var(--mobile-key-size) * .78125), 1fr)); gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; box-sizing: border-box; padding: 0; border: 0; background: transparent; }
#mobile-system-more::-webkit-scrollbar { display: none; }
#mobile-system-menu .has-unread::after { content: ""; position: absolute; top: calc(1px * var(--mobile-ui-scale, 1)); right: calc(1px * var(--mobile-ui-scale, 1)); width: calc(5px * var(--mobile-ui-scale, 1)); height: calc(5px * var(--mobile-ui-scale, 1)); border-radius:0; background: #f4433b; }
body.mobile-keyboard-open #mobile-system-menu { display: none !important; }
body.mobile-system-menu-ready :is(#mobile-shortcuts, #mobile-hud-more) :is([data-action="character"], [data-action="bag"], [data-action="skills"], [data-action="quest"]) { display: none; }
#mobile-top-launcher { position: fixed; z-index: 8; top: calc(var(--mobile-safe-top, 0px) + calc(6px * var(--mobile-ui-scale, 1))); display: flex; gap: calc(4px * var(--mobile-ui-scale, 1)); align-items: center; }
#mobile-top-launcher[hidden], #mobile-top-menu[hidden], #mobile-top-launcher button[hidden], .top-menu-grid button[hidden] { display: none !important; }
#mobile-top-launcher button { position: relative; isolation: isolate; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: calc(2px * var(--mobile-ui-scale, 1)); min-height: calc(20px * var(--mobile-ui-scale, 1)); height: calc(20px * var(--mobile-ui-scale, 1)); min-width: calc(40px * var(--mobile-ui-scale, 1)); padding: 0 calc(5px * var(--mobile-ui-scale, 1));
  color: #ffb84e; border: 0; border-radius:0; background: transparent; box-shadow:none;
  font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) "SimSun", "宋体", serif; text-shadow: calc(-1px * var(--mobile-ui-scale, 1)) 0 #241406, calc(1px * var(--mobile-ui-scale, 1)) 0 #241406, 0 calc(-1px * var(--mobile-ui-scale, 1)) #241406, 0 calc(1px * var(--mobile-ui-scale, 1)) #241406;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* SwitchChannelButtonF: reuse the map/rank/channel skin with its native nine-slice margins. */
#mobile-top-launcher button::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-sizing: border-box; border: calc(5px * var(--mobile-ui-scale, 1)) solid transparent;
  border-image: url("mobile-ui/native-map-button-up.png") 6 5 7 5 fill / calc(5.217px * var(--mobile-ui-scale, 1)) calc(4.348px * var(--mobile-ui-scale, 1)) calc(6.087px * var(--mobile-ui-scale, 1)) calc(4.348px * var(--mobile-ui-scale, 1)) stretch; }
@media (hover: hover) {
  #mobile-top-launcher button:hover::before { border-image-source: url("mobile-ui/native-map-button-over.png"); }
  #mobile-top-launcher button:hover { color: #ffffc3; }
}
#mobile-top-launcher button:active::before { border-image-source: url("mobile-ui/native-map-button-down.png"); }
#mobile-top-launcher button:active { color: #acadb2; }
#mobile-top-launcher button:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) dotted #e0b572; outline-offset: calc(1px * var(--mobile-ui-scale, 1)); }
#mobile-top-launcher .top-menu-arrow { flex: none; width: calc(6px * var(--mobile-ui-scale, 1)); height: calc(6px * var(--mobile-ui-scale, 1)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.top-menu-toggle[aria-expanded="true"] .top-menu-arrow { transform: rotate(180deg); }
.top-prize-shortcut canvas { display: none; }
#mobile-top-launcher span { white-space: nowrap; letter-spacing: calc(1px * var(--mobile-ui-scale, 1)); }
#mobile-top-menu { position: fixed; z-index: 4; top: calc(var(--mobile-safe-top, 0px) + calc(33px * var(--mobile-ui-scale, 1))); width: min(calc(308px * var(--mobile-ui-scale, 1)), calc(100vw - calc(16px * var(--mobile-ui-scale, 1)))); max-height: calc(100dvh - calc(46px * var(--mobile-ui-scale, 1)));
  display: flex; flex-direction: column; box-sizing: border-box; padding: calc(6px * var(--mobile-ui-scale, 1)); color: #e3d5bd; border: calc(2px * var(--mobile-ui-scale, 1)) solid #8a6845; border-radius:0;
  background:transparent; box-shadow:none; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
#mobile-top-menu header { display: flex; align-items: center; justify-content: space-between; gap: calc(8px * var(--mobile-ui-scale, 1)); padding: 0 calc(2px * var(--mobile-ui-scale, 1)) calc(5px * var(--mobile-ui-scale, 1)); border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #6d5238; }
#mobile-top-menu strong { font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 500; color: #e8cf99; }
#mobile-top-menu header button { flex: none; width: calc(22px * var(--mobile-ui-scale, 1)); min-width: calc(22px * var(--mobile-ui-scale, 1)); min-height: calc(22px * var(--mobile-ui-scale, 1)); height: calc(22px * var(--mobile-ui-scale, 1)); padding: 0; color: #ffe0a2;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #a17d4e; border-radius:0; background:transparent; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) sans-serif; touch-action: manipulation; }
.top-menu-tabs { display: flex; flex: none; gap: calc(3px * var(--mobile-ui-scale, 1)); margin: calc(6px * var(--mobile-ui-scale, 1)) 0; }
.top-menu-tabs button { flex: 1; min-width: 0; min-height: calc(26px * var(--mobile-ui-scale, 1)); padding: calc(3px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #755b3d; border-radius:0; color: #cdbc9d;
  background:transparent; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; touch-action: manipulation; }
.top-menu-tabs button[aria-pressed="true"] { color: #fff0c1; border-color: #c39b56; background:transparent; }
.top-menu-tabs button:disabled { opacity: .4; }
.top-menu-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(4px * var(--mobile-ui-scale, 1)); overflow-y: auto; min-height: 0; padding: calc(1px * var(--mobile-ui-scale, 1)); touch-action: pan-y; }
.top-menu-grid button { position: relative; display: grid; grid-template-rows: calc(32px * var(--mobile-ui-scale, 1)) calc(16px * var(--mobile-ui-scale, 1)); justify-items: center; align-items: center; gap: calc(3px * var(--mobile-ui-scale, 1)); min-width: 0; min-height: calc(58px * var(--mobile-ui-scale, 1)); padding: calc(3px * var(--mobile-ui-scale, 1)) calc(2px * var(--mobile-ui-scale, 1));
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #65503a; border-radius:0; color: #e0cfac; background: #17130e6b; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; touch-action: manipulation; }
.top-menu-grid canvas { width: calc(32px * var(--mobile-ui-scale, 1)); height: calc(32px * var(--mobile-ui-scale, 1)); pointer-events: none; }
.top-entry-name { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-entry-fallback { position: absolute; top: calc(10px * var(--mobile-ui-scale, 1)); color: #bc9c62; }
.top-menu-grid .has-icon .top-entry-fallback { display: none; }
.top-menu-grid button:active { border-color: #c7a363; background: #594020; }
body.mobile-chat-open #mobile-top-launcher,body.mobile-keyboard-open #mobile-top-launcher { display: none !important; }
#mobile-status-bar { position: fixed; z-index: 7; display: flex; align-items: flex-start; gap: calc(2px * var(--mobile-ui-scale, 1));
  max-width: calc(100vw - calc(24px * var(--mobile-ui-scale, 1))); touch-action: manipulation; }
#mobile-status-bar[hidden], #mobile-status-icons[hidden], #mobile-status-detail[hidden] { display: none !important; }
#mobile-status-icons { display: flex; flex-wrap: wrap; gap: calc(2px * var(--mobile-ui-scale, 1)); max-width: calc(118px * var(--mobile-ui-scale, 1)); }
.mobile-status-icon { display: grid; place-items: center; width: calc(28px * var(--mobile-ui-scale, 1)); min-width: calc(28px * var(--mobile-ui-scale, 1)); height: calc(28px * var(--mobile-ui-scale, 1)); min-height: calc(28px * var(--mobile-ui-scale, 1));
  padding: calc(2px * var(--mobile-ui-scale, 1)); border: 0; border-radius:0; background: transparent; box-shadow:none; appearance: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mobile-status-icon canvas { width: calc(24px * var(--mobile-ui-scale, 1)); height: calc(24px * var(--mobile-ui-scale, 1)); pointer-events: none; }
.mobile-status-icon[aria-expanded="true"], .mobile-status-icon:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) solid #c7a66a; outline-offset: calc(-1px * var(--mobile-ui-scale, 1)); }
.mobile-status-toggle { display: grid; place-items: center; width: calc(16px * var(--mobile-ui-scale, 1)); min-width: calc(16px * var(--mobile-ui-scale, 1)); height: calc(20px * var(--mobile-ui-scale, 1)); min-height: calc(20px * var(--mobile-ui-scale, 1));
  position: relative; isolation: isolate; margin-top: calc(4px * var(--mobile-ui-scale, 1)); padding: 0; border: 0; border-radius:0;
  color: #ffb84e; background: transparent; appearance: none; -webkit-tap-highlight-color: transparent; }
.mobile-status-toggle svg { width: calc(10px * var(--mobile-ui-scale, 1)); height: calc(10px * var(--mobile-ui-scale, 1)); }
.mobile-status-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
#mobile-status-detail { position: fixed; z-index: 27; width: min(calc(228px * var(--mobile-ui-scale, 1)), calc(100vw - calc(16px * var(--mobile-ui-scale, 1)))); box-sizing: border-box;
  max-height: min(calc(210px * var(--mobile-ui-scale, 1)), 60dvh); overflow: auto; padding: calc(5px * var(--mobile-ui-scale, 1)) calc(7px * var(--mobile-ui-scale, 1)); color: #e8dfcf;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #8e724c; border-radius:0; background:transparent;
  box-shadow:none; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; touch-action: pan-y; }
#mobile-status-detail header { display: flex; align-items: center; justify-content: space-between; gap: calc(5px * var(--mobile-ui-scale, 1));
  margin-bottom: calc(4px * var(--mobile-ui-scale, 1)); padding-bottom: calc(3px * var(--mobile-ui-scale, 1)); border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #705638; color: #e4c68a; }
#mobile-status-detail strong { font-weight: 500; }
#mobile-status-detail header button { flex: none; width: calc(20px * var(--mobile-ui-scale, 1)); min-width: calc(20px * var(--mobile-ui-scale, 1)); height: calc(20px * var(--mobile-ui-scale, 1)); min-height: calc(20px * var(--mobile-ui-scale, 1)); padding: 0;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #a27a45; border-radius:0; color: #ffe7ae; background:transparent; font-size: calc(12px * var(--mobile-ui-scale, 1)); line-height: calc(18px * var(--mobile-ui-scale, 1)); }
#mobile-status-detail p { margin: calc(3px * var(--mobile-ui-scale, 1)) 0; white-space: pre-wrap; overflow-wrap: anywhere; }
#mobile-status-detail .status-time { color: #d1b67b; font-variant-numeric: tabular-nums; }
#mobile-status-detail .status-time:empty { display: none; }
body.mobile-chat-open #mobile-status-bar, body.mobile-chat-open #mobile-status-detail { display: none !important; }
#mobile-chat-summary { position: fixed; z-index: 7; left: var(--mobile-side-inset);
  top: calc(var(--mobile-safe-top, 0px) + var(--chat-entry-top, calc(180px * var(--mobile-ui-scale, 1)))); width: calc(22px * var(--mobile-ui-scale, 1)); min-width: calc(22px * var(--mobile-ui-scale, 1)); min-height: calc(20px * var(--mobile-ui-scale, 1)); height: calc(20px * var(--mobile-ui-scale, 1));
  display: grid; place-items: center; padding: 0 calc(6px * var(--mobile-ui-scale, 1)) 0 0; overflow: visible; color: #ffb84e; isolation: isolate;
  border: 0; border-radius:0; background: transparent; box-shadow:none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-chat-summary[hidden] { display: none !important; }
.chat-summary-mic { position: relative; display: grid; place-items: center; width: calc(10px * var(--mobile-ui-scale, 1)); height: calc(10px * var(--mobile-ui-scale, 1)); color: currentColor; }
.chat-summary-mic svg { display: block; width: calc(10px * var(--mobile-ui-scale, 1)); height: calc(10px * var(--mobile-ui-scale, 1)); overflow: visible; }
.chat-summary-unread { position: absolute; z-index: 1; top: calc(1px * var(--mobile-ui-scale, 1)); right: calc(6px * var(--mobile-ui-scale, 1)); width: calc(6px * var(--mobile-ui-scale, 1)); height: calc(6px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #291a12;
  border-radius:0; background: #ff403b; pointer-events: none; }
.chat-summary-unread[hidden] { display: none !important; }
#mobile-chat-preview { position: fixed; z-index: 7; left: var(--mobile-side-inset);
  top: calc(var(--mobile-safe-top, 0px) + var(--chat-entry-top, calc(180px * var(--mobile-ui-scale, 1)))); width: min(calc(205px * var(--mobile-ui-scale, 1)), calc(100vw - calc(32px * var(--mobile-ui-scale, 1))));
  display: flex; flex-direction: column; gap: calc(2px * var(--mobile-ui-scale, 1)); padding: calc(3px * var(--mobile-ui-scale, 1)) calc(6px * var(--mobile-ui-scale, 1)) calc(4px * var(--mobile-ui-scale, 1)); color: #eee2c7;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #8e724c99; border-radius:0; background: #211a14b8; box-shadow:none;
  font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-chat-preview[hidden] { display: none !important; }
.mobile-chat-preview-header { display: flex; align-items: center; gap: calc(5px * var(--mobile-ui-scale, 1)); min-height: calc(16px * var(--mobile-ui-scale, 1)); color: #d6bd88; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-chat-preview-header button { display: grid; flex: none; place-items: center; width: calc(16px * var(--mobile-ui-scale, 1)); min-width: calc(16px * var(--mobile-ui-scale, 1)); height: calc(16px * var(--mobile-ui-scale, 1)); min-height: calc(16px * var(--mobile-ui-scale, 1)); margin-left: auto; padding: 0; color: #dac797; border: calc(1px * var(--mobile-ui-scale, 1)) solid #806747; border-radius:0; background: #31271e; font-size: calc(12px * var(--mobile-ui-scale, 1)); line-height: calc(12px * var(--mobile-ui-scale, 1)); appearance: none; }
.chat-preview-unread { width: calc(6px * var(--mobile-ui-scale, 1)); height: calc(6px * var(--mobile-ui-scale, 1)); border-radius:0; background: #ff403b; box-shadow:none; }
.chat-preview-unread[hidden] { display: none !important; }
.mobile-chat-preview-messages { display: grid; gap: calc(1px * var(--mobile-ui-scale, 1)); min-width: 0; }
.mobile-chat-preview-messages p { min-width: 0; margin: 0; overflow: hidden; color: #e6dfcf; white-space: nowrap; text-overflow: ellipsis; }
#mobile-chat-preview footer { color: #bda774; text-align: right; font-size: calc(12px * var(--mobile-ui-scale, 1)); line-height: calc(13px * var(--mobile-ui-scale, 1)); }
#mobile-chat-panel { position: fixed; z-index: 26; left: 0; right: auto;
  top: var(--mobile-chat-viewport-top, 0px); bottom: var(--mobile-chat-keyboard-inset, 0px);
  width: 50vw; max-width: none; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: calc(4px * var(--mobile-ui-scale, 1));
  padding: max(calc(6px * var(--mobile-ui-scale, 1)),var(--mobile-safe-top, 0px)) calc(6px * var(--mobile-ui-scale, 1)) max(calc(6px * var(--mobile-ui-scale, 1)),var(--mobile-safe-bottom, 0px)) max(calc(6px * var(--mobile-ui-scale, 1)),var(--mobile-safe-left, 0px)); color: #f4e7cb; border: calc(1px * var(--mobile-ui-scale, 1)) solid #a27d4d; border-left: 0; border-radius:0;
  background:transparent; box-shadow:none;
  font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; touch-action: auto; }
#mobile-chat-panel[hidden] { display: none !important; }
.mobile-chat-header { display: flex; flex: none; align-items: center; justify-content: space-between; height: calc(25px * var(--mobile-ui-scale, 1)); padding: 0 calc(3px * var(--mobile-ui-scale, 1)) calc(3px * var(--mobile-ui-scale, 1)) calc(7px * var(--mobile-ui-scale, 1));
  color: #f0d392; border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #856543; background:transparent; }
.mobile-chat-header strong { font-size: calc(12px * var(--mobile-ui-scale, 1)); font-weight: 500; }
.mobile-chat-header button { flex: none; width: calc(28px * var(--mobile-ui-scale, 1)); height: calc(24px * var(--mobile-ui-scale, 1)); min-height: calc(24px * var(--mobile-ui-scale, 1)); padding: 0; color: #ffe7ae; border: calc(1px * var(--mobile-ui-scale, 1)) solid #a27a45;
  border-radius:0; background:transparent; font-size: calc(12px * var(--mobile-ui-scale, 1)); line-height: calc(20px * var(--mobile-ui-scale, 1)); }
.mobile-chat-tabs { display: flex; flex: none; gap: calc(2px * var(--mobile-ui-scale, 1)); overflow-x: auto; scrollbar-width: none; }
.mobile-chat-tabs button { flex: 1 0 auto; min-width: calc(38px * var(--mobile-ui-scale, 1)); height: calc(24px * var(--mobile-ui-scale, 1)); min-height: calc(24px * var(--mobile-ui-scale, 1)); padding: calc(1px * var(--mobile-ui-scale, 1)) calc(5px * var(--mobile-ui-scale, 1)); color: #dfd2b6;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #664d35; border-radius:0; background:transparent; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
.mobile-chat-tabs button.has-unread { position: relative; }
.mobile-chat-tabs button.has-unread::after { content: ""; position: absolute; top: calc(2px * var(--mobile-ui-scale, 1)); right: calc(3px * var(--mobile-ui-scale, 1)); width: calc(6px * var(--mobile-ui-scale, 1)); height: calc(6px * var(--mobile-ui-scale, 1)); border-radius:0; background: #ff403b; }
.mobile-chat-tabs button[aria-pressed="true"] { color: #fff1c3; border-color: #d2a85e; background:transparent; }
.mobile-chat-history { min-height: 0; flex: 1 1 calc(92px * var(--mobile-ui-scale, 1)); overflow: auto; padding: calc(4px * var(--mobile-ui-scale, 1)) calc(7px * var(--mobile-ui-scale, 1)); color: #e8dfcf; border: calc(1px * var(--mobile-ui-scale, 1)) solid #574434; border-radius:0;
  background: #110f0ddc; overscroll-behavior: contain; touch-action: pan-y; }
.mobile-chat-line { margin: calc(2px * var(--mobile-ui-scale, 1)) 0; overflow-wrap: anywhere; font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
.mobile-chat-line strong { color: #f0e2c6; font-weight: 400; }
.mobile-chat-form { position: relative; display: flex; flex: none; flex-direction: column; gap: calc(4px * var(--mobile-ui-scale, 1)); }
.mobile-chat-compose-meta,.mobile-chat-compose { display: flex; align-items: center; gap: calc(4px * var(--mobile-ui-scale, 1)); }
.mobile-chat-channel-picker { position: relative; flex: none; width: calc(72px * var(--mobile-ui-scale, 1)); }
.mobile-chat-channel-toggle { display: flex; flex: none; align-items: center; justify-content: space-between; width: calc(72px * var(--mobile-ui-scale, 1)); height: calc(27px * var(--mobile-ui-scale, 1)); min-height: calc(27px * var(--mobile-ui-scale, 1)); padding: calc(2px * var(--mobile-ui-scale, 1)) calc(6px * var(--mobile-ui-scale, 1));
  color: #f0e4cd; border: calc(1px * var(--mobile-ui-scale, 1)) solid #a27a45; border-radius:0; background:transparent; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; appearance: none; touch-action: manipulation; }
.mobile-chat-channel-toggle svg { width: calc(10px * var(--mobile-ui-scale, 1)); height: calc(10px * var(--mobile-ui-scale, 1)); fill: none; stroke: #d8bd87; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mobile-chat-channel-options { position: absolute; z-index: 4; left: 0; bottom: calc(100% + calc(5px * var(--mobile-ui-scale, 1))); display: flex; flex-direction: column; width: calc(116px * var(--mobile-ui-scale, 1)); max-height: min(calc(180px * var(--mobile-ui-scale, 1)), 48dvh); overflow: auto; padding: calc(3px * var(--mobile-ui-scale, 1));
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #a27d4d; border-radius:0; background:transparent; box-shadow:none; }
.mobile-chat-channel-options[hidden] { display: none !important; }
.mobile-chat-channel-options button { display: flex; flex: none; align-items: center; justify-content: space-between; width: 100%; min-width: 0; height: calc(31px * var(--mobile-ui-scale, 1)); min-height: calc(31px * var(--mobile-ui-scale, 1)); padding: 0 calc(8px * var(--mobile-ui-scale, 1)); color: #e7dcc5;
  border: 0; border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #755a3b77; border-radius:0; background: transparent; font: calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; text-align: left; appearance: none; touch-action: manipulation; }
.mobile-chat-channel-options button:last-child { border-bottom: 0; }
.mobile-chat-channel-options button[aria-selected="true"] { color: #ffe9ae; background:transparent; }
.mobile-chat-channel-options button:active,.mobile-chat-channel-options button:focus-visible { color: #fff2ce; outline: calc(1px * var(--mobile-ui-scale, 1)) solid #c39756; outline-offset: calc(-1px * var(--mobile-ui-scale, 1)); }
.mobile-chat-channel-options button i { width: calc(8px * var(--mobile-ui-scale, 1)); height: calc(8px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #b39461; border-radius:0; }
.mobile-chat-channel-options button[aria-selected="true"] i { border: calc(2px * var(--mobile-ui-scale, 1)) solid #f0c675; background: #d89536; box-shadow:none; }
.mobile-chat-compose-meta input { min-width: 0; flex: 1; height: calc(27px * var(--mobile-ui-scale, 1)); padding: calc(3px * var(--mobile-ui-scale, 1)) calc(7px * var(--mobile-ui-scale, 1)); color: #f0e4cd; border: calc(1px * var(--mobile-ui-scale, 1)) solid #765b3d;
  border-radius:0; background: #110f0d; font: calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
.mobile-chat-compose-meta input[hidden] { display: none; }
.mobile-chat-compose textarea { min-width: 0; flex: 1; height: calc(30px * var(--mobile-ui-scale, 1)); min-height: calc(30px * var(--mobile-ui-scale, 1)); max-height: calc(56px * var(--mobile-ui-scale, 1)); resize: none; padding: calc(6px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1));
  /* Smaller editable text makes iOS zoom the entire page on focus and retain
     that zoom after closing chat. Keep both chat editors at least 16 CSS px. */
  color: #f4e7cb; border: calc(1px * var(--mobile-ui-scale, 1)) solid #806344; border-radius:0; background: #110f0d; font: calc(16px * var(--mobile-ui-scale, 1))/calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; }
.mobile-chat-face-toggle,.mobile-chat-send { flex: none; height: calc(30px * var(--mobile-ui-scale, 1)); min-height: calc(30px * var(--mobile-ui-scale, 1)); padding: calc(2px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); color: #ffe3a0; border: calc(1px * var(--mobile-ui-scale, 1)) solid #a9824f;
  border-radius:0; background:transparent; touch-action: manipulation; }
.mobile-chat-face-toggle { width: calc(32px * var(--mobile-ui-scale, 1)); padding: 0; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-chat-send { min-width: calc(48px * var(--mobile-ui-scale, 1)); color: #fff2d4; background:transparent; }
.mobile-chat-face-picker { display: grid; grid-template-columns: repeat(9, minmax(calc(24px * var(--mobile-ui-scale, 1)), 1fr)); gap: calc(2px * var(--mobile-ui-scale, 1)); max-height: calc(92px * var(--mobile-ui-scale, 1)); overflow: auto; padding: calc(4px * var(--mobile-ui-scale, 1));
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #765839; border-radius:0; background: #171310; }
.mobile-chat-face-picker[hidden] { display: none; }
.mobile-chat-face-picker button { display: grid; place-items: center; min-width: calc(24px * var(--mobile-ui-scale, 1)); height: calc(26px * var(--mobile-ui-scale, 1)); min-height: calc(26px * var(--mobile-ui-scale, 1)); padding: calc(1px * var(--mobile-ui-scale, 1)); border: calc(1px * var(--mobile-ui-scale, 1)) solid #57442f; border-radius:0; background: #28211a; }
.mobile-chat-face-picker canvas { width: calc(22px * var(--mobile-ui-scale, 1)); height: calc(22px * var(--mobile-ui-scale, 1)); image-rendering: auto; }
.mobile-chat-form [data-chat-status] { min-height: 0; margin: 0; color: #f1b47b; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.mobile-chat-form [data-chat-status]:empty { display: none; }
body.mobile-chat-open #mobile-chat-summary,body.mobile-chat-open #mobile-chat-preview,body.mobile-keyboard-open #mobile-chat-summary,body.mobile-keyboard-open #mobile-chat-preview { display: none !important; }
body.mobile-chat-open #mobile-side-toggle,body.mobile-chat-open #mobile-activity-toggle,body.mobile-chat-open #mobile-training-hud { display: none !important; }
#mobile-activity-toggle {
  position: fixed; z-index: 6; left: var(--mobile-side-inset);
  top: calc(var(--mobile-safe-top, 0px) + var(--activity-top, calc(76px * var(--mobile-ui-scale, 1))));
  width: max-content; max-width: min(calc(180px * var(--mobile-ui-scale, 1)), calc(100vw - var(--mobile-safe-left, 0px) - var(--mobile-safe-right, 0px) - calc(16px * var(--mobile-ui-scale, 1))));
  height: calc(18px * var(--mobile-ui-scale, 1)); min-height: calc(18px * var(--mobile-ui-scale, 1)); padding: 0;
  display: flex; flex-direction: row; align-items: center; gap: calc(5px * var(--mobile-ui-scale, 1)); text-align: left;
  border: 0; border-radius:0; background: transparent;
  color: #1e90ff; font: 400 calc(12px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; line-height: calc(16px * var(--mobile-ui-scale, 1));
  text-shadow: calc(-.4px * var(--mobile-ui-scale, 1)) 0 #101010, calc(.4px * var(--mobile-ui-scale, 1)) 0 #101010, 0 calc(-.4px * var(--mobile-ui-scale, 1)) #101010, 0 calc(.4px * var(--mobile-ui-scale, 1)) #101010; -webkit-text-stroke: 0; filter:none;
  box-shadow:none; touch-action: manipulation; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
#mobile-activity-toggle:hover, #mobile-activity-toggle:active, #mobile-activity-toggle:focus {
  background: transparent; box-shadow:none; outline: none;
}
#mobile-activity-toggle:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) dotted #81c2ff; outline-offset: calc(2px * var(--mobile-ui-scale, 1)); }
#mobile-activity-toggle[hidden] { display: none; }
.activity-summary { display: flex; align-items: center; gap: calc(5px * var(--mobile-ui-scale, 1)); min-width: 0;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.activity-next-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.activity-next-time { flex: none; }
.activity-expand { flex: none; display: grid; place-items: center; width: calc(12px * var(--mobile-ui-scale, 1)); height: calc(12px * var(--mobile-ui-scale, 1));
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #658ba488; border-radius:0; background: #162c3e66; color: #70baff; }
.activity-expand svg { width: calc(8px * var(--mobile-ui-scale, 1)); height: calc(8px * var(--mobile-ui-scale, 1)); }
#mobile-side-toggle { position: fixed; z-index: 6; left: var(--mobile-side-inset);
  top: calc(var(--mobile-safe-top, 0px) + var(--side-top, calc(76px * var(--mobile-ui-scale, 1)))); width: calc(22px * var(--mobile-ui-scale, 1)); height: calc(20px * var(--mobile-ui-scale, 1));
  display: grid; place-items: center; padding: 0 calc(6px * var(--mobile-ui-scale, 1)) 0 0; line-height: 0; border: 0; background: transparent; color: #ffb84e; appearance: none; isolation: isolate;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#mobile-side-toggle svg { position: relative; display: block; width: calc(10px * var(--mobile-ui-scale, 1)); height: calc(10px * var(--mobile-ui-scale, 1)); }
#mobile-side-toggle[aria-expanded="false"] svg { transform: rotate(180deg); }
#mobile-side-toggle[hidden] { display: none; }
#mobile-side-toggle:focus { outline: none; }
#mobile-side-toggle:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) dotted #c5ac79; }
/* Compact HUD entries share the original map/rank/channel button frame. */
:is(.mobile-status-toggle, #mobile-side-toggle, #mobile-chat-summary, #mobile-field-of-view)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-sizing: border-box;
  border: calc(5px * var(--mobile-ui-scale, 1)) solid transparent;
  border-image: url("mobile-ui/native-map-button-up.png") 6 5 7 5 fill / calc(5.217px * var(--mobile-ui-scale, 1)) calc(4.348px * var(--mobile-ui-scale, 1)) calc(6.087px * var(--mobile-ui-scale, 1)) calc(4.348px * var(--mobile-ui-scale, 1)) stretch;
}
:is(#mobile-side-toggle, #mobile-chat-summary)::before { right: calc(6px * var(--mobile-ui-scale, 1)); }
@media (hover: hover) {
  :is(.mobile-status-toggle, #mobile-side-toggle, #mobile-chat-summary, #mobile-field-of-view):hover::before { border-image-source: url("mobile-ui/native-map-button-over.png"); }
  :is(.mobile-status-toggle, #mobile-side-toggle, #mobile-chat-summary):hover { color: #ffffc3; }
}
:is(.mobile-status-toggle, #mobile-side-toggle, #mobile-chat-summary, #mobile-field-of-view):active::before { border-image-source: url("mobile-ui/native-map-button-down.png"); }
:is(.mobile-status-toggle, #mobile-side-toggle, #mobile-chat-summary):active { color: #acadb2; }
#mobile-training-hud { position: fixed; z-index: 6; left: var(--mobile-side-inset);
  top: calc(var(--mobile-safe-top, 0px) + var(--training-top, calc(106px * var(--mobile-ui-scale, 1)))); max-width: calc(100vw - calc(24px * var(--mobile-ui-scale, 1))); }
#mobile-training-hud[hidden], .training-row[hidden], .training-speed[hidden], .training-arrow[hidden] { display: none; }
.training-row { display: flex; align-items: center; gap: calc(5px * var(--mobile-ui-scale, 1)); height: calc(18px * var(--mobile-ui-scale, 1)); }
.training-open, .training-speed { appearance: none; -webkit-tap-highlight-color: transparent;
  min-height: calc(18px * var(--mobile-ui-scale, 1)); padding: 0; border: 0; border-radius:0; background: transparent;
  display: flex; align-items: center; gap: calc(6px * var(--mobile-ui-scale, 1)); color: #78bd75; font: 400 calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif;
  text-shadow: calc(-.4px * var(--mobile-ui-scale, 1)) 0 #101010, calc(.4px * var(--mobile-ui-scale, 1)) 0 #101010, 0 calc(-.4px * var(--mobile-ui-scale, 1)) #101010, 0 calc(.4px * var(--mobile-ui-scale, 1)) #101010;
  -webkit-text-stroke: 0; box-shadow:none; touch-action: manipulation; }
.training-open:disabled { color: #afaf96; opacity: 1; }
.training-open { padding: 0; border: 0; border-radius:0; background: transparent; }
.training-text { max-width: min(calc(160px * var(--mobile-ui-scale, 1)), 50vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.training-arrow { color: #c5ac79; font-size: calc(12px * var(--mobile-ui-scale, 1)); }
.training-speed { padding: 0 calc(5px * var(--mobile-ui-scale, 1)); min-height: calc(18px * var(--mobile-ui-scale, 1)); color: #d9b474; border: calc(1px * var(--mobile-ui-scale, 1)) solid #80604488;
  border-radius:0; background: #33271f99; }
.training-open:focus { outline: none; }
.training-open:focus-visible, .training-speed:focus-visible { outline: calc(1px * var(--mobile-ui-scale, 1)) dotted #c5ac79; outline-offset: calc(2px * var(--mobile-ui-scale, 1)); }
body.mobile-keyboard-open #mobile-training-hud,
body.mobile-activity-open #mobile-training-hud { display: none !important; }
body.mobile-keyboard-open #mobile-side-toggle,
body.mobile-activity-open #mobile-side-toggle { display: none !important; }
#mobile-activity-dialog { width: min(calc(360px * var(--mobile-ui-scale, 1)), calc(100vw - calc(32px * var(--mobile-ui-scale, 1)))); padding: calc(10px * var(--mobile-ui-scale, 1)); overflow: hidden;
  border: calc(2px * var(--mobile-ui-scale, 1)) solid #211b16; border-radius:0; background: #33271f;
  box-shadow:none; }
#mobile-activity-dialog::backdrop { background: #0007; }
#mobile-activity-dialog header { gap: calc(8px * var(--mobile-ui-scale, 1)); margin: calc(-10px * var(--mobile-ui-scale, 1)) calc(-10px * var(--mobile-ui-scale, 1)) 0; padding: 0 calc(10px * var(--mobile-ui-scale, 1));
  border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #1e1712; background:transparent; }
#mobile-activity-dialog h2 { height: calc(30px * var(--mobile-ui-scale, 1)); line-height: calc(29px * var(--mobile-ui-scale, 1)); text-align: center; font-size: calc(12px * var(--mobile-ui-scale, 1));
  font-weight: 400; color: #ddd3b9; border-bottom: calc(1px * var(--mobile-ui-scale, 1)) solid #a39477;
  clip-path: polygon(0 0, 100% 0, calc(100% - calc(13px * var(--mobile-ui-scale, 1))) 100%, calc(13px * var(--mobile-ui-scale, 1)) 100%);
  background:transparent; }
#mobile-activity-dialog header button { position: relative; width: calc(44px * var(--mobile-ui-scale, 1)); min-height: calc(44px * var(--mobile-ui-scale, 1)); padding: 0;
  border: 0; background: transparent; color: transparent; font-size: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-activity-dialog header button::after { content: "×"; position: absolute; inset: calc(11px * var(--mobile-ui-scale, 1));
  display: grid; place-items: center; border: calc(1px * var(--mobile-ui-scale, 1)) solid #bd9354; border-radius:0;
  background:transparent; color: #fff0bd;
  font: calc(12px * var(--mobile-ui-scale, 1))/calc(16px * var(--mobile-ui-scale, 1)) SimSun,"宋体","Songti SC",serif; box-shadow:none; }
.activity-caption { display: flex; justify-content: space-between; margin: calc(6px * var(--mobile-ui-scale, 1)) calc(5px * var(--mobile-ui-scale, 1)); font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #b6a487; }
.activity-list { list-style: none; padding: 0; margin: 0; overflow-y: auto;
  border: calc(1px * var(--mobile-ui-scale, 1)) solid #76583e; border-radius:0; background: #2b211b;
  box-shadow:none;
  max-height: calc(100dvh - calc(144px * var(--mobile-ui-scale, 1)) - max(env(safe-area-inset-top), var(--safe-area-inset-top, 0px)) - max(env(safe-area-inset-bottom), var(--safe-area-inset-bottom, 0px))); overscroll-behavior: contain; touch-action: pan-y; }
.activity-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: calc(10px * var(--mobile-ui-scale, 1)); min-height: calc(42px * var(--mobile-ui-scale, 1)); padding: calc(7px * var(--mobile-ui-scale, 1)) calc(8px * var(--mobile-ui-scale, 1)); border-top: calc(1px * var(--mobile-ui-scale, 1)) solid #72523666; }
.activity-list li:first-child { border-top: 0; }
.activity-list li:nth-child(odd) { background: #63472f18; }
.activity-name { font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #d9b474; overflow-wrap: anywhere; }
.activity-time { font-size: calc(12px * var(--mobile-ui-scale, 1)); font-variant-numeric: tabular-nums; color: #c4b69b; white-space: nowrap; }
.activity-empty { font-size: calc(12px * var(--mobile-ui-scale, 1)); color: #b6a487; }
body.mobile-keyboard-open #mobile-activity-toggle { display: none !important; }
@media (max-width: 700px) {
  #mobile-hud-dock { left: calc(50% - calc(45px * var(--mobile-ui-scale, 1))); width: max(calc(140px * var(--mobile-ui-scale, 1)), calc(100vw - calc(450px * var(--mobile-ui-scale, 1)))); }
  #mobile-hud-dock #mobile-shortcuts { grid-template-columns: repeat(3, 1fr); }
  #mobile-hud-dock .mobile-key { font-size: calc(12px * var(--mobile-ui-scale, 1)); min-height: calc(44px * var(--mobile-ui-scale, 1)); }
}

/* Hit boxes scale with the HUD; only the physical 32px floor is unscaled.
   Compact entries get a real row, so expanded targets cannot overlap neighbors. */
body.mobile-game-active :is(.mobile-pad button, .mobile-dialog button,
 #mobile-system-menu button, #mobile-top-launcher button, #mobile-status-bar button,
 #mobile-status-detail button, #mobile-chat-panel button, #mobile-chat-preview button,
 #mobile-chat-summary, #mobile-side-toggle, #mobile-activity-toggle,
 .training-open, .training-speed, #mobile-broadcast-hud, #mobile-field-of-view,
 #mobile-notice-hud button, #view-tools-panel button, #view-tools-toggle) {
  min-width: max(var(--mobile-touch-min, 32px), calc(32px * var(--mobile-ui-scale, 1)));
  min-height: max(var(--mobile-touch-min, 32px), calc(32px * var(--mobile-ui-scale, 1)));
}
body.mobile-game-active :is(.training-row, #mobile-activity-toggle, #mobile-side-toggle) {
  height: max(32px, calc(32px * var(--mobile-ui-scale, 1)));
}
body.mobile-game-active .mobile-chat-tabs { overflow-x: auto; }
body.mobile-game-active .mobile-chat-face-picker { grid-template-columns: repeat(auto-fit, minmax(max(32px, calc(32px * var(--mobile-ui-scale, 1))), 1fr)); }
/* Text editors retain iOS's 16 CSS px anti-zoom floor. */
.mobile-chat-compose-meta input, .mobile-chat-compose textarea {
  font-size: max(16px, calc(16px * var(--mobile-ui-scale, 1)));
}

/* A very short viewport cannot hold the arc with physical 32px hit targets.
   Reflow the same actions, preserving order and their input handlers. */
body.mobile-touch-floor #mobile-actions {
  width: auto; height: auto; display: grid; grid-template-columns: repeat(5, 32px);
  gap: 3px; right: var(--mobile-right-gap); pointer-events: none;
}
body.mobile-touch-floor :is(#mobile-slot-grid, #mobile-utility-actions) { display: contents; }
body.mobile-touch-floor #mobile-actions :is(.mobile-key, .mobile-slot) {
  position: relative; inset: auto; width: 32px; height: 32px; min-width: 32px; min-height: 32px;
}
/* The compact layout reserves the left column above the joystick for tips. */
body.mobile-touch-floor #mobile-side-toggle { top: var(--mobile-safe-top, 0px); }
body.mobile-touch-floor #mobile-activity-toggle { top: calc(var(--mobile-safe-top, 0px) + 32px); }
body.mobile-touch-floor #mobile-training-hud { top: calc(var(--mobile-safe-top, 0px) + 64px); }
body.mobile-touch-floor #mobile-chat-summary {
  top: var(--mobile-safe-top, 0px) !important;
  left: calc(var(--mobile-safe-left, 0px) + 48px);
}
/* Resolve the touch floor in the transformed region, not at :root. */
#mobile-actions { --mobile-layout-key-size: max(var(--mobile-key-size), calc(var(--mobile-touch-min, 32px) / .9)); }
body.mobile-touch-floor #mobile-actions #mobile-utility-actions .mobile-key { position: relative; inset: auto; }


/* Original HUD materials. All lengths remain in E2 design units; the physical
 * touch floor and saved region transforms remain owned by the existing rules. */
:root{--mobile-original-font:SimSun,"宋体","Songti SC",serif;--mobile-original-text:#eff4ff;--mobile-original-button-text:#fcf49c;--mobile-original-line:#514c48}
:is(.mobile-pad,.mobile-dialog,#mobile-system-menu,#mobile-top-launcher,#mobile-top-menu,#mobile-status-bar,#mobile-status-detail,#mobile-chat-summary,#mobile-chat-preview,#mobile-chat-panel,#mobile-activity-toggle,#mobile-activity-dialog,#mobile-side-toggle,#mobile-training-hud,#mobile-notice-hud,#mobile-notice-history,#mobile-broadcast-hud,#mobile-broadcast-history,#mobile-layout-editor){font-family:var(--mobile-original-font);color:var(--mobile-original-text)}
/* Real ShortcutColumnPaneCell/PetSkillShortcutColumnCellF backgrounds, not recolored icons. */
#mobile-actions :is(.mobile-key,.mobile-slot),#mobile-joystick-thumb{--mobile-slot-image:url("mobile-ui/native-ui/shortcut-slot.png");--mobile-slot-over:url("mobile-ui/native-ui/shortcut-slot-over.png");--mobile-slot-down:url("mobile-ui/native-ui/shortcut-slot-down.png");--mobile-slot-disabled:url("mobile-ui/native-ui/shortcut-slot-disabled.png")}
#mobile-actions .mobile-pet-slot{--mobile-slot-image:url("mobile-ui/native-ui/pet-slot.png");--mobile-slot-over:url("mobile-ui/native-ui/pet-slot-over.png");--mobile-slot-down:url("mobile-ui/native-ui/pet-slot-down.png");--mobile-slot-disabled:url("mobile-ui/native-ui/pet-slot-disabled.png")}
#mobile-actions :is(.mobile-key,.mobile-slot),#mobile-actions .mobile-key[data-action="attack"]{border:0;border-radius:0;background:transparent;box-shadow:none;color:#fcf49c;font-family:var(--mobile-original-font);font-weight:normal;filter:none;text-shadow:0 0 calc(1px * var(--mobile-ui-scale,1)) #682300}
#mobile-actions .mobile-key::before,.mobile-slot::before{inset:0;border:0;border-radius:0;pointer-events:none;opacity:1;background:var(--mobile-slot-image) center/100% 100% no-repeat}
@media(hover:hover){#mobile-actions :is(.mobile-key,.mobile-slot):hover:not(:disabled)::before{background-image:var(--mobile-slot-over)}}
#mobile-actions :is(.mobile-key,.mobile-slot).is-pressed::before,#mobile-actions :is(.mobile-key,.mobile-slot):active:not(:disabled)::before{background-image:var(--mobile-slot-down)}
#mobile-actions :is(.mobile-key,.mobile-slot):disabled::before{background-image:var(--mobile-slot-disabled)}
#mobile-actions :is(.mobile-key,.mobile-slot):disabled{color:#939393;filter:none;opacity:1}
.mobile-slot.is-pressed,#mobile-actions .mobile-key.is-pressed,#mobile-actions .mobile-key.is-active{filter:none;box-shadow:none;border:0;background:transparent}
#mobile-actions .mobile-key>span,#mobile-actions .mobile-key[data-action="attack"]>span,.slot-name,.slot-count{font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1))}
/* Original 46px SkillCellSelectedGridF over a 40px shortcut. Static, noninteractive. */
.mobile-slot.is-skill-selected::after,.mobile-pet-slot.is-pet-selected::after,#mobile-actions .mobile-key.is-active::after{content:"";position:absolute;inset:-7.5%;z-index:3;pointer-events:none;border:0;border-radius:0;background:url("mobile-ui/native-ui/skill-selection.png") center/100% 100% no-repeat}
.slot-cooldown{background:#000c;color:#fff;font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));box-shadow:none}
/* The joystick keeps its original pointer algorithm and thumb transform.
 * MGrid provides the outer material; the native shortcut provides the thumb. */
/* Round pad/thumb retain the same original textures and gold direction cues.
 * Only their skins are rounded; do not clip the travelling thumb or change input geometry. */
#mobile-movement:not(.is-arrows){isolation:isolate;border:0;border-radius:50%;background:transparent;box-shadow:none}
#mobile-movement:not(.is-arrows)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-sizing:border-box;border:calc(2px * var(--mobile-ui-scale,1)) solid #514c48;border-radius:50%;background:url("battle-pass-assets/native-ui/item-slot.png") center/100% 100% no-repeat;box-shadow:inset 0 0 0 calc(1px * var(--mobile-ui-scale,1)) #b39358}
#mobile-joystick-thumb{border:0;border-radius:50%;background:transparent;box-shadow:none;color:#fcf49c}
#mobile-joystick-thumb::before{inset:0;box-sizing:border-box;border:calc(1px * var(--mobile-ui-scale,1)) solid #b39358;border-radius:50%;background:var(--mobile-slot-image) center/100% 100% no-repeat;filter:none}
#mobile-movement.is-pressed #mobile-joystick-thumb::before{background-image:var(--mobile-slot-down)}
.joystick-direction{color:#fcf49c}
#mobile-movement .mobile-direction{border:0;border-radius:0;background:url("mobile-ui/native-map-button-up.png") center/100% 100% no-repeat;box-shadow:none;color:#fcf49c}
#mobile-movement .mobile-direction.is-pressed{background-image:url("mobile-ui/native-map-button-down.png");border:0;box-shadow:none;color:#acadb2}
/* Original normal/selected button skin: transparent hit area can exceed its
 * 22-unit visual strip. Only these scoped controls receive button pseudos. */
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-notice-history,#mobile-broadcast-history,#mobile-status-detail,#mobile-layout-editor) button,
:where(#view-tools-panel) .mobile-key,.training-speed{--mobile-button-image:url("battle-pass-assets/native-ui/button.png");--mobile-button-over:url("battle-pass-assets/native-ui/button-over.png");--mobile-button-down:url("battle-pass-assets/native-ui/button-down.png");--mobile-button-disabled:url("battle-pass-assets/native-ui/button-disabled.png");--mobile-button-slice:7.15 7.3 7 7.15 fill;--mobile-button-edge:calc(7.15px * var(--mobile-ui-scale,1)) calc(7.3px * var(--mobile-ui-scale,1)) calc(7px * var(--mobile-ui-scale,1)) calc(7.15px * var(--mobile-ui-scale,1));position:relative;isolation:isolate;border-color:transparent;border-radius:0;background:transparent;box-shadow:none;color:#fcf49c;font-family:var(--mobile-original-font);font-weight:normal;filter:none;text-shadow:0 0 calc(1px * var(--mobile-ui-scale,1)) #682300}
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-notice-history,#mobile-broadcast-history,#mobile-status-detail,#mobile-layout-editor) button::before,
:where(#view-tools-panel) .mobile-key::before,.training-speed::before{content:"";position:absolute;left:0;right:0;top:50%;height:calc(22px * var(--mobile-ui-scale,1));transform:translateY(-50%);z-index:-1;pointer-events:none;box-sizing:border-box;border:solid transparent;border-width:var(--mobile-button-edge);border-image-source:var(--mobile-button-image);border-image-slice:var(--mobile-button-slice);border-image-width:var(--mobile-button-edge);border-image-repeat:stretch}
@media(hover:hover){:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-notice-history,#mobile-broadcast-history,#mobile-status-detail,#mobile-layout-editor) button:hover:not(:disabled)::before,.training-speed:hover:not(:disabled)::before{border-image-source:var(--mobile-button-over)}}
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-notice-history,#mobile-broadcast-history,#mobile-status-detail,#mobile-layout-editor) button:active:not(:disabled)::before,.training-speed:active:not(:disabled)::before{border-image-source:var(--mobile-button-down)}
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-notice-history,#mobile-broadcast-history,#mobile-status-detail,#mobile-layout-editor) button:disabled::before,.training-speed:disabled::before{border-image-source:var(--mobile-button-disabled)}
/* Original selected skins, including tabs; RGB transforms are applied to images only. */
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-layout-editor) button:is([aria-pressed="true"],[aria-selected="true"],.is-selected),.mobile-chat-send{--mobile-button-image:url("battle-pass-assets/native-ui/button-selected.png");--mobile-button-over:url("battle-pass-assets/native-ui/button-selected-over.png");--mobile-button-down:url("battle-pass-assets/native-ui/button-selected-down.png");--mobile-button-disabled:url("battle-pass-assets/native-ui/button-selected-disabled.png");--mobile-button-slice:6.75 8.55 5.5 9.6 fill;--mobile-button-edge:calc(6.75px * var(--mobile-ui-scale,1)) calc(8.55px * var(--mobile-ui-scale,1)) calc(5.5px * var(--mobile-ui-scale,1)) calc(9.6px * var(--mobile-ui-scale,1))}
:where(.top-menu-tabs,.mobile-chat-tabs) button{--mobile-button-image:url("battle-pass-assets/native-ui/tab.png");--mobile-button-over:url("battle-pass-assets/native-ui/tab-over.png");--mobile-button-down:url("battle-pass-assets/native-ui/tab-down.png");--mobile-button-disabled:url("battle-pass-assets/native-ui/tab-disabled.png");--mobile-button-slice:7.5 7 4.75 7.25 fill;--mobile-button-edge:calc(7.5px * var(--mobile-ui-scale,1)) calc(7px * var(--mobile-ui-scale,1)) calc(4.75px * var(--mobile-ui-scale,1)) calc(7.25px * var(--mobile-ui-scale,1))}
:where(.top-menu-tabs,.mobile-chat-tabs) button[aria-pressed="true"]{--mobile-button-image:url("battle-pass-assets/native-ui/tab-selected.png");--mobile-button-over:url("battle-pass-assets/native-ui/tab-selected-over.png");--mobile-button-down:url("battle-pass-assets/native-ui/tab-selected-down.png");--mobile-button-disabled:url("battle-pass-assets/native-ui/tab-selected-disabled.png");--mobile-button-slice:9 8.25 3.5 8.75 fill;--mobile-button-edge:calc(9px * var(--mobile-ui-scale,1)) calc(8.25px * var(--mobile-ui-scale,1)) calc(3.5px * var(--mobile-ui-scale,1)) calc(8.75px * var(--mobile-ui-scale,1))}
/* MWindowSmall_background pseudoborder leaves all original content bounds intact. */
:is(.mobile-dialog:not(.is-embedded),#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.mobile-chat-channel-options,.touch-layout-panel){isolation:isolate;border-color:transparent;border-radius:0;background:transparent;box-shadow:none;color:#eff4ff}
:is(.mobile-dialog:not(.is-embedded),#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.mobile-chat-channel-options,.touch-layout-panel)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-sizing:border-box;border:solid transparent;border-width:calc(25.75px * var(--mobile-ui-scale,1)) calc(52.05px * var(--mobile-ui-scale,1)) calc(18px * var(--mobile-ui-scale,1)) calc(49.5px * var(--mobile-ui-scale,1));border-image:url("battle-pass-assets/native-ui/small-window.png") 25.75 52.05 18 49.5 fill stretch}
:is(.mobile-dialog,#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.touch-layout-panel) header{background:transparent;border-color:transparent;box-shadow:none;color:#eff4ff}
:is(.mobile-dialog,#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.touch-layout-panel) :is(h2,header strong){font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));font-weight:bold;letter-spacing:0;color:#eff4ff;clip-path:none;background:transparent;text-shadow:0 0 calc(2px * var(--mobile-ui-scale,1)) #000}
/* Original close image, with a touch target independent of the 25x24 skin. */
:is([data-chat-close],[data-chat-preview-close],[data-activity-close],#mobile-top-menu header button,#mobile-status-detail header button,#mobile-broadcast-history header button,#mobile-notice-history header button:not([data-notice-reset])){font-size:0!important;color:transparent!important;border:0;background:transparent;padding:0;box-shadow:none;touch-action:manipulation}
:is([data-chat-close],[data-chat-preview-close],[data-activity-close],#mobile-top-menu header button,#mobile-status-detail header button,#mobile-broadcast-history header button,#mobile-notice-history header button:not([data-notice-reset]))::before{content:"";position:absolute;left:50%;right:auto;top:50%;transform:translate(-50%,-50%);width:calc(25px * var(--mobile-ui-scale,1));height:calc(24px * var(--mobile-ui-scale,1));border:0;background:url("battle-pass-assets/native-ui/close.png") center/100% 100% no-repeat}
:is([data-chat-close],[data-chat-preview-close],[data-activity-close],#mobile-top-menu header button,#mobile-status-detail header button,#mobile-broadcast-history header button,#mobile-notice-history header button:not([data-notice-reset])):active::before{background-image:url("battle-pass-assets/native-ui/close-down.png")}
#mobile-activity-dialog header button::after{content:none}
/* Real NumberBgF boolean unread badges; no invented red circles. */
.chat-summary-unread,.chat-preview-unread,#mobile-system-menu .has-unread::after,.mobile-chat-tabs button.has-unread::after{width:calc(13px * var(--mobile-ui-scale,1));height:calc(13px * var(--mobile-ui-scale,1));border:0;border-radius:0;background:url("battle-pass-assets/native-ui/red-dot.png") center/100% 100% no-repeat;box-shadow:none;pointer-events:none}
:is(#mobile-activity-toggle,.training-open){font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));font-weight:normal;line-height:calc(16px * var(--mobile-ui-scale,1));text-shadow:0 0 calc(1px * var(--mobile-ui-scale,1)) #000}
#mobile-activity-toggle{color:#1e90ff}
.training-open{color:#00ff00}
.training-open:disabled{color:#939393}
.activity-expand{border:0;border-radius:0;background:transparent;color:#fcf49c}
:is(.activity-name,.activity-caption,.activity-time,.notice-caption,.broadcast-badge,.broadcast-count,.broadcast-arrow,.mobile-chat-preview-header,#mobile-chat-preview footer){font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));color:#fcf49c}
:is(.activity-list,.mobile-chat-history,.mobile-chat-face-picker,.slot-config-candidates){border-color:#514c48;border-radius:0;background:#292622;box-shadow:none}
:is(.mobile-chat-line,.broadcast-history-item,.notice-history-list p){font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));color:#eff4ff}
:is(.mobile-chat-channel-options button i,.mobile-portal-options i){border-radius:0;box-shadow:none}
:is(#mobile-system-menu [data-menu-action],.top-menu-grid button,.mobile-status-icon){border-radius:0;box-shadow:none;filter:none;font-family:var(--mobile-original-font);color:#fcf49c}
:is(#mobile-system-menu [data-menu-action],.top-menu-grid button):disabled{opacity:1;color:#939393}
/* The original notice/broadcast text is the decoration; no invented banner. */
#mobile-broadcast-hud{border:0;border-radius:0;background:transparent;box-shadow:none;font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));color:#ffff00}
#mobile-notice-hud{font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1));color:#fcf49c}
:is(#mobile-chat-summary,#mobile-side-toggle,.mobile-status-toggle,#mobile-top-launcher button){color:#fcf49c;font-family:var(--mobile-original-font);font-size:calc(12px * var(--mobile-ui-scale,1))}
/* Keep the E2 physical editor exception; changing font family must not shrink it. */
.mobile-chat-compose-meta input,.mobile-chat-compose textarea{font-family:var(--mobile-original-font);font-size:max(16px,calc(16px * var(--mobile-ui-scale,1)))}

/* Disabled skin/caption belongs to the control, not to its authentic icon. */
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-notice-history,#mobile-broadcast-history,#mobile-status-detail,#mobile-layout-editor) button:disabled{opacity:1;filter:none;color:#939393}

.mobile-dialog.is-embedded::before{content:none}
@media(hover:hover){:is([data-chat-close],[data-chat-preview-close],[data-activity-close],#mobile-top-menu header button,#mobile-status-detail header button,#mobile-broadcast-history header button,#mobile-notice-history header button:not([data-notice-reset])):hover:not(:disabled)::before{background-image:url("battle-pass-assets/native-ui/close-over.png")}}
:is([data-chat-close],[data-chat-preview-close],[data-activity-close],#mobile-top-menu header button,#mobile-status-detail header button,#mobile-broadcast-history header button,#mobile-notice-history header button:not([data-notice-reset])):disabled::before{background-image:url("battle-pass-assets/native-ui/close-disabled.png")}


/* U3: center crops reuse only the original ShortcutColumn/Pet textures. The
 * 220% crop excludes their internal square frame, not just its outer corners.
 * Keep pad/arc coordinates and the travelling thumb's parent unclipped. */
#mobile-actions :is(.mobile-key,.mobile-slot),#mobile-joystick-thumb {
  border-radius:50%; clip-path:ellipse(50% 50% at 50% 50%); overflow:hidden;
}
#mobile-actions :is(.mobile-key,.mobile-slot)::before,#mobile-joystick-thumb::before {
  inset:0; border:calc(1px * var(--mobile-ui-scale,1)) solid #b39358;
  border-radius:50%; box-sizing:border-box; background-size:220% 220%;
  box-shadow:inset 0 0 0 calc(1px * var(--mobile-ui-scale,1)) #514c48;
}
#mobile-actions :is(.mobile-key,.mobile-slot)::after {
  inset:0; border:calc(2px * var(--mobile-ui-scale,1)) solid #ffdc7d;
  border-radius:50%; box-sizing:border-box; background:none; pointer-events:none;
}
#mobile-actions .slot-cooldown {
  inset:0; border-radius:50%; clip-path:circle(50%); background:#000c;
  /* A circular remaining-time mask, not an invented total-duration fraction. */
}
#mobile-actions .slot-count {right:13%;bottom:7%}
/* Physical hit floors do not shrink with short-edge/360 or saved preferences.
 * Only the original map-button image is visually reduced inside the target. */
:is(.mobile-status-toggle,#mobile-side-toggle) {
  width:max(32px,calc(32px * var(--mobile-ui-scale,1)));
  height:max(32px,calc(32px * var(--mobile-ui-scale,1)));
  min-width:32px;min-height:32px;padding:0;box-sizing:border-box;
}
:is(.mobile-status-toggle,#mobile-side-toggle)::before {
  inset:auto;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
  width:calc(20px * var(--mobile-ui-scale,1));height:calc(20px * var(--mobile-ui-scale,1));
}
/* U3 A (default): original task-tracker-like translucent strips. B reuses
 * MButtonF's existing nine-slice; hysjMobileEventSkin('task'|'window') changes
 * display only for comparison screenshots, never activities or countdowns. */
#mobile-activity-toggle,.training-open {
  background:#151a20b8;border-radius:0;padding:0 calc(5px * var(--mobile-ui-scale,1));
  text-shadow:calc(-1px * var(--mobile-ui-scale,1)) 0 #000,calc(1px * var(--mobile-ui-scale,1)) 0 #000,
    0 calc(-1px * var(--mobile-ui-scale,1)) #000,0 calc(1px * var(--mobile-ui-scale,1)) #000;
}
:root[data-mobile-event-skin="window"] :is(#mobile-activity-toggle,.training-open) {
  border:solid transparent;border-width:calc(7px * var(--mobile-ui-scale,1));
  border-image:url("battle-pass-assets/native-ui/button.png") 7.15 7.3 7 7.15 fill stretch;
  background:transparent;padding:0;
}
/* U6: titles are centered in the actual panel, independent of left/right
 * close/reset controls. Native 12-unit bold Songti and four-way black stroke. */
:is(.mobile-dialog:not(.is-embedded),#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.touch-layout-panel,#mobile-slot-settings:not(.is-embedded)) > header {
  position:static;box-sizing:border-box;min-height:calc(25px * var(--mobile-ui-scale,1));
  padding-left:0;padding-right:0;
}
:is(.mobile-dialog:not(.is-embedded),#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.touch-layout-panel,#mobile-slot-settings:not(.is-embedded)) > header > :is(h2,strong),
#mobile-chat-preview > header > span:first-child {
  position:absolute;left:50%;top:calc(6px * var(--mobile-ui-scale,1));transform:translateX(-50%);
  max-width:calc(100% - calc(100px * var(--mobile-ui-scale,1)));margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  text-align:center;font:700 calc(12px * var(--mobile-ui-scale,1))/calc(16px * var(--mobile-ui-scale,1)) var(--mobile-original-font);
  letter-spacing:0;color:#eff4ff;
  text-shadow:calc(-1px * var(--mobile-ui-scale,1)) 0 #000,calc(1px * var(--mobile-ui-scale,1)) 0 #000,
    0 calc(-1px * var(--mobile-ui-scale,1)) #000,0 calc(1px * var(--mobile-ui-scale,1)) #000;
}
:is(.mobile-dialog:not(.is-embedded),#mobile-top-menu,#mobile-chat-preview,#mobile-chat-panel,#mobile-status-detail,.touch-layout-panel,#mobile-slot-settings:not(.is-embedded)) > header > button:last-child {
  position:absolute;right:calc(4px * var(--mobile-ui-scale,1));top:0;margin:0;
}
#mobile-notice-history header [data-notice-reset] {position:relative;margin-left:0;z-index:1}
#mobile-chat-preview .chat-preview-unread {position:absolute;left:calc(50% + calc(18px * var(--mobile-ui-scale,1)));top:calc(5px * var(--mobile-ui-scale,1))}
.mobile-view-title {flex:0 0 100%;display:block;text-align:center;color:#eff4ff;
  font:700 calc(12px * var(--mobile-ui-scale,1))/calc(18px * var(--mobile-ui-scale,1)) var(--mobile-original-font);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}

/* Preserve task-strip contrast through the original interaction states. */
:root:not([data-mobile-event-skin="window"]) #mobile-activity-toggle:is(:hover,:focus,:active){background:#151a20b8}

/* Attack and selected-state rules have their own original higher specificity. */
#mobile-actions .mobile-key[data-action="attack"]{border-radius:50%}
#mobile-actions :is(.mobile-key,.mobile-slot):is(.is-active,.is-skill-selected,.is-pet-selected)::after{
  inset:0;border:calc(2px * var(--mobile-ui-scale,1)) solid #ffdc7d;
  border-radius:50%;box-sizing:border-box;background:none;pointer-events:none;
}

/* V5: one physical small-button metric and original map-button skin. */
body.mobile-game-active button:is(.mobile-status-toggle,#mobile-side-toggle,#mobile-chat-summary) {
  width:var(--hysj-ui-button-small,32px);height:var(--hysj-ui-button-small,32px);
  min-width:var(--hysj-ui-button-small,32px);min-height:var(--hysj-ui-button-small,32px);
  padding:0;box-sizing:border-box;align-items:center;justify-content:center;
}
body.mobile-game-active button:is(.mobile-status-toggle,#mobile-side-toggle,#mobile-chat-summary)::before {
  inset:0;transform:none;width:auto;height:auto;
}
body.mobile-game-active button:is(.mobile-status-toggle,#mobile-side-toggle,#mobile-chat-summary) svg {
  width:12px;height:12px;stroke-width:1.4;
}
#mobile-chat-summary .chat-summary-mic {width:12px;height:12px}
#mobile-actions .mobile-slot.is-empty {opacity:.4}
#mobile-actions .mobile-slot.is-empty::before {opacity:1}
body.mobile-hide-empty-slots #mobile-actions .mobile-slot.is-empty {visibility:hidden;pointer-events:none}
body.mobile-layout-editing #mobile-actions .mobile-slot.is-empty {visibility:visible;pointer-events:auto}
/* Target half embeds at attack's upper right; paint and hit testing favour target.
 * Only this named pair may intersect. Other skills retain disjoint circular hits. */
body:not(.mobile-touch-floor) #mobile-utility-actions [data-action="target"] {
  right:calc(var(--mobile-layout-key-size) * 1.15 - var(--mobile-key-size) * 1.15);
  bottom:calc(var(--mobile-key-size) * .95);z-index:10;border-radius:50%;
}
:where(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-layout-editor) button {
  white-space:nowrap;font-size:var(--hysj-ui-font-body,12px);
}

/* V2 custom windows use the same safe-height bands as native windows.
 * Keyboard compose is deliberately inset above the keyboard, not scaled. */
@media (pointer:coarse) {
 body.mobile-game-active :is([data-ui-window-tier="large"],[data-ui-window-tier="medium"],[data-ui-window-tier="small"]):not(.is-embedded):not([hidden]) {
   --hysj-safe-height:calc(100svh - var(--mobile-safe-top,0px) - var(--mobile-safe-bottom,0px));
   box-sizing:border-box;max-height:calc(var(--hysj-safe-height) * .92);
   font-size:var(--hysj-ui-font-body,12px);
 }
 body.mobile-game-active :is(#mobile-settings,#mobile-slot-settings,#mobile-activity-dialog):not(.is-embedded) {height:calc(var(--hysj-safe-height) * .88)}
 body.mobile-game-active :is(#mobile-top-menu,#mobile-status-detail) {height:calc(var(--hysj-safe-height) * .70);overflow:auto}
 body.mobile-game-active #mobile-chat-preview {height:calc(var(--hysj-safe-height) * .50);overflow:hidden}
 body.mobile-game-active #mobile-chat-panel {top:calc(var(--mobile-safe-top,0px) + var(--hysj-safe-height) * .15);bottom:auto;height:calc(var(--hysj-safe-height) * .70)}
 body.mobile-keyboard-open #mobile-chat-panel {top:var(--mobile-chat-viewport-top,0px);bottom:var(--mobile-chat-keyboard-inset,0px);height:auto}
 body.mobile-game-active :is(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-status-detail) button {
   min-height:var(--hysj-ui-button-small,32px);min-width:var(--hysj-ui-button-small,32px);
   font-size:var(--hysj-ui-font-body,12px);white-space:nowrap;
 }
}

@media (pointer:coarse) {
 body.mobile-game-active :is(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-status-detail) :is(p,label,li,small) {font-size:var(--hysj-ui-font-body,12px)}
 body.mobile-game-active :is(.mobile-dialog,#mobile-top-menu,#mobile-chat-panel,#mobile-chat-preview,#mobile-status-detail) > header > :is(h2,strong) {font-size:var(--hysj-ui-font-title,14px)}
}

@media(pointer:coarse){body.mobile-game-active #mobile-chat-preview > header > span:first-child {font-size:var(--hysj-ui-font-title,14px)}}

@media(pointer:coarse){
 body.mobile-game-active #mobile-chat-panel {
   left:var(--mobile-safe-left,0px);
   width:calc((100vw - var(--mobile-safe-left,0px) - var(--mobile-safe-right,0px)) * .5);
   padding-left:var(--hysj-ui-space-large,8px);padding-right:var(--hysj-ui-space-large,8px);
 }
 body.mobile-keyboard-open #mobile-chat-panel {top:max(var(--mobile-safe-top,0px),var(--mobile-chat-viewport-top,0px))}
}

/* Round4: original activity icons have no generic gold button pedestal. */
:is(#mobile-top-menu,#bp-activity-panel) .top-menu-grid > button {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:32px 18px;
  align-content:center;justify-items:center;gap:4px;min-width:0;width:100%;
  padding:4px 2px;border:0;background:transparent;box-shadow:none;
}
:is(#mobile-top-menu,#bp-activity-panel) .top-menu-grid > button::before {
  content:none!important;display:none!important;border-image:none!important;background:none!important;
}
:is(#mobile-top-menu,#bp-activity-panel) .top-menu-grid > button > :is(.top-entry-name,span:not(.bp-red-dot):not(.top-entry-fallback)) {
  display:block;box-sizing:border-box;min-width:0;max-width:100%;width:100%;
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
  font-size:clamp(11px,calc(12px * var(--mobile-ui-scale,1)),12px);line-height:18px;
}
#mobile-top-menu,#bp-activity-panel {background-color:#292622}
[data-ui-drag-handle="true"] {touch-action:none;cursor:move;user-select:none}
/* Only the three editable touch regions share this opacity, once per root. */
:is(#mobile-movement,#mobile-actions,#mobile-system-menu) {
  opacity:var(--mobile-key-opacity,1);
}
#mobile-movement.is-pressed {opacity:var(--mobile-key-opacity,1)}