:root {
  --bg: #11161c;
  --panel: rgba(21, 28, 37, 0.95);
  --line: #3f4c5d;
  --text: #d9e2f1;
  --accent: #3aa675;
  --danger: #d94848;
  --mana: #4e8df8;
  --hud-side-space: 300px;
  --bottom-hud-space: 184px;
  --ror-left-sidebar-width: 213px;
  --ror-right-sidebar-width: 213px;
  --ror-side-gap: 0px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, #2a3340 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

html.mobile-ui,
html.mobile-ui body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05070b;
}

body[data-graphics-mode="lite"] {
  background: #111820;
}

body[data-graphics-mode="lite"] *,
body[data-graphics-mode="lite"] *::before,
body[data-graphics-mode="lite"] *::after {
  animation-duration: 1ms !important;
  transition-duration: 0ms !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(132, 167, 202, 0.72) rgba(8, 13, 19, 0.58);
}

*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

*::-webkit-scrollbar-track {
  background: rgba(8, 13, 19, 0.58);
  border-radius: 8px;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 13, 19, 0.58);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(122, 154, 188, 0.95), rgba(70, 95, 122, 0.95));
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(156, 190, 222, 0.98), rgba(86, 116, 148, 0.98));
}

#gameCanvas {
  display: block;
  width: 100vw;
  height: 100vh;
  image-rendering: pixelated;
  cursor: default;
}

body.worldBossInvasionFx #gameFrame {
  animation: worldBossScreenShake 0.16s linear 0s 11;
}

body.worldBossInvasionFx::before,
body.worldBossInvasionFx::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

body.worldBossInvasionFx::before {
  animation: worldBossRedFlash 1.35s ease-out both;
  background:
    radial-gradient(circle at 50% 52%, rgba(88, 0, 14, 0.10), rgba(0, 0, 0, 0) 54%),
    rgba(165, 0, 18, 0.18);
  mix-blend-mode: screen;
}

body.worldBossInvasionFx::after {
  animation: worldBossDarkFog 2.2s ease-out both;
  background:
    linear-gradient(110deg, rgba(0, 18, 8, 0.22), rgba(0, 0, 0, 0.28), rgba(35, 0, 8, 0.18)),
    repeating-linear-gradient(0deg, rgba(6, 30, 12, 0.08) 0 2px, rgba(0, 0, 0, 0) 2px 8px);
}

@keyframes worldBossScreenShake {
  0% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-4px, 2px, 0); }
  40% { transform: translate3d(5px, -3px, 0); }
  60% { transform: translate3d(-3px, -2px, 0); }
  80% { transform: translate3d(4px, 3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes worldBossRedFlash {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes worldBossDarkFog {
  0% { opacity: 0; }
  22% { opacity: 0.95; }
  100% { opacity: 0; }
}

body.editor-active #gameCanvas {
  cursor: crosshair;
}

#entryOverlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    linear-gradient(rgba(8, 12, 18, 0.16), rgba(8, 12, 18, 0.22)),
    url("./assets/fundos/LogoRiseOfRealms.png?v=20260628-004") center center / 100% 100% no-repeat;
}

#entryOverlay.hidden {
  display: none;
}

.entryCard {
  width: min(480px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  border: 1px solid rgba(130, 164, 201, 0.55);
  border-radius: 12px;
  padding: 14px;
  background: rgba(10, 16, 25, 0.92);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45);
  margin-top: 7vh;
}

.entryCard h1 {
  margin: 0 0 6px;
  font-size: 24px;
  color: #e6f3ff;
}

.entryCard p {
  margin: 0 0 12px;
  font-size: 13px;
  color: #b6cee8;
}

.classChoiceEntryCard {
  width: min(860px, 96vw);
  overflow: hidden;
}

.entryForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.entryForm.inline {
  margin-top: 10px;
}

.entryAuxActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.entryAuxActions button {
  flex: 1 1 130px;
}

.entryForm input {
  border: 1px solid rgba(120, 152, 186, 0.72);
  border-radius: 8px;
  background: rgba(7, 11, 17, 0.9);
  color: #e7f3ff;
  padding: 10px;
}

.entryForm .ghost {
  background: transparent;
  border-color: rgba(120, 152, 186, 0.62);
}

.entryRecoveryMeta {
  font-size: 12px;
  color: #b6cee8;
}

.entryRecoveryMeta strong {
  color: #e7f3ff;
}

.entryStatus {
  min-height: 18px;
  font-size: 12px;
  color: #b9d2ec;
}

.serverList,
.characterList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.serverCard,
.characterCard {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(124, 157, 191, 0.58);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(34, 49, 66, 0.9), rgba(20, 31, 44, 0.9));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.serverCard strong {
  font-size: 15px;
}

.characterCard strong {
  font-size: 15px;
  color: #e8f4ff;
}

.characterCard span {
  font-size: 12px;
  color: #aecdff;
}

.classChoiceGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.classChoiceCard {
  min-width: 0;
  padding: 8px;
  gap: 4px;
  text-align: left;
}

.classChoiceCard canvas {
  width: 44px;
  height: 56px;
  margin: 0 auto 4px;
}

.classChoiceCard strong {
  font-size: 13px;
}

.classChoiceCard span,
.classChoiceCard small {
  font-size: 11px;
  line-height: 1.25;
  color: #b7d4f1;
}

#entryOverlay.characterSelectOverlay {
  align-items: stretch;
  justify-content: stretch;
  padding: clamp(14px, 2.4vw, 30px);
  background: #05080b;
  overflow: hidden;
  isolation: isolate;
}

#entryOverlay.characterSelectOverlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 5, 8, 0.88) 0%, rgba(2, 5, 8, 0.34) 44%, rgba(2, 5, 8, 0.72) 100%),
    linear-gradient(180deg, rgba(2, 5, 8, 0.2) 0%, rgba(2, 5, 8, 0.86) 100%);
}

#entryOverlay.characterSelectOverlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 35px;
  background: #05080b;
  pointer-events: none;
}

.characterSelectBg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: brightness(0.56) contrast(1.08) saturate(1.08);
  pointer-events: none;
}

.characterSelectShell {
  position: relative;
  z-index: 2;
  width: min(1440px, 100%);
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 342px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
}

.characterSelectPanel {
  width: 100%;
  max-height: min(760px, calc(100vh - 56px));
  min-height: min(560px, calc(100vh - 56px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(177, 152, 96, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(19, 25, 29, 0.93), rgba(8, 12, 15, 0.91));
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.56), inset 0 1px 0 rgba(255, 244, 210, 0.08);
  backdrop-filter: blur(8px);
  overflow: hidden;
}

.characterSelectPanelHead {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(177, 152, 96, 0.26);
}

.characterSelectPanelHead strong {
  color: #f0e5c9;
  font-size: 18px;
}

.characterSelectPanelHead span {
  max-width: 100%;
  color: #aebdcc;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.characterSelectList {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding-right: 3px;
}

.characterSelectCard {
  min-height: 74px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-color: rgba(141, 155, 168, 0.48);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(30, 43, 47, 0.92), rgba(14, 20, 24, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.characterDeleteBtn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 96, 96, 0.58);
  border-radius: 6px;
  color: #ffd0d0;
  font: 800 12px/1 monospace;
  background: rgba(88, 18, 18, 0.5);
}

.characterDeleteBtn:hover {
  border-color: rgba(255, 132, 132, 0.95);
  background: rgba(130, 26, 26, 0.78);
}

.characterSelectCard.active {
  border-color: rgba(230, 194, 112, 0.95);
  background: linear-gradient(180deg, rgba(64, 55, 33, 0.95), rgba(25, 24, 18, 0.96));
  box-shadow: 0 0 0 1px rgba(230, 194, 112, 0.18), 0 10px 26px rgba(0, 0, 0, 0.28);
}

.characterSelectAvatar {
  width: 44px;
  height: 56px;
  image-rendering: pixelated;
}

.characterSelectCardText {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.characterSelectCardText strong {
  color: #f4ead0;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.characterSelectCardText span {
  color: #9fd0bd;
  font-size: 12px;
}

.emptyCharacterList {
  border: 1px dashed rgba(177, 152, 96, 0.42);
  border-radius: 8px;
  padding: 12px;
  color: #b7c4cf;
  font-size: 13px;
  text-align: center;
}

.characterCreateForm {
  padding-top: 10px;
  border-top: 1px solid rgba(177, 152, 96, 0.22);
}

.characterCreateForm input {
  border-color: rgba(177, 152, 96, 0.5);
  background: rgba(3, 6, 8, 0.78);
}

.characterSelectStage {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 18px);
}

.templeStage {
  position: relative;
  width: min(70vh, 680px, 84vw);
  max-height: min(70vh, 680px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.56));
}

.templeImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.templeCharacterPreview {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(96px, 11vw, 150px);
  height: clamp(122px, 14vw, 190px);
  image-rendering: pixelated;
  transform: translate(-50%, calc(-24% - 55px));
}

.characterSelectionBadge {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  min-width: min(280px, 72%);
  max-width: 82%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid rgba(230, 194, 112, 0.42);
  border-radius: 8px;
  background: rgba(7, 10, 12, 0.68);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.36);
}

.characterSelectionBadge strong {
  max-width: 100%;
  color: #f6e7be;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.characterSelectionBadge span {
  color: #b8d8c7;
  font-size: 12px;
}

.characterSelectionActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 180px));
  gap: 12px;
}

.characterSelectionActions button {
  min-height: 44px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0;
}

.characterSelectionActions .primary {
  border-color: rgba(232, 195, 102, 0.85);
  background: linear-gradient(180deg, #8f6a28, #4f3516);
  color: #fff6dc;
}

.characterSelectionActions .ghost {
  border-color: rgba(159, 179, 188, 0.54);
  background: rgba(7, 11, 14, 0.76);
}

.logoutConfirmModal {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 6, 10, 0.58);
}

.logoutConfirmModal.open {
  display: flex;
}

.logoutConfirmCard {
  width: min(380px, 94vw);
  border: 1px solid rgba(191, 155, 86, 0.62);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(21, 27, 32, 0.98), rgba(8, 12, 16, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.62);
}

.logoutConfirmTitle {
  display: block;
  color: #f4e1ad;
  font-size: 18px;
  margin-bottom: 8px;
}

.logoutConfirmMessage {
  min-height: 22px;
  color: #d8e3ef;
  font-size: 13px;
  line-height: 1.35;
}

.logoutConfirmActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.logoutConfirmActions .danger {
  border-color: rgba(214, 84, 84, 0.78);
  background: linear-gradient(180deg, #7c3030, #4f1717);
}

.logoutConfirmActions .ghost {
  background: rgba(7, 11, 14, 0.76);
}

.sessionConflictModal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 6, 10, 0.62);
}

.sessionConflictModal.open {
  display: flex;
}

.sessionConflictCard {
  width: min(540px, 94vw);
  border: 1px solid rgba(191, 155, 86, 0.7);
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(21, 27, 32, 0.99), rgba(8, 12, 16, 0.99));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.64);
}

.sessionConflictTitle {
  display: block;
  color: #f4e1ad;
  font-size: 18px;
  margin-bottom: 10px;
}

.sessionConflictMessage {
  color: #d8e3ef;
  font-size: 13px;
  line-height: 1.4;
}

.sessionConflictMeta {
  margin-top: 10px;
  color: #a8bdd2;
  font-size: 12px;
  line-height: 1.4;
  min-height: 18px;
}

.sessionConflictActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.sessionConflictActions .primary {
  border-color: rgba(232, 195, 102, 0.85);
  background: linear-gradient(180deg, #8f6a28, #4f3516);
  color: #fff6dc;
}

.sessionConflictActions .ghost {
  background: rgba(7, 11, 14, 0.76);
}

.houseRentModal {
  position: fixed;
  inset: 0;
  z-index: 440;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(3, 6, 10, 0.45);
}

.houseRentModal.open {
  display: flex;
}

.houseRentCard {
  width: min(400px, 94vw);
  border: 1px solid rgba(214, 181, 97, 0.62);
  border-radius: 8px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(22, 28, 31, 0.98), rgba(8, 12, 16, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.58);
}

.houseRentTitle {
  display: block;
  margin-bottom: 8px;
  color: #f6e5ad;
  font-size: 18px;
}

.houseRentMessage {
  min-height: 22px;
  color: #dce7ef;
  font-size: 13px;
  line-height: 1.35;
}

.houseRentActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.houseRentActions .primary {
  border-color: rgba(232, 195, 102, 0.85);
  background: linear-gradient(180deg, #8f6a28, #4f3516);
  color: #fff6dc;
}

.houseRentActions .ghost {
  background: rgba(7, 11, 14, 0.76);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.25);
}

@media (max-width: 900px) {
  .classChoiceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #entryOverlay.characterSelectOverlay {
    padding: 12px;
    overflow-y: auto;
  }

  .characterSelectShell {
    min-height: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
    align-content: start;
  }

  .characterSelectPanel {
    min-height: 0;
    max-height: 42vh;
    order: 2;
  }

  .characterSelectStage {
    min-height: 0;
    height: auto;
    order: 1;
  }

  .templeStage {
    width: min(62vh, 92vw);
    max-height: 48vh;
  }

  .characterSelectionActions {
    width: min(420px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ROR mobile v27: joystick requested size, opacity and position */
body.mobile-ui {
  --mobile-joystick-size-v27: clamp(86px, 28.6vmin, 135px);
}

body.mobile-ui #mobileJoystickWrap {
  left: 15.095% !important;
  width: var(--mobile-joystick-size-v27) !important;
  height: var(--mobile-joystick-size-v27) !important;
  max-width: min(39dvw, 39dvh, 135px) !important;
  max-height: min(39dvw, 39dvh, 135px) !important;
  opacity: .8 !important;
}

body.mobile-ui #mobileJoystickWrap > .mobileHudImage {
  opacity: 1 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileJoystickWrap {
    left: 15.095% !important;
    width: clamp(80px, 27.3vmin, 120px) !important;
    height: clamp(80px, 27.3vmin, 120px) !important;
    max-width: min(39dvw, 39dvh, 120px) !important;
    max-height: min(39dvw, 39dvh, 120px) !important;
  }
}

/* ROR mobile v28 final override: equipment square, inventory/backpacks exactly 4 columns */
body.mobile-ui .mobileInventoryMainPanel,
body.mobile-ui .mobileBackpackPanel {
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3) + 18px) !important;
  overflow-x: hidden !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid {
  display: grid !important;
  grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
  grid-auto-rows: var(--mobile-menu-slot-v25) !important;
  gap: var(--mobile-menu-gap-v25) !important;
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-content: start !important;
  justify-items: center !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui .mobileEquipmentSlot {
  width: var(--mobile-menu-slot-v25) !important;
  height: var(--mobile-menu-slot-v25) !important;
  min-width: var(--mobile-menu-slot-v25) !important;
  min-height: var(--mobile-menu-slot-v25) !important;
  max-width: var(--mobile-menu-slot-v25) !important;
  max-height: var(--mobile-menu-slot-v25) !important;
  border-radius: 5px !important;
  border: 1px solid rgba(117, 97, 61, .92) !important;
  background: linear-gradient(180deg, rgba(42, 39, 35, .98), rgba(17, 17, 18, .98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .68),
    inset 0 2px 4px rgba(255, 230, 165, .08),
    0 1px 2px rgba(0, 0, 0, .58) !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot::after,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot::after,
body.mobile-ui .mobileEquipmentSlot::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 1 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 231, 170, .08) !important;
  background: rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > canvas,
body.mobile-ui .mobileEquipmentSlot > img,
body.mobile-ui .mobileEquipmentSlot > canvas {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  border-radius: 2px !important;
  clip-path: none !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  z-index: 2 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileInventoryMainPanel,
  body.mobile-ui .mobileBackpackPanel {
    min-width: 0 !important;
  }

  body.mobile-ui #mobileInventoryGrid,
  body.mobile-ui #mobileBackpackGrid {
    grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
    width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
    min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  }
}

/* ROR PC v30: show real battle sprites instead of monochrome icons */
body:not(.mobile-client) .hubBattleSection .battleListEntryIcon,
body:not(.mobile-client) .battleListEntryIcon {
  filter: none !important;
}

/* ROR PC v30: show real battle sprites instead of monochrome icons */
body:not(.mobile-client) .hubBattleSection .battleListEntryIcon,
body:not(.mobile-client) .battleListEntryIcon {
  filter: none !important;
}

/* ROR mobile v29 final override: joystick back 10% to the left */
body.mobile-ui #mobileJoystickWrap {
  left: 5.095% !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileJoystickWrap {
    left: 5.095% !important;
  }
}

/* ROR mobile v29: joystick back 10% to the left */
body.mobile-ui #mobileJoystickWrap {
  left: 5.095% !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileJoystickWrap {
    left: 5.095% !important;
  }
}

/* ROR mobile v28: equipment slots square and inventory/backpacks fixed at 4 columns */
body.mobile-ui .mobileInventoryMainPanel,
body.mobile-ui .mobileBackpackPanel {
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3) + 18px) !important;
  overflow-x: hidden !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid {
  display: grid !important;
  grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
  grid-auto-rows: var(--mobile-menu-slot-v25) !important;
  gap: var(--mobile-menu-gap-v25) !important;
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-content: start !important;
  justify-items: center !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui .mobileEquipmentSlot {
  width: var(--mobile-menu-slot-v25) !important;
  height: var(--mobile-menu-slot-v25) !important;
  min-width: var(--mobile-menu-slot-v25) !important;
  min-height: var(--mobile-menu-slot-v25) !important;
  max-width: var(--mobile-menu-slot-v25) !important;
  max-height: var(--mobile-menu-slot-v25) !important;
  border-radius: 5px !important;
  border: 1px solid rgba(117, 97, 61, .92) !important;
  background: linear-gradient(180deg, rgba(42, 39, 35, .98), rgba(17, 17, 18, .98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .68),
    inset 0 2px 4px rgba(255, 230, 165, .08),
    0 1px 2px rgba(0, 0, 0, .58) !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot::after,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot::after,
body.mobile-ui .mobileEquipmentSlot::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 1 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 231, 170, .08) !important;
  background: rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > canvas,
body.mobile-ui .mobileEquipmentSlot > img,
body.mobile-ui .mobileEquipmentSlot > canvas {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  border-radius: 2px !important;
  clip-path: none !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  z-index: 2 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileInventoryMainPanel,
  body.mobile-ui .mobileBackpackPanel {
    min-width: 0 !important;
  }

  body.mobile-ui #mobileInventoryGrid,
  body.mobile-ui #mobileBackpackGrid {
    grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
    width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
    min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  }
}

.serverName {
  color: #ffb347;
}

.serverStatus {
  color: #67e08a;
  font-weight: 700;
}

.serverPing {
  color: #67e08a;
  font-weight: 700;
}

#chatBox {
  position: fixed;
  left: 12px;
  bottom: 12px;
  width: min(440px, 65vw);
  background: rgba(9, 12, 16, 0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(2px);
  padding: 8px;
  z-index: 25;
}

#chatTabs {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

#chatTabs::-webkit-scrollbar {
  display: none;
}

#chatTabs .chatTab,
#chatTabs [data-chat-tab] {
  flex: 0 0 auto;
  min-width: 58px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(103, 130, 160, 0.58);
  border-bottom-color: rgba(70, 90, 114, 0.72);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, rgba(28, 38, 50, 0.92), rgba(10, 15, 22, 0.92));
  color: #b9cbe1;
  font: 700 11px/22px Arial, sans-serif;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  cursor: pointer;
}

#chatTabs .chatTab.active,
#chatTabs [data-chat-tab].active,
#chatTabs [data-chat-tab][aria-selected="true"] {
  border-color: rgba(236, 198, 111, 0.92);
  border-bottom-color: rgba(236, 198, 111, 0.92);
  background: linear-gradient(180deg, rgba(86, 58, 24, 0.96), rgba(36, 25, 13, 0.96));
  color: #ffe6a8;
  box-shadow:
    inset 0 -2px 0 rgba(236, 198, 111, 0.88),
    0 0 0 1px rgba(236, 198, 111, 0.18);
}

#chatLog {
  max-height: 150px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 8px;
}

#chatLog::-webkit-scrollbar {
  width: 8px;
}

#chatLog::-webkit-scrollbar-track {
  background: rgba(10, 15, 22, 0.78);
  border-radius: 999px;
}

#chatLog::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7ca8d6, #4d6f95);
  border-radius: 999px;
  border: 1px solid rgba(190, 219, 248, 0.28);
}

#chatLog::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8ebbe7, #5d82aa);
}

#chatLog .msg {
  margin: 2px 0;
}

#chatLog .chatTimestamp {
  color: #7f91aa;
  font-weight: 700;
  margin-right: 2px;
}

#chatLog .chatQty {
  color: #d9e8f6;
  font-weight: 800;
}

#chatLog .chatItemName,
#chatLog .chatTierLabel {
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.78);
}

#chatLog .chatLegendaryNotice {
  color: #ffd166;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255, 194, 77, 0.38);
}

#chatLog .sys {
  color: #a9c4ff;
}

#chatLog .warning {
  color: #ffd45a;
}

#chatLog .danger {
  color: #ff6868;
}

#chatLog .gm {
  color: #ff2f2f;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 47, 47, 0.95), 0 0 18px rgba(255, 0, 0, 0.45);
  border-left: 3px solid #ff2f2f;
  padding-left: 6px;
  background: rgba(120, 0, 0, 0.22);
}

#chatLog .mod {
  color: #45d6ff;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(69, 214, 255, 0.85), 0 0 18px rgba(0, 128, 180, 0.42);
  border-left: 3px solid #45d6ff;
  padding-left: 6px;
  background: rgba(0, 80, 120, 0.22);
}

#lootMessageLayer {
  position: fixed;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 34;
  pointer-events: none;
}

.lootMessageLine {
  max-width: min(620px, calc(100vw - 28px));
  padding: 5px 9px;
  border: 1px solid rgba(207, 224, 255, 0.28);
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.82);
  color: #dcecff;
  font: 700 12px/1.25 monospace;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: opacity 300ms ease, transform 300ms ease;
}

.lootMessageLine.closing {
  opacity: 0;
  transform: translateY(-8px);
}

.lootMessageItem.rarity-common {
  color: #dce7f2;
}

.lootMessageItem.rarity-uncommon {
  color: #80e49a;
}

.lootMessageItem.rarity-rare {
  color: #70b7ff;
}

.lootMessageItem.rarity-epic {
  color: #c58cff;
}

.lootMessageItem.rarity-legendary {
  color: #ffd166;
}

#founderRewardLayer {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.founderRewardCard {
  width: min(560px, calc(100vw - 28px));
  min-height: 190px;
  padding: 18px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(255, 218, 126, 0.8);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(18, 14, 22, 0.96), rgba(50, 35, 16, 0.94)),
    rgba(8, 10, 14, 0.98);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.58), 0 0 32px rgba(255, 190, 76, 0.22);
  animation: founderRewardIn 380ms ease-out both;
}

.founderRewardCard.closing {
  animation: founderRewardOut 420ms ease-in both;
}

.founderRewardCard img {
  width: 170px;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.42));
}

.founderRewardBody {
  min-width: 0;
  color: #fff6dd;
}

.founderRewardEyebrow {
  display: block;
  margin-bottom: 7px;
  color: #ffc65f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.founderRewardBody strong {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font: 800 26px/1.05 Georgia, "Times New Roman", serif;
}

.founderRewardBody ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 5px;
  color: #f5e8c8;
  font-size: 14px;
  line-height: 1.25;
}

@keyframes founderRewardIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes founderRewardOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
}

body.mobile-ui .founderRewardCard {
  width: min(72vw, 520px);
  min-height: 0;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
}

body.mobile-ui .founderRewardCard img {
  width: 118px;
  height: 118px;
}

body.mobile-ui .founderRewardBody strong {
  font-size: 19px;
}

body.mobile-ui .founderRewardBody ul {
  font-size: 12px;
  gap: 3px;
}

#chatForm {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

#chatChannelSelect {
  width: 86px;
  border: 1px solid #59667a;
  background: rgba(5, 7, 10, 0.9);
  color: #f0f6ff;
  padding: 0 6px;
  border-radius: 6px;
  outline: none;
}

#chatInput {
  flex: 1;
  min-width: 0;
  border: 1px solid #59667a;
  background: rgba(5, 7, 10, 0.85);
  color: #f0f6ff;
  padding: 8px;
  border-radius: 6px;
  outline: none;
}

#mapEditor {
  position: fixed;
  top: 12px;
  right: 242px;
  width: min(430px, calc(100vw - 24px));
  height: min(78vh, 760px);
  min-width: 320px;
  min-height: 280px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  resize: both;
  z-index: 30;
}

#mapEditor.hidden {
  display: none;
}

.editorHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.editorHeader:active {
  cursor: grabbing;
}

.toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layerGroup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

button {
  border: 1px solid #5e6d82;
  background: #2f3b4b;
  color: #eff6ff;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.08);
}

.layerBtn.active {
  border-color: #9ed1ff;
  background: #3e526a;
}

.toggleBtn.active {
  border-color: #7adca9;
  background: #2d5c45;
}

#editorInfo {
  font-size: 12px;
  color: #c3cedd;
}

.animEditor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid #59667a;
  border-radius: 6px;
  background: rgba(7, 10, 14, 0.58);
}

.animToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d7e3f7;
}

.animInputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.animInputs input,
.animSpeedRow select,
.animSpeedRow input {
  width: 100%;
  border: 1px solid #59667a;
  background: rgba(5, 7, 10, 0.9);
  color: #eff6ff;
  border-radius: 4px;
  padding: 6px;
  font-size: 12px;
}

.animSpeedRow {
  display: grid;
  grid-template-columns: 1fr 110px;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #d7e3f7;
}

#tilesetIdHint {
  font-size: 12px;
  color: #b4c8e8;
}

#tilesetScroller {
  border: 1px solid #59667a;
  border-radius: 6px;
  flex: 1 1 auto;
  min-height: 120px;
  overflow: auto;
  background: #0c0f13;
}

#tilesetCanvas {
  display: block;
  image-rendering: pixelated;
}

.tips {
  font-size: 12px;
  color: #c5d2e5;
}

#uiDock {
  position: fixed;
  top: 12px;
  right: 0;
  width: var(--ror-right-sidebar-width, 213px);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#miniMapCard {
  border: 1px solid rgba(112, 136, 166, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(16, 22, 30, 0.98), rgba(8, 12, 17, 0.98));
  padding: 7px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 22px rgba(0, 0, 0, 0.2);
}

.miniMapHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
  color: #d7e3f0;
}

.miniMapControls {
  display: none !important;
}

.miniMapControls button {
  display: none !important;
  width: 29px;
  height: 29px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

#miniMapZoomLabel {
  display: none !important;
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  color: #cddcf1;
}

#miniMapCanvas {
  display: block;
  width: 166px;
  height: 166px;
  border: 1px solid rgba(86, 102, 124, 0.96);
  border-radius: 6px;
  background: #05070a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 0 16px rgba(0, 0, 0, 0.4);
  image-rendering: pixelated;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#miniMapCanvas:active {
  cursor: grabbing;
}

#miniMapCanvas.ror-miniMapDragging {
  cursor: grabbing;
}

#dockActionRow {
  display: grid;
  grid-template-columns: 36px 50px 1fr 44px;
  gap: 6px;
  align-items: center;
}

#dockActionRow button {
  height: 36px;
  padding: 0 6px;
  font-size: 15px;
}

#settingsToggleBtn,
#huntAnalyzerBtn,
#hubToggleBtn {
  padding: 0;
}

#settingsPanel {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(980px, 96vw);
  height: min(780px, 88vh);
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%) scale(0.96);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  border: 1px solid rgba(89, 102, 122, 0.4);
  border-radius: 10px;
  background: rgba(12, 16, 22, 0.96);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 90;
}

#settingsPanel.expanded {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  border-color: var(--line);
}

#settingsPanel .panelTitle {
  padding: 14px 16px;
  font-size: 14px;
  color: #c9d8ef;
  border-bottom: 1px solid rgba(89, 102, 122, 0.34);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

#settingsPanelCloseBtn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(126, 157, 192, 0.75);
  border-radius: 4px;
  background: rgba(26, 35, 46, 0.9);
  color: #dcecff;
  font: 800 14px/1 system-ui, sans-serif;
  cursor: pointer;
}

.settingsPanelBody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settingsGroup {
  border: 1px solid rgba(96, 121, 151, 0.38);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 38, 50, 0.86), rgba(17, 24, 33, 0.9));
  padding: 12px;
}

.settingsGroupTitle {
  color: #e3eefc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.settingsGroupHint {
  margin-top: 4px;
  color: #adc3de;
  font-size: 12px;
  line-height: 1.35;
}

.settingsToggleRow,
.settingsRangeRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.settingsToggleMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settingsToggleLabel {
  color: #edf5ff;
  font-size: 13px;
  font-weight: 700;
}

.settingsToggleHint {
  color: #9fb7d3;
  font-size: 11px;
  line-height: 1.3;
}

.settingsCheckbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #7ca8d6;
  cursor: pointer;
  flex: 0 0 auto;
}

.partyPanelBody {
  margin-top: 10px;
}

.partyPanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.partyActionRow {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.partySummaryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.partySummaryGrid div {
  border: 1px solid rgba(111, 141, 176, 0.34);
  border-radius: 7px;
  background: rgba(9, 15, 23, 0.55);
  padding: 8px;
  min-width: 0;
}

.partySummaryGrid span,
.partyMemberMeta,
.partyHistoryRow span,
.partyRuleNote,
.partyEmptyState,
.partyLootTotals em {
  color: #9fb7d3;
  font-size: 11px;
  line-height: 1.35;
}

.partySummaryGrid strong {
  display: block;
  margin-top: 3px;
  color: #edf5ff;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.partyRuleNote {
  border: 1px solid rgba(198, 166, 92, 0.32);
  border-radius: 7px;
  background: rgba(72, 54, 18, 0.24);
  padding: 8px;
}

.partySubTitle {
  color: #e3eefc;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.partyMemberList,
.partyHistoryList {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
}

.partyMemberRow,
.partyHistoryRow {
  border: 1px solid rgba(111, 141, 176, 0.34);
  border-radius: 7px;
  background: rgba(9, 15, 23, 0.48);
  padding: 8px;
}

.partyMemberRow.leader {
  border-color: rgba(222, 186, 98, 0.52);
}

.partyMemberTop {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: #edf5ff;
  font-size: 12px;
}

.partyMemberTop strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partyMemberTop span {
  color: #f0d18b;
  font-size: 11px;
  flex: 0 0 auto;
}

.partyHpBar {
  height: 7px;
  margin: 7px 0 5px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(18, 24, 33, 0.92);
  border: 1px solid rgba(103, 128, 157, 0.36);
}

.partyHpBar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #cf4f48, #68c275);
}

.partyLootTotals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.partyLootTotals span {
  border: 1px solid rgba(111, 141, 176, 0.34);
  border-radius: 999px;
  background: rgba(9, 15, 23, 0.55);
  color: #dbe8f6;
  font-size: 11px;
  padding: 4px 8px;
}

.partyHistoryRow strong {
  display: block;
  color: #edf5ff;
  font-size: 12px;
  margin-bottom: 3px;
}

@media (max-width: 720px) {
  .partyActionRow,
  .partySummaryGrid {
    grid-template-columns: 1fr;
  }
}

.settingsRangeValue {
  color: #ffe7a1;
  font-size: 11px;
  font-weight: 700;
}

.settingsRangeInput {
  width: min(230px, 38vw);
  flex: 1 1 180px;
  accent-color: #7ca8d6;
}

.settingsRankingControls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.settingsPanelActionRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.settingsSelect {
  min-width: 140px;
  flex: 1 1 140px;
  border: 1px solid rgba(120, 152, 186, 0.72);
  border-radius: 8px;
  background: rgba(7, 11, 17, 0.9);
  color: #e7f3ff;
  padding: 8px 10px;
}

.settingsActionBtn {
  min-width: 108px;
  border: 1px solid rgba(124, 157, 191, 0.58);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(39, 56, 76, 0.96), rgba(21, 31, 44, 0.96));
  color: #eef6ff;
  padding: 8px 12px;
  cursor: pointer;
}

.settingsActionBtn:disabled {
  opacity: 0.7;
  cursor: progress;
}

.settingsRankingMeta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: #aecdff;
  font-size: 11px;
}

.settingsRankingTableWrap {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid rgba(96, 121, 151, 0.28);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.5);
}

.settingsRankingTable {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
}

.settingsRankingTable th,
.settingsRankingTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(96, 121, 151, 0.22);
  text-align: left;
  font-size: 12px;
}

.settingsRankingTable th {
  position: sticky;
  top: 0;
  background: rgba(13, 19, 27, 0.98);
  color: #eff7ff;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  z-index: 1;
}

.settingsRankingTable tbody tr:hover {
  background: rgba(122, 168, 214, 0.08);
}

.settingsRankingTable tbody tr.current-player {
  background: rgba(58, 166, 117, 0.16);
}

.guildPanelBody {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guildHeroCard,
.guildPanelBlock {
  border: 1px solid rgba(111, 142, 176, 0.32);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 31, 44, 0.96), rgba(10, 16, 24, 0.96));
  padding: 12px;
}

.guildHeroCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.guildHeroCard.active {
  border-color: rgba(127, 197, 255, 0.42);
}

.guildHeroMain {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.guildHeroMain strong,
.guildPanelBlockTitle {
  display: block;
  color: #edf6ff;
  font-size: 14px;
  font-weight: 700;
}

.guildHeroMain span,
.guildInviteRow span,
.guildRankingRow span,
.guildEmptyState {
  color: #a7c0dc;
  font-size: 12px;
}

.guildEmblemPreview {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(132, 206, 255, 0.58);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(126, 213, 255, 0.32), rgba(16, 34, 56, 0.96));
  color: #eaf7ff;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(82, 160, 222, 0.28);
}

.guildStatsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
  flex: 1 1 300px;
}

.guildStatsGrid div {
  border: 1px solid rgba(96, 121, 151, 0.28);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.44);
  padding: 8px 10px;
}

.guildStatsGrid span {
  display: block;
  color: #9fb7d3;
  font-size: 11px;
}

.guildStatsGrid strong {
  display: block;
  margin-top: 2px;
  color: #fff2bd;
  font-size: 13px;
}

.guildPanelGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.guildPanelBlock.wide {
  grid-column: 1 / -1;
}

.guildCreateRow,
.guildActionRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.settingsTextInput {
  min-width: 160px;
  flex: 1 1 180px;
  border: 1px solid rgba(120, 152, 186, 0.72);
  border-radius: 8px;
  background: rgba(7, 11, 17, 0.9);
  color: #e7f3ff;
  padding: 8px 10px;
  resize: vertical;
}

.settingsTextInput:disabled {
  opacity: 0.72;
}

.accountEmailMeta {
  margin-top: 10px;
  color: #d8e9fa;
  font-size: 12px;
  line-height: 1.35;
}

.guildInviteRow,
.guildRankingRow {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(96, 121, 151, 0.24);
  border-radius: 8px;
  background: rgba(8, 12, 18, 0.38);
  padding: 8px 10px;
}

.guildInviteRow.compact {
  justify-content: flex-start;
}

.guildInviteRow strong,
.guildRankingRow strong {
  display: block;
  color: #edf6ff;
  font-size: 12px;
}

.guildRankList {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guildRankList span {
  border: 1px solid rgba(127, 197, 255, 0.34);
  border-radius: 999px;
  background: rgba(33, 70, 103, 0.42);
  color: #dcefff;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.guildMemberTableWrap {
  margin-top: 10px;
  max-height: 230px;
  overflow: auto;
  border: 1px solid rgba(96, 121, 151, 0.28);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.5);
}

.guildMemberTable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}

.guildMemberTable th,
.guildMemberTable td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(96, 121, 151, 0.22);
  text-align: left;
  font-size: 12px;
}

.guildMemberTable th {
  position: sticky;
  top: 0;
  background: rgba(13, 19, 27, 0.98);
  color: #eff7ff;
  text-transform: uppercase;
  z-index: 1;
}

.guildMemberTable tr.online td:first-child {
  color: #93f0bd;
  font-weight: 700;
}

.settingsRankingEmpty {
  padding: 16px 12px;
  text-align: center;
  color: #c6d9ef;
}

.settingsPanelBody::-webkit-scrollbar {
  width: 8px;
}

.settingsPanelBody::-webkit-scrollbar-track {
  background: rgba(10, 15, 22, 0.78);
  border-radius: 999px;
}

.settingsPanelBody::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7ca8d6, #4d6f95);
  border-radius: 999px;
}

.taskSystemSectionBody {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.taskSystemHeroCard,
.taskSystemCategoryBlock,
.taskCatalogCard,
.charmCard,
.dailyRewardCard,
.contractBountyCard {
  border: 1px solid rgba(111, 142, 176, 0.32);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(20, 31, 44, 0.96), rgba(10, 16, 24, 0.96)),
    radial-gradient(circle at top, rgba(123, 205, 255, 0.06), transparent 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.taskSystemHeroCard {
  padding: 14px;
}

.taskSystemHeroCard.compact {
  padding: 12px;
}

.taskSystemHeroHead,
.taskCatalogHead,
.charmCardHead,
.charmCardFoot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.taskSystemHeroHead strong,
.taskCatalogHead strong,
.taskSystemCategoryTitle,
.charmCardMeta strong {
  color: #edf6ff;
  font-size: 14px;
  font-weight: 700;
}

.taskSystemHeroHead span,
.taskCatalogHead span,
.charmCardMeta span,
.contractBountyStars,
.taskSystemFeaturedTask span {
  color: #a7c0dc;
  font-size: 12px;
}

.taskSystemBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(124, 168, 214, 0.16);
  color: #dcecff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.taskSystemBadge.done {
  background: rgba(58, 166, 117, 0.18);
  color: #baf4d3;
}

.taskSystemProgressBar {
  margin-top: 10px;
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(5, 10, 16, 0.72);
}

.taskSystemProgressBar.slim {
  height: 7px;
}

.taskSystemProgressFill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3aa675, #7fdcc1);
}

.taskSystemMetaGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.taskSystemMetaGrid div {
  padding: 10px;
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.48);
  border: 1px solid rgba(115, 146, 180, 0.18);
}

.taskSystemMetaGrid span {
  display: block;
  color: #9bb5d1;
  font-size: 11px;
}

.taskSystemMetaGrid strong {
  display: block;
  margin-top: 4px;
  color: #edf6ff;
  font-size: 13px;
}

.taskSystemRewardRow,
.taskCatalogRewards {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.taskSystemRewardRow span,
.taskCatalogRewards span,
.charmCost {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(237, 231, 161, 0.12);
  color: #f7e9ad;
  font-size: 11px;
  font-weight: 700;
}

.taskSystemSectionTitle {
  color: #d9e9fb;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.taskSystemMiniGrid,
.taskSystemCatalogGrid,
.charmCatalogGrid,
.dailyRewardGrid,
.contractBountyGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.taskSystemMiniCard,
.taskCatalogCard,
.charmCard,
.dailyRewardCard,
.contractBountyCard {
  padding: 12px;
}

.dailyRewardGrid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.dailyRewardCard {
  min-height: 166px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dailyRewardCard.claimed {
  border-color: rgba(58, 166, 117, 0.38);
  background:
    linear-gradient(180deg, rgba(18, 38, 27, 0.96), rgba(10, 22, 16, 0.96)),
    radial-gradient(circle at top, rgba(58, 166, 117, 0.08), transparent 50%);
}

.dailyRewardCard.next {
  border-color: rgba(233, 196, 112, 0.48);
  box-shadow: 0 0 0 1px rgba(233, 196, 112, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dailyRewardDay {
  align-self: flex-start;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(124, 168, 214, 0.16);
  color: #dcecff;
  font-size: 11px;
  font-weight: 800;
}

.dailyRewardIconWrap {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(124, 168, 214, 0.24);
  background: rgba(7, 12, 18, 0.72);
  display: grid;
  place-items: center;
}

.dailyRewardIconWrap img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.dailyRewardCard strong {
  color: #edf6ff;
  font-size: 13px;
}

.dailyRewardCard span {
  color: #a7c0dc;
  font-size: 12px;
  line-height: 1.35;
}

.dailyChoiceCard {
  cursor: pointer;
}

.dailyChoiceCard.locked {
  cursor: not-allowed;
  opacity: 0.48;
}

.taskSystemMiniCard strong,
.taskSystemHistoryItem strong {
  display: block;
  color: #eef6ff;
  font-size: 12px;
}

.taskSystemMiniCard span,
.taskSystemHistoryItem span,
.taskSystemMiniCard small,
.taskSystemHistoryItem small,
.taskSystemFeaturedTask small {
  display: block;
  margin-top: 3px;
  color: #a9c1db;
  font-size: 11px;
}

.taskSystemMiniCard.active,
.taskCatalogCard.active,
.charmCard.ready,
.contractBountyCard.active {
  border-color: rgba(233, 196, 112, 0.44);
  box-shadow: 0 0 0 1px rgba(233, 196, 112, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.taskSystemMiniCard.active {
  background:
    linear-gradient(180deg, rgba(53, 42, 21, 0.92), rgba(19, 15, 8, 0.95)),
    radial-gradient(circle at top, rgba(233, 196, 112, 0.1), transparent 54%);
}

.taskSystemHistoryList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.taskSystemHistoryItem {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.52);
  border: 1px solid rgba(109, 138, 170, 0.18);
}

.taskSystemHistoryItem.done,
.taskCatalogCard.done,
.charmCard.unlocked,
.contractBountyCard.empty {
  border-color: rgba(58, 166, 117, 0.36);
  background:
    linear-gradient(180deg, rgba(18, 38, 27, 0.96), rgba(10, 22, 16, 0.96)),
    radial-gradient(circle at top, rgba(58, 166, 117, 0.08), transparent 50%);
}

.taskSystemRuleList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.taskSystemRuleItem {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.5);
  border: 1px solid rgba(111, 142, 176, 0.18);
  color: #c6d9ef;
  font-size: 12px;
  line-height: 1.4;
}

.taskSystemCatalogWrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.taskSystemCategoryBlock {
  padding: 12px;
}

.taskSystemCategoryTitle {
  margin-bottom: 10px;
}

.taskSystemFeaturedTask {
  margin-top: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.52);
  border: 1px solid rgba(109, 138, 170, 0.18);
}

.taskSystemFeaturedTask strong {
  display: block;
  color: #eff7ff;
  font-size: 14px;
}

.charmCardHead {
  gap: 10px;
}

.charmCardIconWrap {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(118, 150, 186, 0.28);
  background: rgba(8, 12, 18, 0.7);
}

.charmCardIconWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.charmCardMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.charmCardDesc {
  margin-top: 10px;
  color: #c3d8ef;
  font-size: 12px;
  line-height: 1.45;
}

.charmHint {
  margin-top: 10px;
  color: #f5d88b;
  font-size: 11px;
  line-height: 1.4;
}

.charmCardFoot {
  margin-top: 12px;
  align-items: center;
}

.charmElementRow {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contractBountyHero .taskSystemMetaGrid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contractBountyCard {
  display: flex;
  min-height: 178px;
  flex-direction: column;
  gap: 12px;
}

.contractBountyCard.locked {
  opacity: 0.68;
}

.contractBountyCard .settingsActionBtn {
  margin-top: auto;
  width: 100%;
}

.contractBountyStars {
  display: block;
  margin-top: 4px;
  color: #f4d47e;
  letter-spacing: 1px;
}

.contractBountyBonusList,
.contractBountyBonusTiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contractBountyBonusList span {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(124, 168, 214, 0.14);
  color: #dcecff;
  font-size: 11px;
  font-weight: 700;
}

.contractBountyBonusTiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.contractBountyBonusTile {
  position: relative;
  min-height: 92px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(124, 168, 214, 0.24);
  background: rgba(7, 12, 18, 0.68);
}

.contractBountyBonusTile img {
  width: 100%;
  height: 92px;
  object-fit: contain;
  padding: 12px;
  display: block;
}

.contractBountyBonusOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 7px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 42%, rgba(0, 0, 0, 0.72));
}

.contractBountyBonusOverlay span {
  align-self: flex-start;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(7, 12, 18, 0.72);
  color: #f4d47e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.contractBountyBonusOverlay strong {
  color: #ffffff;
  font-size: 11px;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.taskSystemEmpty {
  padding: 14px;
  border-radius: 10px;
  background: rgba(7, 12, 18, 0.48);
  border: 1px solid rgba(111, 142, 176, 0.18);
  color: #c8dbf1;
  font-size: 12px;
}

#rightHubPanel {
  width: var(--ror-right-sidebar-width, 213px);
  height: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(12, 16, 22, 0.92);
  transition: height 180ms ease, border-color 180ms ease;
  position: relative;
  z-index: 3;
}

#rightHubPanel.expanded {
  height: calc(100vh - 286px);
  border-color: var(--line);
  overflow-y: hidden;
  padding: 8px;
}

.hubInventoryHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  padding: 6px 8px 2px;
  border-bottom: 1px solid rgba(136, 164, 198, 0.34);
}

.hubCollapseBtn {
  margin-left: auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(126, 157, 192, 0.65);
  border-radius: 5px;
  background: rgba(26, 35, 46, 0.9);
  color: #dcecff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: filter 140ms ease, background 140ms ease, border-color 140ms ease;
}

.hubCollapseBtn.collapsed {
  background: rgba(17, 25, 34, 0.92);
  border-color: rgba(103, 128, 157, 0.72);
}

.miniMapControls .hubCollapseBtn {
  margin-left: 2px;
}

.hubSlotsSection.collapsed .hubSlotsGrid {
  display: none;
}

.hubSkillsSection.collapsed .hubSkillsBody {
  display: none;
}

.hubBattleSection.collapsed .battleFilterRow,
.hubBattleSection.collapsed .battleListBody {
  display: none;
}

#miniMapCard.collapsed .miniMapBody {
  display: none;
}

.hubSlotsSection {
  border: 1px solid rgba(116, 144, 176, 0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 45, 58, 0.72), rgba(21, 29, 39, 0.72));
  padding: 6px 8px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 178px;
  min-height: 128px;
  max-height: 72vh;
  overflow: hidden;
}

.hubSlotsSection.collapsed {
  min-height: 0;
  overflow: hidden;
}

.monsterBagSection {
  margin-top: 10px;
}

.monsterBagIcon {
  background: linear-gradient(180deg, #7b6a55, #4e3f32);
  border-color: #c3a783;
}

.backpackWindowsRoot {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: auto;
}

.backpackWindowsRoot:empty {
  display: none !important;
}

body > .backpackWindowsRoot {
  position: fixed;
  right: 18px;
  top: 96px;
  z-index: 68;
  width: 224px;
  pointer-events: none;
  max-height: calc(100vh - 116px);
}

.backpackContainerPanel {
  pointer-events: auto;
  width: 224px;
  max-height: 48vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(116, 144, 176, 0.46);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(32, 42, 55, 0.96), rgba(14, 20, 29, 0.96));
  padding: 7px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
}

.backpackContainerHead {
  display: grid;
  grid-template-columns: 1fr 26px 26px;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.backpackContainerIcon {
  width: 26px;
  height: 26px;
  image-rendering: pixelated;
}

.backpackContainerTitle {
  color: #e6f1ff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.backpackContainerMeta {
  color: #98acc4;
  font-size: 10px;
}

body:not(.mobile-ui) .backpackContainerMeta {
  display: none !important;
}

.backpackCloseBtn {
  width: 24px;
  height: 24px;
  font-size: 13px;
}

.backpackMinimizeBtn {
  width: 24px;
  height: 24px;
  font-size: 16px;
}

.backpackContainerPanel.collapsed {
  max-height: none;
  overflow: hidden;
}

.backpackContainerPanel.collapsed .backpackSearchInput,
.backpackContainerPanel.collapsed .backpackContainerGrid {
  display: none;
}

.backpackSearchInput {
  width: 100%;
  margin-bottom: 7px;
  border: 1px solid rgba(120, 150, 184, 0.5);
  border-radius: 6px;
  background: rgba(8, 13, 20, 0.86);
  color: #e6f1ff;
  padding: 5px 7px;
  font-size: 12px;
}

.backpackContainerGrid {
  grid-template-columns: repeat(4, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
  align-content: start;
  justify-content: start;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

.backpackContainerSlot.search-match {
  border-color: #f8d27c;
  box-shadow:
    inset 0 0 0 1px rgba(248, 210, 124, 0.45),
    0 0 0 2px rgba(248, 210, 124, 0.2);
}

.hubSkillsSection {
  margin-top: 10px;
  border: 1px solid rgba(116, 144, 176, 0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 45, 58, 0.72), rgba(21, 29, 39, 0.72));
  padding: 6px 8px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 360px;
  min-height: 230px;
  max-height: 72vh;
  overflow: hidden;
}

.hubSkillsSection.collapsed {
  height: auto;
  min-height: 0;
}

.hubBattleSection {
  margin-top: 10px;
  border: 1px solid rgba(116, 144, 176, 0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 45, 58, 0.72), rgba(21, 29, 39, 0.72));
  padding: 6px 8px 8px;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 340px;
  min-height: 220px;
  max-height: 72vh;
  overflow: hidden;
}

.hubBattleSection.collapsed {
  height: auto;
  min-height: 0;
}

.battleBagIcon {
  background: linear-gradient(180deg, #7f4d4d, #532c2c);
  border-color: #d6a2a2;
}

.battleListCount {
  margin-left: auto;
  margin-right: 8px;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(10, 16, 23, 0.82);
  color: #ffe0ca;
  font-size: 11px;
  text-align: center;
}

.battleFilterRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.battleFilterToggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  min-width: 30px;
  min-height: 24px;
  border: 1px solid rgba(121, 151, 185, 0.34);
  border-radius: 999px;
  background: rgba(9, 14, 20, 0.58);
  color: #dbe8f6;
  font-size: 11px;
}

.battleFilterToggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  accent-color: #d89271;
}

.battleFilterIcon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  filter: saturate(0.65) brightness(0.9);
}

.battleFilterToggle input:checked + .battleFilterIcon {
  filter: saturate(1.2) brightness(1.15);
}

.battleFilterIcon::before,
.battleFilterIcon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.battleFilterIcon-player::before {
  left: 5px;
  top: 1px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #9ed5ff;
  box-shadow: 0 0 0 1px #1e3244;
}

.battleFilterIcon-player::after {
  left: 2px;
  bottom: 1px;
  width: 12px;
  height: 8px;
  border-radius: 7px 7px 3px 3px;
  background: #5f95c9;
  box-shadow: 0 0 0 1px #1e3244;
}

.battleFilterIcon-npc::before {
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border: 1px solid #24472d;
  border-radius: 2px;
  background: #9af0b2;
}

.battleFilterIcon-npc::after {
  left: 6px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #14321a;
}

.battleFilterIcon-monster::before {
  left: 1px;
  top: 3px;
  width: 14px;
  height: 12px;
  clip-path: polygon(0 35%, 18% 35%, 25% 0, 38% 35%, 62% 35%, 75% 0, 82% 35%, 100% 35%, 90% 100%, 10% 100%);
  border: 1px solid #5b1b16;
  background: #ff8f7d;
}

.battleFilterIcon-monster::after {
  left: 4px;
  top: 8px;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: #220b08;
  box-shadow: 6px 0 0 #220b08;
}

.battleListBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 0;
  margin-right: 0;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.battleListEntry {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  flex: 0 0 auto;
  box-sizing: border-box;
  appearance: none;
  margin: 0;
  border: 1px solid #15191d;
  border-radius: 2px;
  background: #30353a;
  color: #e7e1d3;
  padding: 3px 4px;
  text-align: left;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.battleListEntry:hover {
  border-color: #8e8a78;
  background: #3b4044;
}

.battleListEntry.selected {
  border-color: #d5a43a;
  background: #493c2a;
  box-shadow: inset 3px 0 0 #d65b35;
}

.battleListEntry.self:not(.selected) {
  border-color: #617663;
}

.battleListEntryIcon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  box-sizing: border-box;
  border: 1px solid #16191b;
  background: #202529;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.battleListEntrySprite {
  display: block;
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}

.battleListEntryContent {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.battleListEntryName {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #f0eadc;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-shadow: 1px 1px 0 #111;
}

.battleListHp {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
  margin-top: 3px;
  box-sizing: border-box;
  border: 1px solid #090b0c;
  border-radius: 1px;
  background: #171a1b;
  overflow: hidden;
}

.battleListHpFill {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}

.battleListHpText {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f8fff2;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 10px;
  text-shadow: 0 1px 1px #000, 1px 0 1px #000;
  pointer-events: none;
}

.battleListEntry.hp-high .battleListHpFill {
  background: #319c20;
}

.battleListEntry.hp-mid .battleListHpFill {
  background: #c5a817;
}

.battleListEntry.hp-low .battleListHpFill {
  background: #b52c24;
}

.battleListEntry.hp-none .battleListHpFill {
  width: 0 !important;
}

.battleListHp.high .battleListHpFill {
  background: #319c20;
}

.battleListHp.medium .battleListHpFill {
  background: #c5a817;
}

.battleListHp.low .battleListHpFill {
  background: #b52c24;
}

.battleListHp.unknown .battleListHpFill {
  width: 0 !important;
}

.battleListEmpty {
  padding: 14px 8px;
  color: #a9bfd9;
  font-size: 12px;
  text-align: center;
}

.hubBagIcon {
  width: 24px;
  height: 24px;
  border: 1px solid #9fb8d4;
  border-radius: 5px;
  background: linear-gradient(180deg, #738ca8, #4f657d);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(220, 236, 255, 0.2);
}

.hubBagIcon::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 6px;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  border: 1px solid #9fb8d4;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.hubSkillsIcon {
  width: 24px;
  height: 24px;
  border: 1px solid #9fb8d4;
  border-radius: 5px;
  background: linear-gradient(180deg, #6f89a7, #4d6480);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(220, 236, 255, 0.2);
}

.hubSkillsIcon::before,
.hubSkillsIcon::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  left: 6px;
  top: 11px;
  background: rgba(230, 242, 255, 0.9);
  border-radius: 2px;
}

.hubSkillsIcon::before {
  transform: rotate(45deg);
}

.hubSkillsIcon::after {
  transform: rotate(-45deg);
}

.hubBagTitle {
  font-size: 15px;
  font-weight: 700;
  color: #ddeaff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.hubHungerLabel {
  font-size: 11px;
  color: #d5e4f8;
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px solid rgba(130, 160, 194, 0.36);
  border-radius: 7px;
  background: rgba(35, 47, 62, 0.54);
}

.hubSlotsGrid {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  grid-auto-rows: 42px;
  grid-auto-flow: row;
  align-content: start;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: auto;
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
  margin-right: 0;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.hubSlot {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  overflow: hidden;
  border: 1px solid #4c647d;
  border-radius: 6px;
  background: linear-gradient(180deg, #111a24, #090f16);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 42px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.hubSlot::before {
  content: none;
  display: none;
  pointer-events: none;
}

.hubSlot:hover {
  transform: none;
  filter: brightness(1.1);
  border-color: #7592b3;
}

.hubSlot.dragging {
  transform: scale(0.96);
  filter: brightness(1.2);
  border-color: #8fc2ff;
  box-shadow:
    inset 0 0 0 1px rgba(184, 224, 255, 0.45),
    0 0 0 2px rgba(93, 153, 222, 0.34),
    0 8px 20px rgba(5, 14, 26, 0.42);
}

.hubSlot.drag-over-inventory {
  transform: none;
  border-color: #a6d7ff;
  box-shadow:
    inset 0 0 0 1px rgba(187, 228, 255, 0.5),
    0 0 0 2px rgba(113, 182, 255, 0.34),
    0 8px 22px rgba(9, 23, 40, 0.45);
}

.hotbarSlot.drag-over-inventory {
  border-color: #a6d7ff;
  box-shadow:
    inset 0 0 0 1px rgba(187, 228, 255, 0.5),
    0 0 0 2px rgba(113, 182, 255, 0.34);
}

.hubSlot.empty {
  background: linear-gradient(180deg, #0e151d, #070b11);
  border-style: dashed;
  border-color: rgba(76, 100, 125, 0.82);
  box-shadow: none;
}

.hubSlot.bound {
  border-color: rgba(233, 196, 112, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(233, 196, 112, 0.18),
    0 0 0 1px rgba(233, 196, 112, 0.18);
}

.hubSlot::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.34);
  pointer-events: none;
}

.hubSlot canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.hubSlotQty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  min-width: 22px;
  padding: 0 2px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 12px;
  color: #e7f2ff;
  text-align: right;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(132, 182, 237, 0.48);
  font-weight: 800;
  letter-spacing: -0.2px;
  pointer-events: none;
  z-index: 3;
}

.hubSkillsBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 0;
  margin-right: 0;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.hubSkillsBody::-webkit-scrollbar {
  width: 8px;
}

.hubSkillsBody::-webkit-scrollbar-track {
  background: rgba(10, 15, 22, 0.8);
  border-radius: 999px;
}

.hubSkillsBody::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7ca8d6, #4d6f95);
  border-radius: 999px;
  border: 1px solid rgba(190, 219, 248, 0.35);
}

.hubSkillsBody::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8ebbe7, #5d82aa);
}

.skillRow {
  border: 1px solid rgba(90, 116, 145, 0.5);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(16, 24, 34, 0.92), rgba(10, 16, 24, 0.92));
  padding: 6px;
}

.skillTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  margin-bottom: 5px;
  gap: 8px;
}

.skillName {
  color: #dcecff;
  font-weight: 700;
}

.skillLevel {
  color: #aecdff;
  font-weight: 700;
  min-width: 48px;
  text-align: right;
  font-size: 10px;
}

.skillBar {
  position: relative;
  width: 100%;
  height: 12px;
  border: 1px solid rgba(88, 115, 145, 0.62);
  border-radius: 999px;
  background: rgba(6, 10, 16, 0.9);
  overflow: hidden;
}

.skillFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6ea8e9, #96cbff);
  box-shadow: 0 0 8px rgba(110, 168, 233, 0.45);
  transition: width 220ms ease;
}

.skillPct {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f1f6ff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  pointer-events: none;
}

