:root { --mobile-key-base: 40px; --mobile-key-size: 40px; --mobile-key-opacity: .78;
  --mobile-left-gap: 24px; --mobile-right-gap: 24px; --mobile-bottom-gap: 20px; }
body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
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: calc(env(safe-area-inset-left, 0px) + var(--mobile-left-gap));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-gap));
  border-radius: 50%; border: 2px solid #c9c8b966;
  background: radial-gradient(circle, #151c2090 0 42%, #d1d5ce22 44% 64%, #252c333a 66%);
  box-shadow: inset 0 0 0 6px #dde2d412, inset 0 0 0 9px #1b242233, 0 2px 8px #0003;
  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: 2px solid #cfcec5;
  border-radius: 50%; background: linear-gradient(140deg, #cbc9c3, #8d8c88);
  color: #626461; box-shadow: 0 3px 7px #0008, inset 0 1px 5px #fff8;
  transform: translate(calc(-50% + var(--stick-x)), calc(-50% + var(--stick-y)));
  pointer-events: none;
}
#mobile-joystick-thumb svg { display: block; width: 100%; height: 100%; }
#mobile-joystick-thumb { isolation: isolate; }
#mobile-joystick-thumb::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
  background: url('/mobile-ui/button-plate.png') center / 106% 106% no-repeat; filter: grayscale(1); }
.joystick-direction { position: absolute; color: #d7dcd3b3; font-size: 13px; pointer-events: none; }
.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-actions {
  position: fixed; z-index: 5; right: calc(env(safe-area-inset-right, 0px) + var(--mobile-right-gap));
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-bottom-gap)); display: block;
  width: calc(var(--mobile-key-size) * 6.1);
  height: calc(var(--mobile-key-size) * 5.3);
  opacity: var(--mobile-key-opacity);
  pointer-events: none;
}
#mobile-actions button { pointer-events: auto; }
#mobile-actions[hidden], #mobile-movement[hidden], .mobile-pad[hidden] { display: none !important; }
#mobile-slot-grid { position: absolute; inset: 0; }
#mobile-slot-grid .mobile-slot { position: absolute; right: calc(var(--mobile-key-size) * var(--slot-right));
  bottom: calc(var(--mobile-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-key-size) * 3.4); bottom: calc(var(--mobile-key-size) * .3); }