.skillFill.stamina-bonus {
  background: linear-gradient(90deg, #47d072, #9bf2b4);
  box-shadow: 0 0 8px rgba(71, 208, 114, 0.5);
}

.skillFill.stamina-yellow {
  background: linear-gradient(90deg, #e3c54f, #ffeb96);
  box-shadow: 0 0 8px rgba(227, 197, 79, 0.5);
}

.skillFill.stamina-orange {
  background: linear-gradient(90deg, #dc8e39, #ffbe7a);
  box-shadow: 0 0 8px rgba(220, 142, 57, 0.5);
}

.skillFill.stamina-red {
  background: linear-gradient(90deg, #d44a4a, #ff9a9a);
  box-shadow: 0 0 8px rgba(212, 74, 74, 0.5);
}

.merchantRow {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid rgba(120, 149, 181, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 29, 40, 0.96), rgba(12, 19, 28, 0.96));
  box-shadow: inset 0 0 0 1px rgba(187, 214, 241, 0.08);
}

.merchantIcon {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(141, 171, 206, 0.62);
  border-radius: 7px;
  background: rgba(8, 12, 18, 0.74);
  padding: 2px;
  image-rendering: pixelated;
}

.merchantLabel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.merchantLabel strong {
  font-size: 13px;
  color: #e6f2ff;
}

.merchantLabel span {
  font-size: 11px;
  color: #bcd3ec;
}

.merchantBuyBtn {
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(124, 173, 227, 0.72);
  border-radius: 8px;
  background: linear-gradient(180deg, #3f6591, #304f74);
  color: #eaf4ff;
}

.merchantBuyBtn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.itemContextMenu {
  position: fixed;
  z-index: 100;
  min-width: 132px;
  background: rgba(9, 13, 20, 0.96);
  border: 1px solid #647792;
  border-radius: 6px;
  padding: 6px;
  display: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.itemQuickMenu {
  position: fixed;
  z-index: 112;
  display: none;
  min-width: 178px;
  max-width: min(260px, calc(100vw - 16px));
  overflow: hidden;
  border: 1px solid rgba(126, 157, 192, 0.72);
  border-radius: 8px;
  background: rgba(11, 16, 24, 0.96);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.42);
}

.itemQuickMenu.open {
  display: block;
}

.itemQuickTitle {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(96, 121, 151, 0.38);
  color: #eaf3ff;
  font-size: 12px;
  font-weight: 800;
}

.itemQuickMenu button {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-bottom: 1px solid rgba(86, 110, 141, 0.42);
  background: rgba(18, 27, 39, 0.96);
  color: #edf5ff;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
}

.itemQuickMenu button:hover {
  background: rgba(35, 51, 72, 0.96);
}

.itemContextMenu.open {
  display: block;
}

.itemContextMenu button {
  width: 100%;
  margin: 0;
  height: 30px;
  text-align: left;
  font-size: 12px;
}

.itemContextMenu button + button {
  margin-top: 4px;
}

.itemHoverTooltip {
  position: fixed;
  z-index: 140;
  display: none;
  max-width: min(420px, 46vw);
  padding: 10px 12px;
  border: 1px solid rgba(132, 166, 204, 0.62);
  border-radius: 10px;
  background:
    radial-gradient(circle at top left, rgba(102, 149, 205, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(13, 20, 30, 0.98), rgba(7, 12, 19, 0.98));
  color: #e8f3ff;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  pointer-events: none;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.48),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.itemHoverTooltip.open {
  display: block;
}

.merchantModal {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(5, 9, 14, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.merchantModal.open {
  display: flex;
}

.merchantModalCard {
  width: min(500px, 94vw);
  max-height: 82vh;
  overflow-y: auto;
  border: 1px solid rgba(118, 150, 186, 0.62);
  border-radius: 12px;
  background:
    radial-gradient(circle at 14% 10%, rgba(106, 152, 208, 0.13), transparent 36%),
    linear-gradient(180deg, rgba(16, 24, 35, 0.98), rgba(9, 15, 23, 0.98));
  padding: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
}

.merchantModalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(123, 156, 192, 0.38);
}

.merchantModalHeadText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.merchantModalTitle {
  color: #e9f3ff;
  font-size: 16px;
  font-weight: 700;
}

.merchantModalSubtitle {
  color: #b8d1ec;
  font-size: 11px;
}

.merchantModalClose {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(128, 159, 194, 0.62);
  border-radius: 8px;
  background: linear-gradient(180deg, #2b3c52, #1f2d40);
  font-weight: 700;
}

.merchantModalBody {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tradeModalCard {
  width: min(980px, 96vw);
  max-height: 90vh;
}

.tradePartySummary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.tradePartyCard {
  border: 1px solid rgba(118, 150, 186, 0.38);
  border-radius: 10px;
  background: rgba(10, 16, 24, 0.72);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tradePartyCard strong {
  color: #edf5ff;
  font-size: 14px;
}

.tradePartyCard span {
  color: #a7c0dc;
  font-size: 12px;
}

.tradePartyCard.self {
  border-color: rgba(112, 182, 129, 0.5);
}

.tradePartyCard.other {
  border-color: rgba(196, 132, 102, 0.5);
}

.tradeColumns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.tradeOfferPanel,
.tradeInventoryPanel {
  border: 1px solid rgba(118, 150, 186, 0.34);
  border-radius: 10px;
  background: rgba(9, 14, 21, 0.78);
  padding: 10px;
}

.tradePanelTitle {
  display: block;
  color: #edf4ff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.tradeOfferList,
.tradeInventoryList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tradeInventoryList {
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.tradeEmptyState {
  padding: 12px 8px;
  color: #9eb8d4;
  font-size: 12px;
  text-align: center;
}

.tradeOfferRow,
.tradeInventoryRow {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(118, 150, 186, 0.22);
  border-radius: 8px;
  background: rgba(14, 21, 30, 0.82);
  padding: 8px;
}

.tradeInventoryRow {
  grid-template-columns: 28px minmax(0, 1fr) 74px auto;
}

.tradeOfferIcon {
  width: 28px;
  height: 28px;
}

.tradeOfferMeta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tradeOfferMeta strong {
  color: #eef5ff;
  font-size: 12px;
}

.tradeOfferMeta span {
  color: #a3bbd4;
  font-size: 11px;
}

.tradeInlineBtn {
  padding: 6px 10px;
  min-width: 86px;
  font-size: 11px;
}

.tradeInventoryHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.tradeInventoryHead input,
.tradeQtyInput {
  border: 1px solid rgba(120, 150, 183, 0.42);
  border-radius: 7px;
  background: rgba(6, 10, 16, 0.78);
  color: #eef4ff;
  padding: 7px 8px;
}

.tradeInventoryHead input {
  width: min(230px, 42vw);
}

.tradeQtyInput {
  width: 74px;
}

.tradeActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .tradePartySummary,
  .tradeColumns {
    grid-template-columns: 1fr;
  }

  .tradeInventoryHead {
    flex-direction: column;
    align-items: stretch;
  }

  .tradeInventoryHead input {
    width: 100%;
  }

  .tradeActions {
    flex-direction: column;
  }
}

.marketModalCard {
  width: min(1120px, 96vw);
  max-height: 90vh;
}

.marketTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.marketTabBtn {
  min-width: 124px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.marketTabBtn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.marketTabBtn.active {
  border-color: rgba(159, 201, 247, 0.86);
  background: linear-gradient(180deg, rgba(65, 95, 127, 0.95), rgba(43, 68, 95, 0.95));
}

.marketPanel {
  display: none;
}

.marketPanel.active {
  display: block;
}

.marketBoard {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 10px;
}

.marketLeft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.marketSearch {
  border: 1px solid rgba(120, 152, 186, 0.72);
  border-radius: 8px;
  background: rgba(7, 11, 17, 0.9);
  color: #e7f3ff;
  padding: 8px 10px;
}

.marketItemList {
  flex: 1 1 auto;
  min-height: 220px;
  max-height: 49vh;
  overflow-y: auto;
  border: 1px solid rgba(111, 145, 182, 0.46);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 29, 40, 0.9), rgba(12, 19, 28, 0.9));
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.marketItemBtn {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(109, 142, 178, 0.56);
  border-radius: 7px;
  background: rgba(28, 40, 56, 0.8);
  font-size: 12px;
  padding: 7px 8px;
}

.marketItemBtn.active {
  border-color: rgba(152, 198, 244, 0.9);
  background: linear-gradient(180deg, rgba(63, 93, 124, 0.88), rgba(44, 69, 97, 0.88));
}

.marketItemDetail {
  border: 1px solid rgba(113, 146, 182, 0.52);
  border-radius: 10px;
  background: rgba(13, 20, 30, 0.9);
  padding: 8px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: start;
}

.marketItemDetail canvas {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(141, 171, 206, 0.62);
  border-radius: 6px;
  background: rgba(8, 12, 18, 0.74);
}

.marketItemDetailText {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.marketItemDetailText strong {
  font-size: 13px;
  color: #e6f2ff;
}

.marketItemDetailText span {
  font-size: 11px;
  color: #b8d1ec;
  line-height: 1.25;
}

.marketRight {
  display: grid;
  grid-template-rows: minmax(180px, 1fr) minmax(180px, 1fr) minmax(130px, 0.8fr);
  gap: 10px;
  min-height: 0;
}

.marketSection {
  border: 1px solid rgba(120, 149, 181, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 29, 40, 0.96), rgba(12, 19, 28, 0.96));
  box-shadow: inset 0 0 0 1px rgba(187, 214, 241, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px;
  gap: 7px;
}

.marketSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.marketSectionHead strong {
  font-size: 13px;
  color: #e6f2ff;
}

.marketSectionHead span {
  font-size: 10px;
  color: #9bbada;
}

.marketRows {
  min-height: 100px;
  max-height: 22vh;
  overflow-y: auto;
  border: 1px solid rgba(99, 128, 160, 0.44);
  border-radius: 8px;
  background: rgba(8, 13, 20, 0.68);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.marketTradeRow {
  border: 1px solid rgba(100, 130, 162, 0.45);
  border-radius: 7px;
  background: rgba(19, 28, 40, 0.9);
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.marketTradeInfo {
  font-size: 11px;
  color: #d4e6fb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.marketActionBtn {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.marketPostRow {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 80px auto;
  gap: 6px;
}

.marketPriceInput,
.marketQtyInput {
  border: 1px solid rgba(120, 152, 186, 0.72);
  border-radius: 8px;
  background: rgba(7, 11, 17, 0.9);
  color: #e7f3ff;
  padding: 7px 8px;
  font-size: 12px;
}

.marketEmpty {
  font-size: 11px;
  color: #9ebddb;
  padding: 5px 6px;
}

.marketHistoryRow {
  border: 1px solid rgba(96, 124, 155, 0.45);
  border-radius: 6px;
  background: rgba(15, 22, 33, 0.82);
  padding: 6px;
  font-size: 11px;
  color: #cbe0f7;
  line-height: 1.25;
}

.rorTransferBoard {
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr);
  gap: 10px;
}

.rorTransferInputs {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px auto;
  gap: 8px;
}

.rorTransferHistorySection .marketRows {
  max-height: 52vh;
}

.rorModalCard {
  width: min(960px, 95vw);
  max-height: 88vh;
}

.rorSubtitle {
  color: #c9dbef;
  font-size: 12px;
}

.rorPackages {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px;
}

.rorPackage {
  border: 1px solid rgba(117, 148, 181, 0.55);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(25, 36, 51, 0.95), rgba(13, 21, 31, 0.95));
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  overflow: hidden;
}

.rorPackage::before {
  content: "";
  position: absolute;
  inset: -40% 55% auto -20%;
  height: 120px;
  background: radial-gradient(circle, rgba(255, 214, 92, 0.34), transparent 70%);
  pointer-events: none;
}

.rorPackHead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rorPackHead img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
}

.rorPackHead strong {
  font-size: 15px;
  color: #f0f7ff;
}

.rorPackPrice {
  font-size: 14px;
  color: #ffd786;
  font-weight: 700;
}

.rorPackBonus {
  font-size: 12px;
  color: #9bd0ff;
}

.rorPayWrap {
  margin-top: 10px;
  border: 1px solid rgba(115, 149, 186, 0.5);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(19, 29, 42, 0.95), rgba(11, 18, 27, 0.95));
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rorPayText {
  font-size: 12px;
  color: #c8dcf2;
}

.rorCopyBtn {
  min-width: 140px;
  font-weight: 700;
}

.skinShopCoins {
  padding: 8px 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(121, 163, 210, 0.5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 31, 44, 0.85), rgba(12, 20, 30, 0.85));
  color: #e3f0ff;
  font-size: 13px;
  font-weight: 700;
}

.skinShopList {
  max-height: min(56vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}

.skinShopTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.skinShopTabs button {
  flex: 1;
  min-height: 30px;
  border: 1px solid rgba(121, 163, 210, 0.45);
  border-radius: 7px;
  background: rgba(15, 24, 35, 0.9);
  color: #b8d1ec;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.skinShopTabs button.active {
  border-color: rgba(143, 209, 255, 0.8);
  background: rgba(38, 72, 104, 0.9);
  color: #ffffff;
}

.serverShopGroupTitle {
  margin: 10px 0 6px;
  color: #e6f2ff;
  font-size: 13px;
  font-weight: 800;
}

.skinShopList::-webkit-scrollbar {
  width: 8px;
}

.skinShopList::-webkit-scrollbar-thumb {
  background: rgba(132, 168, 208, 0.5);
  border-radius: 8px;
}

.skinShopDefaultRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(111, 145, 182, 0.46);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 29, 40, 0.96), rgba(12, 19, 28, 0.96));
}

.skinShopDefaultLabel {
  color: #d5e7fb;
  font-size: 12px;
  font-weight: 700;
}

.skinShopRow {
  display: grid;
  grid-template-columns: 66px 1fr auto;
  align-items: center;
  column-gap: 10px;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid rgba(120, 149, 181, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 29, 40, 0.96), rgba(12, 19, 28, 0.96));
  box-shadow: inset 0 0 0 1px rgba(187, 214, 241, 0.08);
}

.skinShopPreview {
  width: 64px;
  height: 82px;
  border: 1px solid rgba(141, 171, 206, 0.62);
  border-radius: 7px;
  background: rgba(8, 12, 18, 0.74);
  image-rendering: pixelated;
}

.serverShopPreview {
  object-fit: contain;
  padding: 6px;
}

.skinShopLabel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.skinShopLabel strong {
  color: #e6f2ff;
  font-size: 13px;
}

.skinShopLabel span {
  color: #b8d1ec;
  font-size: 11px;
}

.skinShopStatus {
  color: #8fd1ff;
  font-size: 11px;
  font-weight: 700;
}

.npcModal {
  position: fixed;
  inset: 0;
  z-index: 96;
  background: rgba(5, 9, 14, 0.62);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.npcModal.open {
  display: flex;
}

.npcModalCard {
  width: min(500px, 94vw);
  max-height: 82vh;
}

.npcModalBody {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.npcActionList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.npcActionRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.npcTradeRows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.npcTradeTotal {
  padding: 8px 10px;
  border: 1px solid rgba(111, 145, 182, 0.42);
  border-radius: 8px;
  background: rgba(10, 16, 24, 0.74);
  color: #dbeaff;
  font-size: 12px;
}

.npcWideBtn {
  width: 100%;
}

.lootSellerRow {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.npcPotionRow {
  grid-template-columns: 42px minmax(0, 1fr) 86px auto auto;
}

.npcTradeQtyInput {
  width: 100%;
  height: 32px;
  min-width: 72px;
  border: 1px solid rgba(124, 173, 227, 0.62);
  border-radius: 8px;
  background: rgba(7, 12, 19, 0.92);
  color: #eaf4ff;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.npcGoldPanel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(111, 145, 182, 0.42);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14, 22, 32, 0.9), rgba(10, 16, 24, 0.9));
}

.npcGoldBalances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.npcAmountRow {
  display: grid;
  grid-template-columns: minmax(92px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.npcBankGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
  align-content: start;
  justify-content: start;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(111, 145, 182, 0.42);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(14, 22, 32, 0.9), rgba(10, 16, 24, 0.9));
  max-height: 340px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.npcBankGrid::-webkit-scrollbar {
  width: 9px;
}

.npcBankGrid::-webkit-scrollbar-track {
  background: rgba(9, 14, 20, 0.9);
  border-radius: 999px;
}

.npcBankGrid::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7ca8d6, #4d6f95);
  border-radius: 999px;
  border: 1px solid rgba(190, 219, 248, 0.35);
}

.npcBankGrid::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8ebbe7, #5d82aa);
}

.npcBankSlot {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  overflow: hidden;
  border: 1px solid rgba(108, 139, 173, 0.66);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(16, 23, 33, 0.96), rgba(8, 13, 20, 0.96));
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 42px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.28);
  transition: transform 120ms ease, filter 120ms ease, border-color 120ms ease;
}

.npcBankSlot:hover {
  transform: none;
  filter: brightness(1.08);
  border-color: #7592b3;
}

.npcBankSlot.empty {
  border-style: dashed;
  border-color: rgba(95, 123, 153, 0.72);
  box-shadow: none;
}

.npcBankSlot canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.npcBankSlot.dragging {
  transform: scale(0.96);
  filter: brightness(1.2);
  border-color: #8fc2ff;
}

.npcBankSlot.drag-over-inventory {
  transform: none;
  border-color: #a6d7ff;
  box-shadow:
    inset 0 0 0 1px rgba(187, 228, 255, 0.5),
    0 0 0 2px rgba(113, 182, 255, 0.34),
    0 8px 22px rgba(9, 23, 40, 0.45);
}

.npcBankSlotQty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 10px;
  color: #e7f2ff;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

.npcBankTip {
  margin-bottom: 2px;
}

.banqueiroModal {
  pointer-events: none;
  background: transparent;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 16px 238px 16px 16px;
}

.banqueiroModal .merchantModalCard {
  pointer-events: auto;
  width: min(760px, calc(100vw - 270px));
  max-height: calc(100vh - 88px);
  overflow: hidden;
  margin-top: 56px;
}

.hotkeyPromptModal {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(6, 10, 16, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.hotbarItemPickerModal {
  position: fixed;
  inset: 0;
  z-index: 112;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.42);
}

.hotbarItemPickerModal.open {
  display: flex;
}

.hotbarItemPickerCard {
  width: min(420px, calc(100vw - 28px));
  border: 1px solid rgba(126, 157, 192, 0.72);
  border-radius: 10px;
  background: rgba(11, 16, 24, 0.98);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5);
  padding: 14px;
  display: flex;
  flex-direction: column;
  max-height: min(78vh, calc(100vh - 28px));
}

.hotbarItemPickerTitle {
  display: block;
  color: #edf5ff;
  font-size: 13px;
  margin-bottom: 10px;
}

.hotbarItemPickerGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.hotbarItemPickerSlot,
.hotbarItemPickerCancel {
  border: 1px solid rgba(124, 157, 191, 0.58);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(39, 56, 76, 0.96), rgba(21, 31, 44, 0.96));
  color: #eef6ff;
  padding: 8px;
  cursor: pointer;
}

.hotbarItemPickerSlot {
  min-height: 58px;
  text-align: left;
}

.hotbarItemPickerSlot strong,
.hotbarItemPickerSlot span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hotbarItemPickerSlot span {
  margin-top: 4px;
  color: #aecaed;
  font-size: 11px;
}

.hotbarActionPickerSlot {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
}

.hotbarActionPickerSlot canvas {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

.hotbarItemPickerEmpty {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px dashed rgba(124, 157, 191, 0.38);
  border-radius: 8px;
  color: #bdd5ef;
  text-align: center;
  background: rgba(20, 30, 42, 0.5);
}

.hotbarActionPickerSlot strong,
.hotbarActionPickerSlot span {
  min-width: 0;
}

.hotbarItemPickerCancel {
  width: 100%;
  margin-top: 10px;
}

.hotkeyPromptModal.open {
  display: flex;
}

.hotkeyPromptCard {
  width: min(360px, 94vw);
  border: 1px solid rgba(130, 160, 194, 0.62);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 30, 42, 0.98), rgba(11, 18, 27, 0.98));
  padding: 14px;
  text-align: center;
}

.hotkeyPromptTitle {
  font-size: 15px;
  font-weight: 700;
  color: #e3f0ff;
  margin-bottom: 6px;
}

.hotkeyPromptLabel {
  font-size: 13px;
  color: #bdd5ef;
  margin-bottom: 8px;
}

.hotkeyPromptHint {
  font-size: 11px;
  color: #97b3d1;
}

.hotbarContextMenu {
  position: fixed;
  z-index: 105;
  min-width: 142px;
  background: rgba(10, 14, 20, 0.96);
  border: 1px solid rgba(116, 144, 176, 0.74);
  border-radius: 7px;
  padding: 6px;
  display: none;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
}

.hotbarContextMenu.open {
  display: block;
}

.hotbarContextMenu button {
  width: 100%;
  height: 30px;
  margin: 0;
  text-align: left;
  font-size: 12px;
}

.hotbarHub {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 65;
  padding: 5px 7px 7px;
  border: 1px solid rgba(110, 140, 174, 0.52);
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% -25%, rgba(150, 188, 227, 0.15), transparent 62%),
    linear-gradient(180deg, rgba(20, 29, 40, 0.96), rgba(11, 17, 25, 0.96));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.hotbarExpandBtn {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(126, 157, 192, 0.75);
  border-radius: 7px;
  background: linear-gradient(180deg, #3a516d, #25364a);
  color: #e1efff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.hotbarExpandBtn.expanded {
  transform: translateX(-50%) rotate(-90deg);
}

.hotbarGrid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--hotbar-cols, 32), minmax(0, 1fr));
  gap: 4px;
}

.hotbarSlot {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(108, 139, 173, 0.66);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(16, 23, 33, 0.96), rgba(8, 13, 20, 0.96));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44);
}

.hotbarSlot.extra {
  display: none;
}

.hotbarHub.expanded .hotbarSlot.extra {
  display: flex;
}

.hotbarSlot.empty {
  border-style: dashed;
  border-color: rgba(95, 123, 153, 0.72);
}

.hotbarSlot.active {
  border-color: rgba(74, 222, 128, 0.92);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.7), 0 0 10px rgba(34, 197, 94, 0.28);
}

.hotbarSlot canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 5px;
}

.hotbarQty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 8px;
  color: #e7f2ff;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

.hotbarKey {
  position: absolute;
  left: 2px;
  top: 1px;
  font-size: 8px;
  color: #aac8e8;
  font-weight: 700;
  text-transform: uppercase;
  z-index: 2;
}

.hotbarCooldown {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 16, 0.8) 0%,
    rgba(6, 10, 16, 0.8) calc(var(--cdr-progress, 0) * 100%),
    rgba(6, 10, 16, 0.08) calc(var(--cdr-progress, 0) * 100%),
    rgba(6, 10, 16, 0.08) 100%
  );
  opacity: 0;
  transition: opacity 80ms linear;
  z-index: 1;
}

.hotbarCooldown.active {
  opacity: 1;
}

.hotbarCooldownText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #f1f6ff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  z-index: 2;
}

body.map-editor-dragging {
  user-select: none;
  cursor: move;
}

#gameLayout {
  position: fixed;
  inset: 0 10px var(--bottom-hud-space) 10px;
  z-index: 20;
  pointer-events: none;
}

#playArea {
  position: absolute;
  inset: 0;
}

#gameFrame {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: calc(100vw - (var(--hud-side-space) * 2));
  height: 100%;
  border: 2px solid rgba(123, 153, 190, 0.72);
  border-radius: 10px;
  background: #091019;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  pointer-events: auto;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: default;
}

#uiDock {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 85;
  transform: none;
  width: auto;
  height: auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
  pointer-events: auto;
}

#miniMapCanvas {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

#dockActionRow {
  width: 26px;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

#dockActionRow button {
  width: 26px;
  height: 58px;
  padding: 0;
}

#hubToggleBtn,
#rightPullToggleBtn,
#leftPullToggleBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(126, 157, 192, 0.74);
  border-radius: 8px;
  background: linear-gradient(180deg, #3a516d, #25364a);
  color: #e1efff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

#rightHubPanel {
  height: 100%;
  width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(12, 16, 22, 0.94);
  transition: width 180ms ease, border-color 180ms ease, padding 180ms ease;
}

#rightHubPanel.expanded {
  width: var(--ror-right-sidebar-width, 213px);
  height: 100%;
  padding: 10px;
  border-color: var(--line);
  overflow-y: hidden;
}

#rightHubPanel #miniMapCard {
  margin-bottom: 8px;
}

.hubHungerLabel {
  margin-bottom: 8px;
}

#rightPullHub {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 85;
  transform: none;
  height: auto;
  pointer-events: auto;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

#leftPullHub {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 85;
  transform: none;
  height: auto;
  pointer-events: auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 6px;
}

#leftPullToggleBtn {
  position: relative;
  z-index: 6;
  flex: 0 0 26px;
}

#rightPullPanel {
  height: 100%;
  width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(12, 16, 22, 0.94);
  transition: width 180ms ease, border-color 180ms ease, padding 180ms ease;
  padding: 0;
}

#leftPullPanel {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(12, 16, 22, 0.94);
  transition: width 180ms ease, border-color 180ms ease, padding 180ms ease;
  padding: 0;
}

#leftHubContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 2px;
}

#rightPullHub.expanded #rightPullPanel {
  width: var(--ror-right-sidebar-width, 213px);
  border-color: var(--line);
  padding: 10px;
}

#leftPullHub.expanded #leftPullPanel {
  width: var(--ror-left-sidebar-width, 213px);
  border-color: var(--line);
  padding: 10px;
}

#rightHubActionRow {
  display: grid;
  grid-template-columns: 40px 52px 1fr;
  gap: 5px;
  margin-bottom: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  height: 34px;
  max-height: 34px;
  padding: 4px 6px;
  box-sizing: border-box;
}

#rightHubActionRow button {
  height: 24px;
  min-height: 24px;
  max-height: 24px;
  padding: 0 8px;
  font-size: 12px;
}

#marketBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  background: linear-gradient(180deg, #4c6a2f, #36501f);
  border-color: rgba(186, 220, 135, 0.72);
}

.shopBtnIcon {
  font-size: 16px;
  line-height: 1;
}

.rorBtnIcon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;
}

#rightHubContent {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 2px;
}

.dockZone {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

#leftHubContent > .hubSlotsSection,
#rightHubContent > .hubSlotsSection,
#leftHubContent > .hubSkillsSection,
#rightHubContent > .hubSkillsSection,
#leftHubContent > .hubBattleSection,
#rightHubContent > .hubBattleSection,
#leftHubContent > .backpackWindowsRoot,
#rightHubContent > .backpackWindowsRoot,
.dockZone > .hubSlotsSection,
.dockZone > .hubSkillsSection,
.dockZone > .hubBattleSection,
.dockZone > .backpackWindowsRoot {
  flex: 1 1 0;
  min-height: 0;
}

#rightHubActionRow,
#miniMapCard,
.equipHubCard,
.hubHungerLabel {
  flex: 0 0 auto;
}

.dockZone.drag-over {
  outline: 1px dashed rgba(164, 202, 240, 0.65);
  outline-offset: -2px;
}

.dockItem {
  cursor: grab;
}

.dockItem.hubSlotsSection {
  cursor: auto;
}

.dockItem.hubBattleSection {
  cursor: auto;
}

.dockItem.hubSkillsSection {
  cursor: auto;
}

.dockItem.equipHubCard {
  cursor: auto;
}

.dockItem.hubSlotsSection .hubInventoryHeader,
.dockItem.hubSkillsSection .hubInventoryHeader,
.dockItem.equipHubCard .hubInventoryHeader,
.dockItem.hubBattleSection .hubInventoryHeader {
  cursor: grab;
}

.dockItem .miniMapHeader,
.dockItem .backpackContainerHead {
  cursor: grab;
}

.dockItem.dragging {
  opacity: 0.65;
  cursor: grabbing;
}

.dockItem.rorFixedDockItem,
.dockItem.rorFixedDockItem .hub-header,
.dockItem.rorFixedDockItem .hubInventoryHeader,
.dockItem.rorFixedDockItem .miniMapHeader,
.dockItem.rorFixedDockItem .backpackContainerHead,
.dockItem.rorFixedDockItem .rorDesktopPanelMenuHeader,
#rightHubActionRow,
#rorDesktopPanelMenuWindow {
  cursor: default !important;
}

.dockItem.rorFixedDockItem > .rorPcPanelResizeHandle {
  display: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

#rightHubActionRow button,
#rorDesktopPanelMenuWindow button {
  cursor: pointer !important;
}

.dockZone > .dockItem {
  margin: 0 !important;
}

.equipHubRow {
  display: flex;
  gap: 8px;
  align-items: start;
  width: 100%;
}

.equipHubCard {
  border: 1px solid rgba(116, 144, 176, 0.36);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(34, 45, 58, 0.72), rgba(21, 29, 39, 0.72));
  padding: 6px 8px 8px;
}

.equipHubCard.collapsed .equipHubBody {
  display: none;
}

.equipHubBody {
  margin-top: 2px;
}

.equipHubMain {
  flex: 1 1 auto;
  min-width: 0;
}

.equipMainGrid {
  display: grid;
  gap: 6px;
}

.equipMainRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.equipSlot {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(108, 139, 173, 0.66);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(16, 23, 33, 0.96), rgba(8, 13, 20, 0.96));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.44);
  display: flex;
  align-items: center;
  justify-content: center;
}

.equipSlot.empty canvas {
  opacity: 0.74;
  filter: saturate(0.72) brightness(0.88);
}

.equipSlot.expired canvas,
.mobileEquipmentSlot.expired canvas {
  opacity: 0.58;
  filter: grayscale(1) saturate(0.2) brightness(0.72);
}

.equipSlot.expired .hubSlotQty,
.mobileEquipmentSlot.expired .hubSlotQty {
  color: #ff8d8d;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(255, 48, 48, 0.7);
}

.equipSlot canvas {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}

.equipSlotSpacer {
  opacity: 0.35;
}

.equipAuxGrid {
  display: grid;
  grid-template-columns: repeat(2, 21px);
  grid-template-rows: repeat(3, 21px);
  gap: 5px;
  padding-top: 2px;
}

.equipAuxSlot {
  width: 21px;
  height: 21px;
  border: 1px solid rgba(108, 139, 173, 0.62);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(14, 20, 29, 0.95), rgba(9, 13, 19, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
}

.equipAuxSlot.equipAuxControl {
  padding: 0;
  cursor: pointer;
}

.equipAuxSlot.equipAuxControl:hover,
.equipAuxSlot.equipAuxControl.active {
  border-color: rgba(233, 196, 112, 0.9);
  background: linear-gradient(180deg, rgba(56, 43, 20, 0.96), rgba(18, 18, 15, 0.96));
  box-shadow: 0 0 8px rgba(233, 196, 112, 0.22), inset 0 0 0 1px rgba(255, 239, 178, 0.12);
}

.equipAuxSlot.equipAuxControl:disabled {
  cursor: default;
  opacity: 0.58;
}

.equipAuxSlot canvas {
  width: 17px;
  height: 17px;
  image-rendering: pixelated;
  opacity: 0.72;
  filter: saturate(0.7) brightness(0.86);
}

.equipAuxSlot.equipAuxControl canvas {
  opacity: 1;
  filter: none;
}

.rightHubHint {
  margin-top: 6px;
  color: #b6cee8;
  font-size: 12px;
  line-height: 1.3;
}

#bottomHud {
  position: fixed;
  left: var(--hud-side-space);
  right: var(--hud-side-space);
  bottom: 10px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: calc(100vw - (var(--hud-side-space) * 2));
  max-width: calc(100vw - (var(--hud-side-space) * 2));
  box-sizing: border-box;
  pointer-events: none;
}

#gameBottomResizeHandle {
  position: fixed;
  left: var(--ror-left-game-clearance, var(--hud-side-space));
  right: var(--ror-right-game-clearance, var(--hud-side-space));
  bottom: calc(var(--ror-bottom-chat-height, 176px) + 8px);
  height: 8px;
  z-index: 76;
  cursor: ns-resize;
  pointer-events: auto;
  touch-action: none;
}

#gameBottomResizeHandle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(132, 164, 202, 0.75), transparent);
  box-shadow: 0 0 6px rgba(132, 164, 202, 0.35);
}

#gameBottomResizeHandle:hover::before,
#gameBottomResizeHandle.dragging::before {
  height: 3px;
  top: 2px;
  background: linear-gradient(90deg, transparent, rgba(236, 198, 111, 0.92), transparent);
  box-shadow: 0 0 8px rgba(236, 198, 111, 0.48);
}

body.bottom-hud-resizing,
body.bottom-hud-resizing * {
  cursor: ns-resize !important;
  user-select: none !important;
}

body.mobile-ui #gameBottomResizeHandle {
  display: none !important;
}

#hotbarMount,
#chatBox {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: stretch;
  pointer-events: auto;
}

#chatBox {
  position: relative;
  left: auto;
  bottom: auto;
  border-radius: 10px;
  padding: 9px;
}

#chatLog {
  max-height: 128px;
}

.hotbarHub {
  position: relative;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  padding: 5px;
}

.hotbarExpandBtn {
  display: none;
}

.hotbarGrid {
  grid-template-columns: repeat(var(--hotbar-cols, 32), minmax(0, 1fr));
  justify-content: stretch;
  gap: 4px;
}

.hotbarSlot {
  width: 100%;
  min-width: 0;
}

.hotbarSlot.extra {
  display: flex;
}

#settingsPanel {
  z-index: 95;
}

@media (max-width: 1200px) {
  :root {
    --hud-side-space: 254px;
    --bottom-hud-space: 208px;
  }

  #gameLayout {
    inset: 0 8px var(--bottom-hud-space) 8px;
  }

  #gameFrame {
    width: calc(100vw - (var(--hud-side-space) * 2));
    height: 100%;
  }

  #uiDock {
    width: auto;
  }

  #rightHubPanel.expanded {
    width: var(--ror-right-sidebar-width, 213px);
  }

  #rightPullHub.expanded #rightPullPanel {
    width: var(--ror-right-sidebar-width, 213px);
  }

  #leftPullHub.expanded #leftPullPanel {
    width: var(--ror-left-sidebar-width, 213px);
  }

  #bottomHud {
    left: var(--hud-side-space);
    right: var(--hud-side-space);
  }

  .marketBoard {
    grid-template-columns: 1fr;
  }

  .marketLeft {
    min-height: 0;
  }

  .marketItemList {
    max-height: 220px;
  }

  .marketRight {
    grid-template-rows: auto auto auto;
  }

  .marketRows {
    max-height: 180px;
  }

  .rorPackages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.deviceModeActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.graphicsQualityCard {
  width: min(660px, 96vw);
}

.graphicsQualityActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.graphicsQualityOption {
  min-height: 118px;
  border: 1px solid rgba(124, 157, 191, 0.62);
  border-radius: 8px;
  padding: 12px;
  text-align: left;
  color: #e7f3ff;
  background: linear-gradient(180deg, rgba(34, 49, 66, 0.94), rgba(16, 24, 34, 0.94));
}

.graphicsQualityOption strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}

.graphicsQualityOption span {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  color: #b9d2ec;
}

.graphicsQualityOption.lite {
  border-color: rgba(100, 220, 155, 0.68);
  background: linear-gradient(180deg, rgba(26, 57, 47, 0.96), rgba(12, 25, 28, 0.96));
}

.graphicsQualityOption.ultra,
.graphicsQualityOption.xhigh {
  border-color: rgba(232, 195, 102, 0.72);
  background: linear-gradient(180deg, rgba(75, 50, 92, 0.94), rgba(31, 24, 46, 0.94));
}

.deviceModeActions button {
  min-height: 46px;
  font-weight: 700;
}

.deviceModeBackBtn {
  width: 100%;
  margin-top: 10px;
}

.deviceModeHint {
  margin-top: 10px;
  font-size: 12px;
  color: #b6cee8;
  line-height: 1.35;
}

@media (max-width: 620px) {
  .graphicsQualityActions {
    grid-template-columns: 1fr;
  }

  .graphicsQualityOption {
    min-height: 92px;
  }
}

#hudOverlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
}

#mobileHud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#mobileTopBar {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

#mobileVitalsCard,
#mobileTopButtons,
#mobileMapPanel,
#mobileInventoryPanel,
#mobileJoystickWrap {
  pointer-events: auto;
}

#mobileVitalsCard {
  width: min(132px, 31vw);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(119, 146, 181, 0.7);
  border-radius: 10px;
  background: rgba(10, 15, 23, 0.88);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.mobileStatRow {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 5px;
  font-size: 10px;
}

.mobileStatLabel {
  font-weight: 700;
  color: #e4eefb;
}

.mobileStatTrack {
  height: 8px;
  overflow: hidden;
  border: 1px solid rgba(101, 128, 160, 0.75);
  border-radius: 999px;
  background: rgba(3, 6, 10, 0.92);
}

.mobileStatFill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: width 140ms ease;
}

.mobileHpRow .mobileStatFill {
  background: linear-gradient(90deg, #b62e2e, #f56060);
}

.mobileMpRow .mobileStatFill {
  background: linear-gradient(90deg, #3160c2, #6ea9ff);
}

.mobileXpRow .mobileStatFill {
  background: linear-gradient(90deg, #8e7422, #f5d96a);
}

.mobileStatValue {
  text-align: right;
  color: #d8e6f7;
  font-weight: 700;
  font-size: 10px;
}

#mobileTopButtons {
  display: grid;
  grid-template-columns: repeat(8, 44px);
  gap: 6px;
}

#mobileTopButtons button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(126, 157, 192, 0.76);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(47, 67, 90, 0.96), rgba(24, 35, 48, 0.96));
  color: #e7f2ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
}

#mobileTopButtons button.active {
  border-color: rgba(244, 213, 121, 0.92);
  background: linear-gradient(180deg, rgba(112, 86, 37, 0.96), rgba(64, 46, 21, 0.96));
  color: #fff5d7;
}

#mobileMapPanel,
#mobileInventoryPanel {
  position: fixed;
  border: 1px solid rgba(119, 146, 181, 0.7);
  border-radius: 12px;
  background: rgba(10, 15, 23, 0.9);
  backdrop-filter: blur(7px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
}

#mobileMapPanel {
  top: 64px;
  right: 12px;
  width: 178px;
  padding: 8px;
}

#mobileMiniMapCanvas {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border: 1px solid rgba(86, 110, 142, 0.92);
  border-radius: 8px;
  background: #06090f;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 0 14px rgba(0, 0, 0, 0.42);
  image-rendering: pixelated;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
  cursor: grab;
}

#mobileInventoryPanel {
  top: 116px;
  right: 12px;
  width: min(42vw, 264px);
  padding: 8px;
}

.mobilePanelTitle {
  margin-bottom: 8px;
  color: #e2ecfa;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

#mobileInventoryGrid,
#mobileBackpackGrid,
#mobileMonsterBagGrid {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
  align-content: start;
  justify-content: start;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

#mobileInventoryGrid[hidden],
#mobileBackpackGrid[hidden] {
  display: none;
}

.mobileInventorySlot {
  position: relative;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(91, 117, 146, 0.82);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(17, 26, 38, 0.98), rgba(8, 13, 20, 0.98));
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
}

.mobileInventorySlot.empty {
  border-style: dashed;
  border-color: rgba(84, 106, 129, 0.72);
  box-shadow: none;
}

.mobileInventorySlot.bound {
  border-color: rgba(233, 196, 112, 0.78);
}

.mobileInventorySlot canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.mobileInventoryQty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: #e7f2ff;
  font-size: 10px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

#mobileJoystickWrap {
  position: fixed;
  left: 10px;
  bottom: 16px;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
}

#mobileJoystickBase {
  position: relative;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(129, 160, 196, 0.72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(132, 174, 220, 0.14) 0%, rgba(132, 174, 220, 0.05) 38%, rgba(8, 13, 19, 0.92) 78%),
    rgba(8, 13, 19, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(221, 238, 255, 0.06), 0 12px 24px rgba(0, 0, 0, 0.3);
  touch-action: none;
}

#mobileJoystickBase::before,
#mobileJoystickBase::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(166, 202, 238, 0.18);
  transform: translate(-50%, -50%);
}

#mobileJoystickBase::before {
  width: 1px;
  height: 90px;
}

#mobileJoystickBase::after {
  width: 90px;
  height: 1px;
}

#mobileJoystickKnob {
  --joy-x: 0px;
  --joy-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border: 1px solid rgba(182, 215, 248, 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(236, 247, 255, 0.95), rgba(107, 150, 196, 0.96) 54%, rgba(47, 81, 117, 0.98) 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: translate3d(var(--joy-x), var(--joy-y), 0);
  transition: transform 60ms linear;
}

body.mobile-ui {
  --hud-side-space: 0px;
  --bottom-hud-space: 0px;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.mobile-ui #gameLayout {
  inset: 0;
  pointer-events: auto;
}

body.mobile-ui #gameFrame {
  left: 0;
  top: 0;
  width: var(--mobile-locked-width, 100vw);
  height: var(--mobile-locked-height, 100vh);
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.mobile-ui #gameCanvas {
  width: var(--mobile-locked-width, 100vw);
  height: var(--mobile-locked-height, 100vh);
  cursor: default;
  touch-action: none;
}

body.mobile-ui #mobileHud {
  width: var(--mobile-locked-width, 100vw);
  height: var(--mobile-locked-height, 100vh);
}

body.mobile-ui.mobile-landscape-forced #gameLayout,
body.mobile-ui.mobile-landscape-forced #hudOverlay,
body.mobile-ui.mobile-landscape-forced #bottomHud {
  position: fixed;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  width: var(--mobile-locked-width, 100vh);
  height: var(--mobile-locked-height, 100vw);
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
}

body.mobile-ui.mobile-landscape-forced #gameFrame,
body.mobile-ui.mobile-landscape-forced #gameCanvas,
body.mobile-ui.mobile-landscape-forced #mobileHud {
  width: var(--mobile-locked-width, 100vh);
  height: var(--mobile-locked-height, 100vw);
}

body.mobile-ui #leftPullHub,
body.mobile-ui #rightPullHub,
body.mobile-ui #hotbarMount,
body.mobile-ui #mapEditor {
  display: none !important;
}

body.mobile-ui #bottomHud {
  position: fixed;
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  pointer-events: none;
  z-index: 121;
}

body.mobile-ui #chatBox {
  position: fixed;
  top: 12px;
  left: 152px;
  bottom: auto;
  width: min(42vw, 292px);
  max-width: calc(100vw - 250px);
  min-width: 162px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(9, 12, 16, 0.84);
  border-color: rgba(109, 136, 168, 0.72);
  backdrop-filter: blur(6px);
  z-index: 125;
}

body.mobile-ui #chatBox.mobileHidden {
  display: none !important;
}

body.mobile-ui #chatLog {
  max-height: 72px;
  margin-bottom: 6px;
  font-size: 11px;
}

body.mobile-ui #chatInput {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 12px;
}

body.mobile-ui #chatChannelSelect {
  width: 72px;
  min-height: 30px;
  font-size: 11px;
}

body.mobile-ui #settingsPanel {
  left: auto;
  right: 12px;
  top: 64px;
  width: min(94vw, 420px);
  height: auto;
  max-height: 75vh;
  transform: translateY(-8px);
}

body.mobile-ui #settingsPanel.expanded {
  transform: translateY(0);
}

body.mobile-ui #settingsPanel .panelTitle {
  padding: 12px;
}

body.mobile-ui #settingsPanelCloseBtn {
  display: none !important;
}

body.mobile-ui .taskSystemMetaGrid,
body.mobile-ui .taskSystemRuleList,
body.mobile-ui .taskSystemMiniGrid,
body.mobile-ui .taskSystemCatalogGrid,
body.mobile-ui .charmCatalogGrid,
body.mobile-ui .contractBountyGrid,
body.mobile-ui .contractBountyHero .taskSystemMetaGrid {
  grid-template-columns: minmax(0, 1fr);
}

body.mobile-ui .taskSystemHeroHead,
body.mobile-ui .charmCardHead,
body.mobile-ui .charmCardFoot,
body.mobile-ui .charmElementRow {
  flex-direction: column;
  align-items: stretch;
}

@media (max-width: 780px) {
  body.mobile-ui #mobileTopButtons {
    grid-template-columns: repeat(2, 44px);
    grid-template-rows: repeat(2, 44px);
  }

  body.mobile-ui #mobileInventoryPanel {
    width: min(52vw, 258px);
  }

  body.mobile-ui #chatBox {
    width: min(46vw, 248px);
    max-width: calc(100vw - 132px);
    left: 126px;
  }
}

body.mobile-ui {
  --mobile-safe-top: max(12px, env(safe-area-inset-top, 0px));
  --mobile-safe-right: max(12px, env(safe-area-inset-right, 0px));
  --mobile-safe-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  --mobile-safe-left: max(12px, env(safe-area-inset-left, 0px));
  --mobile-panel-bg:
    linear-gradient(180deg, rgba(17, 21, 28, 0.86), rgba(7, 10, 15, 0.74)),
    radial-gradient(circle at top, rgba(222, 188, 106, 0.1), transparent 58%);
  --mobile-panel-line: rgba(201, 166, 98, 0.34);
  --mobile-panel-line-strong: rgba(232, 198, 124, 0.54);
  --mobile-cyan: rgba(124, 205, 255, 0.86);
  --mobile-gold: #d7ba78;
  --mobile-green: #5dd293;
  --mobile-red: #d66161;
  --mobile-blue: #68a8ff;
  --mobile-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}

body.mobile-ui #hudOverlay {
  z-index: 130;
}

body.mobile-ui #mobileHud {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-ui #mobileLeftColumn,
body.mobile-ui #mobileRightColumn,
body.mobile-ui #mobileBottomRight {
  position: fixed;
  pointer-events: none;
}

body.mobile-ui #mobileLeftColumn {
  top: var(--mobile-safe-top);
  left: var(--mobile-safe-left);
  bottom: calc(var(--mobile-safe-bottom) + 172px);
  width: min(40vw, 320px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.mobile-ui #mobileRightColumn {
  top: var(--mobile-safe-top);
  right: var(--mobile-safe-right);
  width: min(33vw, 214px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

body.mobile-ui #mobileBottomRight {
  right: var(--mobile-safe-right);
  bottom: calc(var(--mobile-safe-bottom) + 24px);
  width: min(36vw, 230px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.mobile-ui .mobileFantasyPanel,
body.mobile-ui #mobileTopButtons,
body.mobile-ui #mobileActionButtons,
body.mobile-ui #mobileJoystickWrap {
  pointer-events: auto;
}

body.mobile-ui .mobileFantasyPanel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--mobile-panel-line);
  border-radius: 18px;
  background: var(--mobile-panel-bg);
  backdrop-filter: blur(14px) saturate(1.08);
  box-shadow: var(--mobile-shadow), inset 0 1px 0 rgba(255, 244, 222, 0.06);
}

body.mobile-ui #mobileTopButtons button,
body.mobile-ui .mobileBattleEntry,
body.mobile-ui .mobileSkillSlot,
body.mobile-ui .mobileActionBtn,
body.mobile-ui #mobileBattlePrevBtn,
body.mobile-ui #mobileBattleNextBtn,
body.mobile-ui .mobileInventorySlot {
  touch-action: manipulation;
}

body.mobile-ui .mobileFantasyPanel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  border: 1px solid rgba(255, 232, 182, 0.04);
  pointer-events: none;
}

body.mobile-ui #mobileStatusCard {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
}

body.mobile-ui #mobilePortraitWrap {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

body.mobile-ui #mobileLevelRing {
  --level-progress: 0%;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, rgba(245, 210, 109, 0.96) var(--level-progress), rgba(88, 68, 32, 0.5) var(--level-progress)),
    radial-gradient(circle at center, rgba(9, 12, 17, 0.5) 56%, rgba(9, 12, 17, 0) 57%);
  box-shadow: 0 0 18px rgba(245, 210, 109, 0.18);
}

body.mobile-ui #mobilePortraitFrame {
  position: relative;
  z-index: 1;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(232, 198, 124, 0.42);
  background:
    radial-gradient(circle at 30% 28%, rgba(91, 117, 159, 0.42), rgba(10, 14, 20, 0.96) 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}

body.mobile-ui #mobilePortraitCanvas {
  width: 68px;
  height: 68px;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

body.mobile-ui #mobileLevelBadge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 2;
  min-width: 38px;
  height: 38px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(232, 198, 124, 0.62);
  background: linear-gradient(180deg, rgba(88, 64, 29, 0.94), rgba(36, 24, 11, 0.94));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

body.mobile-ui .mobileLevelLabel {
  color: rgba(251, 236, 194, 0.8);
  font: 700 8px/1 "Trebuchet MS", "Verdana", sans-serif;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

body.mobile-ui #mobileLevelText {
  color: #fff7dd;
  font: 800 13px/1.05 "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

body.mobile-ui #mobileVitalsCard {
  width: auto;
  padding: 0;
  gap: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

body.mobile-ui #mobileVitalsHead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}

body.mobile-ui #mobilePlayerName {
  color: #f0e3bf;
  font: 700 14px/1.1 "Palatino Linotype", "Book Antiqua", Georgia, serif;
  letter-spacing: 0.2px;
}

body.mobile-ui #mobileClassText {
  color: rgba(170, 194, 219, 0.88);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

body.mobile-ui .mobileStatRow {
  grid-template-columns: 24px minmax(0, 1fr) 60px;
  gap: 6px;
  font-size: 10px;
}

body.mobile-ui .mobileStatLabel {
  color: rgba(246, 240, 224, 0.92);
  font-size: 10px;
  letter-spacing: 0.4px;
}

body.mobile-ui .mobileStatTrack {
  position: relative;
  height: 10px;
  border: 1px solid rgba(121, 101, 67, 0.44);
  background: rgba(3, 5, 8, 0.76);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

body.mobile-ui .mobileStatFill {
  transition: width 160ms ease;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

body.mobile-ui .mobileHpRow .mobileStatFill {
  background: linear-gradient(90deg, #7d1717, #f06666);
}

body.mobile-ui .mobileMpRow .mobileStatFill {
  background: linear-gradient(90deg, #21458f, #69abff);
}

body.mobile-ui .mobileXpRow .mobileStatFill {
  background: linear-gradient(90deg, #816117, #f3d06a);
}

body.mobile-ui .mobileStatValue {
  color: #dfeaf5;
  font-size: 10px;
}

body.mobile-ui .mobileTaskCard {
  padding: 10px 12px 12px;
}

body.mobile-ui .mobileSectionHead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: #f0e0b6;
  font: 700 11px/1 "Palatino Linotype", "Book Antiqua", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.mobile-ui .mobileSectionHead small {
  color: rgba(170, 194, 219, 0.82);
  font: 700 9px/1 "Trebuchet MS", "Verdana", sans-serif;
  letter-spacing: 0.7px;
}

body.mobile-ui .mobileTaskObjective {
  position: relative;
  z-index: 1;
  color: #edf3fb;
  font-size: 12px;
  line-height: 1.32;
}

body.mobile-ui .mobileTaskProgress {
  position: relative;
  z-index: 1;
  height: 9px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(58, 88, 62, 0.5);
  background: rgba(2, 5, 3, 0.82);
}

body.mobile-ui .mobileTaskProgressFill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #25724a, #7bf0b0);
  box-shadow: 0 0 14px rgba(72, 214, 136, 0.18);
  transition: width 180ms ease;
}

body.mobile-ui .mobileTaskMeta {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  color: #bdd0e2;
  font-size: 11px;
}

body.mobile-ui #mobileBattleBar {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
}

body.mobile-ui #mobileBattleHeadActions {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.mobile-ui #mobileBattleCount {
  min-width: 22px;
  text-align: center;
  color: #d4e5f7;
  font-size: 11px;
}

body.mobile-ui #mobileBattlePrevBtn,
body.mobile-ui #mobileBattleNextBtn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(120, 147, 184, 0.36);
  border-radius: 10px;
  background: rgba(17, 24, 32, 0.76);
  color: #eef6ff;
  font-size: 18px;
  line-height: 1;
}

body.mobile-ui #mobileBattleList {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

body.mobile-ui .mobileBattleEntry {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(108, 132, 163, 0.24);
  border-radius: 14px;
  background: rgba(12, 18, 26, 0.74);
  color: #f0f6ff;
  text-align: left;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

body.mobile-ui .mobileBattleEntry:active,
body.mobile-ui .mobileActionBtn:active,
body.mobile-ui #mobileTopButtons button:active,
body.mobile-ui .mobileSkillSlot:active,
body.mobile-ui #mobileBattlePrevBtn:active,
body.mobile-ui #mobileBattleNextBtn:active,
body.mobile-ui .mobileInventorySlot:active {
  transform: scale(0.97);
}

body.mobile-ui .mobileBattleEntry.selected {
  border-color: rgba(235, 194, 112, 0.76);
  box-shadow: 0 0 0 1px rgba(235, 194, 112, 0.18), 0 0 18px rgba(235, 194, 112, 0.14);
  background: rgba(35, 28, 16, 0.82);
}

body.mobile-ui .mobileBattleEntry.aggressive {
  border-color: rgba(214, 97, 97, 0.4);
}

body.mobile-ui .mobileBattleEntry.engaged {
  box-shadow: inset 0 0 0 1px rgba(124, 205, 255, 0.08);
}

body.mobile-ui .mobileBattleEntryIcon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(135, 164, 200, 0.24);
  background: radial-gradient(circle at 30% 25%, rgba(103, 132, 173, 0.36), rgba(9, 12, 18, 0.94) 72%);
}

body.mobile-ui .mobileBattleEntryIcon canvas {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

body.mobile-ui .mobileBattleEntryBody {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

body.mobile-ui .mobileBattleEntryTop {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.mobile-ui .mobileBattleEntryName {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

body.mobile-ui .mobileBattleBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

body.mobile-ui .mobileBattleBadge.aggro {
  background: rgba(197, 91, 91, 0.24);
  color: #ffd6d6;
}

body.mobile-ui .mobileBattleBadge.fight {
  background: rgba(77, 146, 204, 0.22);
  color: #d0ebff;
}

body.mobile-ui .mobileBattleEntryMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #abc0d7;
  font-size: 10px;
}

body.mobile-ui .mobileBattleHp {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
}

body.mobile-ui .mobileBattleHpFill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9e2323, #ff7f67);
}

body.mobile-ui .mobileBattleTargetMark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(240, 202, 116, 0.34);
  background: rgba(40, 33, 18, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.mobile-ui .mobileBattleEntry.selected .mobileBattleTargetMark {
  background: radial-gradient(circle, rgba(245, 220, 150, 0.96) 0%, rgba(234, 179, 78, 0.94) 44%, rgba(68, 42, 15, 0.96) 100%);
  box-shadow: 0 0 10px rgba(245, 220, 150, 0.28);
}

body.mobile-ui .mobileBattleEmpty {
  padding: 16px 10px;
  text-align: center;
  color: #acc0d4;
  font-size: 12px;
}

body.mobile-ui #mobileMapPanel {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  align-self: flex-end;
  width: 132px;
  padding: 10px;
  border-radius: 999px;
}

body.mobile-ui #mobileMiniMapRing {
  width: 110px;
  height: 110px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(232, 198, 124, 0.42);
  background:
    radial-gradient(circle at center, rgba(7, 11, 16, 0.2) 0%, rgba(7, 11, 16, 0.84) 70%),
    rgba(7, 11, 16, 0.88);
  box-shadow: inset 0 0 18px rgba(124, 205, 255, 0.08);
}

body.mobile-ui #mobileMiniMapCanvas {
  width: 102px;
  height: 102px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #05070a;
}

body.mobile-ui #mobileTopButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mobile-ui #mobileTopButtons button {
  width: 100%;
  height: auto;
  min-height: 58px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(150, 182, 220, 0.22);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(30, 42, 58, 0.72), rgba(12, 19, 28, 0.66)),
    rgba(255, 255, 255, 0.04);
  color: #eef4fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 22px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px) saturate(1.05);
}

body.mobile-ui .mobileTopBtnGlyph {
  color: rgba(241, 214, 148, 0.96);
  font-size: 16px;
  line-height: 1;
}

body.mobile-ui .mobileTopBtnLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

body.mobile-ui #mobileTopButtons button.active {
  border-color: rgba(233, 196, 112, 0.54);
  background:
    linear-gradient(180deg, rgba(79, 58, 25, 0.88), rgba(37, 27, 14, 0.82)),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 18px rgba(233, 196, 112, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.mobile-ui #mobileInventoryPanel {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  width: min(44vw, 260px);
  padding: 10px 12px 12px;
}

body.mobile-ui #mobileInventoryGrid {
  gap: 6px;
}

body.mobile-ui .mobileInventorySlot {
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(18, 27, 37, 0.94), rgba(9, 13, 19, 0.95));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.mobile-ui .mobileInventoryQty {
  right: 4px;
  bottom: 3px;
}

body.mobile-ui #mobileSkillBar {
  padding: 10px 12px 12px;
}

body.mobile-ui #mobileSkillGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mobile-ui .mobileSkillSlot {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(128, 156, 192, 0.28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(15, 22, 31, 0.92), rgba(7, 10, 15, 0.94)),
    radial-gradient(circle at top, rgba(124, 205, 255, 0.08), transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 22px rgba(0, 0, 0, 0.16);
}

body.mobile-ui .mobileSkillSlot.empty {
  border-style: dashed;
  border-color: rgba(94, 116, 142, 0.24);
}

body.mobile-ui .mobileSkillSlot canvas {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  image-rendering: pixelated;
}

body.mobile-ui .mobileSkillKey,
body.mobile-ui .mobileSkillQty,
body.mobile-ui .mobileSkillCooldownText {
  position: absolute;
  z-index: 2;
  color: #edf5fd;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  font-weight: 700;
}

body.mobile-ui .mobileSkillKey {
  left: 7px;
  top: 6px;
  font-size: 10px;
}

body.mobile-ui .mobileSkillQty {
  right: 7px;
  bottom: 6px;
  font-size: 11px;
}

body.mobile-ui .mobileSkillCooldown {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 120ms ease;
  background: linear-gradient(
    180deg,
    rgba(6, 10, 16, 0.8) calc(var(--cdr-progress, 0) * 100%),
    rgba(6, 10, 16, 0.08) calc(var(--cdr-progress, 0) * 100%)
  );
}

body.mobile-ui .mobileSkillCooldown.active {
  opacity: 1;
}

body.mobile-ui .mobileSkillCooldownText {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
}

body.mobile-ui #mobileActionButtons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.mobile-ui .mobileActionBtn {
  min-height: 64px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(138, 168, 204, 0.28);
  border-radius: 18px;
  color: #f4f7fb;
  background: linear-gradient(180deg, rgba(26, 36, 49, 0.86), rgba(12, 18, 26, 0.9));
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.mobile-ui .mobileActionBtn.attack {
  border-color: rgba(198, 97, 97, 0.34);
  background: linear-gradient(180deg, rgba(76, 31, 31, 0.92), rgba(31, 12, 12, 0.92));
}

body.mobile-ui .mobileActionBtn.sprint {
  border-color: rgba(76, 147, 214, 0.34);
  background: linear-gradient(180deg, rgba(18, 49, 84, 0.92), rgba(9, 20, 38, 0.92));
}

body.mobile-ui .mobileActionBtn.sprint.active {
  box-shadow: 0 0 18px rgba(104, 168, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(104, 168, 255, 0.58);
}

body.mobile-ui .mobileActionGlyph {
  font-size: 18px;
  line-height: 1;
}

body.mobile-ui .mobileActionLabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

body.mobile-ui #mobileJoystickWrap {
  left: var(--mobile-safe-left);
  bottom: calc(var(--mobile-safe-bottom) + 14px);
  width: 166px;
  height: 166px;
}

body.mobile-ui #mobileJoystickBase {
  width: 142px;
  height: 142px;
  border: 1px solid rgba(152, 185, 224, 0.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(120, 205, 255, 0.12) 0%, rgba(120, 205, 255, 0.03) 38%, rgba(7, 11, 16, 0.88) 78%),
    rgba(7, 11, 16, 0.76);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 212, 0.04), 0 16px 26px rgba(0, 0, 0, 0.22);
}

body.mobile-ui #mobileJoystickBase::before,
body.mobile-ui #mobileJoystickBase::after {
  background: rgba(177, 205, 229, 0.12);
}

body.mobile-ui #mobileJoystickKnob {
  width: 62px;
  height: 62px;
  margin-left: -31px;
  margin-top: -31px;
  border: 1px solid rgba(219, 235, 255, 0.58);
  background: radial-gradient(circle at 32% 28%, rgba(255, 247, 228, 0.95), rgba(129, 179, 226, 0.95) 50%, rgba(42, 72, 105, 0.98) 100%);
}

body.mobile-ui #bottomHud {
  z-index: 129;
}

body.mobile-ui #chatBox {
  left: 50%;
  right: auto;
  top: auto;
  bottom: calc(var(--mobile-safe-bottom) + 20px);
  width: min(52vw, 360px);
  max-width: calc(100vw - 236px);
  min-width: 190px;
  padding: 8px;
  transform: translateX(-50%);
  border-radius: 18px;
  border-color: rgba(147, 177, 211, 0.24);
  background:
    linear-gradient(180deg, rgba(12, 18, 26, 0.76), rgba(7, 10, 14, 0.82)),
    rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

body.mobile-ui #chatLog {
  max-height: 82px;
  margin-bottom: 6px;
  padding-right: 4px;
  font-size: 11px;
}

body.mobile-ui #chatInput {
  min-height: 34px;
  border-radius: 12px;
  border-color: rgba(137, 168, 201, 0.24);
  background: rgba(7, 10, 14, 0.72);
  color: #edf5ff;
  font-size: 12px;
}

body.mobile-ui #chatChannelSelect {
  width: 72px;
  min-height: 34px;
  border-radius: 12px;
  border-color: rgba(137, 168, 201, 0.24);
  background: rgba(7, 10, 14, 0.78);
  color: #edf5ff;
}

body.mobile-ui #chatInput::placeholder {
  color: rgba(197, 213, 231, 0.68);
}

body.mobile-ui #settingsPanel {
  right: var(--mobile-safe-right);
  top: calc(var(--mobile-safe-top) + 192px);
  width: min(82vw, 332px);
  max-height: 58vh;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(17, 21, 28, 0.96), rgba(7, 10, 15, 0.94));
}

body.mobile-ui #settingsPanel .panelTitle {
  font: 700 14px/1.1 "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: #f0e3bf;
}

@media (max-width: 920px) {
  body.mobile-ui #mobileLeftColumn {
    width: min(44vw, 300px);
  }

  body.mobile-ui #mobileBottomRight {
    width: min(40vw, 220px);
  }
}