#mobile-utility-actions [data-action="target"] { right: calc(var(--mobile-key-size) * .95); bottom: calc(var(--mobile-key-size) * .3); z-index: 2; }
#mobile-utility-actions [data-action="meditate"] { right: calc(var(--mobile-key-size) * 5.36); bottom: calc(var(--mobile-key-size) * .3); }
#mobile-utility-actions [data-action="summon"] { right: calc(var(--mobile-key-size) * 4.38); bottom: calc(var(--mobile-key-size) * .3); }
.mobile-key {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 44px; min-height: 44px; padding: 2px; border: 1px solid #b998618c;
  border-radius: 14px; color: #f7e9ca; background: #1c1a17e8;
  font: 600 13px "Microsoft YaHei", sans-serif; line-height: 1.25;
  box-shadow: 0 2px 8px #0008; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.mobile-key small { color: #ccba98; font-size: 10px; font-weight: 400; margin-top: 2px; }
#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: 1px solid #c59b57;
  border-radius: 50%; color: #ffe3a6; background: radial-gradient(circle at 38% 28%, #50402e, #181718 75%);
  box-shadow: 0 0 0 1px #171818, inset 0 0 0 2px #edcd8773, 0 3px 5px #0009;
  touch-action: none; -webkit-tap-highlight-color: transparent; font-family: "Microsoft YaHei", sans-serif;
  text-shadow: 0 1px 2px #000, 1px 0 2px #000;
}
#mobile-actions .mobile-key::before, .mobile-slot::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
  background: url('/mobile-ui/button-plate.png') center / 106% 106% no-repeat;
}
#mobile-actions .mobile-key svg { width: 57%; height: 57%; margin-top: -8px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#mobile-actions .mobile-key > span { position: absolute; bottom: 2px; font-size: 9px; 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: 0 0 0 2px #74d994, 0 0 9px #58eb8e80; }
#mobile-actions .mobile-key[data-action="attack"] {
  position: absolute; right: calc(var(--mobile-key-size) * 1.5); bottom: 0;
  width: calc(var(--mobile-key-size) * 1.6); height: calc(var(--mobile-key-size) * 1.6);
  border-color: #e9b668; box-shadow: 0 0 0 3px #39291c, 0 0 0 5px #bda170, 0 4px 10px #0009;
}
#mobile-actions .mobile-key[data-action="attack"] svg { width: 64%; height: 64%; color: #f8d48a; }
#mobile-actions .mobile-key[data-action="attack"] > span { bottom: 6px; font-size: 14px; }
.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: 3px; }
.mobile-slot canvas { position: absolute; inset: 13%; width: 74%; height: 74%; border-radius: 50%; display: none; }
.mobile-slot.has-icon canvas { display: block; }
.slot-placeholder { color: #b3a17a; font-size: 26px; line-height: 1; font-weight: 400; }
.mobile-slot:not(.is-empty) .slot-placeholder { display: none; }
.slot-name { font-size: 10px; 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: 12px; font-weight: 700; color: #fff; }
.slot-cooldown { display: none; position: absolute; inset: 8%; border-radius: 50%; z-index: 2;
  align-items: center; justify-content: center; background: #071221a6; font-size: 13px; font-weight: 700; color: #fff2c9; }
.mobile-slot.is-cooling .slot-cooldown { display: flex; }
.mobile-slot:disabled { cursor: default; }
.mobile-slot.is-empty::before { opacity: .65; }
.mobile-slot.is-empty { color: #9d937e; }
.mobile-slot.is-pressed, #mobile-actions .mobile-key.is-pressed {
  filter: brightness(1.35); box-shadow: 0 0 0 2px #fff0bd, 0 0 12px #edb7479c;
}
.mobile-key.is-pressed, #mobile-movement .is-pressed {
  background: #bf8c39; color: #fff; border-color: #ffde9d;
}
#mobile-view-tools { right: calc(env(safe-area-inset-right, 0px) + var(--mobile-right-gap));
  top: calc(env(safe-area-inset-top, 0px) + 16px); max-width: min(460px, calc(100vw - 48px)); }
#view-tools-panel { max-height: min(65dvh, 300px); overflow-y: auto; }
#view-tools-panel .mobile-key { padding: 5px 8px; }
#mobile-shortcuts { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
#mobile-feedback {
  position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 9px 16px;
  border: 1px solid #a68a5380; border-radius: 22px; color: #ffeac4; background: #181715ed;
  font-size: 13px; text-align: center; pointer-events: none;
}
#mobile-feedback[hidden] { display: none; }
.mobile-dialog {
  position: fixed; z-index: 25; width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto; padding: 20px; color: #eee; border: 1px solid #8c6b39;
  border-radius: 14px; background: #211e1a; font: 14px "Microsoft YaHei", sans-serif;
}
.mobile-dialog::backdrop { background: #000b; }
.mobile-dialog header { display: flex; align-items: center; gap: 12px; }
.mobile-dialog h2 { margin: 0; flex: 1; font-size: 20px; color: #f0c978; }
.mobile-dialog header button { flex: none; min-width: 44px; min-height: 44px; }
.mobile-dialog label { margin-top: 12px; font-size: 13px; }
.mobile-dialog select {
  width: 100%; min-height: 44px; padding: 6px 10px; color: #fff; background: #151413;
  border: 1px solid #514a40; border-radius: 6px; font-size: 16px;
}
.mobile-dialog input[type="range"] { padding: 0; min-height: 28px; accent-color: #d9ad54; }
.mobile-key-mappings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.mobile-dialog .buttons { flex-wrap: wrap; }
.mobile-dialog .buttons button { min-height: 44px; }
body.mobile-keyboard-open .mobile-pad { display: none !important; }
body.mobile-keyboard-open #pan-handle { display: none !important; }
#orientation-hint button { margin-top: 16px; min-height: 44px; }
@media (max-height: 420px) {
  :root { --mobile-key-base: 36px; --mobile-key-size: 36px; }
  .mobile-dialog { padding: 12px 18px; }
  #login { padding: 16px 24px; }
  #login h1 { font-size: 21px; }
  #login label { margin-top: 10px; }
}
@media (max-width: 480px) { .mobile-key-mappings { grid-template-columns: repeat(2, 1fr); } }
#mobile-hud-dock { display: none !important; }
#mobile-chat-summary { position: fixed; z-index: 7; left: env(safe-area-inset-left, 0px);
  top: calc(env(safe-area-inset-top, 0px) + var(--chat-entry-top, 180px)); width: 22px; min-width: 22px; min-height: 20px; height: 20px;
  display: grid; place-items: center; padding: 0 10px 0 0; overflow: visible; color: #dbc68f;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mobile-chat-summary::before { content: ""; position: absolute; inset: 4px 10px 4px 0; border: 1px solid #8f7653;
  border-radius: 0 3px 3px 0; background: linear-gradient(#5e574a, #2d2820); }
#mobile-chat-summary[hidden] { display: none !important; }
.chat-summary-mic { position: relative; display: grid; place-items: center; width: 10px; height: 10px; color: currentColor; }
.chat-summary-mic svg { display: block; width: 10px; height: 10px; overflow: visible; }
.chat-summary-unread { position: absolute; top: 0; right: 0; width: 8px; height: 8px; border: 1px solid #291a12;
  border-radius: 50%; background: #ff403b; box-shadow: 0 0 3px #ff403b80; }
.chat-summary-unread[hidden] { display: none !important; }
#mobile-chat-preview { position: fixed; z-index: 7; left: calc(env(safe-area-inset-left, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + var(--chat-entry-top, 180px)); width: min(205px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 2px; padding: 3px 6px 4px; color: #eee2c7;
  border: 1px solid #8e724c99; border-radius: 4px; background: #211a14b8; box-shadow: 0 1px 3px #0006;
  font: 10px/15px "Microsoft YaHei", sans-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: 5px; min-height: 16px; color: #d6bd88; font-size: 10px; }
.mobile-chat-preview-header button { display: grid; flex: none; place-items: center; width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin-left: auto; padding: 0; color: #dac797; border: 1px solid #806747; border-radius: 3px; background: #31271e; font-size: 14px; line-height: 12px; appearance: none; }
.chat-preview-unread { width: 6px; height: 6px; border-radius: 50%; background: #ff403b; box-shadow: 0 0 3px #ff403b80; }
.chat-preview-unread[hidden] { display: none !important; }
.mobile-chat-preview-messages { display: grid; gap: 1px; 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: 9px; line-height: 13px; }
#mobile-chat-panel { position: fixed; z-index: 26; left: calc(env(safe-area-inset-left, 0px) + 8px); right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px + var(--mobile-chat-keyboard-inset, 0px));
  width: min(520px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px)); max-width: 520px; height: min(50dvh, 310px); box-sizing: border-box; display: flex; flex-direction: column; gap: 4px;
  padding: 6px; color: #f4e7cb; border: 1px solid #a27d4d; border-radius: 7px;
  background: linear-gradient(180deg, #31261ddd, #151515f2); box-shadow: inset 0 0 0 2px #19130f, 0 3px 10px #0009;
  font: 12px "Microsoft YaHei", sans-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: 25px; padding: 0 3px 3px 7px;
  color: #f0d392; border-bottom: 1px solid #856543; background: linear-gradient(90deg, #59433080, transparent); }
.mobile-chat-header strong { font-size: 13px; font-weight: 500; }
.mobile-chat-header button { flex: none; width: 28px; height: 24px; min-height: 24px; padding: 0; color: #ffe7ae; border: 1px solid #a27a45;
  border-radius: 4px; background: linear-gradient(#a66f38, #58351d); font-size: 18px; line-height: 20px; }
.mobile-chat-tabs { display: flex; flex: none; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.mobile-chat-tabs button { flex: 1 0 auto; min-width: 38px; height: 24px; min-height: 24px; padding: 1px 5px; color: #dfd2b6;
  border: 1px solid #664d35; border-radius: 3px 3px 0 0; background: linear-gradient(#44382e, #211c18); font: 11px "Microsoft YaHei", sans-serif; }
.mobile-chat-tabs button.has-unread { position: relative; }
.mobile-chat-tabs button.has-unread::after { content: ""; position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #ff403b; }
.mobile-chat-tabs button[aria-pressed="true"] { color: #fff1c3; border-color: #d2a85e; background: linear-gradient(#c38d43, #72502b); }
.mobile-chat-history { min-height: 0; flex: 1 1 92px; overflow: auto; padding: 4px 7px; color: #e8dfcf; border: 1px solid #574434; border-radius: 3px;
  background: #110f0ddc; overscroll-behavior: contain; touch-action: pan-y; }
.mobile-chat-line { margin: 2px 0; overflow-wrap: anywhere; font: 12px/17px "Microsoft YaHei", sans-serif; }
.mobile-chat-line strong { color: #f0e2c6; font-weight: 400; }
.mobile-chat-form { position: relative; display: flex; flex: none; flex-direction: column; gap: 4px; }
.mobile-chat-compose-meta,.mobile-chat-compose { display: flex; align-items: center; gap: 4px; }
.mobile-chat-channel-picker { position: relative; flex: none; width: 72px; }
.mobile-chat-channel-toggle { display: flex; flex: none; align-items: center; justify-content: space-between; width: 72px; height: 27px; min-height: 27px; padding: 2px 6px;
  color: #f0e4cd; border: 1px solid #a27a45; border-radius: 4px; background: linear-gradient(#59432e, #211b16); font: 11px "Microsoft YaHei", sans-serif; appearance: none; touch-action: manipulation; }
.mobile-chat-channel-toggle svg { width: 10px; height: 10px; 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% + 5px); display: flex; flex-direction: column; width: 116px; max-height: min(180px, 48dvh); overflow: auto; padding: 3px;
  border: 1px solid #a27d4d; border-radius: 5px; background: linear-gradient(180deg, #382b20f5, #171310f7); box-shadow: inset 0 0 0 1px #19130f, 0 3px 9px #000b; }
.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: 31px; min-height: 31px; padding: 0 8px; color: #e7dcc5;
  border: 0; border-bottom: 1px solid #755a3b77; border-radius: 2px; background: transparent; font: 12px "Microsoft YaHei", sans-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: linear-gradient(90deg, #9b6a35a6, #60421f55); }
.mobile-chat-channel-options button:active,.mobile-chat-channel-options button:focus-visible { color: #fff2ce; outline: 1px solid #c39756; outline-offset: -1px; }
.mobile-chat-channel-options button i { width: 8px; height: 8px; border: 1px solid #b39461; border-radius: 50%; }
.mobile-chat-channel-options button[aria-selected="true"] i { border: 2px solid #f0c675; background: #d89536; box-shadow: 0 0 4px #e9b45e88; }
.mobile-chat-compose-meta input { min-width: 0; flex: 1; height: 27px; padding: 3px 7px; color: #f0e4cd; border: 1px solid #765b3d;
  border-radius: 4px; background: #110f0d; font: 12px "Microsoft YaHei", sans-serif; }
.mobile-chat-compose-meta input[hidden] { display: none; }
.mobile-chat-compose textarea { min-width: 0; flex: 1; height: 30px; min-height: 30px; max-height: 56px; resize: none; padding: 6px 8px;
  color: #f4e7cb; border: 1px solid #806344; border-radius: 4px; background: #110f0d; font: 13px/17px "Microsoft YaHei", sans-serif; }
.mobile-chat-face-toggle,.mobile-chat-send { flex: none; height: 30px; min-height: 30px; padding: 2px 8px; color: #ffe3a0; border: 1px solid #a9824f;
  border-radius: 4px; background: linear-gradient(#805c32, #3b2919); touch-action: manipulation; }
.mobile-chat-face-toggle { width: 32px; padding: 0; font-size: 20px; }
.mobile-chat-send { min-width: 48px; color: #fff2d4; background: linear-gradient(#c78036, #793c1d); }
.mobile-chat-face-picker { display: grid; grid-template-columns: repeat(9, minmax(24px, 1fr)); gap: 2px; max-height: 92px; overflow: auto; padding: 4px;
  border: 1px solid #765839; border-radius: 4px; background: #171310; }
.mobile-chat-face-picker[hidden] { display: none; }
.mobile-chat-face-picker button { display: grid; place-items: center; min-width: 24px; height: 26px; min-height: 26px; padding: 1px; border: 1px solid #57442f; border-radius: 3px; background: #28211a; }
.mobile-chat-face-picker canvas { width: 22px; height: 22px; image-rendering: auto; }
.mobile-chat-form [data-chat-status] { min-height: 0; margin: 0; color: #f1b47b; font-size: 10px; }
.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-game-window-open #mobile-chat-summary,body.mobile-game-window-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; }
body.mobile-chat-open .mobile-pad,body.mobile-chat-open #pan-handle { display: none !important; }
#mobile-activity-toggle {
  position: fixed; z-index: 6; left: calc(env(safe-area-inset-left, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + var(--activity-top, 76px));
  width: max-content; max-width: min(180px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 16px));
  height: 18px; min-height: 18px; padding: 0;
  display: flex; flex-direction: row; align-items: center; gap: 5px; text-align: left;
  border: 0; border-radius: 0; background: transparent;
  color: #1e90ff; font: 400 11px "Microsoft YaHei", sans-serif; line-height: 16px;
  text-shadow: -.4px 0 #101010, .4px 0 #101010, 0 -.4px #101010, 0 .4px #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: 1px dotted #81c2ff; outline-offset: 2px; }
#mobile-activity-toggle[hidden] { display: none; }
.activity-summary { display: flex; align-items: center; gap: 5px; 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: 12px; height: 12px;
  border: 1px solid #658ba488; border-radius: 2px; background: #162c3e66; color: #70baff; }
.activity-expand svg { width: 8px; height: 8px; }
#mobile-side-toggle { position: fixed; z-index: 6; left: env(safe-area-inset-left, 0px);
  top: calc(env(safe-area-inset-top, 0px) + var(--side-top, 76px)); width: 22px; height: 20px;
  display: grid; place-items: center; padding: 0 10px 0 0; line-height: 0; border: 0; background: transparent; color: #dbc68f; appearance: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#mobile-side-toggle::before { content: ""; position: absolute; inset: 4px 10px 4px 0; border: 1px solid #8f7653;
  border-radius: 0 3px 3px 0; background: linear-gradient(#5e574a, #2d2820); }
#mobile-side-toggle svg { position: relative; display: block; width: 10px; height: 10px; }
#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: 1px dotted #c5ac79; }
#mobile-training-hud { position: fixed; z-index: 6; left: calc(env(safe-area-inset-left, 0px) + 8px);
  top: calc(env(safe-area-inset-top, 0px) + var(--training-top, 106px)); max-width: calc(100vw - 24px); }
#mobile-training-hud[hidden], .training-row[hidden], .training-speed[hidden], .training-arrow[hidden] { display: none; }
.training-row { display: flex; align-items: center; gap: 5px; height: 18px; }
.training-open, .training-speed { appearance: none; -webkit-tap-highlight-color: transparent;
  min-height: 18px; padding: 0; border: 0; border-radius: 0; background: transparent;
  display: flex; align-items: center; gap: 6px; color: #78bd75; font: 400 11px/16px "Microsoft YaHei", sans-serif;
  text-shadow: -.4px 0 #101010, .4px 0 #101010, 0 -.4px #101010, 0 .4px #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(160px, 50vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.training-arrow { color: #c5ac79; font-size: 14px; }
.training-speed { padding: 0 5px; min-height: 18px; color: #d9b474; border: 1px solid #80604488;
  border-radius: 3px; background: #33271f99; }
.training-open:focus { outline: none; }
.training-open:focus-visible, .training-speed:focus-visible { outline: 1px dotted #c5ac79; outline-offset: 2px; }
body.mobile-game-window-open #mobile-training-hud,
body.mobile-keyboard-open #mobile-training-hud,
body.mobile-activity-open #mobile-training-hud { display: none !important; }
body.mobile-game-window-open #mobile-side-toggle,
body.mobile-keyboard-open #mobile-side-toggle,
body.mobile-activity-open #mobile-side-toggle { display: none !important; }
#mobile-activity-dialog { width: min(360px, calc(100vw - 32px)); padding: 10px; overflow: hidden;
  border: 2px solid #211b16; border-radius: 6px; background: #33271f;
  box-shadow: inset 0 0 0 1px #977553, inset 0 0 0 4px #46362a, 0 2px 5px #0006; }
#mobile-activity-dialog::backdrop { background: #0007; }
#mobile-activity-dialog header { gap: 8px; margin: -10px -10px 0; padding: 0 10px;
  border-bottom: 1px solid #1e1712; background: linear-gradient(#584839, #3b2f25); }
#mobile-activity-dialog h2 { height: 30px; line-height: 29px; text-align: center; font-size: 13px;
  font-weight: 400; color: #ddd3b9; border-bottom: 1px solid #a39477;
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 13px 100%);
  background: linear-gradient(#8b8985 0 10%, #585754 12% 48%, #353331 52%, #4a4640); }
#mobile-activity-dialog header button { position: relative; width: 44px; min-height: 44px; 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: 11px;
  display: grid; place-items: center; border: 1px solid #bd9354; border-radius: 4px;
  background: linear-gradient(#bb874b, #81532d 50%, #56351e); color: #fff0bd;
  font: 20px/20px "Microsoft YaHei", sans-serif; box-shadow: inset 0 0 0 1px #49311c; }
.activity-caption { display: flex; justify-content: space-between; margin: 6px 5px; font-size: 12px; color: #b6a487; }
.activity-list { list-style: none; padding: 0; margin: 0; overflow-y: auto;
  border: 1px solid #76583e; border-radius: 5px; background: #2b211b;
  box-shadow: inset 0 0 0 2px #1c1713;
  max-height: calc(100dvh - 144px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; touch-action: pan-y; }
.activity-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 10px; min-height: 42px; padding: 7px 8px; border-top: 1px solid #72523666; }
.activity-list li:first-child { border-top: 0; }
.activity-list li:nth-child(odd) { background: #63472f18; }
.activity-name { font-size: 14px; color: #d9b474; overflow-wrap: anywhere; }
.activity-time { font-size: 13px; font-variant-numeric: tabular-nums; color: #c4b69b; white-space: nowrap; }
.activity-empty { font-size: 14px; color: #b6a487; }
body.mobile-game-window-open #mobile-activity-toggle,
body.mobile-keyboard-open #mobile-activity-toggle,
body.mobile-activity-open #mobile-actions,
body.mobile-activity-open #mobile-movement { display: none !important; }
@media (max-width: 700px) {
  #mobile-hud-dock { left: calc(50% - 45px); width: max(140px, calc(100vw - 450px)); }
  #mobile-hud-dock #mobile-shortcuts { grid-template-columns: repeat(3, 1fr); }
  #mobile-hud-dock .mobile-key { font-size: 10px; min-height: 44px; }
}