@media (max-width: 780px) {
  body.mobile-ui #mobileLeftColumn {
    width: min(46vw, 276px);
    bottom: calc(var(--mobile-safe-bottom) + 166px);
  }

  body.mobile-ui #mobileRightColumn {
    width: min(36vw, 188px);
  }

  body.mobile-ui #mobileBottomRight {
    width: min(42vw, 206px);
  }

  body.mobile-ui #mobileStatusCard {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
  }

  body.mobile-ui #mobileMapPanel {
    width: 120px;
  }

  body.mobile-ui #mobileMiniMapRing {
    width: 98px;
    height: 98px;
  }

  body.mobile-ui #mobileMiniMapCanvas {
    width: 92px;
    height: 92px;
  }

  body.mobile-ui #chatBox {
    width: min(46vw, 286px);
    max-width: calc(100vw - 210px);
  }
}

@media (max-width: 620px) {
  body.mobile-ui #mobileLeftColumn {
    width: min(48vw, 250px);
  }

  body.mobile-ui #mobileRightColumn {
    width: min(38vw, 168px);
  }

  body.mobile-ui #mobileBottomRight {
    width: min(44vw, 184px);
  }

  body.mobile-ui #mobileTopButtons button,
  body.mobile-ui .mobileActionBtn {
    min-height: 54px;
  }

  body.mobile-ui #chatBox {
    width: min(44vw, 240px);
    max-width: calc(100vw - 196px);
  }
}

@media (max-width: 540px) {
  body.mobile-ui #mobileLeftColumn {
    width: min(50vw, 214px);
    gap: 8px;
  }

  body.mobile-ui #mobileRightColumn {
    width: min(38vw, 144px);
    gap: 8px;
  }

  body.mobile-ui #mobileBottomRight {
    width: min(44vw, 164px);
    gap: 8px;
  }

  body.mobile-ui #mobileStatusCard {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  body.mobile-ui #mobileVitalsCard {
    width: 100%;
  }

  body.mobile-ui .mobileStatRow {
    grid-template-columns: 22px minmax(0, 1fr) 52px;
  }

  body.mobile-ui #mobileMapPanel {
    width: 106px;
    padding: 8px;
  }

  body.mobile-ui #mobileMiniMapRing {
    width: 86px;
    height: 86px;
  }

  body.mobile-ui #mobileMiniMapCanvas {
    width: 80px;
    height: 80px;
  }

  body.mobile-ui #mobileJoystickWrap {
    width: 148px;
    height: 148px;
  }

  body.mobile-ui #mobileJoystickBase {
    width: 128px;
    height: 128px;
  }

  body.mobile-ui #chatBox {
    width: min(42vw, 210px);
    min-width: 168px;
    max-width: calc(100vw - 176px);
  }
}

/* Mobile image HUD generated from public/mobile-interface-layout.json (844x390 landscape). */
body.mobile-ui #mobileHud {
  position: fixed;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-ui .mobileLayoutItem {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  pointer-events: none;
  touch-action: manipulation;
}

body.mobile-ui .mobileHudImage,
body.mobile-ui .mobileImageButton img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

body.mobile-ui .mobileImageButton,
body.mobile-ui .mobileSkillSlot,
body.mobile-ui #mobileJoystickWrap,
body.mobile-ui #mobileJoystickBase,
body.mobile-ui #mobileInventoryPanel {
  pointer-events: auto;
}

body.mobile-ui .mobileImageButton {
  overflow: visible;
  display: block;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
  color: transparent;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-ui #mobileTopButtons .mobileImageButton,
body.mobile-ui #mobileTopButtons .mobileImageButton.active,
body.mobile-ui .mobileActionBtn.attack,
body.mobile-ui .mobileActionBtn.pickup {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.mobile-ui .mobileImageButton.active,
body.mobile-ui .mobileImageButton:active,
body.mobile-ui .mobileSkillSlot:active {
  transform: scale(0.96);
  filter: drop-shadow(0 0 8px rgba(245, 220, 150, 0.36));
}

body.mobile-ui #mobilePortraitWrap {
  left: 1.777%;
  top: 4.103%;
  width: 6.991%;
  height: 15.385%;
  z-index: 10;
}

body.mobile-ui #mobilePortraitCanvas {
  position: absolute;
  left: 12%;
  top: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  image-rendering: pixelated;
}

body.mobile-ui .mobilePortraitFrameImage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

body.mobile-ui .mobileImageBar {
  overflow: hidden;
}

body.mobile-ui .mobileBarBack,
body.mobile-ui .mobileImageBar .mobileStatFill {
  position: absolute;
  inset: 0;
  height: 100%;
  border: 0;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
  box-shadow: none;
  transition: width 140ms linear;
}

body.mobile-ui .mobileBarBack {
  width: 100%;
  background-image: url("./assets/interfacemobileicon/BarraHPvazio.png?v=20260628-004");
  opacity: 1;
}

body.mobile-ui #mobileHpBar {
  left: 11.611%;
  top: 4.615%;
  width: 11.611%;
  height: 3.333%;
  z-index: 12;
}

body.mobile-ui #mobileHpFill {
  background-image: url("./assets/interfacemobileicon/barraHPcheio.png?v=20260628-004");
}

body.mobile-ui #mobileMpBar {
  left: 11.611%;
  top: 9.231%;
  width: 11.611%;
  height: 3.333%;
  z-index: 14;
}

body.mobile-ui #mobileMpFill {
  background-image: url("./assets/interfacemobileicon/BarraMPcheio.png?v=20260628-004");
}

body.mobile-ui #mobileXpBar {
  left: 11.611%;
  top: 14.103%;
  width: 11.611%;
  height: 3.333%;
  z-index: 16;
}

body.mobile-ui #mobileXpFill {
  background-image: url("./assets/interfacemobileicon/BarradeXPCheio.png?v=20260628-004");
}

body.mobile-ui .mobileStatValue {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

body.mobile-ui #mobileHpIcon {
  left: 9.834%;
  top: 3.333%;
  width: 1.185%;
  height: 5.641%;
  z-index: 13;
}

body.mobile-ui #mobileMpIcon {
  left: 9.834%;
  top: 7.179%;
  width: 1.185%;
  height: 7.179%;
  z-index: 15;
}

body.mobile-ui #mobileXpIcon {
  left: 9.834%;
  top: 12.564%;
  width: 1.185%;
  height: 5.641%;
  z-index: 17;
}

body.mobile-ui #mobileMapPanel {
  left: 87.559%;
  top: -1.795%;
  width: 9.360%;
  height: 29.744%;
  z-index: 18;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}

body.mobile-ui .mobileMapFrameImage {
  display: none;
}

body.mobile-ui #mobileMapPanel::before,
body.mobile-ui #mobileMapPanel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

body.mobile-ui #mobileMapPanel::before {
  width: 100%;
  z-index: 1;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.78) 72%),
    rgba(0, 0, 0, 0.7);
  background-size: 18px 18px, 18px 18px, auto, auto;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.48);
}

body.mobile-ui #mobileMapPanel::after {
  width: calc(100% - 8px);
  z-index: 3;
  border: 1px solid rgba(124, 205, 255, 0.24);
  box-shadow:
    inset 0 0 12px rgba(124, 205, 255, 0.12),
    inset 0 0 24px rgba(0, 0, 0, 0.45);
}

body.mobile-ui #mobileMiniMapCanvas {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: calc(100% - 8px);
  aspect-ratio: 1 / 1;
  height: auto;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: #05070a;
  image-rendering: pixelated;
  pointer-events: auto;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

body.mobile-ui #mobileTopButtons {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

body.mobile-ui #mobileInventoryToggleBtn {
  left: 68.483%;
  top: 3.333%;
  width: 4.739%;
  height: 12.821%;
  z-index: 21;
}

body.mobile-ui #mobileHotkeyToggleBtn {
  left: 63.15%;
  top: 68.9%;
  width: 3.8%;
  height: 8%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  z-index: 27;
}

body.mobile-ui #mobileAutoChaseToggleBtn {
  left: 61.967%;
  top: 3.333%;
  width: 4.739%;
  height: 12.821%;
  z-index: 22;
}

body.mobile-ui #mobilePvpToggleBtn {
  left: 49.763%;
  top: 3.333%;
  width: 4.739%;
  height: 12.821%;
  z-index: 24;
}

body.mobile-ui #mobileCombatStanceBtn {
  left: 55.450%;
  top: 3.333%;
  width: 4.739%;
  height: 12.821%;
  z-index: 23;
}

body.mobile-ui #mobileMapToggleBtn {
  left: 79.3%;
  top: 3.333%;
  width: 4.739%;
  height: 12.821%;
  z-index: 20;
}

body.mobile-ui #mobileSettingsToggleBtn {
  left: 84.7%;
  top: 3.333%;
  width: 4.739%;
  height: 12.821%;
  z-index: 19;
}

body.mobile-ui #mobileChatToggleBtn {
  left: 63.15%;
  top: 78.05%;
  width: 3.4%;
  height: 7.2%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  z-index: 26;
}

body.mobile-ui .mobileTextImageButton {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(215, 186, 120, 0.68);
  border-radius: 50%;
  background: rgba(7, 10, 15, 0.58);
  color: #f3dfaa;
  font-size: clamp(10px, 1.55vw, 13px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  backdrop-filter: blur(6px);
}

body.mobile-ui #mobileTopButtons #mobileChatToggleBtn {
  width: 3.4%;
  height: 7.2%;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(215, 186, 120, 0.68);
  border-radius: 50%;
  background: rgba(7, 10, 15, 0.58);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

body.mobile-ui #mobileTopButtons #mobileHotkeyToggleBtn {
  width: 3.8%;
  height: 8%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  backdrop-filter: none;
}

body.mobile-ui #mobileAttackBtn {
  left: 86.611%;
  top: 36.154%;
  width: 8.294%;
  height: 17.949%;
  z-index: 23;
}

body.mobile-ui #mobilePickupBtn {
  left: 76.422%;
  top: 47.949%;
  width: 6.517%;
  height: 14.103%;
  z-index: 24;
}

body.mobile-ui #mobileJoystickWrap {
  left: 5.095%;
  top: 66.154%;
  width: 10.664%;
  height: 23.077%;
  z-index: 25;
}

body.mobile-ui #mobileJoystickBase {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  z-index: 2;
  pointer-events: auto;
  touch-action: none;
}

body.mobile-ui #mobileJoystickWrap > .mobileHudImage {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 1;
}

body.mobile-ui #mobileJoystickBase::before,
body.mobile-ui #mobileJoystickBase::after {
  display: none;
}

body.mobile-ui #mobileJoystickKnob {
  --joy-x: 0px;
  --joy-y: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  margin-left: -11%;
  margin-top: -11%;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 255, 255, 0.28);
  transform: translate(var(--joy-x), var(--joy-y));
}

body.mobile-ui #mobileSkillBar,
body.mobile-ui #mobileSkillGrid {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

body.mobile-ui .mobileSkillSlot {
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("./assets/interfacemobileicon/slotsmobile.png?v=20260628-004") center / contain no-repeat;
  box-shadow: none;
  pointer-events: auto;
}

body.mobile-ui .mobileSkillSlot.empty {
  border: 0;
  background: url("./assets/interfacemobileicon/slotsmobile.png?v=20260628-004") center / contain no-repeat;
}

body.mobile-ui .mobileSkillSlot:nth-child(1) {
  left: 69.194%;
  top: 68.205%;
  width: 6.161%;
  height: 13.333%;
  z-index: 22;
}

body.mobile-ui .mobileSkillSlot:nth-child(2) {
  left: 76.185%;
  top: 68.205%;
  width: 6.161%;
  height: 13.333%;
  z-index: 26;
}

body.mobile-ui .mobileSkillSlot:nth-child(3) {
  left: 83.057%;
  top: 68.205%;
  width: 6.161%;
  height: 13.333%;
  z-index: 27;
}

body.mobile-ui .mobileSkillSlot:nth-child(4) {
  left: 90.047%;
  top: 68.205%;
  width: 6.161%;
  height: 13.333%;
  z-index: 28;
}

body.mobile-ui .mobileSkillSlot:nth-child(5) {
  left: 69.194%;
  top: 82.308%;
  width: 6.161%;
  height: 13.333%;
  z-index: 29;
}

body.mobile-ui .mobileSkillSlot:nth-child(6) {
  left: 76.185%;
  top: 82.051%;
  width: 6.161%;
  height: 13.333%;
  z-index: 30;
}

body.mobile-ui .mobileSkillSlot:nth-child(7) {
  left: 83.175%;
  top: 82.308%;
  width: 6.161%;
  height: 13.333%;
  z-index: 31;
}

body.mobile-ui .mobileSkillSlot:nth-child(8) {
  left: 90.047%;
  top: 82.308%;
  width: 6.161%;
  height: 13.333%;
  z-index: 32;
}

body.mobile-ui .mobileSkillSlot canvas {
  position: absolute;
  left: 16%;
  top: 16%;
  right: auto;
  bottom: auto;
  width: 68%;
  height: 68%;
  image-rendering: pixelated;
}

body.mobile-ui .mobileSkillKey {
  left: 9%;
  top: 7%;
  color: #f5e6bb;
  font-size: clamp(7px, 1.3vw, 10px);
}

body.mobile-ui .mobileSkillQty {
  right: 8%;
  bottom: 7%;
  color: #fff;
  font-size: clamp(7px, 1.3vw, 10px);
}

body.mobile-ui .mobileSkillCooldown,
body.mobile-ui .mobileSkillCooldownText {
  border-radius: 8px;
}

body.mobile-ui #mobileInventoryPanel {
  position: fixed;
  inset: 0;
  z-index: 460;
  width: auto;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

body.mobile-ui #mobileInventoryPanel:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

body.mobile-ui > .backpackWindowsRoot {
  display: none;
}

body.mobile-ui .mobileMenuWindow {
  --mobile-menu-slot: clamp(30px, 5.3vw, 45px);
  position: relative;
  width: min(900px, calc(100vw - 24px));
  height: min(520px, calc(100vh - 20px));
  box-sizing: border-box;
  padding: 36px 18px 16px;
  border: 2px solid #222;
  background: rgba(55, 55, 55, 0.9);
  box-shadow: 0 0 0 1px #666 inset, 0 20px 48px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: Arial, sans-serif;
  image-rendering: pixelated;
  pointer-events: auto;
}

body.mobile-ui .mobileMenuTitle {
  position: absolute;
  top: 8px;
  left: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

body.mobile-ui .mobileMenuClose {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 4px 8px;
  border: 1px solid #555;
  background: #333;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

body.mobile-ui .mobileMenuTabs {
  display: flex;
  gap: 7px;
  margin: 0 70px 10px 75px;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.mobile-ui .mobileMenuTab {
  flex: 0 0 auto;
  padding: 3px 7px;
  border: 1px solid #4a4f55;
  background: #2c3036;
  box-shadow: 0 2px 0 #1a1a1a;
  color: #fff;
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

body.mobile-ui .mobileMenuTab.active {
  background: #c51616;
}

body.mobile-ui .mobileMenuBody {
  height: calc(100% - 32px);
  min-height: 0;
}

body.mobile-ui .mobileMenuPane {
  display: none;
  height: 100%;
  min-height: 0;
}

body.mobile-ui .mobileMenuPane.active {
  display: block;
}

body.mobile-ui .mobileInventoryPane {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

body.mobile-ui .mobileBackpackTabs {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.mobile-ui .mobileBackpackTab {
  flex: 0 0 auto;
  max-width: 118px;
  min-height: 24px;
  padding: 3px 8px;
  overflow: hidden;
  border: 1px solid #4a4f55;
  border-radius: 0;
  background: #23262b;
  box-shadow: 0 2px 0 #151515;
  color: #fff;
  font-size: clamp(10px, 1.55vw, 13px);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

body.mobile-ui .mobileBackpackTab.active {
  border-color: #8a2626;
  background: #c51616;
}

body.mobile-ui .mobileInventoryContent {
  display: flex;
  gap: 14px;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

body.mobile-ui .mobileEquipmentGrid {
  display: grid;
  grid-template-columns: repeat(3, var(--mobile-menu-slot));
  grid-template-rows: repeat(4, var(--mobile-menu-slot));
  gap: 5px;
  align-content: start;
  margin-top: 18px;
}

body.mobile-ui .mobileEquipmentSlot,
body.mobile-ui .mobileInventorySlot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--mobile-menu-slot);
  height: var(--mobile-menu-slot);
  min-width: 0;
  min-height: 0;
  border: 1px solid #3c3f46;
  border-radius: 0;
  padding: 0;
  background: #282a30;
  box-shadow: inset 0 0 4px #111;
  color: transparent;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

body.mobile-ui .mobileInventorySlot.dragging {
  opacity: 0.62;
  border-color: rgba(244, 213, 121, 0.92);
}

body.mobile-ui .mobileInventorySlot.drag-over-inventory {
  border-color: rgba(99, 179, 237, 0.96);
  box-shadow: inset 0 0 0 2px rgba(99, 179, 237, 0.42), 0 0 12px rgba(99, 179, 237, 0.34);
}

body.mobile-ui .mobileEquipmentSpacer {
  cursor: default;
}

body.mobile-ui .mobileEquipmentSlot.empty canvas,
body.mobile-ui .mobileInventorySlot.empty canvas {
  opacity: 0.72;
  filter: saturate(0.7) brightness(0.85);
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
  align-content: start;
  justify-content: start;
  width: 100%;
  height: auto;
  margin-top: 18px;
  overflow: auto;
  box-sizing: border-box;
}

body.mobile-ui #mobileInventoryGrid[hidden],
body.mobile-ui #mobileBackpackGrid[hidden] {
  display: none;
}

body.mobile-ui .mobileMonsterBagContent {
  align-items: flex-start;
}

body.mobile-ui .mobileMonsterBagHint {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  color: #e7f2ff;
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

body.mobile-ui .mobileInventorySidePanel {
  flex: 1 1 auto;
  min-width: 120px;
  margin-top: 15px;
  border: 1px solid #5a5a5a;
  background: rgba(40, 40, 40, 0.55);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
}

body.mobile-ui .mobileDepotPanel {
  display: flex;
  flex-direction: column;
  width: min(31vw, 220px);
  min-width: 132px;
  min-height: 0;
  padding: 7px;
  gap: 7px;
}

body.mobile-ui .mobileDepotPanel.locked {
  opacity: 0.72;
}

body.mobile-ui .mobileDepotHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 22px;
  color: #f5f0dc;
  font-size: clamp(10px, 1.6vw, 13px);
  font-weight: 700;
}

body.mobile-ui .mobileDepotHead span {
  min-width: 0;
  overflow: hidden;
  color: #d6d9df;
  font-size: clamp(9px, 1.45vw, 12px);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-ui .mobileDepotGrid {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  grid-auto-rows: 42px;
  gap: 4px;
  justify-content: start;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: auto;
  align-content: start;
  box-sizing: border-box;
}

body.mobile-ui .mobileDepotSlot:disabled {
  cursor: default;
  filter: grayscale(0.45) brightness(0.78);
}

body.mobile-ui .mobileEquipmentSlot canvas,
body.mobile-ui .mobileInventorySlot canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

body.mobile-ui .mobileInventoryQty {
  position: absolute;
  right: 3px;
  bottom: 1px;
  color: #fff;
  font-size: clamp(9px, 1.6vw, 14px);
  font-weight: 700;
  text-shadow: 2px 2px #000;
}

body.mobile-ui .mobileMenuInnerPanel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #5a5a5a;
  background: rgba(40, 40, 40, 0.55);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25);
}

body.mobile-ui .mobileStatusStats {
  display: flex;
  justify-content: center;
  gap: min(7vw, 70px);
  height: 100%;
  box-sizing: border-box;
  padding: 28px 24px 20px;
  overflow: auto;
}

body.mobile-ui .mobileStatusColumn {
  width: min(320px, 42%);
}

body.mobile-ui .mobileStatusRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: clamp(11px, 1.8vw, 16px);
  font-weight: 700;
}

body.mobile-ui .mobileStatusLabel {
  width: 95px;
  flex: 0 0 95px;
}

body.mobile-ui .mobileStatusBar {
  position: relative;
  width: 130px;
  height: 14px;
  border: 1px solid #7b7b7b;
  background: #555;
  box-shadow: inset 0 0 3px #000;
}

body.mobile-ui .mobileStatusBarFill {
  height: 100%;
  background: #00a000;
  box-shadow: 0 0 4px #00ff00;
}

body.mobile-ui .mobileStatusBarText {
  position: absolute;
  inset: -1px 0 auto 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  text-shadow: 1px 1px #000;
}

body.mobile-ui .mobileStatusPercent {
  width: 76px;
  flex: 0 0 76px;
}

body.mobile-ui .mobileStatusRightRow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
  font-size: clamp(11px, 1.8vw, 16px);
  font-weight: 700;
}

body.mobile-ui .mobileStatusRightRow span:first-child {
  color: #ddd;
}

body.mobile-ui .mobileOutfitPanel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 18px;
}

body.mobile-ui .mobileOutfitArrow {
  width: 44px;
  height: 64px;
  border: 1px solid #555;
  background: #2c3036;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}

body.mobile-ui .mobileOutfitStage {
  display: grid;
  justify-items: center;
  gap: 9px;
  min-width: 210px;
}

body.mobile-ui #mobileOutfitPreviewCanvas {
  width: 128px;
  height: 128px;
  border: 1px solid #555;
  background: rgba(20, 20, 20, 0.55);
  image-rendering: pixelated;
}

body.mobile-ui #mobileOutfitName {
  font-size: 18px;
}

body.mobile-ui #mobileOutfitStatus {
  min-height: 18px;
  color: #ddd;
  font-size: 14px;
  font-weight: 700;
}

body.mobile-ui .mobileOutfitAction {
  min-width: 150px;
  padding: 8px 12px;
  border: 1px solid #555;
  background: #232323;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

body.mobile-ui .mobileSoonPanel {
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
}

body.mobile-ui .mobileHuntCreateBtn {
  display: block;
  width: 120px;
  margin: 0 auto 12px;
  padding: 10px 0;
  border: 1px solid #555;
  background: #232323;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

body.mobile-ui .mobileHuntContent {
  display: grid;
  grid-template-columns: 220px 1fr 1fr 1fr;
  gap: 10px;
  height: calc(100% - 58px);
  min-height: 0;
}

body.mobile-ui .mobileHuntBox {
  min-width: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid #666;
  background: rgba(60, 60, 60, 0.65);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

body.mobile-ui .mobileHuntBoxTitle {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}

body.mobile-ui .mobileHuntLine {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
  font-size: clamp(11px, 1.7vw, 15px);
  font-weight: 700;
}

body.mobile-ui .mobileHuntLine strong {
  color: #39ff14;
}

body.mobile-ui .mobileHuntLine.balance strong {
  color: gold;
}

body.mobile-ui .mobileHuntBottomBar {
  height: 20px;
  margin-top: 12px;
  border: 1px solid #444;
  background: #1f2329;
}

body.mobile-ui .mobileHuntBottomBar div {
  width: 92%;
  height: 100%;
  border-right: 1px solid #888;
  background: linear-gradient(#6d6963, #4f4c48);
}

body.mobile-ui .mobileAssistantPanel {
  padding: 16px;
  overflow: auto;
}

body.mobile-ui .mobileAssistantNotice {
  margin-bottom: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

body.mobile-ui .mobileAssistantBox {
  position: relative;
  width: min(780px, 100%);
  min-height: 300px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 14px 36px 14px 14px;
  border: 1px solid #555;
  background: rgba(50, 50, 50, 0.4);
}

body.mobile-ui .mobileAssistantSection {
  margin-bottom: 14px;
}

body.mobile-ui .mobileAssistantRow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

body.mobile-ui .mobileAssistantRow > span {
  width: 120px;
}

body.mobile-ui .mobileAssistantSlider {
  position: relative;
  width: 210px;
  height: 8px;
  border: 1px solid #111;
  background: #2d2d2d;
}

body.mobile-ui .mobileAssistantSlider::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 8px;
  height: 22px;
  border: 1px solid #111;
  background: #666;
}

body.mobile-ui .mobileAssistantIcons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 98px;
}

body.mobile-ui .mobileAssistantIcons span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #333;
  background: #252830;
  color: #f5e6bb;
  font-size: 11px;
  font-weight: 700;
}

body.mobile-ui .mobileAssistantChecks {
  margin: 8px 0 0 190px;
}

body.mobile-ui .mobileAssistantChecks label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}

body.mobile-ui .mobileAssistantChecks span {
  width: 16px;
  height: 16px;
  border: 1px solid #444;
  background: #222;
}

body.mobile-ui .mobileAssistantScroll {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 16px;
  height: calc(100% - 16px);
  border: 1px solid #666;
  background: #2c2c2c;
}

body.mobile-ui .mobileAssistantScroll div {
  width: 100%;
  height: 78%;
  background: #8b8178;
}

@media (max-width: 720px) {
  body.mobile-ui .mobileMenuWindow {
    --mobile-menu-slot: clamp(27px, 5vw, 36px);
    padding: 32px 12px 12px;
  }

  body.mobile-ui .mobileMenuTabs {
    margin-left: 0;
    margin-right: 62px;
  }

  body.mobile-ui .mobileInventoryContent {
    gap: 8px;
  }

  body.mobile-ui .mobileInventorySidePanel {
    display: none;
  }

  body.mobile-ui .mobileDepotPanel {
    display: flex;
    width: min(34vw, 176px);
    min-width: 112px;
  }

  body.mobile-ui .mobileStatusStats {
    justify-content: flex-start;
    gap: 20px;
    padding: 18px 14px;
  }

  body.mobile-ui .mobileHuntContent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: auto;
  }

  body.mobile-ui .mobileAssistantChecks {
    margin-left: 0;
  }
}

body.mobile-ui #settingsPanel {
  right: max(10px, env(safe-area-inset-right, 0px));
  top: max(84px, calc(env(safe-area-inset-top, 0px) + 70px));
  width: min(420px, 88vw);
  max-height: 72vh;
  z-index: 430;
  border-radius: 8px;
}

body.mobile-ui .merchantModal,
body.mobile-ui .npcModal,
body.mobile-ui .marketModal,
body.mobile-ui .rorModal {
  z-index: 420;
}

body.mobile-ui .merchantModalCard,
body.mobile-ui .npcModalCard,
body.mobile-ui .marketModalCard,
body.mobile-ui .rorModalCard {
  width: min(94vw, 720px);
  max-height: 86vh;
}

body.mobile-ui .itemContextMenu,
body.mobile-ui .itemQuickMenu,
body.mobile-ui .hotbarContextMenu,
body.mobile-ui .hotkeyPromptModal,
body.mobile-ui .hotbarItemPickerModal {
  z-index: 480;
}

.itemQuickMenu [data-action="move-backpack"] {
  display: none;
}

.itemQuickMenu.monsterBagQuickMenu [data-action="use"],
.itemQuickMenu.monsterBagQuickMenu [data-action="hotkey"] {
  display: none;
}

.itemQuickMenu.monsterBagQuickMenu [data-action="move-backpack"] {
  display: block;
}

body.mobile-ui .settingsPanelBody,
body.mobile-ui .merchantModalBody,
body.mobile-ui .npcModalBody {
  -webkit-overflow-scrolling: touch;
}

body.mobile-ui .settingsPanelActionRow,
body.mobile-ui .hotbarItemPickerGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.mobile-ui .mobileHotkeyPanel {
  position: fixed;
  inset: 0;
  z-index: 481;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

body.mobile-ui .mobileHotkeyPanel.open {
  display: flex;
}

body.mobile-ui .mobileHotkeyCard {
  width: min(520px, calc(100vw - 28px));
  max-height: min(440px, calc(100vh - 28px));
  box-sizing: border-box;
  padding: 10px;
  border: 2px solid #222;
  background: rgba(47, 47, 47, 0.96);
  box-shadow: 0 0 0 1px #666 inset, 0 20px 48px rgba(0, 0, 0, 0.55);
  color: #fff;
  overflow: hidden;
}

body.mobile-ui .mobileHotkeyHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

body.mobile-ui .mobileHotkeyTitle {
  font-size: 14px;
  letter-spacing: 0;
}

body.mobile-ui .mobileHotkeyClose {
  min-width: 34px;
  min-height: 28px;
  border: 1px solid #555;
  background: #333;
  color: #fff;
  font-weight: 800;
}

body.mobile-ui .mobileHotkeyGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 360px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.mobile-ui .mobileHotkeyManageSlot {
  min-height: 46px;
  display: grid;
  grid-template-columns: 36px auto minmax(34px, max-content);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid #4a4f55;
  background: #23262b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

body.mobile-ui .mobileHotkeyManageSlot canvas {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}

body.mobile-ui .mobileHotkeyManageName {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-ui .mobileHotkeyManageKey {
  color: #f3dfaa;
  font-size: 11px;
  text-align: right;
}

body.mobile-ui .mobileHotkeyBack {
  grid-column: 1 / -1;
  display: block;
  text-align: center;
}

body.mobile-ui .mobileHotkeyEmpty {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid #4a4f55;
  background: rgba(20, 20, 20, 0.42);
  color: #e7f2ff;
  font-size: 12px;
}

body.mobile-ui #chatBox.mobileHidden {
  display: none;
}

body.mobile-ui #chatBox {
  --mobile-chat-left-space: calc(var(--mobile-safe-left) + 112px);
  --mobile-chat-right-space: clamp(176px, 31vw, 260px);
  left: var(--mobile-chat-left-space);
  right: auto;
  bottom: calc(var(--mobile-safe-bottom) + 12px);
  width: max(180px, calc(var(--mobile-locked-width, 100vw) - var(--mobile-chat-left-space) - var(--mobile-chat-right-space)));
  min-width: 0;
  max-width: none;
  height: 94px;
  display: grid;
  grid-template-rows: 20px minmax(0, 1fr) 18px;
  gap: 3px;
  padding: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}

body.mobile-ui #chatTabs {
  height: 20px;
  margin: 0;
}

body.mobile-ui #chatTabs .chatTab,
body.mobile-ui #chatTabs [data-chat-tab] {
  min-width: 42px;
  height: 20px;
  padding: 0 5px;
  font-size: 9px;
  line-height: 18px;
}

body.mobile-ui #chatLog {
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 4px 0 0;
  color: #f1f6ff;
  font-size: 11px;
  line-height: 1.25;
  text-shadow: 1px 1px 2px #000, 0 0 4px #000;
}

body.mobile-ui #chatLog::-webkit-scrollbar {
  width: 4px;
}

body.mobile-ui #chatForm {
  height: 18px;
  gap: 3px;
  align-items: center;
}

body.mobile-ui #chatInput {
  min-height: 18px;
  height: 18px;
  padding: 1px 6px;
  border: 1px solid rgba(219, 232, 247, 0.38);
  border-radius: 999px;
  background: rgba(4, 7, 11, 0.38);
  color: #f4f8ff;
  font-size: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.26);
}

body.mobile-ui #chatChannelSelect {
  width: 48px;
  min-height: 18px;
  height: 18px;
  padding: 0 2px;
  border: 1px solid rgba(219, 232, 247, 0.28);
  border-radius: 999px;
  background: rgba(4, 7, 11, 0.42);
  color: #f4f8ff;
  font-size: 9px;
}

body.mobile-ui .mobileMarketPanel,
body.mobile-ui .mobileShopPanel {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.mobile-ui .mobilePanelMiniHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  font-size: clamp(11px, 1.8vw, 15px);
  font-weight: 700;
}

body.mobile-ui .mobilePanelMiniHead span {
  color: #d9d9d9;
  font-size: clamp(10px, 1.6vw, 13px);
}

body.mobile-ui .mobileMarketControls,
body.mobile-ui .mobileMarketSelected,
body.mobile-ui .mobileMarketPostGrid,
body.mobile-ui .mobileTradeRow,
body.mobile-ui .mobileShopRow {
  border: 1px solid rgba(140, 140, 140, 0.55);
  background: rgba(22, 22, 24, 0.58);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.18);
}

body.mobile-ui .mobileMarketControls,
body.mobile-ui .mobileMarketSelected {
  padding: 6px;
}

body.mobile-ui .mobileMarketSelect,
body.mobile-ui .mobileMarketSearch,
body.mobile-ui .mobileMarketInput {
  width: 100%;
  min-width: 0;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid #4a4f55;
  background: #20242a;
  color: #fff;
  font-size: clamp(10px, 1.6vw, 13px);
}

body.mobile-ui .mobileMarketControls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.mobile-ui .mobileMarketItemList {
  max-height: 132px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding-right: 2px;
}

body.mobile-ui .mobileMarketItemBtn {
  min-width: 0;
  min-height: 28px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid #4a4f55;
  background: #20242a;
  color: #fff;
  font-size: clamp(9px, 1.4vw, 12px);
  font-weight: 700;
  line-height: 1.1;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-ui .mobileMarketItemBtn.active {
  border-color: #9d2e2e;
  background: #c51616;
}

body.mobile-ui .mobileInspectModal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.24);
}

body.mobile-ui .mobileInspectModal.open {
  display: flex;
}

body.mobile-ui .mobileInspectCard {
  position: relative;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100vh - 42px);
  overflow: auto;
  box-sizing: border-box;
  padding: 12px;
  border: 2px solid #222;
  background: rgba(48, 48, 50, 0.96);
  box-shadow: 0 0 0 1px #666 inset, 0 18px 42px rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: Arial, sans-serif;
}

body.mobile-ui .mobileInspectClose {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 26px;
  height: 24px;
  border: 1px solid #555;
  background: #2c3036;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

body.mobile-ui .mobileInspectHead {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding-right: 30px;
  margin-bottom: 9px;
}

body.mobile-ui .mobileInspectIcon {
  width: 36px;
  height: 36px;
  border: 1px solid #3c3f46;
  background: #282a30;
  image-rendering: pixelated;
}

body.mobile-ui .mobileInspectIcon[hidden] {
  display: none;
}

body.mobile-ui .mobileInspectTitle {
  overflow-wrap: anywhere;
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 1.2;
}

body.mobile-ui .mobileInspectBody {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #e5e5e5;
  font-size: clamp(11px, 1.8vw, 14px);
  line-height: 1.3;
}

body.mobile-ui .mobileMarketSelected {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

body.mobile-ui .mobileMarketSelected canvas {
  width: 30px;
  height: 30px;
  image-rendering: pixelated;
}

body.mobile-ui .mobileMarketSelected div,
body.mobile-ui .mobileShopInfo,
body.mobile-ui .mobileTradeInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.mobile-ui .mobileMarketSelected strong,
body.mobile-ui .mobileShopInfo strong,
body.mobile-ui .mobileTradeInfo strong {
  overflow: hidden;
  color: #fff;
  font-size: clamp(10px, 1.6vw, 13px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.mobile-ui .mobileMarketSelected span,
body.mobile-ui .mobileShopInfo span,
body.mobile-ui .mobileShopInfo small,
body.mobile-ui .mobileTradeInfo span {
  overflow: hidden;
  color: #d6d6d6;
  font-size: clamp(9px, 1.4vw, 12px);
  line-height: 1.2;
  text-overflow: ellipsis;
}

body.mobile-ui .mobileMarketPostGrid {
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px 78px;
  gap: 5px;
}

body.mobile-ui .mobileTradeSectionTitle {
  margin-top: 2px;
  padding: 3px 6px;
  background: #2c3036;
  color: #fff;
  font-size: clamp(10px, 1.6vw, 13px);
  font-weight: 700;
}

body.mobile-ui .mobileTradeEmpty {
  padding: 7px;
  color: #ddd;
  font-size: clamp(10px, 1.6vw, 13px);
}

body.mobile-ui .mobileTradeRow,
body.mobile-ui .mobileShopRow {
  min-height: 42px;
  padding: 6px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 76px;
  align-items: center;
  gap: 7px;
}

body.mobile-ui .mobileTradeRow canvas,
body.mobile-ui .mobileShopRow img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}

body.mobile-ui .mobileTradeAction {
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #4a4f55;
  background: #2c3036;
  color: #fff;
  font-size: clamp(9px, 1.4vw, 12px);
  font-weight: 700;
}

body.mobile-ui .mobileTradeAction:disabled {
  opacity: 0.45;
}

body.mobile-ui .marketModalCard {
  width: min(96vw, 720px);
  max-height: 92vh;
}

body.mobile-ui .marketBoard {
  grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
}

body.mobile-ui .marketPostRow {
  grid-template-columns: minmax(0, 1fr) 58px 92px;
}

body.mobile-ui .marketRows {
  max-height: 17vh;
}

body.mobile-ui .rorTransferInputs {
  grid-template-columns: minmax(0, 1fr);
}

body.mobile-ui .mobileRorTransferForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

/* === ROR FIX: rolagem dos hubs e painéis laterais ===
   Corrige scroll travado nos hubs sem alterar estrutura HTML/JS.
   Mantém os painéis fixos, remove resize manual dos hubs e deixa a rolagem
   acontecer dentro das áreas corretas: painel principal, skills, battle,
   backpacks, monster bag e chat.
*/
#rightHubPanel.expanded {
  min-height: 0;
  max-height: calc(100vh - 286px);
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.hubSlotsSection,
.hubSkillsSection,
.hubBattleSection {
  resize: none !important;
  min-height: 0;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.hubSlotsSection {
  overflow-y: hidden;
}

.hubSkillsSection,
.hubBattleSection {
  overflow: hidden;
}

.hubSkillsBody,
.battleListBody,
.hubSlotsSection > .hubSlotsGrid,
.backpackContainerGrid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.backpackWindowsRoot,
.backpackContainerPanel {
  min-height: 0;
  overscroll-behavior: contain;
}

.backpackContainerPanel {
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#chatLog {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

html.mobile-ui #rightHubPanel.expanded,
html.mobile-ui .hubSlotsSection,
html.mobile-ui .hubSkillsBody,
html.mobile-ui .battleListBody,
html.mobile-ui .backpackContainerPanel,
html.mobile-ui #chatLog {
  touch-action: pan-y;
}

/* === ROR FIX: largura útil dos hubs com scrollbar ===
   A scrollbar pertence somente à área rolável. O painel/header ficam intactos,
   e a grade usa 100% da largura útil descontando apenas o gutter real. */
.hubSlotsSection,
.hubSkillsSection,
.hubBattleSection,
.backpackContainerPanel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.hubInventoryHeader,
.backpackContainerHead {
  flex: 0 0 auto;
}

.hubSlotsSection > .hubSlotsGrid,
.hubSkillsSection > .hubSkillsBody,
.hubBattleSection > .battleListBody,
.backpackContainerPanel > .backpackContainerGrid {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
  margin-right: 0;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.hubSlotsSection > .hubSlotsGrid,
.backpackContainerPanel > .backpackContainerGrid {
  display: grid;
  grid-template-columns: repeat(4, 42px);
  grid-auto-rows: 42px;
  grid-auto-flow: row;
  align-content: start;
  justify-content: center;
  width: 100%;
  height: auto;
  gap: 4px;
  box-sizing: border-box;
}

.hubSlotsSection > .hubSlotsGrid > .hubSlot,
.backpackContainerPanel > .backpackContainerGrid > .hubSlot,
.backpackContainerPanel > .backpackContainerGrid > .backpackContainerSlot {
  position: relative;
  overflow: hidden;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  justify-self: start;
  box-sizing: border-box;
  flex: 0 0 42px;
}

.hubSlotsSection > .hubSlotsGrid > .hubSlot::before,
.backpackContainerPanel > .backpackContainerGrid > .hubSlot::before,
.backpackContainerPanel > .backpackContainerGrid > .backpackContainerSlot::before {
  content: none;
  display: none;
  pointer-events: none;
}

.hubSlotsSection > .hubSlotsGrid > .hubSlot > canvas,
.hubSlotsSection > .hubSlotsGrid > .hubSlot > img,
.backpackContainerPanel > .backpackContainerGrid > .hubSlot > canvas,
.backpackContainerPanel > .backpackContainerGrid > .hubSlot > img,
.backpackContainerPanel > .backpackContainerGrid > .backpackContainerSlot > canvas,
.backpackContainerPanel > .backpackContainerGrid > .backpackContainerSlot > img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.hubSlotsSection > .hubSlotsGrid > .hubSlot > .hubSlotQty,
.backpackContainerPanel > .backpackContainerGrid > .hubSlot > .hubSlotQty,
.backpackContainerPanel > .backpackContainerGrid > .backpackContainerSlot > .hubSlotQty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  pointer-events: none;
  z-index: 3;
}

.item-slot-grid,
.backpack-grid,
.monsterbag-grid,
.container-grid,
.hubSlotsGrid,
.backpackContainerGrid,
#mobileInventoryGrid,
#mobileBackpackGrid,
#mobileMonsterBagGrid,
body.mobile-ui .mobileDepotGrid {
  display: grid !important;
  grid-template-columns: repeat(4, 42px) !important;
  grid-auto-rows: 42px !important;
  gap: 4px !important;
  align-content: start !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* Depot/Bank desktop: layout independente das backpacks.
   Preenche a area util da janela antes de quebrar linha. */
body:not(.mobile-client) .banqueiroModal .npcModalCard {
  width: min(760px, calc(100vw - 270px)) !important;
  max-height: calc(100vh - 88px) !important;
  overflow: hidden !important;
}

body:not(.mobile-client) .banqueiroModal .npcModalBody {
  min-height: 0 !important;
  overflow: hidden !important;
}

body:not(.mobile-client) .banqueiroModal .npcBankGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, 42px) !important;
  grid-auto-rows: 42px !important;
  gap: 4px !important;
  align-content: start !important;
  justify-content: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 220px !important;
  max-height: calc(100vh - 360px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#mobileInventoryGrid[hidden],
#mobileBackpackGrid[hidden] {
  display: none !important;
}

.item-slot,
.backpack-slot,
.monsterbag-slot,
.container-slot,
.hubSlot,
.backpackContainerSlot,
.monsterBagSlot,
.npcBankSlot,
#mobileInventoryGrid > .mobileInventorySlot,
#mobileBackpackGrid > .mobileInventorySlot,
#mobileMonsterBagGrid > .mobileInventorySlot,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot {
  position: relative !important;
  overflow: hidden !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  box-sizing: border-box !important;
  flex: 0 0 42px !important;
  justify-self: start !important;
}

body:not(.mobile-client) [data-dock-item="inventoryPanel"].hubSlotsSection > .hubSlotsGrid {
  display: grid !important;
  grid-template-columns: repeat(4, 42px) !important;
  grid-auto-rows: 42px !important;
  gap: 4px !important;
  align-content: start !important;
  align-items: start !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}

body:not(.mobile-client) [data-dock-item="inventoryPanel"].hubSlotsSection > .hubSlotsGrid > .hubSlot,
body:not(.mobile-client) [data-dock-item="inventoryPanel"].hubSlotsSection > .hubSlotsGrid > .hubSlot[data-slot] {
  position: relative !important;
  overflow: hidden !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  aspect-ratio: auto !important;
  box-sizing: border-box !important;
  flex: 0 0 42px !important;
  justify-self: start !important;
  align-self: start !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.hubSlot::before,
.backpackContainerSlot::before,
.monsterBagSlot::before,
.npcBankSlot::before {
  content: none !important;
  display: none !important;
}

.item-slot img,
.backpack-slot img,
.monsterbag-slot img,
.container-slot img,
.item-slot canvas,
.backpack-slot canvas,
.monsterbag-slot canvas,
.container-slot canvas,
.hubSlot > img,
.hubSlot > canvas,
.backpackContainerSlot > img,
.backpackContainerSlot > canvas,
.monsterBagSlot > img,
.monsterBagSlot > canvas,
.npcBankSlot > img,
.npcBankSlot > canvas,
#mobileInventoryGrid > .mobileInventorySlot > img,
#mobileInventoryGrid > .mobileInventorySlot > canvas,
#mobileBackpackGrid > .mobileInventorySlot > img,
#mobileBackpackGrid > .mobileInventorySlot > canvas,
#mobileMonsterBagGrid > .mobileInventorySlot > img,
#mobileMonsterBagGrid > .mobileInventorySlot > canvas,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot > img,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot > canvas,
.item-icon {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: auto !important;
  height: auto !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.item-count,
.stack-count,
.hubSlotQty,
.mobileInventoryQty,
.npcBankSlotQty {
  position: absolute !important;
  right: 2px !important;
  bottom: 1px !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

body:not(.mobile-ui) #gameLayout {
  inset: 0 0 var(--bottom-hud-space) 0 !important;
}

body:not(.mobile-ui) #gameFrame {
  left: var(--ror-left-game-clearance, calc(var(--ror-left-sidebar-width, 213px) + 26px)) !important;
  right: var(--ror-right-game-clearance, calc(var(--ror-right-sidebar-width, 213px) + 26px)) !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

body:not(.mobile-ui) #bottomHud {
  left: var(--ror-left-game-clearance, calc(var(--ror-left-sidebar-width, 213px) + 26px)) !important;
  right: var(--ror-right-game-clearance, calc(var(--ror-right-sidebar-width, 213px) + 26px)) !important;
  width: auto !important;
  max-width: none !important;
}

body:not(.mobile-ui) #leftPullPanel,
body:not(.mobile-ui) #leftPullHub,
body:not(.mobile-ui) #leftPullHub.expanded #leftPullPanel {
  width: var(--ror-left-sidebar-width, 213px) !important;
  min-width: var(--ror-left-sidebar-width, 213px) !important;
  max-width: var(--ror-left-sidebar-width, 213px) !important;
  flex: 0 0 var(--ror-left-sidebar-width, 213px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body:not(.mobile-ui) #leftPullHub {
  left: 0 !important;
}

body:not(.mobile-ui) #rightPullHub {
  right: 0 !important;
}

body:not(.mobile-ui) #rightPullPanel,
body:not(.mobile-ui) #rightPullHub,
body:not(.mobile-ui) #rightHubPanel,
body:not(.mobile-ui) #rightHubPanel.expanded,
body:not(.mobile-ui) #rightPullHub.expanded #rightPullPanel {
  width: var(--ror-right-sidebar-width, 213px) !important;
  min-width: var(--ror-right-sidebar-width, 213px) !important;
  max-width: var(--ror-right-sidebar-width, 213px) !important;
  flex: 0 0 var(--ror-right-sidebar-width, 213px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body:not(.mobile-ui) #leftHubContent,
body:not(.mobile-ui) #rightHubContent {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  padding-right: 0 !important;
}

body:not(.mobile-ui) #leftHubContent > *,
body:not(.mobile-ui) #rightHubContent > *,
body:not(.mobile-ui) .dockZone > *,
body:not(.mobile-ui) #miniMapCard,
body:not(.mobile-ui) #rightHubActionRow,
body:not(.mobile-ui) .equipHubCard,
body:not(.mobile-ui) .hubSlotsSection,
body:not(.mobile-ui) .hubSkillsSection,
body:not(.mobile-ui) .hubBattleSection,
body:not(.mobile-ui) .backpackWindowsRoot,
body:not(.mobile-ui) #rorDesktopPanelMenuWindow {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

body:not(.mobile-ui) .hubSlotsSection {
  padding: 4px !important;
}

body:not(.mobile-ui) .hubInventoryHeader,
body:not(.mobile-ui) .hub-header,
body:not(.mobile-ui) .backpackContainerHead {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 24px !important;
  height: 24px !important;
  padding: 3px 46px 3px 5px !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body:not(.mobile-ui) .hub-title,
body:not(.mobile-ui) .hubBagTitle,
body:not(.mobile-ui) .backpackContainerTitleWrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: 18px !important;
}

body:not(.mobile-ui) .hubWindowControls,
body:not(.mobile-ui) .hub-actions {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3px !important;
  width: auto !important;
  min-width: 39px !important;
  height: 18px !important;
  max-height: 18px !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

body:not(.mobile-ui) .hubCollapseBtn,
body:not(.mobile-ui) .hubWindowCloseBtn,
body:not(.mobile-ui) .backpackMinimizeBtn,
body:not(.mobile-ui) .backpackCloseBtn,
body:not(.mobile-ui) .hubWindowControls > button,
body:not(.mobile-ui) .hub-actions > button {
  appearance: none !important;
  position: static !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(126, 157, 192, 0.75) !important;
  border-radius: 4px !important;
  background: rgba(26, 35, 46, 0.9) !important;
  color: #dcecff !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: 800 12px/1 system-ui, sans-serif !important;
  text-align: center !important;
  transform: none !important;
  vertical-align: top !important;
}

body:not(.mobile-ui) .rightHubHint {
  display: none !important;
}

body:not(.mobile-ui) #rightHubContent,
body:not(.mobile-ui) #leftHubContent,
body:not(.mobile-ui) .dockZone {
  gap: 1px !important;
}

body:not(.mobile-ui) #rightHubActionRow {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 3px !important;
}

body:not(.mobile-ui) #miniMapCard,
body:not(.mobile-ui) .equipHubCard,
body:not(.mobile-ui) [data-dock-item="inventoryPanel"].hubSlotsSection,
body:not(.mobile-ui) #rorDesktopPanelMenuWindow {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body:not(.mobile-ui) .hubHungerLabel {
  margin: 0 !important;
  padding: 2px 6px !important;
}

body:not(.mobile-ui) [data-dock-item="inventoryPanel"].hubSlotsSection {
  min-width: 0 !important;
  padding: 4px !important;
}

body:not(.mobile-ui) #chatBox {
  display: grid !important;
  grid-template-rows: 24px minmax(0, 1fr) 28px !important;
  gap: 3px !important;
  box-sizing: border-box !important;
  padding: 4px 6px 6px 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: var(--ror-bottom-chat-height, 176px) !important;
  min-height: var(--ror-bottom-chat-height, 176px) !important;
  max-height: var(--ror-bottom-chat-height, 176px) !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.mobile-ui) #chatBox.mobileHidden {
  display: grid !important;
}

body:not(.mobile-ui) #chatTabs {
  justify-self: start !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-end !important;
  gap: 2px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

body:not(.mobile-ui) #chatTabs .chatTab,
body:not(.mobile-ui) #chatTabs [data-chat-tab] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 50px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 8px !important;
  border-radius: 4px 4px 0 0 !important;
  font: 800 11px/20px Arial, system-ui, sans-serif !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

body:not(.mobile-ui) #chatTabs .chatTabLabel {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  line-height: 20px !important;
}

body:not(.mobile-ui) #chatTabs .chatTabState {
  display: none !important;
}

body:not(.mobile-ui) #chatTabs .chatTab.active,
body:not(.mobile-ui) #chatTabs [data-chat-tab].active,
body:not(.mobile-ui) #chatTabs [data-chat-tab][aria-selected="true"] {
  color: #ffd36f !important;
  border-color: rgba(236, 198, 111, 0.98) !important;
  background: linear-gradient(180deg, rgba(91, 64, 20, 0.98), rgba(25, 17, 8, 0.98)) !important;
  box-shadow: inset 0 -2px 0 rgba(255, 211, 111, 0.95), 0 0 0 1px rgba(255, 211, 111, 0.18) !important;
}

/* ROR private chat tabs: close button inside private message tab */
#chatTabs .privateChatTab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 128px;
}

#chatTabs .privateChatTab .chatTabLabel {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chatTabs .privateChatTab .chatTabClose {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font: 900 11px/1 Arial, sans-serif;
  color: #f6d8d8;
  background: rgba(120, 30, 30, 0.72);
  cursor: pointer;
}

#chatTabs .privateChatTab .chatTabClose:hover {
  color: #fff;
  background: rgba(190, 42, 42, 0.92);
}

/* ROR v17: PK/Battle e Party como indicadores visuais, sem comportamento de botao */
.equipAuxSlot.equipAuxIndicator {
  cursor: default;
  pointer-events: none;
}

.equipAuxSlot.equipAuxIndicator.active {
  border-color: rgba(126, 170, 218, 0.82);
  background: linear-gradient(180deg, rgba(22, 31, 42, 0.96), rgba(10, 15, 22, 0.96));
  box-shadow: inset 0 0 0 1px rgba(182, 215, 255, 0.10);
}

.equipAuxSlot.equipAuxIndicator.pkBattleActive {
  border-color: rgba(233, 196, 112, 0.95);
  background: linear-gradient(180deg, rgba(66, 49, 17, 0.96), rgba(22, 18, 12, 0.96));
  box-shadow: 0 0 8px rgba(233, 196, 112, 0.22), inset 0 0 0 1px rgba(255, 239, 178, 0.12);
}

.equipAuxSlot.equipAuxIndicator.pkStatusActive {
  border-color: rgba(232, 78, 78, 0.95);
  background: linear-gradient(180deg, rgba(76, 22, 22, 0.96), rgba(24, 10, 10, 0.96));
  box-shadow: 0 0 8px rgba(232, 78, 78, 0.28), inset 0 0 0 1px rgba(255, 170, 170, 0.12);
}

.equipAuxSlot.equipAuxIndicator.partyStatusActive {
  border-color: rgba(80, 214, 132, 0.95);
  background: linear-gradient(180deg, rgba(18, 58, 34, 0.96), rgba(9, 22, 15, 0.96));
  box-shadow: 0 0 8px rgba(80, 214, 132, 0.24), inset 0 0 0 1px rgba(164, 255, 194, 0.12);
}

.equipAuxSlot.equipAuxIndicator canvas {
  opacity: 1;
  filter: none;
}


.druidSioTargetModal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 6, 9, 0.58);
}

.druidSioTargetCard {
  position: relative;
  width: min(360px, 94vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(109, 255, 150, 0.55);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(13, 29, 20, 0.98), rgba(6, 11, 10, 0.98));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.54), inset 0 0 18px rgba(61, 255, 122, 0.08);
  color: #eaffef;
}

.druidSioTargetCard strong {
  color: #91ff9e;
  font-size: 17px;
}

.druidSioTargetCard span {
  color: #bfe8c5;
  font-size: 12px;
  line-height: 1.35;
}

.druidSioTargetInput {
  width: 100%;
  height: 36px;
  border: 1px solid rgba(127, 255, 156, 0.42);
  border-radius: 7px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  outline: none;
}

.druidSioTargetInput:focus {
  border-color: rgba(145, 255, 158, 0.86);
  box-shadow: 0 0 0 2px rgba(91, 255, 126, 0.18);
}

.druidSioTargetActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.druidSioTargetActions button,
.druidSioTargetClose {
  border: 1px solid rgba(145, 255, 158, 0.45);
  border-radius: 7px;
  background: rgba(20, 55, 30, 0.86);
  color: #eaffef;
  font-weight: 700;
  cursor: pointer;
}

.druidSioTargetActions button {
  min-width: 72px;
  padding: 8px 10px;
}

.druidSioTargetActions button:hover,
.druidSioTargetClose:hover {
  border-color: rgba(178, 255, 187, 0.92);
  background: rgba(33, 92, 46, 0.92);
}

.druidSioTargetClose {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
}

/* ROR mobile v8: responsive HUD, bags and touch UX */
body.mobile-ui {
  --mobile-safe-x: max(6px, env(safe-area-inset-left));
  --mobile-safe-y: max(5px, env(safe-area-inset-top));
  --mobile-control: clamp(26px, 7.2vmin, 42px);
  --mobile-control-small: clamp(22px, 5.8vmin, 34px);
  --mobile-menu-slot: clamp(30px, 7.2vmin, 42px);
  --mobile-chat-width: min(48vw, 360px);
  --mobile-chat-height: clamp(92px, 24vh, 186px);
  overflow: hidden !important;
  touch-action: none;
}

html.mobile-ui,
body.mobile-ui,
body.mobile-ui #gameFrame,
body.mobile-ui #mobileHud {
  width: var(--mobile-locked-width, 100dvw) !important;
  height: var(--mobile-locked-height, 100dvh) !important;
  max-width: 100dvw !important;
  max-height: 100dvh !important;
}

body.mobile-ui #mobileHud {
  inset: 0 !important;
  overflow: hidden !important;
  pointer-events: none;
}

body.mobile-ui #mobileHud button,
body.mobile-ui #mobileHud [role="button"],
body.mobile-ui #mobileInventoryPanel,
body.mobile-ui #chatBox,
body.mobile-ui .mobileHotkeyPanel,
body.mobile-ui .mobileInspectModal {
  pointer-events: auto;
}

body.mobile-ui #mobilePortraitWrap {
  left: var(--mobile-safe-x) !important;
  top: var(--mobile-safe-y) !important;
  width: clamp(42px, 12.5vmin, 68px) !important;
  height: clamp(42px, 12.5vmin, 68px) !important;
  transform: none !important;
}

body.mobile-ui #mobileHpWrap,
body.mobile-ui #mobileMpWrap,
body.mobile-ui #mobileXpWrap,
body.mobile-ui .mobileImageBar {
  min-width: 116px !important;
  max-width: min(35vw, 230px) !important;
  height: clamp(12px, 3.1vmin, 18px) !important;
}

body.mobile-ui #mobileHpWrap,
body.mobile-ui #mobileMpWrap,
body.mobile-ui #mobileXpWrap {
  left: calc(var(--mobile-safe-x) + clamp(48px, 13.8vmin, 76px)) !important;
  transform: none !important;
}

body.mobile-ui #mobileHpWrap { top: calc(var(--mobile-safe-y) + 3px) !important; }
body.mobile-ui #mobileMpWrap { top: calc(var(--mobile-safe-y) + clamp(18px, 4.8vmin, 27px)) !important; }
body.mobile-ui #mobileXpWrap { top: calc(var(--mobile-safe-y) + clamp(34px, 8.4vmin, 47px)) !important; }

body.mobile-ui .mobileImageBar .mobileStatValue,
body.mobile-ui .mobileStatValue {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff7d7 !important;
  font-size: clamp(8px, 2.2vmin, 11px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 2px #000, 0 0 3px #000 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

body.mobile-ui #mobilePlayerName,
body.mobile-ui #mobileClassText,
body.mobile-ui #mobileLevelText {
  font-size: clamp(9px, 2.5vmin, 12px) !important;
  line-height: 1.05 !important;
  text-shadow: 0 1px 2px #000 !important;
}

body.mobile-ui .mobileImageButton,
body.mobile-ui .mobileHudButton,
body.mobile-ui #mobileAutoChaseToggleBtn,
body.mobile-ui #mobileCombatStanceBtn,
body.mobile-ui #mobilePvpBtn,
body.mobile-ui #mobileHotkeyToggleBtn {
  width: var(--mobile-control) !important;
  height: var(--mobile-control) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 5px !important;
  filter: saturate(.72) contrast(1.08) !important;
}

body.mobile-ui .mobileImageButton > img,
body.mobile-ui .mobileHudButton > img {
  width: 86% !important;
  height: 86% !important;
  object-fit: contain !important;
}

body.mobile-ui #mobileJoystickWrap.dynamic-active {
  transform: translate(-50%, -50%) !important;
}

body.mobile-ui #mobileJoystickBase {
  width: clamp(72px, 18vmin, 118px) !important;
  height: clamp(72px, 18vmin, 118px) !important;
  opacity: .82 !important;
}

body.mobile-ui #mobileJoystickKnob {
  width: clamp(28px, 7.2vmin, 46px) !important;
  height: clamp(28px, 7.2vmin, 46px) !important;
}

body.mobile-ui #mobileInventoryPanel:not([hidden]) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding: calc(var(--mobile-safe-y) + 8px) 8px 8px calc(var(--mobile-safe-x) + 8px) !important;
  background: transparent !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileMenuWindow {
  --mobile-menu-slot: clamp(30px, 7.1vmin, 42px);
  width: min(62vw, 560px) !important;
  height: min(74dvh, 430px) !important;
  min-width: min(300px, calc(100dvw - 16px)) !important;
  max-width: calc(100dvw - 16px) !important;
  max-height: calc(100dvh - 16px) !important;
  padding: clamp(26px, 7vmin, 36px) clamp(8px, 2.2vmin, 14px) clamp(8px, 2.4vmin, 14px) !important;
  border: 1px solid rgba(130, 126, 112, .7) !important;
  border-radius: 6px !important;
  background: rgba(22, 24, 26, .74) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .42), inset 0 0 0 1px rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(5px) !important;
}

body.mobile-ui .mobileMenuTitle {
  top: 7px !important;
  left: 10px !important;
  font-size: clamp(10px, 2.6vmin, 13px) !important;
}

body.mobile-ui .mobileMenuClose {
  top: 5px !important;
  right: 6px !important;
  width: clamp(23px, 6vmin, 30px) !important;
  height: clamp(23px, 6vmin, 30px) !important;
  padding: 0 !important;
}

body.mobile-ui .mobileMenuTabs,
body.mobile-ui .mobileBackpackTabs {
  gap: 4px !important;
  margin-right: 38px !important;
  scrollbar-width: none !important;
}

body.mobile-ui .mobileMenuTab,
body.mobile-ui .mobileBackpackTab {
  min-height: clamp(20px, 5.2vmin, 27px) !important;
  padding: 2px 6px !important;
  font-size: clamp(9px, 2.2vmin, 12px) !important;
}

body.mobile-ui .mobileInventoryContent,
body.mobile-ui .mobileMonsterBagContent,
body.mobile-ui .mobileDepotContent {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid,
body.mobile-ui .mobileDepotGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--mobile-menu-slot), var(--mobile-menu-slot))) !important;
  grid-auto-rows: var(--mobile-menu-slot) !important;
  gap: clamp(3px, .9vmin, 5px) !important;
  align-content: start !important;
  justify-content: start !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot {
  width: var(--mobile-menu-slot) !important;
  height: var(--mobile-menu-slot) !important;
  min-width: var(--mobile-menu-slot) !important;
  min-height: var(--mobile-menu-slot) !important;
  max-width: var(--mobile-menu-slot) !important;
  max-height: var(--mobile-menu-slot) !important;
  flex: 0 0 var(--mobile-menu-slot) !important;
  border-radius: 4px !important;
}

body.mobile-ui .mobileMonsterBagHint {
  display: none !important;
}

body.mobile-ui #chatBox {
  width: var(--mobile-chat-width) !important;
  height: var(--mobile-chat-height) !important;
  max-width: calc(100dvw - 14px) !important;
  max-height: calc(100dvh - 14px) !important;
  min-width: 220px !important;
  min-height: 88px !important;
  display: flex !important;
  flex-direction: column !important;
  touch-action: none !important;
}

body.mobile-ui #chatTabs {
  display: flex !important;
  flex: 0 0 auto !important;
  min-height: clamp(18px, 4.8vmin, 24px) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

body.mobile-ui #chatTabs .chatTab,
body.mobile-ui #chatTabs [data-chat-tab] {
  min-width: 44px !important;
  height: clamp(18px, 4.8vmin, 24px) !important;
  padding: 0 6px !important;
  font-size: clamp(8px, 2.1vmin, 11px) !important;
}

body.mobile-ui #chatLog {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body.mobile-ui #mobilePartyHud {
  position: absolute !important;
  left: var(--mobile-safe-x) !important;
  top: calc(var(--mobile-safe-y) + clamp(66px, 18vmin, 92px)) !important;
  z-index: 265 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  width: min(34vw, 180px) !important;
  max-width: calc(100dvw - 14px) !important;
  background: transparent !important;
  pointer-events: none !important;
}

body.mobile-ui #mobilePartyHud[hidden] {
  display: none !important;
}

body.mobile-ui .mobilePartyMember {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  color: #e9fff0 !important;
  text-shadow: 0 1px 2px #000, 0 0 4px #000 !important;
}

body.mobile-ui .mobilePartyName {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(9px, 2.3vmin, 12px) !important;
  font-weight: 800 !important;
}

body.mobile-ui .mobilePartyHp {
  position: relative !important;
  display: block !important;
  height: clamp(6px, 1.7vmin, 9px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,.62) !important;
  border-radius: 2px !important;
  background: rgba(50, 12, 12, .62) !important;
}

body.mobile-ui .mobilePartyHp i {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  display: block !important;
  background: linear-gradient(180deg, #67e37e, #16853b) !important;
}

body.mobile-ui .mobilePartyHp b {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(6px, 1.45vmin, 8px) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 1px #000 !important;
}

@media (min-width: 900px) and (max-height: 520px) {
  body.mobile-ui {
    --mobile-control: clamp(24px, 6.2vmin, 36px);
    --mobile-menu-slot: clamp(28px, 6.4vmin, 38px);
    --mobile-chat-height: clamp(82px, 22vh, 150px);
  }

  body.mobile-ui .mobileMenuWindow {
    width: min(54vw, 520px) !important;
    height: min(70dvh, 390px) !important;
  }
}

/* ROR mobile v16: compact vitals cluster with AAA readability. */
body.mobile-ui {
  --mobile-safe-x: max(2px, env(safe-area-inset-left, 0px)) !important;
  --mobile-safe-y: max(2px, env(safe-area-inset-top, 0px)) !important;
  --mobile-control: clamp(39px, 10.8vmin, 63px) !important;
  --mobile-top-gap: clamp(2px, 0.8vmin, 5px);
  --mobile-portrait-size: clamp(60px, 15.8vmin, 76px);
  --mobile-status-icon-w: 30px;
  --mobile-status-icon-h: 30px;
  --mobile-status-bar-w: clamp(140px, 36vmin, 160px);
  --mobile-status-bar-h: 26px;
  --mobile-status-icon-gap: 6px;
  --mobile-status-row-h: 30px;
  --mobile-minimap-size: clamp(82px, 22vmin, 112px);
  --mobile-minimap-w: var(--mobile-minimap-size);
  --mobile-minimap-h: var(--mobile-minimap-size);
}

body.mobile-ui #topGameViewVitalsBar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.mobile-ui #mobilePortraitWrap {
  left: var(--mobile-safe-x) !important;
  top: var(--mobile-safe-y) !important;
  width: var(--mobile-portrait-size) !important;
  height: var(--mobile-portrait-size) !important;
  z-index: 260 !important;
  transform: none !important;
}

body.mobile-ui #mobileHpIcon,
body.mobile-ui #mobileMpIcon,
body.mobile-ui #mobileXpIcon {
  left: calc(var(--mobile-safe-x) + var(--mobile-portrait-size) + 4px) !important;
  width: var(--mobile-status-icon-w) !important;
  height: var(--mobile-status-icon-h) !important;
  z-index: 262 !important;
  transform: none !important;
}

body.mobile-ui #mobileHpIcon { top: calc(var(--mobile-safe-y) + 4px) !important; }
body.mobile-ui #mobileMpIcon { top: calc(var(--mobile-safe-y) + var(--mobile-status-row-h) + 4px) !important; }
body.mobile-ui #mobileXpIcon { top: calc(var(--mobile-safe-y) + var(--mobile-status-row-h) + var(--mobile-status-row-h) + 4px) !important; }

body.mobile-ui #mobileHpBar,
body.mobile-ui #mobileMpBar,
body.mobile-ui #mobileXpBar {
  left: calc(var(--mobile-safe-x) + var(--mobile-portrait-size) + 4px + var(--mobile-status-icon-w) + var(--mobile-status-icon-gap)) !important;
  width: var(--mobile-status-bar-w) !important;
  height: var(--mobile-status-bar-h) !important;
  min-width: var(--mobile-status-bar-w) !important;
  max-width: var(--mobile-status-bar-w) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  background: rgba(4, 7, 10, .58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    0 2px 6px rgba(0, 0, 0, .16) !important;
  overflow: hidden !important;
  z-index: 261 !important;
  transform: none !important;
}

body.mobile-ui #mobileHpBar { top: calc(var(--mobile-safe-y) + 6px) !important; }
body.mobile-ui #mobileMpBar { top: calc(var(--mobile-safe-y) + var(--mobile-status-row-h) + 6px) !important; }
body.mobile-ui #mobileXpBar { top: calc(var(--mobile-safe-y) + var(--mobile-status-row-h) + var(--mobile-status-row-h) + 6px) !important; }

body.mobile-ui #mobileMapPanel {
  top: calc(var(--mobile-safe-y) + clamp(8px, 2.2vmin, 14px)) !important;
  right: calc(var(--mobile-safe-x) + clamp(8px, 1.8vmin, 14px)) !important;
  left: auto !important;
  width: var(--mobile-minimap-w) !important;
  height: var(--mobile-minimap-h) !important;
  min-width: var(--mobile-minimap-w) !important;
  min-height: var(--mobile-minimap-h) !important;
  max-width: var(--mobile-minimap-w) !important;
  max-height: var(--mobile-minimap-h) !important;
  z-index: 252 !important;
  transform: none !important;
  overflow: visible !important;
}

body.mobile-ui #mobileTopButtons {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 270 !important;
}

body.mobile-ui #mobileTopButtons .mobileImageButton,
body.mobile-ui .mobileActionBtn {
  width: var(--mobile-control) !important;
  height: var(--mobile-control) !important;
  min-width: var(--mobile-control) !important;
  min-height: var(--mobile-control) !important;
  border-radius: 6px !important;
  pointer-events: auto !important;
}

body.mobile-ui #mobileTopButtons .mobileImageButton > img,
body.mobile-ui .mobileActionBtn > img {
  width: 96% !important;
  height: 96% !important;
  object-fit: contain !important;
}

body.mobile-ui #mobileSettingsToggleBtn,
body.mobile-ui #mobileMapToggleBtn,
body.mobile-ui #mobileInventoryToggleBtn,
body.mobile-ui #mobileAutoChaseToggleBtn,
body.mobile-ui #mobileCombatStanceBtn,
body.mobile-ui #mobilePvpToggleBtn {
  top: var(--mobile-safe-y) !important;
  left: auto !important;
  transform: none !important;
}

body.mobile-ui #mobileSettingsToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileMapToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-control) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileInventoryToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-control) + var(--mobile-control) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileAutoChaseToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-control) + var(--mobile-control) + var(--mobile-control) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileCombatStanceBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-control) + var(--mobile-control) + var(--mobile-control) + var(--mobile-control) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobilePvpToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-control) + var(--mobile-control) + var(--mobile-control) + var(--mobile-control) + var(--mobile-control) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }

body.mobile-ui #mobileHotkeyToggleBtn,
body.mobile-ui #mobileChatToggleBtn {
  width: clamp(32px, 8.8vmin, 52px) !important;
  height: clamp(32px, 8.8vmin, 52px) !important;
}

body.mobile-ui .mobileSkillSlot {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.mobile-ui .mobileSkillSlot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: url("./assets/interfacemobileicon/slotsmobile.png?v=20260628-004") center / contain no-repeat;
  pointer-events: none;
}

body.mobile-ui .mobileSkillSlot canvas {
  left: 19% !important;
  top: 19% !important;
  width: 72% !important;
  height: 72% !important;
  z-index: 2 !important;
  border-radius: 4px !important;
}

body.mobile-ui .mobileSkillCooldown { z-index: 3 !important; }
body.mobile-ui .mobileSkillCooldownText,
body.mobile-ui .mobileSkillKey,
body.mobile-ui .mobileSkillQty { z-index: 6 !important; }

body.mobile-ui #mobileJoystickWrap.dynamic-active {
  transform: translate(-50%, -50%) !important;
}

body.mobile-ui #mobileJoystickWrap.dynamic-active,
body.mobile-ui #mobileJoystickWrap.dynamic-active #mobileJoystickBase {
  pointer-events: auto !important;
}

body.mobile-ui #mobileInventoryPanel:not([hidden]) {
  background: rgba(0, 0, 0, .18) !important;
}

body.mobile-ui .mobileMenuClose {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: clamp(54px, 14vmin, 76px) !important;
  width: auto !important;
  height: clamp(26px, 6.8vmin, 34px) !important;
  padding: 0 8px !important;
  z-index: 5 !important;
  border-color: rgba(207, 190, 146, .82) !important;
  background: rgba(35, 37, 39, .96) !important;
  color: #f5e5bb !important;
  font-size: clamp(10px, 2.5vmin, 13px) !important;
}

/* ROR mobile v15b: portrait and skill-slot responsive bounds */
body.mobile-ui {
  --mobile-bottom-safe: max(8px, env(safe-area-inset-bottom, 0px));
  --mobile-skill-slot: clamp(42px, 13.4vmin, 52px);
  --mobile-skill-gap: clamp(4px, 1.2vmin, 7px);
  --mobile-skill-landscape-left: calc(100dvw - var(--mobile-safe-x) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-gap) - var(--mobile-skill-gap) - var(--mobile-skill-gap));
  --mobile-skill-landscape-top: calc(100dvh - var(--mobile-bottom-safe) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-gap));
  --mobile-skill-portrait-left: calc(100dvw - var(--mobile-safe-x) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-gap));
  --mobile-skill-portrait-top: calc(100dvh - var(--mobile-bottom-safe) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-slot) - var(--mobile-skill-gap) - var(--mobile-skill-gap) - var(--mobile-skill-gap));
}

body.mobile-ui #mobileSkillBar {
  position: absolute !important;
  inset: 0 !important;
  width: 100dvw !important;
  height: 100dvh !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileSkillGrid {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

body.mobile-ui .mobileSkillSlot {
  position: absolute !important;
  width: var(--mobile-skill-slot) !important;
  height: var(--mobile-skill-slot) !important;
  min-width: var(--mobile-skill-slot) !important;
  min-height: var(--mobile-skill-slot) !important;
  max-width: var(--mobile-skill-slot) !important;
  max-height: var(--mobile-skill-slot) !important;
  pointer-events: auto !important;
}

@media (orientation: landscape) {
  body.mobile-ui .mobileSkillSlot:nth-child(1) {
    left: var(--mobile-skill-landscape-left) !important;
    top: var(--mobile-skill-landscape-top) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(2) {
    left: calc(var(--mobile-skill-landscape-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: var(--mobile-skill-landscape-top) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(3) {
    left: calc(var(--mobile-skill-landscape-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: var(--mobile-skill-landscape-top) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(4) {
    left: calc(var(--mobile-skill-landscape-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: var(--mobile-skill-landscape-top) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(5) {
    left: var(--mobile-skill-landscape-left) !important;
    top: calc(var(--mobile-skill-landscape-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(6) {
    left: calc(var(--mobile-skill-landscape-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: calc(var(--mobile-skill-landscape-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(7) {
    left: calc(var(--mobile-skill-landscape-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: calc(var(--mobile-skill-landscape-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(8) {
    left: calc(var(--mobile-skill-landscape-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: calc(var(--mobile-skill-landscape-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobilePvpToggleBtn,
  body.mobile-ui #mobileCombatStanceBtn,
  body.mobile-ui #mobileAutoChaseToggleBtn,
  body.mobile-ui #mobileInventoryToggleBtn,
  body.mobile-ui #mobileMapToggleBtn,
  body.mobile-ui #mobileSettingsToggleBtn {
    top: calc(var(--mobile-safe-y) + var(--mobile-portrait-size) + var(--mobile-top-gap)) !important;
  }

  body.mobile-ui .mobileSkillSlot:nth-child(1) {
    left: var(--mobile-skill-portrait-left) !important;
    top: var(--mobile-skill-portrait-top) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(2) {
    left: calc(var(--mobile-skill-portrait-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: var(--mobile-skill-portrait-top) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(3) {
    left: var(--mobile-skill-portrait-left) !important;
    top: calc(var(--mobile-skill-portrait-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(4) {
    left: calc(var(--mobile-skill-portrait-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: calc(var(--mobile-skill-portrait-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(5) {
    left: var(--mobile-skill-portrait-left) !important;
    top: calc(var(--mobile-skill-portrait-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(6) {
    left: calc(var(--mobile-skill-portrait-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: calc(var(--mobile-skill-portrait-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(7) {
    left: var(--mobile-skill-portrait-left) !important;
    top: calc(var(--mobile-skill-portrait-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
  body.mobile-ui .mobileSkillSlot:nth-child(8) {
    left: calc(var(--mobile-skill-portrait-left) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
    top: calc(var(--mobile-skill-portrait-top) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap) + var(--mobile-skill-slot) + var(--mobile-skill-gap)) !important;
  }
}

/* ROR mobile v16: backpack, action buttons, chat and minimap polish */
body.mobile-ui {
  --mobile-action-control: clamp(59px, 16.2vmin, 95px);
  --mobile-chat-button: clamp(22px, 6.2vmin, 36px);
  --mobile-menu-slot-v16: clamp(40px, 9.5vmin, 52px);
  --mobile-menu-gap-v16: clamp(4px, 1.1vmin, 7px);
}

body.mobile-ui #mobileMapPanel {
  top: calc(var(--mobile-safe-y) + clamp(8px, 2.2vmin, 14px)) !important;
}

body.mobile-ui #mobileAttackBtn,
body.mobile-ui #mobilePickupBtn {
  width: var(--mobile-action-control) !important;
  height: var(--mobile-action-control) !important;
  min-width: var(--mobile-action-control) !important;
  min-height: var(--mobile-action-control) !important;
  touch-action: manipulation !important;
  pointer-events: auto !important;
  z-index: 310 !important;
}

body.mobile-ui #mobileAttackBtn > img,
body.mobile-ui #mobilePickupBtn > img {
  width: 98% !important;
  height: 98% !important;
}

body.mobile-ui #mobileChatToggleBtn {
  width: var(--mobile-chat-button) !important;
  height: var(--mobile-chat-button) !important;
  min-width: var(--mobile-chat-button) !important;
  min-height: var(--mobile-chat-button) !important;
  left: calc(50dvw + var(--mobile-chat-button) / 2 + 4px) !important;
  right: auto !important;
  bottom: calc(var(--mobile-bottom-safe) + 2px) !important;
  top: auto !important;
}

body.mobile-ui #mobileHotkeyToggleBtn {
  width: var(--mobile-chat-button) !important;
  height: var(--mobile-chat-button) !important;
  min-width: var(--mobile-chat-button) !important;
  min-height: var(--mobile-chat-button) !important;
  left: calc(50dvw - var(--mobile-chat-button) - 4px) !important;
  right: auto !important;
  bottom: calc(var(--mobile-bottom-safe) + 2px) !important;
  top: auto !important;
}

body.mobile-ui #mobileChatToggleBtn span {
  font-size: clamp(10px, 2.7vmin, 14px) !important;
  line-height: 1 !important;
}

body.mobile-ui #chatBox {
  left: 50dvw !important;
  right: auto !important;
  bottom: calc(var(--mobile-bottom-safe) + var(--mobile-chat-button) + 8px) !important;
  transform: translateX(-50%) !important;
  width: min(58dvw, 380px) !important;
  max-width: calc(100dvw - 20px) !important;
  height: clamp(96px, 25dvh, 178px) !important;
  z-index: 255 !important;
}

body.mobile-ui #chatTabs .chatTab,
body.mobile-ui #chatTabs [data-chat-tab] {
  min-width: clamp(42px, 10.6vmin, 58px) !important;
  height: clamp(18px, 4.6vmin, 23px) !important;
  padding: 0 5px !important;
  font-size: clamp(8px, 2vmin, 10px) !important;
  line-height: 1 !important;
}

body.mobile-ui #chatTabs .chatTabState {
  display: none !important;
}

body.mobile-ui #mobileInventoryPanel:not([hidden]) {
  align-items: center !important;
  justify-content: center !important;
  padding: max(4px, var(--mobile-safe-y)) max(4px, var(--mobile-safe-x)) !important;
  background: rgba(0, 0, 0, .18) !important;
}

body.mobile-ui .mobileMenuWindow {
  --mobile-menu-slot: var(--mobile-menu-slot-v16) !important;
  width: min(88dvw, 760px) !important;
  height: min(84dvh, 540px) !important;
  min-width: min(350px, calc(100dvw - 10px)) !important;
  max-width: calc(100dvw - 10px) !important;
  max-height: calc(100dvh - 10px) !important;
  padding: clamp(28px, 6.8vmin, 38px) clamp(8px, 2vmin, 12px) clamp(8px, 2vmin, 12px) !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileMenuBody {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileMenuPane.active {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileInventoryPane {
  height: 100% !important;
  min-height: 0 !important;
}

body.mobile-ui .mobileBackpackTabs {
  margin: 0 82px 5px 0 !important;
  min-height: clamp(20px, 5.2vmin, 28px) !important;
}

body.mobile-ui .mobileInventoryContent {
  display: grid !important;
  grid-template-columns: auto minmax(180px, 1fr) minmax(150px, .82fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(6px, 1.6vmin, 12px) !important;
  align-items: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileEquipmentGrid {
  grid-template-columns: repeat(3, var(--mobile-menu-slot-v16)) !important;
  grid-template-rows: repeat(4, var(--mobile-menu-slot-v16)) !important;
  gap: var(--mobile-menu-gap-v16) !important;
  margin-top: 0 !important;
  align-self: start !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid,
body.mobile-ui .mobileDepotGrid {
  grid-template-columns: repeat(auto-fill, minmax(var(--mobile-menu-slot-v16), 1fr)) !important;
  grid-auto-rows: var(--mobile-menu-slot-v16) !important;
  gap: var(--mobile-menu-gap-v16) !important;
  justify-content: stretch !important;
  align-content: start !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid {
  min-width: calc((var(--mobile-menu-slot-v16) * 4) + (var(--mobile-menu-gap-v16) * 3)) !important;
}

body.mobile-ui .mobileDepotPanel {
  width: auto !important;
  min-width: calc((var(--mobile-menu-slot-v16) * 3) + (var(--mobile-menu-gap-v16) * 2) + 14px) !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 7px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.mobile-ui .mobileDepotHead {
  flex: 0 0 auto !important;
}

body.mobile-ui .mobileDepotGrid {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.mobile-ui .mobileEquipmentSlot,
body.mobile-ui .mobileInventorySlot,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot {
  overflow: hidden !important;
  width: 100% !important;
  height: var(--mobile-menu-slot-v16) !important;
  min-width: 0 !important;
  min-height: var(--mobile-menu-slot-v16) !important;
  max-width: none !important;
  max-height: var(--mobile-menu-slot-v16) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, rgba(20, 21, 24, .95) 0 56%, rgba(10, 10, 12, .98) 57% 100%) !important;
  border: 1px solid rgba(184, 166, 118, .72) !important;
  box-shadow: inset 0 0 0 3px rgba(6, 6, 8, .72), inset 0 0 10px rgba(0, 0, 0, .9), 0 1px 2px rgba(0,0,0,.6) !important;
}

body.mobile-ui .mobileEquipmentSlot::after,
body.mobile-ui .mobileInventorySlot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(210, 190, 132, .86) 55% 59%, rgba(34, 27, 17, .96) 60% 100%);
  pointer-events: none;
  z-index: 5;
}

body.mobile-ui .mobileEquipmentSlot > img,
body.mobile-ui .mobileEquipmentSlot > canvas,
body.mobile-ui .mobileInventorySlot > img,
body.mobile-ui .mobileInventorySlot > canvas,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot > canvas,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot > img,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot > canvas {
  width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;
  object-fit: contain !important;
  z-index: 2 !important;
}

body.mobile-ui .mobileInventoryQty {
  z-index: 6 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileMenuWindow {
    width: calc(100dvw - 8px) !important;
    height: min(78dvh, 660px) !important;
  }

  body.mobile-ui .mobileInventoryContent {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(156px, 1fr) minmax(128px, .72fr) !important;
  }

  body.mobile-ui .mobileEquipmentGrid {
    display: none !important;
  }

  body.mobile-ui .mobileDepotPanel {
    min-width: 0 !important;
  }

  body.mobile-ui #chatBox {
    width: min(72dvw, 330px) !important;
    bottom: calc(var(--mobile-bottom-safe) + var(--mobile-chat-button) + 10px) !important;
  }
}

/* ROR mobile v17: final backpack fit, chat sizing and circular slot layering */
body.mobile-ui {
  --mobile-chat-button: clamp(22px, 6.2vmin, 30px) !important;
  --mobile-menu-slot-v16: clamp(40px, 9.5vmin, 48px) !important;
}

body.mobile-ui #mobileTopButtons #mobileChatToggleBtn.mobileImageButton,
body.mobile-ui #mobileTopButtons #mobileHotkeyToggleBtn.mobileImageButton {
  width: var(--mobile-chat-button) !important;
  height: var(--mobile-chat-button) !important;
  min-width: var(--mobile-chat-button) !important;
  min-height: var(--mobile-chat-button) !important;
  max-width: var(--mobile-chat-button) !important;
  max-height: var(--mobile-chat-button) !important;
}

body.mobile-ui #mobileTopButtons #mobileChatToggleBtn.mobileImageButton {
  left: calc(50dvw + 4px) !important;
  right: auto !important;
  bottom: calc(var(--mobile-bottom-safe) + 3px) !important;
  top: auto !important;
}

body.mobile-ui #mobileTopButtons #mobileHotkeyToggleBtn.mobileImageButton {
  left: calc(50dvw - var(--mobile-chat-button) - 4px) !important;
  right: auto !important;
  bottom: calc(var(--mobile-bottom-safe) + 3px) !important;
  top: auto !important;
}

body.mobile-ui #mobileTopButtons #mobileChatToggleBtn.mobileImageButton span {
  font-size: clamp(9px, 2.25vmin, 12px) !important;
  line-height: 1 !important;
}

body.mobile-ui #chatBox:not(.mobileHidden) {
  display: flex !important;
}

body.mobile-ui #chatBox {
  left: 50dvw !important;
  right: auto !important;
  bottom: calc(var(--mobile-bottom-safe) + var(--mobile-chat-button) + 9px) !important;
  transform: translateX(-50%) !important;
  width: min(58dvw, 380px) !important;
  max-width: calc(100dvw - 20px) !important;
}

body.mobile-ui #mobileInventoryPanel:not([hidden]) {
  padding: max(4px, var(--mobile-safe-y)) max(4px, var(--mobile-safe-x)) !important;
}

body.mobile-ui .mobileMenuWindow {
  display: flex !important;
  flex-direction: column !important;
  --mobile-menu-slot: var(--mobile-menu-slot-v16) !important;
  width: min(90dvw, 780px) !important;
  height: min(82dvh, 540px) !important;
  max-width: calc(100dvw - 8px) !important;
  max-height: calc(100dvh - 8px) !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileMenuTabs {
  flex: 0 0 auto !important;
}

body.mobile-ui .mobileMenuBody {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileMenuPane.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileInventoryPane {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileInventoryContent {
  flex: 1 1 auto !important;
  grid-template-columns:
    auto
    minmax(calc((var(--mobile-menu-slot-v16) * 4) + (var(--mobile-menu-gap-v16) * 3)), 1fr)
    minmax(calc((var(--mobile-menu-slot-v16) * 3) + (var(--mobile-menu-gap-v16) * 2) + 14px), .78fr) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid,
body.mobile-ui #mobileDepotGrid {
  grid-template-columns: repeat(auto-fill, minmax(var(--mobile-menu-slot-v16), 1fr)) !important;
  grid-auto-rows: var(--mobile-menu-slot-v16) !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid {
  min-width: calc((var(--mobile-menu-slot-v16) * 4) + (var(--mobile-menu-gap-v16) * 3)) !important;
}

body.mobile-ui #mobileDepotPanel {
  min-width: calc((var(--mobile-menu-slot-v16) * 3) + (var(--mobile-menu-gap-v16) * 2) + 14px) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.mobile-ui #mobileDepotGrid {
  width: 100% !important;
  flex: 1 1 auto !important;
}

body.mobile-ui .mobileInventorySlot,
body.mobile-ui .mobileEquipmentSlot,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 50% !important;
}

body.mobile-ui .mobileInventorySlot > img,
body.mobile-ui .mobileInventorySlot > canvas,
body.mobile-ui .mobileEquipmentSlot > img,
body.mobile-ui .mobileEquipmentSlot > canvas,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot > canvas {
  opacity: 1 !important;
  visibility: visible !important;
  width: 70% !important;
  height: 70% !important;
  max-width: 70% !important;
  max-height: 70% !important;
  z-index: 2 !important;
}

body.mobile-ui .mobileSkillSlot canvas,
body.mobile-ui .mobileSkillSlot > img {
  opacity: 1 !important;
  visibility: visible !important;
  left: 16% !important;
  top: 16% !important;
  width: 72% !important;
  height: 72% !important;
  max-width: 72% !important;
  max-height: 72% !important;
  z-index: 2 !important;
}

body.mobile-ui .mobileSkillSlot::after {
  z-index: 5 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileMenuWindow {
    width: calc(100dvw - 8px) !important;
    height: min(78dvh, 660px) !important;
  }

  body.mobile-ui .mobileInventoryContent {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(160px, .88fr) minmax(128px, .68fr) !important;
  }

  body.mobile-ui #mobileDepotPanel {
    min-width: 0 !important;
  }

  body.mobile-ui #mobileDepotGrid {
    grid-template-columns: repeat(auto-fill, minmax(var(--mobile-menu-slot-v16), 1fr)) !important;
  }

  body.mobile-ui #chatBox {
    width: min(72dvw, 330px) !important;
  }
}

/* ROR mobile v18: inventory grid placement fix */
body.mobile-ui #mobileInventoryGrid[hidden],
body.mobile-ui #mobileBackpackGrid[hidden],
body.mobile-ui #mobileMonsterBagGrid[hidden] {
  display: none !important;
}

body.mobile-ui .mobileInventoryContent:not(.mobileMonsterBagContent) {
  grid-template-columns:
    auto
    minmax(calc((var(--mobile-menu-slot-v16) * 4) + (var(--mobile-menu-gap-v16) * 3)), 1fr)
    minmax(calc((var(--mobile-menu-slot-v16) * 3) + (var(--mobile-menu-gap-v16) * 2) + 14px), .78fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.mobile-ui .mobileInventoryContent > .mobileEquipmentGrid {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileInventoryContent > #mobileInventoryGrid,
body.mobile-ui .mobileInventoryContent > #mobileBackpackGrid {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileMonsterBagContent {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.mobile-ui .mobileMonsterBagContent > #mobileMonsterBagGrid {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid,
body.mobile-ui #mobileDepotGrid {
  height: 100% !important;
  max-height: 100% !important;
}

body.mobile-ui .mobileInventoryContent,
body.mobile-ui .mobileInventoryContent > #mobileInventoryGrid,
body.mobile-ui .mobileInventoryContent > #mobileBackpackGrid,
body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
  align-self: stretch !important;
  min-height: 0 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileInventoryContent:not(.mobileMonsterBagContent) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(160px, .88fr) minmax(128px, .68fr) !important;
  }

  body.mobile-ui .mobileInventoryContent > #mobileInventoryGrid,
  body.mobile-ui .mobileInventoryContent > #mobileBackpackGrid {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

/* ROR mobile v19: constrain backpack/depot height inside modal */
body.mobile-ui .mobileMenuBody,
body.mobile-ui .mobileMenuPane.active,
body.mobile-ui .mobileInventoryPane {
  max-height: calc(100dvh - 92px) !important;
}

body.mobile-ui .mobileInventoryContent:not(.mobileMonsterBagContent) {
  height: calc(100dvh - 170px) !important;
  max-height: calc(100dvh - 170px) !important;
  min-height: 148px !important;
}

body.mobile-ui .mobileMonsterBagContent {
  height: calc(100dvh - 150px) !important;
  max-height: calc(100dvh - 150px) !important;
  min-height: 160px !important;
}

body.mobile-ui .mobileInventoryContent > #mobileInventoryGrid,
body.mobile-ui .mobileInventoryContent > #mobileBackpackGrid,
body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
  height: 100% !important;
  max-height: 100% !important;
}

body.mobile-ui #mobileDepotGrid {
  height: auto !important;
  max-height: 100% !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileInventoryContent:not(.mobileMonsterBagContent) {
    height: calc(78dvh - 96px) !important;
    max-height: calc(78dvh - 96px) !important;
    min-height: 300px !important;
  }

  body.mobile-ui .mobileMonsterBagContent {
    height: calc(78dvh - 84px) !important;
    max-height: calc(78dvh - 84px) !important;
  }
}

/* ROR mobile v20: portrait action buttons stay inside viewport */
@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileAttackBtn,
  body.mobile-ui #mobilePickupBtn {
    left: auto !important;
    right: calc(var(--mobile-safe-x) + 12px) !important;
    bottom: auto !important;
  }

  body.mobile-ui #mobileAttackBtn {
    top: calc(50dvh - var(--mobile-action-control) - 10px) !important;
  }

  body.mobile-ui #mobilePickupBtn {
    top: calc(50dvh + 10px) !important;
  }
}

/* ROR mobile v21: fixed joystick and cancel target button */
body.mobile-ui {
  --mobile-cancel-control: clamp(48px, 13.2vmin, 72px);
}

body.mobile-ui #mobileJoystickWrap.dynamic-active {
  transform: none !important;
}

body.mobile-ui #mobileCancelTargetBtn {
  position: absolute !important;
  left: auto !important;
  right: calc(var(--mobile-safe-x) + 12px) !important;
  top: 52.5dvh !important;
  bottom: auto !important;
  width: var(--mobile-cancel-control) !important;
  height: var(--mobile-cancel-control) !important;
  min-width: var(--mobile-cancel-control) !important;
  min-height: var(--mobile-cancel-control) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  z-index: 311 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body.mobile-ui #mobileCancelTargetBtn span {
  display: grid !important;
  place-items: center !important;
  width: 78% !important;
  height: 78% !important;
  margin: 11% !important;
  border: 2px solid rgba(196, 84, 66, .88) !important;
  border-radius: 50% !important;
  color: #f8dfbd !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(122, 45, 34, .98) 0 26%, rgba(58, 18, 13, .98) 58%, rgba(10, 4, 3, .98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 178, .2),
    inset 0 -5px 10px rgba(0, 0, 0, .55),
    0 3px 8px rgba(0, 0, 0, .55) !important;
  font: 800 clamp(19px, 5.6vmin, 30px) / 1 Arial, sans-serif !important;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .75) !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileCancelTargetBtn:active span {
  transform: scale(.94);
  filter: brightness(1.18);
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileCancelTargetBtn {
    right: calc(var(--mobile-safe-x) + 17px) !important;
    top: calc(50dvh + var(--mobile-action-control) + 22px) !important;
  }
}

/* ROR mobile v23: keep spell icons inside the slot face, below only the rim */
body.mobile-ui .mobileSkillSlot,
body.mobile-ui .mobileSkillSlot.empty {
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.mobile-ui .mobileSkillSlot::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: url("./assets/interfacemobileicon/slotsmobile.png?v=20260628-004") center / contain no-repeat !important;
  pointer-events: none !important;
}

body.mobile-ui .mobileSkillSlot canvas,
body.mobile-ui .mobileSkillSlot > img {
  position: absolute !important;
  left: 15% !important;
  top: 15% !important;
  width: 70% !important;
  height: 70% !important;
  max-width: 70% !important;
  max-height: 70% !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  clip-path: circle(48% at 50% 50%) !important;
  image-rendering: pixelated !important;
}

body.mobile-ui .mobileSkillSlot::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 52%,
      rgba(235, 209, 150, .72) 53% 57%,
      rgba(45, 32, 18, .92) 58% 66%,
      transparent 67% 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(245, 221, 160, .28),
    inset 0 0 10px rgba(0, 0, 0, .55) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  pointer-events: none !important;
}

body.mobile-ui .mobileSkillCooldown {
  z-index: 3 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileSkillCooldownText,
body.mobile-ui .mobileSkillKey,
body.mobile-ui .mobileSkillQty {
  z-index: 6 !important;
}

/* ROR mobile v25: split backpack panels, PC-like item slots and responsive joystick */
.mobileSettingsAccountGroup {
  display: block;
}

body.mobile-ui .mobileSettingsAccountGroup {
  display: block;
}

body.mobile-ui .mobileSettingsAccountGroup .settingsLogoutBtn {
  width: 100%;
  margin-top: 10px;
  border-color: rgba(193, 87, 72, .7);
  background: linear-gradient(180deg, rgba(89, 38, 32, .96), rgba(35, 14, 13, .96));
  color: #ffe3d3;
  font-weight: 800;
}

body.mobile-ui .mobileSettingsAccountGroup .accountEmailMeta,
body.mobile-ui .mobileSettingsAccountGroup .settingsLogoutBtn {
  width: 100%;
}

body.mobile-ui {
  --mobile-joystick-size-v25: clamp(66px, 22vmin, 104px);
  --mobile-menu-slot-v25: clamp(38px, 10.8vmin, 46px);
  --mobile-menu-gap-v25: clamp(3px, .9vmin, 5px);
}

body.mobile-ui #mobileJoystickWrap {
  width: var(--mobile-joystick-size-v25) !important;
  height: var(--mobile-joystick-size-v25) !important;
  max-width: min(30dvw, 30dvh, 104px) !important;
  max-height: min(30dvw, 30dvh, 104px) !important;
}

body.mobile-ui #mobileJoystickWrap > .mobileHudImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.mobile-ui .mobileInventoryContent:not(.mobileMonsterBagContent) {
  grid-template-columns:
    auto
    minmax(calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)), 1fr)
    minmax(calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)), 1fr)
    minmax(calc((var(--mobile-menu-slot-v25) * 3) + (var(--mobile-menu-gap-v25) * 2) + 14px), .78fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: clamp(5px, 1.35vmin, 9px) !important;
  overflow: hidden !important;
}

body.mobile-ui .mobileInventoryContent > .mobileEquipmentGrid {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileInventoryContent > .mobileInventoryMainPanel {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileInventoryContent > .mobileBackpackPanel {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

body.mobile-ui .mobileInventorySection,
body.mobile-ui #mobileDepotPanel {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  padding: 7px !important;
  border: 1px solid rgba(125, 101, 62, .72) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(43, 39, 31, .94), rgba(17, 17, 16, .96)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 224, 151, .08), 0 1px 4px rgba(0, 0, 0, .35) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

body.mobile-ui .mobileInventorySectionHead {
  min-height: 22px !important;
  margin-bottom: 5px !important;
  border-bottom: 1px solid rgba(169, 139, 83, .24) !important;
}

body.mobile-ui .mobileInventorySection > #mobileInventoryGrid,
body.mobile-ui .mobileInventorySection > #mobileBackpackGrid,
body.mobile-ui #mobileDepotGrid {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  padding: 2px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid,
body.mobile-ui #mobileMonsterBagGrid,
body.mobile-ui #mobileDepotGrid {
  grid-template-columns: repeat(auto-fill, minmax(var(--mobile-menu-slot-v25), var(--mobile-menu-slot-v25))) !important;
  grid-auto-rows: var(--mobile-menu-slot-v25) !important;
  gap: var(--mobile-menu-gap-v25) !important;
  justify-content: center !important;
  align-content: start !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot {
  width: var(--mobile-menu-slot-v25) !important;
  height: var(--mobile-menu-slot-v25) !important;
  min-width: var(--mobile-menu-slot-v25) !important;
  min-height: var(--mobile-menu-slot-v25) !important;
  max-width: var(--mobile-menu-slot-v25) !important;
  max-height: var(--mobile-menu-slot-v25) !important;
  border-radius: 5px !important;
  border: 1px solid rgba(117, 97, 61, .92) !important;
  background: linear-gradient(180deg, rgba(42, 39, 35, .98), rgba(17, 17, 18, .98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .68),
    inset 0 2px 4px rgba(255, 230, 165, .08),
    0 1px 2px rgba(0, 0, 0, .58) !important;
  overflow: hidden !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot::after,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot::after,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot::after,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot::after,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 1 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 231, 170, .08) !important;
  background: rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileMonsterBagGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileDepotGrid > .mobileInventorySlot > canvas,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot > img,
body.mobile-ui .mobileDepotGrid > .mobileInventorySlot > canvas {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  border-radius: 2px !important;
  clip-path: none !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  z-index: 2 !important;
}

body.mobile-ui .mobileInventoryQty {
  z-index: 4 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileJoystickWrap {
    width: clamp(62px, 21vmin, 92px) !important;
    height: clamp(62px, 21vmin, 92px) !important;
  }

  body.mobile-ui .mobileInventoryContent:not(.mobileMonsterBagContent) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows:
      minmax(122px, 1fr)
      minmax(122px, 1fr)
      minmax(110px, .8fr) !important;
  }

  body.mobile-ui .mobileInventoryContent > .mobileEquipmentGrid {
    display: none !important;
  }

  body.mobile-ui .mobileInventoryContent > .mobileInventoryMainPanel,
  body.mobile-ui .mobileInventoryContent > .mobileBackpackPanel,
  body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
    grid-column: 1 !important;
  }

  body.mobile-ui .mobileInventoryContent > .mobileInventoryMainPanel {
    grid-row: 1 !important;
  }

  body.mobile-ui .mobileInventoryContent > .mobileBackpackPanel {
    grid-row: 2 !important;
  }

  body.mobile-ui .mobileInventoryContent > #mobileDepotPanel {
    grid-row: 3 !important;
  }
}

/* ROR mobile v26: inventory/backpack grids always keep at least four item columns */
body.mobile-ui .mobileInventoryMainPanel,
body.mobile-ui .mobileBackpackPanel {
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3) + 18px) !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid {
  grid-template-columns: repeat(auto-fill, minmax(var(--mobile-menu-slot-v25), var(--mobile-menu-slot-v25))) !important;
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  max-width: none !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot {
  justify-self: center !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileInventoryMainPanel,
  body.mobile-ui .mobileBackpackPanel {
    min-width: 0 !important;
  }

  body.mobile-ui #mobileInventoryGrid,
  body.mobile-ui #mobileBackpackGrid {
    grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
    min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
    justify-content: center !important;
  }
}

/* ROR mobile v27 final override: joystick requested size, opacity and right shift */
body.mobile-ui {
  --mobile-joystick-size-v27: clamp(86px, 28.6vmin, 135px);
}

body.mobile-ui #mobileJoystickWrap {
  left: 15.095% !important;
  width: var(--mobile-joystick-size-v27) !important;
  height: var(--mobile-joystick-size-v27) !important;
  max-width: min(39dvw, 39dvh, 135px) !important;
  max-height: min(39dvw, 39dvh, 135px) !important;
  opacity: .8 !important;
}

body.mobile-ui #mobileJoystickWrap > .mobileHudImage {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileJoystickWrap {
    left: 15.095% !important;
    width: clamp(80px, 27.3vmin, 120px) !important;
    height: clamp(80px, 27.3vmin, 120px) !important;
    max-width: min(39dvw, 39dvh, 120px) !important;
    max-height: min(39dvw, 39dvh, 120px) !important;
  }
}

/* ROR mobile v29 final override: joystick back 10% to the left */
body.mobile-ui #mobileJoystickWrap {
  left: 5.095% !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui #mobileJoystickWrap {
    left: 5.095% !important;
  }
}

/* ROR mobile v28 final override: equipment square, inventory/backpacks exactly 4 columns */
body.mobile-ui .mobileInventoryMainPanel,
body.mobile-ui .mobileBackpackPanel {
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3) + 18px) !important;
  overflow-x: hidden !important;
}

body.mobile-ui #mobileInventoryGrid,
body.mobile-ui #mobileBackpackGrid {
  display: grid !important;
  grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
  grid-auto-rows: var(--mobile-menu-slot-v25) !important;
  gap: var(--mobile-menu-gap-v25) !important;
  min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  max-width: 100% !important;
  justify-content: center !important;
  align-content: start !important;
  justify-items: center !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot,
body.mobile-ui .mobileEquipmentSlot {
  width: var(--mobile-menu-slot-v25) !important;
  height: var(--mobile-menu-slot-v25) !important;
  min-width: var(--mobile-menu-slot-v25) !important;
  min-height: var(--mobile-menu-slot-v25) !important;
  max-width: var(--mobile-menu-slot-v25) !important;
  max-height: var(--mobile-menu-slot-v25) !important;
  border-radius: 5px !important;
  border: 1px solid rgba(117, 97, 61, .92) !important;
  background: linear-gradient(180deg, rgba(42, 39, 35, .98), rgba(17, 17, 18, .98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .68),
    inset 0 2px 4px rgba(255, 230, 165, .08),
    0 1px 2px rgba(0, 0, 0, .58) !important;
  overflow: hidden !important;
  aspect-ratio: auto !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot::after,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot::after,
body.mobile-ui .mobileEquipmentSlot::after {
  content: "" !important;
  position: absolute !important;
  inset: 2px !important;
  z-index: 1 !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255, 231, 170, .08) !important;
  background: rgba(0, 0, 0, .18) !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileInventoryGrid > .mobileInventorySlot > canvas,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > img,
body.mobile-ui #mobileBackpackGrid > .mobileInventorySlot > canvas,
body.mobile-ui .mobileEquipmentSlot > img,
body.mobile-ui .mobileEquipmentSlot > canvas {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  border-radius: 2px !important;
  clip-path: none !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  z-index: 2 !important;
}

@media (max-width: 520px) and (orientation: portrait) {
  body.mobile-ui .mobileInventoryMainPanel,
  body.mobile-ui .mobileBackpackPanel {
    min-width: 0 !important;
  }

  body.mobile-ui #mobileInventoryGrid,
  body.mobile-ui #mobileBackpackGrid {
    grid-template-columns: repeat(4, var(--mobile-menu-slot-v25)) !important;
    width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
    min-width: calc((var(--mobile-menu-slot-v25) * 4) + (var(--mobile-menu-gap-v25) * 3)) !important;
  }
}


/* ROR editor restoration: clean screen with HOME and header-only minimize with END */
body.editor-clean-mode {
  --hud-side-space: 0px !important;
  --bottom-hud-space: 0px !important;
  --ror-left-sidebar-width: 0px !important;
  --ror-right-sidebar-width: 0px !important;
}

body.editor-clean-mode #leftPullHub,
body.editor-clean-mode #leftPullPanel,
body.editor-clean-mode #rightPullHub,
body.editor-clean-mode #rightPullPanel,
body.editor-clean-mode #rightHubPanel,
body.editor-clean-mode #uiDock,
body.editor-clean-mode #bottomHud,
body.editor-clean-mode #chatBox,
body.editor-clean-mode #hotbarMount,
body.editor-clean-mode #settingsPanel,
body.editor-clean-mode #hudOverlay,
body.editor-clean-mode #mobileHud,
body.editor-clean-mode #mobileMapPanel,
body.editor-clean-mode #mobileInventoryPanel {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.editor-clean-mode #gameCanvas {
  width: 100vw !important;
  height: 100vh !important;
}

.editorHeaderActions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.editorHeaderBtn {
  padding: 4px 7px;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.editorHeaderBtn.active {
  border-color: #7adca9;
  background: #2f624d;
}

#mapEditor.editor-minimized {
  height: auto !important;
  min-height: 0 !important;
  resize: none !important;
  overflow: hidden !important;
}

#mapEditor.editor-minimized > :not(.editorHeader) {
  display: none !important;
}

#mapEditor.editor-minimized .editorHeader {
  align-items: center;
}


/* ROR multi-floor editor controls */
.editorFloorLabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(160, 190, 220, 0.42);
  border-radius: 6px;
  background: rgba(8, 13, 20, 0.72);
  color: #dbeaff;
  font-size: 12px;
  font-weight: 700;
}

body.mobile-ui .mobileEquipmentSlot {
  border-color: var(--mobile-equipment-tier-color, rgba(117, 97, 61, .92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .68),
    inset 0 2px 4px rgba(255, 230, 165, .08),
    0 0 0 1px var(--mobile-equipment-tier-glow, rgba(0, 0, 0, 0)),
    0 1px 2px rgba(0, 0, 0, .58) !important;
}

body.mobile-ui .mobileEquipmentSlot::after {
  border-color: var(--mobile-equipment-tier-inner, rgba(255, 231, 170, .08)) !important;
}

/* ROR mobile v37: AAA vitals cluster with tighter spacing and glass frame. */
body.mobile-ui {
  --ror-mobile-status-bar-w: clamp(140px, 36vmin, 160px);
  --ror-mobile-status-bar-h: 26px;
  --ror-mobile-status-row-h: 30px;
  --ror-mobile-status-icon-w: 30px;
  --ror-mobile-status-icon-h: 30px;
  --ror-mobile-status-icon-gap: 6px;
  --ror-mobile-top-icon-w: clamp(40px, 10.3vmin, 50px);
  --ror-mobile-top-icon-h: clamp(50px, 12.8vmin, 62px);
  --ror-mobile-action-attack: clamp(112px, 35.9vmin, 140px);
  --ror-mobile-action-pickup: clamp(79px, 25.4vmin, 99px);
}

body.mobile-ui #mobileHpIcon,
body.mobile-ui #mobileMpIcon,
body.mobile-ui #mobileXpIcon {
  left: calc(var(--mobile-safe-x) + var(--mobile-portrait-size) + 4px) !important;
  width: var(--ror-mobile-status-icon-w) !important;
  height: var(--ror-mobile-status-icon-h) !important;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .16))
    drop-shadow(0 0 5px rgba(0, 0, 0, .25)) !important;
}

body.mobile-ui #mobileHpBar,
body.mobile-ui #mobileMpBar,
body.mobile-ui #mobileXpBar {
  left: calc(var(--mobile-safe-x) + var(--mobile-portrait-size) + 4px + var(--ror-mobile-status-icon-w) + var(--ror-mobile-status-icon-gap)) !important;
  width: var(--ror-mobile-status-bar-w) !important;
  height: var(--ror-mobile-status-bar-h) !important;
  min-width: var(--ror-mobile-status-bar-w) !important;
  min-height: var(--ror-mobile-status-bar-h) !important;
  max-width: var(--ror-mobile-status-bar-w) !important;
  max-height: var(--ror-mobile-status-bar-h) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  background: rgba(4, 7, 10, .58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    0 2px 6px rgba(0, 0, 0, .16) !important;
  overflow: hidden !important;
}

body.mobile-ui #mobileHpIcon { top: calc(var(--mobile-safe-y) + 4px) !important; }
body.mobile-ui #mobileHpBar { top: calc(var(--mobile-safe-y) + 6px) !important; }
body.mobile-ui #mobileMpIcon { top: calc(var(--mobile-safe-y) + var(--ror-mobile-status-row-h) + 4px) !important; }
body.mobile-ui #mobileMpBar { top: calc(var(--mobile-safe-y) + var(--ror-mobile-status-row-h) + 6px) !important; }
body.mobile-ui #mobileXpIcon { top: calc(var(--mobile-safe-y) + var(--ror-mobile-status-row-h) + var(--ror-mobile-status-row-h) + 4px) !important; }
body.mobile-ui #mobileXpBar { top: calc(var(--mobile-safe-y) + var(--ror-mobile-status-row-h) + var(--ror-mobile-status-row-h) + 6px) !important; }

body.mobile-ui #mobileVitalsGlassFrame {
  overflow: hidden !important;
  pointer-events: none !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 36%, rgba(10, 18, 30, .14) 100%),
    rgba(7, 11, 17, .10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .24),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 0 0 1px rgba(0, 0, 0, .28),
    0 8px 18px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}

body.mobile-ui #mobileVitalsGlassFrame::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .22) !important;
  pointer-events: none !important;
}

body.mobile-ui #mobileVitalsGlassFrame::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 72%, rgba(0, 0, 0, .08) 100%) !important;
  opacity: .86 !important;
  pointer-events: none !important;
}

body.mobile-ui .mobileImageBar .mobileStatFill,
body.mobile-ui .mobileBarBack {
  border-radius: 8px !important;
}

body.mobile-ui .mobileImageBar .mobileStatValue,
body.mobile-ui .mobileStatValue {
  font-size: clamp(7px, 1.9vmin, 9px) !important;
  line-height: 1 !important;
}

body.mobile-ui #mobileSettingsToggleBtn,
body.mobile-ui #mobileMapToggleBtn,
body.mobile-ui #mobileInventoryToggleBtn,
body.mobile-ui #mobileAutoChaseToggleBtn,
body.mobile-ui #mobileCombatStanceBtn,
body.mobile-ui #mobilePvpToggleBtn {
  width: var(--ror-mobile-top-icon-w) !important;
  height: var(--ror-mobile-top-icon-h) !important;
  min-width: var(--ror-mobile-top-icon-w) !important;
  min-height: var(--ror-mobile-top-icon-h) !important;
  max-width: var(--ror-mobile-top-icon-w) !important;
  max-height: var(--ror-mobile-top-icon-h) !important;
}

body.mobile-ui #mobileSettingsToggleBtn > img,
body.mobile-ui #mobileMapToggleBtn > img,
body.mobile-ui #mobileInventoryToggleBtn > img,
body.mobile-ui #mobileAutoChaseToggleBtn > img,
body.mobile-ui #mobileCombatStanceBtn > img,
body.mobile-ui #mobilePvpToggleBtn > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

body.mobile-ui #mobileSettingsToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileMapToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--ror-mobile-top-icon-w) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileInventoryToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileAutoChaseToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobileCombatStanceBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }
body.mobile-ui #mobilePvpToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-w) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap) + var(--mobile-top-gap)) !important; }

body.mobile-ui #mobileAttackBtn {
  width: var(--ror-mobile-action-attack) !important;
  height: var(--ror-mobile-action-attack) !important;
  min-width: var(--ror-mobile-action-attack) !important;
  min-height: var(--ror-mobile-action-attack) !important;
  max-width: var(--ror-mobile-action-attack) !important;
  max-height: var(--ror-mobile-action-attack) !important;
}

body.mobile-ui #mobilePickupBtn {
  width: var(--ror-mobile-action-pickup) !important;
  height: var(--ror-mobile-action-pickup) !important;
  min-width: var(--ror-mobile-action-pickup) !important;
  min-height: var(--ror-mobile-action-pickup) !important;
  max-width: var(--ror-mobile-action-pickup) !important;
  max-height: var(--ror-mobile-action-pickup) !important;
}

body.mobile-ui #mobileAttackBtn > img,
body.mobile-ui #mobilePickupBtn > img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ROR mobile HUD correction v38: harmoniza perfil/barras, moldura, botões superiores e pegar item. */
body.mobile-ui {
  --ror-mobile-vitals-x: max(6px, env(safe-area-inset-left, 0px)) !important;
  --ror-mobile-vitals-y: max(5px, env(safe-area-inset-top, 0px)) !important;
  --ror-mobile-portrait-size: clamp(66px, 17.2vmin, 82px) !important;
  --ror-mobile-status-icon-w: 30px !important;
  --ror-mobile-status-icon-h: 30px !important;
  --ror-mobile-status-icon-gap: 6px !important;
  --ror-mobile-status-bar-w: clamp(150px, 38vmin, 178px) !important;
  --ror-mobile-status-bar-h: 18px !important;
  --ror-mobile-status-row-h: 28px !important;
  --ror-mobile-vitals-pad: 8px !important;
  --ror-mobile-top-icon-w: 48px !important;
  --ror-mobile-top-icon-h: 48px !important;
  --ror-mobile-top-icon-gap: 8px !important;
  --ror-mobile-action-attack: clamp(112px, 35.9vmin, 140px) !important;
  --ror-mobile-action-pickup: clamp(66px, 18.8vmin, 78px) !important;
}

body.mobile-ui #mobileVitalsGlassFrame {
  left: var(--ror-mobile-vitals-x) !important;
  top: var(--ror-mobile-vitals-y) !important;
  width: calc(var(--ror-mobile-portrait-size) + var(--ror-mobile-status-icon-w) + var(--ror-mobile-status-icon-gap) + var(--ror-mobile-status-bar-w) + 28px) !important;
  height: calc((var(--ror-mobile-vitals-pad) * 2) + (var(--ror-mobile-status-row-h) * 3) + 4px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.mobile-ui #mobilePortraitWrap {
  left: calc(var(--ror-mobile-vitals-x) + var(--ror-mobile-vitals-pad)) !important;
  top: calc(var(--ror-mobile-vitals-y) + ((var(--ror-mobile-status-row-h) * 3 + 4px - var(--ror-mobile-portrait-size)) / 2) + var(--ror-mobile-vitals-pad)) !important;
  width: var(--ror-mobile-portrait-size) !important;
  height: var(--ror-mobile-portrait-size) !important;
  transform: none !important;
  z-index: 263 !important;
}

body.mobile-ui #mobileHpIcon,
body.mobile-ui #mobileMpIcon,
body.mobile-ui #mobileXpIcon {
  left: calc(var(--ror-mobile-vitals-x) + var(--ror-mobile-vitals-pad) + var(--ror-mobile-portrait-size) + 8px) !important;
  width: var(--ror-mobile-status-icon-w) !important;
  height: var(--ror-mobile-status-icon-h) !important;
  max-width: var(--ror-mobile-status-icon-w) !important;
  max-height: var(--ror-mobile-status-icon-h) !important;
  transform: none !important;
  object-fit: contain !important;
  z-index: 264 !important;
}

body.mobile-ui #mobileHpBar,
body.mobile-ui #mobileMpBar,
body.mobile-ui #mobileXpBar {
  left: calc(var(--ror-mobile-vitals-x) + var(--ror-mobile-vitals-pad) + var(--ror-mobile-portrait-size) + 8px + var(--ror-mobile-status-icon-w) + var(--ror-mobile-status-icon-gap)) !important;
  width: var(--ror-mobile-status-bar-w) !important;
  height: var(--ror-mobile-status-bar-h) !important;
  min-width: var(--ror-mobile-status-bar-w) !important;
  min-height: var(--ror-mobile-status-bar-h) !important;
  max-width: var(--ror-mobile-status-bar-w) !important;
  max-height: var(--ror-mobile-status-bar-h) !important;
  border-radius: 7px !important;
  transform: none !important;
  z-index: 263 !important;
}

body.mobile-ui #mobileHpIcon { top: calc(var(--ror-mobile-vitals-y) + var(--ror-mobile-vitals-pad) + 0px) !important; }
body.mobile-ui #mobileHpBar { top: calc(var(--ror-mobile-vitals-y) + var(--ror-mobile-vitals-pad) + 6px) !important; }
body.mobile-ui #mobileMpIcon { top: calc(var(--ror-mobile-vitals-y) + var(--ror-mobile-vitals-pad) + var(--ror-mobile-status-row-h)) !important; }
body.mobile-ui #mobileMpBar { top: calc(var(--ror-mobile-vitals-y) + var(--ror-mobile-vitals-pad) + var(--ror-mobile-status-row-h) + 6px) !important; }
body.mobile-ui #mobileXpIcon { top: calc(var(--ror-mobile-vitals-y) + var(--ror-mobile-vitals-pad) + (var(--ror-mobile-status-row-h) * 2)) !important; }
body.mobile-ui #mobileXpBar { top: calc(var(--ror-mobile-vitals-y) + var(--ror-mobile-vitals-pad) + (var(--ror-mobile-status-row-h) * 2) + 6px) !important; }

body.mobile-ui #mobileSettingsToggleBtn,
body.mobile-ui #mobileMapToggleBtn,
body.mobile-ui #mobileInventoryToggleBtn,
body.mobile-ui #mobileAutoChaseToggleBtn,
body.mobile-ui #mobileCombatStanceBtn,
body.mobile-ui #mobilePvpToggleBtn {
  width: var(--ror-mobile-top-icon-w) !important;
  height: var(--ror-mobile-top-icon-h) !important;
  min-width: var(--ror-mobile-top-icon-w) !important;
  min-height: var(--ror-mobile-top-icon-h) !important;
  max-width: var(--ror-mobile-top-icon-w) !important;
  max-height: var(--ror-mobile-top-icon-h) !important;
  border-radius: 9px !important;
}

body.mobile-ui #mobileSettingsToggleBtn > img,
body.mobile-ui #mobileMapToggleBtn > img,
body.mobile-ui #mobileInventoryToggleBtn > img,
body.mobile-ui #mobileAutoChaseToggleBtn > img,
body.mobile-ui #mobileCombatStanceBtn > img,
body.mobile-ui #mobilePvpToggleBtn > img {
  width: 78% !important;
  height: 78% !important;
  max-width: 78% !important;
  max-height: 78% !important;
  object-fit: contain !important;
}

body.mobile-ui #mobileSettingsToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + var(--ror-mobile-top-icon-gap)) !important; }
body.mobile-ui #mobileMapToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + (var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-gap)) * 1 + var(--ror-mobile-top-icon-gap)) !important; }
body.mobile-ui #mobileInventoryToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + (var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-gap)) * 2 + var(--ror-mobile-top-icon-gap)) !important; }
body.mobile-ui #mobileAutoChaseToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + (var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-gap)) * 3 + var(--ror-mobile-top-icon-gap)) !important; }
body.mobile-ui #mobileCombatStanceBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + (var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-gap)) * 4 + var(--ror-mobile-top-icon-gap)) !important; }
body.mobile-ui #mobilePvpToggleBtn { right: calc(var(--mobile-safe-x) + var(--mobile-minimap-w) + (var(--ror-mobile-top-icon-w) + var(--ror-mobile-top-icon-gap)) * 5 + var(--ror-mobile-top-icon-gap)) !important; }

body.mobile-ui #mobilePickupBtn {
  width: var(--ror-mobile-action-pickup) !important;
  height: var(--ror-mobile-action-pickup) !important;
  min-width: var(--ror-mobile-action-pickup) !important;
  min-height: var(--ror-mobile-action-pickup) !important;
  max-width: var(--ror-mobile-action-pickup) !important;
  max-height: var(--ror-mobile-action-pickup) !important;
  left: calc(86.611% - var(--ror-mobile-action-pickup) - 12px) !important;
  top: calc(36.154% + (var(--ror-mobile-action-attack) - var(--ror-mobile-action-pickup)) / 2) !important;
  transform: none !important;
  z-index: 311 !important;
}

body.mobile-ui #mobilePickupBtn > img {
  width: 82% !important;
  height: 82% !important;
  max-width: 82% !important;
  max-height: 82% !important;
  object-fit: contain !important;
}